@linxai/3d-web 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linxai/3d-web",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "3D 可视化 Web 组件",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -12,13 +12,14 @@
       "require": "./dist/index.js"
     }
   },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch",
-    "typecheck": "tsc --noEmit"
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
   },
   "dependencies": {
-    "@linxai/3d-shared": "workspace:*"
+    "@linxai/3d-shared": "0.1.2"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0.0",
@@ -30,5 +31,10 @@
     "@types/three": "^0.170.0",
     "tsup": "^8.0.0",
     "typescript": "^5.3.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/adapters/AnimationLoaderAdapter.ts

@@ -1,34 +0,0 @@
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
-import type { AnimationLoaderAdapter } from '@linxai/3d-shared/internal'
-
-/**
- * Web 端动画加载适配器
- * 使用 FBXLoader 从 URL 加载动画
- */
-export const WebAnimationLoaderAdapter: AnimationLoaderAdapter = {
-  load: async (path: string | number, onProgress?: (progress: number) => void) => {
-    // Web 平台：path 必须是 string (URL)
-    if (typeof path !== 'string') {
-      throw new Error('Web 端动画加载: path 必须是字符串 URL')
-    }
-
-    return new Promise((resolve, reject) => {
-      const loader = new FBXLoader()
-      loader.load(
-        path,
-        (fbx) => {
-          resolve(fbx)
-        },
-        (event) => {
-          if (event.lengthComputable && onProgress) {
-            onProgress(event.loaded / event.total)
-          }
-        },
-        (error) => {
-          reject(error)
-        }
-      )
-    })
-  },
-}
-

package/src/adapters/ModelLoaderAdapter.ts

@@ -1,34 +0,0 @@
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-import type { ModelLoaderAdapter } from '@linxai/3d-shared/internal'
-
-/**
- * Web 端模型加载适配器
- * 使用 GLTFLoader 从 URL 加载模型
- */
-export const WebModelLoaderAdapter: ModelLoaderAdapter = {
-  load: async (path: string | number, onProgress?: (progress: number) => void) => {
-    // Web 平台：path 必须是 string (URL)
-    if (typeof path !== 'string') {
-      throw new Error('Web 端模型加载: path 必须是字符串 URL')
-    }
-
-    return new Promise((resolve, reject) => {
-      const loader = new GLTFLoader()
-      loader.load(
-        path,
-        (gltf) => {
-          resolve(gltf)
-        },
-        (event) => {
-          if (event.lengthComputable && onProgress) {
-            onProgress(event.loaded / event.total)
-          }
-        },
-        (error) => {
-          reject(error)
-        }
-      )
-    })
-  },
-}
-

package/src/builders/SceneBuilder.tsx

@@ -1,91 +0,0 @@
-import { Canvas } from '@react-three/fiber'
-import { OrbitControls } from '@react-three/drei'
-import type { ReactNode, CSSProperties } from 'react'
-import type { SceneConfig, OrbitControlsConfig, GridHelperConfig } from '@linxai/3d-shared'
-import type { SceneBuilder as ISceneBuilder } from '@linxai/3d-shared/internal'
-import { SceneContent } from '@linxai/3d-shared'
-
-/**
- * Web 端场景构建器
- * 装配 Web 平台特定的 Canvas 和 OrbitControls
- */
-export const WebSceneBuilder: ISceneBuilder = {
-  /**
-   * 构建 Web 平台的 Canvas
-   */
-  buildCanvas: ({ children, config = {}, style, className }) => {
-    const {
-      cameraPosition = [0, 0, 5],
-      fov = 75,
-    } = config
-
-    return (
-      <Canvas
-        camera={{ position: cameraPosition, fov }}
-        style={style as CSSProperties}
-        className={className}
-      >
-        <SceneContent config={config}>
-          {children}
-        </SceneContent>
-      </Canvas>
-    )
-  },
-
-  /**
-   * 构建 Web 平台的 OrbitControls
-   */
-  buildOrbitControls: (config?: OrbitControlsConfig) => {
-    const {
-      enableDamping = true,
-      dampingFactor = 0.05,
-      enableRotate = true,
-      enableZoom = true,
-      enablePan = true,
-      minDistance,
-      maxDistance,
-      minPolarAngle,
-      maxPolarAngle,
-      target,
-    } = config || {}
-
-    return (
-      <OrbitControls
-        enableDamping={enableDamping}
-        dampingFactor={dampingFactor}
-        enableRotate={enableRotate}
-        enableZoom={enableZoom}
-        enablePan={enablePan}
-        minDistance={minDistance}
-        maxDistance={maxDistance}
-        minPolarAngle={minPolarAngle}
-        maxPolarAngle={maxPolarAngle}
-        target={target}
-      />
-    )
-  },
-
-  /**
-   * 构建 Web 平台的 GridHelper
-   */
-  buildGridHelper: (config?: GridHelperConfig) => {
-    if (!config || config?.visible === false) {
-      return null
-    }
-
-    const {
-      size = 10,
-      divisions = 10,
-      centerLineColor = '#888888',
-      gridColor = '#444444',
-    } = config || {}
-
-    return (
-      // @ts-ignore - R3F JSX 元素
-      <gridHelper
-        args={[size, divisions, centerLineColor, gridColor]}
-      />
-    )
-  },
-}
-

package/src/components/CharacterOverlay.tsx

@@ -1,183 +0,0 @@
-import { Subtitle } from './Subtitle'
-
-export interface CharacterOverlayProps {
-  /** 是否显示浮层 */
-  visible?: boolean
-  /** 当前字幕文本 */
-  subtitle?: string
-  /** 是否显示字幕 */
-  showSubtitle?: boolean
-  /** 是否显示说话按钮 */
-  showSpeakButton?: boolean
-  /** 是否正在连接/加载 */
-  isLoading?: boolean
-  /** 是否已连接 */
-  isConnected?: boolean
-  /** 开始说话回调 */
-  onStartSpeak?: () => void
-  /** 停止说话回调 */
-  onStopSpeak?: () => void
-  /** 按钮点击回调（用于外部控制连接状态） */
-  onButtonClick?: () => void
-  /** 字幕样式 */
-  subtitleStyle?: React.CSSProperties
-  /** 容器样式 */
-  style?: React.CSSProperties
-}
-
-/**
- * 角色浮层组件
- * 包含说话控制按钮和字幕显示
- * 
- * 纯 UI 组件，基于 props 驱动，不包含业务逻辑
- */
-export function CharacterOverlay({
-  visible = true,
-  subtitle = '',
-  showSubtitle = true,
-  showSpeakButton = true,
-  isLoading = false,
-  isConnected = false,
-  onStartSpeak,
-  onStopSpeak,
-  onButtonClick,
-  subtitleStyle,
-  style,
-}: CharacterOverlayProps) {
-  if (!visible) return null
-
-  const handleSpeakClick = () => {
-    // 优先使用外部提供的按钮点击回调
-    if (onButtonClick) {
-      onButtonClick()
-    } else {
-      // 回退到传统的 start/stop 回调
-      if (isConnected) {
-      onStopSpeak?.()
-    } else {
-      onStartSpeak?.()
-      }
-    }
-  }
-
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: 'none',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'flex-end',
-        padding: '20px',
-        zIndex: 100,
-        ...style,
-      }}
-    >
-      {/* 字幕组件 */}
-      <Subtitle
-        text={subtitle}
-        visible={showSubtitle}
-        boxStyle={subtitleStyle}
-        bottomOffset={0}
-        style={{ position: 'relative', bottom: 'auto', marginBottom: '80px' }}
-      />
-
-      {/* 说话按钮 */}
-      {showSpeakButton && (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <button
-            onClick={handleSpeakClick}
-            disabled={isLoading}
-            style={{
-              pointerEvents: 'auto',
-              padding: '14px 28px',
-              background: isConnected
-                ? 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)'
-                : 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
-              color: '#fff',
-              border: 'none',
-              borderRadius: '50px',
-              cursor: isLoading ? 'wait' : 'pointer',
-              fontSize: '15px',
-              fontWeight: '600',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '8px',
-              boxShadow: isConnected || isLoading
-                ? '0 4px 20px rgba(239, 68, 68, 0.4)'
-                : '0 4px 20px rgba(139, 92, 246, 0.4)',
-              transition: 'all 0.3s ease',
-              transform: 'scale(1)',
-              opacity: isLoading ? 0.7 : 1,
-            }}
-            onMouseEnter={(e) => {
-              if (!isLoading) {
-              e.currentTarget.style.transform = 'scale(1.05)'
-                e.currentTarget.style.boxShadow = isConnected
-                ? '0 6px 25px rgba(239, 68, 68, 0.5)'
-                : '0 6px 25px rgba(139, 92, 246, 0.5)'
-              }
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.transform = 'scale(1)'
-              e.currentTarget.style.boxShadow = isConnected || isLoading
-                ? '0 4px 20px rgba(239, 68, 68, 0.4)'
-                : '0 4px 20px rgba(139, 92, 246, 0.4)'
-            }}
-            onMouseDown={(e) => {
-              if (!isLoading) {
-              e.currentTarget.style.transform = 'scale(0.95)'
-              }
-            }}
-            onMouseUp={(e) => {
-              if (!isLoading) {
-              e.currentTarget.style.transform = 'scale(1.05)'
-              }
-            }}
-          >
-            <span style={{ fontSize: '18px' }}>
-              {isLoading ? '⏳' : isConnected ? '🔴' : '💬'}
-            </span>
-            <span>
-              {isLoading ? '连接中...' : isConnected ? '结束对话' : '开始说话'}
-            </span>
-            {(isConnected || isLoading) && (
-              <span
-                style={{
-                  width: '8px',
-                  height: '8px',
-                  borderRadius: '50%',
-                  background: '#fff',
-                  animation: 'pulse 1.5s ease-in-out infinite',
-                }}
-              />
-            )}
-          </button>
-        </div>
-      )}
-
-      {/* 添加动画样式 */}
-      <style>{`
-        @keyframes pulse {
-          0%, 100% {
-            opacity: 1;
-            transform: scale(1);
-          }
-          50% {
-            opacity: 0.5;
-            transform: scale(0.8);
-          }
-        }
-      `}</style>
-    </div>
-  )
-}

