three-base 2.0.89 → 2.0.92
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/InstancedMeshBase.d.ts +2 -2
- package/InstancedMeshBase.js +54 -22
- package/MeshBase.d.ts +1 -1
- package/MeshBase.js +52 -19
- package/package.json +1 -1
- package/threeLoader.js +21 -2
package/InstancedMeshBase.d.ts
CHANGED
|
@@ -16,11 +16,11 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
16
16
|
static _matrix: Matrix4;
|
|
17
17
|
instanceMatrix: InstancedBufferAttribute;
|
|
18
18
|
instanceColor: InstancedBufferAttribute;
|
|
19
|
-
loadModel(url: string
|
|
19
|
+
loadModel(url: string | File | Array<File>, filename?: string): Promise<void>;
|
|
20
20
|
computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
|
|
21
21
|
setCount(count?: number): Promise<void>;
|
|
22
22
|
setMatrixAt(index: number, matrix?: Matrix4): Promise<void>;
|
|
23
|
-
setTRS(index: number, { position, rotation, scale }: {
|
|
23
|
+
setTRS(index: number, { position, rotation, scale, }: {
|
|
24
24
|
position?: Vector3;
|
|
25
25
|
rotation?: Euler;
|
|
26
26
|
scale?: Vector3;
|
package/InstancedMeshBase.js
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* @Last Modified by: xiaosihan
|
|
5
5
|
* @Last Modified time: 2024-06-07 22:14:53
|
|
6
6
|
*/
|
|
7
|
-
import { throttle } from "lodash";
|
|
8
|
-
import { Euler, InstancedBufferAttribute, InstancedMesh, Matrix4, Quaternion, Vector3 } from "three";
|
|
7
|
+
import { isString, throttle } from "lodash";
|
|
8
|
+
import { Euler, InstancedBufferAttribute, InstancedMesh, Matrix4, Quaternion, Vector3, } from "three";
|
|
9
9
|
import MeshBase from "./MeshBase";
|
|
10
10
|
import threeUtils from "./threeUtils";
|
|
11
11
|
import threeLoader from "./threeLoader";
|
|
@@ -29,27 +29,59 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
29
29
|
instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
|
|
30
30
|
// 重构加载模型的方法
|
|
31
31
|
async loadModel(url, filename = "") {
|
|
32
|
-
|
|
32
|
+
//获取模型文件的地址
|
|
33
|
+
const modelurl = await (async () => {
|
|
34
|
+
if (isString(url)) {
|
|
35
|
+
return url;
|
|
36
|
+
}
|
|
37
|
+
else if (url instanceof File) {
|
|
38
|
+
return url.name;
|
|
39
|
+
}
|
|
40
|
+
else if (url instanceof Array) {
|
|
41
|
+
let modelurl = "";
|
|
42
|
+
const suffixs = [
|
|
43
|
+
"zip",
|
|
44
|
+
"obj",
|
|
45
|
+
"glb",
|
|
46
|
+
"gltf",
|
|
47
|
+
"fbx",
|
|
48
|
+
"dae",
|
|
49
|
+
"stl",
|
|
50
|
+
"usdz",
|
|
51
|
+
];
|
|
52
|
+
for (let file of url) {
|
|
53
|
+
if (suffixs.includes(threeUtils.getSuffix(file.name))) {
|
|
54
|
+
modelurl = file.name;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return modelurl;
|
|
58
|
+
}
|
|
59
|
+
})();
|
|
60
|
+
if (this.url === modelurl) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
this.url = modelurl;
|
|
33
64
|
if (!url) {
|
|
34
65
|
this.clear();
|
|
35
66
|
return;
|
|
36
67
|
}
|
|
37
68
|
this.loaded = false;
|
|
38
69
|
// 没有模型并且没有加载任务时就去加载模型
|
|
39
|
-
if (!MeshBase.models.get(url) &&
|
|
40
|
-
MeshBase.loadModeling.
|
|
70
|
+
if (!MeshBase.models.get(this.url) &&
|
|
71
|
+
!MeshBase.loadModeling.get(this.url)) {
|
|
72
|
+
MeshBase.loadModeling.set(this.url, true);
|
|
41
73
|
// 万能加载器
|
|
42
74
|
let modal = await threeLoader.loadModel(url, filename);
|
|
43
|
-
MeshBase.models.set(url, modal);
|
|
44
|
-
MeshBase.loadModeling.set(url, false);
|
|
75
|
+
MeshBase.models.set(this.url, modal);
|
|
76
|
+
MeshBase.loadModeling.set(this.url, false);
|
|
45
77
|
}
|
|
46
78
|
// 如果模型还在加载中, 就等待模型加载完成
|
|
47
79
|
do {
|
|
48
|
-
await new Promise(resolve => setTimeout(resolve, 50));
|
|
49
|
-
} while (MeshBase.loadModeling.get(url));
|
|
50
|
-
if (MeshBase.models.get(url)) {
|
|
80
|
+
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
81
|
+
} while (MeshBase.loadModeling.get(this.url));
|
|
82
|
+
if (MeshBase.models.get(this.url)) {
|
|
51
83
|
this.clear();
|
|
52
|
-
const mesh = MeshBase.models.get(url);
|
|
84
|
+
const mesh = MeshBase.models.get(this.url);
|
|
53
85
|
// // 判断是否有动画
|
|
54
86
|
// this.hasAnimation = mesh.animations.length > 0;
|
|
55
87
|
// if (this.hasAnimation) {
|
|
@@ -76,7 +108,7 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
76
108
|
mesh.rotation.setFromQuaternion(mesh.quaternion);
|
|
77
109
|
mesh.updateMatrix();
|
|
78
110
|
// same geometry and same material consider as the same mesh
|
|
79
|
-
const uuid = mesh.geometry.uuid +
|
|
111
|
+
const uuid = mesh.geometry.uuid + "/" + mesh.material.uuid;
|
|
80
112
|
if (meshCollect[uuid]) {
|
|
81
113
|
meshCollect[uuid].push(mesh);
|
|
82
114
|
}
|
|
@@ -91,7 +123,7 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
91
123
|
}
|
|
92
124
|
});
|
|
93
125
|
// create all instances
|
|
94
|
-
Object.keys(meshCollect).forEach(uuid => {
|
|
126
|
+
Object.keys(meshCollect).forEach((uuid) => {
|
|
95
127
|
const meshes = meshCollect[uuid];
|
|
96
128
|
const mesh = meshes[0];
|
|
97
129
|
const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * this.count);
|
|
@@ -101,7 +133,7 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
101
133
|
this.add(instancedMesh);
|
|
102
134
|
});
|
|
103
135
|
// 加载完成事件
|
|
104
|
-
await new Promise(resolve => setTimeout(resolve, 30));
|
|
136
|
+
await new Promise((resolve) => setTimeout(resolve, 30));
|
|
105
137
|
// 加载完成事件
|
|
106
138
|
this.loaded = true;
|
|
107
139
|
this.dispatchEvent({ type: "loaded" });
|
|
@@ -109,7 +141,7 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
109
141
|
}
|
|
110
142
|
// 更新包围盒
|
|
111
143
|
computeBoundingSphere = throttle(() => {
|
|
112
|
-
this.children.map(instancedMesh => {
|
|
144
|
+
this.children.map((instancedMesh) => {
|
|
113
145
|
instancedMesh.computeBoundingSphere();
|
|
114
146
|
});
|
|
115
147
|
}, 1000);
|
|
@@ -152,7 +184,7 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
152
184
|
async setMatrixAt(index, matrix = new Matrix4().identity()) {
|
|
153
185
|
const new_matrix = matrix.clone(); // 把矩阵克隆一下避免对象引用问题
|
|
154
186
|
await this.awaitLoaded();
|
|
155
|
-
Object.keys(this.meshCollect).forEach(uuid => {
|
|
187
|
+
Object.keys(this.meshCollect).forEach((uuid) => {
|
|
156
188
|
const instancedMesh = this.instanceCollect[uuid];
|
|
157
189
|
const collect = this.meshCollect[uuid];
|
|
158
190
|
collect.forEach((mesh, i) => {
|
|
@@ -165,12 +197,12 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
165
197
|
this.computeBoundingSphere();
|
|
166
198
|
}
|
|
167
199
|
//设置移动旋转缩放
|
|
168
|
-
async setTRS(index, { position, rotation, scale }) {
|
|
200
|
+
async setTRS(index, { position, rotation, scale, }) {
|
|
169
201
|
const new_position = position ? position.clone() : undefined;
|
|
170
202
|
const new_rotation = rotation ? rotation.clone() : undefined;
|
|
171
203
|
const new_scale = scale ? scale.clone() : undefined;
|
|
172
204
|
await this.awaitLoaded();
|
|
173
|
-
Object.keys(this.meshCollect).forEach(uuid => {
|
|
205
|
+
Object.keys(this.meshCollect).forEach((uuid) => {
|
|
174
206
|
const instancedMesh = this.instanceCollect[uuid];
|
|
175
207
|
const collect = this.meshCollect[uuid];
|
|
176
208
|
collect.forEach((mesh, i) => {
|
|
@@ -194,7 +226,7 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
194
226
|
// 设置颜色
|
|
195
227
|
async setColorAt(index, color) {
|
|
196
228
|
await this.awaitLoaded();
|
|
197
|
-
Object.keys(this.meshCollect).forEach(uuid => {
|
|
229
|
+
Object.keys(this.meshCollect).forEach((uuid) => {
|
|
198
230
|
const instancedMesh = this.instanceCollect[uuid];
|
|
199
231
|
const collect = this.meshCollect[uuid];
|
|
200
232
|
collect.forEach((mesh, i) => {
|
|
@@ -210,7 +242,7 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
210
242
|
updateMatrixWorld(force) {
|
|
211
243
|
super.updateMatrixWorld(force);
|
|
212
244
|
const { cursor, enableEvent } = this.userData;
|
|
213
|
-
this.traverse(obj => {
|
|
245
|
+
this.traverse((obj) => {
|
|
214
246
|
Object.assign(obj.userData, { cursor, enableEvent });
|
|
215
247
|
});
|
|
216
248
|
}
|
|
@@ -219,14 +251,14 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
219
251
|
super.addEventListener(name, callback);
|
|
220
252
|
await this.awaitLoaded();
|
|
221
253
|
super.addEventListener(name, callback);
|
|
222
|
-
this.children.map(mesh => {
|
|
254
|
+
this.children.map((mesh) => {
|
|
223
255
|
mesh.addEventListener(name, callback);
|
|
224
256
|
});
|
|
225
257
|
}
|
|
226
258
|
// 取消事件的监听
|
|
227
259
|
removeEventListener(name, callback) {
|
|
228
260
|
super.removeEventListener(name, callback);
|
|
229
|
-
this.children.map(mesh => {
|
|
261
|
+
this.children.map((mesh) => {
|
|
230
262
|
mesh.removeEventListener(name, callback);
|
|
231
263
|
});
|
|
232
264
|
}
|
package/MeshBase.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export default class MeshBase extends Group {
|
|
|
11
11
|
[key: string]: AnimationAction;
|
|
12
12
|
};
|
|
13
13
|
getSuffix(filename: string): string;
|
|
14
|
-
loadModel(url: string
|
|
14
|
+
loadModel(url: string | File | Array<File>, filename?: string): Promise<void>;
|
|
15
15
|
frustumCulled: boolean;
|
|
16
16
|
castShadow: boolean;
|
|
17
17
|
receiveShadow: boolean;
|
package/MeshBase.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { AnimationMixer, Clock, Group, Vector3 } from "three";
|
|
1
|
+
import { AnimationMixer, Clock, Group, Vector3, } from "three";
|
|
2
2
|
import threeUtils from "./threeUtils";
|
|
3
3
|
import threeLoader from "./threeLoader";
|
|
4
|
-
import * as SkeletonUtils from
|
|
4
|
+
import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils";
|
|
5
|
+
import { isString } from "lodash";
|
|
5
6
|
// 模型基类
|
|
6
7
|
export default class MeshBase extends Group {
|
|
7
8
|
constructor(url) {
|
|
@@ -24,38 +25,70 @@ export default class MeshBase extends Group {
|
|
|
24
25
|
// 获取文件名的后缀
|
|
25
26
|
getSuffix(filename) {
|
|
26
27
|
const match = filename.match(/\.([^\.]+)$/);
|
|
27
|
-
return match ? match[1].toLowerCase() :
|
|
28
|
+
return match ? match[1].toLowerCase() : "";
|
|
28
29
|
}
|
|
29
30
|
// 如果url 是blob地址的话,就用suffix字段来制定模型的类型
|
|
30
31
|
async loadModel(url, filename = "") {
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
//获取模型文件的地址
|
|
33
|
+
const modelurl = await (async () => {
|
|
34
|
+
if (isString(url)) {
|
|
35
|
+
return url;
|
|
36
|
+
}
|
|
37
|
+
else if (url instanceof File) {
|
|
38
|
+
return url.name;
|
|
39
|
+
}
|
|
40
|
+
else if (url instanceof Array) {
|
|
41
|
+
let modelurl = "";
|
|
42
|
+
const suffixs = [
|
|
43
|
+
"zip",
|
|
44
|
+
"obj",
|
|
45
|
+
"glb",
|
|
46
|
+
"gltf",
|
|
47
|
+
"fbx",
|
|
48
|
+
"dae",
|
|
49
|
+
"stl",
|
|
50
|
+
"usdz",
|
|
51
|
+
];
|
|
52
|
+
for (let file of url) {
|
|
53
|
+
if (suffixs.includes(threeUtils.getSuffix(file.name))) {
|
|
54
|
+
modelurl = file.name;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return modelurl;
|
|
58
|
+
}
|
|
59
|
+
})();
|
|
60
|
+
if (this.url === modelurl) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
this.url = modelurl;
|
|
64
|
+
if (!modelurl) {
|
|
33
65
|
this.clear();
|
|
34
66
|
return;
|
|
35
67
|
}
|
|
36
68
|
this.loaded = false;
|
|
37
69
|
// 没有模型并且没有加载任务时就去加载模型
|
|
38
|
-
if (!MeshBase.models.get(
|
|
39
|
-
MeshBase.loadModeling.
|
|
70
|
+
if (!MeshBase.models.get(modelurl) &&
|
|
71
|
+
!MeshBase.loadModeling.get(modelurl)) {
|
|
72
|
+
MeshBase.loadModeling.set(modelurl, true);
|
|
40
73
|
// 万能加载器
|
|
41
74
|
let modal = await threeLoader.loadModel(url, filename);
|
|
42
|
-
MeshBase.models.set(
|
|
43
|
-
MeshBase.loadModeling.set(
|
|
75
|
+
MeshBase.models.set(modelurl, modal);
|
|
76
|
+
MeshBase.loadModeling.set(modelurl, false);
|
|
44
77
|
}
|
|
45
78
|
// 如果模型还在加载中, 就等待模型加载完成
|
|
46
79
|
do {
|
|
47
|
-
await new Promise(resolve => setTimeout(resolve, 50));
|
|
48
|
-
} while (MeshBase.loadModeling.get(
|
|
49
|
-
if (MeshBase.models.get(
|
|
80
|
+
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
81
|
+
} while (MeshBase.loadModeling.get(modelurl));
|
|
82
|
+
if (MeshBase.models.get(modelurl)) {
|
|
50
83
|
this.clear();
|
|
51
|
-
const mesh = MeshBase.models.get(
|
|
84
|
+
const mesh = MeshBase.models.get(modelurl);
|
|
52
85
|
// 判断是否有动画
|
|
53
86
|
this.hasAnimation = mesh.animations.length > 0;
|
|
54
87
|
if (this.hasAnimation) {
|
|
55
88
|
const model = SkeletonUtils.clone(mesh);
|
|
56
89
|
this.mixer = new AnimationMixer(model);
|
|
57
90
|
this.animationActions = {};
|
|
58
|
-
mesh.animations.map(animation => {
|
|
91
|
+
mesh.animations.map((animation) => {
|
|
59
92
|
const animationAction = this.mixer.clipAction(animation).play();
|
|
60
93
|
animationAction.weight = 0;
|
|
61
94
|
this.animationActions[animation.name] = animationAction;
|
|
@@ -66,7 +99,7 @@ export default class MeshBase extends Group {
|
|
|
66
99
|
this.add(mesh.clone(true));
|
|
67
100
|
}
|
|
68
101
|
}
|
|
69
|
-
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
102
|
+
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
70
103
|
this.loaded = true;
|
|
71
104
|
// 加载完成事件
|
|
72
105
|
this.dispatchEvent({ type: "loaded" });
|
|
@@ -86,7 +119,7 @@ export default class MeshBase extends Group {
|
|
|
86
119
|
if (this.resoles.length === 0) {
|
|
87
120
|
(async () => {
|
|
88
121
|
while (!this.loaded) {
|
|
89
|
-
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
122
|
+
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
90
123
|
}
|
|
91
124
|
while (this.resoles.length > 0) {
|
|
92
125
|
const resole = this.resoles.pop();
|
|
@@ -102,7 +135,7 @@ export default class MeshBase extends Group {
|
|
|
102
135
|
async traverseMesh(callback) {
|
|
103
136
|
// 等待加载完成
|
|
104
137
|
await this.awaitLoaded();
|
|
105
|
-
this.traverse(obj => {
|
|
138
|
+
this.traverse((obj) => {
|
|
106
139
|
const mesh = obj;
|
|
107
140
|
if (mesh.isMesh) {
|
|
108
141
|
callback(mesh);
|
|
@@ -136,7 +169,7 @@ export default class MeshBase extends Group {
|
|
|
136
169
|
this.mixer.update(this.clock.getDelta());
|
|
137
170
|
}
|
|
138
171
|
// 深度应用属性
|
|
139
|
-
this.traverse(obj => {
|
|
172
|
+
this.traverse((obj) => {
|
|
140
173
|
const mesh = obj;
|
|
141
174
|
if (mesh.isMesh) {
|
|
142
175
|
mesh.frustumCulled = this.frustumCulled;
|
|
@@ -168,7 +201,7 @@ export default class MeshBase extends Group {
|
|
|
168
201
|
}
|
|
169
202
|
//按照法线拓展
|
|
170
203
|
expandBynormal(length) {
|
|
171
|
-
this.traverseMesh(mesh => {
|
|
204
|
+
this.traverseMesh((mesh) => {
|
|
172
205
|
// 没有法线就计算法线
|
|
173
206
|
mesh.geometry = mesh.geometry.clone();
|
|
174
207
|
if (!mesh.geometry.getAttribute("normal")) {
|
package/package.json
CHANGED
package/threeLoader.js
CHANGED
|
@@ -193,7 +193,16 @@ class ThreeLoader extends EventDispatcher {
|
|
|
193
193
|
}
|
|
194
194
|
else if (url instanceof Array) {
|
|
195
195
|
let suffix = "";
|
|
196
|
-
const suffixs = [
|
|
196
|
+
const suffixs = [
|
|
197
|
+
"zip",
|
|
198
|
+
"obj",
|
|
199
|
+
"glb",
|
|
200
|
+
"gltf",
|
|
201
|
+
"fbx",
|
|
202
|
+
"dae",
|
|
203
|
+
"stl",
|
|
204
|
+
"usdz",
|
|
205
|
+
];
|
|
197
206
|
for (let file of url) {
|
|
198
207
|
suffix = threeUtils.getSuffix(file.name);
|
|
199
208
|
if (suffixs.includes(suffix)) {
|
|
@@ -216,13 +225,23 @@ class ThreeLoader extends EventDispatcher {
|
|
|
216
225
|
}
|
|
217
226
|
else if (url instanceof Array) {
|
|
218
227
|
let modelurl = "";
|
|
219
|
-
const suffixs = [
|
|
228
|
+
const suffixs = [
|
|
229
|
+
"zip",
|
|
230
|
+
"obj",
|
|
231
|
+
"glb",
|
|
232
|
+
"gltf",
|
|
233
|
+
"fbx",
|
|
234
|
+
"dae",
|
|
235
|
+
"stl",
|
|
236
|
+
"usdz",
|
|
237
|
+
];
|
|
220
238
|
for (let file of url) {
|
|
221
239
|
const bloburl = await threeUtils.fileToBloburl(file);
|
|
222
240
|
this._blobs[file.name] = bloburl;
|
|
223
241
|
revokeObjectfile.push(file.name);
|
|
224
242
|
if (suffixs.includes(threeUtils.getSuffix(file.name))) {
|
|
225
243
|
modelurl = file.name;
|
|
244
|
+
break;
|
|
226
245
|
}
|
|
227
246
|
}
|
|
228
247
|
return modelurl;
|