@jacktea/tech3d-viewer

v0.1.6

Published

2 months ago

基于 Web Components 的高性能 3D 浏览器核心库，支持多种 3D 模型格式的预览。

Downloads

0High
0Medium
0Low

jacktea

@jacktea/tech3d-viewer

基于 Web Components 的高性能 3D 浏览器核心库，支持多种 3D 模型格式的预览。

特性

Web Components 驱动：兼容任何现代前端框架（React, Vue, Angular 等）或原生 HTML。
高性能渲染：基于 HOOPS Communicator 引擎，可流畅处理大型装配体。
易于集成：提供简单的 API 来加载和控制 3D 模型。
灵活的转换机制：支持自定义后端转换器以加载非原生（非 SCS）格式。

安装

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

快速开始

使用原生 HTML

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="node_modules/@jacktea/tech3d-viewer/dist/tech3d-viewer.js"></script>
    <style>
        #viewer { width: 100%; height: 500px; display: block; }
    </style>
</head>
<body>
    <tech3d-viewer id="viewer"></tech3d-viewer>

    <script type="module">
        const viewer = document.getElementById('viewer');
        
        viewer.addEventListener('ready', () => {
          console.log('Viewer is ready!');
          viewer.open('https://your-server.com/models/sample.scs');
        });
    </script>
</body>
</html>

使用 JavaScript API

import { createTech3DViewer } from '@jacktea/tech3d-viewer';

const container = document.getElementById('app');
const viewer = createTech3DViewer(container, {
  locale: 'zh-CN'
});

await viewer.open('path/to/model.scs');

API 说明

属性 (Attributes/Properties)

| 属性名 | 类型 | 说明 | | :--- | :--- | :--- | | config | Tech3DViewerConfig | 运行时配置，包括语言、主题、效果等。 |

方法

open(input: Tech3DInput, options?: Tech3DOpenOptions): 加载 3D 模型。
setConfig(config: Partial<Tech3DViewerConfig>): 更新视图配置。
getConfig(): 获取当前配置。
reset(): 重置视图状态。
destroy(): 销毁查看器实例。

事件

ready: 查看器初始化完成并准备就绪。
error: 加载或运行过程中发生错误。
selection-change: 模型选择项发生变化。
view-mode-change: 查看模式（如正交/透视）改变。
snapshot: 完成屏幕截图。
export-start / export-end: 导出过程开始与结束。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@jacktea/tech3d-viewer

特性

安装

快速开始

使用原生 HTML

使用 JavaScript API

API 说明

属性 (Attributes/Properties)

方法

事件

相关包