three-base 2.0.71 → 2.0.73

package/InstancedMeshBase.d.ts

@@ -13,20 +13,20 @@ export default class InstancedMeshBase extends MeshBase {
     static _scale: Vector3;
     static _rotation: Euler;
     static _Quaternion: Quaternion;
-    static matrix: Matrix4;
+    static _matrix: Matrix4;
     instanceMatrix: InstancedBufferAttribute;
     instanceColor: InstancedBufferAttribute;
     loadModel(url: string, filename?: string): Promise<void>;
     computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
-    setCount(count?: number): void;
-    setMatrixAt(index: number, matrix: Matrix4): void;
+    setCount(count?: number): Promise<void>;
+    setMatrixAt(index: number, matrix: Matrix4): Promise<void>;
     setTRS(index: number, { position, rotation, scale }: {
         position?: Vector3;
         rotation?: Euler;
         scale?: Vector3;
-    }): void;
-    setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined): void;
+    }): Promise<void>;
+    setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined): Promise<void>;
     updateMatrixWorld(force?: boolean): void;
-    addEventListener(name: string, callback: (e: any) => void): void;
+    addEventListener(name: string, callback: (e: any) => void): Promise<void>;
     removeEventListener(name: string, callback: (e: any) => void): void;
 }

package/InstancedMeshBase.js

@@ -24,7 +24,7 @@ export default class InstancedMeshBase extends MeshBase {
     static _scale = new Vector3(1, 1, 1);
     static _rotation = new Euler();
     static _Quaternion = new Quaternion();
-    static matrix = new Matrix4();
+    static _matrix = new Matrix4();
     instanceMatrix = new InstancedBufferAttribute(new Float32Array(0 * 16), 16);
     instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
     // 重构加载模型的方法
@@ -111,16 +111,19 @@ export default class InstancedMeshBase extends MeshBase {
     }
     // 更新包围盒
     computeBoundingSphere = throttle(() => {
-        this.traverse(m => {
-            if (m !== this) {
-                m.computeBoundingSphere();
-            }
+        this.children.map(instancedMesh => {
+            instancedMesh.computeBoundingSphere();
         });
     }, 1000);
     //初始实例矩阵的数量
-    setCount(count = 0) {
+    async setCount(count = 0) {
+        await this.awaitLoaded();
         const instanceMatrix = new InstancedBufferAttribute(new Float32Array(count * 16), 16);
         const instanceColor = new InstancedBufferAttribute(new Float32Array(count * 3).fill(1), 3);
+        for (let i = 0; i < count; i++) {
+            instanceMatrix.set(InstancedMeshBase._matrix.identity().toArray(), i);
+            instanceColor.set([1, 1, 1], i);
+        }
         for (let i = 0; i < this.count; i++) {
             instanceMatrix.copyAt(i, this.instanceMatrix, i);
             instanceColor.copyAt(i, this.instanceColor, i);
@@ -141,44 +144,47 @@ export default class InstancedMeshBase extends MeshBase {
         });
     }
     // 设置矩阵
-    setMatrixAt(index, matrix) {
+    async setMatrixAt(index, matrix) {
+        await this.awaitLoaded();
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid];
             const collect = this.meshCollect[uuid];
             collect.forEach((mesh, i) => {
-                InstancedMeshBase.matrix.copy(mesh.matrix);
-                InstancedMeshBase.matrix.premultiply(matrix);
-                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase.matrix);
+                InstancedMeshBase._matrix.copy(mesh.matrix);
+                InstancedMeshBase._matrix.premultiply(matrix);
+                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
                 instancedMesh.instanceMatrix.needsUpdate = true;
             });
         });
         this.computeBoundingSphere();
     }
     //设置移动旋转缩放
-    setTRS(index, { position = InstancedMeshBase._position, rotation = InstancedMeshBase._rotation, scale = InstancedMeshBase._scale }) {
+    async setTRS(index, { position = InstancedMeshBase._position, rotation = InstancedMeshBase._rotation, scale = InstancedMeshBase._scale }) {
+        await this.awaitLoaded();
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid];
             const collect = this.meshCollect[uuid];
             collect.forEach((mesh, i) => {
                 //获取对应的模型的矩阵
-                instancedMesh.getMatrixAt(collect.length * index + i, InstancedMeshBase.matrix);
-                InstancedMeshBase.matrix.premultiply(mesh.matrix.clone().invert());
-                InstancedMeshBase.matrix.decompose(InstancedMeshBase._position, InstancedMeshBase._Quaternion, InstancedMeshBase._scale);
+                instancedMesh.getMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
+                InstancedMeshBase._matrix.premultiply(mesh.matrix.clone().invert());
+                InstancedMeshBase._matrix.decompose(InstancedMeshBase._position, InstancedMeshBase._Quaternion, InstancedMeshBase._scale);
                 InstancedMeshBase._rotation.setFromQuaternion(InstancedMeshBase._Quaternion);
                 InstancedMeshBase._position.copy(position);
                 InstancedMeshBase._rotation.copy(rotation);
                 InstancedMeshBase._scale.copy(scale);
                 InstancedMeshBase._Quaternion.setFromEuler(InstancedMeshBase._rotation);
-                InstancedMeshBase.matrix.compose(InstancedMeshBase._position, InstancedMeshBase._Quaternion, InstancedMeshBase._scale);
-                InstancedMeshBase.matrix.premultiply(mesh.matrix);
-                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase.matrix);
+                InstancedMeshBase._matrix.compose(InstancedMeshBase._position, InstancedMeshBase._Quaternion, InstancedMeshBase._scale);
+                InstancedMeshBase._matrix.premultiply(mesh.matrix);
+                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
                 instancedMesh.instanceMatrix.needsUpdate = true;
             });
         });
         this.computeBoundingSphere();
     }
     // 设置颜色
