three-base 2.0.78 → 2.0.79
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/ExtrudeMesh.d.ts +1 -1
- package/ExtrudeMesh.ts +6 -1
- package/InstancedMeshBase.js +8 -4
- package/InstancedMeshBase.ts +12 -6
- package/KeyFrameAnimation.d.ts +1 -1
- package/MeshBase.d.ts +1 -1
- package/MeshBase.js +2 -1
- package/MeshBase.ts +3 -2
- package/PlaneText.d.ts +1 -6
- package/PointLight/PointLight.d.ts +1 -1
- package/Text3D/Text3D.d.ts +1 -1
- package/Text3D/Text3D.js +2 -2
- package/Text3D/Text3D.ts +3 -3
- package/Text3D/fontController.js +1 -2
- package/Text3D/fontController.ts +2 -3
- package/ThreeBase.js +13 -13
- package/ThreeBase.ts +18 -15
- package/ThreeMouse.d.ts +2 -0
- package/ThreeMouse.js +17 -0
- package/ThreeMouse.ts +19 -1
- package/package.json +3 -3
package/ExtrudeMesh.d.ts
CHANGED
|
@@ -55,7 +55,7 @@ export default class ExtrudeMesh extends Mesh<BufferGeometry, Material> {
|
|
|
55
55
|
number
|
|
56
56
|
];
|
|
57
57
|
}>;
|
|
58
|
-
computerMatrix(vector1: [number, number, number], vector2: [number, number, number], scale: [number, number, number]):
|
|
58
|
+
computerMatrix(vector1: [number, number, number], vector2: [number, number, number], scale: [number, number, number]): [number, number, number, number, number, number, number, number, number, number, number, number, number, number, number, number];
|
|
59
59
|
/**
|
|
60
60
|
* @计算渐变值 computerGradient([3,2,4], 0.3);
|
|
61
61
|
* @渐变区间 values:number[]
|
package/ExtrudeMesh.ts
CHANGED
|
@@ -81,7 +81,12 @@ export default class ExtrudeMesh extends Mesh<BufferGeometry, Material> {
|
|
|
81
81
|
)
|
|
82
82
|
);
|
|
83
83
|
ExtrudeMesh.temp1Matrix4.scale(ExtrudeMesh.temp1Vector3.set(...scale));
|
|
84
|
-
return ExtrudeMesh.temp1Matrix4.transpose().toArray()
|
|
84
|
+
return ExtrudeMesh.temp1Matrix4.transpose().toArray() as [
|
|
85
|
+
number, number, number, number,
|
|
86
|
+
number, number, number, number,
|
|
87
|
+
number, number, number, number,
|
|
88
|
+
number, number, number, number
|
|
89
|
+
];
|
|
85
90
|
}
|
|
86
91
|
|
|
87
92
|
/**
|
package/InstancedMeshBase.js
CHANGED
|
@@ -150,13 +150,14 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
150
150
|
}
|
|
151
151
|
// 设置矩阵
|
|
152
152
|
async setMatrixAt(index, matrix = new Matrix4().identity()) {
|
|
153
|
+
const new_matrix = matrix.clone(); // 把矩阵克隆一下避免对象引用问题
|
|
153
154
|
await this.awaitLoaded();
|
|
154
155
|
Object.keys(this.meshCollect).forEach(uuid => {
|
|
155
156
|
const instancedMesh = this.instanceCollect[uuid];
|
|
156
157
|
const collect = this.meshCollect[uuid];
|
|
157
158
|
collect.forEach((mesh, i) => {
|
|
158
159
|
InstancedMeshBase._matrix.copy(mesh.matrix);
|
|
159
|
-
InstancedMeshBase._matrix.premultiply(
|
|
160
|
+
InstancedMeshBase._matrix.premultiply(new_matrix);
|
|
160
161
|
instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
|
|
161
162
|
instancedMesh.instanceMatrix.needsUpdate = true;
|
|
162
163
|
});
|
|
@@ -165,6 +166,9 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
165
166
|
}
|
|
166
167
|
//设置移动旋转缩放
|
|
167
168
|
async setTRS(index, { position, rotation, scale }) {
|
|
169
|
+
const new_position = position ? position.clone() : undefined;
|
|
170
|
+
const new_rotation = rotation ? rotation.clone() : undefined;
|
|
171
|
+
const new_scale = scale ? scale.clone() : undefined;
|
|
168
172
|
await this.awaitLoaded();
|
|
169
173
|
Object.keys(this.meshCollect).forEach(uuid => {
|
|
170
174
|
const instancedMesh = this.instanceCollect[uuid];
|
|
@@ -175,9 +179,9 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
175
179
|
InstancedMeshBase._matrix.premultiply(mesh.matrix.clone().invert());
|
|
176
180
|
InstancedMeshBase._matrix.decompose(InstancedMeshBase._position, InstancedMeshBase._Quaternion, InstancedMeshBase._scale);
|
|
177
181
|
InstancedMeshBase._rotation.setFromQuaternion(InstancedMeshBase._Quaternion);
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
182
|
+
new_position && InstancedMeshBase._position.copy(new_position);
|
|
183
|
+
new_rotation && InstancedMeshBase._rotation.copy(new_rotation);
|
|
184
|
+
new_scale && InstancedMeshBase._scale.copy(new_scale);
|
|
181
185
|
InstancedMeshBase._Quaternion.setFromEuler(InstancedMeshBase._rotation);
|
|
182
186
|
InstancedMeshBase._matrix.compose(InstancedMeshBase._position, InstancedMeshBase._Quaternion, InstancedMeshBase._scale);
|
|
183
187
|
InstancedMeshBase._matrix.premultiply(mesh.matrix);
|
package/InstancedMeshBase.ts
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { throttle } from "lodash";
|
|
9
|
-
import { Color, Euler, InstancedBufferAttribute, InstancedMesh, Material, Matrix4, Mesh, Object3D, Quaternion, Vector3 } from "three";
|
|
9
|
+
import { BufferAttribute, Color, Euler, InstancedBufferAttribute, InstancedMesh, Material, Matrix4, Mesh, Object3D, Quaternion, Vector3 } from "three";
|
|
10
10
|
import MeshBase from "./MeshBase";
|
|
11
11
|
import threeUtils from "./threeUtils";
|
|
12
12
|
import threeLoader from "./threeLoader";
|
|
@@ -185,7 +185,7 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
185
185
|
|
|
186
186
|
for (let i = 0; i < instanceMesh.count; i++) {
|
|
187
187
|
instanceMatrix.copyAt(i, instanceMesh.instanceMatrix, i);
|
|
188
|
-
instanceColor.copyAt(i, instanceMesh.instanceColor, i);
|
|
188
|
+
instanceColor.copyAt(i, instanceMesh.instanceColor as BufferAttribute, i);
|
|
189
189
|
}
|
|
190
190
|
|
|
191
191
|
instanceMesh.instanceMatrix = instanceMatrix;
|
|
@@ -197,13 +197,14 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
197
197
|
|
|
198
198
|
// 设置矩阵
|
|
199
199
|
async setMatrixAt(index: number, matrix: Matrix4 = new Matrix4().identity()) {
|
|
200
|
+
const new_matrix = matrix.clone(); // 把矩阵克隆一下避免对象引用问题
|
|
200
201
|
await this.awaitLoaded();
|
|
201
202
|
Object.keys(this.meshCollect).forEach(uuid => {
|
|
202
203
|
const instancedMesh = this.instanceCollect[uuid];
|
|
203
204
|
const collect = this.meshCollect[uuid]
|
|
204
205
|
collect.forEach((mesh: Mesh, i: number) => {
|
|
205
206
|
InstancedMeshBase._matrix.copy(mesh.matrix);
|
|
206
|
-
InstancedMeshBase._matrix.premultiply(
|
|
207
|
+
InstancedMeshBase._matrix.premultiply(new_matrix);
|
|
207
208
|
|
|
208
209
|
instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
|
|
209
210
|
instancedMesh.instanceMatrix.needsUpdate = true;
|
|
@@ -226,6 +227,11 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
226
227
|
scale?: Vector3
|
|
227
228
|
}
|
|
228
229
|
) {
|
|
230
|
+
|
|
231
|
+
const new_position = position ? position.clone() : undefined;
|
|
232
|
+
const new_rotation = rotation ? rotation.clone() : undefined;
|
|
233
|
+
const new_scale = scale ? scale.clone() : undefined;
|
|
234
|
+
|
|
229
235
|
await this.awaitLoaded();
|
|
230
236
|
|
|
231
237
|
Object.keys(this.meshCollect).forEach(uuid => {
|
|
@@ -243,9 +249,9 @@ export default class InstancedMeshBase extends MeshBase {
|
|
|
243
249
|
InstancedMeshBase._scale
|
|
244
250
|
);
|
|
245
251
|
InstancedMeshBase._rotation.setFromQuaternion(InstancedMeshBase._Quaternion);
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
252
|
+
new_position && InstancedMeshBase._position.copy(new_position);
|
|
253
|
+
new_rotation && InstancedMeshBase._rotation.copy(new_rotation);
|
|
254
|
+
new_scale && InstancedMeshBase._scale.copy(new_scale);
|
|
249
255
|
InstancedMeshBase._Quaternion.setFromEuler(InstancedMeshBase._rotation);
|
|
250
256
|
|
|
251
257
|
InstancedMeshBase._matrix.compose(
|
package/KeyFrameAnimation.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export default class KeyframeAnimation extends Object3D {
|
|
|
14
14
|
constructor(props: KeyframeAnimationProps);
|
|
15
15
|
speedScale: number;
|
|
16
16
|
object3d: Object3D;
|
|
17
|
-
halperLine: Line<any, LineBasicMaterial>;
|
|
17
|
+
halperLine: Line<any, LineBasicMaterial, import("three").Object3DEventMap>;
|
|
18
18
|
keyframes: Array<Keyframe>;
|
|
19
19
|
setObject3D(object3d: Object3D): void;
|
|
20
20
|
getKeyframe(i: number): Keyframe;
|
package/MeshBase.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ export default class MeshBase extends Group {
|
|
|
15
15
|
frustumCulled: boolean;
|
|
16
16
|
castShadow: boolean;
|
|
17
17
|
receiveShadow: boolean;
|
|
18
|
-
resoles:
|
|
18
|
+
resoles: Array<(value: void | PromiseLike<void>) => void>;
|
|
19
19
|
awaitLoaded(): Promise<void>;
|
|
20
20
|
traverseMesh(callback: (mesh: Mesh) => void): Promise<void>;
|
|
21
21
|
clock: Clock;
|
package/MeshBase.js
CHANGED
package/MeshBase.ts
CHANGED
|
@@ -109,7 +109,7 @@ export default class MeshBase extends Group {
|
|
|
109
109
|
receiveShadow: boolean = false;
|
|
110
110
|
|
|
111
111
|
// promise.resole 队列
|
|
112
|
-
resoles = [];
|
|
112
|
+
resoles: Array<(value: void | PromiseLike<void>) => void> = [];
|
|
113
113
|
// 等待加载加载完成
|
|
114
114
|
async awaitLoaded() {
|
|
115
115
|
if (!this.loaded) {
|
|
@@ -120,7 +120,8 @@ export default class MeshBase extends Group {
|
|
|
120
120
|
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
121
121
|
}
|
|
122
122
|
while (this.resoles.length > 0) {
|
|
123
|
-
this.resoles.pop()
|
|
123
|
+
const resole = this.resoles.pop();
|
|
124
|
+
resole && resole();
|
|
124
125
|
}
|
|
125
126
|
})();
|
|
126
127
|
}
|
package/PlaneText.d.ts
CHANGED
|
@@ -25,12 +25,7 @@ export default class PlaneText extends Mesh {
|
|
|
25
25
|
get(prop: keyof SpriteText): string | number | boolean | Vector3 | import("three").Object3D<import("three").Object3DEventMap> | import("three").BufferGeometry<import("three").NormalBufferAttributes> | ((force?: boolean) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | import("three").Object3D<import("three").Object3DEventMap>[] | import("three").Euler | import("three").Material | import("three").Quaternion | import("three").Matrix4 | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | Record<string, any> | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, depthMaterial: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, depthMaterial: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group<import("three").Object3DEventMap>) => void) | ((matrix: import("three").Matrix4) => void) | ((axis: Vector3, angle: number) => void) | ((euler: import("three").Euler) => void) | ((m: import("three").Matrix4) => void) | ((q: import("three").Quaternion) => void) | ((vector: Vector3) => Vector3) | ((vector: Vector3) => Vector3) | {
|
|
26
26
|
(vector: Vector3): void;
|
|
27
27
|
(x: number, y: number, z: number): void;
|
|
28
|
-
} | ((id: number) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any, optionalTarget?: import("three").Object3D<import("three").Object3DEventMap>[]) => import("three").Object3D<import("three").Object3DEventMap>[]) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Object3DEventMap>>[]) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: {
|
|
29
|
-
geometries: any;
|
|
30
|
-
materials: any;
|
|
31
|
-
textures: any;
|
|
32
|
-
images: any;
|
|
33
|
-
}) => any) | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | HTMLCanvasElement | import("three").Vector2 | import("three").SpriteMaterial | ((source: SpriteText, recursive?: boolean) => SpriteText) | (() => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Object3DEventMap>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Object3DEventMap>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Object3DEventMap>) => SpriteText) | ((recursive?: boolean) => SpriteText) | {
|
|
28
|
+
} | ((id: number) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any) => import("three").Object3D<import("three").Object3DEventMap>) | ((name: string, value: any, optionalTarget?: import("three").Object3D<import("three").Object3DEventMap>[]) => import("three").Object3D<import("three").Object3DEventMap>[]) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Object3DEventMap>>[]) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: import("three").JSONMeta) => import("three").Object3DJSON) | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | HTMLCanvasElement | import("three").Vector2 | import("three").SpriteMaterial | ((object: import("three").Object3D<import("three").Object3DEventMap>, recursive?: boolean) => SpriteText) | (() => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Object3DEventMap>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Object3DEventMap>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Object3DEventMap>) => SpriteText) | ((recursive?: boolean) => SpriteText) | {
|
|
34
29
|
<T_1 extends keyof import("three").Object3DEventMap>(type: T_1, listener: import("three").EventListener<import("three").Object3DEventMap[T_1], T_1, SpriteText>): void;
|
|
35
30
|
<T_2 extends string>(type: T_2, listener: import("three").EventListener<{}, T_2, SpriteText>): void;
|
|
36
31
|
} | {
|
|
@@ -8,6 +8,6 @@ import SpriteText from "../SpriteText";
|
|
|
8
8
|
*/
|
|
9
9
|
export default class PointLight extends THREEPointLight {
|
|
10
10
|
constructor(color?: string, intensity?: number, distance?: number, decay?: number);
|
|
11
|
-
pointLinghtHelper: Sprite
|
|
11
|
+
pointLinghtHelper: Sprite<import("three").Object3DEventMap>;
|
|
12
12
|
label: SpriteText;
|
|
13
13
|
}
|
package/Text3D/Text3D.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export type Text3DProps = {
|
|
|
3
3
|
text?: string;
|
|
4
4
|
fontType?: string;
|
|
5
5
|
size?: number | undefined;
|
|
6
|
-
|
|
6
|
+
depth?: number | undefined;
|
|
7
7
|
curveSegments?: number | undefined;
|
|
8
8
|
bevelEnabled?: boolean | undefined;
|
|
9
9
|
bevelThickness?: number | undefined;
|
package/Text3D/Text3D.js
CHANGED
|
@@ -25,7 +25,7 @@ export default class Text3D extends Mesh {
|
|
|
25
25
|
fontType: "simhei",
|
|
26
26
|
size: 1,
|
|
27
27
|
curveSegments: 10,
|
|
28
|
-
|
|
28
|
+
depth: 0.1,
|
|
29
29
|
bevelEnabled: true,
|
|
30
30
|
bevelThickness: 0.02,
|
|
31
31
|
bevelSize: 0.015,
|
|
@@ -46,7 +46,7 @@ export default class Text3D extends Mesh {
|
|
|
46
46
|
font: THREEFont,
|
|
47
47
|
size: this._config.size,
|
|
48
48
|
curveSegments: this._config.curveSegments,
|
|
49
|
-
|
|
49
|
+
depth: this._config.depth,
|
|
50
50
|
bevelEnabled: this._config.bevelEnabled,
|
|
51
51
|
bevelThickness: this._config.bevelThickness,
|
|
52
52
|
bevelSize: this._config.bevelSize,
|
package/Text3D/Text3D.ts
CHANGED
|
@@ -15,7 +15,7 @@ export type Text3DProps = {
|
|
|
15
15
|
text?: string,
|
|
16
16
|
fontType?: string,
|
|
17
17
|
size?: number | undefined;
|
|
18
|
-
|
|
18
|
+
depth?: number | undefined;
|
|
19
19
|
curveSegments?: number | undefined;
|
|
20
20
|
bevelEnabled?: boolean | undefined;
|
|
21
21
|
bevelThickness?: number | undefined;
|
|
@@ -48,7 +48,7 @@ export default class Text3D extends Mesh {
|
|
|
48
48
|
fontType: "simhei",
|
|
49
49
|
size: 1,
|
|
50
50
|
curveSegments: 10,
|
|
51
|
-
|
|
51
|
+
depth: 0.1, // 文字的厚度
|
|
52
52
|
bevelEnabled: true, // 斜角开启
|
|
53
53
|
bevelThickness: 0.02, // 斜角厚度
|
|
54
54
|
bevelSize: 0.015, // 斜角大小
|
|
@@ -73,7 +73,7 @@ export default class Text3D extends Mesh {
|
|
|
73
73
|
font: THREEFont,
|
|
74
74
|
size: this._config.size,
|
|
75
75
|
curveSegments: this._config.curveSegments,
|
|
76
|
-
|
|
76
|
+
depth: this._config.depth, // 文字的厚度
|
|
77
77
|
bevelEnabled: this._config.bevelEnabled, // 斜角开启
|
|
78
78
|
bevelThickness: this._config.bevelThickness, // 斜角厚度
|
|
79
79
|
bevelSize: this._config.bevelSize, // 斜角大小
|
package/Text3D/fontController.js
CHANGED
|
@@ -100,8 +100,7 @@ class fontContorl {
|
|
|
100
100
|
"original_font_information": {},
|
|
101
101
|
"familyName": "Source Han Sans CN Normal",
|
|
102
102
|
"descender": -167,
|
|
103
|
-
"
|
|
104
|
-
"cssFontStyle": "normal",
|
|
103
|
+
"ascender": 0,
|
|
105
104
|
"boundingBox": {
|
|
106
105
|
"yMin": -700,
|
|
107
106
|
"xMin": -1389,
|
package/Text3D/fontController.ts
CHANGED
|
@@ -154,8 +154,7 @@ class fontContorl {
|
|
|
154
154
|
"original_font_information": {},
|
|
155
155
|
"familyName": "Source Han Sans CN Normal",
|
|
156
156
|
"descender": -167,
|
|
157
|
-
"
|
|
158
|
-
"cssFontStyle": "normal",
|
|
157
|
+
"ascender": 0,
|
|
159
158
|
"boundingBox": {
|
|
160
159
|
"yMin": -700,
|
|
161
160
|
"xMin": -1389,
|
|
@@ -179,7 +178,7 @@ class fontContorl {
|
|
|
179
178
|
|
|
180
179
|
// 加载外部字体.js
|
|
181
180
|
async _loadFontJson({ fontType = "simhei", fontName, fontBasePath }: { fontType: string, fontName: string, fontBasePath: string }) {
|
|
182
|
-
|
|
181
|
+
|
|
183
182
|
let fontJson = await this.getFont({ fontType, fontName });
|
|
184
183
|
|
|
185
184
|
if (!fontJson) {
|
package/ThreeBase.js
CHANGED
|
@@ -20,6 +20,19 @@ import threeUtils from "./threeUtils";
|
|
|
20
20
|
export default class ThreeBase extends EventDispatcher {
|
|
21
21
|
constructor() {
|
|
22
22
|
super();
|
|
23
|
+
// 资源加载进度有更新时, 需要渲染
|
|
24
|
+
threeLoader.addEventListener("loadding", () => {
|
|
25
|
+
this.dispatchEvent({ type: "loadding" });
|
|
26
|
+
setTimeout(() => {
|
|
27
|
+
this.needRender = true;
|
|
28
|
+
}, 100);
|
|
29
|
+
});
|
|
30
|
+
threeLoader.addEventListener("onLoad", () => {
|
|
31
|
+
this.dispatchEvent({ type: "onLoad" });
|
|
32
|
+
setTimeout(() => {
|
|
33
|
+
this.needRender = true;
|
|
34
|
+
}, 100);
|
|
35
|
+
});
|
|
23
36
|
this.init();
|
|
24
37
|
}
|
|
25
38
|
// 基础深度纹理
|
|
@@ -248,19 +261,6 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
248
261
|
//TODO 设置帧频率 默认50帧
|
|
249
262
|
frame = 50;
|
|
250
263
|
init() {
|
|
251
|
-
// 资源加载进度有更新时, 需要渲染
|
|
252
|
-
threeLoader.addEventListener("loadding", () => {
|
|
253
|
-
this.dispatchEvent({ type: "loadding" });
|
|
254
|
-
setTimeout(() => {
|
|
255
|
-
this.needRender = true;
|
|
256
|
-
}, 100);
|
|
257
|
-
});
|
|
258
|
-
threeLoader.addEventListener("onLoad", () => {
|
|
259
|
-
this.dispatchEvent({ type: "onLoad" });
|
|
260
|
-
setTimeout(() => {
|
|
261
|
-
this.needRender = true;
|
|
262
|
-
}, 100);
|
|
263
|
-
});
|
|
264
264
|
}
|
|
265
265
|
// 重置控制器的位置
|
|
266
266
|
resetLookAt({ position = this.perspectiveCamera.position, center = this.controls.target, }) {
|
package/ThreeBase.ts
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* @Last Modified time: 2024-08-10 04:23:41
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import {
|
|
9
|
-
import { AxesHelper, Box3, BufferGeometry, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter,
|
|
8
|
+
import { round } from "lodash";
|
|
9
|
+
import { AxesHelper, Box3, BufferGeometry, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, Mesh, MeshBasicMaterial, NoBlending, NormalBlending, Object3D, OrthographicCamera, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Texture, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from "three";
|
|
10
10
|
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
|
11
11
|
import { degToRad, generateUUID } from "three/src/math/MathUtils";
|
|
12
12
|
import ThreeMouse from "./ThreeMouse";
|
|
@@ -23,6 +23,22 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
23
23
|
|
|
24
24
|
constructor() {
|
|
25
25
|
super();
|
|
26
|
+
|
|
27
|
+
// 资源加载进度有更新时, 需要渲染
|
|
28
|
+
threeLoader.addEventListener("loadding", () => {
|
|
29
|
+
this.dispatchEvent({ type: "loadding" } as never);
|
|
30
|
+
setTimeout(() => {
|
|
31
|
+
this.needRender = true;
|
|
32
|
+
}, 100);
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
threeLoader.addEventListener("onLoad", () => {
|
|
36
|
+
this.dispatchEvent({ type: "onLoad" } as never);
|
|
37
|
+
setTimeout(() => {
|
|
38
|
+
this.needRender = true;
|
|
39
|
+
}, 100);
|
|
40
|
+
});
|
|
41
|
+
|
|
26
42
|
this.init();
|
|
27
43
|
}
|
|
28
44
|
|
|
@@ -292,20 +308,7 @@ export default class ThreeBase extends EventDispatcher {
|
|
|
292
308
|
frame = 50;
|
|
293
309
|
|
|
294
310
|
init() {
|
|
295
|
-
// 资源加载进度有更新时, 需要渲染
|
|
296
|
-
threeLoader.addEventListener("loadding", () => {
|
|
297
|
-
this.dispatchEvent({ type: "loadding" } as never);
|
|
298
|
-
setTimeout(() => {
|
|
299
|
-
this.needRender = true;
|
|
300
|
-
}, 100);
|
|
301
|
-
});
|
|
302
311
|
|
|
303
|
-
threeLoader.addEventListener("onLoad", () => {
|
|
304
|
-
this.dispatchEvent({ type: "onLoad" } as never);
|
|
305
|
-
setTimeout(() => {
|
|
306
|
-
this.needRender = true;
|
|
307
|
-
}, 100);
|
|
308
|
-
});
|
|
309
312
|
|
|
310
313
|
}
|
|
311
314
|
|
package/ThreeMouse.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import * as THREE from "three";
|
|
|
2
2
|
import { Object3D, Scene } from "three";
|
|
3
3
|
import type { Intersection } from "three";
|
|
4
4
|
export interface ThreeMouseEvent extends Intersection {
|
|
5
|
+
e: MouseEvent;
|
|
5
6
|
renderer: THREE.Renderer;
|
|
6
7
|
camera: THREE.Camera;
|
|
7
8
|
type: string;
|
|
@@ -26,6 +27,7 @@ export default class ThreeMouse {
|
|
|
26
27
|
_frame: number;
|
|
27
28
|
_mouseInRenderer: boolean;
|
|
28
29
|
_mousemoveEvent?: MouseEvent;
|
|
30
|
+
_mouseEvent?: MouseEvent;
|
|
29
31
|
_object3ds: Object3D[];
|
|
30
32
|
_click_num: number;
|
|
31
33
|
_getSelected(object3ds: Object3D[]): Intersection | undefined;
|
package/ThreeMouse.js
CHANGED
|
@@ -42,6 +42,8 @@ export default class ThreeMouse {
|
|
|
42
42
|
_mouseInRenderer = false;
|
|
43
43
|
// 鼠标滑动的事件
|
|
44
44
|
_mousemoveEvent;
|
|
45
|
+
// 鼠标事件
|
|
46
|
+
_mouseEvent;
|
|
45
47
|
// 需要被拾取的对象数组
|
|
46
48
|
_object3ds = [];
|
|
47
49
|
// 点击次数
|
|
@@ -110,6 +112,7 @@ export default class ThreeMouse {
|
|
|
110
112
|
const { face, object } = intersection;
|
|
111
113
|
// face && face.normal.applyMatrix4(object.matrixWorld);
|
|
112
114
|
const MouseEvent = Object.assign(intersection, {
|
|
115
|
+
e: this._mousemoveEvent,
|
|
113
116
|
renderer: this._renderer,
|
|
114
117
|
camera: this._camera,
|
|
115
118
|
object: intersection.object,
|
|
@@ -150,6 +153,7 @@ export default class ThreeMouse {
|
|
|
150
153
|
if (this.hasEvent(this._mesh_on, ["mouseleave"])) {
|
|
151
154
|
// 鼠标离开事件
|
|
152
155
|
this._mesh_on.dispatchEvent({
|
|
156
|
+
e: this._mouseEvent,
|
|
153
157
|
renderer: this._renderer,
|
|
154
158
|
camera: this._camera,
|
|
155
159
|
object: this._mesh_on,
|
|
@@ -167,10 +171,12 @@ export default class ThreeMouse {
|
|
|
167
171
|
}
|
|
168
172
|
// 鼠标离开事件
|
|
169
173
|
_mouseleave = (e) => {
|
|
174
|
+
this._mouseEvent = e;
|
|
170
175
|
this._mouseInRenderer = false;
|
|
171
176
|
// 鼠标离开事件
|
|
172
177
|
if (this._mousemoveEvent && this.hasEvent(this._mesh_on, ["mouseleave"])) {
|
|
173
178
|
this._mesh_on.dispatchEvent({
|
|
179
|
+
e: this._mouseEvent,
|
|
174
180
|
renderer: this._renderer,
|
|
175
181
|
camera: this._camera,
|
|
176
182
|
object: this._mesh_on,
|
|
@@ -200,6 +206,7 @@ export default class ThreeMouse {
|
|
|
200
206
|
};
|
|
201
207
|
// 鼠标按下事件
|
|
202
208
|
_mousedown = (e) => {
|
|
209
|
+
this._mouseEvent = e;
|
|
203
210
|
// 记录按下的位置
|
|
204
211
|
this._mouseDownPosition.set(e.offsetX, e.offsetY);
|
|
205
212
|
this._mousemove(e);
|
|
@@ -211,6 +218,7 @@ export default class ThreeMouse {
|
|
|
211
218
|
// 触发鼠标按下事件
|
|
212
219
|
if (this.hasEvent(this._mesh_Down, ["mousedown"])) {
|
|
213
220
|
this._mesh_Down.dispatchEvent({
|
|
221
|
+
e: this._mouseEvent,
|
|
214
222
|
...intersection,
|
|
215
223
|
renderer: this._renderer,
|
|
216
224
|
camera: this._camera,
|
|
@@ -225,6 +233,7 @@ export default class ThreeMouse {
|
|
|
225
233
|
};
|
|
226
234
|
// 鼠标弹起事件
|
|
227
235
|
_mouseup = debounce(async (e) => {
|
|
236
|
+
this._mouseEvent = e;
|
|
228
237
|
// 提取有事件的对象
|
|
229
238
|
const meshs = [];
|
|
230
239
|
let intersection = this._getSelected(this._object3ds);
|
|
@@ -234,6 +243,7 @@ export default class ThreeMouse {
|
|
|
234
243
|
this._mesh_on = intersection.object;
|
|
235
244
|
if (this.hasEvent(this._mesh_on, ["mouseup"])) {
|
|
236
245
|
this._mesh_on.dispatchEvent({
|
|
246
|
+
e: this._mouseEvent,
|
|
237
247
|
...intersection,
|
|
238
248
|
renderer: this._renderer,
|
|
239
249
|
camera: this._camera,
|
|
@@ -258,6 +268,7 @@ export default class ThreeMouse {
|
|
|
258
268
|
if (this._click_num === 1) {
|
|
259
269
|
if (this.hasEvent(this._mesh_Down, ["click"])) {
|
|
260
270
|
this._mesh_Down.dispatchEvent({
|
|
271
|
+
e: this._mouseEvent,
|
|
261
272
|
...intersection,
|
|
262
273
|
renderer: this._renderer,
|
|
263
274
|
camera: this._camera,
|
|
@@ -271,6 +282,7 @@ export default class ThreeMouse {
|
|
|
271
282
|
}
|
|
272
283
|
if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
|
|
273
284
|
this._mesh_Down.dispatchEvent({
|
|
285
|
+
e: this._mouseEvent,
|
|
274
286
|
...intersection,
|
|
275
287
|
renderer: this._renderer,
|
|
276
288
|
camera: this._camera,
|
|
@@ -284,6 +296,7 @@ export default class ThreeMouse {
|
|
|
284
296
|
}
|
|
285
297
|
if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
|
|
286
298
|
this._mesh_Down.dispatchEvent({
|
|
299
|
+
e: this._mouseEvent,
|
|
287
300
|
...intersection,
|
|
288
301
|
renderer: this._renderer,
|
|
289
302
|
camera: this._camera,
|
|
@@ -299,6 +312,7 @@ export default class ThreeMouse {
|
|
|
299
312
|
else if (this._click_num > 1) {
|
|
300
313
|
if (this.hasEvent(this._mesh_Down, ["dbclick"]) && (new Date().valueOf() - this._click_num > 1) && (e.button === 0)) {
|
|
301
314
|
this._mesh_Down.dispatchEvent({
|
|
315
|
+
e: this._mouseEvent,
|
|
302
316
|
...intersection,
|
|
303
317
|
renderer: this._renderer,
|
|
304
318
|
camera: this._camera,
|
|
@@ -315,6 +329,7 @@ export default class ThreeMouse {
|
|
|
315
329
|
else {
|
|
316
330
|
if (this.hasEvent(this._mesh_Down, ["click"])) {
|
|
317
331
|
this._mesh_Down.dispatchEvent({
|
|
332
|
+
e: this._mouseEvent,
|
|
318
333
|
...intersection,
|
|
319
334
|
renderer: this._renderer,
|
|
320
335
|
camera: this._camera,
|
|
@@ -328,6 +343,7 @@ export default class ThreeMouse {
|
|
|
328
343
|
}
|
|
329
344
|
if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
|
|
330
345
|
this._mesh_Down.dispatchEvent({
|
|
346
|
+
e: this._mouseEvent,
|
|
331
347
|
...intersection,
|
|
332
348
|
renderer: this._renderer,
|
|
333
349
|
camera: this._camera,
|
|
@@ -341,6 +357,7 @@ export default class ThreeMouse {
|
|
|
341
357
|
}
|
|
342
358
|
if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
|
|
343
359
|
this._mesh_Down.dispatchEvent({
|
|
360
|
+
e: this._mouseEvent,
|
|
344
361
|
...intersection,
|
|
345
362
|
renderer: this._renderer,
|
|
346
363
|
camera: this._camera,
|
package/ThreeMouse.ts
CHANGED
|
@@ -10,6 +10,7 @@ import type { Intersection } from "three";
|
|
|
10
10
|
import { debounce } from "lodash";
|
|
11
11
|
|
|
12
12
|
export interface ThreeMouseEvent extends Intersection {
|
|
13
|
+
e: MouseEvent;
|
|
13
14
|
renderer: THREE.Renderer;
|
|
14
15
|
camera: THREE.Camera;
|
|
15
16
|
type: string;
|
|
@@ -72,6 +73,9 @@ export default class ThreeMouse {
|
|
|
72
73
|
// 鼠标滑动的事件
|
|
73
74
|
_mousemoveEvent?: MouseEvent;
|
|
74
75
|
|
|
76
|
+
// 鼠标事件
|
|
77
|
+
_mouseEvent?: MouseEvent;
|
|
78
|
+
|
|
75
79
|
// 需要被拾取的对象数组
|
|
76
80
|
_object3ds: Object3D[] = [];
|
|
77
81
|
|
|
@@ -154,6 +158,7 @@ export default class ThreeMouse {
|
|
|
154
158
|
const { face, object } = intersection;
|
|
155
159
|
// face && face.normal.applyMatrix4(object.matrixWorld);
|
|
156
160
|
const MouseEvent: ThreeMouseEvent = Object.assign(intersection, { // 将来可能用到的对象
|
|
161
|
+
e: this._mousemoveEvent,
|
|
157
162
|
renderer: this._renderer,
|
|
158
163
|
camera: this._camera,
|
|
159
164
|
object: intersection.object,
|
|
@@ -200,6 +205,7 @@ export default class ThreeMouse {
|
|
|
200
205
|
if (this.hasEvent(this._mesh_on, ["mouseleave"])) {
|
|
201
206
|
// 鼠标离开事件
|
|
202
207
|
this._mesh_on!.dispatchEvent({
|
|
208
|
+
e: this._mouseEvent,
|
|
203
209
|
renderer: this._renderer,
|
|
204
210
|
camera: this._camera,
|
|
205
211
|
object: this._mesh_on as Object3D,
|
|
@@ -222,11 +228,13 @@ export default class ThreeMouse {
|
|
|
222
228
|
|
|
223
229
|
// 鼠标离开事件
|
|
224
230
|
_mouseleave = (e: MouseEvent) => {
|
|
231
|
+
this._mouseEvent = e;
|
|
225
232
|
this._mouseInRenderer = false;
|
|
226
233
|
|
|
227
234
|
// 鼠标离开事件
|
|
228
235
|
if (this._mousemoveEvent && this.hasEvent(this._mesh_on, ["mouseleave"])) {
|
|
229
236
|
this._mesh_on!.dispatchEvent({
|
|
237
|
+
e: this._mouseEvent,
|
|
230
238
|
renderer: this._renderer,
|
|
231
239
|
camera: this._camera,
|
|
232
240
|
object: this._mesh_on as Object3D,
|
|
@@ -266,6 +274,7 @@ export default class ThreeMouse {
|
|
|
266
274
|
|
|
267
275
|
// 鼠标按下事件
|
|
268
276
|
_mousedown = (e: MouseEvent) => {
|
|
277
|
+
this._mouseEvent = e;
|
|
269
278
|
// 记录按下的位置
|
|
270
279
|
this._mouseDownPosition.set(e.offsetX, e.offsetY);
|
|
271
280
|
|
|
@@ -283,6 +292,7 @@ export default class ThreeMouse {
|
|
|
283
292
|
if (this.hasEvent(this._mesh_Down, ["mousedown"])) {
|
|
284
293
|
|
|
285
294
|
this._mesh_Down.dispatchEvent({
|
|
295
|
+
e: this._mouseEvent,
|
|
286
296
|
...intersection,
|
|
287
297
|
renderer: this._renderer,
|
|
288
298
|
camera: this._camera,
|
|
@@ -300,7 +310,7 @@ export default class ThreeMouse {
|
|
|
300
310
|
|
|
301
311
|
// 鼠标弹起事件
|
|
302
312
|
_mouseup = debounce(async (e: PointerEvent) => {
|
|
303
|
-
|
|
313
|
+
this._mouseEvent = e;
|
|
304
314
|
// 提取有事件的对象
|
|
305
315
|
const meshs: Object3D[] = [];
|
|
306
316
|
|
|
@@ -315,6 +325,7 @@ export default class ThreeMouse {
|
|
|
315
325
|
if (this.hasEvent(this._mesh_on, ["mouseup"])) {
|
|
316
326
|
|
|
317
327
|
this._mesh_on.dispatchEvent({
|
|
328
|
+
e: this._mouseEvent,
|
|
318
329
|
...intersection,
|
|
319
330
|
renderer: this._renderer,
|
|
320
331
|
camera: this._camera,
|
|
@@ -347,6 +358,7 @@ export default class ThreeMouse {
|
|
|
347
358
|
|
|
348
359
|
if (this.hasEvent(this._mesh_Down, ["click"])) {
|
|
349
360
|
this._mesh_Down.dispatchEvent({
|
|
361
|
+
e: this._mouseEvent,
|
|
350
362
|
...intersection,
|
|
351
363
|
renderer: this._renderer,
|
|
352
364
|
camera: this._camera,
|
|
@@ -361,6 +373,7 @@ export default class ThreeMouse {
|
|
|
361
373
|
|
|
362
374
|
if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
|
|
363
375
|
this._mesh_Down.dispatchEvent({
|
|
376
|
+
e: this._mouseEvent,
|
|
364
377
|
...intersection,
|
|
365
378
|
renderer: this._renderer,
|
|
366
379
|
camera: this._camera,
|
|
@@ -375,6 +388,7 @@ export default class ThreeMouse {
|
|
|
375
388
|
|
|
376
389
|
if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
|
|
377
390
|
this._mesh_Down.dispatchEvent({
|
|
391
|
+
e: this._mouseEvent,
|
|
378
392
|
...intersection,
|
|
379
393
|
renderer: this._renderer,
|
|
380
394
|
camera: this._camera,
|
|
@@ -392,6 +406,7 @@ export default class ThreeMouse {
|
|
|
392
406
|
if (this.hasEvent(this._mesh_Down, ["dbclick"]) && (new Date().valueOf() - this._click_num > 1) && (e.button === 0)) {
|
|
393
407
|
|
|
394
408
|
this._mesh_Down.dispatchEvent({
|
|
409
|
+
e: this._mouseEvent,
|
|
395
410
|
...intersection,
|
|
396
411
|
renderer: this._renderer,
|
|
397
412
|
camera: this._camera,
|
|
@@ -411,6 +426,7 @@ export default class ThreeMouse {
|
|
|
411
426
|
|
|
412
427
|
if (this.hasEvent(this._mesh_Down, ["click"])) {
|
|
413
428
|
this._mesh_Down.dispatchEvent({
|
|
429
|
+
e: this._mouseEvent,
|
|
414
430
|
...intersection,
|
|
415
431
|
renderer: this._renderer,
|
|
416
432
|
camera: this._camera,
|
|
@@ -425,6 +441,7 @@ export default class ThreeMouse {
|
|
|
425
441
|
|
|
426
442
|
if (this.hasEvent(this._mesh_Down, ["leftclick"]) && (e.button === 0)) {
|
|
427
443
|
this._mesh_Down.dispatchEvent({
|
|
444
|
+
e: this._mouseEvent,
|
|
428
445
|
...intersection,
|
|
429
446
|
renderer: this._renderer,
|
|
430
447
|
camera: this._camera,
|
|
@@ -439,6 +456,7 @@ export default class ThreeMouse {
|
|
|
439
456
|
|
|
440
457
|
if (this.hasEvent(this._mesh_Down, ["rightclick"]) && (e.button === 2)) {
|
|
441
458
|
this._mesh_Down.dispatchEvent({
|
|
459
|
+
e: this._mouseEvent,
|
|
442
460
|
...intersection,
|
|
443
461
|
renderer: this._renderer,
|
|
444
462
|
camera: this._camera,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "three-base",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.79",
|
|
4
4
|
"description": "three 3d three-base",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"apng-js": "^1",
|
|
40
40
|
"lodash": "^4",
|
|
41
|
-
"@types/three": "
|
|
42
|
-
"three": "
|
|
41
|
+
"@types/three": "0.167.0",
|
|
42
|
+
"three": "0.167.0",
|
|
43
43
|
"dexie": "^3",
|
|
44
44
|
"vite": "*",
|
|
45
45
|
"html2canvas": "^1.4.1"
|