three-base 2.0.67 → 2.0.68
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/ApngTexture.d.ts +13 -13
- package/ApngTexture.js +61 -61
- package/ApngTextureManage.d.ts +18 -18
- package/ApngTextureManage.js +87 -87
- package/EventMesh.d.ts +18 -18
- package/EventMesh.js +59 -59
- package/ExtrudeMesh.d.ts +111 -111
- package/ExtrudeMesh.js +363 -363
- package/FPScontrol.d.ts +45 -45
- package/FPScontrol.js +171 -171
- package/Fire/Fire.d.ts +28 -28
- package/Fire/Fire.js +79 -79
- package/Fire/FireGromtry.d.ts +9 -9
- package/Fire/FireGromtry.js +40 -40
- package/Fire/FireMaterial.d.ts +28 -28
- package/Fire/FireMaterial.js +32 -32
- package/InstancedMeshBase.d.ts +24 -24
- package/InstancedMeshBase.js +190 -190
- package/KeyFrameAnimation.d.ts +25 -25
- package/KeyFrameAnimation.js +78 -78
- package/MeshBase.d.ts +32 -32
- package/MeshBase.js +172 -172
- package/Mirror.d.ts +25 -25
- package/Mirror.js +139 -139
- package/PlaneModal1/PlaneModal1.d.ts +31 -31
- package/PlaneModal1/PlaneModal1.js +105 -105
- package/PlaneModal1/index.d.ts +1 -1
- package/PlaneModal1/index.js +1 -1
- package/PlaneText.d.ts +44 -44
- package/PlaneText.js +30 -30
- package/PlaneWithHtml.d.ts +11 -11
- package/PlaneWithHtml.js +68 -68
- package/PointLight/PointLight.d.ts +13 -13
- package/PointLight/PointLight.js +64 -64
- package/PointLight/index.d.ts +1 -1
- package/PointLight/index.js +1 -1
- package/Sky/Sky.d.ts +13 -13
- package/Sky/Sky.js +28 -28
- package/Sky/index.d.ts +1 -1
- package/Sky/index.js +1 -1
- package/SpriteModal1/SpriteModal1.d.ts +30 -30
- package/SpriteModal1/SpriteModal1.js +110 -110
- package/SpriteModal1/index.d.ts +1 -1
- package/SpriteModal1/index.js +1 -1
- package/SpriteText.d.ts +45 -45
- package/SpriteText.js +163 -163
- package/SpriteText2.d.ts +47 -47
- package/SpriteText2.js +198 -198
- package/SpriteWithHtml.d.ts +7 -7
- package/SpriteWithHtml.js +49 -49
- package/Text3D/Text3D.d.ts +20 -20
- package/Text3D/Text3D.js +62 -62
- package/Text3D/fontController.d.ts +59 -59
- package/Text3D/fontController.js +200 -200
- package/Text3D/index.d.ts +1 -1
- package/Text3D/index.js +1 -1
- package/ThreeBase.d.ts +91 -91
- package/ThreeBase.js +611 -611
- package/ThreeMouse.d.ts +39 -39
- package/ThreeMouse.js +359 -359
- package/Transition.d.ts +40 -40
- package/Transition.js +207 -207
- package/index.d.ts +1 -1
- package/index.js +2 -2
- package/keyContorls.d.ts +25 -25
- package/keyContorls.js +98 -98
- package/package.json +1 -1
- package/pass/FullScreenQuad.d.ts +7 -7
- package/pass/FullScreenQuad.js +25 -25
- package/pass/glow_pass.d.ts +2 -2
- package/pass/glow_pass.js +236 -236
- package/pass/stroke_pass.d.ts +2 -2
- package/pass/stroke_pass.js +202 -202
- package/shaders/FXAAShaderMaterial.d.ts +3 -3
- package/shaders/FXAAShaderMaterial.js +21 -21
- package/shaders.d.ts +17 -17
- package/shaders.js +99 -99
- package/threeLoader.d.ts +26 -26
- package/threeLoader.js +189 -189
- package/threeLoader.ts +2 -2
- package/threeUtils.d.ts +47 -47
- package/threeUtils.js +266 -266
package/InstancedMeshBase.js
CHANGED
|
@@ -1,190 +1,190 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2024-02-05 09:31:57
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2024-06-07 22:14:53
|
|
6
|
-
*/
|
|
7
|
-
import { throttle } from "lodash";
|
|
8
|
-
import { InstancedBufferAttribute, InstancedMesh, Matrix4, Vector3 } from "three";
|
|
9
|
-
import MeshBase from "./MeshBase";
|
|
10
|
-
import threeUtils from "./threeUtils";
|
|
11
|
-
import threeLoader from "./threeLoader";
|
|
12
|
-
// 实例模型组对象
|
|
13
|
-
export default class InstancedMeshBase extends MeshBase {
|
|
14
|
-
constructor(url) {
|
|
15
|
-
super(url);
|
|
16
|
-
}
|
|
17
|
-
url = "";
|
|
18
|
-
isInstancedGroupMesh = true;
|
|
19
|
-
count = 0;
|
|
20
|
-
size = new Vector3(1, 1, 1);
|
|
21
|
-
meshCollect = {};
|
|
22
|
-
instanceCollect = {};
|
|
23
|
-
colorMap = new Map();
|
|
24
|
-
static matrix = new Matrix4();
|
|
25
|
-
instanceMatrix = new InstancedBufferAttribute(new Float32Array(0 * 16), 16);
|
|
26
|
-
instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
|
|
27
|
-
// 重构加载模型的方法
|
|
28
|
-
async loadModel(url, filename = "") {
|
|
29
|
-
if (!url) {
|
|
30
|
-
this.clear();
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
this.loaded = false;
|
|
34
|
-
// 没有模型并且没有加载任务时就去加载模型
|
|
35
|
-
if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
|
|
36
|
-
MeshBase.loadModeling.set(url, true);
|
|
37
|
-
// 万能加载器
|
|
38
|
-
let modal = await threeLoader.loadModel(url, filename);
|
|
39
|
-
threeUtils.center(modal);
|
|
40
|
-
threeUtils.alignBottom(modal);
|
|
41
|
-
modal.updateMatrixWorld(true);
|
|
42
|
-
MeshBase.models.set(url, modal);
|
|
43
|
-
MeshBase.loadModeling.set(url, false);
|
|
44
|
-
}
|
|
45
|
-
// 如果模型还在加载中, 就等待模型加载完成
|
|
46
|
-
do {
|
|
47
|
-
await new Promise(resolve => setTimeout(resolve, 50));
|
|
48
|
-
} while (MeshBase.loadModeling.get(url));
|
|
49
|
-
if (MeshBase.models.get(url)) {
|
|
50
|
-
this.clear();
|
|
51
|
-
const mesh = MeshBase.models.get(url);
|
|
52
|
-
// // 判断是否有动画
|
|
53
|
-
// this.hasAnimation = mesh.animations.length > 0;
|
|
54
|
-
// if (this.hasAnimation) {
|
|
55
|
-
// const model = SkeletonUtils.clone(mesh);
|
|
56
|
-
// this.mixer = new AnimationMixer(model);
|
|
57
|
-
// this.animationActions = {};
|
|
58
|
-
// mesh.animations.map(animation => {
|
|
59
|
-
// const animationAction = this.mixer!.clipAction(animation).play();
|
|
60
|
-
// animationAction.weight = 0;
|
|
61
|
-
// this.animationActions[animation.name] = animationAction;
|
|
62
|
-
// });
|
|
63
|
-
// this.add(model);
|
|
64
|
-
// } else {
|
|
65
|
-
// this.add(mesh.clone(true));
|
|
66
|
-
// }
|
|
67
|
-
this.size.copy(threeUtils.getSize(mesh));
|
|
68
|
-
const { meshCollect, instanceCollect } = this;
|
|
69
|
-
mesh.updateMatrixWorld(true);
|
|
70
|
-
// collect all mesh counts, in case there are more than one copy of the same mesh in this group
|
|
71
|
-
mesh.traverse((obj) => {
|
|
72
|
-
const mesh = obj;
|
|
73
|
-
if (mesh.isMesh) {
|
|
74
|
-
mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
|
|
75
|
-
mesh.rotation.setFromQuaternion(mesh.quaternion);
|
|
76
|
-
mesh.updateMatrix();
|
|
77
|
-
// same geometry and same material consider as the same mesh
|
|
78
|
-
const uuid = mesh.geometry.uuid + '/' + mesh.material.uuid;
|
|
79
|
-
if (meshCollect[uuid]) {
|
|
80
|
-
meshCollect[uuid].push(mesh);
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
meshCollect[uuid] = [mesh];
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
else {
|
|
87
|
-
obj.position.set(0, 0, 0);
|
|
88
|
-
obj.scale.set(1, 1, 1);
|
|
89
|
-
obj.rotation.set(0, 0, 0);
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
// create all instances
|
|
93
|
-
Object.keys(meshCollect).forEach(uuid => {
|
|
94
|
-
const meshes = meshCollect[uuid];
|
|
95
|
-
const mesh = meshes[0];
|
|
96
|
-
const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * this.count);
|
|
97
|
-
instancedMesh.name = mesh.name;
|
|
98
|
-
instancedMesh.frustumCulled = false;
|
|
99
|
-
instanceCollect[uuid] = instancedMesh;
|
|
100
|
-
this.add(instancedMesh);
|
|
101
|
-
});
|
|
102
|
-
// 加载完成事件
|
|
103
|
-
await new Promise(resolve => setTimeout(resolve, 100));
|
|
104
|
-
// 加载完成事件
|
|
105
|
-
this.dispatchEvent({ type: "loaded" });
|
|
106
|
-
this.loaded = true;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
// 更新包围盒
|
|
110
|
-
computeBoundingSphere = throttle(() => {
|
|
111
|
-
this.traverse(m => {
|
|
112
|
-
if (m !== this) {
|
|
113
|
-
m.computeBoundingSphere();
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
}, 1000);
|
|
117
|
-
//初始实例矩阵的数量
|
|
118
|
-
setCount(count = 0) {
|
|
119
|
-
const instanceMatrix = new InstancedBufferAttribute(new Float32Array(count * 16), 16);
|
|
120
|
-
const instanceColor = new InstancedBufferAttribute(new Float32Array(count * 3).fill(1), 3);
|
|
121
|
-
for (let i = 0; i < this.count; i++) {
|
|
122
|
-
instanceMatrix.copyAt(i, this.instanceMatrix, i);
|
|
123
|
-
instanceColor.copyAt(i, this.instanceColor, i);
|
|
124
|
-
}
|
|
125
|
-
this.instanceMatrix = instanceMatrix;
|
|
126
|
-
this.instanceColor = instanceColor;
|
|
127
|
-
this.count = count;
|
|
128
|
-
this.children.map((instanceMesh) => {
|
|
129
|
-
const instanceMatrix = new InstancedBufferAttribute(new Float32Array(count * 16), 16);
|
|
130
|
-
const instanceColor = new InstancedBufferAttribute(new Float32Array(count * 3).fill(1), 3);
|
|
131
|
-
for (let i = 0; i < instanceMesh.count; i++) {
|
|
132
|
-
instanceMatrix.copyAt(i, this.instanceMatrix, i);
|
|
133
|
-
instanceColor.copyAt(i, this.instanceColor, i);
|
|
134
|
-
}
|
|
135
|
-
instanceMesh.instanceMatrix = instanceMatrix;
|
|
136
|
-
instanceMesh.instanceColor = instanceColor;
|
|
137
|
-
instanceMesh.count = count;
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
// 设置矩阵
|
|
141
|
-
setMatrixAt(index, matrix) {
|
|
142
|
-
Object.keys(this.meshCollect).forEach(uuid => {
|
|
143
|
-
const instancedMesh = this.instanceCollect[uuid];
|
|
144
|
-
const collect = this.meshCollect[uuid];
|
|
145
|
-
collect.forEach((mesh, i) => {
|
|
146
|
-
InstancedMeshBase.matrix.copy(mesh.matrix);
|
|
147
|
-
InstancedMeshBase.matrix.premultiply(matrix);
|
|
148
|
-
instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase.matrix);
|
|
149
|
-
instancedMesh.instanceMatrix.needsUpdate = true;
|
|
150
|
-
});
|
|
151
|
-
});
|
|
152
|
-
this.computeBoundingSphere();
|
|
153
|
-
}
|
|
154
|
-
// 设置颜色
|
|
155
|
-
setColorAt(index, color) {
|
|
156
|
-
Object.keys(this.meshCollect).forEach(uuid => {
|
|
157
|
-
const instancedMesh = this.instanceCollect[uuid];
|
|
158
|
-
const collect = this.meshCollect[uuid];
|
|
159
|
-
collect.forEach((mesh, i) => {
|
|
160
|
-
const c = color(instancedMesh);
|
|
161
|
-
if (c) {
|
|
162
|
-
instancedMesh.setColorAt(collect.length * index + i, c);
|
|
163
|
-
instancedMesh.instanceColor.needsUpdate = true;
|
|
164
|
-
}
|
|
165
|
-
});
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
|
-
// 同步属性
|
|
169
|
-
updateMatrixWorld(force) {
|
|
170
|
-
super.updateMatrixWorld(force);
|
|
171
|
-
const { cursor, enableEvent } = this.userData;
|
|
172
|
-
this.traverse(obj => {
|
|
173
|
-
Object.assign(obj.userData, { cursor, enableEvent });
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
|
-
// 事件监听
|
|
177
|
-
addEventListener(name, callback) {
|
|
178
|
-
super.addEventListener(name, callback);
|
|
179
|
-
this.children.map(mesh => {
|
|
180
|
-
mesh.addEventListener(name, callback);
|
|
181
|
-
});
|
|
182
|
-
}
|
|
183
|
-
// 取消事件的监听
|
|
184
|
-
removeEventListener(name, callback) {
|
|
185
|
-
super.removeEventListener(name, callback);
|
|
186
|
-
this.children.map(mesh => {
|
|
187
|
-
mesh.removeEventListener(name, callback);
|
|
188
|
-
});
|
|
189
|
-
}
|
|
190
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2024-02-05 09:31:57
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2024-06-07 22:14:53
|
|
6
|
+
*/
|
|
7
|
+
import { throttle } from "lodash";
|
|
8
|
+
import { InstancedBufferAttribute, InstancedMesh, Matrix4, Vector3 } from "three";
|
|
9
|
+
import MeshBase from "./MeshBase";
|
|
10
|
+
import threeUtils from "./threeUtils";
|
|
11
|
+
import threeLoader from "./threeLoader";
|
|
12
|
+
// 实例模型组对象
|
|
13
|
+
export default class InstancedMeshBase extends MeshBase {
|
|
14
|
+
constructor(url) {
|
|
15
|
+
super(url);
|
|
16
|
+
}
|
|
17
|
+
url = "";
|
|
18
|
+
isInstancedGroupMesh = true;
|
|
19
|
+
count = 0;
|
|
20
|
+
size = new Vector3(1, 1, 1);
|
|
21
|
+
meshCollect = {};
|
|
22
|
+
instanceCollect = {};
|
|
23
|
+
colorMap = new Map();
|
|
24
|
+
static matrix = new Matrix4();
|
|
25
|
+
instanceMatrix = new InstancedBufferAttribute(new Float32Array(0 * 16), 16);
|
|
26
|
+
instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
|
|
27
|
+
// 重构加载模型的方法
|
|
28
|
+
async loadModel(url, filename = "") {
|
|
29
|
+
if (!url) {
|
|
30
|
+
this.clear();
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
this.loaded = false;
|
|
34
|
+
// 没有模型并且没有加载任务时就去加载模型
|
|
35
|
+
if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
|
|
36
|
+
MeshBase.loadModeling.set(url, true);
|
|
37
|
+
// 万能加载器
|
|
38
|
+
let modal = await threeLoader.loadModel(url, filename);
|
|
39
|
+
threeUtils.center(modal);
|
|
40
|
+
threeUtils.alignBottom(modal);
|
|
41
|
+
modal.updateMatrixWorld(true);
|
|
42
|
+
MeshBase.models.set(url, modal);
|
|
43
|
+
MeshBase.loadModeling.set(url, false);
|
|
44
|
+
}
|
|
45
|
+
// 如果模型还在加载中, 就等待模型加载完成
|
|
46
|
+
do {
|
|
47
|
+
await new Promise(resolve => setTimeout(resolve, 50));
|
|
48
|
+
} while (MeshBase.loadModeling.get(url));
|
|
49
|
+
if (MeshBase.models.get(url)) {
|
|
50
|
+
this.clear();
|
|
51
|
+
const mesh = MeshBase.models.get(url);
|
|
52
|
+
// // 判断是否有动画
|
|
53
|
+
// this.hasAnimation = mesh.animations.length > 0;
|
|
54
|
+
// if (this.hasAnimation) {
|
|
55
|
+
// const model = SkeletonUtils.clone(mesh);
|
|
56
|
+
// this.mixer = new AnimationMixer(model);
|
|
57
|
+
// this.animationActions = {};
|
|
58
|
+
// mesh.animations.map(animation => {
|
|
59
|
+
// const animationAction = this.mixer!.clipAction(animation).play();
|
|
60
|
+
// animationAction.weight = 0;
|
|
61
|
+
// this.animationActions[animation.name] = animationAction;
|
|
62
|
+
// });
|
|
63
|
+
// this.add(model);
|
|
64
|
+
// } else {
|
|
65
|
+
// this.add(mesh.clone(true));
|
|
66
|
+
// }
|
|
67
|
+
this.size.copy(threeUtils.getSize(mesh));
|
|
68
|
+
const { meshCollect, instanceCollect } = this;
|
|
69
|
+
mesh.updateMatrixWorld(true);
|
|
70
|
+
// collect all mesh counts, in case there are more than one copy of the same mesh in this group
|
|
71
|
+
mesh.traverse((obj) => {
|
|
72
|
+
const mesh = obj;
|
|
73
|
+
if (mesh.isMesh) {
|
|
74
|
+
mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
|
|
75
|
+
mesh.rotation.setFromQuaternion(mesh.quaternion);
|
|
76
|
+
mesh.updateMatrix();
|
|
77
|
+
// same geometry and same material consider as the same mesh
|
|
78
|
+
const uuid = mesh.geometry.uuid + '/' + mesh.material.uuid;
|
|
79
|
+
if (meshCollect[uuid]) {
|
|
80
|
+
meshCollect[uuid].push(mesh);
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
meshCollect[uuid] = [mesh];
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
obj.position.set(0, 0, 0);
|
|
88
|
+
obj.scale.set(1, 1, 1);
|
|
89
|
+
obj.rotation.set(0, 0, 0);
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
// create all instances
|
|
93
|
+
Object.keys(meshCollect).forEach(uuid => {
|
|
94
|
+
const meshes = meshCollect[uuid];
|
|
95
|
+
const mesh = meshes[0];
|
|
96
|
+
const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * this.count);
|
|
97
|
+
instancedMesh.name = mesh.name;
|
|
98
|
+
instancedMesh.frustumCulled = false;
|
|
99
|
+
instanceCollect[uuid] = instancedMesh;
|
|
100
|
+
this.add(instancedMesh);
|
|
101
|
+
});
|
|
102
|
+
// 加载完成事件
|
|
103
|
+
await new Promise(resolve => setTimeout(resolve, 100));
|
|
104
|
+
// 加载完成事件
|
|
105
|
+
this.dispatchEvent({ type: "loaded" });
|
|
106
|
+
this.loaded = true;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
// 更新包围盒
|
|
110
|
+
computeBoundingSphere = throttle(() => {
|
|
111
|
+
this.traverse(m => {
|
|
112
|
+
if (m !== this) {
|
|
113
|
+
m.computeBoundingSphere();
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
}, 1000);
|
|
117
|
+
//初始实例矩阵的数量
|
|
118
|
+
setCount(count = 0) {
|
|
119
|
+
const instanceMatrix = new InstancedBufferAttribute(new Float32Array(count * 16), 16);
|
|
120
|
+
const instanceColor = new InstancedBufferAttribute(new Float32Array(count * 3).fill(1), 3);
|
|
121
|
+
for (let i = 0; i < this.count; i++) {
|
|
122
|
+
instanceMatrix.copyAt(i, this.instanceMatrix, i);
|
|
123
|
+
instanceColor.copyAt(i, this.instanceColor, i);
|
|
124
|
+
}
|
|
125
|
+
this.instanceMatrix = instanceMatrix;
|
|
126
|
+
this.instanceColor = instanceColor;
|
|
127
|
+
this.count = count;
|
|
128
|
+
this.children.map((instanceMesh) => {
|
|
129
|
+
const instanceMatrix = new InstancedBufferAttribute(new Float32Array(count * 16), 16);
|
|
130
|
+
const instanceColor = new InstancedBufferAttribute(new Float32Array(count * 3).fill(1), 3);
|
|
131
|
+
for (let i = 0; i < instanceMesh.count; i++) {
|
|
132
|
+
instanceMatrix.copyAt(i, this.instanceMatrix, i);
|
|
133
|
+
instanceColor.copyAt(i, this.instanceColor, i);
|
|
134
|
+
}
|
|
135
|
+
instanceMesh.instanceMatrix = instanceMatrix;
|
|
136
|
+
instanceMesh.instanceColor = instanceColor;
|
|
137
|
+
instanceMesh.count = count;
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
// 设置矩阵
|
|
141
|
+
setMatrixAt(index, matrix) {
|
|
142
|
+
Object.keys(this.meshCollect).forEach(uuid => {
|
|
143
|
+
const instancedMesh = this.instanceCollect[uuid];
|
|
144
|
+
const collect = this.meshCollect[uuid];
|
|
145
|
+
collect.forEach((mesh, i) => {
|
|
146
|
+
InstancedMeshBase.matrix.copy(mesh.matrix);
|
|
147
|
+
InstancedMeshBase.matrix.premultiply(matrix);
|
|
148
|
+
instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase.matrix);
|
|
149
|
+
instancedMesh.instanceMatrix.needsUpdate = true;
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
this.computeBoundingSphere();
|
|
153
|
+
}
|
|
154
|
+
// 设置颜色
|
|
155
|
+
setColorAt(index, color) {
|
|
156
|
+
Object.keys(this.meshCollect).forEach(uuid => {
|
|
157
|
+
const instancedMesh = this.instanceCollect[uuid];
|
|
158
|
+
const collect = this.meshCollect[uuid];
|
|
159
|
+
collect.forEach((mesh, i) => {
|
|
160
|
+
const c = color(instancedMesh);
|
|
161
|
+
if (c) {
|
|
162
|
+
instancedMesh.setColorAt(collect.length * index + i, c);
|
|
163
|
+
instancedMesh.instanceColor.needsUpdate = true;
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
// 同步属性
|
|
169
|
+
updateMatrixWorld(force) {
|
|
170
|
+
super.updateMatrixWorld(force);
|
|
171
|
+
const { cursor, enableEvent } = this.userData;
|
|
172
|
+
this.traverse(obj => {
|
|
173
|
+
Object.assign(obj.userData, { cursor, enableEvent });
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
// 事件监听
|
|
177
|
+
addEventListener(name, callback) {
|
|
178
|
+
super.addEventListener(name, callback);
|
|
179
|
+
this.children.map(mesh => {
|
|
180
|
+
mesh.addEventListener(name, callback);
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
// 取消事件的监听
|
|
184
|
+
removeEventListener(name, callback) {
|
|
185
|
+
super.removeEventListener(name, callback);
|
|
186
|
+
this.children.map(mesh => {
|
|
187
|
+
mesh.removeEventListener(name, callback);
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
}
|
package/KeyFrameAnimation.d.ts
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
|
|
2
|
-
export type Keyframe = {
|
|
3
|
-
position: Vector3;
|
|
4
|
-
scale: Vector3;
|
|
5
|
-
rotation: Euler;
|
|
6
|
-
timeTemp: number;
|
|
7
|
-
};
|
|
8
|
-
export type KeyframeAnimationProps = {
|
|
9
|
-
speedScale?: number;
|
|
10
|
-
object3d: Object3D;
|
|
11
|
-
keyframes: Array<Keyframe>;
|
|
12
|
-
};
|
|
13
|
-
export default class KeyframeAnimation extends Object3D {
|
|
14
|
-
constructor(props: KeyframeAnimationProps);
|
|
15
|
-
speedScale: number;
|
|
16
|
-
object3d: Object3D;
|
|
17
|
-
halperLine: Line<any, LineBasicMaterial>;
|
|
18
|
-
keyframes: Array<Keyframe>;
|
|
19
|
-
setObject3D(object3d: Object3D): void;
|
|
20
|
-
getKeyframe(i: number): Keyframe;
|
|
21
|
-
setKeyframe(i: number, keyframe: Keyframe): void;
|
|
22
|
-
setKeyframes(keyframes: Array<Keyframe>): void;
|
|
23
|
-
update(): void;
|
|
24
|
-
updateMatrix(): void;
|
|
25
|
-
}
|
|
1
|
+
import { Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
|
|
2
|
+
export type Keyframe = {
|
|
3
|
+
position: Vector3;
|
|
4
|
+
scale: Vector3;
|
|
5
|
+
rotation: Euler;
|
|
6
|
+
timeTemp: number;
|
|
7
|
+
};
|
|
8
|
+
export type KeyframeAnimationProps = {
|
|
9
|
+
speedScale?: number;
|
|
10
|
+
object3d: Object3D;
|
|
11
|
+
keyframes: Array<Keyframe>;
|
|
12
|
+
};
|
|
13
|
+
export default class KeyframeAnimation extends Object3D {
|
|
14
|
+
constructor(props: KeyframeAnimationProps);
|
|
15
|
+
speedScale: number;
|
|
16
|
+
object3d: Object3D;
|
|
17
|
+
halperLine: Line<any, LineBasicMaterial>;
|
|
18
|
+
keyframes: Array<Keyframe>;
|
|
19
|
+
setObject3D(object3d: Object3D): void;
|
|
20
|
+
getKeyframe(i: number): Keyframe;
|
|
21
|
+
setKeyframe(i: number, keyframe: Keyframe): void;
|
|
22
|
+
setKeyframes(keyframes: Array<Keyframe>): void;
|
|
23
|
+
update(): void;
|
|
24
|
+
updateMatrix(): void;
|
|
25
|
+
}
|
package/KeyFrameAnimation.js
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* @Author: xiaosihan
|
|
3
|
-
* @Date: 2023-02-16 00:22:31
|
|
4
|
-
* @Last Modified by: xiaosihan
|
|
5
|
-
* @Last Modified time: 2023-02-16 19:08:55
|
|
6
|
-
*/
|
|
7
|
-
import { last } from "lodash";
|
|
8
|
-
import { BufferAttribute, Line, LineBasicMaterial, Object3D } from "three";
|
|
9
|
-
import threeUtils from "./threeUtils";
|
|
10
|
-
// 关键帧动画对象
|
|
11
|
-
export default class KeyframeAnimation extends Object3D {
|
|
12
|
-
constructor(props) {
|
|
13
|
-
super();
|
|
14
|
-
// 速度调整
|
|
15
|
-
this.speedScale = props.speedScale || 1;
|
|
16
|
-
// 设置关键帧对象数组
|
|
17
|
-
this.setKeyframes(props.keyframes);
|
|
18
|
-
// 设置对象
|
|
19
|
-
this.setObject3D(props.object3d);
|
|
20
|
-
}
|
|
21
|
-
// 速度调整
|
|
22
|
-
speedScale = 1;
|
|
23
|
-
// 需要需要移动的对象
|
|
24
|
-
object3d;
|
|
25
|
-
//路径辅助线
|
|
26
|
-
halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
|
|
27
|
-
// 关键帧数组
|
|
28
|
-
keyframes = [];
|
|
29
|
-
// 设置需要移动的对象
|
|
30
|
-
setObject3D(object3d) {
|
|
31
|
-
this.object3d = object3d;
|
|
32
|
-
if (threeUtils.isDev) {
|
|
33
|
-
this.children = [object3d, this.halperLine];
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
this.children = [object3d];
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
// 获取单个关键帧
|
|
40
|
-
getKeyframe(i) {
|
|
41
|
-
return this.keyframes[i];
|
|
42
|
-
}
|
|
43
|
-
// 设置单个关键帧
|
|
44
|
-
setKeyframe(i, keyframe) {
|
|
45
|
-
this.keyframes[i] = keyframe;
|
|
46
|
-
this.setKeyframes(this.keyframes);
|
|
47
|
-
}
|
|
48
|
-
//设置全部关键帧
|
|
49
|
-
setKeyframes(keyframes) {
|
|
50
|
-
this.keyframes = keyframes;
|
|
51
|
-
const position = [];
|
|
52
|
-
keyframes.map(k => {
|
|
53
|
-
position.push(k.position.x);
|
|
54
|
-
position.push(k.position.y);
|
|
55
|
-
position.push(k.position.z);
|
|
56
|
-
});
|
|
57
|
-
this.halperLine.geometry.setAttribute("position", new BufferAttribute(new Float32Array(position), 3, false));
|
|
58
|
-
}
|
|
59
|
-
// 更具关键帧的信息更新 对象的位置
|
|
60
|
-
update() {
|
|
61
|
-
const { _timeTemp } = threeUtils;
|
|
62
|
-
const maxtimetemp = last(this.keyframes).timeTemp;
|
|
63
|
-
const currentTime = _timeTemp % maxtimetemp;
|
|
64
|
-
const currentKeyframeIndex = this.keyframes.findIndex(k => currentTime < k.timeTemp);
|
|
65
|
-
const startKeyframe = this.keyframes[currentKeyframeIndex - 1];
|
|
66
|
-
const endKeyframe = this.keyframes[currentKeyframeIndex];
|
|
67
|
-
const progress = (currentTime - startKeyframe.timeTemp) / (endKeyframe.timeTemp - startKeyframe.timeTemp);
|
|
68
|
-
this.object3d.position.copy(endKeyframe.position).sub(startKeyframe.position).multiplyScalar(progress).add(startKeyframe.position);
|
|
69
|
-
this.object3d.scale.copy(endKeyframe.scale).sub(startKeyframe.scale).multiplyScalar(progress).add(startKeyframe.scale);
|
|
70
|
-
this.object3d.rotation.set((endKeyframe.rotation.x - startKeyframe.rotation.x) * progress + startKeyframe.rotation.x, (endKeyframe.rotation.y - startKeyframe.rotation.y) * progress + startKeyframe.rotation.y, (endKeyframe.rotation.z - startKeyframe.rotation.z) * progress + startKeyframe.rotation.z);
|
|
71
|
-
this.dispatchEvent({ type: "update" });
|
|
72
|
-
}
|
|
73
|
-
//更新关键帧的实例矩阵
|
|
74
|
-
updateMatrix() {
|
|
75
|
-
this.update();
|
|
76
|
-
super.updateMatrix();
|
|
77
|
-
}
|
|
78
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* @Author: xiaosihan
|
|
3
|
+
* @Date: 2023-02-16 00:22:31
|
|
4
|
+
* @Last Modified by: xiaosihan
|
|
5
|
+
* @Last Modified time: 2023-02-16 19:08:55
|
|
6
|
+
*/
|
|
7
|
+
import { last } from "lodash";
|
|
8
|
+
import { BufferAttribute, Line, LineBasicMaterial, Object3D } from "three";
|
|
9
|
+
import threeUtils from "./threeUtils";
|
|
10
|
+
// 关键帧动画对象
|
|
11
|
+
export default class KeyframeAnimation extends Object3D {
|
|
12
|
+
constructor(props) {
|
|
13
|
+
super();
|
|
14
|
+
// 速度调整
|
|
15
|
+
this.speedScale = props.speedScale || 1;
|
|
16
|
+
// 设置关键帧对象数组
|
|
17
|
+
this.setKeyframes(props.keyframes);
|
|
18
|
+
// 设置对象
|
|
19
|
+
this.setObject3D(props.object3d);
|
|
20
|
+
}
|
|
21
|
+
// 速度调整
|
|
22
|
+
speedScale = 1;
|
|
23
|
+
// 需要需要移动的对象
|
|
24
|
+
object3d;
|
|
25
|
+
//路径辅助线
|
|
26
|
+
halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
|
|
27
|
+
// 关键帧数组
|
|
28
|
+
keyframes = [];
|
|
29
|
+
// 设置需要移动的对象
|
|
30
|
+
setObject3D(object3d) {
|
|
31
|
+
this.object3d = object3d;
|
|
32
|
+
if (threeUtils.isDev) {
|
|
33
|
+
this.children = [object3d, this.halperLine];
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
this.children = [object3d];
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
// 获取单个关键帧
|
|
40
|
+
getKeyframe(i) {
|
|
41
|
+
return this.keyframes[i];
|
|
42
|
+
}
|
|
43
|
+
// 设置单个关键帧
|
|
44
|
+
setKeyframe(i, keyframe) {
|
|
45
|
+
this.keyframes[i] = keyframe;
|
|
46
|
+
this.setKeyframes(this.keyframes);
|
|
47
|
+
}
|
|
48
|
+
//设置全部关键帧
|
|
49
|
+
setKeyframes(keyframes) {
|
|
50
|
+
this.keyframes = keyframes;
|
|
51
|
+
const position = [];
|
|
52
|
+
keyframes.map(k => {
|
|
53
|
+
position.push(k.position.x);
|
|
54
|
+
position.push(k.position.y);
|
|
55
|
+
position.push(k.position.z);
|
|
56
|
+
});
|
|
57
|
+
this.halperLine.geometry.setAttribute("position", new BufferAttribute(new Float32Array(position), 3, false));
|
|
58
|
+
}
|
|
59
|
+
// 更具关键帧的信息更新 对象的位置
|
|
60
|
+
update() {
|
|
61
|
+
const { _timeTemp } = threeUtils;
|
|
62
|
+
const maxtimetemp = last(this.keyframes).timeTemp;
|
|
63
|
+
const currentTime = _timeTemp % maxtimetemp;
|
|
64
|
+
const currentKeyframeIndex = this.keyframes.findIndex(k => currentTime < k.timeTemp);
|
|
65
|
+
const startKeyframe = this.keyframes[currentKeyframeIndex - 1];
|
|
66
|
+
const endKeyframe = this.keyframes[currentKeyframeIndex];
|
|
67
|
+
const progress = (currentTime - startKeyframe.timeTemp) / (endKeyframe.timeTemp - startKeyframe.timeTemp);
|
|
68
|
+
this.object3d.position.copy(endKeyframe.position).sub(startKeyframe.position).multiplyScalar(progress).add(startKeyframe.position);
|
|
69
|
+
this.object3d.scale.copy(endKeyframe.scale).sub(startKeyframe.scale).multiplyScalar(progress).add(startKeyframe.scale);
|
|
70
|
+
this.object3d.rotation.set((endKeyframe.rotation.x - startKeyframe.rotation.x) * progress + startKeyframe.rotation.x, (endKeyframe.rotation.y - startKeyframe.rotation.y) * progress + startKeyframe.rotation.y, (endKeyframe.rotation.z - startKeyframe.rotation.z) * progress + startKeyframe.rotation.z);
|
|
71
|
+
this.dispatchEvent({ type: "update" });
|
|
72
|
+
}
|
|
73
|
+
//更新关键帧的实例矩阵
|
|
74
|
+
updateMatrix() {
|
|
75
|
+
this.update();
|
|
76
|
+
super.updateMatrix();
|
|
77
|
+
}
|
|
78
|
+
}
|
package/MeshBase.d.ts
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { AnimationAction, AnimationMixer, Clock, Group, Mesh, Object3D, Vector3 } from "three";
|
|
2
|
-
export default class MeshBase extends Group {
|
|
3
|
-
constructor(url?: string);
|
|
4
|
-
static models: Map<string, Object3D>;
|
|
5
|
-
static loadModeling: Map<string, boolean>;
|
|
6
|
-
loaded: boolean;
|
|
7
|
-
hasAnimation: boolean;
|
|
8
|
-
mixer?: AnimationMixer;
|
|
9
|
-
animationActions: {
|
|
10
|
-
[key: string]: AnimationAction;
|
|
11
|
-
};
|
|
12
|
-
getSuffix(filename: string): string;
|
|
13
|
-
loadModel(url: string, filename?: string): Promise<void>;
|
|
14
|
-
frustumCulled: boolean;
|
|
15
|
-
castShadow: boolean;
|
|
16
|
-
receiveShadow: boolean;
|
|
17
|
-
awaitLoaded(callback?: Function): Promise<void>;
|
|
18
|
-
traverseMesh(callback: (mesh: Mesh) => void): Promise<void>;
|
|
19
|
-
clock: Clock;
|
|
20
|
-
setClipActionWeight(weights?: {
|
|
21
|
-
[key: string]: number;
|
|
22
|
-
}): Promise<void>;
|
|
23
|
-
getAnimas(): string[];
|
|
24
|
-
setAnimas(anima?: string): void;
|
|
25
|
-
stop(): void;
|
|
26
|
-
updateMatrix(): void;
|
|
27
|
-
getSize(): Promise<Vector3>;
|
|
28
|
-
center(): Promise<void>;
|
|
29
|
-
alignBottom(y?: number): Promise<void>;
|
|
30
|
-
scaleTo(size?: number, key?: Array<"x" | "y" | "z">): Promise<void>;
|
|
31
|
-
expandBynormal(length: number): void;
|
|
32
|
-
}
|
|
1
|
+
import { AnimationAction, AnimationMixer, Clock, Group, Mesh, Object3D, Vector3 } from "three";
|
|
2
|
+
export default class MeshBase extends Group {
|
|
3
|
+
constructor(url?: string);
|
|
4
|
+
static models: Map<string, Object3D>;
|
|
5
|
+
static loadModeling: Map<string, boolean>;
|
|
6
|
+
loaded: boolean;
|
|
7
|
+
hasAnimation: boolean;
|
|
8
|
+
mixer?: AnimationMixer;
|
|
9
|
+
animationActions: {
|
|
10
|
+
[key: string]: AnimationAction;
|
|
11
|
+
};
|
|
12
|
+
getSuffix(filename: string): string;
|
|
13
|
+
loadModel(url: string, filename?: string): Promise<void>;
|
|
14
|
+
frustumCulled: boolean;
|
|
15
|
+
castShadow: boolean;
|
|
16
|
+
receiveShadow: boolean;
|
|
17
|
+
awaitLoaded(callback?: Function): Promise<void>;
|
|
18
|
+
traverseMesh(callback: (mesh: Mesh) => void): Promise<void>;
|
|
19
|
+
clock: Clock;
|
|
20
|
+
setClipActionWeight(weights?: {
|
|
21
|
+
[key: string]: number;
|
|
22
|
+
}): Promise<void>;
|
|
23
|
+
getAnimas(): string[];
|
|
24
|
+
setAnimas(anima?: string): void;
|
|
25
|
+
stop(): void;
|
|
26
|
+
updateMatrix(): void;
|
|
27
|
+
getSize(): Promise<Vector3>;
|
|
28
|
+
center(): Promise<void>;
|
|
29
|
+
alignBottom(y?: number): Promise<void>;
|
|
30
|
+
scaleTo(size?: number, key?: Array<"x" | "y" | "z">): Promise<void>;
|
|
31
|
+
expandBynormal(length: number): void;
|
|
32
|
+
}
|