three-base 2.0.67 → 2.0.69

package/InstancedMeshBase.js

@@ -1,190 +1,217 @@
-/*
- * @Author: xiaosihan
- * @Date: 2024-02-05 09:31:57
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-06-07 22:14:53
- */
-import { throttle } from "lodash";
-import { InstancedBufferAttribute, InstancedMesh, Matrix4, Vector3 } from "three";
-import MeshBase from "./MeshBase";
-import threeUtils from "./threeUtils";
-import threeLoader from "./threeLoader";
-// 实例模型组对象
-export default class InstancedMeshBase extends MeshBase {
-    constructor(url) {
-        super(url);
-    }
-    url = "";
-    isInstancedGroupMesh = true;
-    count = 0;
-    size = new Vector3(1, 1, 1);
-    meshCollect = {};
-    instanceCollect = {};
-    colorMap = new Map();
-    static matrix = new Matrix4();
-    instanceMatrix = new InstancedBufferAttribute(new Float32Array(0 * 16), 16);
-    instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
-    // 重构加载模型的方法
-    async loadModel(url, filename = "") {
-        if (!url) {
-            this.clear();
-            return;
-        }
-        this.loaded = false;
-        // 没有模型并且没有加载任务时就去加载模型
-        if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
-            MeshBase.loadModeling.set(url, true);
-            // 万能加载器
-            let modal = await threeLoader.loadModel(url, filename);
-            threeUtils.center(modal);
-            threeUtils.alignBottom(modal);
-            modal.updateMatrixWorld(true);
-            MeshBase.models.set(url, modal);
-            MeshBase.loadModeling.set(url, false);
-        }
-        // 如果模型还在加载中, 就等待模型加载完成
-        do {
-            await new Promise(resolve => setTimeout(resolve, 50));
-        } while (MeshBase.loadModeling.get(url));
-        if (MeshBase.models.get(url)) {
-            this.clear();
-            const mesh = MeshBase.models.get(url);
-            // // 判断是否有动画
-            // this.hasAnimation = mesh.animations.length > 0;
-            // if (this.hasAnimation) {
-            //     const model = SkeletonUtils.clone(mesh);
-            //     this.mixer = new AnimationMixer(model);
-            //     this.animationActions = {};
-            //     mesh.animations.map(animation => {
-            //         const animationAction = this.mixer!.clipAction(animation).play();
-            //         animationAction.weight = 0;
-            //         this.animationActions[animation.name] = animationAction;
-            //     });
-            //     this.add(model);
-            // } else {
-            //     this.add(mesh.clone(true));
-            // }
-            this.size.copy(threeUtils.getSize(mesh));
-            const { meshCollect, instanceCollect } = this;
-            mesh.updateMatrixWorld(true);
-            // collect all mesh counts, in case there are more than one copy of the same mesh in this group
-            mesh.traverse((obj) => {
-                const mesh = obj;
-                if (mesh.isMesh) {
-                    mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
-                    mesh.rotation.setFromQuaternion(mesh.quaternion);
-                    mesh.updateMatrix();
-                    // same geometry and same material consider as the same mesh
-                    const uuid = mesh.geometry.uuid + '/' + mesh.material.uuid;
-                    if (meshCollect[uuid]) {
-                        meshCollect[uuid].push(mesh);
-                    }
-                    else {
-                        meshCollect[uuid] = [mesh];
-                    }
-                }
-                else {
-                    obj.position.set(0, 0, 0);
-                    obj.scale.set(1, 1, 1);
-                    obj.rotation.set(0, 0, 0);
-                }
-            });
-            // create all instances
-            Object.keys(meshCollect).forEach(uuid => {
-                const meshes = meshCollect[uuid];
-                const mesh = meshes[0];
-                const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * this.count);
-                instancedMesh.name = mesh.name;
-                instancedMesh.frustumCulled = false;
-                instanceCollect[uuid] = instancedMesh;
-                this.add(instancedMesh);
-            });
-            // 加载完成事件
-            await new Promise(resolve => setTimeout(resolve, 100));
-            // 加载完成事件
-            this.dispatchEvent({ type: "loaded" });
-            this.loaded = true;
-        }
-    }
-    // 更新包围盒
-    computeBoundingSphere = throttle(() => {
-        this.traverse(m => {
-            if (m !== this) {
-                m.computeBoundingSphere();
-            }
-        });
-    }, 1000);
-    //初始实例矩阵的数量
-    setCount(count = 0) {
-        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 < this.count; i++) {
-            instanceMatrix.copyAt(i, this.instanceMatrix, i);
-            instanceColor.copyAt(i, this.instanceColor, i);
-        }
-        this.instanceMatrix = instanceMatrix;
-        this.instanceColor = instanceColor;
-        this.count = count;
-        this.children.map((instanceMesh) => {
-            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 < instanceMesh.count; i++) {
-                instanceMatrix.copyAt(i, this.instanceMatrix, i);
-                instanceColor.copyAt(i, this.instanceColor, i);
-            }
-            instanceMesh.instanceMatrix = instanceMatrix;
-            instanceMesh.instanceColor = instanceColor;
-            instanceMesh.count = count;
-        });
-    }
-    // 设置矩阵
-    setMatrixAt(index, matrix) {
-        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);
-                instancedMesh.instanceMatrix.needsUpdate = true;
-            });
-        });
-        this.computeBoundingSphere();
-    }
-    // 设置颜色
-    setColorAt(index, color) {
-        Object.keys(this.meshCollect).forEach(uuid => {
-            const instancedMesh = this.instanceCollect[uuid];
-            const collect = this.meshCollect[uuid];
-            collect.forEach((mesh, i) => {
-                const c = color(instancedMesh);
-                if (c) {
-                    instancedMesh.setColorAt(collect.length * index + i, c);
-                    instancedMesh.instanceColor.needsUpdate = true;
-                }
-            });
-        });
-    }
-    // 同步属性
-    updateMatrixWorld(force) {
-        super.updateMatrixWorld(force);
-        const { cursor, enableEvent } = this.userData;
-        this.traverse(obj => {
-            Object.assign(obj.userData, { cursor, enableEvent });
-        });
-    }
-    // 事件监听
-    addEventListener(name, callback) {
-        super.addEventListener(name, callback);
-        this.children.map(mesh => {
-            mesh.addEventListener(name, callback);
-        });
-    }
-    // 取消事件的监听
-    removeEventListener(name, callback) {
-        super.removeEventListener(name, callback);
-        this.children.map(mesh => {
-            mesh.removeEventListener(name, callback);
-        });
-    }
-}
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-02-05 09:31:57
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-06-07 22:14:53
+ */
+import { throttle } from "lodash";
+import { Euler, InstancedBufferAttribute, InstancedMesh, Matrix4, Quaternion, Vector3 } from "three";
+import MeshBase from "./MeshBase";
+import threeUtils from "./threeUtils";
+import threeLoader from "./threeLoader";
+// 实例模型组对象
+export default class InstancedMeshBase extends MeshBase {
+    constructor(url) {
+        super(url);
+    }
+    url = "";
+    isInstancedGroupMesh = true;
+    count = 0;
+    size = new Vector3(1, 1, 1);
+    meshCollect = {};
+    instanceCollect = {};
+    colorMap = new Map();
+    static _position = new Vector3();
+    static _scale = new Vector3(1, 1, 1);
+    static _rotation = new Euler();
+    static _Quaternion = new Quaternion();
+    static matrix = new Matrix4();
+    instanceMatrix = new InstancedBufferAttribute(new Float32Array(0 * 16), 16);
+    instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
+    // 重构加载模型的方法
+    async loadModel(url, filename = "") {
+        if (!url) {
+            this.clear();
+            return;
+        }
+        this.url = url;
+        this.loaded = false;
+        // 没有模型并且没有加载任务时就去加载模型
+        if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
+            MeshBase.loadModeling.set(url, true);
+            // 万能加载器
+            let modal = await threeLoader.loadModel(url, filename);
+            threeUtils.center(modal);
+            modal.updateMatrixWorld(true);
+            MeshBase.models.set(url, modal);
+            MeshBase.loadModeling.set(url, false);
+        }
+        // 如果模型还在加载中, 就等待模型加载完成
+        do {
+            await new Promise(resolve => setTimeout(resolve, 50));
+        } while (MeshBase.loadModeling.get(url));
+        if (MeshBase.models.get(url)) {
+            this.clear();
+            const mesh = MeshBase.models.get(url);
+            // // 判断是否有动画
+            // this.hasAnimation = mesh.animations.length > 0;
+            // if (this.hasAnimation) {
+            //     const model = SkeletonUtils.clone(mesh);
+            //     this.mixer = new AnimationMixer(model);
+            //     this.animationActions = {};
+            //     mesh.animations.map(animation => {
+            //         const animationAction = this.mixer!.clipAction(animation).play();
+            //         animationAction.weight = 0;
+            //         this.animationActions[animation.name] = animationAction;
+            //     });
+            //     this.add(model);
+            // } else {
+            //     this.add(mesh.clone(true));
+            // }
+            this.size.copy(threeUtils.getSize(mesh));
+            const { meshCollect, instanceCollect } = this;
+            mesh.updateMatrixWorld(true);
+            // collect all mesh counts, in case there are more than one copy of the same mesh in this group
+            mesh.traverse((obj) => {
+                const mesh = obj;
+                if (mesh.isMesh) {
+                    mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
+                    mesh.rotation.setFromQuaternion(mesh.quaternion);
+                    mesh.updateMatrix();
+                    // same geometry and same material consider as the same mesh
+                    const uuid = mesh.geometry.uuid + '/' + mesh.material.uuid;
+                    if (meshCollect[uuid]) {
+                        meshCollect[uuid].push(mesh);
+                    }
+                    else {
+                        meshCollect[uuid] = [mesh];
+                    }
+                }
+                else {
+                    obj.position.set(0, 0, 0);
+                    obj.scale.set(1, 1, 1);
+                    obj.rotation.set(0, 0, 0);
+                }
+            });
+            // create all instances
+            Object.keys(meshCollect).forEach(uuid => {
+                const meshes = meshCollect[uuid];
+                const mesh = meshes[0];
+                const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * this.count);
+                instancedMesh.name = mesh.name;
+                instancedMesh.frustumCulled = false;
+                instanceCollect[uuid] = instancedMesh;
+                this.add(instancedMesh);
+            });
+            // 加载完成事件
+            await new Promise(resolve => setTimeout(resolve, 100));
+            // 加载完成事件
+            this.dispatchEvent({ type: "loaded" });
+            this.loaded = true;
+        }
+    }
+    // 更新包围盒
+    computeBoundingSphere = throttle(() => {
+        this.traverse(m => {
+            if (m !== this) {
+                m.computeBoundingSphere();
+            }
+        });
+    }, 1000);
+    //初始实例矩阵的数量
+    setCount(count = 0) {
+        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 < this.count; i++) {
+            instanceMatrix.copyAt(i, this.instanceMatrix, i);
+            instanceColor.copyAt(i, this.instanceColor, i);
+        }
+        this.instanceMatrix = instanceMatrix;
+        this.instanceColor = instanceColor;
+        this.count = count;
+        this.children.map((instanceMesh) => {
+            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 < instanceMesh.count; i++) {
+                instanceMatrix.copyAt(i, this.instanceMatrix, i);
+                instanceColor.copyAt(i, this.instanceColor, i);
+            }
+            instanceMesh.instanceMatrix = instanceMatrix;
+            instanceMesh.instanceColor = instanceColor;
+            instanceMesh.count = count;
+        });
+    }
+    // 设置矩阵
+    setMatrixAt(index, matrix) {
+        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);
+                instancedMesh.instanceMatrix.needsUpdate = true;
+            });
+        });
+        this.computeBoundingSphere();
+    }
+    //设置移动旋转缩放
+    setTRS(index, { position = InstancedMeshBase._position, rotation = InstancedMeshBase._rotation, scale = InstancedMeshBase._scale }) {
+        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);
+                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);
+                instancedMesh.instanceMatrix.needsUpdate = true;
+            });
+        });
+        this.computeBoundingSphere();
+    }
+    // 设置颜色
+    setColorAt(index, color) {
+        Object.keys(this.meshCollect).forEach(uuid => {
+            const instancedMesh = this.instanceCollect[uuid];
+            const collect = this.meshCollect[uuid];
+            collect.forEach((mesh, i) => {
+                const c = color(instancedMesh);
+                if (c) {
+                    instancedMesh.setColorAt(collect.length * index + i, c);
+                    instancedMesh.instanceColor.needsUpdate = true;
+                }
+            });
+        });
+    }
+    // 同步属性
+    updateMatrixWorld(force) {
+        super.updateMatrixWorld(force);
+        const { cursor, enableEvent } = this.userData;
+        this.traverse(obj => {
+            Object.assign(obj.userData, { cursor, enableEvent });
+        });
+    }
+    // 事件监听
+    addEventListener(name, callback) {
+        super.addEventListener(name, callback);
+        this.children.map(mesh => {
+            mesh.addEventListener(name, callback);
+        });
+    }
+    // 取消事件的监听
+    removeEventListener(name, callback) {
+        super.removeEventListener(name, callback);
+        this.children.map(mesh => {
+            mesh.removeEventListener(name, callback);
+        });
+    }
+}

