three-base 1.0.8 → 1.0.10

package/index.ts

@@ -8,6 +8,12 @@ export { default as EventMesh } from "./lib/EventMesh";
 export { default as ExtrudeMesh } from "./lib/ExtrudeMesh";
 export type { ExtrudePath } from "./lib/ExtrudeMesh";
 
+
+// 关键帧动画对象
+export { default as KeyFrameAnimation } from "./lib/KeyFrameAnimation";
+export type { KeyFrameAnimationProps } from "./lib/KeyFrameAnimation";
+export type { KeyFrame } from "./lib/KeyFrameAnimation";
+
 //点光源
 export { default as PointLight } from "./lib/PointLight";
 

package/lib/KeyFrameAnimation.ts

@@ -0,0 +1,115 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-02-16 00:22:31 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-16 19:08:55
+ */
+
+import _ from "lodash";
+import { BufferAttribute, Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
+import threeUtils from "./threeUtils";
+
+
+// 关键帧类型
+export type Keyframe = {
+    position: Vector3;
+    scale: Vector3;
+    rotation: Euler;
+    timeTemp: number; //时间节点 单位毫秒.
+}
+
+
+export type KeyframeAnimationProps = {
+    object3d: Object3D; // 需要移动的对象
+    keyframes: Array<Keyframe>,
+}
+
+// 关键帧动画对象
+export default class KeyframeAnimation extends Object3D {
+
+    constructor(props: KeyframeAnimationProps) {
+        super();
+
+        // 设置关键帧对象数组
+        this.setKeyframes(props.keyframes);
+
+
+        // 设置对象
+        this.setObject3D(props.object3d);
+
+    }
+
+    // 需要需要移动的对象
+    object3d: Object3D;
+
+    //路径辅助线
+    halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
+
+    // 关键帧数组
+    keyframes: Array<Keyframe> = [];
+
+    // 设置需要移动的对象
+    setObject3D(object3d: Object3D) {
+        this.object3d = object3d;
+        if (threeUtils.isDev) {
+            this.children = [object3d, this.halperLine];
+        } else {
+            this.children = [object3d];
+        }
+    }
+
+    // 获取单个关键帧
+    getKeyframe(i: number) {
+        return this.keyframes[i];
+    }
+
+    // 设置单个关键帧
+    setKeyframe(i: number, keyframe: Keyframe) {
+        this.keyframes[i] = keyframe;
+        this.setKeyframes(this.keyframes);
+    }
+
+    //设置全部关键帧
+    setKeyframes(keyframes: Array<Keyframe>) {
+        this.keyframes = keyframes;
+        const position = [];
+        keyframes.map(k => {
+            position.push(k.position.x);
+            position.push(k.position.y);
+            position.push(k.position.z);
+        });
+        this.halperLine.geometry.setAttribute("position", new BufferAttribute(new Float32Array(position), 3, false));
+    }
+
+    // 更具关键帧的信息更新 对象的位置
+    update() {
+        const { timeTemp } = threeUtils;
+        const maxtimetemp = _.last(this.keyframes).timeTemp;
+        const currentTime = timeTemp % maxtimetemp;
+
+        const currentKeyframeIndex = this.keyframes.findIndex(k => currentTime < k.timeTemp);
+
+        const startKeyframe = this.keyframes[currentKeyframeIndex - 1];
+        const endKeyframe = this.keyframes[currentKeyframeIndex];
+        const progress = (currentTime - startKeyframe.timeTemp) / (endKeyframe.timeTemp - startKeyframe.timeTemp);
+
+        this.object3d.position.copy(endKeyframe.position).sub(startKeyframe.position).multiplyScalar(progress).add(startKeyframe.position);
+        this.object3d.scale.copy(endKeyframe.scale).sub(startKeyframe.scale).multiplyScalar(progress).add(startKeyframe.scale);
+
+        this.object3d.rotation.set(
+            (endKeyframe.rotation.x - startKeyframe.rotation.x) * progress + startKeyframe.rotation.x,
+            (endKeyframe.rotation.y - startKeyframe.rotation.y) * progress + startKeyframe.rotation.y,
+            (endKeyframe.rotation.z - startKeyframe.rotation.z) * progress + startKeyframe.rotation.z,
+        );
+
+        this.dispatchEvent({ type: "update" });
+    }
+
+    //更新关键帧的实例矩阵
+    updateMatrix(): void {
+        this.update();
+        super.updateMatrix();
+    }
+
+
+}

package/lib/ThreeBase.ts

@@ -86,10 +86,12 @@ export default class ThreeBase extends EventDispatcher {
     // 设置 dom 容器
     async setContainer(div: HTMLDivElement | null) {
         if (div) {
+            //删除这个容器里面的所有canvas
             const canvas = div.getElementsByTagName("canvas");
             for (let c of canvas) c.remove();
             div.append(this.renderer.domElement);
 
+            // 监听容器的尺寸的改变
             elementResizeEvent(div, () => {
                 let rect = window.getComputedStyle(div);
                 let width = parseInt(rect.width);
@@ -97,15 +99,13 @@ export default class ThreeBase extends EventDispatcher {
                 this.resize(width, height);
             });
 
-
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
                 this.renderer.forceContextRestore();
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                await new Promise(resolve => requestAnimationFrame(resolve));
             }
 
-            await new Promise(resolve => requestAnimationFrame(resolve));
-            await new Promise(resolve => requestAnimationFrame(resolve));
-
             let rect = window.getComputedStyle(div);
             let width = parseInt(rect.width);
             let height = parseInt(rect.height);

package/lib/threeUtils.ts

@@ -14,9 +14,10 @@ class ThreeUtils extends EventDispatcher {
 
         this.requestAnimationFrame();
     }
-
+    //@ts-ignore
     isProd = process.env.NODE_ENV === "production";
-
+    
+    //@ts-ignore
     isDev = process.env.NODE_ENV === "development";
 
     timeTemp = performance.now();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.8",
+    "version": "1.0.10",
     "description": "three 3d three-base",
     "keywords": [
         "three",