u-space 0.0.0-alpha.2 → 0.0.1
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/docs/api-animations.md +23 -23
- package/docs/api-effects.md +41 -41
- package/docs/api-interactions.md +45 -45
- package/docs/api-managers.md +24 -24
- package/docs/api-objects.md +85 -85
- package/docs/api-plugins.md +113 -113
- package/docs/api-viewer.md +45 -45
- package/docs/examples-guide.md +31 -31
- package/docs/getting-started.md +36 -36
- package/package.json +4 -3
package/docs/api-animations.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# Animations API
|
|
2
2
|
|
|
3
|
-
`u-space`
|
|
3
|
+
`u-space` 提供了 `Tween` 类和 `tweenAnimation` 辅助函数，用于对任意数值属性进行动画处理。两者都是对 [`@tweenjs/tween.js`](https://github.com/tweenjs/tween.js) 的轻量封装，并自动与 `Viewer` 渲染循环集成。
|
|
4
4
|
|
|
5
5
|
## `tweenAnimation`
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
对任意对象属性执行动画的最简方式，返回一个在动画完成后 resolve 的 `Promise`。
|
|
8
8
|
|
|
9
9
|
```typescript
|
|
10
10
|
import { tweenAnimation } from 'u-space';
|
|
@@ -13,17 +13,17 @@ const source = { x: 0, y: 0, z: 0 };
|
|
|
13
13
|
|
|
14
14
|
await tweenAnimation(
|
|
15
15
|
viewer,
|
|
16
|
-
source,
|
|
17
|
-
{ x: 10, y: 5, z: 10 },
|
|
16
|
+
source, // 可变的起始状态（每帧被修改）
|
|
17
|
+
{ x: 10, y: 5, z: 10 }, // 目标状态
|
|
18
18
|
{
|
|
19
|
-
duration: 1500,
|
|
19
|
+
duration: 1500, // 毫秒
|
|
20
20
|
delay: 0,
|
|
21
21
|
mode: 'Cubic.InOut',
|
|
22
22
|
repeat: false,
|
|
23
23
|
yoyo: false,
|
|
24
24
|
},
|
|
25
25
|
(current) => {
|
|
26
|
-
//
|
|
26
|
+
// 每帧以插值结果调用
|
|
27
27
|
myObject.position.set(current.x, current.y, current.z);
|
|
28
28
|
},
|
|
29
29
|
);
|
|
@@ -31,23 +31,23 @@ await tweenAnimation(
|
|
|
31
31
|
|
|
32
32
|
### `AnimationOptions`
|
|
33
33
|
|
|
34
|
-
|
|
|
35
|
-
| :--------- | :-------------------------- | :-------------- |
|
|
36
|
-
| `duration` | `number` | `1000` |
|
|
37
|
-
| `delay` | `number` | `0` |
|
|
38
|
-
| `mode` | `AnimationModeType` | `'Linear.None'` |
|
|
39
|
-
| `repeat` | `number \| boolean` | `false` |
|
|
40
|
-
| `yoyo` | `boolean` | `false` |
|
|
34
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
35
|
+
| :--------- | :-------------------------- | :-------------- | :------------------------------------------------- |
|
|
36
|
+
| `duration` | `number` | `1000` | 动画时长（毫秒）。 |
|
|
37
|
+
| `delay` | `number` | `0` | 开始延迟（毫秒）。 |
|
|
38
|
+
| `mode` | `AnimationModeType` | `'Linear.None'` | 缓动函数。 |
|
|
39
|
+
| `repeat` | `number \| boolean` | `false` | 额外重复次数，或 `true` 表示无限循环。 |
|
|
40
|
+
| `yoyo` | `boolean` | `false` | 在每个循环周期反向播放。 |
|
|
41
41
|
|
|
42
42
|
### `AnimationModeType`
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
支持所有标准缓动模式：
|
|
45
45
|
|
|
46
46
|
`Linear.None` · `Quadratic.In/Out/InOut` · `Cubic.In/Out/InOut` · `Quartic.In/Out/InOut` · `Quintic.In/Out/InOut` · `Sinusoidal.In/Out/InOut` · `Exponential.In/Out/InOut` · `Circular.In/Out/InOut` · `Elastic.In/Out/InOut` · `Back.In/Out/InOut` · `Bounce.In/Out/InOut`
|
|
47
47
|
|
|
48
48
|
## `Tween`
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
提供完全控制的底层类。继承自 `tween.js` 的基础 `Tween`，并通过 `addEventListener('afterControlsUpdate', ...)` 挂入 `Viewer` 事件循环。
|
|
51
51
|
|
|
52
52
|
```typescript
|
|
53
53
|
import { Tween } from 'u-space';
|
|
@@ -61,18 +61,18 @@ const tween = new Tween(viewer, source)
|
|
|
61
61
|
myMaterial.opacity = s.opacity;
|
|
62
62
|
viewer.render();
|
|
63
63
|
})
|
|
64
|
-
.onComplete(() => console.log('
|
|
64
|
+
.onComplete(() => console.log('完成'));
|
|
65
65
|
|
|
66
66
|
tween.start();
|
|
67
67
|
// tween.stop();
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
###
|
|
70
|
+
### 方法
|
|
71
71
|
|
|
72
|
-
|
|
|
73
|
-
| :------------------------ |
|
|
74
|
-
| `easingByMode(mode)` |
|
|
75
|
-
| `start(time?)` |
|
|
76
|
-
| `stop()` |
|
|
72
|
+
| 方法 | 说明 |
|
|
73
|
+
| :------------------------ | :-------------------------------------------------------------- |
|
|
74
|
+
| `easingByMode(mode)` | 使用 `AnimationModeType` 设置缓动函数的便捷简写。 |
|
|
75
|
+
| `start(time?)` | 启动补间并注册到 viewer 循环中。 |
|
|
76
|
+
| `stop()` | 停止补间并从 viewer 循环中注销。 |
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
其他方法（`to`、`delay`、`repeat`、`yoyo`、`onUpdate`、`onComplete`、`onStop`、`onStart`）均继承自 `tween.js` 的基础 `Tween` 类。
|
package/docs/api-effects.md
CHANGED
|
@@ -1,50 +1,50 @@
|
|
|
1
1
|
# Effects API
|
|
2
2
|
|
|
3
|
-
`u-space`
|
|
3
|
+
`u-space` 提供了两个基于 Three.js 着色语言（TSL/WebGPU 节点）的静态特效工具：`MaterialEffects` 用于为对象应用高亮状态，`TSLEffects` 用于生成动态颜色节点模式。
|
|
4
4
|
|
|
5
5
|
## `MaterialEffects`
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
静态工具类，将基于 TSL 的视觉特效直接应用于对象的材质。适用于任何 `Object3D`，会自动遍历所有子网格。
|
|
8
8
|
|
|
9
9
|
### `MaterialEffects.highlight(object, options?)`
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
为对象中所有网格应用颜色/透明度高亮。使用 `userData` 和 TSL 节点图，多个对象可共享同一节点图实例，各自保持独立状态。
|
|
12
12
|
|
|
13
13
|
```typescript
|
|
14
14
|
import { MaterialEffects } from 'u-space';
|
|
15
15
|
|
|
16
|
-
//
|
|
16
|
+
// 以 50% 透明度高亮为红色
|
|
17
17
|
MaterialEffects.highlight(myModel, {
|
|
18
18
|
enabled: true,
|
|
19
19
|
color: 0xff0000,
|
|
20
20
|
opacity: 0.5,
|
|
21
|
-
overwrite: false, // false =
|
|
21
|
+
overwrite: false, // false = 叠加（相乘），true = 完全替换颜色
|
|
22
22
|
});
|
|
23
23
|
|
|
24
|
-
//
|
|
24
|
+
// 禁用高亮
|
|
25
25
|
MaterialEffects.highlight(myModel, { enabled: false });
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
### `HighlightOptions`
|
|
29
29
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
| `enabled`
|
|
33
|
-
| `color`
|
|
34
|
-
| `opacity`
|
|
35
|
-
| `overwrite
|
|
30
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
31
|
+
| :---------- | :-------------------- | :---------- | :--------------------------------------------------------------------------- |
|
|
32
|
+
| `enabled` | `boolean` | `true` | 启用或禁用高亮特效。 |
|
|
33
|
+
| `color` | `ColorRepresentation` | `0xff0000` | 高亮颜色。 |
|
|
34
|
+
| `opacity` | `number` | `0.5` | 高亮时材质的透明度。 |
|
|
35
|
+
| `overwrite` | `boolean` | `false` | `false` = 与原始颜色相乘（叠加）；`true` = 完全替换颜色。 |
|
|
36
36
|
|
|
37
|
-
>
|
|
37
|
+
> **注意：** `highlight` 会在所有受影响的网格上设置 `material.transparent = true`，并注入 `colorNode`/`opacityNode`。目前不可逆，若需恢复须手动重置这些节点。
|
|
38
38
|
|
|
39
39
|
---
|
|
40
40
|
|
|
41
41
|
## `TSLEffects`
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
静态工厂类，返回 TSL 颜色节点。将返回值赋给 `NodeMaterial` 的 `material.colorNode` 即可应用动态着色器特效。持续动画需要 `viewer.frameloop = 'always'`。
|
|
44
44
|
|
|
45
45
|
### `TSLEffects.flow(parameters?)`
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
沿网格 UV X 轴方向的定向光扫效果，适用于道路、管道和流线。
|
|
48
48
|
|
|
49
49
|
```typescript
|
|
50
50
|
import { TSLEffects } from 'u-space';
|
|
@@ -59,19 +59,19 @@ myTubeMesh.material.colorNode = TSLEffects.flow({
|
|
|
59
59
|
viewer.frameloop = 'always';
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
**参数：**
|
|
63
63
|
|
|
64
|
-
|
|
|
65
|
-
| :---------- | :-------------------- | :---------- |
|
|
66
|
-
| `baseColor` | `ColorRepresentation` | `0xffffff` |
|
|
67
|
-
| `flowColor` | `ColorRepresentation` | `0x00ff00` |
|
|
68
|
-
| `speed` | `number` | `1.0` |
|
|
69
|
-
| `scale` | `number` | `3.0` |
|
|
70
|
-
| `intensity` | `number` | `4.0` |
|
|
64
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
65
|
+
| :---------- | :-------------------- | :---------- | :------------------------------------------------ |
|
|
66
|
+
| `baseColor` | `ColorRepresentation` | `0xffffff` | 背景/底色。 |
|
|
67
|
+
| `flowColor` | `ColorRepresentation` | `0x00ff00` | 扫光高亮颜色。 |
|
|
68
|
+
| `speed` | `number` | `1.0` | 动画速度（越高扫光越快）。 |
|
|
69
|
+
| `scale` | `number` | `3.0` | 图案的空间频率。 |
|
|
70
|
+
| `intensity` | `number` | `4.0` | 峰值锐度，值越高光束越细。 |
|
|
71
71
|
|
|
72
72
|
### `TSLEffects.breathe(parameters?)`
|
|
73
73
|
|
|
74
|
-
|
|
74
|
+
在两种颜色之间随时间振荡的脉冲发光效果，适合状态指示器和警报。
|
|
75
75
|
|
|
76
76
|
```typescript
|
|
77
77
|
myMesh.material.colorNode = TSLEffects.breathe({
|
|
@@ -82,18 +82,18 @@ myMesh.material.colorNode = TSLEffects.breathe({
|
|
|
82
82
|
});
|
|
83
83
|
```
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
**参数：**
|
|
86
86
|
|
|
87
|
-
|
|
|
88
|
-
| :------------ | :-------------------- |
|
|
89
|
-
| `baseColor` | `ColorRepresentation` | `0xffffff`
|
|
90
|
-
| `breathColor` | `ColorRepresentation` | `0x00ff00`
|
|
91
|
-
| `speed` | `number` | `1.0`
|
|
92
|
-
| `intensity` | `number` | `2.0`
|
|
87
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
88
|
+
| :------------ | :-------------------- | :---------- | :--------------------------------- |
|
|
89
|
+
| `baseColor` | `ColorRepresentation` | `0xffffff` | 低/静息状态的颜色。 |
|
|
90
|
+
| `breathColor` | `ColorRepresentation` | `0x00ff00` | 峰值亮度时的颜色。 |
|
|
91
|
+
| `speed` | `number` | `1.0` | 振荡速度。 |
|
|
92
|
+
| `intensity` | `number` | `2.0` | 控制峰值的锐度。 |
|
|
93
93
|
|
|
94
94
|
### `TSLEffects.fluid(parameters?)`
|
|
95
95
|
|
|
96
|
-
|
|
96
|
+
噪声扭曲的流动效果，适用于水面、等离子体或有机流动材质。
|
|
97
97
|
|
|
98
98
|
```typescript
|
|
99
99
|
myPlaneMesh.material.colorNode = TSLEffects.fluid({
|
|
@@ -106,13 +106,13 @@ myPlaneMesh.material.colorNode = TSLEffects.fluid({
|
|
|
106
106
|
});
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
-
|
|
109
|
+
**参数：**
|
|
110
110
|
|
|
111
|
-
|
|
|
112
|
-
| :----------- | :-------------------- |
|
|
113
|
-
| `baseColor` | `ColorRepresentation` | `0xffffff`
|
|
114
|
-
| `flowColor` | `ColorRepresentation` | `0x0000ff`
|
|
115
|
-
| `speed` | `number` | `1.0`
|
|
116
|
-
| `scale` | `number` | `1.0`
|
|
117
|
-
| `intensity` | `number` | `1.0`
|
|
118
|
-
| `distortion` | `number` | `0.5`
|
|
111
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
112
|
+
| :----------- | :-------------------- | :---------- | :-------------------------------------------- |
|
|
113
|
+
| `baseColor` | `ColorRepresentation` | `0xffffff` | 基础颜色。 |
|
|
114
|
+
| `flowColor` | `ColorRepresentation` | `0x0000ff` | 流体高亮颜色。 |
|
|
115
|
+
| `speed` | `number` | `1.0` | 动画速度。 |
|
|
116
|
+
| `scale` | `number` | `1.0` | 噪声图案的 UV 缩放比例。 |
|
|
117
|
+
| `intensity` | `number` | `1.0` | 流体图案的锐度。 |
|
|
118
|
+
| `distortion` | `number` | `0.5` | 采样前噪声对 UV 的扭曲程度。 |
|
package/docs/api-interactions.md
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
1
|
# Interactions API
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`InteractionManager` 提供了一种统一的方式来处理 3D 场景中的用户输入（鼠标、触摸、指针）。它将屏幕空间的射线检测转换为世界空间坐标，并将对应事件直接分发到被命中的 3D 对象上。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
`InteractionManager` 在 `Viewer` 内部自动实例化，可通过 `viewer.interactionManager` 访问。
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## 启用交互事件
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
出于性能考虑，指针移动事件默认可能处于禁用状态。如需悬停和拖拽效果，必须显式开启。
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
//
|
|
12
|
+
// 启用鼠标移动事件（如 pointerenter 和 pointerleave）
|
|
13
13
|
viewer.interactionManager.pointerMoveEventsEnabled = true;
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
###
|
|
16
|
+
### 目标对象
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
可以限制射线检测所针对的对象范围。
|
|
19
19
|
|
|
20
20
|
```typescript
|
|
21
|
-
//
|
|
21
|
+
// 默认行为：检测整个场景
|
|
22
22
|
viewer.interactionManager.targetObjects = [];
|
|
23
23
|
|
|
24
|
-
//
|
|
24
|
+
// 仅检测指定对象
|
|
25
25
|
// viewer.interactionManager.targetObjects = [myBox, myModel];
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
##
|
|
28
|
+
## 添加事件监听
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
由于 `u-space` 对象（以及继承自 `BaseMesh`、`BaseGroup` 的对象）支持自定义事件，你可以像操作 DOM 元素一样原生地绑定监听器。
|
|
31
31
|
|
|
32
32
|
```typescript
|
|
33
33
|
const myBox = new Mesh(geometry, material);
|
|
34
34
|
viewer.scene.add(myBox);
|
|
35
35
|
|
|
36
|
-
//
|
|
36
|
+
// 直接在 Mesh 或 Model 上绑定监听器
|
|
37
37
|
myBox.addEventListener('click', (eventData) => {
|
|
38
|
-
//
|
|
38
|
+
// 底层指针事件和射线检测数据
|
|
39
39
|
const intersect = eventData.event.intersect;
|
|
40
40
|
|
|
41
|
-
console.log('
|
|
41
|
+
console.log('点击位置：', intersect.point);
|
|
42
42
|
});
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
##
|
|
45
|
+
## 支持的事件类型
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
以下事件类型可在可交互对象上监听：
|
|
48
48
|
|
|
49
|
-
- `click
|
|
50
|
-
- `dblclick
|
|
51
|
-
- `contextmenu
|
|
52
|
-
- `pointerdown
|
|
53
|
-
- `pointerup
|
|
54
|
-
- `pointermove
|
|
55
|
-
- `pointerenter
|
|
56
|
-
- `pointerleave
|
|
49
|
+
- `click`：指针点击对象时触发（过滤：长按或大幅移动后忽略）。
|
|
50
|
+
- `dblclick`：快速双击对象时触发。
|
|
51
|
+
- `contextmenu`：右键点击时触发（阻止默认浏览器上下文菜单）。
|
|
52
|
+
- `pointerdown`：指针按键在对象上按下时触发。
|
|
53
|
+
- `pointerup`：指针按键在对象上释放时触发。
|
|
54
|
+
- `pointermove`：指针在对象上移动时触发，需要 `pointerMoveEventsEnabled = true`。
|
|
55
|
+
- `pointerenter`：光标进入对象范围时触发，需要 `pointerMoveEventsEnabled = true`。
|
|
56
|
+
- `pointerleave`：光标离开对象范围时触发，需要 `pointerMoveEventsEnabled = true`。
|
|
57
57
|
|
|
58
|
-
###
|
|
58
|
+
### 事件冒泡
|
|
59
59
|
|
|
60
|
-
|
|
60
|
+
事件会沿父级链向上冒泡。若要阻止事件继续传播，可调用事件载荷上的 `stopPropagation()`：
|
|
61
61
|
|
|
62
62
|
```typescript
|
|
63
63
|
myObject.addEventListener('click', (e) => {
|
|
@@ -67,42 +67,42 @@ myObject.addEventListener('click', (e) => {
|
|
|
67
67
|
|
|
68
68
|
## `InteractionEvent`
|
|
69
69
|
|
|
70
|
-
|
|
70
|
+
传递给所有监听回调的事件对象，位于 `event` 键下。
|
|
71
71
|
|
|
72
|
-
###
|
|
72
|
+
### 属性
|
|
73
73
|
|
|
74
|
-
|
|
|
75
|
-
| :-------------- | :----------------------------------------- |
|
|
76
|
-
| `type` | `InteractionEventType` |
|
|
77
|
-
| `target` | `Object3D` |
|
|
78
|
-
| `currentTarget` | `Object3D` |
|
|
79
|
-
| `intersect` | `Intersection \| null` | Three.js
|
|
80
|
-
| `originalEvent` | `PointerEvent \| MouseEvent` |
|
|
74
|
+
| 属性 | 类型 | 说明 |
|
|
75
|
+
| :-------------- | :----------------------------------------- | :-------------------------------------------------------------------------- |
|
|
76
|
+
| `type` | `InteractionEventType` | 事件类型字符串（如 `'click'`）。 |
|
|
77
|
+
| `target` | `Object3D` | 触发事件的原始 3D 对象（第一个命中点）。 |
|
|
78
|
+
| `currentTarget` | `Object3D` | 冒泡链中当前处理事件的对象。 |
|
|
79
|
+
| `intersect` | `Intersection \| null` | Three.js 射线检测数据：`point`、`face`、`distance`、`uv` 等。 |
|
|
80
|
+
| `originalEvent` | `PointerEvent \| MouseEvent` | 原始 DOM 指针/鼠标事件。 |
|
|
81
81
|
|
|
82
|
-
###
|
|
82
|
+
### 方法
|
|
83
83
|
|
|
84
84
|
#### `stopPropagation()`
|
|
85
85
|
|
|
86
|
-
|
|
86
|
+
阻止事件继续向上冒泡。
|
|
87
87
|
|
|
88
88
|
## `InteractionManager` API
|
|
89
89
|
|
|
90
|
-
###
|
|
90
|
+
### 属性
|
|
91
91
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
| `targetObjects`
|
|
95
|
-
| `pointerMoveEventsEnabled
|
|
92
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
93
|
+
| :------------------------- | :---------------------------- | :------ | :--------------------------------------------------------- |
|
|
94
|
+
| `targetObjects` | `Object3D[] \| null` | `null` | 射线检测的目标对象。`null` 表示检测所有场景子对象。 |
|
|
95
|
+
| `pointerMoveEventsEnabled` | `boolean` | `false` | 启用 `pointermove`、`pointerenter`、`pointerleave` 事件。 |
|
|
96
96
|
|
|
97
|
-
###
|
|
97
|
+
### 方法
|
|
98
98
|
|
|
99
99
|
#### `setCamera(camera)`
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
更新用于射线检测的相机。由 `viewer.setCamera()` 自动调用。
|
|
102
102
|
|
|
103
103
|
#### `dispose()`
|
|
104
104
|
|
|
105
|
-
|
|
105
|
+
移除所有 DOM 事件监听，清理内部状态。
|
|
106
106
|
|
|
107
107
|
```typescript
|
|
108
108
|
viewer.interactionManager.dispose();
|
package/docs/api-managers.md
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
# Managers API
|
|
2
2
|
|
|
3
|
-
`u-space`
|
|
3
|
+
`u-space` 使用专用管理器来处理特定领域的逻辑，例如用于缓存和注册 3D 对象的 `ObjectManager`。
|
|
4
4
|
|
|
5
5
|
## ObjectManager
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
`ObjectManager` 提供了一个集中式字典/映射层，让你无需递归遍历 Three.js 场景图，就能通过字符串 ID 或字符串名称轻松检索复杂模型或特定网格。
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
默认实例可通过 `viewer.objectManager` 访问。
|
|
10
10
|
|
|
11
|
-
###
|
|
11
|
+
### 添加对象
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
向管理器添加对象时，必须提供唯一标识符。
|
|
14
14
|
|
|
15
15
|
```typescript
|
|
16
16
|
const myModel = new Model();
|
|
17
|
-
// ...
|
|
17
|
+
// ... 加载逻辑
|
|
18
18
|
|
|
19
|
-
//
|
|
19
|
+
// 用指定的唯一 ID 添加
|
|
20
20
|
viewer.objectManager.add('my-unique-car-id', myModel);
|
|
21
21
|
|
|
22
|
-
//
|
|
22
|
+
// 一个对象可以注册多个 ID
|
|
23
23
|
viewer.objectManager.add('player-vehicle', myModel);
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
###
|
|
26
|
+
### 检索对象
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
管理器提供快速访问对象的方法。
|
|
29
29
|
|
|
30
30
|
#### `getById(id: string)`
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
精确检索与指定 ID 匹配的一个对象（或 `undefined`）。
|
|
33
33
|
|
|
34
34
|
```typescript
|
|
35
35
|
const car = viewer.objectManager.getById('my-unique-car-id');
|
|
@@ -37,10 +37,10 @@ const car = viewer.objectManager.getById('my-unique-car-id');
|
|
|
37
37
|
|
|
38
38
|
#### `getByName(name: string)`
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
由于 Three.js 对象可以共享同一个 `.name` 属性，此方法返回一个 `Set<Object3D>`，包含所有与指定名称匹配的已注册对象。
|
|
41
41
|
|
|
42
42
|
```typescript
|
|
43
|
-
//
|
|
43
|
+
// 假设 myModel.name = 'sedan'
|
|
44
44
|
const sedans = viewer.objectManager.getByName('sedan');
|
|
45
45
|
|
|
46
46
|
sedans.forEach((vehicle) => {
|
|
@@ -50,7 +50,7 @@ sedans.forEach((vehicle) => {
|
|
|
50
50
|
|
|
51
51
|
#### `getByType(type: string)`
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
返回一个 `Set<Object3D>`，包含所有 `object.type` 与指定类型匹配的已注册对象。
|
|
54
54
|
|
|
55
55
|
```typescript
|
|
56
56
|
const models = viewer.objectManager.getByType('Model');
|
|
@@ -58,17 +58,17 @@ const models = viewer.objectManager.getByType('Model');
|
|
|
58
58
|
|
|
59
59
|
#### `getObjectIds(object: Object3D)`
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
返回给定对象已注册的所有 ID 的 `Set<string>`。
|
|
62
62
|
|
|
63
63
|
```typescript
|
|
64
64
|
const ids = viewer.objectManager.getObjectIds(myModel);
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
###
|
|
67
|
+
### 移除对象
|
|
68
68
|
|
|
69
69
|
#### `remove(object: Object3D)`
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
从所有内部映射中移除该对象及其所有关联 ID。
|
|
72
72
|
|
|
73
73
|
```typescript
|
|
74
74
|
viewer.objectManager.remove(myModel);
|
|
@@ -76,7 +76,7 @@ viewer.objectManager.remove(myModel);
|
|
|
76
76
|
|
|
77
77
|
#### `removeById(id: string)`
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
移除注册在指定 ID 下的对象。
|
|
80
80
|
|
|
81
81
|
```typescript
|
|
82
82
|
viewer.objectManager.removeById('my-unique-car-id');
|
|
@@ -84,7 +84,7 @@ viewer.objectManager.removeById('my-unique-car-id');
|
|
|
84
84
|
|
|
85
85
|
#### `removeByName(name: string)`
|
|
86
86
|
|
|
87
|
-
|
|
87
|
+
移除所有具有指定 `.name` 的对象。
|
|
88
88
|
|
|
89
89
|
```typescript
|
|
90
90
|
viewer.objectManager.removeByName('sedan');
|
|
@@ -92,14 +92,14 @@ viewer.objectManager.removeByName('sedan');
|
|
|
92
92
|
|
|
93
93
|
#### `removeByType(type: string)`
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
移除所有具有指定 `.type` 的对象。
|
|
96
96
|
|
|
97
97
|
```typescript
|
|
98
98
|
viewer.objectManager.removeByType('Model');
|
|
99
99
|
```
|
|
100
100
|
|
|
101
|
-
###
|
|
101
|
+
### 工具方法
|
|
102
102
|
|
|
103
|
-
- `getAll()
|
|
104
|
-
- `clear()
|
|
105
|
-
- `size
|
|
103
|
+
- `getAll()`：返回所有已跟踪对象的 `Set<Object3D>`。
|
|
104
|
+
- `clear()`：从所有内部映射中移除所有对象。
|
|
105
|
+
- `size`：返回当前管理器跟踪的唯一对象总数。
|