three-base 2.0.89 → 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.89",
+  "version": "2.0.91",
   "description": "three 3d three-base",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"