three-base 2.0.27 → 2.0.29

package/MeshBase.d.ts

@@ -1,19 +1,28 @@
-import { Group, Mesh, Object3D, Vector3 } from "three";
+import { AnimationAction, AnimationMixer, Clock, Group, Mesh, Object3D, Vector3 } from "three";
 export default class MeshBase extends Group {
     constructor(url?: string);
     static models: Map<string, Object3D>;
     static loadModeling: Map<string, boolean>;
     loaded: boolean;
+    hasAnimation: boolean;
+    mixer?: AnimationMixer;
+    animationActions: {
+        [key: string]: AnimationAction;
+    };
     loadModel(url: string): Promise<void>;
     frustumCulled: boolean;
     castShadow: boolean;
     receiveShadow: boolean;
+    awaitLoaded(callback?: Function): Promise<void>;
     traverseMesh(callback: (mesh: Mesh) => void): Promise<void>;
+    clock: Clock;
+    setClipActionWeight(weights?: {
+        [key: string]: number;
+    }): Promise<void>;
     updateMatrix(): void;
-    applyAllTranstion(): void;
-    getSize(): Vector3;
-    center(): void;
-    alignBottom(y?: number): void;
-    scaleTo(size?: number, key?: Array<"x" | "y" | "z">): void;
+    getSize(): Promise<Vector3>;
+    center(): Promise<void>;
+    alignBottom(y?: number): Promise<void>;
+    scaleTo(size?: number, key?: Array<"x" | "y" | "z">): Promise<void>;
     expandBynormal(length: number): void;
 }

package/MeshBase.js

@@ -1,6 +1,7 @@
-import { DoubleSide, Group, Object3D, Vector3 } from "three";
+import { AnimationMixer, Clock, Group, Object3D, Vector3 } from "three";
 import threeUtils from "./threeUtils";
 import threeLoader from "./threeLoader";
