three-base 1.0.58 → 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

@@ -7,7 +7,7 @@
 
 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";
@@ -200,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位小数
@@ -254,7 +242,7 @@ export default class ThreeBase extends EventDispatcher {
     // 控制器类型
     controlType: "OrbitControls" | "MapControls" = "OrbitControls";
 
-    // 记录一下空间平移方式
+    // 记录一下空间平移方式 在切换控制器的时候保留一下平移方式
     originScreenSpacePanning = false;
 
     //改变控制器的类型
@@ -282,9 +270,8 @@ export default class ThreeBase extends EventDispatcher {
     //是否需要渲染, 当autoRender=false的时候就需要 手动触发渲染
     needRender = false;
 
-    
     // 停止渲染
-    stopRender(){
+    stopRender() {
         threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
         this.renderer.forceContextLoss();
         // 标记上下文被销毁了
@@ -339,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/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/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.58",
+    "version": "1.0.59",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",