three-base 2.0.58 → 2.0.60

package/InstancedMeshBase.d.ts

@@ -13,7 +13,7 @@ export default class InstancedMeshBase extends MeshBase {
     static matrix: Matrix4;
     instanceMatrix: InstancedBufferAttribute;
     instanceColor: InstancedBufferAttribute;
-    loadModel(url: string): Promise<void>;
+    loadModel(url: string, filename?: string): Promise<void>;
     computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
     setCount(count?: number): void;
     setMatrixAt(index: number, matrix: Matrix4): void;

package/InstancedMeshBase.js

@@ -5,7 +5,7 @@
  * @Last Modified time: 2024-06-07 22:14:53
  */
 import { throttle } from "lodash";
-import { InstancedBufferAttribute, InstancedMesh, Matrix4, Object3D, Vector3 } from "three";
+import { InstancedBufferAttribute, InstancedMesh, Matrix4, Vector3 } from "three";
 import MeshBase from "./MeshBase";
 import threeUtils from "./threeUtils";
 import threeLoader from "./threeLoader";
@@ -25,7 +25,7 @@ export default class InstancedMeshBase extends MeshBase {
     instanceMatrix = new InstancedBufferAttribute(new Float32Array(0 * 16), 16);
     instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
     // 重构加载模型的方法
-    async loadModel(url) {
+    async loadModel(url, filename = "") {
         if (!url) {
             this.clear();
             return;
@@ -34,25 +34,8 @@ export default class InstancedMeshBase extends MeshBase {
         // 没有模型并且没有加载任务时就去加载模型
         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;
-                    modal.animations = res.animations;
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                });
-            }
-            else {
-                console.error(`${url},不支持的格式`);
-            }
+            // 万能加载器
+            let modal = await threeLoader.loadModal(url, filename);
             threeUtils.center(modal);
             threeUtils.alignBottom(modal);
             modal.updateMatrixWorld(true);

package/InstancedMeshBase.ts

@@ -40,7 +40,7 @@ export default class InstancedMeshBase extends MeshBase {
     instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
 
     // 重构加载模型的方法
-    async loadModel(url: string) {
+    async loadModel(url: string, filename: string = "") {
         if (!url) {
             this.clear();
             return;
@@ -52,24 +52,8 @@ export default class InstancedMeshBase extends MeshBase {
         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;
-                    modal.animations = res.animations;
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                })
-            } else {
-                console.error(`${url},不支持的格式`);
-            }
+            // 万能加载器
+            let modal = await threeLoader.loadModal(url, filename);
 
             threeUtils.center(modal);
             threeUtils.alignBottom(modal);

package/MeshBase.d.ts

@@ -9,7 +9,8 @@ export default class MeshBase extends Group {
     animationActions: {
         [key: string]: AnimationAction;
     };
-    loadModel(url: string, suffix?: string): Promise<void>;
+    getSuffix(filename: string): string;
+    loadModel(url: string, filename?: string): Promise<void>;
     frustumCulled: boolean;
     castShadow: boolean;
     receiveShadow: boolean;
@@ -20,7 +21,7 @@ export default class MeshBase extends Group {
         [key: string]: number;
     }): Promise<void>;
     getAnimas(): string[];
-    play(anima?: string): void;
+    setAnimas(anima?: string): void;
     stop(): void;
     updateMatrix(): void;
     getSize(): Promise<Vector3>;

package/MeshBase.js

@@ -1,4 +1,4 @@
-import { AnimationMixer, Clock, Group, Object3D, Vector3 } from "three";
+import { AnimationMixer, Clock, Group, Vector3 } from "three";
 import threeUtils from "./threeUtils";
 import threeLoader from "./threeLoader";
 import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
@@ -20,8 +20,13 @@ export default class MeshBase extends Group {
     mixer;
     //动画剪辑对象数组
     animationActions = {};
+    // 获取文件名的后缀
+    getSuffix(filename) {
+        const match = filename.match(/\.([^\.]+)$/);
+        return match ? match[1].toLowerCase() : '';
+    }
     // 如果url 是blob地址的话,就用suffix字段来制定模型的类型
-    async loadModel(url, suffix = "") {
+    async loadModel(url, filename = "") {
         if (!url) {
             this.clear();
             return;
@@ -30,44 +35,8 @@ export default class MeshBase extends Group {
         // 没有模型并且没有加载任务时就去加载模型
         if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
             MeshBase.loadModeling.set(url, true);
-            let modal = new Object3D();
-            if (/\.fbx$/i.test(suffix || url)) {
-                await threeLoader.fbxLoader.loadAsync(url).then(res => {
-                    modal = res;
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                });
-            }
-            else if (/\.(gltf|glb)$/i.test(suffix || url)) {
-                await threeLoader.gltfLoader.loadAsync(url).then(res => {
-                    modal = res.scene;
-                    modal.animations = res.animations;
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                });
-            }
-            else if (/\.(usdz)$/i.test(suffix || url)) {
-                await threeLoader.usdzLoader.loadAsync(url).then(res => {
-                    modal = res; // usdz 目前还不支持骨骼动画
-                    modal.animations = res.animations;
-                    modal.traverse(obj => {
-                        const mesh = obj;
-                        if (mesh.isMesh) {
-                            mesh.material.transparent = true;
-                        }
-                    });
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                });
-            }
-            else {
-                if (suffix) {
-                    console.error(`${suffix},不支持的格式`);
-                }
-                else {
-                    console.error(`${url},不支持的格式,请尝试使用 suffix 参数来指定一下格式`);
-                }
-            }
+            // 万能加载器
+            let modal = await threeLoader.loadModal(url, filename);
             MeshBase.models.set(url, modal);
             MeshBase.loadModeling.set(url, false);
         }
@@ -138,7 +107,7 @@ export default class MeshBase extends Group {
         return Object.keys(this.animationActions);
     }
     //播放指定动画
-    play(anima = "") {
+    setAnimas(anima = "") {
         this.setClipActionWeight({ [anima]: 1 });
     }
     //停止所有动画

package/MeshBase.ts

@@ -3,6 +3,7 @@ import { AnimationAction, AnimationMixer, Clock, DoubleSide, Group, Material, Me
 import threeUtils from "./threeUtils";
 import threeLoader from "./threeLoader";
 import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
+import { get, includes } from "lodash";
 
 // 模型基类
 export default class MeshBase extends Group {
@@ -29,8 +30,14 @@ export default class MeshBase extends Group {
     //动画剪辑对象数组
     animationActions: { [key: string]: AnimationAction } = {};
 
+    // 获取文件名的后缀
+    getSuffix(filename: string) {
+        const match = filename.match(/\.([^\.]+)$/);
+        return match ? match[1].toLowerCase() : '';
+    }
+
     // 如果url 是blob地址的话,就用suffix字段来制定模型的类型
-    async loadModel(url: string, suffix: string = "") {
+    async loadModel(url: string, filename: string = "") {
         if (!url) {
             this.clear();
             return;
@@ -42,41 +49,8 @@ export default class MeshBase extends Group {
         if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
             MeshBase.loadModeling.set(url, true);
 
-            let modal = new Object3D();
-
-            if (/\.fbx$/i.test(suffix || url)) {
-                await threeLoader.fbxLoader.loadAsync(url).then(res => {
-                    modal = res;
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                })
-            } else if (/\.(gltf|glb)$/i.test(suffix || url)) {
-                await threeLoader.gltfLoader.loadAsync(url).then(res => {
-                    modal = res.scene;
-                    modal.animations = res.animations;
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                })
-            } else if (/\.(usdz)$/i.test(suffix || url)) {
-                await threeLoader.usdzLoader.loadAsync(url).then(res => {
-                    modal = res; // usdz 目前还不支持骨骼动画
-                    modal.animations = res.animations;
-                    modal.traverse(obj => {
-                        const mesh = (obj as Mesh);
-                        if (mesh.isMesh) {
-                            (mesh.material as Material).transparent = true;
-                        }
-                    });
-                }).catch(() => {
-                    console.error(`${url},加载失败`);
-                })
-            } else {
-                if (suffix) {
-                    console.error(`${suffix},不支持的格式`);
-                } else {
-                    console.error(`${url},不支持的格式,请尝试使用 suffix 参数来指定一下格式`);
-                }
-            }
+            // 万能加载器
+            let modal = await threeLoader.loadModal(url, filename);
 
             MeshBase.models.set(url, modal);
             MeshBase.loadModeling.set(url, false);
@@ -167,7 +141,7 @@ export default class MeshBase extends Group {
     }
 
     //播放指定动画
-    play(anima: string = "") {
+    setAnimas(anima: string = "") {
         this.setClipActionWeight({ [anima]: 1 });
     }
 

package/ThreeBase.d.ts

@@ -25,17 +25,17 @@ export default class ThreeBase extends EventDispatcher {
     setSize(width: number, height: number): void;
     controlsDistance: Transition<{
         distance: number;
-    }>;
+    }, "distance">;
     controlsCenter: Transition<{
         x: number;
         y: number;
         z: number;
-    }>;
+    }, "x" | "y" | "z">;
     controlsPosition: Transition<{
         x: number;
         y: number;
         z: number;
-    }>;
+    }, "x" | "y" | "z">;
     gridHelper: GridHelper;
     axesHelper: AxesHelper;
     frame: number;

package/Transition.d.ts

@@ -1,6 +1,7 @@
-export default class Transition<T extends {
+export type TransitionParame = {
     [key: string]: number;
-}> {
+};
+export default class Transition<T extends TransitionParame, K extends Extract<keyof T, string>> {
     /**
      *Creates an instance of transition.
      * @param {{ [key: string]: number }} // 初始值
@@ -9,7 +10,7 @@ export default class Transition<T extends {
      * @memberof transition
      */
     constructor(param: T, bezier?: [number, number, number, number], duration?: number);
-    _keys: Array<keyof T & string>;
+    _keys: Array<Extract<keyof T, string>>;
     _bezier: [number, number, number, number];
     _Xbezier: [number, number, number, number];
     _Ybezier: [number, number, number, number];
@@ -20,26 +21,20 @@ export default class Transition<T extends {
     setDuration(duration?: number): this;
     setDelay(delay?: number): this;
     _: {
-        [key: string]: number;
+        [key in `${K}_start` | `${K}_end` | `${K}_startTime`]: T[K];
     };
     private onChangeCall;
+    private onDoneCall;
     run({ timeTemp }: any): this;
     runbindThis: any;
-    onChange(onChangeCall: (josn: {
-        [key in keyof T]: number;
-    }) => void): this;
-    get(key: keyof T & string): number;
-    set(param: {
-        [key in keyof T & string]: number;
-    }): Promise<this>;
-    reset(param: {
-        [key in keyof T & string]: number;
-    }): this;
-    getKeys(): Array<keyof T & string>;
-    hasKey(key: keyof T & string): boolean;
-    getJson(): {
-        [key in keyof T]: number;
-    };
+    onChange(onChangeCall: (josn: T) => void): this;
+    onDone(onDoneCall: (josn: T) => void): this;
+    get(key: Extract<keyof T, string>): T[K];
+    set(param: T): Promise<this>;
+    reset(param: Partial<T>): this;
+    getKeys(): Array<Extract<keyof T, string>>;
+    hasKey(key: Extract<keyof T, string>): boolean;
+    getJson(): T;
     _isDone: boolean;
     isDone(): boolean;
 }

package/Transition.js

@@ -59,16 +59,18 @@ export default class Transition {
     }
     // 存储 每个参数的 起始位置 起始时间 终止位置  终止时间
     _ = {};
+    // 数据改变的事件回调
     onChangeCall = (josn) => { };
+    //结束的事件回调
+    onDoneCall = (josn) => { };
     // 执行过度动画
     run({ timeTemp }) {
         this.timeTemp = timeTemp;
-        if (!this.onChangeCall || this.isDone()) {
+        this.onChangeCall(this.getJson());
+        if (this.isDone()) {
+            this.onDoneCall(this.getJson());
             threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
         }
-        else {
-            this.onChangeCall(this.getJson());
-        }
         return this;
     }
     runbindThis = this.run.bind(this);
@@ -78,6 +80,11 @@ export default class Transition {
         this.onChangeCall(this.getJson());
         return this;
     }
+    //设置动画对象的
+    onDone(onDoneCall) {
+        this.onDoneCall = onDoneCall;
+        return this;
+    }
     // 计算当前 key 的值
     get(key) {
         key = String(key);
@@ -104,7 +111,7 @@ export default class Transition {
         else if (this._keys.includes(key) && this.timeTemp >= (this._[key + "_startTime"] + this._duration)) {
             return this._[key + "_end"];
         }
-        // `没有 ${key} 的值`;
+        // `没有 ${ key } 的值`;
         return 0;
     }
     async set(param) {
@@ -112,7 +119,7 @@ export default class Transition {
         ;
         for (let key in param) {
             // 有就赋值
-            if (this._keys.includes(key) && Math.abs(param[key] - this._[key + "_end"]) > 0.001) {
+            if (this._keys.includes(key) && Math.abs(param[key] - this._[key + "_end"]) > 0.0001) {
                 this._[key + "_start"] = this.get(key);
                 this._[key + "_end"] = param[key];
                 // 起始时间
@@ -155,6 +162,7 @@ export default class Transition {
         }
         if (this.onChangeCall) {
             this.onChangeCall(this.getJson());
+            this.onDoneCall(this.getJson());
         }
         this._isDone = true;
         return this;

package/Transition.ts

@@ -14,8 +14,13 @@ function bezier(arr: [number, number, number, number], t: number) {
     return result;
 }
 
+export type TransitionParame = {
+    // [key: string]: number | Vector2 | Vector3 | Color | `#${string}`
+    [key: string]: number
+}
+
 // 过渡动画插件
-export default class Transition<T extends { [key: string]: number }> {
+export default class Transition<T extends TransitionParame, K extends Extract<keyof T, string>> {
 
     /**
      *Creates an instance of transition.
@@ -38,7 +43,7 @@ export default class Transition<T extends { [key: string]: number }> {
     }
 
     // 所有的 key 的枚举
-    _keys: Array<keyof T & string> = [];
+    _keys: Array<Extract<keyof T, string>> = [];
 
     // 贝塞尔曲线
     _bezier: [number, number, number, number] = [0.8, 0, 0.2, 1];
@@ -80,34 +85,47 @@ export default class Transition<T extends { [key: string]: number }> {
     }
 
     // 存储 每个参数的 起始位置 起始时间 终止位置  终止时间
-    _: { [key: string]: number } = {};
+    _: { [key in `${K}_start` | `${K}_end` | `${K}_startTime`]: T[K] } = {} as { [key in `${K}_start` | `${K}_end` | `${K}_startTime`]: T[K] };
+
+    // 数据改变的事件回调
+    private onChangeCall = (josn: T) => { };
 
-    private onChangeCall = (josn: { [key in keyof T]: number }) => { };
+    //结束的事件回调
+    private onDoneCall = (josn: T) => { };
 
     // 执行过度动画
     run({ timeTemp }: any) {
         this.timeTemp = timeTemp;
-        if (!this.onChangeCall || this.isDone()) {
+
+        this.onChangeCall(this.getJson());
+
+        if (this.isDone()) {
+            this.onDoneCall(this.getJson());
             threeUtils.removeEventListener("requestAnimationFrame", this.runbindThis);
-        } else {
-            this.onChangeCall(this.getJson());
         }
+
         return this;
     }
 
     runbindThis = this.run.bind(this);
 
     // 设置动画对象的回调事件
-    onChange(onChangeCall: (josn: { [key in keyof T]: number }) => void): this {
+    onChange(onChangeCall: (josn: T) => void): this {
         this.onChangeCall = onChangeCall;
         this.onChangeCall(this.getJson());
         return this;
     }
 
+    //设置动画对象的
+    onDone(onDoneCall: (josn: T) => void): this {
+        this.onDoneCall = onDoneCall;
+        return this;
+    }
+
     // 计算当前 key 的值
-    get(key: keyof T & string): number {
+    get(key: Extract<keyof T, string>): T[K] {
 
-        key = String(key);
+        key = String(key) as Extract<keyof T, string>;
 
         if (this._keys.includes(key) && this.timeTemp < (this._[key + "_startTime"] + this._duration)) {
 
@@ -141,18 +159,18 @@ export default class Transition<T extends { [key: string]: number }> {
             return this._[key + "_end"];
         }
 
-        // `没有 ${key} 的值`;
-        return 0;
+        // `没有 ${ key } 的值`;
+        return 0 as T[K];
     }
 
-    async set(param: { [key in keyof T & string]: number }): Promise<this> {
+    async set(param: T): Promise<this> {
 
         let timetemp = performance.now() + this._delay;;
 
         for (let key in param) {
 
             // 有就赋值
-            if (this._keys.includes(key) && Math.abs(param[key] - this._[key + "_end"]) > 0.001) {
+            if (this._keys.includes(key) && Math.abs(param[key] - this._[key + "_end"]) > 0.0001) {
 
                 this._[key + "_start"] = this.get(key);
 
@@ -195,7 +213,7 @@ export default class Transition<T extends { [key: string]: number }> {
         return this;
     }
     // 重置起始和终止位置
-    reset(param: { [key in keyof T & string]: number }): this {
+    reset(param: Partial<T>): this {
 
         for (let key in param) {
 
@@ -210,6 +228,7 @@ export default class Transition<T extends { [key: string]: number }> {
 
         if (this.onChangeCall) {
             this.onChangeCall(this.getJson());
+            this.onDoneCall(this.getJson());
         }
 
         this._isDone = true;
@@ -217,20 +236,20 @@ export default class Transition<T extends { [key: string]: number }> {
     }
 
     // 获取过渡对象上面的key
-    getKeys(): Array<keyof T & string> {
+    getKeys(): Array<Extract<keyof T, string>> {
         return [...this._keys];
     }
 
     // 判断是否有这个参数
-    hasKey(key: keyof T & string): boolean {
+    hasKey(key: Extract<keyof T, string>): boolean {
         return this._keys.includes(key);
     }
 
     // 获取全部参数
-    getJson(): { [key in keyof T]: number } {
+    getJson(): T {
         let keys = this.getKeys();
 
-        let json: { [key in keyof T]: number } = {} as T;
+        let json: T = {} as T;
 
         keys.map(key => {
             json[key] = this.get(key);

package/package.json

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

package/threeLoader.d.ts

@@ -19,7 +19,7 @@ declare class ThreeLoader extends EventDispatcher {
     gltfLoader: GLTFLoader;
     usdzLoader: USDZLoader;
     /** 加载模型支持glb,fbx,stl,obj */
-    loadModal(url: string): Promise<Object3D<import("three").Object3DEventMap>>;
+    loadModal(url: string, filename?: 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, Mesh, MeshLambertMaterial, Object3D, RepeatWrapping, TextureLoader, VideoTexture } from "three";
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, 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";
@@ -19,6 +19,7 @@ import dracoWasmWrapperJS from "./lib/draco/draco_wasm_wrapper.js?url";
 import dracoDecoderJS from "./lib/draco/draco_decoder.js?url";
 //@ts-ignore
 import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
+import { get } from "lodash";
 // 加载器
 class ThreeLoader extends EventDispatcher {
     constructor() {
@@ -123,16 +124,18 @@ class ThreeLoader extends EventDispatcher {
     //usdz加载器
     usdzLoader = new USDZLoader();
     /** 加载模型支持glb,fbx,stl,obj */
-    async loadModal(url) {
+    async loadModal(url, filename = "") {
+        // 获取后缀
+        const suffix = (get((filename || url).match(/\.([^\.]+)$/), [1]) || "").toLowerCase();
         let Object3d = new Object3D();
-        if (/\.fbx$/i.test(url)) {
+        if (["fbx"].includes(suffix)) {
             await threeLoader.fbxLoader.loadAsync(url).then(res => {
                 Object3d = res;
             }).catch(() => {
                 console.error(`${url},加载失败`);
             });
         }
-        else if (/\.(gltf|glb)$/i.test(url)) {
+        else if (["gltf", "glb"].includes(suffix)) {
             await threeLoader.gltfLoader.loadAsync(url).then(res => {
                 Object3d = res.scene;
                 Object3d.animations = res.animations;
@@ -140,16 +143,27 @@ class ThreeLoader extends EventDispatcher {
                 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);
+        else if (["usdz"].includes(suffix)) {
+            await threeLoader.usdzLoader.loadAsync(url).then(res => {
+                Object3d = res; // usdz 目前还不支持骨骼动画
+                Object3d.animations = res.animations;
+                Object3d.traverse(obj => {
+                    const mesh = obj;
+                    if (mesh.isMesh) {
+                        mesh.material.transparent = true;
+                    }
+                });
             }).catch(() => {
                 console.error(`${url},加载失败`);
             });
         }
         else {
-            throw new Error(`${url},不支持的格式`);
+            if (suffix) {
+                console.error(`${suffix},不支持的格式`);
+            }
+            else {
+                console.error(`${url},不支持的格式,请尝试使用 suffix 参数来指定一下格式`);
+            }
         }
         return Object3d;
     }

package/threeLoader.ts

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-02-07 11:11:48
  */
 
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Mesh, MeshLambertMaterial, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture } from "three";
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Material, 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";
@@ -22,6 +22,7 @@ import dracoWasmWrapperJS from "./lib/draco/draco_wasm_wrapper.js?url";
 import dracoDecoderJS from "./lib/draco/draco_decoder.js?url";
 //@ts-ignore
 import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
+import { get } from "lodash";
 
 // 加载器
 class ThreeLoader extends EventDispatcher {
@@ -151,31 +152,45 @@ class ThreeLoader extends EventDispatcher {
     usdzLoader = new USDZLoader();
 
     /** 加载模型支持glb,fbx,stl,obj */
-    async loadModal(url: string) {
+    async loadModal(url: string, filename: string = "") {
+
+        // 获取后缀
+        const suffix = (get((filename || url).match(/\.([^\.]+)$/), [1]) || "").toLowerCase();
+
         let Object3d = new Object3D();
 
-        if (/\.fbx$/i.test(url)) {
+        if (["fbx"].includes(suffix)) {
             await threeLoader.fbxLoader.loadAsync(url).then(res => {
                 Object3d = res;
             }).catch(() => {
                 console.error(`${url},加载失败`);
             })
-        } else if (/\.(gltf|glb)$/i.test(url)) {
+        } else if (["gltf", "glb"].includes(suffix)) {
             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);
+        } else if (["usdz"].includes(suffix)) {
+            await threeLoader.usdzLoader.loadAsync(url).then(res => {
+                Object3d = res; // usdz 目前还不支持骨骼动画
+                Object3d.animations = res.animations;
+                Object3d.traverse(obj => {
+                    const mesh = (obj as Mesh);
+                    if (mesh.isMesh) {
+                        (mesh.material as Material).transparent = true;
+                    }
+                });
             }).catch(() => {
                 console.error(`${url},加载失败`);
             })
         } else {
-            throw new Error(`${url},不支持的格式`);
+            if (suffix) {
+                console.error(`${suffix},不支持的格式`);
+            } else {
+                console.error(`${url},不支持的格式,请尝试使用 suffix 参数来指定一下格式`);
+            }
         }
 
         return Object3d;