three-base 2.0.25 → 2.0.27

package/InstancedGroupMesh.d.ts

@@ -1,15 +1,16 @@
-import { Group, InstancedMesh, Matrix4, Mesh, Vector3, Color } from 'three';
+import { Color, Group, InstancedMesh, Matrix4, Mesh } from 'three';
 export default class InstancedGroupMesh extends Mesh {
-    url: string;
+    children: InstancedMesh[];
     isInstancedGroupMesh: boolean;
     count: number;
-    size: Vector3;
     meshCollect: Record<string, Mesh[]>;
     instanceCollect: Record<string, InstancedMesh>;
-    children: InstancedMesh[];
     static matrix: Matrix4;
     constructor(group: Group, count: number);
     computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
     setMatrixAt(index: number, matrix: Matrix4): void;
     setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined): void;
+    updateMatrixWorld(force?: boolean): void;
+    addEventListener(name: string, callback: (e: any) => void): void;
+    removeEventListener(name: string, callback: (e: any) => void): void;
 }

package/InstancedGroupMesh.js

@@ -2,29 +2,26 @@
  * @Author: xiaosihan
  * @Date: 2023-02-21 09:55:52
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-01-20 21:58:20
+ * @Last Modified time: 2024-01-27 17:41:26
  */
 import { throttle } from 'lodash';
-import { InstancedMesh, Matrix4, Mesh, Vector3 } from 'three';
-import threeUtils from './threeUtils';
+import { InstancedMesh, Matrix4, Mesh } from 'three';
 // 模型组转成 实例对象
 export default class InstancedGroupMesh extends Mesh {
-    url = "";
     isInstancedGroupMesh = true;
     count = 0;
-    size = new Vector3(1, 1, 1);
     meshCollect = {};
     instanceCollect = {};
     static matrix = new Matrix4();
     constructor(group, count) {
         super();
-        this.size.copy(threeUtils.getSize(group));
         this.count = count;
         const { meshCollect, instanceCollect } = this;
         group.updateMatrixWorld(true);
         // collect all mesh counts, in case there are more than one copy of the same mesh in this group
         group.traverse((obj) => {
             const mesh = obj;
+            obj.userData = this.userData;
             if (mesh.isMesh) {
                 mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
                 mesh.rotation.setFromQuaternion(mesh.quaternion);
@@ -49,8 +46,6 @@ export default class InstancedGroupMesh extends Mesh {
             const meshes = meshCollect[uuid];
             const mesh = meshes[0];
             const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
-            instancedMesh.name = mesh.name;
-            instancedMesh.frustumCulled = false;
             instanceCollect[uuid] = instancedMesh;
             this.add(instancedMesh);
         });
@@ -88,4 +83,24 @@ export default class InstancedGroupMesh extends Mesh {
             });
         });
     }
+    // 同步属性
+    updateMatrixWorld(force) {
+        super.updateMatrixWorld(force);
+        const { cursor, enableEvent } = this.userData;
+        this.traverse(obj => {
+            Object.assign(obj.userData, { cursor, enableEvent });
+        });
+    }
+    // 事件监听
+    addEventListener(name, callback) {
+        this.children.map(mesh => {
+            mesh.addEventListener(name, callback);
+        });
+    }
+    // 取消事件的监听
+    removeEventListener(name, callback) {
+        this.children.map(mesh => {
+            mesh.removeEventListener(name, callback);
+        });
+    }
 }

package/InstancedGroupMesh.ts

@@ -2,37 +2,29 @@
  * @Author: xiaosihan 
  * @Date: 2023-02-21 09:55:52 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-01-20 21:58:20
+ * @Last Modified time: 2024-01-27 17:41:26
  */
 
 import { throttle } from 'lodash';