package/src/components/CharacterView.tsx

@@ -1,165 +0,0 @@
-import { Suspense, useRef, useEffect, useCallback, useState } from 'react'
-import type { CharacterViewProps, Character } from '@linxai/3d-shared'
-import { useCharacterController } from '@linxai/3d-shared/internal'
-import { Scene3D } from './Scene3D'
-import { CharacterOverlay } from './CharacterOverlay'
-import { WebModelLoaderAdapter } from '../adapters/ModelLoaderAdapter'
-import { WebAnimationLoaderAdapter } from '../adapters/AnimationLoaderAdapter'
-
-// 重新导出类型
-export type { CharacterViewProps } from '@linxai/3d-shared'
-
-/**
- * 3D 角色查看器内容（在 Canvas 内部）
- */
-function CharacterContent({
-  model,
-  animationStates,
-  initialState,
-  initialMood,
-  enableWelcome,
-  onError,
-  onReady,
-  onStateChange,
-  children,
-}: Pick<CharacterViewProps, 'model' | 'animationStates' | 'initialState' | 'initialMood' | 'enableWelcome' | 'onError' | 'onReady' | 'onStateChange' | 'children'>) {
-  
-  const { loadedModel, character, isReady } = useCharacterController({
-    model,
-    modelAdapter: WebModelLoaderAdapter,
-    animationAdapter: WebAnimationLoaderAdapter,
-    animationStates,
-    initialState,
-    initialMood,
-    enableWelcome,
-    onError,
-    onStateChange,
-  })
-
-  // 当 character 准备好时通知外部（只在 character 改变时触发）
-  const onReadyRef = useRef(onReady)
-  useEffect(() => {
-    onReadyRef.current = onReady
-  }, [onReady])
-
-  useEffect(() => {
-    if (character) {
-      onReadyRef.current?.(character)
-    }
-  }, [character])
-
-  // 控制模型可见性
-  useEffect(() => {
-    if (loadedModel?.scene) {
-      loadedModel.scene.visible = isReady
-    }
-  }, [loadedModel, isReady])
-
-  if (!loadedModel) return null
-
-  return (
-    <>
-      <primitive object={loadedModel.scene} />
-      {children}
-    </>
-  )
-}
-
-/**
- * 3D 角色查看器
- */
-export function CharacterView(props: CharacterViewProps) {
-  const { 
-    model, 
-    animationStates, 
-    initialState, 
-    initialMood, 
-    enableWelcome,
-    sceneConfig, 
-    controlsConfig, 
-    overlay,
-    style, 
-    className, 
-    children, 
-    onError, 
-    onReady,
-    onStateChange,
-  } = props
-
-  // 内部管理字幕状态
-  const [subtitle, setSubtitle] = useState('')
-  const characterRef = useRef<Character | null>(null)
-
-  // 字幕控制方法
-  const appendSubtitle = useCallback((text: string) => {
-    setSubtitle(prev => prev + text)
-  }, [])
-
-  const replaceSubtitle = useCallback((text: string) => {
-    setSubtitle(text)
-  }, [])
-
-  const clearSubtitle = useCallback(() => {
-    setSubtitle('')
-  }, [])
-
-  const handleReady = useCallback((character: Character) => {
-    // 直接在 character 对象上添加字幕控制方法
-    character.appendSubtitle = appendSubtitle
-    character.setSubtitle = replaceSubtitle
-    character.clearSubtitle = clearSubtitle
-    
-    characterRef.current = character
-    onReady?.(character)
-  }, [onReady, appendSubtitle, replaceSubtitle, clearSubtitle])
-
-  const handleStartSpeak = useCallback(() => {
-    characterRef.current?.startSpeak()
-  }, [])
-
-  const handleStopSpeak = useCallback(() => {
-    characterRef.current?.stopSpeak()
-  }, [])
-
-  return (
-    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
-      <Scene3D
-        config={sceneConfig}
-        controlsConfig={controlsConfig}
-        style={style}
-        className={className}
-        showProgress={false}
-      >
-        <Suspense fallback={null}>
-          <CharacterContent 
-            model={model} 
-            animationStates={animationStates}
-            initialState={initialState}
-            initialMood={initialMood}
-            enableWelcome={enableWelcome}
-            onError={onError} 
-            onReady={handleReady}
-            onStateChange={onStateChange}
-          >
-            {children}
-          </CharacterContent>
-        </Suspense>
-      </Scene3D>
-
-      {overlay?.show && (
-        <CharacterOverlay
-          visible={true}
-          subtitle={subtitle}
-          showSpeakButton={overlay.showSpeakButton ?? true}
-          isLoading={overlay.isLoading}
-          isConnected={overlay.isConnected}
-          onStartSpeak={handleStartSpeak}
-          onStopSpeak={handleStopSpeak}
-          onButtonClick={overlay.onButtonClick}
-          subtitleStyle={overlay.subtitleStyle}
-          style={overlay.style}
-        />
-      )}
-    </div>
-  )
-}

