@jacktea/tech3d-viewer-react

为 @jacktea/tech3d-viewer 核心库提供的 React 封装组件，方便在 React 项目中集成高性能 3D 浏览器。

特性

• React 风格声明式 API：通过 Props 控制配置和状态。
• 完善的事件绑定：支持 onReady, onError, onSelectionChange 等回调。
• 内建生命周期维护：自动处理组件挂载和销毁时的资源回收。
• TypeScript 支持：提供完整的类型定义。

安装

你需要同时安装核心库和 React 封装库：

npm install @jacktea/tech3d-viewer @jacktea/tech3d-viewer-react
# 或
pnpm add @jacktea/tech3d-viewer @jacktea/tech3d-viewer-react

快速开始

import React, { useRef } from 'react';
import { Tech3DViewer, Tech3DViewerRef } from '@jacktea/tech3d-viewer-react';

function App() {
  const viewerRef = useRef<Tech3DViewerRef>(null);

  const handleReady = () => {
    console.log('Viewer is ready!');
    viewerRef.current?.open('https://your-server.com/models/sample.scs');
  };

  return (
    <div style={{ width: '100%', height: '500px' }}>
      <Tech3DViewer 
        ref={viewerRef}
        onReady={handleReady}
        onError={(err) => console.error(err)}
      />
    </div>
  );
}

export default App;

API 说明

Props

| 属性 | 类型 | 说明 | | :--- | :--- | :--- | | config | Partial<Tech3DViewerConfig> | 视图配置（如 locale, theme）。 | | input | Tech3DInput | (可选) 初始化加载的模型（文件或 URL）。 | | openOptions | Tech3DOpenOptions | (可选) 加载时使用的配置项。 | | onReady | (detail: any) => void | 初始化完成回调。 | | onError | (detail: any) => void | 错误回调。 | | onSelectionChange | (detail: any) => void | 选择项变化回调。 | | onViewModeChange | (detail: any) => void | 视角模式变化回调。 | | onSnapshot | (detail: any) => void | 截图完成回调。 |

Ref 方法 (Tech3DViewerRef)

通过 useRef 获得对组件实例的操作权限：

• open(input, options): 手动加载新模型。
• setConfig(config): 动态更新配置。
• getConfig(): 获取当前核心配置。
• reset(): 重置状态。
• destroy(): 销毁实例。

核心库

本项目依赖核心库 @jacktea/tech3d-viewer。