@linxai/3d-web 0.1.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@linxai/3d-web",
+  "version": "0.1.0",
+  "description": "3D 可视化 Web 组件",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@linxai/3d-shared": "workspace:*"
+  },
+  "peerDependencies": {
+    "@react-three/fiber": ">=8.0.0",
+    "react": ">=18.0.0",
+    "three": ">=0.160.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/three": "^0.170.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}

package/src/adapters/AnimationLoaderAdapter.ts

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,183 @@
+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

@@ -0,0 +1,165 @@
+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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,89 @@
+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>
+  )
+}

package/src/components/Subtitle.tsx

@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react'
+
+export interface SubtitleProps {
+  /** 字幕文本 */
+  text?: string
+  /** 是否可见 */
+  visible?: boolean
+  /** 容器样式 */
+  style?: React.CSSProperties
+  /** 字幕框样式 */
+  boxStyle?: React.CSSProperties
+  /** 文本样式 */
+  textStyle?: React.CSSProperties
+  /** 底部偏移（默认 80px） */
+  bottomOffset?: number
+}
+
+/**
+ * 字幕组件
+ * 带淡入淡出动画的字幕显示
+ */
+export function Subtitle({
+  text = '',
+  visible = true,
+  style,
+  boxStyle,
+  textStyle,
+  bottomOffset = 80,
+}: SubtitleProps) {
+  const [fadeIn, setFadeIn] = useState(false)
+
+  useEffect(() => {
+    if (text) {
+      setFadeIn(true)
+    } else {
+      setFadeIn(false)
+    }
+  }, [text])
+
+  if (!visible || !text) return null
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: `${bottomOffset}px`,
+        display: 'flex',
+        justifyContent: 'center',
+        padding: '0 20px',
+        pointerEvents: 'none',
+        zIndex: 100,
+        opacity: fadeIn ? 1 : 0,
+        transform: fadeIn ? 'translateY(0)' : 'translateY(10px)',
+        transition: 'all 0.3s ease-out',
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          background: 'rgba(0, 0, 0, 0.85)',
+          backdropFilter: 'blur(10px)',
+          padding: '16px 24px',
+          borderRadius: '12px',
+          maxWidth: '80%',
+          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
+          ...boxStyle,
+        }}
+      >
+        <p
+          style={{
+            margin: 0,
+            color: '#fff',
+            fontSize: '16px',
+            lineHeight: '1.6',
+            textAlign: 'center',
+            fontWeight: '500',
+            ...textStyle,
+          }}
+        >
+          {text}
+        </p>
+      </div>
+    </div>
+  )
+}
+

package/src/hooks/useModelLoader.ts

@@ -0,0 +1,12 @@
+/**
+ * Web 端模型加载 Hook
+ * 直接 re-export @react-three/drei 的 useGLTF
+ * 
+ * @example
+ * ```tsx
+ * const gltf = useModelLoader('/model.glb')
+ * return <primitive object={gltf.scene} />
+ * ```
+ */
+export { useGLTF as useModelLoader } from '@react-three/drei'
+

package/src/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * @linxai/3d-web
+ * 3D 角色可视化 - Web 平台
+ */
+
+// ============================================================
+// 核心组件（用户使用）
+// ============================================================
+export { CharacterView } from './components/CharacterView'
+export { Scene3D } from './components/Scene3D'
+
+// ============================================================
+// 类型定义（从 shared 导出）
+// ============================================================
+export type {
+  // Character 相关
+  Character,
+  CharacterViewProps,
+  OverlayConfig,
+  
+  // 配置类型
+  ModelLoadConfig,
+  AnimationConfig,
+  AnimationStatesConfig,
+  AnimationStateConfig,
+  SceneConfig,
+  OrbitControlsConfig,
+  LightConfig,
+  GridHelperConfig,
+} from '@linxai/3d-shared'
+
+// ============================================================
+// UI 组件（可选使用）
+// ============================================================
+export { CharacterOverlay } from './components/CharacterOverlay'
+export type { CharacterOverlayProps } from './components/CharacterOverlay'
+export { Subtitle } from './components/Subtitle'
+export type { SubtitleProps } from './components/Subtitle'
+
+// ============================================================
+// 高级 API（可选使用）
+// ============================================================
+export { WebSceneBuilder } from './builders/SceneBuilder'
+export { useModelLoader } from './hooks/useModelLoader'

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
+

package/tsup.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.tsx'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  external: [
+    'react',
+    'react-native',
+    'three',
+    '@react-three/fiber',
+    '@linxai/3d-shared',
+  ],
+  // 使用 React 17+ 的新 JSX runtime
+  esbuildOptions(options) {
+    options.jsx = 'automatic'
+  },
+})
+