three-base 2.0.88 → 2.0.89

package/package.json

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

package/threeLoader.d.ts

@@ -23,8 +23,8 @@ declare class ThreeLoader extends EventDispatcher {
     gltfLoader: GLTFLoader;
     usdzLoader: USDZLoader;
     setFlipYIsFalse<T extends Material | Material[]>(material: T): void;
-    /** 加载模型支持glb,fbx,stl,obj */
-    loadModel(url: string, filename?: string): any;
+    /** 加载模型支持glb,gltf,fbx,stl,obj,usdz,dae,zip */
+    loadModel(url: string | File | Array<File>, filename?: string): any;
     onload: boolean;
 }
 declare const threeLoader: ThreeLoader;

package/threeLoader.js

@@ -25,6 +25,7 @@ import axios from "axios";
 import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
 import threeUtils from "./threeUtils";
 import { generateUUID } from "three/src/math/MathUtils";
+import { isString } from "lodash";
 // 加载器
 class ThreeLoader extends EventDispatcher {
     constructor() {
@@ -178,21 +179,65 @@ class ThreeLoader extends EventDispatcher {
             });
         }
     }
-    /** 加载模型支持glb,fbx,stl,obj */
+    /** 加载模型支持glb,gltf,fbx,stl,obj,usdz,dae,zip */
     async loadModel(url, filename = "") {
-        // 获取后缀
-        const suffix = threeUtils.getSuffix(filename || url);
+        // 本次需要销毁的bloburl,加载完成后就去销毁本次的文件
+        const revokeObjectfile = [];
+        // 获取模型文件的后缀
+        const suffix = await (async () => {
+            if (isString(url)) {
+                return threeUtils.getSuffix(filename || url);
+            }
+            else if (url instanceof File) {
+                return threeUtils.getSuffix(filename || url.name);
+            }
+            else if (url instanceof Array) {
+                let suffix = "";
+                const suffixs = ["obj", "glb", "gltf", "fbx", "dae", "stl", "usdz"];
+                for (let file of url) {
+                    suffix = threeUtils.getSuffix(file.name);
+                    if (suffixs.includes(suffix)) {
+                        break;
+                    }
+                }
+                return threeUtils.getSuffix(filename || suffix);
+            }
+        })();
+        //获取模型文件的地址
+        const modelurl = await (async () => {
+            if (isString(url)) {
+                return url;
+            }
+            else if (url instanceof File) {
+                const bloburl = await threeUtils.fileToBloburl(url);
+                this._blobs[url.name] = bloburl;
+                revokeObjectfile.push(url.name);
+                return bloburl;
+            }
+            else if (url instanceof Array) {
+                let modelurl = "";
+                const suffixs = ["obj", "glb", "gltf", "fbx", "dae", "stl", "usdz"];
+                for (let file of url) {
+                    const bloburl = await threeUtils.fileToBloburl(file);
+                    this._blobs[file.name] = bloburl;
+                    revokeObjectfile.push(file.name);
+                    if (suffixs.includes(threeUtils.getSuffix(file.name))) {
+                        modelurl = file.name;
+                    }
+                }
+                return modelurl;
+            }
+        })();
         switch (suffix) {
             case "zip":
                 const JSZip = (await import("jszip")).default;
-                const arrayBuffer = await axios
-                    .get(url, {
-                    responseType: "arraybuffer",
-                })
-                    .then((res) => res.data)
-                    .catch((err) => {
-                    throw new Error(`${url} 加载失败`);
-                });
+                let arrayBuffer = isString(url)
+                    ? await axios
+                        .get(url, {
+                        responseType: "arraybuffer",
+                    })
+                        .then((res) => res.data)
+                    : url;
                 return await JSZip.loadAsync(arrayBuffer).then(async (zip) => {
                     for (let filename in zip.files) {
                         if (!zip.files[filename].dir) {
@@ -203,6 +248,7 @@ class ThreeLoader extends EventDispatcher {
                                 .then((blob) => {
                                 var blobURL = URL.createObjectURL(blob);
                                 this._blobs[filename] = blobURL;
+                                revokeObjectfile.push(filename);
                             });
                         }
                     }
@@ -221,6 +267,10 @@ class ThreeLoader extends EventDispatcher {
                     let obj = Object.keys(zip.files).find((filename) => /\.obj$/.test(filename));
                     if (obj) {
                         const objObject3d = await objLoader.loadAsync(obj);
+                        revokeObjectfile.map((filename) => {
+                            URL.revokeObjectURL(this._blobs[filename]);
+                            delete this._blobs[filename];
+                        });
                         objObject3d.traverse((obj) => {
                             const mesh = obj;
                             if (mesh.isMesh) {
@@ -274,8 +324,12 @@ class ThreeLoader extends EventDispatcher {
                 });
             case "fbx":
                 return await threeLoader.fbxLoader
-                    .loadAsync(url)
+                    .loadAsync(modelurl)
                     .then((res) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
                     return res;
                 })
                     .catch(() => {
@@ -284,8 +338,12 @@ class ThreeLoader extends EventDispatcher {
             case "gltf":
             case "glb":
                 return await threeLoader.gltfLoader
-                    .loadAsync(url)
+                    .loadAsync(modelurl)
                     .then((res) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
                     res.scene.animations = res.animations;
                     return res.scene;
                 })
@@ -294,8 +352,12 @@ class ThreeLoader extends EventDispatcher {
                 });
             case "stl":
                 return await threeLoader.stlLoader
-                    .loadAsync(url)
+                    .loadAsync(modelurl)
                     .then((geometry) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
                     return new Mesh(geometry, new MeshStandardMaterial({
                         metalness: 0.5,
                         roughness: 0.5,
@@ -306,8 +368,12 @@ class ThreeLoader extends EventDispatcher {
                 });
             case "usdz":
                 return await threeLoader.usdzLoader
-                    .loadAsync(url)
+                    .loadAsync(modelurl)
                     .then((res) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
                     res.traverse((obj) => {
                         const mesh = obj;
                         if (mesh.isMesh) {
@@ -320,7 +386,18 @@ class ThreeLoader extends EventDispatcher {
                     console.log(`${url},加载失败`, err);
                 });
             case "obj":
-                const objObject3d = await this.objLoader.loadAsync(url);
+                let objLoader = new OBJLoader();
+                // 如果有mtl文件就加载mtl文件
+                let mtl = revokeObjectfile.find((filename) => /\.mtl$/.test(filename));
+                if (mtl) {
+                    const materials = await this.mtlLoader.loadAsync(mtl);
+                    objLoader.setMaterials(materials);
+                }
+                const objObject3d = await objLoader.loadAsync(modelurl);
+                revokeObjectfile.map((filename) => {
+                    URL.revokeObjectURL(this._blobs[filename]);
+                    delete this._blobs[filename];
+                });
                 objObject3d.traverse((obj) => {
                     const mesh = obj;
                     if (mesh.isMesh) {
@@ -343,6 +420,10 @@ class ThreeLoader extends EventDispatcher {
                 });
                 return objObject3d;
             default:
+                revokeObjectfile.map((filename) => {
+                    URL.revokeObjectURL(this._blobs[filename]);
+                    delete this._blobs[filename];
+                });
                 if (suffix) {
                     console.log(`${suffix},不支持的格式`);
                 }

package/threeUtils.d.ts

@@ -44,6 +44,7 @@ declare class ThreeUtils extends EventDispatcher {
     dipose(object3d: Object3D): void;
     getSuffix(filename: string): string;
     getFilename(url: string): string;
+    fileToBloburl(file: File): Promise<string>;
 }
 declare const threeUtils: ThreeUtils;
 export default threeUtils;

package/threeUtils.js

@@ -262,7 +262,7 @@ class ThreeUtils extends EventDispatcher {
     }
     // 获取文件名的后缀
     getSuffix(filename) {
-        const match = filename.match(/\.([^\.]+)$/);
+        const match = filename.match(/([^\.]+)$/);
         return match ? match[1].toLowerCase() : "";
     }
     // 从url 中提取文件名
@@ -273,6 +273,22 @@ class ThreeUtils extends EventDispatcher {
         const filename = path.substring(path.lastIndexOf("/") + 1);
         return filename;
     }
+    //文件转blob
+    fileToBloburl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = function (event) {
+                const arrayBuffer = event.target.result;
+                const blob = new Blob([arrayBuffer]);
+                const bloburl = URL.createObjectURL(blob);
+                resolve(bloburl);
+            };
+            reader.onerror = function (error) {
+                throw new Error(`文件转blbo 失败,${file.name}`);
+            };
+            reader.readAsArrayBuffer(file);
+        });
+    }
 }
 const threeUtils = new ThreeUtils();
 export default threeUtils;