- 将包名从 @fishdingding/bim-engine-sdk 改为 iflow-engine - 将构建输出文件从 bim-engine-sdk.*.js 改为 iflow-engine.*.js - 将全局变量从 LyzBimEngineSDK 改为 IflowEngine - 将第三方引擎SDK从本地引入改为npm包引入 (iflow-engine-base) - 移除本地 src/engine_base 目录,移至回收站 - 更新所有文档和demo中的引用
iFlow Engine Vue3 Demo
这是一个使用 Vue3 + TypeScript 的演示项目,用于验证 iFlow Engine 在 Vue 环境下的兼容性。
前置要求
-
确保父项目已经构建完成:
cd .. npm run build -
安装依赖:
npm install -
复制 SDK 文件到 public 目录:
npm run copy-sdk或者手动复制:
mkdir -p public/lib cp ../dist/iflow-engine.umd.js public/lib/ cp ../dist/iflow-engine.umd.js.map public/lib/
运行
开发模式
npm run dev
服务器会在 http://localhost:8081 启动,并自动打开浏览器。
构建
npm run build
构建后的文件会在 dist 目录中。
预览构建结果
npm run preview
项目结构
demo-vue/
├── src/
│ ├── App.vue # 主组件(包含所有功能)
│ ├── main.ts # Vue3 入口文件
│ ├── style.css # 全局样式
│ └── vite-env.d.ts # TypeScript 类型声明
├── public/
│ ├── lib/ # SDK 文件目录
│ │ └── iflow-engine.umd.js
│ └── model/ # 3D 模型文件
│ └── gujianzhu.glb
├── index.html # HTML 入口
├── package.json # 项目配置
├── vite.config.ts # Vite 配置
├── tsconfig.json # TypeScript 配置
└── README.md # 说明文档
使用说明
- 点击 "初始化引擎" 按钮初始化 3D 引擎
- 点击 "加载模型" 按钮加载 3D 模型
- 其他功能按钮可以测试 SDK 的各种功能
技术栈
- Vue 3.4+ (Composition API)
- TypeScript 5.9+
- Vite 7.2+
注意事项
- 确保父项目的
dist目录中有构建好的 SDK 文件 - 模型文件路径是相对于
public目录的 - 使用 HTTP 服务器运行(不能直接打开 HTML 文件)以避免 CORS 问题