@syhr/sy-three

@syhr/sy-three

一个基于 ThreeJs 的三维图形展示工具。

特性

• 🎨 基于 ThreeJs 的强大三维图形展示能力
• 🔧 支持多种三维模型
• 📱 响应式设计，支持移动端
• 🎯 完整的 TypeScript 支持
• 📦 多种模块格式支持（ES、UMD、CommonJS）
• 🔌 Vue 3 插件化架构
• 🛡️ 安全的全局属性处理，避免变量冲突
• 🔄 实时数据更新和 WebSocket 支持
• 🎛️ 可定制的错误处理和回调机制
• 🚀 高性能渲染和批量更新
• 🎨 多层级显示控制
• 📡 支持自定义 API 和事件总线注入

安装

npm install @syhr/sy-three

Peer Dependencies

确保你的项目已安装以下 peer dependencies：

# 必需依赖
npm install vue@^3.0.0 element-plus@^2.0.0 lodash-es@^4.17.0 three@^0.184.0 three-edit-cores@^0.0.15

# 可选依赖（根据需要安装）
npm install pinia@^2.0.0 vue-router@^4.0.0

使用

设置 draco 解码器的资源路径。在库模式下使用时需要：

1. 将 node_modules/@syhr/sy-threed-graph/lib-threed/draco 文件夹拷贝到自己项目的 public/ 目录下
2. 在注册组件之前调用此函数指定路径

全局注册（推荐）

import { createApp } from 'vue';
import SyThreed, { setDracoPath } from '@syhr/sy-threed';
import '@syhr/sy-threed/style';
const dracoPath = `${import.meta.env.BASE_URL}draco/`;
setDracoPath(dracoPath);

const app = createApp(App);
app.use(SyThreed);
app.mount('#app');

局部使用

import { SyThree } from '@syhr/sy-three';

export default {
  components: {
    SyThree,
  },
};

在模板中使用

<template>
  <div>
    <SyThree
      ref="graphRef"
      :id="sceneId"
      :data="sceneData"
      :url="graphUrl"
      :token="token"
      :socketUrl="socketUrl"
      @loaded="handleLoaded"
      @graph-event="handleGraphEvent"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { SyGraph } from '@syhr/sy-graph';
const sceneId = ref('');
const sceneData = ref({});
const graphRef = ref();
const graphUrl = ref('path/to/your/graph.json');
const token = ref('');
const socketUrl = ref('');

const handleLoaded = (stage) => {
  console.log('Graph loaded:', stage);
  // 可以通过 stage 进行图纸操作
};

// 图纸事件, 点击等
const handleGraphEvent = (errorInfo) => {
  console.error('Graph error:', errorInfo);
};

// 获取实例
const getEditorInstance = () => {
  graphRef.value?.getEditorInstance();
};
</script>

Props

Events

方法

通过 ref 获取组件实例后可调用以下方法：

• getEditorInstance() - 获取编辑器实例

使用场景

1. 基础三维图纸展示

<SyThree :data="graphData" />

2. 图纸id

<SyThree :url="'https://ip:port/cockpit/threed/xxx.json'" />

3. 直接传入数据

<SyThree :id="'111111111'" />

4. 完整配置示例

<SyThree
  ref="graphRef"
  :id="sceneId"
  :data="sceneData"
  :url="graphUrl"
  :token="token"
  :socketUrl="socketUrl"
  @loaded="handleLoaded"
  @graph-event="handleGraphEvent"
/>

浏览器支持

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 构建类型
npm run build:types

# 完整构建
npm run build:all

# 类型检查
npm run type-check

# 代码检查
npm run lint

许可证

MIT

更新日志

查看 CHANGELOG.md 了解详细的更新记录。

贡献

欢迎提交 Issue 和 Pull Request。

相关链接

• ThreeJs 官方文档
• ThreeEditor 官方文档
• Vue 3 文档
• Element Plus 文档