-    setColorAt(index, color) {
+    async setColorAt(index, color) {
+        await this.awaitLoaded();
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid];
             const collect = this.meshCollect[uuid];
@@ -200,7 +206,8 @@ export default class InstancedMeshBase extends MeshBase {
         });
     }
     // 事件监听
-    addEventListener(name, callback) {
+    async addEventListener(name, callback) {
+        await this.awaitLoaded();
         super.addEventListener(name, callback);
         this.children.map(mesh => {
             mesh.addEventListener(name, callback);

package/InstancedMeshBase.ts

@@ -35,7 +35,7 @@ export default class InstancedMeshBase extends MeshBase {
     static _scale: Vector3 = new Vector3(1, 1, 1);
     static _rotation: Euler = new Euler();
     static _Quaternion: Quaternion = new Quaternion();
-    static matrix = new Matrix4()
+    static _matrix = new Matrix4()
 
     instanceMatrix = new InstancedBufferAttribute(new Float32Array(0 * 16), 16);
 
@@ -146,22 +146,25 @@ export default class InstancedMeshBase extends MeshBase {
 
     }
 
-
     // 更新包围盒
     computeBoundingSphere = throttle(() => {
-        this.traverse(m => {
-            if (m !== this) {
-                (m as InstancedMesh).computeBoundingSphere();
-            }
-        })
+        this.children.map(instancedMesh => {
+            instancedMesh.computeBoundingSphere();
+        });
     }, 1000)
 
     //初始实例矩阵的数量
-    setCount(count: number = 0) {
+    async setCount(count: number = 0) {
+        await this.awaitLoaded();
 
         const instanceMatrix = new InstancedBufferAttribute(new Float32Array(count * 16), 16);
         const instanceColor = new InstancedBufferAttribute(new Float32Array(count * 3).fill(1), 3);
 
+        for (let i = 0; i < count; i++) {
+            instanceMatrix.set(InstancedMeshBase._matrix.identity().toArray(), i);
+            instanceColor.set([1, 1, 1], i);
+        }
+
         for (let i = 0; i < this.count; i++) {
             instanceMatrix.copyAt(i, this.instanceMatrix, i);
             instanceColor.copyAt(i, this.instanceColor, i);
@@ -189,15 +192,17 @@ export default class InstancedMeshBase extends MeshBase {
     }
 
     // 设置矩阵
-    setMatrixAt(index: number, matrix: Matrix4) {
+    async setMatrixAt(index: number, matrix: Matrix4) {
+        await this.awaitLoaded();
+
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid]
             const collect = this.meshCollect[uuid]
             collect.forEach((mesh: Mesh, i: number) => {
-                InstancedMeshBase.matrix.copy(mesh.matrix)
-                InstancedMeshBase.matrix.premultiply(matrix)
+                InstancedMeshBase._matrix.copy(mesh.matrix)
+                InstancedMeshBase._matrix.premultiply(matrix)
 
-                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase.matrix);
+                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
                 instancedMesh.instanceMatrix.needsUpdate = true;
             })
         })
@@ -206,7 +211,7 @@ export default class InstancedMeshBase extends MeshBase {
     }
 
     //设置移动旋转缩放
-    setTRS(
+    async setTRS(
         index: number,
         {
             position = InstancedMeshBase._position,
@@ -218,17 +223,19 @@ export default class InstancedMeshBase extends MeshBase {
             scale?: Vector3
         }
     ) {
+        await this.awaitLoaded();
+
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid]
             const collect = this.meshCollect[uuid]
             collect.forEach((mesh: Mesh, i: number) => {
 
                 //获取对应的模型的矩阵
-                instancedMesh.getMatrixAt(collect.length * index + i, InstancedMeshBase.matrix);
+                instancedMesh.getMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
 
-                InstancedMeshBase.matrix.premultiply(mesh.matrix.clone().invert());
+                InstancedMeshBase._matrix.premultiply(mesh.matrix.clone().invert());
 
-                InstancedMeshBase.matrix.decompose(
+                InstancedMeshBase._matrix.decompose(
                     InstancedMeshBase._position,
                     InstancedMeshBase._Quaternion,
                     InstancedMeshBase._scale
@@ -239,15 +246,15 @@ export default class InstancedMeshBase extends MeshBase {
                 InstancedMeshBase._scale.copy(scale);
                 InstancedMeshBase._Quaternion.setFromEuler(InstancedMeshBase._rotation);
 
-                InstancedMeshBase.matrix.compose(
+                InstancedMeshBase._matrix.compose(
                     InstancedMeshBase._position,
                     InstancedMeshBase._Quaternion,
                     InstancedMeshBase._scale
                 );
 
-                InstancedMeshBase.matrix.premultiply(mesh.matrix);
+                InstancedMeshBase._matrix.premultiply(mesh.matrix);
 
-                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase.matrix);
+                instancedMesh.setMatrixAt(collect.length * index + i, InstancedMeshBase._matrix);
                 instancedMesh.instanceMatrix.needsUpdate = true;
             })
         })
@@ -256,7 +263,9 @@ export default class InstancedMeshBase extends MeshBase {
     }
 
     // 设置颜色
-    setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined) {
+    async setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined) {
+        await this.awaitLoaded();
+
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid]
             const collect = this.meshCollect[uuid]
@@ -280,7 +289,9 @@ export default class InstancedMeshBase extends MeshBase {
     }
 
     // 事件监听
-    addEventListener(name: string, callback: (e: any) => void) {
+    async addEventListener(name: string, callback: (e: any) => void) {
+        await this.awaitLoaded();
+
         super.addEventListener(name, callback);
         this.children.map(mesh => {
             mesh.addEventListener(name, callback);

package/ThreeBase.d.ts

@@ -19,6 +19,7 @@ export default class ThreeBase extends EventDispatcher {
     setCameraType(cameraType: "perspectiveCamera" | "orthographicCamera"): void;
     getCamera(): PerspectiveCamera | OrthographicCamera;
     scene: Scene;
+    add(...object: Object3D[]): this;
     threeMouse: ThreeMouse;
     controls: OrbitControls;
     setContainer(div: HTMLDivElement | null): Promise<void>;

package/ThreeBase.js

@@ -84,7 +84,7 @@ export default class ThreeBase extends EventDispatcher {
     perspectiveCamera = new PerspectiveCamera(45, 1, 0.01, 10000);
     //正交相机
     orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0.01, 10000);
-    //相机的类型
+    //相机的类型 有透视相机和正交相机
     cameraType = "perspectiveCamera";
     setCameraType(cameraType) {
         if (this.cameraType !== cameraType) {
@@ -101,14 +101,22 @@ export default class ThreeBase extends EventDispatcher {
     }
     //获取当前使用的的相机
     getCamera() {
-        //判断需要使用那个相机
-        const camera = ((this.cameraType === "perspectiveCamera") ?
-            this.perspectiveCamera :
-            this.orthographicCamera);
-        return camera;
+        switch (this.cameraType) {
+            case "orthographicCamera":
+                return this.orthographicCamera;
+            case "perspectiveCamera":
+            default:
+                return this.perspectiveCamera;
+        }
     }
     // 场景对象
     scene = new Scene();
+    // 这个方法等效 this.scene.add
+    // 想少写2个字母就用这个方法
+    add(...object) {
+        this.scene.add(...object);
+        return this;
+    }
     ///鼠标事件对象
     threeMouse = new ThreeMouse(this.renderer, this.perspectiveCamera, this.scene);
     // 轨道控制器

package/ThreeBase.ts

@@ -99,7 +99,7 @@ export default class ThreeBase extends EventDispatcher {
     //正交相机
     orthographicCamera = new OrthographicCamera(- 1, 1, 1, - 1, 0.01, 10000);
 
-    //相机的类型
+    //相机的类型 有透视相机和正交相机
     cameraType: "perspectiveCamera" | "orthographicCamera" = "perspectiveCamera";
     setCameraType(cameraType: "perspectiveCamera" | "orthographicCamera") {
         if (this.cameraType !== cameraType) {
@@ -115,16 +115,25 @@ export default class ThreeBase extends EventDispatcher {
     }
     //获取当前使用的的相机
     getCamera() {
-        //判断需要使用那个相机
-        const camera = ((this.cameraType === "perspectiveCamera") ?
-            this.perspectiveCamera :
-            this.orthographicCamera);
-        return camera;
+        switch (this.cameraType) {
+            case "orthographicCamera":
+                return this.orthographicCamera;
+            case "perspectiveCamera":
+            default:
+                return this.perspectiveCamera;
+        }
     }
 
     // 场景对象
     scene = new Scene();
 
+    // 这个方法等效 this.scene.add
+    // 想少写2个字母就用这个方法
+    add(...object: Object3D[]) {
+        this.scene.add(...object);
+        return this;
+    }
+
     ///鼠标事件对象
     threeMouse = new ThreeMouse(this.renderer, this.perspectiveCamera, this.scene);
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "2.0.71",
+    "version": "2.0.73",
     "description": "three 3d three-base",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"