+import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
 // 模型基类
 export default class MeshBase extends Group {
     constructor(url) {
@@ -13,6 +14,12 @@ export default class MeshBase extends Group {
     static loadModeling = new Map();
     // 加载完成
     loaded = false;
+    // 是否有动画
+    hasAnimation = false;
+    //动画混合器
+    mixer;
+    //动画剪辑对象数组
+    animationActions = {};
     async loadModel(url) {
         if (!url) {
             this.clear();
@@ -33,6 +40,7 @@ export default class MeshBase extends Group {
             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},加载失败`);
                 });
@@ -43,29 +51,32 @@ export default class MeshBase extends Group {
             threeUtils.center(modal);
             threeUtils.alignBottom(modal);
             modal.updateMatrixWorld(true);
-            // 应用全部变换
-            modal.traverse(obj => {
-                const mesh = obj;
-                mesh.position.set(0, 0, 0);
-                mesh.rotation.set(0, 0, 0);
-                mesh.scale.set(1, 1, 1);
-                if (mesh.isMesh) {
-                    mesh.geometry.applyMatrix4(mesh.matrixWorld);
-                    mesh.material.side = DoubleSide;
-                }
-            });
             MeshBase.models.set(url, modal);
             MeshBase.loadModeling.set(url, false);
         }
         // 如果模型还在加载中, 就等待模型加载完成
         do {
-            await new Promise(resolve => setTimeout(resolve, 200));
+            await new Promise(resolve => setTimeout(resolve, 50));
         } while (MeshBase.loadModeling.get(url));
         if (MeshBase.models.get(url)) {
-            const mesh = MeshBase.models.get(url).clone();
             this.clear();
-            this.add(mesh);
-            this.applyAllTranstion();
+            const mesh = MeshBase.models.get(url);
+            // 判断是否有动画
+            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 => {
+                    const animationAction = this.mixer.clipAction(animation).play();
+                    animationAction.weight = 0;
+                    this.animationActions[animation.name] = animationAction;
+                });
+                this.add(model);
+            }
+            else {
+                this.add(mesh);
+            }
         }
         await new Promise(resolve => requestAnimationFrame(resolve));
         // 加载完成事件
@@ -78,11 +89,17 @@ export default class MeshBase extends Group {
     castShadow = false;
     // 接受阴影
     receiveShadow = false;
-    //遍历模型
-    async traverseMesh(callback) {
+    // 等待加载加载完成
+    async awaitLoaded(callback) {
         while (!this.loaded) {
-            await new Promise(resolve => setTimeout(resolve, 100));
+            await new Promise(resolve => setTimeout(resolve, 50));
         }
+        callback && callback();
+    }
+    //遍历模型
+    async traverseMesh(callback) {
+        // 等待加载完成
+        await this.awaitLoaded();
         this.traverse(obj => {
             const mesh = obj;
             if (mesh.isMesh) {
@@ -90,7 +107,20 @@ export default class MeshBase extends Group {
             }
         });
     }
+    clock = new Clock();
+    //设置动画的权重
+    async setClipActionWeight(weights = {}) {
+        // 等待加载完成
+        await this.awaitLoaded();
+        for (let key in this.animationActions) {
+            this.animationActions[key].weight = weights[key] || 0;
+        }
+    }
     updateMatrix() {
+        //播放动画
+        if (this.mixer) {
+            this.mixer.update(this.clock.getDelta());
+        }
         // 深度应用属性
         this.traverse(obj => {
             const mesh = obj;
@@ -102,35 +132,24 @@ export default class MeshBase extends Group {
         });
         super.updateMatrix();
     }
-    // 应用全部变化
-    applyAllTranstion() {
-        this.updateMatrixWorld(true);
-        // 应用全部变换
-        this.traverse(obj => {
-            const mesh = obj;
-            mesh.position.set(0, 0, 0);
-            mesh.rotation.set(0, 0, 0);
-            mesh.scale.set(1, 1, 1);
-            if (mesh.isMesh) {
-                mesh.geometry.applyMatrix4(mesh.matrixWorld);
-                mesh.material.side = DoubleSide;
-            }
-        });
-    }
     // 获取模型的尺寸
-    getSize() {
+    async getSize() {
+        await this.awaitLoaded();
         return threeUtils.getSize(this);
     }
     // 居中
-    center() {
+    async center() {
+        await this.awaitLoaded();
         threeUtils.center(this);
     }
     //底对齐
-    alignBottom(y = 0) {
+    async alignBottom(y = 0) {
+        await this.awaitLoaded();
         threeUtils.alignBottom(this, y);
     }
     // 放大到指定尺寸
-    scaleTo(size = 1, key = ["x", "y", "z"]) {
+    async scaleTo(size = 1, key = ["x", "y", "z"]) {
+        await this.awaitLoaded();
         threeUtils.scaleTo(this, size, key);
     }
     //按照法线拓展

package/MeshBase.ts

@@ -1,7 +1,8 @@
 
-import { DoubleSide, Group, Mesh, MeshStandardMaterial, Object3D, Vector3 } from "three";
+import { AnimationAction, AnimationMixer, Clock, DoubleSide, Group, Mesh, MeshStandardMaterial, Object3D, Vector3 } from "three";
 import threeUtils from "./threeUtils";
 import threeLoader from "./threeLoader";
+import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
 
 // 模型基类
 export default class MeshBase extends Group {
@@ -19,6 +20,15 @@ export default class MeshBase extends Group {
     // 加载完成
     loaded = false;
 
+    // 是否有动画
+    hasAnimation = false;
+
+    //动画混合器
+    mixer?: AnimationMixer;
+
+    //动画剪辑对象数组
+    animationActions: { [key: string]: AnimationAction } = {};
+
     async loadModel(url: string) {
         if (!url) {
             this.clear();
@@ -42,6 +52,7 @@ export default class MeshBase extends Group {
             } 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},加载失败`);
                 })
@@ -53,32 +64,38 @@ export default class MeshBase extends Group {
             threeUtils.alignBottom(modal);
             modal.updateMatrixWorld(true);
 
-            // 应用全部变换
-            modal.traverse(obj => {
-                const mesh = obj as Mesh;
-                mesh.position.set(0, 0, 0);
-                mesh.rotation.set(0, 0, 0);
-                mesh.scale.set(1, 1, 1);
-                if (mesh.isMesh) {
-                    mesh.geometry.applyMatrix4(mesh.matrixWorld);
-                    (mesh.material as MeshStandardMaterial).side = DoubleSide;
-                }
-            });
-
             MeshBase.models.set(url, modal);
             MeshBase.loadModeling.set(url, false);
         }
 
         // 如果模型还在加载中, 就等待模型加载完成
         do {
-            await new Promise(resolve => setTimeout(resolve, 200));
+            await new Promise(resolve => setTimeout(resolve, 50));
         } while (MeshBase.loadModeling.get(url));
 
         if (MeshBase.models.get(url)) {
-            const mesh = MeshBase.models.get(url)!.clone();
+
             this.clear();
-            this.add(mesh);
-            this.applyAllTranstion();
+            const mesh = MeshBase.models.get(url);
+            // 判断是否有动画
+            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 => {
+                    const animationAction = this.mixer.clipAction(animation).play();
+                    animationAction.weight = 0;
+                    this.animationActions[animation.name] = animationAction;
+                });
+
+                this.add(model);
+            } else {
+                this.add(mesh);
+            }
+
         }
 
         await new Promise(resolve => requestAnimationFrame(resolve));
