three-base 1.0.57 → 1.0.59

package/lib/KeyFrameAnimation.ts

@@ -90,9 +90,9 @@ export default class KeyframeAnimation extends Object3D {
 
     // 更具关键帧的信息更新 对象的位置
     update() {
-        const { timeTemp } = threeUtils;
+        const { _timeTemp } = threeUtils;
         const maxtimetemp = last(this.keyframes)!.timeTemp;
-        const currentTime = timeTemp % maxtimetemp;
+        const currentTime = _timeTemp % maxtimetemp;
 
         const currentKeyframeIndex = this.keyframes.findIndex(k => currentTime < k.timeTemp);
 

package/lib/ThreeBase.ts

@@ -2,12 +2,12 @@
  * @Author: xiaosihan 
  * @Date: 2021-12-20 13:38:22 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-30 11:00:20
+ * @Last Modified time: 2023-03-16 14:31:32
  */
 
 import elementResizeEvent from "element-resize-event";
 import { round } from "lodash";
-import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, BufferGeometry, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { generateUUID } from "three/src/math/MathUtils";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
@@ -102,8 +102,7 @@ export default class ThreeBase extends EventDispatcher {
 
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
-                //@ts-ignore
-                this.renderer['forceContextRestore']();
+                this.renderer.forceContextRestore();
                 await new Promise(resolve => requestAnimationFrame(resolve));
                 await new Promise(resolve => requestAnimationFrame(resolve));
                 this.renderer.domElement.style.opacity = "1";
@@ -201,37 +200,25 @@ export default class ThreeBase extends EventDispatcher {
         let currentPosition = this.camera.position.clone();
         let currentCenter = this.controls.target.clone();
 
-        if (position) {
-            this.controlsPosition
-                .setDuration(duration)
-                .reset({
-                    x: currentPosition.x,
-                    y: currentPosition.y,
-                    z: currentPosition.z
-                })
-                .set({
-                    x: position.x,
-                    y: position.y,
-                    z: position.z
-                });
-        }
-
-        if (center) {
-            this.controlsCenter
-                .setDuration(duration)
-                .reset({
-                    x: currentCenter.x,
-                    y: currentCenter.y,
-                    z: currentCenter.z
-                }).set({
-                    x: center.x,
-                    y: center.y,
-                    z: center.z
-                });
-        }
-
         // 等待动画执行完成
-        await new Promise(resolve => setTimeout(resolve, Math.max(this.controlsCenter._duration, this.controlsPosition._duration)));
+        await Promise.all([
+            new Promise<void>(async (resolve, reject) => {
+                if (position) {
+                    this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
+                    await this.controlsPosition.set({ x: position.x, y: position.y, z: position.z });
+                }
+                resolve();
+            }),
+            new Promise<void>(async (resolve, reject) => {
+                if (center) {
+                    this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
+                    await this.controlsCenter.set({ x: center.x, y: center.y, z: center.z });
+                }
+                resolve();
+            }),
+
+        ]);
+
     }
 
     // 获取控制的位置和朝向 保留3位小数
@@ -255,7 +242,7 @@ export default class ThreeBase extends EventDispatcher {
     // 控制器类型
     controlType: "OrbitControls" | "MapControls" = "OrbitControls";
 
-    // 记录一下空间平移方式
+    // 记录一下空间平移方式 在切换控制器的时候保留一下平移方式
     originScreenSpacePanning = false;
 
     //改变控制器的类型
@@ -283,7 +270,6 @@ export default class ThreeBase extends EventDispatcher {
     //是否需要渲染, 当autoRender=false的时候就需要 手动触发渲染
     needRender = false;
 
-
     // 停止渲染
     stopRender() {
         threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
@@ -340,6 +326,39 @@ export default class ThreeBase extends EventDispatcher {
         saveLink.click();
     }
 
+    private _preMesh = new Mesh();
+    private _preRT = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+
+    //预加载纹理图片
+    async preloadTexture(src: string) {
+        const texture = threeLoader.getTexture(src);
+        while (texture && !texture.image || !(texture.image as HTMLImageElement).complete) {
+            await new Promise(resolve => setTimeout(resolve, 50));
+        }
+
+        // 添加到计划任务中去
+        threeUtils.addWork(() => {
+            const originRenderTarget = this.renderer.getRenderTarget();
+            this.renderer.setRenderTarget(this._preRT);
+            (this._preMesh.material as MeshBasicMaterial).map = texture;
+            this.renderer.render(this._preMesh, this.camera);
+            this.renderer.setRenderTarget(originRenderTarget);
+        });
+    }
+
+    //预加载网格
+    async preloadGeometry(geometry: BufferGeometry) {
+
+        // 添加到计划任务中去
+        threeUtils.addWork(() => {
+            const originRenderTarget = this.renderer.getRenderTarget();
+            this.renderer.setRenderTarget(this._preRT);
+            this._preMesh.geometry = geometry;
+            this.renderer.render(this._preMesh, this.camera);
+            this.renderer.setRenderTarget(originRenderTarget);
+        });
+    }
+
     // 清理渲染目标
     clearRendererTargte(rendererTarget: WebGLRenderTarget | null) {
         const originTarget = this.renderer.getRenderTarget();

package/lib/keyContorls.ts

@@ -6,7 +6,7 @@
  */
 
 import { throttle } from "lodash";
-import { Event, EventDispatcher, Vector3 } from "three";
+import { Event, EventDispatcher, EventListener, Vector3 } from "three";
 import { generateUUID } from "three/src/math/MathUtils";
 
 
@@ -107,7 +107,7 @@ class KeyContorls extends EventDispatcher {
         this._listeners = undefined;
     }, 1000, { trailing: false });
 
-    addEventListener(type: string, listener: (event: Event) => void): void {
+    addEventListener<T extends string>(type: T, listener: EventListener<Event, T, this>): void {
         this.removeEvent(type);
         super.addEventListener(type, listener);
     }

package/lib/text/Text3D.ts

@@ -10,11 +10,13 @@ import { Mesh } from "three";
 // 三维空间中的3D文字模型
 export default class Text3D extends Mesh {
 
-    constructor(text: string = "Text2D") {
+    constructor(text: string = "Text3D") {
         super();
     }
 
-    
+    // 字体的存储路径
+    static path: "http://drm.gitee.io/xsh-react-three-font/";
+
 
 
 }

package/lib/threeLoader.ts

@@ -2,7 +2,7 @@
  * @Author: xiaosihan 
  * @Date: 2022-04-07 16:42:26 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-30 10:52:27
+ * @Last Modified time: 2023-02-07 11:11:48
  */
 
 import { DefaultLoadingManager, EventDispatcher, RepeatWrapping, Texture, TextureLoader, VideoTexture } from "three";
@@ -121,7 +121,7 @@ class ThreeLoader extends EventDispatcher {
 
         }();
         //@ts-ignore
-        dracoLoader.setDecoderPath((process.env.NODE_ENV === "development") ? '/node_modules/three/examples/js/libs/draco/' : '');
+        dracoLoader.setDecoderPath((process.env.NODE_ENV === "development") ? '/node_modules/three/examples/jsm/libs/draco/' : '');
         loader.setDRACOLoader(dracoLoader);
         return loader;
     })()

package/lib/threeUtils.ts

@@ -15,35 +15,40 @@ class ThreeUtils extends EventDispatcher {
         this.requestAnimationFrame();
     }
     //@ts-ignore
-    isProd = process.env.NODE_ENV === "production";
+    isProd = (process.env.NODE_ENV === "production");
 
     //@ts-ignore
-    isDev = process.env.NODE_ENV === "development";
+    isDev = (process.env.NODE_ENV === "development");
 
-    timeTemp = performance.now();
+    _timeTemp = performance.now();
 
-    accumulate = 0;// 事件分发次数
+    _accumulate = 0;// 事件分发次数
 
-    box3 = new Box3();
-    size = new Vector3();
-    center = new Vector3();
+    _box3 = new Box3();
+    _size = new Vector3();
+    _center = new Vector3();
 
-    clock = new Clock();
+    _clock = new Clock();
 
     requestAnimationFrame() {
-        this.accumulate += 1;
-        const timeTemp = this.timeTemp = performance.now();
+        this._accumulate += 1;
+        const timeTemp = this._timeTemp = performance.now();
+
         this.dispatchEvent({
             type: "requestAnimationFrame",
             timeTemp,
-            accumulate: this.accumulate
+            accumulate: this._accumulate
         });
 
         this._computerDomZoom();
 
+        //执行一个计划任务
+        let work = this.workList.splice(0, 1)[0];
+        work && work();
+
         setTimeout(() => {
             this.requestAnimationFrame();
-        }, 45 - this.clock.getDelta());
+        }, 45 - this._clock.getDelta());
     }
 
     // 需要保持宽高比的元素列表
@@ -89,6 +94,27 @@ class ThreeUtils extends EventDispatcher {
         }
     }
 
+    workList: Array<() => void> = [];
+
+    // 时钟对象
+    clock = new Clock();
+
+    // 按照任务队列依次执行计划任务 性能优化
+    /**
+     * @param {() => void} [callback]
+     * @param {boolean} [first=true] 需要优先执行
+     */
+    addWork(work?: () => void, first: boolean = false) {
+        // 加入任务队列
+        if (work && !this.workList.includes(work)) {
+            if (first) {
+                this.workList.splice(1, 0, work); // 优先执行的任务回调
+            } else {
+                this.workList.push(work);
+            }
+        }
+    }
+
     /**
      *判断一个元素是否在页面上
      */
@@ -107,56 +133,61 @@ class ThreeUtils extends EventDispatcher {
     // 获取中心点
     getCenter(object3d: Object3D | BufferGeometry) {
         if (object3d instanceof Object3D) {
-            this.box3.setFromObject(object3d);
-            this.box3.getCenter(this.center);
+            this._box3.setFromObject(object3d);
+            this._box3.getCenter(this._center);
         } else if (object3d instanceof BufferGeometry) {
             object3d.computeBoundingBox();
-            object3d.boundingBox!.getCenter(this.center);
+            object3d.boundingBox!.getCenter(this._center);
         }
 
-        return this.center;
+        return this._center;
     }
 
     // 获取模型大小
     getSize(object3d: Object3D | BufferGeometry) {
         if (object3d instanceof Object3D) {
-            this.box3.setFromObject(object3d);
-            this.box3.getSize(this.size);
+            this._box3.setFromObject(object3d);
+            this._box3.getSize(this._size);
         } else if (object3d instanceof BufferGeometry) {
             object3d.computeBoundingBox();
-            object3d.boundingBox!.getSize(this.size);
+            object3d.boundingBox!.getSize(this._size);
         }
 
-        return this.size;
+        return this._size;
     }
 
     // 模型对齐底面
     alignBottom(object3d: Object3D | BufferGeometry, y = 0) {
         if (object3d instanceof Object3D) {
-            this.box3.setFromObject(object3d);
-            this.box3.getCenter(this.center);
-            this.box3.getSize(this.size);
-            object3d.position.y -= (this.center.y - (this.size.y * 0.5));
+            this._box3.setFromObject(object3d);
+            this._box3.getCenter(this._center);
+            this._box3.getSize(this._size);
+            object3d.position.y -= (this._center.y - (this._size.y * 0.5));
             object3d.position.y += y;
             object3d.updateMatrixWorld(true);
         } else if (object3d instanceof BufferGeometry) {
             object3d.computeBoundingBox();
-            object3d.translate(0, -object3d.boundingBox!.min.y, 0);
+            object3d.translate(0, -object3d.boundingBox!.min.y + y, 0);
         }
     }
 
     // 居中对象
     centerObject3D(object3d: Object3D | BufferGeometry) {
         if (object3d instanceof Object3D) {
-            this.box3.setFromObject(object3d);
-            this.box3.getCenter(this.center);
-            object3d.position.sub(this.center);
+            this._box3.setFromObject(object3d);
+            this._box3.getCenter(this._center);
+            object3d.position.sub(this._center);
             object3d.updateMatrixWorld(true);
         } else if (object3d instanceof BufferGeometry) {
             object3d.center();
         }
     }
 
+    //居中对象
+    center(object3d: Object3D | BufferGeometry) {
+        this.centerObject3D(object3d);
+    }
+
     //缩放至指定大小
     scaleTo(object3d: Object3D | BufferGeometry, size: number = 1) {
         const originSize = this.getSize(object3d);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "1.0.57",
+    "version": "1.0.59",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",
@@ -41,10 +41,10 @@
         "apng-js": "^1",
         "element-resize-event": "^3",
         "lodash": "^4",
-        "three": "0.129.0",
+        "three": ">=0.150.0",
         "vite": "^4",
         "three-spritetext": "^1",
-        "@types/three": "0.129.0",
+        "@types/three": ">=0.149.0",
         "@types/element-resize-event": "^3",
         "@types/lodash": "^4",
         "@types/node": "^18"