package/InstancedMeshBase.ts

@@ -6,7 +6,7 @@
  */
 
 import { throttle } from "lodash";
-import { Color, InstancedBufferAttribute, InstancedMesh, Material, Matrix4, Mesh, Object3D, Vector3 } from "three";
+import { Color, Euler, InstancedBufferAttribute, InstancedMesh, Material, Matrix4, Mesh, Object3D, Quaternion, Vector3 } from "three";
 import MeshBase from "./MeshBase";
 import threeUtils from "./threeUtils";
 import threeLoader from "./threeLoader";
@@ -33,6 +33,10 @@ export default class InstancedMeshBase extends MeshBase {
 
     declare children: InstancedMesh[];
 
+    static _position: Vector3 = new Vector3();
+    static _scale: Vector3 = new Vector3(1, 1, 1);
+    static _rotation: Euler = new Euler();
+    static _Quaternion: Quaternion = new Quaternion();
     static matrix = new Matrix4()
 
     instanceMatrix = new InstancedBufferAttribute(new Float32Array(0 * 16), 16);
@@ -46,6 +50,8 @@ export default class InstancedMeshBase extends MeshBase {
             return;
         }
 
+        this.url = url;
+
         this.loaded = false;
 
         // 没有模型并且没有加载任务时就去加载模型
@@ -56,7 +62,6 @@ export default class InstancedMeshBase extends MeshBase {
             let modal = await threeLoader.loadModel(url, filename);
 
             threeUtils.center(modal);
-            threeUtils.alignBottom(modal);
             modal.updateMatrixWorld(true);
 
             MeshBase.models.set(url, modal);
@@ -201,6 +206,56 @@ export default class InstancedMeshBase extends MeshBase {
         this.computeBoundingSphere();
     }
 
+    //设置移动旋转缩放
+    setTRS(
+        index: number,
+        {
+            position = InstancedMeshBase._position,
+            rotation = InstancedMeshBase._rotation,
+            scale = InstancedMeshBase._scale
+        }: {
+            position?: Vector3;
+            rotation?: Euler;
+            scale?: Vector3
+        }
+    ) {
+        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);
+
+                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);
+                instancedMesh.instanceMatrix.needsUpdate = true;
+            })
+        })
+
+        this.computeBoundingSphere();
+    }
+
     // 设置颜色
     setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined) {
         Object.keys(this.meshCollect).forEach(uuid => {

package/KeyFrameAnimation.d.ts

@@ -1,25 +1,25 @@
-import { Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
-export type Keyframe = {
-    position: Vector3;
-    scale: Vector3;
-    rotation: Euler;
-    timeTemp: number;
-};
-export type KeyframeAnimationProps = {
-    speedScale?: number;
-    object3d: Object3D;
-    keyframes: Array<Keyframe>;
-};
-export default class KeyframeAnimation extends Object3D {
-    constructor(props: KeyframeAnimationProps);
-    speedScale: number;
-    object3d: Object3D;
-    halperLine: Line<any, LineBasicMaterial>;
-    keyframes: Array<Keyframe>;
-    setObject3D(object3d: Object3D): void;
-    getKeyframe(i: number): Keyframe;
-    setKeyframe(i: number, keyframe: Keyframe): void;
-    setKeyframes(keyframes: Array<Keyframe>): void;
-    update(): void;
-    updateMatrix(): void;
-}
+import { Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
+export type Keyframe = {
+    position: Vector3;
+    scale: Vector3;
+    rotation: Euler;
+    timeTemp: number;
+};
+export type KeyframeAnimationProps = {
+    speedScale?: number;
+    object3d: Object3D;
+    keyframes: Array<Keyframe>;
+};
+export default class KeyframeAnimation extends Object3D {
+    constructor(props: KeyframeAnimationProps);
+    speedScale: number;
+    object3d: Object3D;
+    halperLine: Line<any, LineBasicMaterial>;
+    keyframes: Array<Keyframe>;
+    setObject3D(object3d: Object3D): void;
+    getKeyframe(i: number): Keyframe;
+    setKeyframe(i: number, keyframe: Keyframe): void;
+    setKeyframes(keyframes: Array<Keyframe>): void;
+    update(): void;
+    updateMatrix(): void;
+}