@@ -98,12 +115,18 @@ export default class MeshBase extends Group {
     // 接受阴影
     receiveShadow: boolean = false;
 
-    //遍历模型
-    async traverseMesh(callback: (mesh: Mesh) => void) {
-
+    // 等待加载加载完成
+    async awaitLoaded(callback?: Function) {
         while (!this.loaded) {
-            await new Promise(resolve => setTimeout(resolve, 100));
+            await new Promise(resolve => setTimeout(resolve, 50));
         }
+        callback && callback();
+    }
+
+    //遍历模型
+    async traverseMesh(callback: (mesh: Mesh) => void) {
+        // 等待加载完成
+        await this.awaitLoaded();
 
         this.traverse(obj => {
             const mesh = obj as Mesh;
@@ -113,8 +136,22 @@ export default class MeshBase extends Group {
         });
     }
 
-    updateMatrix(): void {
+    clock = new Clock();
 
+    //设置动画的权重
+    async setClipActionWeight(weights: { [key: string]: number } = {}) {
+        // 等待加载完成
+        await this.awaitLoaded();
+        for (let key in this.animationActions) {
+            this.animationActions[key].weight = weights[key] || 0;
+        }
+    }
+
+    updateMatrix(): void {
+        //播放动画
+        if (this.mixer) {
+            this.mixer.update(this.clock.getDelta());
+        }
         // 深度应用属性
         this.traverse(obj => {
             const mesh = obj as Mesh;
@@ -128,39 +165,27 @@ export default class MeshBase extends Group {
         super.updateMatrix();
     }
 
-    // 应用全部变化
-    applyAllTranstion() {
-        this.updateMatrixWorld(true);
-        // 应用全部变换
-        this.traverse(obj => {
-            const mesh = obj as Mesh;
-            mesh.position.set(0, 0, 0);
-            mesh.rotation.set(0, 0, 0);
-            mesh.scale.set(1, 1, 1);
-            if (mesh.isMesh) {
-                mesh.geometry.applyMatrix4(mesh.matrixWorld);
-                (mesh.material as MeshStandardMaterial).side = DoubleSide;
-            }
-        });
-    }
-
     // 获取模型的尺寸
-    getSize() {
+    async getSize() {
+        await this.awaitLoaded();
         return threeUtils.getSize(this);
     }
 
     // 居中
-    center() {
+    async center() {
+        await this.awaitLoaded();
         threeUtils.center(this);
     }
 
     //底对齐
-    alignBottom(y: number = 0) {
+    async alignBottom(y: number = 0) {
+        await this.awaitLoaded();
         threeUtils.alignBottom(this, y);
     }
 
     // 放大到指定尺寸
-    scaleTo(size: number = 1, key: Array<"x" | "y" | "z"> = ["x", "y", "z"]) {
+    async scaleTo(size: number = 1, key: Array<"x" | "y" | "z"> = ["x", "y", "z"]) {
+        await this.awaitLoaded();
         threeUtils.scaleTo(this, size, key);
     }
 

package/ThreeBase.js

@@ -187,7 +187,12 @@ export default class ThreeBase extends EventDispatcher {
     frame = 50;
     init() {
         // 资源加载进度有更新时, 需要渲染
-        threeLoader.addEventListener("progress", () => {
+        threeLoader.addEventListener("loadding", () => {
+            this.dispatchEvent({ type: "loadding" });
+            this.needRender = true;
+        });
+        threeLoader.addEventListener("onLoad", () => {
+            this.dispatchEvent({ type: "onLoad" });
             this.needRender = true;
         });
     }

package/ThreeBase.ts

@@ -227,7 +227,13 @@ export default class ThreeBase extends EventDispatcher {
 
     init() {
         // 资源加载进度有更新时, 需要渲染
-        threeLoader.addEventListener("progress", () => {
+        threeLoader.addEventListener("loadding", () => {
+            this.dispatchEvent({ type: "loadding" } as never);
+            this.needRender = true;
+        });
+        
+        threeLoader.addEventListener("onLoad", () => {
+            this.dispatchEvent({ type: "onLoad" } as never);
             this.needRender = true;
         });
 

package/package.json

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

package/threeLoader.js

@@ -26,8 +26,13 @@ class ThreeLoader extends EventDispatcher {
             this.onload = false;
         };
         // 有资源加载完成时通知渲染器
-        DefaultLoadingManager.onProgress = () => {
-            this.dispatchEvent({ type: "progress" });
+        DefaultLoadingManager.onProgress = (url, loaded, total) => {
+            if (loaded < total) {
+                this.dispatchEvent({ type: "loadding" });
+            }
+            else if (loaded === total) {
+                this.dispatchEvent({ type: "onLoad" });
+            }
         };
         DefaultLoadingManager.onLoad = () => {
             this.onload = true;

package/threeLoader.ts

@@ -32,8 +32,12 @@ class ThreeLoader extends EventDispatcher {
         }
 
         // 有资源加载完成时通知渲染器
-        DefaultLoadingManager.onProgress = () => {
-            this.dispatchEvent({ type: "progress" } as never);
+        DefaultLoadingManager.onProgress = (url: string, loaded: number, total: number) => {
+            if (loaded < total) {
+                this.dispatchEvent({ type: "loadding" } as never);
+            } else if (loaded === total) {
+                this.dispatchEvent({ type: "onLoad" } as never);
+            }
         }
 
         DefaultLoadingManager.onLoad = () => {