three-base 2.0.24 → 2.0.26

package/InstancedGroupMesh.d.ts

@@ -1,10 +1,16 @@
-import * as THREE from 'three';
-export default class InstancedGroupMesh extends THREE.Mesh {
+import { Color, Group, InstancedMesh, Matrix4, Mesh } from 'three';
+export default class InstancedGroupMesh extends Mesh {
+    children: InstancedMesh[];
     isInstancedGroupMesh: boolean;
     count: number;
-    meshCollect: Record<string, THREE.Mesh[]>;
-    instanceCollect: Record<string, THREE.InstancedMesh>;
-    static matrix: THREE.Matrix4;
-    constructor(group: THREE.Group, count: number);
-    setMatrixAt(index: number, matrix: THREE.Matrix4): void;
+    meshCollect: Record<string, Mesh[]>;
+    instanceCollect: Record<string, 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,16 +2,17 @@
  * @Author: xiaosihan
  * @Date: 2023-02-21 09:55:52
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-02-26 14:42:21
+ * @Last Modified time: 2024-01-27 17:41:26
  */
-import * as THREE from 'three';
+import { throttle } from 'lodash';
+import { InstancedMesh, Matrix4, Mesh } from 'three';
 // 模型组转成 实例对象
-export default class InstancedGroupMesh extends THREE.Mesh {
+export default class InstancedGroupMesh extends Mesh {
     isInstancedGroupMesh = true;
     count = 0;
     meshCollect = {};
     instanceCollect = {};
-    static matrix = new THREE.Matrix4();
+    static matrix = new Matrix4();
     constructor(group, count) {
         super();
         this.count = count;
@@ -20,6 +21,7 @@ export default class InstancedGroupMesh extends THREE.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;
+            obj.userData = this.userData;
             if (mesh.isMesh) {
                 mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
                 mesh.rotation.setFromQuaternion(mesh.quaternion);
@@ -43,11 +45,17 @@ export default class InstancedGroupMesh extends THREE.Mesh {
         Object.keys(meshCollect).forEach(uuid => {
             const meshes = meshCollect[uuid];
             const mesh = meshes[0];
-            const instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
+            const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * count);
             instanceCollect[uuid] = instancedMesh;
             this.add(instancedMesh);
         });
     }
+    // 更新包围盒
+    computeBoundingSphere = throttle(() => {
+        this.traverse(m => {
+            m.computeBoundingSphere();
+        });
+    }, 1000);
     setMatrixAt(index, matrix) {
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid];
@@ -59,5 +67,40 @@ export default class InstancedGroupMesh extends THREE.Mesh {
                 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) {
+        this.children.map(mesh => {
+            mesh.addEventListener(name, callback);
+        });
+    }
+    // 取消事件的监听
+    removeEventListener(name, callback) {
+        this.children.map(mesh => {
+            mesh.removeEventListener(name, callback);
+        });
     }
 }

package/InstancedGroupMesh.ts

@@ -2,26 +2,29 @@
  * @Author: xiaosihan 
  * @Date: 2023-02-21 09:55:52 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-02-26 14:42:21
+ * @Last Modified time: 2024-01-27 17:41:26
  */
 
-import * as THREE from 'three'
+import { throttle } from 'lodash';
+import { Color, Group, InstancedMesh, Material, Matrix4, Mesh } from 'three';
 
 // 模型组转成 实例对象
-export default class InstancedGroupMesh extends THREE.Mesh {
+export default class InstancedGroupMesh extends Mesh {
+
+    declare children: InstancedMesh[];
+
     isInstancedGroupMesh = true
 
-    count: number = 0
+    count: number = 0;
 
-    meshCollect: Record<string, THREE.Mesh[]> = {}
+    meshCollect: Record<string, Mesh[]> = {}
 
-    instanceCollect: Record<string, THREE.InstancedMesh> = {}
+    instanceCollect: Record<string, InstancedMesh> = {}
 
-    static matrix = new THREE.Matrix4()
+    static matrix = new Matrix4()
 
-    constructor(group: THREE.Group, count: number) {
+    constructor(group: Group, count: number) {
         super()
-
         this.count = count
 
         const { meshCollect, instanceCollect } = this
@@ -30,7 +33,10 @@ export default class InstancedGroupMesh extends THREE.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 THREE.Mesh
+            const mesh = obj as Mesh;
+
+            obj.userData = this.userData;
+
             if (mesh.isMesh) {
 
                 mesh.matrixWorld.decompose(mesh.position, mesh.quaternion, mesh.scale);
@@ -38,7 +44,7 @@ export default class InstancedGroupMesh extends THREE.Mesh {
                 mesh.updateMatrix();
 
                 // same geometry and same material consider as the same mesh
-                const uuid = mesh.geometry.uuid + '/' + (mesh.material as THREE.Material).uuid
+                const uuid = mesh.geometry.uuid + '/' + (mesh.material as Material).uuid
 
                 if (meshCollect[uuid]) {
                     meshCollect[uuid].push(mesh)
@@ -58,23 +64,70 @@ export default class InstancedGroupMesh extends THREE.Mesh {
             const meshes = meshCollect[uuid]
             const mesh = meshes[0]
 
-            const instancedMesh = new THREE.InstancedMesh(mesh.geometry, mesh.material, meshes.length * count)
-            instanceCollect[uuid] = instancedMesh
+            const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * count)
+            instanceCollect[uuid] = instancedMesh;
             this.add(instancedMesh)
         })
     }
 
-    setMatrixAt(index: number, matrix: THREE.Matrix4) {
+    // 更新包围盒
+    computeBoundingSphere = throttle(() => {
+        this.traverse(m => {
+            (m as InstancedMesh).computeBoundingSphere();
+        })
+    }, 1000)
+
+    setMatrixAt(index: number, matrix: Matrix4) {
         Object.keys(this.meshCollect).forEach(uuid => {
             const instancedMesh = this.instanceCollect[uuid]
             const collect = this.meshCollect[uuid]
-            collect.forEach((mesh: THREE.Mesh, i: number) => {
+            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();
+    }
+
+    // 设置颜色
+    setColorAt(index: number, color: (instancedMesh: InstancedMesh) => Color | undefined) {
+        Object.keys(this.meshCollect).forEach(uuid => {
+            const instancedMesh = this.instanceCollect[uuid]
+            const collect = this.meshCollect[uuid]
+            collect.forEach((mesh: Mesh, i: number) => {
+                const c = color(instancedMesh);
+                if (c) {
+                    instancedMesh.setColorAt(collect.length * index + i, c);
+                    instancedMesh.instanceColor!.needsUpdate = true;
+                }
+            })
+        })
+    }
+
+    // 同步属性
+    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/InstancedMeshBase/InstancedMeshBase.d.ts

@@ -0,0 +1,4 @@
+import { Group } from "three";
+export default class InstancedMeshBase extends Group {
+    constructor();
+}

package/InstancedMeshBase/InstancedMeshBase.js

@@ -0,0 +1,13 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-02-05 09:31:57
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-02-05 09:40:12
+ */
+import { Group } from "three";
+// 数组实例模型
+export default class InstancedMeshBase extends Group {
+    constructor() {
+        super();
+    }
+}

package/InstancedMeshBase/InstancedMeshBase.ts

@@ -0,0 +1,18 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2024-02-05 09:31:57 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-02-05 09:40:12
+ */
+
+import { Group } from "three";
+
+// 数组实例模型
+export default class InstancedMeshBase extends Group {
+    constructor() {
+        super();
+    }
+
+
+    
+}

package/MeshBase.d.ts

@@ -0,0 +1,4 @@
+import { Group } from "three";
+export default class MeshBase extends Group {
+    constructor();
+}

package/MeshBase.js

@@ -0,0 +1,13 @@
+/*
+ * @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";
+// 基础模型加载对象
+export default class MeshBase extends Group {
+    constructor() {
+        super();
+    }
+}

package/MeshBase.ts

@@ -0,0 +1,19 @@
+/*
+ * @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";
+
+// 基础模型加载对象
+export default class MeshBase extends Group {
+
+    constructor() {
+        super();
+    }
+
+
+
+}

package/PlaneText.d.ts

@@ -22,10 +22,10 @@ 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 | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | 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) | 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) | {
         (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) | (() => 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) | ((callback: (object: import("three").Object3D<import("three").Object3DEventMap>) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: {
         geometries: any;
         materials: any;
         textures: any;

package/ThreeBase.js

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

package/ThreeBase.ts

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

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,

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,

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.24",
+    "version": "2.0.26",
     "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;