three-base 2.0.88 → 2.0.91

package/InstancedMeshBase.d.ts

@@ -16,11 +16,11 @@ export default class InstancedMeshBase extends MeshBase {
     static _matrix: Matrix4;
     instanceMatrix: InstancedBufferAttribute;
     instanceColor: InstancedBufferAttribute;
-    loadModel(url: string, filename?: string): Promise<void>;
+    loadModel(url: string | File | Array<File>, filename?: string): Promise<void>;
     computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
     setCount(count?: number): Promise<void>;
     setMatrixAt(index: number, matrix?: Matrix4): Promise<void>;
-    setTRS(index: number, { position, rotation, scale }: {
+    setTRS(index: number, { position, rotation, scale, }: {
         position?: Vector3;
         rotation?: Euler;
         scale?: Vector3;

package/InstancedMeshBase.js

@@ -4,8 +4,8 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2024-06-07 22:14:53
  */
-import { throttle } from "lodash";
-import { Euler, InstancedBufferAttribute, InstancedMesh, Matrix4, Quaternion, Vector3 } from "three";
+import { isString, throttle } from "lodash";
+import { Euler, InstancedBufferAttribute, InstancedMesh, Matrix4, Quaternion, Vector3, } from "three";
 import MeshBase from "./MeshBase";
 import threeUtils from "./threeUtils";
 import threeLoader from "./threeLoader";
@@ -29,27 +29,50 @@ export default class InstancedMeshBase extends MeshBase {
     instanceColor = new InstancedBufferAttribute(new Float32Array(0 * 3), 3);
     // 重构加载模型的方法
     async loadModel(url, filename = "") {
-        this.url = url;
+        //获取模型文件的地址
+        const modelurl = await (async () => {
+            if (isString(url)) {
+                return url;
+            }
+            else if (url instanceof File) {
+                return url.name;
+            }
+            else if (url instanceof Array) {
+                let modelurl = "";
+                const suffixs = ["obj", "glb", "gltf", "fbx", "dae", "stl", "usdz"];
+                for (let file of url) {
+                    if (suffixs.includes(threeUtils.getSuffix(file.name))) {
+                        modelurl = file.name;
+                    }
+                }
+                return modelurl;
+            }
+        })();
+        if (this.url === modelurl) {
+            return;
+        }
+        this.url = modelurl;
         if (!url) {
             this.clear();
             return;
         }
         this.loaded = false;
         // 没有模型并且没有加载任务时就去加载模型
-        if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
-            MeshBase.loadModeling.set(url, true);
+        if (!MeshBase.models.get(this.url) &&
+            !MeshBase.loadModeling.get(this.url)) {
+            MeshBase.loadModeling.set(this.url, true);
             // 万能加载器
             let modal = await threeLoader.loadModel(url, filename);
-            MeshBase.models.set(url, modal);
-            MeshBase.loadModeling.set(url, false);
+            MeshBase.models.set(this.url, modal);
+            MeshBase.loadModeling.set(this.url, false);
         }
         // 如果模型还在加载中, 就等待模型加载完成
         do {
-            await new Promise(resolve => setTimeout(resolve, 50));
-        } while (MeshBase.loadModeling.get(url));
-        if (MeshBase.models.get(url)) {
+            await new Promise((resolve) => setTimeout(resolve, 50));
+        } while (MeshBase.loadModeling.get(this.url));
+        if (MeshBase.models.get(this.url)) {
             this.clear();
-            const mesh = MeshBase.models.get(url);
+            const mesh = MeshBase.models.get(this.url);
             // // 判断是否有动画
             // this.hasAnimation = mesh.animations.length > 0;
             // if (this.hasAnimation) {
@@ -76,7 +99,7 @@ export default class InstancedMeshBase extends MeshBase {
                     mesh.rotation.setFromQuaternion(mesh.quaternion);
                     mesh.updateMatrix();
                     // same geometry and same material consider as the same mesh
-                    const uuid = mesh.geometry.uuid + '/' + mesh.material.uuid;
+                    const uuid = mesh.geometry.uuid + "/" + mesh.material.uuid;
                     if (meshCollect[uuid]) {
                         meshCollect[uuid].push(mesh);
                     }
@@ -91,7 +114,7 @@ export default class InstancedMeshBase extends MeshBase {
                 }
             });
             // create all instances
-            Object.keys(meshCollect).forEach(uuid => {
+            Object.keys(meshCollect).forEach((uuid) => {
                 const meshes = meshCollect[uuid];
                 const mesh = meshes[0];
                 const instancedMesh = new InstancedMesh(mesh.geometry, mesh.material, meshes.length * this.count);
@@ -101,7 +124,7 @@ export default class InstancedMeshBase extends MeshBase {
                 this.add(instancedMesh);
             });
             // 加载完成事件
-            await new Promise(resolve => setTimeout(resolve, 30));
+            await new Promise((resolve) => setTimeout(resolve, 30));
             // 加载完成事件
             this.loaded = true;
             this.dispatchEvent({ type: "loaded" });
@@ -109,7 +132,7 @@ export default class InstancedMeshBase extends MeshBase {
     }
     // 更新包围盒
     computeBoundingSphere = throttle(() => {
-        this.children.map(instancedMesh => {
+        this.children.map((instancedMesh) => {
             instancedMesh.computeBoundingSphere();
         });
     }, 1000);
@@ -152,7 +175,7 @@ export default class InstancedMeshBase extends MeshBase {
     async setMatrixAt(index, matrix = new Matrix4().identity()) {
         const new_matrix = matrix.clone(); // 把矩阵克隆一下避免对象引用问题
         await this.awaitLoaded();
-        Object.keys(this.meshCollect).forEach(uuid => {
+        Object.keys(this.meshCollect).forEach((uuid) => {
             const instancedMesh = this.instanceCollect[uuid];
             const collect = this.meshCollect[uuid];
             collect.forEach((mesh, i) => {
@@ -165,12 +188,12 @@ export default class InstancedMeshBase extends MeshBase {
         this.computeBoundingSphere();
     }
     //设置移动旋转缩放
-    async setTRS(index, { position, rotation, scale }) {
+    async setTRS(index, { position, rotation, scale, }) {
         const new_position = position ? position.clone() : undefined;
         const new_rotation = rotation ? rotation.clone() : undefined;
         const new_scale = scale ? scale.clone() : undefined;
         await this.awaitLoaded();
-        Object.keys(this.meshCollect).forEach(uuid => {
+        Object.keys(this.meshCollect).forEach((uuid) => {
             const instancedMesh = this.instanceCollect[uuid];
             const collect = this.meshCollect[uuid];
             collect.forEach((mesh, i) => {
@@ -194,7 +217,7 @@ export default class InstancedMeshBase extends MeshBase {
     // 设置颜色
     async setColorAt(index, color) {
         await this.awaitLoaded();
-        Object.keys(this.meshCollect).forEach(uuid => {
+        Object.keys(this.meshCollect).forEach((uuid) => {
             const instancedMesh = this.instanceCollect[uuid];
             const collect = this.meshCollect[uuid];
             collect.forEach((mesh, i) => {
@@ -210,7 +233,7 @@ export default class InstancedMeshBase extends MeshBase {
     updateMatrixWorld(force) {
         super.updateMatrixWorld(force);
         const { cursor, enableEvent } = this.userData;
-        this.traverse(obj => {
+        this.traverse((obj) => {
             Object.assign(obj.userData, { cursor, enableEvent });
         });
     }
@@ -219,14 +242,14 @@ export default class InstancedMeshBase extends MeshBase {
         super.addEventListener(name, callback);
         await this.awaitLoaded();
         super.addEventListener(name, callback);
-        this.children.map(mesh => {
+        this.children.map((mesh) => {
             mesh.addEventListener(name, callback);
         });
     }
     // 取消事件的监听
     removeEventListener(name, callback) {
         super.removeEventListener(name, callback);
-        this.children.map(mesh => {
+        this.children.map((mesh) => {
             mesh.removeEventListener(name, callback);
         });
     }

package/MeshBase.d.ts

@@ -11,7 +11,7 @@ export default class MeshBase extends Group {
         [key: string]: AnimationAction;
     };
     getSuffix(filename: string): string;
-    loadModel(url: string, filename?: string): Promise<void>;
+    loadModel(url: string | File | Array<File>, filename?: string): Promise<void>;
     frustumCulled: boolean;
     castShadow: boolean;
     receiveShadow: boolean;

package/MeshBase.js

@@ -1,7 +1,8 @@
-import { AnimationMixer, Clock, Group, 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';
+import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils";
+import { isString } from "lodash";
 // 模型基类
 export default class MeshBase extends Group {
     constructor(url) {
@@ -24,38 +25,61 @@ export default class MeshBase extends Group {
     // 获取文件名的后缀
     getSuffix(filename) {
         const match = filename.match(/\.([^\.]+)$/);
-        return match ? match[1].toLowerCase() : '';
+        return match ? match[1].toLowerCase() : "";
     }
     // 如果url 是blob地址的话,就用suffix字段来制定模型的类型
     async loadModel(url, filename = "") {
-        this.url = url;
-        if (!url) {
+        //获取模型文件的地址
+        const modelurl = await (async () => {
+            if (isString(url)) {
+                return url;
+            }
+            else if (url instanceof File) {
+                return url.name;
+            }
+            else if (url instanceof Array) {
+                let modelurl = "";
+                const suffixs = ["obj", "glb", "gltf", "fbx", "dae", "stl", "usdz"];
+                for (let file of url) {
+                    if (suffixs.includes(threeUtils.getSuffix(file.name))) {
+                        modelurl = file.name;
+                    }
+                }
+                return modelurl;
+            }
+        })();
+        if (this.url === modelurl) {
+            return;
+        }
+        this.url = modelurl;
+        if (!modelurl) {
             this.clear();
             return;
         }
         this.loaded = false;
         // 没有模型并且没有加载任务时就去加载模型
-        if (!MeshBase.models.get(url) && !MeshBase.loadModeling.get(url)) {
-            MeshBase.loadModeling.set(url, true);
+        if (!MeshBase.models.get(modelurl) &&
+            !MeshBase.loadModeling.get(modelurl)) {
+            MeshBase.loadModeling.set(modelurl, true);
             // 万能加载器
             let modal = await threeLoader.loadModel(url, filename);
-            MeshBase.models.set(url, modal);
-            MeshBase.loadModeling.set(url, false);
+            MeshBase.models.set(modelurl, modal);
+            MeshBase.loadModeling.set(modelurl, false);
         }
         // 如果模型还在加载中, 就等待模型加载完成
         do {
-            await new Promise(resolve => setTimeout(resolve, 50));
-        } while (MeshBase.loadModeling.get(url));
-        if (MeshBase.models.get(url)) {
+            await new Promise((resolve) => setTimeout(resolve, 50));
+        } while (MeshBase.loadModeling.get(modelurl));
+        if (MeshBase.models.get(modelurl)) {
             this.clear();
-            const mesh = MeshBase.models.get(url);
+            const mesh = MeshBase.models.get(modelurl);
             // 判断是否有动画
             this.hasAnimation = mesh.animations.length > 0;
             if (this.hasAnimation) {
                 const model = SkeletonUtils.clone(mesh);
                 this.mixer = new AnimationMixer(model);
                 this.animationActions = {};
-                mesh.animations.map(animation => {
+                mesh.animations.map((animation) => {
                     const animationAction = this.mixer.clipAction(animation).play();
                     animationAction.weight = 0;
                     this.animationActions[animation.name] = animationAction;
@@ -66,7 +90,7 @@ export default class MeshBase extends Group {
                 this.add(mesh.clone(true));
             }
         }
-        await new Promise(resolve => requestAnimationFrame(resolve));
+        await new Promise((resolve) => requestAnimationFrame(resolve));
         this.loaded = true;
         // 加载完成事件
         this.dispatchEvent({ type: "loaded" });
@@ -86,7 +110,7 @@ export default class MeshBase extends Group {
                 if (this.resoles.length === 0) {
                     (async () => {
                         while (!this.loaded) {
-                            await new Promise(resolve => requestAnimationFrame(resolve));
+                            await new Promise((resolve) => requestAnimationFrame(resolve));
                         }
                         while (this.resoles.length > 0) {
                             const resole = this.resoles.pop();
@@ -102,7 +126,7 @@ export default class MeshBase extends Group {
     async traverseMesh(callback) {
         // 等待加载完成
         await this.awaitLoaded();
-        this.traverse(obj => {
+        this.traverse((obj) => {
             const mesh = obj;
             if (mesh.isMesh) {
                 callback(mesh);
@@ -136,7 +160,7 @@ export default class MeshBase extends Group {
             this.mixer.update(this.clock.getDelta());
         }
         // 深度应用属性
-        this.traverse(obj => {
+        this.traverse((obj) => {
             const mesh = obj;
             if (mesh.isMesh) {
                 mesh.frustumCulled = this.frustumCulled;
@@ -168,7 +192,7 @@ export default class MeshBase extends Group {
     }
     //按照法线拓展
     expandBynormal(length) {
-        this.traverseMesh(mesh => {
+        this.traverseMesh((mesh) => {
             // 没有法线就计算法线
             mesh.geometry = mesh.geometry.clone();
             if (!mesh.geometry.getAttribute("normal")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-base",
-  "version": "2.0.88",
+  "version": "2.0.91",
   "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;