three-base 2.0.190 → 2.0.192
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/MeshBase.d.ts +23 -0
- package/MeshBase.js +47 -1
- package/MeshBase.ts +301 -257
- package/MktMesh/MktMesh.d.ts +34 -1
- package/MktMesh/MktMesh.js +70 -3
- package/MktMesh/MktMesh.ts +1437 -1368
- package/MktMesh/imagePlane.d.ts +4 -0
- package/MktMesh/imagePlane.js +8 -0
- package/MktMesh/imagePlane.ts +7 -0
- package/MktMesh/modelSlot.d.ts +8 -0
- package/MktMesh/modelSlot.js +26 -2
- package/MktMesh/modelSlot.ts +26 -2
- package/instanced/InstancedMeshBase.js +3 -0
- package/instanced/InstancedMeshBase.ts +3 -0
- package/package.json +1 -1
package/MeshBase.ts
CHANGED
|
@@ -1,257 +1,301 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2022-02-24 22:49:42
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2025-06-25
|
|
6
|
-
*/
|
|
7
|
-
import { AnimationAction, AnimationClip, AnimationMixer, Clock, Group, Mesh, Object3D, Vector3 } from "three";
|
|
8
|
-
import threeUtils from "./threeUtils";
|
|
9
|
-
import threeLoader from "./threeLoader";
|
|
10
|
-
import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils";
|
|
11
|
-
import { isString } from "lodash";
|
|
12
|
-
import { dispatchCustomEvent } from "./EventMap";
|
|
13
|
-
|
|
14
|
-
// 模型基类
|
|
15
|
-
export default class MeshBase extends Group {
|
|
16
|
-
constructor(url?: string) {
|
|
17
|
-
super();
|
|
18
|
-
url && this.loadModel(url);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
url: string = "";
|
|
22
|
-
// 模型对象
|
|
23
|
-
static models: Map<string, Object3D> = new Map();
|
|
24
|
-
// 模型是否在加载中
|
|
25
|
-
static loadModeling: Map<string, boolean> = new Map();
|
|
26
|
-
// 加载完成
|
|
27
|
-
loaded: boolean = false;
|
|
28
|
-
// 是否有动画
|
|
29
|
-
hasAnimation: boolean = false;
|
|
30
|
-
//动画混合器
|
|
31
|
-
mixer?: AnimationMixer;
|
|
32
|
-
//动画剪辑对象数组
|
|
33
|
-
animationActions: {
|
|
34
|
-
[key: string]: AnimationAction;
|
|
35
|
-
} = {};
|
|
36
|
-
// 获取文件名的后缀
|
|
37
|
-
getSuffix(filename: string): string {
|
|
38
|
-
const match = filename.match(/\.([^\.]+)$/);
|
|
39
|
-
return match ? match[1].toLowerCase() : "";
|
|
40
|
-
}
|
|
41
|
-
reset(...object: Object3D[]): this {
|
|
42
|
-
threeUtils.dipose(this);
|
|
43
|
-
for (const child of this.children) {
|
|
44
|
-
child.parent = null;
|
|
45
|
-
}
|
|
46
|
-
for (const item of object) {
|
|
47
|
-
this.add(item);
|
|
48
|
-
}
|
|
49
|
-
return this;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
await this.awaitLoaded();
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2022-02-24 22:49:42
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2025-06-25
|
|
6
|
+
*/
|
|
7
|
+
import { AnimationAction, AnimationClip, AnimationMixer, Clock, Group, Mesh, Object3D, Vector3 } from "three";
|
|
8
|
+
import threeUtils from "./threeUtils";
|
|
9
|
+
import threeLoader from "./threeLoader";
|
|
10
|
+
import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils";
|
|
11
|
+
import { isString } from "lodash";
|
|
12
|
+
import { dispatchCustomEvent } from "./EventMap";
|
|
13
|
+
|
|
14
|
+
// 模型基类
|
|
15
|
+
export default class MeshBase extends Group {
|
|
16
|
+
constructor(url?: string) {
|
|
17
|
+
super();
|
|
18
|
+
url && this.loadModel(url);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
url: string = "";
|
|
22
|
+
// 模型对象
|
|
23
|
+
static models: Map<string, Object3D> = new Map();
|
|
24
|
+
// 模型是否在加载中
|
|
25
|
+
static loadModeling: Map<string, boolean> = new Map();
|
|
26
|
+
// 加载完成
|
|
27
|
+
loaded: boolean = false;
|
|
28
|
+
// 是否有动画
|
|
29
|
+
hasAnimation: boolean = false;
|
|
30
|
+
//动画混合器
|
|
31
|
+
mixer?: AnimationMixer;
|
|
32
|
+
//动画剪辑对象数组
|
|
33
|
+
animationActions: {
|
|
34
|
+
[key: string]: AnimationAction;
|
|
35
|
+
} = {};
|
|
36
|
+
// 获取文件名的后缀
|
|
37
|
+
getSuffix(filename: string): string {
|
|
38
|
+
const match = filename.match(/\.([^\.]+)$/);
|
|
39
|
+
return match ? match[1].toLowerCase() : "";
|
|
40
|
+
}
|
|
41
|
+
reset(...object: Object3D[]): this {
|
|
42
|
+
threeUtils.dipose(this);
|
|
43
|
+
for (const child of this.children) {
|
|
44
|
+
child.parent = null;
|
|
45
|
+
}
|
|
46
|
+
for (const item of object) {
|
|
47
|
+
this.add(item);
|
|
48
|
+
}
|
|
49
|
+
return this;
|
|
50
|
+
}
|
|
51
|
+
/** 「压着等放行」的内容子对象在册表(摘牌 = 从这里删掉,放行那一拍便不再写它的 `visible`) */
|
|
52
|
+
private readonly _revealPending = new Set<Object3D>();
|
|
53
|
+
/**
|
|
54
|
+
* ⭐ 2026-10-28「这个方案也可以用在 MeshBase 对象上面,让每个模型对象都逐帧显示出来,就不用一起阻塞了」:
|
|
55
|
+
* 刚进场景图的这几颗内容先压住,再交给 `threeUtils` 的全局队列 —— 那一拍每帧只跑一项
|
|
56
|
+
* (`requestAnimationFrame()` 里 `workList.splice(0, 1)`),且派发点在渲染之后 ⇒ 一帧只放行一个对象,
|
|
57
|
+
* 它下一帧才被真画出来。几十只模型同时落地时,「顶点缓冲上传 + 首次 program 编译」(都发生在真被画的
|
|
58
|
+
* 那一帧)就摊到几十帧上,不再是进门那一下的一整卡。
|
|
59
|
+
* ⚠️ 压的是**内容子对象**的 `visible`,⛔ 不是 MeshBase 自己:`ManyModelGroup.setDatas` 拿 MeshBase 的
|
|
60
|
+
* `visible` 当「这条数据还在不在」的筛子 ⇒ 那个旋钮归消费者,这里不许占用。
|
|
61
|
+
* ⚠️ 只压「这一次新加进来的」那几颗 ⇒ 换模型(`reset`)时不会把旁边早已点亮的内容一起按下去。
|
|
62
|
+
* ⚠️ ⛔ 别改成「每颗在自己的 `onBeforeRender` 里轮询 loaded」:three 的 `projectObject` 第一句就是
|
|
63
|
+
* `if (object.visible === false) return;`(`node_modules/three/build/three.module.js:29837`)⇒
|
|
64
|
+
* 隐形对象一次回调都收不到,自己等自己 = 永远不亮。
|
|
65
|
+
* ⚠️ `visible` 是业务的旋钮,这里只是**借一下**:进场时就压着的那几颗⛔ 不收进这一轮(不替别人放开);
|
|
66
|
+
* 要在放行之前接管某颗,调 `releaseReveal(item)` 摘牌 ⇒ 放行那一拍跳过它,`visible` 归调用方。
|
|
67
|
+
*/
|
|
68
|
+
protected revealSoon(items: Object3D[]): void {
|
|
69
|
+
const held: Object3D[] = [];
|
|
70
|
+
for (const item of items) {
|
|
71
|
+
if (!item.visible) continue; // 本来就压着 ⇒ 显隐归业务,⛔ 不收进这一轮、也不替它放开
|
|
72
|
+
item.visible = false;
|
|
73
|
+
this._revealPending.add(item);
|
|
74
|
+
held.push(item);
|
|
75
|
+
}
|
|
76
|
+
if (!held.length) return;
|
|
77
|
+
threeUtils.addWork(() => {
|
|
78
|
+
for (const item of held) {
|
|
79
|
+
if (!this._revealPending.delete(item)) continue; // 已被摘牌 ⇒ 这一拍不碰它的 visible
|
|
80
|
+
item.visible = true;
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* 把某颗内容的显隐控制权交回调用方(2026-10-28:`visible` 上有业务在用,加载窗口期内写的那一笔⛔ 不能被
|
|
87
|
+
* 放行那一拍覆盖)。摘牌后它**仍是压着的**(`false`),要它可见就自己写 `true`。
|
|
88
|
+
*/
|
|
89
|
+
releaseReveal(item: Object3D): void {
|
|
90
|
+
this._revealPending.delete(item);
|
|
91
|
+
}
|
|
92
|
+
// 兜底:为缺失顶点法线的几何体计算法线。
|
|
93
|
+
// 某些 glb/stl 模型仅有 POSITION 没有 NORMAL(如 public/models/bottle.glb),
|
|
94
|
+
// 会让法线 pass 输出零向量 -> AO 算出 NaN -> 整片被乘黑,且 PBR 金属材质无法正确受光 -> 发黑。
|
|
95
|
+
// 在加载完成后统一兜底,保证光照与 AO 都正确;已含法线的模型不受影响。
|
|
96
|
+
protected ensureNormals(root: Object3D): void {
|
|
97
|
+
root.traverse((obj) => {
|
|
98
|
+
if (obj instanceof Mesh && obj.geometry && !obj.geometry.getAttribute("normal")) {
|
|
99
|
+
obj.geometry.computeVertexNormals();
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
// 如果url 是blob地址的话,就用suffix字段来制定模型的类型
|
|
104
|
+
async loadModel(url: string | File | Array<File>, filename: string = ""): Promise<void> {
|
|
105
|
+
//获取模型文件的地址
|
|
106
|
+
const modelurl = await (async (): Promise<string> => {
|
|
107
|
+
if (isString(url)) {
|
|
108
|
+
return url;
|
|
109
|
+
}
|
|
110
|
+
else if (url instanceof File) {
|
|
111
|
+
return url.name;
|
|
112
|
+
}
|
|
113
|
+
else if (url instanceof Array) {
|
|
114
|
+
let modelurl = "";
|
|
115
|
+
const suffixs = [
|
|
116
|
+
"zip",
|
|
117
|
+
"obj",
|
|
118
|
+
"glb",
|
|
119
|
+
"gltf",
|
|
120
|
+
"fbx",
|
|
121
|
+
"dae",
|
|
122
|
+
"stl",
|
|
123
|
+
"usdz",
|
|
124
|
+
];
|
|
125
|
+
for (let file of url) {
|
|
126
|
+
if (suffixs.includes(threeUtils.getSuffix(file.name))) {
|
|
127
|
+
modelurl = file.name;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
return modelurl;
|
|
131
|
+
}
|
|
132
|
+
return "";
|
|
133
|
+
})();
|
|
134
|
+
this.url = modelurl || "";
|
|
135
|
+
if (!modelurl) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
this.loaded = false;
|
|
139
|
+
// 没有模型并且没有加载任务时就去加载模型
|
|
140
|
+
if (!MeshBase.models.get(modelurl) &&
|
|
141
|
+
!MeshBase.loadModeling.get(modelurl)) {
|
|
142
|
+
MeshBase.loadModeling.set(modelurl, true);
|
|
143
|
+
// 万能加载器
|
|
144
|
+
let modal = await threeLoader.loadModel(url, filename);
|
|
145
|
+
MeshBase.models.set(modelurl, modal);
|
|
146
|
+
MeshBase.loadModeling.set(modelurl, false);
|
|
147
|
+
}
|
|
148
|
+
// 如果模型还在加载中, 就等待模型加载完成
|
|
149
|
+
do {
|
|
150
|
+
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
151
|
+
} while (MeshBase.loadModeling.get(modelurl));
|
|
152
|
+
if (MeshBase.models.get(modelurl)) {
|
|
153
|
+
const mesh = MeshBase.models.get(modelurl)!;
|
|
154
|
+
// 兜底:为缺失顶点法线的几何体补算法线。某些 glb/stl 模型只有 POSITION,
|
|
155
|
+
// 没有 NORMAL,会导致:① 法线 pass 输出零向量 -> AO 算出 NaN -> 整片被乘黑;
|
|
156
|
+
// ② PBR 金属材质无法正确光照 -> 颜色发黑。统一在加载后兜底,光照与 AO 都正确。
|
|
157
|
+
this.ensureNormals(mesh);
|
|
158
|
+
// 判断是否有动画
|
|
159
|
+
this.hasAnimation = (mesh as Group & { animations: AnimationClip[] }).animations.length > 0;
|
|
160
|
+
if (this.hasAnimation) {
|
|
161
|
+
const model = SkeletonUtils.clone(mesh);
|
|
162
|
+
this.mixer = new AnimationMixer(model);
|
|
163
|
+
this.animationActions = {};
|
|
164
|
+
(mesh as Group & { animations: AnimationClip[] }).animations.map((animation: AnimationClip) => {
|
|
165
|
+
const animationAction = this.mixer!.clipAction(animation).play();
|
|
166
|
+
animationAction.weight = 0;
|
|
167
|
+
this.animationActions[animation.name] = animationAction;
|
|
168
|
+
});
|
|
169
|
+
this.reset(model);
|
|
170
|
+
this.revealSoon([model]);
|
|
171
|
+
}
|
|
172
|
+
else {
|
|
173
|
+
const clone = mesh.clone(true);
|
|
174
|
+
this.reset(clone);
|
|
175
|
+
this.revealSoon([clone]);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
// ⭐ 2026-10-09 皇上旨:走 threeUtils 公共 rAF 链,不再另起独立 rAF 回调
|
|
179
|
+
await threeUtils.waitNextFrame();
|
|
180
|
+
this.loaded = true;
|
|
181
|
+
// 加载完成事件
|
|
182
|
+
dispatchCustomEvent(this, { type: "loaded" });
|
|
183
|
+
}
|
|
184
|
+
// 超出绘制区域时不绘制
|
|
185
|
+
frustumCulled: boolean = false;
|
|
186
|
+
// 创建阴影
|
|
187
|
+
castShadow: boolean = false;
|
|
188
|
+
// 接受阴影
|
|
189
|
+
receiveShadow: boolean = false;
|
|
190
|
+
// promise.resole 队列
|
|
191
|
+
resoles: Array<(value: void | PromiseLike<void>) => void> = [];
|
|
192
|
+
// 等待加载加载完成
|
|
193
|
+
async awaitLoaded(): Promise<void> {
|
|
194
|
+
if (!this.loaded) {
|
|
195
|
+
await new Promise<void>((resolve) => {
|
|
196
|
+
if (this.resoles.length === 0) {
|
|
197
|
+
(async () => {
|
|
198
|
+
while (!this.loaded) {
|
|
199
|
+
//⭐ 2026-10-09 皇上旨「整条 rAF 链只走 threeUtils 一条」:
|
|
200
|
+
// 原生 rAF 是**独立于主循环的另一个回调**,同一帧并行跑;
|
|
201
|
+
// 模型多时(十几个 GLB 同时 awaitLoaded)每帧多十几个回调 ⇒ 卡顿。
|
|
202
|
+
await threeUtils.waitNextFrame();
|
|
203
|
+
}
|
|
204
|
+
while (this.resoles.length > 0) {
|
|
205
|
+
const resole = this.resoles.pop();
|
|
206
|
+
resole && resole();
|
|
207
|
+
}
|
|
208
|
+
})();
|
|
209
|
+
}
|
|
210
|
+
this.resoles.unshift(resolve);
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
//遍历模型
|
|
215
|
+
async traverseMesh(callback: (mesh: Mesh) => void): Promise<void> {
|
|
216
|
+
// 等待加载完成
|
|
217
|
+
await this.awaitLoaded();
|
|
218
|
+
this.traverse((obj) => {
|
|
219
|
+
if (obj instanceof Mesh) {
|
|
220
|
+
callback(obj);
|
|
221
|
+
}
|
|
222
|
+
});
|
|
223
|
+
}
|
|
224
|
+
clock: Clock = new Clock();
|
|
225
|
+
//设置动画的权重
|
|
226
|
+
async setClipActionWeight(weights: {
|
|
227
|
+
[key: string]: number;
|
|
228
|
+
} = {}): Promise<void> {
|
|
229
|
+
// 等待加载完成
|
|
230
|
+
await this.awaitLoaded();
|
|
231
|
+
for (let key in this.animationActions) {
|
|
232
|
+
this.animationActions[key].weight = weights[key] || 0;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
//获取动画列表
|
|
236
|
+
getAnimas(): string[] {
|
|
237
|
+
return Object.keys(this.animationActions);
|
|
238
|
+
}
|
|
239
|
+
//播放指定动画
|
|
240
|
+
setAnimas(anima: string = ""): void {
|
|
241
|
+
this.setClipActionWeight({ [anima]: 1 });
|
|
242
|
+
}
|
|
243
|
+
//停止所有动画
|
|
244
|
+
stop(): void {
|
|
245
|
+
this.setClipActionWeight();
|
|
246
|
+
}
|
|
247
|
+
updateMatrix(): void {
|
|
248
|
+
//播放动画
|
|
249
|
+
if (this.mixer) {
|
|
250
|
+
this.mixer.update(this.clock.getDelta());
|
|
251
|
+
}
|
|
252
|
+
// 深度应用属性
|
|
253
|
+
this.traverse((obj) => {
|
|
254
|
+
if (obj instanceof Mesh) {
|
|
255
|
+
obj.frustumCulled = this.frustumCulled;
|
|
256
|
+
obj.castShadow = this.castShadow;
|
|
257
|
+
obj.receiveShadow = this.receiveShadow;
|
|
258
|
+
}
|
|
259
|
+
});
|
|
260
|
+
super.updateMatrix();
|
|
261
|
+
}
|
|
262
|
+
// 获取模型的尺寸
|
|
263
|
+
async getSize(): Promise<Vector3> {
|
|
264
|
+
await this.awaitLoaded();
|
|
265
|
+
return threeUtils.getSize(this);
|
|
266
|
+
}
|
|
267
|
+
// 居中
|
|
268
|
+
async center(): Promise<void> {
|
|
269
|
+
await this.awaitLoaded();
|
|
270
|
+
threeUtils.center(this);
|
|
271
|
+
}
|
|
272
|
+
//底对齐
|
|
273
|
+
async alignBottom(y: number = 0): Promise<void> {
|
|
274
|
+
await this.awaitLoaded();
|
|
275
|
+
threeUtils.alignBottom(this, y);
|
|
276
|
+
}
|
|
277
|
+
// 放大到指定尺寸
|
|
278
|
+
async scaleTo(size: number = 1, key: Array<"x" | "y" | "z"> = ["x", "y", "z"]): Promise<void> {
|
|
279
|
+
await this.awaitLoaded();
|
|
280
|
+
threeUtils.scaleTo(this, size, key);
|
|
281
|
+
}
|
|
282
|
+
//按照法线拓展
|
|
283
|
+
expandBynormal(length: number): void {
|
|
284
|
+
this.traverseMesh((mesh) => {
|
|
285
|
+
// 没有法线就计算法线
|
|
286
|
+
mesh.geometry = mesh.geometry.clone();
|
|
287
|
+
if (!mesh.geometry.getAttribute("normal")) {
|
|
288
|
+
mesh.geometry.computeVertexNormals();
|
|
289
|
+
}
|
|
290
|
+
const normal = mesh.geometry.getAttribute("normal");
|
|
291
|
+
const position = mesh.geometry.getAttribute("position");
|
|
292
|
+
const v3 = new Vector3(0, 0, 0);
|
|
293
|
+
for (let i = 0; i < position.count; i++) {
|
|
294
|
+
v3.set(normal.getX(i), normal.getY(i), normal.getZ(i));
|
|
295
|
+
v3.setLength(length);
|
|
296
|
+
position.setXYZ(i, position.getX(i) + v3.x, position.getY(i) + v3.y, position.getZ(i) + v3.z);
|
|
297
|
+
}
|
|
298
|
+
position.needsUpdate = true;
|
|
299
|
+
});
|
|
300
|
+
}
|
|
301
|
+
}
|
package/MktMesh/MktMesh.d.ts
CHANGED
|
@@ -147,6 +147,20 @@ export default class MktMesh extends Mesh<BufferGeometry, ShaderMaterial> {
|
|
|
147
147
|
* 一帧只有一颗进 `_contentRoot`(进图那一拍要重算包围盒 + 排布 + 首次把几何送上 GPU)。
|
|
148
148
|
*/
|
|
149
149
|
private _modelMountQueued;
|
|
150
|
+
/**
|
|
151
|
+
* 「压着不亮、等内容落定后一帧放一颗」的在册表(2026-10-28 需求:进展厅时平面图与 GLB 全在同几帧里
|
|
152
|
+
* 首次送 GPU —— 顶点缓冲上传 + program 编译都在「亮出来的那一帧」,几十颗挤一起就是那一下卡)。
|
|
153
|
+
*
|
|
154
|
+
* ⚠️ 为什么闸口在**本对象的 `onBeforeRender`**、不在这颗平面/模型自己的:three 遍历场景图的第一句就是
|
|
155
|
+
* `if ( object.visible === false ) return;`(`node_modules/three/build/three.module.js:29837`),
|
|
156
|
+
* 它和整棵子树当帧直接跳过 ⇒ 隐形对象**一次都不会**收到 `onBeforeRender`,挂在自己身上 = 永远不亮。
|
|
157
|
+
* 墙(本对象)每帧都进渲染列表,所以闸口设在这座上,在册表里逐帧放行。
|
|
158
|
+
* ⚠️ 单颗新增那两路(编辑态双击落点 / 复制 / 上传)⛔ 不进这张表 —— 刚加的东西必须当场看得见。
|
|
159
|
+
* ⚠️ `visible` 本是业务的旋钮,这里只是**借一帧**:整层重建那两路的对象是当场新建的(默认可见),所以进表前
|
|
160
|
+
* 不需要再看它一眼;但**放行那一拍之前**要接管某颗的显隐,必须调 `releaseReveal(o)` 摘牌,
|
|
161
|
+
* 否则它会在轮到自身那一帧被写回可见(`boolean` 只有一个位,放行那里分不出这笔是谁写的)。
|
|
162
|
+
*/
|
|
163
|
+
private _revealPending;
|
|
150
164
|
constructor(opts?: {
|
|
151
165
|
wallHeight?: number;
|
|
152
166
|
wallClosed?: boolean;
|
|
@@ -327,10 +341,17 @@ export default class MktMesh extends Mesh<BufferGeometry, ShaderMaterial> {
|
|
|
327
341
|
addImagePlane(ip: ImagePlane): ImagePlane;
|
|
328
342
|
/** 摘掉一颗并释放它自己的几何/材质;那 4 张瓦片纹理归 `_imgTileLoader` 管 ⇒ ⛔ 不在这里 dispose */
|
|
329
343
|
removeImagePlane(ip: ImagePlane): void;
|
|
330
|
-
/**
|
|
344
|
+
/** 单颗模型槽入层(编辑态双击落点、以及「复制模型」用):⛔ 不压点亮 —— 刚加的必须当场看得见 */
|
|
331
345
|
addModel(ms: ModelSlot): ModelSlot;
|
|
332
346
|
/** 摘掉一槽并释放(子树里的几何/材质/贴图由 `ModelSlot.dispose` 自己收尾;排在后头的挂载帧靠「不在册」早退) */
|
|
333
347
|
removeModel(ms: ModelSlot): void;
|
|
348
|
+
/** 出「逐帧点亮」那张在册表(删除 / 整层重建旧的一批都走这里,⛔ 不许留已经 dispose 的对象) */
|
|
349
|
+
private _dropReveal;
|
|
350
|
+
/**
|
|
351
|
+
* 把某颗平面/模型的显隐控制权交回调用方(2026-10-28:`visible` 上有业务在用,点亮那一拍⛔ 不能覆盖
|
|
352
|
+
* 放行之前写下的那一笔)。摘牌后它**仍是压着的**(整层重建那一路进来就是 `false`),要它可见就自己写 `true`。
|
|
353
|
+
*/
|
|
354
|
+
releaseReveal(o: ImagePlane | ModelSlot): void;
|
|
334
355
|
/**
|
|
335
356
|
* 整层重建图片平面(`importData` 与预览那一路)。
|
|
336
357
|
* ⚠️ 进来的地址必须是**已补回域名**的绝对形态:补域名只有 `importData` 那一处(与 `textures` 同一把 `assetUrl` 尺),
|
|
@@ -344,6 +365,9 @@ export default class MktMesh extends Mesh<BufferGeometry, ShaderMaterial> {
|
|
|
344
365
|
* 2026-10-26 决定:取回与「挂进父元素」分两拍 —— 地址一次性全交给下载(网络 + 解析不占渲染帧),
|
|
345
366
|
* 真正进场景图那一步交给 `threeUtils.addWork` ⇒ 全局 rAF 每拍只跑一项 = **一帧只挂一颗槽**
|
|
346
367
|
* (挂载那一拍要重算包围盒 + 排布 + 首次把整棵子树的几何送上 GPU,十几颗挤在同一帧就是他要拆掉的那一卡)。
|
|
368
|
+
* 2026-10-28 再加第三拍「点亮」:挂载那一拍走的是 setTimeout 链,主线程被几十次 GLB 解析压住时渲染帧会滞后,
|
|
369
|
+
* 于是好几颗在同一记 render 里首次上 GPU ⇒ 整层重建出来的槽先压着不亮,由 `tickProgressiveReveal`
|
|
370
|
+
* **一帧只放一颗**(那一下顶点缓冲上传 + program 编译才真正摊到 N 帧上)。单颗那两路(落点新增 / 复制 / 上传)不受这一拍管。
|
|
347
371
|
*/
|
|
348
372
|
setModels(datas: ModelSlotData[], onEachLoad?: () => void): void;
|
|
349
373
|
/** 把「备好待挂」的那一槽交给全局队列;⛔ 去重闸门自备(`addWork` 按闭包引用判重,新闭包它判不出来) */
|
|
@@ -365,6 +389,15 @@ export default class MktMesh extends Mesh<BufferGeometry, ShaderMaterial> {
|
|
|
365
389
|
private _queueImagePlaneBind;
|
|
366
390
|
/** 队列里的一格:只绑**这一颗**平面里已就绪的那几格;还有在途的就重新排队,⛔ 不在这里等、也⛔ 不顺手把别的平面一起做完。 */
|
|
367
391
|
private _bindImagePlaneStep;
|
|
392
|
+
/**
|
|
393
|
+
* 逐帧点亮:每帧从在册表里放行**一颗**(内容已落定的第一颗),亮完就把这一颗出册。
|
|
394
|
+
* ⚠️ 一记只放一颗 ⇒ 顶点缓冲上传与首次 program 编译被摊到 N 帧,而不是同几帧里全上(那一下卡)。
|
|
395
|
+
* ⚠️ 由 `onBeforeRender` 每帧调(编辑态那份在 `MktDevMesh`,覆写时⛔ 不许漏掉这一句);
|
|
396
|
+
* 表空了它就是一句 `length` 判断,⛔ 不需要再像旧写法那样把钩子置 null(钩子上还挂着全景投影那三件事)。
|
|
397
|
+
* ⚠️ 这里写的 `visible` 只针对**自己压进表的那几颗** ⇒ 表外的对象(单颗新增、已 dispose、被 `releaseReveal`
|
|
398
|
+
* 摘牌的)一律不碰;要在放行前接管某颗,调 `releaseReveal(o)`。
|
|
399
|
+
*/
|
|
400
|
+
tickProgressiveReveal(): void;
|
|
368
401
|
/** 导出数据:墙点位 + 墙高 + 是否闭合 + 纹理数组(url + 矩阵)
|
|
369
402
|
* @param projName 项目名(可选,优先于 `setProjectName` 注入的那个)——图片地址落成 `{项目名}/xxx.jpg` */
|
|
370
403
|
exportData(projName?: string): MktMeshData;
|