@jacktea/tech3d-viewer-vue

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

特性

• Vue 3 组合式 API 支持：完美契合 script setup 语法。
• Props 与 Events：通过标准的 Vue 属性和事件进行控制和交互。
• 资源自动回收：在组件卸载时自动销毁实例，避免内存泄漏。
• TypeScript 友好：提供完善的 Prop 类型定义和事件类型提示。

安装

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

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

快速开始

<template>
  <div style="width: 100%; height: 500px">
    <Tech3DViewer 
      ref="viewer"
      :input="modelUrl"
      @ready="handleReady"
      @error="handleError"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Tech3DViewer } from '@jacktea/tech3d-viewer-vue';

const modelUrl = 'https://your-server.com/models/sample.scs';
const viewer = ref<InstanceType<typeof Tech3DViewer> | null>(null);

const handleReady = () => {
  console.log('Viewer is ready!');
};

const handleError = (err: any) => {
  console.error('Viewer error:', err);
};
</script>

API 说明

Props

| 属性 | 类型 | 说明 | | :--- | :--- | :--- | | config | Partial<Tech3DViewerConfig> | 视图配置（如语言、效果等）。 | | input | Tech3DInput | (可选) 初始化或动态切换的模型 URL 或文件。 | | openOptions | Tech3DOpenOptions | (可选) 加载参数。 |

事件 (Events)

• @ready: 初始化完成。
• @error: 发生错误。
• @selection-change: 模型选择变化。
• @view-mode-change: 视角模式切换。
• @snapshot: 截图完成。
• @export-start / @export-end: 导出过程状态。

公开方法 (Exposed)

通过模板引用（ref）获取组件实例后，可以调用以下方法：

• open(input, options): 加载新模型。
• setConfig(config): 更新配置。
• getConfig(): 获取当前配置。
• reset(): 重置视图。
• destroy(): 销毁实例。

核心库

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