three-base 1.129.0 → 1.129.2

package/lib/{ThreeBase.ts → ThreeBase.js}

@@ -1,13 +1,12 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2021-12-20 13:38:22 
+ * @Author: xiaosihan
+ * @Date: 2021-12-20 13:38:22
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-03-30 11:00:20
  */
-
 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, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, 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";
@@ -15,41 +14,32 @@ import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
-
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
-
     constructor() {
         super();
         this.init();
     }
-
     // 公用渲染目标1
     renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
-
     // 渲染目标2
     renderTarget2 = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
-
     // 公用二维向量
     tempVector2 = new Vector2();
-
     // 公用的三维向量
     tempVector3 = new Vector3();
-
     //渲染器的尺寸
     size = new Vector2(0, 0);
-
     // 渲染器对象
     renderer = (() => {
         const renderer = new WebGLRenderer({
-            alpha: true,// 透明背景
-            antialias: true, // 阴影抗锯齿
-            precision: "highp", //precision:highp/mediump/lowp着色精度选择
-            logarithmicDepthBuffer: true, // 对数深度缓冲区 避免当2个面完全重合时闪烁
-            preserveDrawingBuffer: false, // 是否保存绘图缓冲
+            alpha: true,
+            antialias: true,
+            precision: "highp",
+            logarithmicDepthBuffer: true,
+            preserveDrawingBuffer: false,
             stencil: false, // 模版
         });
-
         renderer.domElement.id = generateUUID();
         renderer.localClippingEnabled = true;
         renderer.setPixelRatio(window.devicePixelRatio);
@@ -57,16 +47,12 @@ export default class ThreeBase extends EventDispatcher {
         threeLoader.setAnisotropy(renderer.capabilities.getMaxAnisotropy());
         return renderer;
     })();
-
     //透视相机
     camera = new PerspectiveCamera(45, 1, 0.0001, 10000);
-
     // 场景对象
     scene = new Scene();
-
     ///鼠标事件对象
     threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
-
     // 轨道控制器
     controls = (() => {
         const controls = new OrbitControls(this.camera, this.renderer.domElement);
@@ -80,18 +66,16 @@ export default class ThreeBase extends EventDispatcher {
         controls.screenSpacePanning = true;
         return controls;
     })();
-
     // 上下文是否被销毁了
     isRendererContextLost = false;
-
     // 设置 dom 容器
-    async setContainer(div: HTMLDivElement | null) {
+    async setContainer(div) {
         if (div) {
             //删除这个容器里面的所有canvas
             const canvas = div.getElementsByTagName("canvas");
-            for (let c of canvas) c.remove();
+            for (let c of canvas)
+                c.remove();
             div.append(this.renderer.domElement);
-
             // 监听容器的尺寸的改变
             elementResizeEvent(div, () => {
                 let rect = window.getComputedStyle(div);
@@ -99,7 +83,6 @@ export default class ThreeBase extends EventDispatcher {
                 let height = parseInt(rect.height);
                 this.resize(width, height);
             });
-
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
                 //@ts-ignore
@@ -108,20 +91,17 @@ export default class ThreeBase extends EventDispatcher {
                 await new Promise(resolve => requestAnimationFrame(resolve));
                 this.renderer.domElement.style.opacity = "1";
             }
-
             let rect = window.getComputedStyle(div);
             let width = parseInt(rect.width);
             let height = parseInt(rect.height);
             this.resize(width, height);
-
             // 开启时时渲染
             threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
             threeUtils.addEventListener("requestAnimationFrame", this.renderBindThis);
         }
     }
-
     // 修改尺寸
-    resize(width: number, height: number) {
+    resize(width, height) {
         this.camera.aspect = width / height;
         this.camera.updateProjectionMatrix();
         this.renderer.setPixelRatio(window.devicePixelRatio);
@@ -131,7 +111,6 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
     }
-
     // 控制器的位置缓动的计算的顶点对象
     controlsPosition = (() => {
         const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
@@ -143,7 +122,6 @@ export default class ThreeBase extends EventDispatcher {
         });
         return controlsPosition;
     })();
-
     // 控制器的 朝向带缓动的计算的顶点对象
     controlsCenter = (() => {
         const controlsCenter = new Transition({ x: 0, y: 0, z: 0 });
@@ -155,7 +133,6 @@ export default class ThreeBase extends EventDispatcher {
         });
         return controlsCenter;
     })();
-
     init() {
         // 非开发模式添加网格辅助线
         if (threeUtils.isDev) {
@@ -165,75 +142,51 @@ export default class ThreeBase extends EventDispatcher {
             const axesHelper = new AxesHelper(10000);
             this.scene.add(axesHelper);
         }
-
         // 资源加载进度有更新时, 需要渲染
         threeLoader.addEventListener("progress", () => {
             this.needRender = true;
         });
-
     }
-
     // 重置控制器的位置
-    resetLookAt({ position, center, }: { position?: Vector3, center?: Vector3, }) {
-
+    resetLookAt({ position, center, }) {
         // 停止控制器的惯性
         this.controls.enableDamping = false;
         this.controls.saveState();
         this.controls.update();
         this.controls.reset();
         this.controls.enableDamping = true;
-
         position && this.controlsPosition.reset({ x: position.x, y: position.y, z: position.z });
         center && this.controlsCenter.reset({ x: center.x, y: center.y, z: center.z });
         this.needRender = true;
     }
-
     // 设置控制器的位置 以动画的方式移动控制器
-    async setLookAt({ position, center, duration = 1000 }: { position?: Vector3, center?: Vector3, duration?: number }) {
-
+    async setLookAt({ position, center, duration = 1000 }) {
         // 停止控制器的惯性
         this.controls.enableDamping = false;
         this.controls.saveState();
         this.controls.update();
         this.controls.reset();
         this.controls.enableDamping = true;
-
         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(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(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位小数
     getLookAt() {
         const position = this.camera.position.toArray().map(v => round(v, 3));
@@ -242,30 +195,26 @@ export default class ThreeBase extends EventDispatcher {
             center: new Vector3(...center),
             position: new Vector3(...position),
             centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
-        }
+        };
     }
-
     // 三维向量转化成屏幕上的2维向量
-    v3tov2(v3: Vector3) {
+    v3tov2(v3) {
         v3.project(this.camera);
         const v2 = new Vector2((v3.x + 1) * this.size.x * 0.5, (-v3.y + 1) * this.size.y * 0.5);
         return v2;
     }
-
     // 控制器类型
-    controlType: "OrbitControls" | "MapControls" = "OrbitControls";
-
-    // 记录一下空间平移方式
+    controlType = "OrbitControls";
+    // 记录一下空间平移方式 在切换控制器的时候保留一下平移方式
     originScreenSpacePanning = false;
-
     //改变控制器的类型
-    setControlType(controlType: "OrbitControls" | "MapControls") {
-
+    setControlType(controlType) {
         if (controlType === "OrbitControls") {
             this.controls.screenSpacePanning = this.originScreenSpacePanning;
             this.controls.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
             this.controls.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
-        } else if (controlType === "MapControls") {
+        }
+        else if (controlType === "MapControls") {
             this.originScreenSpacePanning = this.controls.screenSpacePanning;
             // pan orthogonal to world-space direction camera.up
             this.controls.screenSpacePanning = false;
@@ -274,16 +223,11 @@ export default class ThreeBase extends EventDispatcher {
             this.controls.touches.ONE = TOUCH.PAN;
             this.controls.touches.TWO = TOUCH.DOLLY_ROTATE;
         }
-
     }
-
     // 是否自动渲染
     autoRender = true;
-
     //是否需要渲染, 当autoRender=false的时候就需要 手动触发渲染
     needRender = false;
-
-
     // 停止渲染
     stopRender() {
         threeUtils.removeEventListener("requestAnimationFrame", this.renderBindThis);
@@ -293,44 +237,34 @@ export default class ThreeBase extends EventDispatcher {
         this.resize(100, 100);
         this.renderer.domElement.style.opacity = "0";
     }
-
     // 渲染场景
     render() {
-
         // 控制器在移动时鼠标不能操作
         this.controls.enabled = (this.controlsPosition.isDone() || this.controlsCenter.isDone());
-
         // canvas 没有在页面上面的话 就跳过渲染
         if (!threeUtils.inDocument(this.renderer.domElement)) {
             this.stopRender();
             return;
         }
-
         // 分发鼠标事件
         this.threeMouse.dispatchEvent();
-
         // 在不自动渲染时, needRender=false 就跳过渲染
         if (!this.autoRender && !this.needRender) {
             return;
         }
         this.needRender = false;
-
         if (this.controls.enabled) {
             this.controls.update();
         }
-
         this.renderer.clear();
-
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
         this.renderer.render(this.scene, this.camera);
         this.dispatchEvent({ type: "afterRender" });
     }
-
     renderBindThis = this.render.bind(this);
-
     // 下载渲染图
-    download(fileName: string = "download") {
+    download(fileName = "download") {
         this.render();
         const base64 = this.renderer.domElement.toDataURL('image/png');
         let saveLink = document.createElement("a");
@@ -339,9 +273,36 @@ export default class ThreeBase extends EventDispatcher {
         document.body.append(saveLink);
         saveLink.click();
     }
-
+    _preMesh = new Mesh();
+    _preRT = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+    //预加载纹理图片
+    async preloadTexture(src) {
+        const texture = threeLoader.getTexture(src);
+        while (texture && !texture.image || !texture.image.complete) {
+            await new Promise(resolve => setTimeout(resolve, 50));
+        }
+        // 添加到计划任务中去
+        threeUtils.addWork(() => {
+            const originRenderTarget = this.renderer.getRenderTarget();
+            this.renderer.setRenderTarget(this._preRT);
+            this._preMesh.material.map = texture;
+            this.renderer.render(this._preMesh, this.camera);
+            this.renderer.setRenderTarget(originRenderTarget);
+        });
+    }
+    //预加载网格
+    async preloadGeometry(geometry) {
+        // 添加到计划任务中去
+        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) {
+    clearRendererTargte(rendererTarget) {
         const originTarget = this.renderer.getRenderTarget();
         this.renderer.setRenderTarget(rendererTarget);
         fullScreenMesh.material = clearShader;
@@ -349,9 +310,8 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.clearDepth();
         this.renderer.setRenderTarget(originTarget);
     }
-
     // 拷贝纹理到渲染目标
-    copyTextureToRenderTarget(texture: Texture, rendererTarget: WebGLRenderTarget | null, alpha: boolean = false, opactity: number = 1) {
+    copyTextureToRenderTarget(texture, rendererTarget, alpha = false, opactity = 1) {
         const originTarget = this.renderer.getRenderTarget();
         if (rendererTarget) {
             this.renderer.getSize(this.tempVector2);
@@ -365,9 +325,8 @@ export default class ThreeBase extends EventDispatcher {
         fullScreenMesh.render(this.renderer);
         this.renderer.setRenderTarget(originTarget);
     }
-
     // 把对象绘制到渲染目标中
-    object3dToRendererTarget(obj: Object3D, rendererTarget: WebGLRenderTarget) {
+    object3dToRendererTarget(obj, rendererTarget) {
         this.clearRendererTargte(rendererTarget);
         const originTarget = this.renderer.getRenderTarget();
         this.renderer.setRenderTarget(rendererTarget);
@@ -376,15 +335,13 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.render(obj, this.camera);
         this.renderer.setRenderTarget(originTarget);
     }
-
     // 给渲染目标的内容加描边
-    rendererTagetAddStroke(rendererTarget: WebGLRenderTarget, strockWidth: number, color: string, opacity: number) {
+    rendererTagetAddStroke(rendererTarget, strockWidth, color, opacity) {
         const originTarget = this.renderer.getRenderTarget();
         this.clearRendererTargte(this.renderTarget2);
         this.renderer.setRenderTarget(this.renderTarget2);
         this.renderer.getSize(this.tempVector2);
         this.renderTarget2.setSize(this.tempVector2.x, this.tempVector2.y);
-
         fullScreenMesh.material = strokeShader;
         strokeShader.uniforms.map.value = rendererTarget.texture;
         strokeShader.uniforms.resolution.value.set(this.tempVector2.x, this.tempVector2.y);
@@ -392,59 +349,46 @@ export default class ThreeBase extends EventDispatcher {
         strokeShader.uniforms.strokeColor.value.set(color);
         strokeShader.uniforms.opacity.value = opacity;
         fullScreenMesh.render(this.renderer);
-
         this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
-
         this.renderer.setRenderTarget(originTarget);
     }
-
     // 渲染对象的描边
-    renderObject3dStroke(obj: Object3D, strockWidth: number, color: string, opacity: number) {
+    renderObject3dStroke(obj, strockWidth, color, opacity) {
         this.object3dToRendererTarget(obj, this.renderTarget);
         this.rendererTagetAddStroke(this.renderTarget, strockWidth, color, opacity);
         this.copyTextureToRenderTarget(this.renderTarget.texture, null);
     }
-
     //给渲染目标加上高斯模糊计算
-    renderTargetgaussBlur(rendererTarget: WebGLRenderTarget, radius: number, opacity: number) {
+    renderTargetgaussBlur(rendererTarget, radius, opacity) {
         const originTarget = this.renderer.getRenderTarget();
-
         this.clearRendererTargte(this.renderTarget2);
         this.renderer.setRenderTarget(this.renderTarget2);
         this.renderer.getSize(this.tempVector2);
         this.renderTarget2.setSize(this.tempVector2.x, this.tempVector2.y);
-
         fullScreenMesh.material = gaussBlurShader;
         gaussBlurShader.uniforms.map.value = rendererTarget.texture;
         gaussBlurShader.uniforms.radius.value = radius;
         gaussBlurShader.uniforms.opacity.value = opacity;
         gaussBlurShader.uniforms.resolution.value.set(this.tempVector2.x, this.tempVector2.y);
         fullScreenMesh.render(this.renderer);
-
         this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
-
         this.renderer.setRenderTarget(originTarget);
     }
-
     // 渲染目标上的纹理添加辉光效果
-    renderTargetAddGlow(renderTarget: WebGLRenderTarget, width: number, color: string) {
-
+    renderTargetAddGlow(renderTarget, width, color) {
         this.rendererTagetAddStroke(renderTarget, 1 * width, color, 0.3);
         this.rendererTagetAddStroke(renderTarget, 2 * width, color, 0.2);
         this.rendererTagetAddStroke(renderTarget, 3 * width, color, 0.05);
-
         this.renderTargetgaussBlur(renderTarget, 1, 1);
         this.renderTargetgaussBlur(renderTarget, 1, 1);
         this.renderTargetgaussBlur(renderTarget, 1, 1);
     }
-
     // 渲染 渲染目标
-    renderRendererTarget(renderTarget: WebGLRenderTarget, alpha: boolean = false) {
+    renderRendererTarget(renderTarget, alpha = false) {
         coptyShader.uniforms.map.value = renderTarget.texture;
         coptyShader.uniforms.opacity.value = 1.0;
         fullScreenMesh.material = coptyShader;
         coptyShader.blending = alpha ? NoBlending : NormalBlending;
         fullScreenMesh.render(this.renderer);
     }
-
-}
+}