package/src/components/ProgressBar.tsx

@@ -1,69 +0,0 @@
-import { CSSProperties } from 'react'
-
-export interface ProgressBarProps {
-  /** 进度值 (0-1) */
-  progress: number
-  /** 容器样式 */
-  style?: CSSProperties
-  /** 进度条颜色 */
-  color?: string
-  /** 背景颜色 */
-  backgroundColor?: string
-  /** 高度 */
-  height?: number
-}
-
-/**
- * 简单的进度条组件 (Web)
- */
-export function ProgressBar({
-  progress,
-  style,
-  color = '#007AFF',
-  backgroundColor = '#E5E5E5',
-  height = 8,
-}: ProgressBarProps) {
-  const percentage = Math.round(Math.max(0, Math.min(1, progress)) * 100)
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        padding: 8,
-        backgroundColor: '#2a2a2a',
-        borderRadius: 8,
-        ...style,
-      }}
-    >
-      <div
-        style={{
-          width: '100%',
-          height,
-          backgroundColor,
-          borderRadius: 4,
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          style={{
-            width: `${percentage}%`,
-            height: '100%',
-            backgroundColor: color,
-            transition: 'width 0.3s ease',
-          }}
-        />
-      </div>
-      <div
-        style={{
-          marginTop: 8,
-          fontSize: 14,
-          fontWeight: 'bold',
-          color: '#ffffff',
-        }}
-      >
-        {percentage}%
-      </div>
-    </div>
-  )
-}
-

