iflow-engine 3.9.203 → 3.9.211
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -573
- package/dist/bim-engine-2d.d.ts +1 -0
- package/dist/bim-engine-720.d.ts +1 -0
- package/dist/bim-engine-gaussian.d.ts +1 -0
- package/dist/bim-engine-gis.d.ts +2 -1
- package/dist/bim-engine.d.ts +44 -3
- package/dist/components/engine/index.d.ts +1 -0
- package/dist/components/engine-2d/index.d.ts +1 -0
- package/dist/components/engine-720/index.d.ts +1 -0
- package/dist/components/engine-gaussian/index.d.ts +1 -0
- package/dist/components/engine-gis/index.d.ts +1 -0
- package/dist/core/sdk-auth.d.ts +3 -0
- package/dist/cus-bim-engine.d.ts +3 -0
- package/dist/iflow-engine.es.js +106391 -79563
- package/dist/iflow-engine.umd.js +1470 -1470
- package/dist/managers/engine-2d-manager.d.ts +1 -0
- package/dist/managers/engine-720-manager.d.ts +1 -0
- package/dist/managers/engine-gaussian-manager.d.ts +1 -0
- package/dist/managers/engine-gis-manager.d.ts +1 -0
- package/dist/managers/engine-manager.d.ts +1 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,573 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
> 一个功能强大的 BIM（建筑信息模型）引擎 SDK，提供 3D 可视化、构件管理、测量工具、剖切功能和漫游控制等完整功能。支持 Vue 2、Vue 3、React 和原生 HTML 等多种前端框架。
|
|
4
|
-
|
|
5
|
-
[](https://www.typescriptlang.org/)
|
|
6
|
-
[](https://vitejs.dev/)
|
|
7
|
-
[](LICENSE)
|
|
8
|
-
|
|
9
|
-
## ✨ 核心特性
|
|
10
|
-
|
|
11
|
-
- 🎯 **框架无关**: 支持 Vue 2/3、React 和原生 HTML
|
|
12
|
-
- 📦 **开箱即用**: 提供完整的 BIM 功能组件
|
|
13
|
-
- 🎨 **主题系统**: 内置暗色/亮色主题，支持自定义
|
|
14
|
-
- 🌍 **国际化**: 支持简体中文、繁体中文与英文切换
|
|
15
|
-
- 📐 **测量工具**: 标高、距离、角度、坡度、体积等
|
|
16
|
-
- ✂️ **剖切功能**: 拾取面剖切、轴向剖切、剖切盒
|
|
17
|
-
- 🚶 **漫游控制**: 第一人称漫游、路径漫游、平面图导航
|
|
18
|
-
- 🎛️ **组件管理**: 树形构件树、属性面板、右键菜单
|
|
19
|
-
- 💪 **TypeScript**: 完整的类型定义支持
|
|
20
|
-
|
|
21
|
-
## 📦 安装
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm install iflow-engine
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
或使用 yarn/pnpm:
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
yarn add iflow-engine
|
|
31
|
-
pnpm add iflow-engine
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## 🚀 快速开始
|
|
35
|
-
|
|
36
|
-
### 在 Vue 3 中使用
|
|
37
|
-
|
|
38
|
-
```vue
|
|
39
|
-
<template>
|
|
40
|
-
<div ref="containerRef" style="width: 100vw; height: 100vh;"></div>
|
|
41
|
-
</template>
|
|
42
|
-
|
|
43
|
-
<script setup lang="ts">
|
|
44
|
-
import { ref, onMounted, onUnmounted } from 'vue';
|
|
45
|
-
import { BimEngine } from 'iflow-engine';
|
|
46
|
-
|
|
47
|
-
const containerRef = ref<HTMLElement>();
|
|
48
|
-
let bimEngine: BimEngine | null = null;
|
|
49
|
-
|
|
50
|
-
onMounted(async () => {
|
|
51
|
-
if (containerRef.value) {
|
|
52
|
-
// 初始化 BIM 引擎
|
|
53
|
-
bimEngine = new BimEngine(containerRef.value, {
|
|
54
|
-
locale: 'zh-CN', // 语言: 'zh-CN' | 'zh-TW' | 'en-US'
|
|
55
|
-
theme: 'dark', // 主题: 'dark' | 'light'
|
|
56
|
-
enableRadialToolbar: true,
|
|
57
|
-
enableConstructTree: true,
|
|
58
|
-
enableRightKeyMenu: true,
|
|
59
|
-
showModelInfoStats: true
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
// BimEngine 构造时会自动组装 UI/Manager；3D 渲染底层需要显式初始化
|
|
63
|
-
const ok = await bimEngine.engine?.initialize({
|
|
64
|
-
backgroundColor: 0x333333,
|
|
65
|
-
showViewCube: true
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
if (!ok) return;
|
|
69
|
-
|
|
70
|
-
// 加载模型（EngineManager 对外公共 API）
|
|
71
|
-
bimEngine.engine?.loadModel(
|
|
72
|
-
['/path/to/your/model.ifc'],
|
|
73
|
-
{
|
|
74
|
-
onProgress: (progress) => {
|
|
75
|
-
console.log(`加载进度: ${progress}%`);
|
|
76
|
-
},
|
|
77
|
-
onComplete: () => {
|
|
78
|
-
console.log('模型加载完成');
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
onUnmounted(() => {
|
|
86
|
-
bimEngine?.destroy();
|
|
87
|
-
});
|
|
88
|
-
</script>
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
> 初始化说明：`engine.initialize(...)` 是异步方法，加载模型或调用依赖底层渲染实例的 API 前需要 `await`。`BimEngine2d`、`BimEngineGIS`、`BimEngine720` 构造时会自动启动异步初始化，创建后立即使用时请先等待实例的 `ready`。
|
|
92
|
-
|
|
93
|
-
### 在 React 中使用
|
|
94
|
-
|
|
95
|
-
```tsx
|
|
96
|
-
import { useEffect, useRef } from 'react';
|
|
97
|
-
import { BimEngine } from 'iflow-engine';
|
|
98
|
-
|
|
99
|
-
function App() {
|
|
100
|
-
const containerRef = useRef<HTMLDivElement>(null);
|
|
101
|
-
const bimEngineRef = useRef<BimEngine | null>(null);
|
|
102
|
-
|
|
103
|
-
useEffect(() => {
|
|
104
|
-
if (containerRef.current) {
|
|
105
|
-
const bimEngine = new BimEngine(containerRef.current, {
|
|
106
|
-
locale: 'zh-CN',
|
|
107
|
-
theme: 'dark'
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
void (async () => {
|
|
111
|
-
await bimEngine.engine?.initialize({ backgroundColor: 0x333333 });
|
|
112
|
-
})();
|
|
113
|
-
|
|
114
|
-
bimEngineRef.current = bimEngine;
|
|
115
|
-
|
|
116
|
-
return () => {
|
|
117
|
-
bimEngine.destroy();
|
|
118
|
-
};
|
|
119
|
-
}
|
|
120
|
-
}, []);
|
|
121
|
-
|
|
122
|
-
return (
|
|
123
|
-
<div
|
|
124
|
-
ref={containerRef}
|
|
125
|
-
style={{ width: '100vw', height: '100vh' }}
|
|
126
|
-
/>
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
export default App;
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
### 在原生 HTML 中使用
|
|
134
|
-
|
|
135
|
-
```html
|
|
136
|
-
<!DOCTYPE html>
|
|
137
|
-
<html lang="zh-CN">
|
|
138
|
-
<head>
|
|
139
|
-
<meta charset="UTF-8">
|
|
140
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
141
|
-
<title>BIM Engine SDK Demo</title>
|
|
142
|
-
<style>
|
|
143
|
-
body { margin: 0; padding: 0; }
|
|
144
|
-
#container { width: 100vw; height: 100vh; }
|
|
145
|
-
</style>
|
|
146
|
-
</head>
|
|
147
|
-
<body>
|
|
148
|
-
<div id="container"></div>
|
|
149
|
-
|
|
150
|
-
<!-- 使用 UMD 版本 -->
|
|
151
|
-
<script src="./node_modules/iflow-engine/dist/iflow-engine.umd.js"></script>
|
|
152
|
-
<script>
|
|
153
|
-
(async () => {
|
|
154
|
-
const container = document.getElementById('container');
|
|
155
|
-
const bimEngine = new IflowEngine.BimEngine(container, {
|
|
156
|
-
locale: 'zh-CN',
|
|
157
|
-
theme: 'dark'
|
|
158
|
-
});
|
|
159
|
-
|
|
160
|
-
// 初始化 3D 渲染底层
|
|
161
|
-
await bimEngine.engine?.initialize({ backgroundColor: 0x333333 });
|
|
162
|
-
})();
|
|
163
|
-
</script>
|
|
164
|
-
</body>
|
|
165
|
-
</html>
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
## 🏗️ 技术架构
|
|
169
|
-
|
|
170
|
-
### 核心设计理念
|
|
171
|
-
|
|
172
|
-
BIM Engine SDK 采用 **管理器模式 (Manager Pattern)** 作为核心架构,确保:
|
|
173
|
-
|
|
174
|
-
- ✅ 组件的生命周期统一管理
|
|
175
|
-
- ✅ 避免内存泄漏
|
|
176
|
-
- ✅ 简化集成复杂度
|
|
177
|
-
- ✅ 支持按需加载
|
|
178
|
-
|
|
179
|
-
> 架构更新（2026-03）
|
|
180
|
-
>
|
|
181
|
-
> - `EngineManager` 已从全量透传层收敛为“外部公共 API + 生命周期编排”
|
|
182
|
-
> - 内部 Manager 统一通过 `BaseManager.engineComponent` 直接访问 `Engine` 组件
|
|
183
|
-
> - 非 Manager 场景通过 `registry.engine3d?.getEngineComponent()?.xxx()` 访问引擎能力
|
|
184
|
-
> - `Engine.getEngine()` 已移除，事件订阅使用 `onRawEvent()/offRawEvent()`
|
|
185
|
-
|
|
186
|
-
### 架构分层
|
|
187
|
-
|
|
188
|
-
```
|
|
189
|
-
┌─────────────────────────────────────────┐
|
|
190
|
-
│ BimEngine (主引擎类) │
|
|
191
|
-
│ - 生命周期管理 │
|
|
192
|
-
│ - 事件系统 │
|
|
193
|
-
│ - 主题/国际化 │
|
|
194
|
-
└─────────────────────────────────────────┘
|
|
195
|
-
↓
|
|
196
|
-
┌─────────────────────────────────────────┐
|
|
197
|
-
│ Manager 层 (管理器) │
|
|
198
|
-
│ - RadialToolbarManager (径向工具栏) │
|
|
199
|
-
│ - DialogManager (对话框) │
|
|
200
|
-
│ - EngineManager (外部公共API/生命周期) │
|
|
201
|
-
│ - MeasureDialogManager (测量) │
|
|
202
|
-
│ - SectionPlaneDialogManager (剖切) │
|
|
203
|
-
│ - WalkDockManager (漫游/小地图 Dock) │
|
|
204
|
-
│ - ... │
|
|
205
|
-
└─────────────────────────────────────────┘
|
|
206
|
-
↓
|
|
207
|
-
┌─────────────────────────────────────────┐
|
|
208
|
-
│ Component 层 (UI组件) │
|
|
209
|
-
│ - Dialog (对话框) │
|
|
210
|
-
│ - Tree (树形控件) │
|
|
211
|
-
│ - ButtonGroup (按钮组) │
|
|
212
|
-
│ - MeasurePanel (测量面板) │
|
|
213
|
-
│ - SectionPlanePanel (剖切面板) │
|
|
214
|
-
│ - ... │
|
|
215
|
-
└─────────────────────────────────────────┘
|
|
216
|
-
↓
|
|
217
|
-
┌─────────────────────────────────────────┐
|
|
218
|
-
│ Service 层 (服务) │
|
|
219
|
-
│ - LocaleManager (国际化) │
|
|
220
|
-
│ - ThemeManager (主题) │
|
|
221
|
-
│ - EventEmitter (事件总线) │
|
|
222
|
-
└─────────────────────────────────────────┘
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
### 技术栈
|
|
226
|
-
|
|
227
|
-
- **语言**: TypeScript 5.9.3
|
|
228
|
-
- **构建工具**: Vite 7.2.6 (Library Mode)
|
|
229
|
-
- **类型生成**: vite-plugin-dts
|
|
230
|
-
- **样式注入**: vite-plugin-css-injected-by-js
|
|
231
|
-
- **开发环境**: Vue 3 (用于 Playground)
|
|
232
|
-
|
|
233
|
-
## 📁 项目结构
|
|
234
|
-
|
|
235
|
-
```
|
|
236
|
-
iflow-engine/
|
|
237
|
-
├── src/ # 源代码
|
|
238
|
-
│ ├── bim-engine.ts # 主引擎类
|
|
239
|
-
│ ├── index.ts # 入口文件
|
|
240
|
-
│ ├── managers/ # 管理器层
|
|
241
|
-
│ │ ├── radial-toolbar-manager.ts
|
|
242
|
-
│ │ ├── dialog-manager.ts
|
|
243
|
-
│ │ ├── engine-manager.ts
|
|
244
|
-
│ │ ├── measure-dialog-manager.ts
|
|
245
|
-
│ │ ├── section-plane-dialog-manager.ts
|
|
246
|
-
│ │ ├── section-axis-dialog-manager.ts
|
|
247
|
-
│ │ ├── section-box-dialog-manager.ts
|
|
248
|
-
│ │ ├── walk-dock-manager.ts
|
|
249
|
-
│ │ └── ...
|
|
250
|
-
│ ├── components/ # UI 组件层
|
|
251
|
-
│ │ ├── dialog/ # 对话框组件
|
|
252
|
-
│ │ ├── tree/ # 树形控件
|
|
253
|
-
│ │ ├── button-group/ # 按钮组
|
|
254
|
-
│ │ ├── measure-panel/ # 测量面板
|
|
255
|
-
│ │ ├── section-plane-panel/ # 拾取面剖切面板
|
|
256
|
-
│ │ ├── section-axis-panel/ # 轴向剖切面板
|
|
257
|
-
│ │ ├── section-box-panel/ # 剖切盒面板
|
|
258
|
-
│ │ ├── walk-control-panel/ # 漫游控制面板
|
|
259
|
-
│ │ └── ...
|
|
260
|
-
│ ├── services/ # 服务层
|
|
261
|
-
│ │ ├── locale.ts # 国际化服务
|
|
262
|
-
│ │ └── theme.ts # 主题服务
|
|
263
|
-
│ ├── core/ # 核心模块
|
|
264
|
-
│ │ └── event-emitter.ts # 事件系统
|
|
265
|
-
│ ├── types/ # 类型定义
|
|
266
|
-
│ │ ├── component.ts # 组件接口
|
|
267
|
-
│ │ └── events.ts # 事件类型
|
|
268
|
-
│ ├── themes/ # 主题配置
|
|
269
|
-
│ │ ├── dark.ts # 暗色主题
|
|
270
|
-
│ │ └── light.ts # 亮色主题
|
|
271
|
-
│ ├── locales/ # 国际化资源
|
|
272
|
-
│ │ ├── zh-CN.ts # 简体中文
|
|
273
|
-
│ │ └── en-US.ts # 英文
|
|
274
|
-
│ ├── utils/ # 工具函数
|
|
275
|
-
│ │ └── icon-manager.ts # 图标管理器
|
|
276
|
-
│ └── assets/ # 静态资源
|
|
277
|
-
├── dist/ # 构建产物
|
|
278
|
-
│ ├── iflow-engine.es.js # ESM 格式
|
|
279
|
-
│ ├── iflow-engine.umd.js # UMD 格式
|
|
280
|
-
│ └── index.d.ts # TypeScript 类型定义
|
|
281
|
-
├── demo/ # HTML Demo
|
|
282
|
-
├── demo-vue/ # Vue Demo
|
|
283
|
-
├── playground/ # 开发调试环境 (Vue 3)
|
|
284
|
-
├── docs/ # 文档
|
|
285
|
-
│ ├── components/ # 组件文档
|
|
286
|
-
│ └── utils/ # 工具文档
|
|
287
|
-
├── vite.config.ts # Vite 配置
|
|
288
|
-
├── tsconfig.json # TypeScript 配置
|
|
289
|
-
└── package.json # 项目配置
|
|
290
|
-
```
|
|
291
|
-
|
|
292
|
-
## 🎯 核心 API
|
|
293
|
-
|
|
294
|
-
### BimEngine 主类
|
|
295
|
-
|
|
296
|
-
```typescript
|
|
297
|
-
class BimEngine {
|
|
298
|
-
constructor(
|
|
299
|
-
container: HTMLElement | string,
|
|
300
|
-
options?: {
|
|
301
|
-
locale?: 'zh-CN' | 'zh-TW' | 'en-US';
|
|
302
|
-
theme?: 'dark' | 'light';
|
|
303
|
-
enableRadialToolbar?: boolean;
|
|
304
|
-
enableConstructTree?: boolean;
|
|
305
|
-
enableRightKeyMenu?: boolean;
|
|
306
|
-
showModelInfoStats?: boolean;
|
|
307
|
-
}
|
|
308
|
-
);
|
|
309
|
-
|
|
310
|
-
// BimEngine 构造时自动组装 UI/Manager；3D 渲染底层通过 engine 初始化
|
|
311
|
-
engine: EngineManager | null;
|
|
312
|
-
radialToolbar: RadialToolbarManager | null;
|
|
313
|
-
bottomDock: BottomDockManager | null;
|
|
314
|
-
measureDock: MeasureDockManager | null;
|
|
315
|
-
sectionDock: SectionDockManager | null;
|
|
316
|
-
walkDock: WalkDockManager | null;
|
|
317
|
-
componentTreeDrawer: ComponentTreeDrawerManager | null;
|
|
318
|
-
setting: SettingDialogManager | null;
|
|
319
|
-
|
|
320
|
-
// 主题和国际化
|
|
321
|
-
setTheme(theme: 'dark' | 'light'): void;
|
|
322
|
-
setCustomTheme(config: ThemeConfig): void;
|
|
323
|
-
setLocale(locale: 'zh-CN' | 'zh-TW' | 'en-US'): void;
|
|
324
|
-
|
|
325
|
-
// 事件系统
|
|
326
|
-
on(event: string, handler: Function): void;
|
|
327
|
-
off(event: string, handler: Function): void;
|
|
328
|
-
emit(event: string, ...args: any[]): void;
|
|
329
|
-
|
|
330
|
-
// 销毁
|
|
331
|
-
destroy(): void;
|
|
332
|
-
}
|
|
333
|
-
```
|
|
334
|
-
|
|
335
|
-
其中：
|
|
336
|
-
|
|
337
|
-
- `enableRadialToolbar` 控制是否创建径向工具栏，默认 `true`
|
|
338
|
-
- `enableConstructTree` 同时控制 `constructTreeBtn` 和 `componentTreeDrawer`，默认 `true`
|
|
339
|
-
- `enableRightKeyMenu` 控制是否创建右键菜单，默认 `true`
|
|
340
|
-
- `showModelInfoStats` 控制左下角模型信息（构件数 / 三角面 / 顶点数），默认 `true`
|
|
341
|
-
|
|
342
|
-
这些参数属于 `BimEngine` 构造阶段的 UI 组装配置；`bimEngine.engine?.initialize(...)` 中的 `showStats` 仍然只控制底层 3D 引擎的性能统计显示。
|
|
343
|
-
|
|
344
|
-
### 管理器
|
|
345
|
-
|
|
346
|
-
每个管理器负责特定功能的生命周期管理:
|
|
347
|
-
|
|
348
|
-
```typescript
|
|
349
|
-
// 3D 引擎管理器（对外公共 API）
|
|
350
|
-
bimEngine.engine?.loadModel(
|
|
351
|
-
['/path/to/model.ifc'],
|
|
352
|
-
{
|
|
353
|
-
onProgress: (progress) => console.log(progress),
|
|
354
|
-
onComplete: () => console.log('完成')
|
|
355
|
-
}
|
|
356
|
-
);
|
|
357
|
-
|
|
358
|
-
// 测量工具管理器
|
|
359
|
-
bimEngine.measure?.show();
|
|
360
|
-
bimEngine.measure?.hide();
|
|
361
|
-
|
|
362
|
-
// 剖切管理器
|
|
363
|
-
bimEngine.sectionPlane?.show();
|
|
364
|
-
bimEngine.sectionAxis?.show();
|
|
365
|
-
bimEngine.sectionBox?.show();
|
|
366
|
-
|
|
367
|
-
// 漫游控制管理器
|
|
368
|
-
bimEngine.walkControl?.show();
|
|
369
|
-
bimEngine.walkControl?.hide();
|
|
370
|
-
```
|
|
371
|
-
|
|
372
|
-
## 🎨 主题定制
|
|
373
|
-
|
|
374
|
-
### 使用内置主题
|
|
375
|
-
|
|
376
|
-
```typescript
|
|
377
|
-
const bimEngine = new BimEngine(container, {
|
|
378
|
-
theme: 'dark' // 'dark' | 'light'
|
|
379
|
-
});
|
|
380
|
-
|
|
381
|
-
// 运行时切换主题
|
|
382
|
-
bimEngine.setTheme('light');
|
|
383
|
-
```
|
|
384
|
-
|
|
385
|
-
### 自定义主题
|
|
386
|
-
|
|
387
|
-
```typescript
|
|
388
|
-
bimEngine.setTheme('dark', {
|
|
389
|
-
primaryColor: '#1890ff',
|
|
390
|
-
bgColor: '#1a1a1a',
|
|
391
|
-
textColor: '#ffffff',
|
|
392
|
-
borderColor: '#333333',
|
|
393
|
-
// ... 更多配置
|
|
394
|
-
});
|
|
395
|
-
```
|
|
396
|
-
|
|
397
|
-
### 主题变量
|
|
398
|
-
|
|
399
|
-
SDK 使用 CSS 变量实现主题系统,所有组件自动响应主题变化:
|
|
400
|
-
|
|
401
|
-
```css
|
|
402
|
-
--bim-primary-color
|
|
403
|
-
--bim-bg-color
|
|
404
|
-
--bim-text-color
|
|
405
|
-
--bim-border-color
|
|
406
|
-
--bim-dialog-bg
|
|
407
|
-
--bim-dialog-header-bg
|
|
408
|
-
--bim-icon-color
|
|
409
|
-
/* ... 更多变量 */
|
|
410
|
-
```
|
|
411
|
-
|
|
412
|
-
## 🌍 国际化
|
|
413
|
-
|
|
414
|
-
### 切换语言
|
|
415
|
-
|
|
416
|
-
```typescript
|
|
417
|
-
const bimEngine = new BimEngine(container, {
|
|
418
|
-
locale: 'zh-CN' // 'zh-CN' | 'zh-TW' | 'en-US'
|
|
419
|
-
});
|
|
420
|
-
|
|
421
|
-
// 运行时切换语言
|
|
422
|
-
bimEngine.setLocale('en-US');
|
|
423
|
-
```
|
|
424
|
-
|
|
425
|
-
### 支持的语言
|
|
426
|
-
|
|
427
|
-
- `zh-CN`: 简体中文
|
|
428
|
-
- `zh-TW`: 繁体中文
|
|
429
|
-
- `en-US`: English
|
|
430
|
-
|
|
431
|
-
## 🔧 开发指南
|
|
432
|
-
|
|
433
|
-
### 环境准备
|
|
434
|
-
|
|
435
|
-
```bash
|
|
436
|
-
# 安装依赖
|
|
437
|
-
npm install
|
|
438
|
-
|
|
439
|
-
# 启动开发环境 (Playground)
|
|
440
|
-
npm run dev
|
|
441
|
-
|
|
442
|
-
# 构建 SDK
|
|
443
|
-
npm run build
|
|
444
|
-
|
|
445
|
-
# 运行 HTML Demo
|
|
446
|
-
npm run dev:demo
|
|
447
|
-
|
|
448
|
-
# 运行 Vue Demo
|
|
449
|
-
npm run dev:demo-vue
|
|
450
|
-
```
|
|
451
|
-
|
|
452
|
-
### 构建产物
|
|
453
|
-
|
|
454
|
-
运行 `npm run build` 后,会在 `dist/` 目录生成:
|
|
455
|
-
|
|
456
|
-
- `iflow-engine.es.js` - ESM 格式 (用于现代打包工具)
|
|
457
|
-
- `iflow-engine.umd.js` - UMD 格式 (用于浏览器直接引入)
|
|
458
|
-
- `index.d.ts` - TypeScript 类型定义
|
|
459
|
-
- `*.css` - 样式文件 (已内联注入到 JS 中)
|
|
460
|
-
|
|
461
|
-
### package.json 导出配置
|
|
462
|
-
|
|
463
|
-
```json
|
|
464
|
-
{
|
|
465
|
-
"main": "./dist/iflow-engine.umd.js",
|
|
466
|
-
"module": "./dist/iflow-engine.es.js",
|
|
467
|
-
"types": "./dist/index.d.ts",
|
|
468
|
-
"exports": {
|
|
469
|
-
".": {
|
|
470
|
-
"types": "./dist/index.d.ts",
|
|
471
|
-
"import": "./dist/iflow-engine.es.js",
|
|
472
|
-
"require": "./dist/iflow-engine.umd.js"
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
```
|
|
477
|
-
|
|
478
|
-
## 📖 组件文档
|
|
479
|
-
|
|
480
|
-
详细的组件文档请参考 `docs/` 目录:
|
|
481
|
-
|
|
482
|
-
- [模块索引](docs/MODULES/模块索引.md)
|
|
483
|
-
- [组件模块](docs/MODULES/组件模块.md)
|
|
484
|
-
- [管理器模块](docs/MODULES/管理器模块.md)
|
|
485
|
-
- [设置系统](docs/MODULES/设置系统.md)
|
|
486
|
-
- [外部 API 总览](docs/外部API总览.md)
|
|
487
|
-
|
|
488
|
-
## 🔌 集成示例
|
|
489
|
-
|
|
490
|
-
### Vue 3 + Vite
|
|
491
|
-
|
|
492
|
-
```bash
|
|
493
|
-
cd demo-vue
|
|
494
|
-
npm install
|
|
495
|
-
npm run dev
|
|
496
|
-
```
|
|
497
|
-
|
|
498
|
-
### HTML
|
|
499
|
-
|
|
500
|
-
```bash
|
|
501
|
-
cd demo
|
|
502
|
-
npm run dev
|
|
503
|
-
```
|
|
504
|
-
|
|
505
|
-
## 🤝 贡献指南
|
|
506
|
-
|
|
507
|
-
欢迎贡献代码!请遵循以下步骤:
|
|
508
|
-
|
|
509
|
-
1. Fork 本仓库
|
|
510
|
-
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
|
|
511
|
-
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
|
512
|
-
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
|
513
|
-
5. 开启 Pull Request
|
|
514
|
-
|
|
515
|
-
### 代码规范
|
|
516
|
-
|
|
517
|
-
- 使用 TypeScript 编写代码
|
|
518
|
-
- 遵循 ESLint 规则
|
|
519
|
-
- 编写清晰的注释和文档
|
|
520
|
-
- 为新功能添加测试用例
|
|
521
|
-
|
|
522
|
-
## 📝 更新日志
|
|
523
|
-
|
|
524
|
-
### v1.3.2 (2026-03-05)
|
|
525
|
-
|
|
526
|
-
**架构优化**
|
|
527
|
-
- ✨ EngineManager 瘦身：移除大规模 1:1 透传方法
|
|
528
|
-
- ✨ 新增 `EngineManager.getEngineComponent()` 供内部访问
|
|
529
|
-
- ✨ BaseManager 新增 `engineComponent` 便捷访问器
|
|
530
|
-
- ✨ Manager 内部调用统一迁移为 `this.engineComponent?.xxx()`
|
|
531
|
-
- ✨ 原始事件访问改为 `onRawEvent()/offRawEvent()`，移除 `getEngine()`
|
|
532
|
-
|
|
533
|
-
### v1.0.0 (2024-12-26)
|
|
534
|
-
|
|
535
|
-
**核心功能**
|
|
536
|
-
- ✨ 初始版本发布
|
|
537
|
-
- ✨ 实现管理器模式架构
|
|
538
|
-
- ✨ 支持 Vue 2/3、React、HTML
|
|
539
|
-
|
|
540
|
-
**组件系统**
|
|
541
|
-
- ✨ Dialog 对话框组件
|
|
542
|
-
- ✨ Tree 树形控件
|
|
543
|
-
- ✨ ButtonGroup 按钮组
|
|
544
|
-
- ✨ MeasurePanel 测量面板
|
|
545
|
-
- ✨ SectionPlanePanel 拾取面剖切
|
|
546
|
-
- ✨ SectionAxisPanel 轴向剖切
|
|
547
|
-
- ✨ SectionBoxPanel 剖切盒
|
|
548
|
-
- ✨ WalkControlPanel 漫游控制
|
|
549
|
-
|
|
550
|
-
**功能特性**
|
|
551
|
-
- ✨ 主题系统 (暗色/亮色)
|
|
552
|
-
- ✨ 国际化 (中英文)
|
|
553
|
-
- ✨ 事件系统
|
|
554
|
-
- ✨ 图标管理器
|
|
555
|
-
|
|
556
|
-
## 📄 许可证
|
|
557
|
-
|
|
558
|
-
MIT License
|
|
559
|
-
|
|
560
|
-
## 🙏 致谢
|
|
561
|
-
|
|
562
|
-
感谢所有为本项目做出贡献的开发者!
|
|
563
|
-
|
|
564
|
-
## 📮 联系方式
|
|
565
|
-
|
|
566
|
-
如有问题或建议,请通过以下方式联系:
|
|
567
|
-
|
|
568
|
-
- 提交 [Issue](https://github.com/your-repo/iflow-engine/issues)
|
|
569
|
-
- 发送邮件至 your-email@example.com
|
|
570
|
-
|
|
571
|
-
---
|
|
572
|
-
|
|
573
|
-
**Made with ❤️ by BIM Engine Team**
|
|
1
|
+
> 一个功能强大的 BIM（建筑信息模型）引擎 SDK
|
package/dist/bim-engine-2d.d.ts
CHANGED
|
@@ -54,6 +54,7 @@ export declare class BimEngine2d {
|
|
|
54
54
|
constructor(container: HTMLElement | string, options?: BimEngine2dOptions);
|
|
55
55
|
/** 加载 2D 图纸 */
|
|
56
56
|
loadDrawing(url: string, options?: DrawingLoadOptions): Promise<void>;
|
|
57
|
+
loadModelByViewToken(viewToken: string): Promise<void>;
|
|
57
58
|
/** 获取所有图层 */
|
|
58
59
|
getLayers(): Drawing2dLayer[];
|
|
59
60
|
/** 设置图层可见性 */
|
package/dist/bim-engine-720.d.ts
CHANGED
|
@@ -47,6 +47,7 @@ export declare class BimEngine720 {
|
|
|
47
47
|
constructor(container: HTMLElement | string, options?: BimEngine720Options);
|
|
48
48
|
/** 加载全景图 */
|
|
49
49
|
loadPanorama(url: string, options?: PanoramaLoadOptions): Promise<void>;
|
|
50
|
+
loadModelByViewToken(viewToken: string): Promise<void>;
|
|
50
51
|
/** 预加载多个全景图 */
|
|
51
52
|
preloadPanoramas(urls: string[]): Promise<void>;
|
|
52
53
|
/** 设置视场角 */
|
|
@@ -25,6 +25,7 @@ export declare class BimEngineGaussian {
|
|
|
25
25
|
private readonly handleWindowResize;
|
|
26
26
|
constructor(container: HTMLElement | string, options?: BimEngineGaussianOptions);
|
|
27
27
|
loadModel(url: string, options?: GaussianLoadOptions): Promise<GaussianSceneInfo | null>;
|
|
28
|
+
loadModelByViewToken(viewToken: string): Promise<GaussianSceneInfo | null>;
|
|
28
29
|
unloadModel(id: string): Promise<void>;
|
|
29
30
|
clearModels(): Promise<void>;
|
|
30
31
|
setOrientationPreset(preset: GaussianOrientationPreset): void;
|
package/dist/bim-engine-gis.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { EngineGisMainViewPort, EngineGisMainViewPortInput, EngineGisOptions } from './components/engine-gis/types';
|
|
1
|
+
import { EngineGisLoaded3DTilesModel, EngineGisMainViewPort, EngineGisMainViewPortInput, EngineGisOptions } from './components/engine-gis/types';
|
|
2
2
|
import { BottomDockManager } from './managers/bottom-dock-manager';
|
|
3
3
|
import { EngineGisManager } from './managers/engine-gis-manager';
|
|
4
4
|
import { GisModelCalibrationDockManager } from './managers/gis-model-calibration-dock-manager';
|
|
@@ -52,6 +52,7 @@ export declare class BimEngineGIS {
|
|
|
52
52
|
goToMainPort(): void;
|
|
53
53
|
/** 清空 GIS 主视角并回到 initialView 或底层默认视角 */
|
|
54
54
|
resetMainViewPort(): void;
|
|
55
|
+
loadModelByViewToken(viewToken: string): Promise<EngineGisLoaded3DTilesModel | null>;
|
|
55
56
|
/** 销毁 GIS 引擎，释放所有资源 */
|
|
56
57
|
destroy(): void;
|
|
57
58
|
}
|
package/dist/bim-engine.d.ts
CHANGED
|
@@ -25,9 +25,11 @@ import { RadialMenuItem } from './components/radial-toolbar/types';
|
|
|
25
25
|
export type { EngineOptions, ModelLoadOptions };
|
|
26
26
|
export type { RadialMenuItem };
|
|
27
27
|
export type { ConstructTreeData, ConstructTreeModelData, ConstructTreeNode, ConstructTreeSearchOptions, ConstructTreeType, } from './managers/engine-manager';
|
|
28
|
+
export type BimEngineMode = 'desktop' | 'mobile' | 'auto';
|
|
28
29
|
export interface BimEngineOptions {
|
|
29
30
|
locale?: LocaleType;
|
|
30
31
|
theme?: ThemeType;
|
|
32
|
+
mode?: BimEngineMode;
|
|
31
33
|
enableRadialToolbar?: boolean;
|
|
32
34
|
enableConstructTree?: boolean;
|
|
33
35
|
enableRightKeyMenu?: boolean;
|
|
@@ -42,6 +44,7 @@ export declare class BimEngine {
|
|
|
42
44
|
private lastSyncedWidth;
|
|
43
45
|
private lastSyncedHeight;
|
|
44
46
|
private registry;
|
|
47
|
+
private readonly mode;
|
|
45
48
|
private readonly uiOptions;
|
|
46
49
|
dialog: DialogManager | null;
|
|
47
50
|
engine: EngineManager | null;
|
|
@@ -76,19 +79,57 @@ export declare class BimEngine {
|
|
|
76
79
|
getLocale(): LocaleType;
|
|
77
80
|
setTheme(theme: 'dark' | 'light'): void;
|
|
78
81
|
setCustomTheme(theme: ThemeConfig): void;
|
|
82
|
+
initialize(options?: Omit<EngineOptions, 'container'>): Promise<boolean>;
|
|
83
|
+
loadModel(urls: string[], options?: ModelLoadOptions): void;
|
|
79
84
|
setPinEditable(editable: boolean): void;
|
|
80
85
|
isPinEditable(): boolean;
|
|
81
86
|
/**
|
|
82
|
-
*
|
|
83
|
-
* 需要 enableRadialToolbar 为 true
|
|
87
|
+
* 向右下角工具栏追加一个外部按钮。
|
|
88
|
+
* 需要 enableRadialToolbar 为 true；关闭工具栏时该方法会静默忽略。
|
|
84
89
|
*/
|
|
85
90
|
addRadialToolbarButton(item: RadialMenuItem): void;
|
|
86
91
|
/**
|
|
87
|
-
*
|
|
92
|
+
* 设置右下角工具栏 toggle 按钮的激活状态。
|
|
88
93
|
* 仅对 isToggle=true 的按钮生效。
|
|
89
94
|
*/
|
|
90
95
|
setRadialToolbarButtonActive(id: string, active: boolean): void;
|
|
96
|
+
loadModelByViewToken(viewToken: string): Promise<void>;
|
|
97
|
+
/**
|
|
98
|
+
* 解析最终运行模式；auto 会根据触摸能力和容器宽度判断桌面端或移动端。
|
|
99
|
+
*/
|
|
100
|
+
private resolveMode;
|
|
101
|
+
/**
|
|
102
|
+
* 判断当前是否运行桌面端 UI；移动端只保留通用引擎能力。
|
|
103
|
+
*/
|
|
104
|
+
private isDesktopUi;
|
|
105
|
+
/**
|
|
106
|
+
* 初始化入口：先加载通用能力，再按 mode 加载对应 UI。
|
|
107
|
+
*/
|
|
91
108
|
private init;
|
|
109
|
+
/**
|
|
110
|
+
* 初始化基础容器；移动端不会创建任何桌面端状态栏或调试信息。
|
|
111
|
+
*/
|
|
112
|
+
private initContainer;
|
|
113
|
+
/**
|
|
114
|
+
* 初始化桌面端状态信息，包括版本号、模型统计和容器尺寸。
|
|
115
|
+
*/
|
|
116
|
+
private initDesktopStatusUi;
|
|
117
|
+
/**
|
|
118
|
+
* 初始化桌面端和移动端都需要的通用能力，目前只包含 3D 引擎管理器。
|
|
119
|
+
*/
|
|
120
|
+
private initCommonManagers;
|
|
121
|
+
/**
|
|
122
|
+
* 初始化桌面端 UI；所有现有桌面组件都集中在这里，移动端不会执行。
|
|
123
|
+
*/
|
|
124
|
+
private initDesktopUi;
|
|
125
|
+
/**
|
|
126
|
+
* 初始化移动端 UI；当前移动端不加载任何 UI 组件，只保留模型加载能力。
|
|
127
|
+
*/
|
|
128
|
+
private initMobileUi;
|
|
129
|
+
/**
|
|
130
|
+
* 绑定通用事件和全局服务订阅，桌面端和移动端都会执行。
|
|
131
|
+
*/
|
|
132
|
+
private bindCommonEvents;
|
|
92
133
|
private updateTheme;
|
|
93
134
|
private updateClientSizeDisplay;
|
|
94
135
|
private updateEngineStats;
|
|
@@ -84,6 +84,7 @@ export declare class Engine implements IBimComponent {
|
|
|
84
84
|
* @param options 加载选项（位置、旋转、缩放）
|
|
85
85
|
*/
|
|
86
86
|
loadModel(urls: string[], options?: ModelLoadOptions): void;
|
|
87
|
+
loadModelByViewToken(viewToken: string): Promise<void>;
|
|
87
88
|
private getRawLabel;
|
|
88
89
|
/** 进入一次 3D 模型选点模式，返回模型世界坐标 */
|
|
89
90
|
pickPoint(): Promise<LabelCoordinate | null>;
|