-import { Group, InstancedMesh, Material, Matrix4, Mesh, Vector3, Color } from 'three'
-import threeUtils from './threeUtils';
+import { Color, Group, InstancedMesh, Material, Matrix4, Mesh } from 'three';
 
 // 模型组转成 实例对象
 export default class InstancedGroupMesh extends Mesh {
 
-    url = "";
+    declare children: InstancedMesh[];
 
     isInstancedGroupMesh = true
 
-    count: number = 0
-
-    size = new Vector3(1, 1, 1);
+    count: number = 0;
 
     meshCollect: Record<string, Mesh[]> = {}
 
     instanceCollect: Record<string, InstancedMesh> = {}
 
-    declare children: InstancedMesh[];
-
     static matrix = new Matrix4()
 
     constructor(group: Group, count: number) {
         super()
-
-        this.size.copy(threeUtils.getSize(group));
-
         this.count = count
 
         const { meshCollect, instanceCollect } = this
@@ -41,7 +33,10 @@ export default class InstancedGroupMesh extends Mesh {
 
         // collect all mesh counts, in case there are more than one copy of the same mesh in this group
         group.traverse((obj) => {
-            const mesh = obj as Mesh
+            const mesh = obj as Mesh;
+
+            obj.userData = this.userData;
+
             if (mesh.isMesh) {
 
                 mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
@@ -68,15 +63,13 @@ export default class InstancedGroupMesh extends Mesh {
         Object.keys(meshCollect).forEach(uuid => {
             const meshes = meshCollect[uuid]
             const mesh = meshes[0]
+
             const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * count)
-            instancedMesh.name = mesh.name;
-            instancedMesh.frustumCulled = false;
-            instanceCollect[uuid] = instancedMesh
+            instanceCollect[uuid] = instancedMesh;
             this.add(instancedMesh)
         })
     }
 
-
     // 更新包围盒
     computeBoundingSphere = throttle(() => {
         this.traverse(m => {
@@ -91,12 +84,10 @@ export default class InstancedGroupMesh extends Mesh {
             collect.forEach((mesh: Mesh, i: number) => {
                 InstancedGroupMesh.matrix.copy(mesh.matrix)
                 InstancedGroupMesh.matrix.premultiply(matrix)
-
                 instancedMesh.setMatrixAt(collect.length * index + i, InstancedGroupMesh.matrix);
                 instancedMesh.instanceMatrix.needsUpdate = true;
             })
         })
-
         this.computeBoundingSphere();
     }
 
@@ -115,4 +106,28 @@ export default class InstancedGroupMesh extends Mesh {
         })
     }
 
-}
+    // 同步属性
+    updateMatrixWorld(force?: boolean): void {
+        super.updateMatrixWorld(force);
+        const { cursor, enableEvent } = this.userData;
+        this.traverse(obj => {
+            Object.assign(obj.userData, { cursor, enableEvent });
+        });
+    }
+
+    // 事件监听
+    addEventListener(name: string, callback: (e: any) => void) {
+        this.children.map(mesh => {
+            mesh.addEventListener(name, callback);
+        });
+    }
+
+    // 取消事件的监听
+    removeEventListener(name: string, callback: (e: any) => void) {
+        this.children.map(mesh => {
+            mesh.removeEventListener(name, callback);
+        });
+    }
+
+}
+

package/MeshBase.d.ts

@@ -1,4 +1,19 @@
-import { Group } from "three";
+import { Group, Mesh, Object3D, Vector3 } from "three";
 export default class MeshBase extends Group {
-    constructor();
+    constructor(url?: string);
+    static models: Map<string, Object3D>;
+    static loadModeling: Map<string, boolean>;
+    loaded: boolean;
+    loadModel(url: string): Promise<void>;
+    frustumCulled: boolean;
+    castShadow: boolean;
+    receiveShadow: boolean;
+    traverseMesh(callback: (mesh: Mesh) => void): Promise<void>;
+    updateMatrix(): void;
+    applyAllTranstion(): void;
+    getSize(): Vector3;
+    center(): void;
+    alignBottom(y?: number): void;
+    scaleTo(size?: number, key?: Array<"x" | "y" | "z">): void;
+    expandBynormal(length: number): void;
 }

package/MeshBase.js

@@ -1,13 +1,155 @@
-/*
- * @Author: xiaosihan
- * @Date: 2024-01-29 10:08:40
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-02-05 09:40:17
- */
-import { Group } from "three";
-// 基础模型加载对象
+import { DoubleSide, Group, Object3D, Vector3 } from "three";
+import threeUtils from "./threeUtils";
+import threeLoader from "./threeLoader";
+// 模型基类
 export default class MeshBase extends Group {
-    constructor() {
+    constructor(url) {
         super();
+        url && this.loadModel(url);
+    }
+    // 模型对象
+    static models = new Map();
+    // 模型是否在加载中
+    static loadModeling = new Map();
+    // 加载完成
+    loaded = false;
+    async loadModel(url) {
+        if (!url) {
+            this.clear();
+            return;
+        }
+        this.loaded = false;
+        // 没有模型并且没有加载任务时就去加载模型
+        if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
+            MeshBase.loadModeling.set(url, true);
+            let modal = new Object3D();
+            if (/\.fbx$/i.test(url)) {
+                await threeLoader.fbxLoader.loadAsync(url).then(res => {
+                    modal = res;
+                }).catch(() => {
+                    console.error(`${url},加载失败`);
+                });
+            }
+            else if (/\.(gltf|glb)$/i.test(url)) {
+                await threeLoader.gltfLoader.loadAsync(url).then(res => {
+                    modal = res.scene;
+                }).catch(() => {
+                    console.error(`${url},加载失败`);
+                });
+            }
+            else {
+                console.error(`${url},不支持的格式`);
+            }
+            threeUtils.center(modal);
+            threeUtils.alignBottom(modal);
+            modal.updateMatrixWorld(true);
+            // 应用全部变换
+            modal.traverse(obj => {
+                const mesh = obj;
+                mesh.position.set(0, 0, 0);
+                mesh.rotation.set(0, 0, 0);
+                mesh.scale.set(1, 1, 1);
+                if (mesh.isMesh) {
+                    mesh.geometry.applyMatrix4(mesh.matrixWorld);
+                    mesh.material.side = DoubleSide;
+                }
+            });
+            MeshBase.models.set(url, modal);
+            MeshBase.loadModeling.set(url, false);
+        }
+        // 如果模型还在加载中, 就等待模型加载完成
+        do {
+            await new Promise(resolve => setTimeout(resolve, 200));
+        } while (MeshBase.loadModeling.get(url));
+        if (MeshBase.models.get(url)) {
+            const mesh = MeshBase.models.get(url).clone();
+            this.clear();
+            this.add(mesh);
+            this.applyAllTranstion();
+        }
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        // 加载完成事件
+        this.dispatchEvent({ type: "loaded" });
+        this.loaded = true;
+    }
+    // 超出绘制区域时不绘制
+    frustumCulled = false;
+    // 创建阴影
+    castShadow = false;
+    // 接受阴影
+    receiveShadow = false;
+    //遍历模型
+    async traverseMesh(callback) {
+        while (!this.loaded) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        this.traverse(obj => {
+            const mesh = obj;
+            if (mesh.isMesh) {
+                callback(mesh);
+            }
+        });
+    }
+    updateMatrix() {
+        // 深度应用属性
+        this.traverse(obj => {
+            const mesh = obj;
+            if (mesh.isMesh) {
+                mesh.frustumCulled = this.frustumCulled;
+                mesh.castShadow = this.castShadow;
+                mesh.receiveShadow = this.receiveShadow;
+            }
+        });
+        super.updateMatrix();
+    }
+    // 应用全部变化
+    applyAllTranstion() {
+        this.updateMatrixWorld(true);
+        // 应用全部变换
+        this.traverse(obj => {
+            const mesh = obj;
+            mesh.position.set(0, 0, 0);
+            mesh.rotation.set(0, 0, 0);
+            mesh.scale.set(1, 1, 1);
+            if (mesh.isMesh) {
+                mesh.geometry.applyMatrix4(mesh.matrixWorld);
+                mesh.material.side = DoubleSide;
+            }
+        });
+    }
+    // 获取模型的尺寸
+    getSize() {
+        return threeUtils.getSize(this);
+    }
+    // 居中
+    center() {
+        threeUtils.center(this);
+    }
+    //底对齐
+    alignBottom(y = 0) {
+        threeUtils.alignBottom(this, y);
+    }
+    // 放大到指定尺寸
+    scaleTo(size = 1, key = ["x", "y", "z"]) {
+        threeUtils.scaleTo(this, size, key);
+    }
+    //按照法线拓展
+    expandBynormal(length) {
+        this.traverseMesh(mesh => {
+            // 没有法线就计算法线
+            mesh.geometry = mesh.geometry.clone();
+            if (!mesh.geometry.getAttribute("normal")) {
+                mesh.geometry.computeVertexNormals();
+            }
+            const normal = mesh.geometry.getAttribute("normal");
+            const position = mesh.geometry.getAttribute("position");
+            const v3 = new Vector3(0, 0, 0);
+            for (let i = 0; i < position.count; i++) {
+                v3.set(normal.getX(i), normal.getY(i), normal.getZ(i));
+                v3.setLength(length);
+                position.setXYZ(i, position.getX(i) + v3.x, position.getY(i) + v3.y, position.getZ(i) + v3.z);
+            }
+            position.needsUpdate = true;
+        });
     }
 }

package/MeshBase.ts

@@ -1,19 +1,189 @@
-/*
- * @Author: xiaosihan
- * @Date: 2024-01-29 10:08:40
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-02-05 09:40:17
- */
 
-import { Group } from "three";
+import { DoubleSide, Group, Mesh, MeshStandardMaterial, Object3D, Vector3 } from "three";
+import threeUtils from "./threeUtils";
+import threeLoader from "./threeLoader";
 
-// 基础模型加载对象
+// 模型基类
 export default class MeshBase extends Group {
-
-    constructor() {
+    constructor(url?: string) {
         super();
+        url && this.loadModel(url);
     }
 
+    // 模型对象
+    static models: Map<string, Object3D> = new Map();
+
+    // 模型是否在加载中
+    static loadModeling: Map<string, boolean> = new Map();
+
+    // 加载完成
+    loaded = false;
+
+    async loadModel(url: string) {
+        if (!url) {
+            this.clear();
+            return;
+        }
+
+        this.loaded = false;
+
+        // 没有模型并且没有加载任务时就去加载模型
+        if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
+            MeshBase.loadModeling.set(url, true);
+
+            let modal = new Object3D();
+
+            if (/\.fbx$/i.test(url)) {
+                await threeLoader.fbxLoader.loadAsync(url).then(res => {
+                    modal = res;
+                }).catch(() => {
+                    console.error(`${url},加载失败`);
+                })
+            } else if (/\.(gltf|glb)$/i.test(url)) {
+                await threeLoader.gltfLoader.loadAsync(url).then(res => {
+                    modal = res.scene;
+                }).catch(() => {
+                    console.error(`${url},加载失败`);
+                })
+            } else {
+                console.error(`${url},不支持的格式`);
+            }
+
+            threeUtils.center(modal);
+            threeUtils.alignBottom(modal);
+            modal.updateMatrixWorld(true);
+
+            // 应用全部变换
+            modal.traverse(obj => {
+                const mesh = obj as Mesh;
+                mesh.position.set(0, 0, 0);
+                mesh.rotation.set(0, 0, 0);
+                mesh.scale.set(1, 1, 1);
+                if (mesh.isMesh) {
+                    mesh.geometry.applyMatrix4(mesh.matrixWorld);
+                    (mesh.material as MeshStandardMaterial).side = DoubleSide;
+                }
+            });
+
+            MeshBase.models.set(url, modal);
+            MeshBase.loadModeling.set(url, false);
+        }
+
+        // 如果模型还在加载中, 就等待模型加载完成
+        do {
+            await new Promise(resolve => setTimeout(resolve, 200));
+        } while (MeshBase.loadModeling.get(url));
+
+        if (MeshBase.models.get(url)) {
+            const mesh = MeshBase.models.get(url)!.clone();
+            this.clear();
+            this.add(mesh);
+            this.applyAllTranstion();
+        }
+
+        await new Promise(resolve => requestAnimationFrame(resolve));
+
+        // 加载完成事件
+        this.dispatchEvent({ type: "loaded" } as never);
+
+        this.loaded = true;
+    }
+
+    // 超出绘制区域时不绘制
+    frustumCulled = false;
+
+    // 创建阴影
+    castShadow: boolean = false;
+
+    // 接受阴影
+    receiveShadow: boolean = false;
+
+    //遍历模型
+    async traverseMesh(callback: (mesh: Mesh) => void) {
 
+        while (!this.loaded) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+
+        this.traverse(obj => {
+            const mesh = obj as Mesh;
+            if (mesh.isMesh) {
+                callback(mesh);
+            }
+        });
+    }
+
+    updateMatrix(): void {
+
+        // 深度应用属性
+        this.traverse(obj => {
+            const mesh = obj as Mesh;
+            if (mesh.isMesh) {
+                mesh.frustumCulled = this.frustumCulled;
+                mesh.castShadow = this.castShadow;
+                mesh.receiveShadow = this.receiveShadow;
+            }
+        });
+
+        super.updateMatrix();
+    }
+
+    // 应用全部变化
+    applyAllTranstion() {
+        this.updateMatrixWorld(true);
+        // 应用全部变换
+        this.traverse(obj => {
+            const mesh = obj as Mesh;
+            mesh.position.set(0, 0, 0);
+            mesh.rotation.set(0, 0, 0);
+            mesh.scale.set(1, 1, 1);
+            if (mesh.isMesh) {
+                mesh.geometry.applyMatrix4(mesh.matrixWorld);
+                (mesh.material as MeshStandardMaterial).side = DoubleSide;
+            }
+        });
+    }
+
+    // 获取模型的尺寸
+    getSize() {
+        return threeUtils.getSize(this);
+    }
+
+    // 居中
+    center() {
+        threeUtils.center(this);
+    }
+
+    //底对齐
+    alignBottom(y: number = 0) {
+        threeUtils.alignBottom(this, y);
+    }
+
+    // 放大到指定尺寸
+    scaleTo(size: number = 1, key: Array<"x" | "y" | "z"> = ["x", "y", "z"]) {
+        threeUtils.scaleTo(this, size, key);
+    }
+
+    //按照法线拓展
+    expandBynormal(length: number) {
+        this.traverseMesh(mesh => {
+            // 没有法线就计算法线
+            mesh.geometry = mesh.geometry.clone();
+            if (!mesh.geometry.getAttribute("normal")) {
+                mesh.geometry.computeVertexNormals();
+            }
+
+            const normal = mesh.geometry.getAttribute("normal");
+            const position = mesh.geometry.getAttribute("position");
+            const v3 = new Vector3(0, 0, 0);
+            for (let i = 0; i < position.count; i++) {
+                v3.set(normal.getX(i), normal.getY(i), normal.getZ(i));
+                v3.setLength(length);
+                position.setXYZ(i, position.getX(i) + v3.x, position.getY(i) + v3.y, position.getZ(i) + v3.z);
+            }
+            position.needsUpdate = true;
+
+        })
+    }
 
 }

package/PlaneText.d.ts

@@ -22,15 +22,15 @@ export default class PlaneText extends Mesh {
     spriteText: SpriteText;
     material: MeshBasicMaterial;
     set(parame: Props): void;
-    get(prop: keyof SpriteText): string | number | boolean | Vector3 | import("three").Object3D<import("three").Object3DEventMap> | import("three").BufferGeometry<import("three").NormalBufferAttributes> | ((force?: boolean) => void) | import("three").Object3D<import("three").Object3DEventMap>[] | HTMLCanvasElement | import("three").Vector2 | import("three").Material | Record<string, any> | import("three").Matrix4 | import("three").Quaternion | (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | import("three").Euler | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | ((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) | {
+    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) | {
         (vector: Vector3): void;
         (x: number, y: number, z: number): void;
-    } | ((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) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: {
+    } | ((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?: {
         geometries: any;
         materials: any;
         textures: any;
         images: any;
-    }) => any) | 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) | {
+    }) => 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) | {
         <T_1 extends keyof import("three").Object3DEventMap>(type: T_1, listener: import("three").EventListener<import("three").Object3DEventMap[T_1], T_1, SpriteText>): void;
         <T_2 extends string>(type: T_2, listener: import("three").EventListener<{}, T_2, SpriteText>): void;
     } | {

package/ThreeBase.js

@@ -294,9 +294,7 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 渲染场景
     render() {
-        // 控制器在移动时鼠标不能操作
-        // this.renderer.domElement.style.pointerEvents = (!this.controlsPosition.isDone() || !this.controlsCenter.isDone()) ? "none" : "all";
-        // canvas 没有在页面上面的话 就跳过渲染
+        // canvas 没有在页面上面的话 就停止渲染
         if (!threeUtils.inDocument(this.renderer.domElement)) {
             this.stopRender();
             return;

package/ThreeBase.ts

@@ -363,10 +363,7 @@ export default class ThreeBase extends EventDispatcher {
 
     // 渲染场景
     render() {
-        // 控制器在移动时鼠标不能操作
-        // this.renderer.domElement.style.pointerEvents = (!this.controlsPosition.isDone() || !this.controlsCenter.isDone()) ? "none" : "all";
-
-        // canvas 没有在页面上面的话 就跳过渲染
+        // canvas 没有在页面上面的话 就停止渲染
         if (!threeUtils.inDocument(this.renderer.domElement)) {
             this.stopRender();
             return;

package/ThreeMouse.d.ts

@@ -11,7 +11,7 @@ export interface ThreeMouseEvent extends Intersection {
     y: number;
 }
 /**
- *  harp.gl 专用的鼠标拾取模型对象
+ *  three.js 专用的鼠标拾取模型对象
  */
 export default class ThreeMouse {
     constructor(renderer: THREE.WebGLRenderer, camera: THREE.Camera, scene: THREE.Scene);

package/ThreeMouse.js

@@ -8,7 +8,7 @@ import * as THREE from "three";
 import { Raycaster } from "three";
 import { debounce } from "lodash";
 /**
- *  harp.gl 专用的鼠标拾取模型对象
+ *  three.js 专用的鼠标拾取模型对象
  */
 export default class ThreeMouse {
     constructor(renderer, camera, scene) {
@@ -108,7 +108,7 @@ export default class ThreeMouse {
         let intersection = this._getSelected(meshs);
         if (intersection) {
             const { face, object } = intersection;
-            face && face.normal.applyMatrix4(object.matrixWorld);
+            // face && face.normal.applyMatrix4(object.matrixWorld);
             const MouseEvent = Object.assign(intersection, {
                 renderer: this._renderer,
                 camera: this._camera,
@@ -232,7 +232,7 @@ export default class ThreeMouse {
             return;
         }
         this._mesh_on = intersection.object;
-        if (this.hasEvent(this._mesh_Down, ["mouseup"])) {
+        if (this.hasEvent(this._mesh_on, ["mouseup"])) {
             this._mesh_on.dispatchEvent({
                 ...intersection,
                 renderer: this._renderer,

package/ThreeMouse.ts

@@ -21,7 +21,7 @@ export interface ThreeMouseEvent extends Intersection {
 
 
 /**
- *  harp.gl 专用的鼠标拾取模型对象
+ *  three.js 专用的鼠标拾取模型对象
  */
 export default class ThreeMouse {
 
@@ -152,7 +152,7 @@ export default class ThreeMouse {
 
         if (intersection) {
             const { face, object } = intersection;
-            face && face.normal.applyMatrix4(object.matrixWorld);
+            // face && face.normal.applyMatrix4(object.matrixWorld);
             const MouseEvent: ThreeMouseEvent = Object.assign(intersection, {  // 将来可能用到的对象
                 renderer: this._renderer,
                 camera: this._camera,
@@ -312,7 +312,7 @@ export default class ThreeMouse {
 
         this._mesh_on = intersection.object as Object3D;
 
-        if (this.hasEvent(this._mesh_Down, ["mouseup"])) {
+        if (this.hasEvent(this._mesh_on, ["mouseup"])) {
 
             this._mesh_on.dispatchEvent({
                 ...intersection,

package/Transition.js

@@ -47,7 +47,9 @@ export default class Transition {
     _delay = 0;
     // 设置过渡时间
     setDuration(duration = 500) {
-        this._duration = duration;
+        setTimeout(() => {
+            this._duration = duration;
+        }, 0);
         return this;
     }
     // 设置延时

package/Transition.ts

@@ -69,7 +69,9 @@ export default class Transition {
 
     // 设置过渡时间
     setDuration(duration = 500): this {
-        this._duration = duration;
+        setTimeout(() => {
+            this._duration = duration;
+        }, 0);
         return this;
     }
 

package/package.json

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

package/threeLoader.d.ts

@@ -1,4 +1,4 @@
-import { EventDispatcher, Texture, TextureLoader } from "three";
+import { EventDispatcher, Object3D, Texture, TextureLoader } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -16,6 +16,8 @@ declare class ThreeLoader extends EventDispatcher {
     stlLoader: STLLoader;
     mtlLoader: MTLLoader;
     gltfLoader: GLTFLoader;
+    /** 加载模型支持glb,fbx,stl,obj */
+    loadModal(url: string): Promise<Object3D<import("three").Object3DEventMap>>;
     onload: boolean;
 }
 declare const threeLoader: ThreeLoader;

package/threeLoader.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-02-07 11:11:48
  */
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, TextureLoader, VideoTexture } from "three";
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Mesh, MeshLambertMaterial, Object3D, RepeatWrapping, TextureLoader, VideoTexture } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -114,6 +114,37 @@ class ThreeLoader extends EventDispatcher {
         loader.setDRACOLoader(dracoLoader);
         return loader;
     })();
+    /** 加载模型支持glb,fbx,stl,obj */
+    async loadModal(url) {
+        let Object3d = new Object3D();
+        if (/\.fbx$/i.test(url)) {
+            await threeLoader.fbxLoader.loadAsync(url).then(res => {
+                Object3d = res;
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            });
+        }
+        else if (/\.(gltf|glb)$/i.test(url)) {
+            await threeLoader.gltfLoader.loadAsync(url).then(res => {
+                Object3d = res.scene;
+                Object3d.animations = res.animations;
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            });
+        }
+        else if (/\.stl$/i.test(url)) {
+            await threeLoader.stlLoader.loadAsync(url).then(geometry => {
+                const material = new MeshLambertMaterial();
+                Object3d = new Mesh(geometry, material);
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            });
+        }
+        else {
+            throw new Error(`${url},不支持的格式`);
+        }
+        return Object3d;
+    }
     // 是否加载完成
     onload = true;
 }

package/threeLoader.ts

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-02-07 11:11:48
  */
 
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture } from "three";
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Mesh, MeshLambertMaterial, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -141,6 +141,38 @@ class ThreeLoader extends EventDispatcher {
         return loader;
     })()
 
+
+    /** 加载模型支持glb,fbx,stl,obj */
+    async loadModal(url: string) {
+        let Object3d = new Object3D();
+
+        if (/\.fbx$/i.test(url)) {
+            await threeLoader.fbxLoader.loadAsync(url).then(res => {
+                Object3d = res;
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            })
+        } else if (/\.(gltf|glb)$/i.test(url)) {
+            await threeLoader.gltfLoader.loadAsync(url).then(res => {
+                Object3d = res.scene;
+                Object3d.animations = res.animations;
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            })
+        } else if (/\.stl$/i.test(url)) {
+            await threeLoader.stlLoader.loadAsync(url).then(geometry => {
+                const material = new MeshLambertMaterial();
+                Object3d = new Mesh(geometry, material);
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            })
+        } else {
+            throw new Error(`${url},不支持的格式`);
+        }
+
+        return Object3d;
+    }
+
     // 是否加载完成
     onload = true;
 

package/threeUtils.d.ts

@@ -36,6 +36,7 @@ declare class ThreeUtils extends EventDispatcher {
     centerObject3D(object3d: Object3D | BufferGeometry): void;
     center(object3d: Object3D | BufferGeometry): void;
     scaleTo(object3d: Object3D | BufferGeometry, size?: number, key?: Array<"x" | "y" | "z">): void;
+    applyAllTranstion(object3d: Object3D): void;
     exportGLB(input: Object3D, fileName?: string): void;
     getVolume(geometry: BufferGeometry): number;
     signedVolumeOfTriangle(p1: Vector3, p2: Vector3, p3: Vector3): number;

package/threeUtils.js

@@ -173,6 +173,19 @@ class ThreeUtils extends EventDispatcher {
             object3d.scale(scale, scale, scale);
         }
     }
+    // 应用全部变化
+    applyAllTranstion(object3d) {
+        object3d.updateMatrixWorld(true);
+        // 应用全部变换
+        object3d.traverse(obj => {
+            obj.position.set(0, 0, 0);
+            obj.rotation.set(0, 0, 0);
+            obj.scale.set(1, 1, 1);
+            if (obj.isMesh) {
+                obj.geometry.applyMatrix4(obj.matrixWorld);
+            }
+        });
+    }
     // 导出 glb
     exportGLB(input, fileName = "threeUtils.exportGLB") {
         const gltfExporter = new GLTFExporter();

package/threeUtils.ts

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-05-03 00:36:18
  */
 
-import { Box3, BufferAttribute, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+import { Box3, BufferAttribute, BufferGeometry, Clock, EventDispatcher, Mesh, MeshStandardMaterial, Object3D, Vector3 } from "three";
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
 
 class ThreeUtils extends EventDispatcher {
@@ -200,6 +200,20 @@ class ThreeUtils extends EventDispatcher {
         }
     }
 
+    // 应用全部变化
+    applyAllTranstion(object3d: Object3D) {
+        object3d.updateMatrixWorld(true);
+        // 应用全部变换
+        object3d.traverse(obj => {
+            obj.position.set(0, 0, 0);
+            obj.rotation.set(0, 0, 0);
+            obj.scale.set(1, 1, 1);
+            if ((obj as Mesh).isMesh) {
+                (obj as Mesh).geometry.applyMatrix4(obj.matrixWorld);
+            }
+        });
+    }
+
     // 导出 glb
     exportGLB(input: Object3D, fileName: string = "threeUtils.exportGLB") {
         const gltfExporter = new GLTFExporter();