package/src/components/Scene3D.tsx

@@ -1,89 +0,0 @@
-import type { ReactNode, CSSProperties } from 'react'
-import type { SceneConfig, OrbitControlsConfig } from '@linxai/3d-shared'
-import { LoadingProvider, useLoading } from '@linxai/3d-shared/internal'
-import { ProgressBar } from './ProgressBar'
-import { WebSceneBuilder } from '../builders/SceneBuilder'
-
-interface Scene3DProps {
-  /** 子组件 */
-  children: ReactNode
-  /** 场景配置 */
-  config?: SceneConfig
-  /** OrbitControls 配置 */
-  controlsConfig?: OrbitControlsConfig
-  /** Canvas 样式 */
-  style?: CSSProperties
-  /** Canvas className */
-  className?: string
-  /** 是否显示进度条 */
-  showProgress?: boolean
-}
-
-/**
- * Web 端 3D 场景容器
- * 使用装配式架构，通过 WebSceneBuilder 装配 Canvas 和 OrbitControls
- * 支持 React Suspense 配合加载进度显示
- * 
- * @example
- * ```tsx
- * <Scene3D 
- *   config={{ backgroundColor: '#000' }}
- *   controlsConfig={{ enableRotate: true }}
- * >
- *   <CharacterView model={{ path: "/model.gltf" }} />
- * </Scene3D>
- * ```
- */
-function Scene3DContent({
-  children,
-  config = {},
-  controlsConfig,
-  style,
-  className,
-  showProgress = true,
-}: Scene3DProps) {
-  const { progress, isLoading } = useLoading()
-  const canvas = WebSceneBuilder.buildCanvas({
-    children: (
-      <>
-        {WebSceneBuilder.buildOrbitControls(controlsConfig)}
-        {WebSceneBuilder.buildGridHelper(config.gridHelper)}
-        {children}
-      </>
-    ),
-    config,
-    style,
-    className,
-  })
-
-  const shouldShowProgress = showProgress && isLoading && progress < 1
-
-  return (
-    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
-      {canvas}
-      {shouldShowProgress && (
-        <div
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: '80%',
-            maxWidth: 400,
-            zIndex: 1000,
-          }}
-        >
-          <ProgressBar progress={progress} />
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function Scene3D(props: Scene3DProps) {
-  return (
-    <LoadingProvider>
-      <Scene3DContent {...props} />
-    </LoadingProvider>
-  )
-}