three-base 2.0.17 → 2.0.18

package/ThreeBase.d.ts

@@ -19,18 +19,19 @@ export default class ThreeBase extends EventDispatcher {
     isRendererContextLost: boolean;
     setContainer(div: HTMLDivElement | null): Promise<void>;
     setSize(width: number, height: number): void;
-    controlsPosition: Transition;
+    controlsDistance: Transition;
     controlsCenter: Transition;
+    controlsPosition: Transition;
     gridHelper: GridHelper;
     axesHelper: AxesHelper;
     init(): void;
     resetLookAt({ position, center, }: {
-        position?: Vector3;
-        center?: Vector3;
+        position: Vector3;
+        center: Vector3;
     }): void;
     setLookAt({ position, center, duration }: {
-        position?: Vector3;
-        center?: Vector3;
+        position: Vector3;
+        center: Vector3;
         duration?: number;
     }): Promise<void>;
     getLookAt(): {

package/ThreeBase.js

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-05-23 23:54:13
  */
 import { round } from "lodash";
-import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, SRGBColorSpace, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, DepthFormat, DepthTexture, DisplayP3ColorSpace, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, 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";
@@ -38,13 +38,11 @@ export default class ThreeBase extends EventDispatcher {
         stencilBuffer: false,
         depthTexture: this.baseDepthTexture,
         anisotropy: 16,
-        colorSpace: SRGBColorSpace,
+        colorSpace: DisplayP3ColorSpace
         // | typeof NoColorSpace
         // | typeof SRGBColorSpace
         // | typeof LinearSRGBColorSpace
         // | typeof DisplayP3ColorSpace;
-        // encoding: sRGBEncoding
-        // LinearEncoding | typeof sRGBEncoding;
     });
     // 公用渲染目标1
     renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
@@ -77,10 +75,7 @@ export default class ThreeBase extends EventDispatcher {
     //透视相机
     camera = new PerspectiveCamera(45, 1, 0.0001, 1000000);
     // 场景对象
-    scene = (() => {
-        const scene = new Scene();
-        return scene;
-    })();
+    scene = new Scene();
     ///鼠标事件对象
     threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
     // 轨道控制器
@@ -132,16 +127,11 @@ 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 });
-        controlsPosition.setDuration(1000);
-        controlsPosition.onChange(({ x, y, z }) => {
-            this.camera.position.set(x, y, z);
-            this.camera.lookAt(this.controls.target);
-            this.needRender = true;
-        });
-        return controlsPosition;
+    // 视角距离过度
+    controlsDistance = (() => {
+        const controlsDistance = new Transition({ distance: 0 });
+        controlsDistance.setDuration(1000);
+        return controlsDistance;
     })();
     // 控制器的 朝向带缓动的计算的顶点对象
     controlsCenter = (() => {
@@ -154,6 +144,21 @@ export default class ThreeBase extends EventDispatcher {
         });
         return controlsCenter;
     })();
+    // 控制器的位置缓动的计算的顶点对象
+    controlsPosition = (() => {
+        const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
+        controlsPosition.setDuration(1000);
+        controlsPosition.onChange(({ x, y, z }) => {
+            const distance = this.controlsDistance.get("distance");
+            this.camera.position.set(x, y, z)
+                .sub(this.controls.target)
+                .setLength(distance)
+                .add(this.controls.target);
+            this.camera.lookAt(this.controls.target);
+            this.needRender = true;
+        });
+        return controlsPosition;
+    })();
     // 网格辅助线
     gridHelper = (() => {
         const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
@@ -175,19 +180,20 @@ export default class ThreeBase extends EventDispatcher {
         });
     }
     // 重置控制器的位置
-    resetLookAt({ position, center, }) {
+    resetLookAt({ position = this.camera.position, center = this.controls.target, }) {
         // 停止控制器的惯性
         this.controls.enableDamping = false;
         this.controls.saveState();
         this.controls.update();
         this.controls.reset();
         this.controls.enableDamping = true;
+        this.controlsDistance.reset({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)) });
         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 }) {
+    async setLookAt({ position = this.camera.position, center = this.controls.target, duration = 1000 }) {
         // 停止控制器的惯性
         this.controls.enableDamping = false;
         this.controls.saveState();
@@ -199,19 +205,20 @@ export default class ThreeBase extends EventDispatcher {
         // 等待动画执行完成
         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 });
-                }
+                this.controlsDistance.setDuration(duration).reset({ distance: this.camera.position.distanceTo(this.controls.target) });
+                await this.controlsDistance.set({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.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 });
-                }
+                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) => {
+                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位小数
@@ -221,7 +228,7 @@ export default class ThreeBase extends EventDispatcher {
         return {
             center: new Vector3(...center),
             position: new Vector3(...position),
-            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
+            centerPosition: `position: new Vector3(${position.join(",")}),center: new Vector3(${center.join(",")})`
         };
     }
     // 三维向量转化成屏幕上的2维向量
@@ -290,12 +297,16 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        //TODO 渲染了2次, 还有优化空间
         this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
         this.renderer.setRenderTarget(null);
         this.renderer.clear();
+        //TODO 渲染了2次, 还有优化空间
+        // this.renderer.setScissorTest(false);
+        // this.renderRendererTarget(this.baseRenderTarget);
+        // this.renderer.setScissorTest(true);
+        // this.renderer.setScissor(0, 0, 512, 1000);
         this.renderer.render(this.scene, this.camera);
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {

package/ThreeBase.ts

@@ -43,13 +43,11 @@ export default class ThreeBase extends EventDispatcher {
         stencilBuffer: false,
         depthTexture: this.baseDepthTexture,
         anisotropy: 16,
-        colorSpace: SRGBColorSpace,
+        colorSpace: DisplayP3ColorSpace
         // | typeof NoColorSpace
         // | typeof SRGBColorSpace
         // | typeof LinearSRGBColorSpace
         // | typeof DisplayP3ColorSpace;
-        // encoding: sRGBEncoding
-        // LinearEncoding | typeof sRGBEncoding;
     });
 
     // 公用渲染目标1
@@ -91,10 +89,7 @@ export default class ThreeBase extends EventDispatcher {
     camera: Camera = new PerspectiveCamera(45, 1, 0.0001, 1000000);
 
     // 场景对象
-    scene = (() => {
-        const scene = new Scene();
-        return scene;
-    })();
+    scene = new Scene();
 
     ///鼠标事件对象
     threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
@@ -158,16 +153,11 @@ export default class ThreeBase extends EventDispatcher {
         // this.renderer.render(this.scene, this.camera);
     }
 
-    // 控制器的位置缓动的计算的顶点对象
-    controlsPosition = (() => {
-        const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
-        controlsPosition.setDuration(1000);
-        controlsPosition.onChange(({ x, y, z }) => {
-            this.camera.position.set(x, y, z);
-            this.camera.lookAt(this.controls.target);
-            this.needRender = true;
-        });
-        return controlsPosition;
+    // 视角距离过度
+    controlsDistance = (() => {
+        const controlsDistance = new Transition({ distance: 0 });
+        controlsDistance.setDuration(1000);
+        return controlsDistance;
     })();
 
     // 控制器的 朝向带缓动的计算的顶点对象
@@ -182,6 +172,23 @@ export default class ThreeBase extends EventDispatcher {
         return controlsCenter;
     })();
 
+    // 控制器的位置缓动的计算的顶点对象
+    controlsPosition = (() => {
+        const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
+        controlsPosition.setDuration(1000);
+        controlsPosition.onChange(({ x, y, z }) => {
+            const distance = this.controlsDistance.get("distance");
+            this.camera.position.set(x, y, z)
+                .sub(this.controls.target)
+                .setLength(distance)
+                .add(this.controls.target);
+
+            this.camera.lookAt(this.controls.target);
+            this.needRender = true;
+        });
+        return controlsPosition;
+    })();
+
     // 网格辅助线
     gridHelper = (() => {
         const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
@@ -207,7 +214,10 @@ export default class ThreeBase extends EventDispatcher {
     }
 
     // 重置控制器的位置
-    resetLookAt({ position, center, }: { position?: Vector3, center?: Vector3, }) {
+    resetLookAt({
+        position = this.camera.position,
+        center = this.controls.target,
+    }: { position: Vector3, center: Vector3 }) {
 
         // 停止控制器的惯性
         this.controls.enableDamping = false;
@@ -216,13 +226,18 @@ export default class ThreeBase extends EventDispatcher {
         this.controls.reset();
         this.controls.enableDamping = true;
 
+        this.controlsDistance.reset({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)) });
         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 = this.camera.position,
+        center = this.controls.target,
+        duration = 1000
+    }: { position: Vector3, center: Vector3, duration?: number }) {
 
         // 停止控制器的惯性
         this.controls.enableDamping = false;
@@ -237,20 +252,20 @@ export default class ThreeBase extends EventDispatcher {
         // 等待动画执行完成
         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 });
-                }
+                this.controlsDistance.setDuration(duration).reset({ distance: this.camera.position.distanceTo(this.controls.target) });
+                await this.controlsDistance.set({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.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 });
-                }
+                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) => {
+                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();
+            })
         ]);
 
     }
@@ -262,7 +277,7 @@ export default class ThreeBase extends EventDispatcher {
         return {
             center: new Vector3(...center),
             position: new Vector3(...position),
-            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
+            centerPosition: `position: new Vector3(${position.join(",")}),center: new Vector3(${center.join(",")})`
         }
     }
 
@@ -348,15 +363,22 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
 
-        //TODO 渲染了2次, 还有优化空间
         this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
 
         this.renderer.setRenderTarget(null);
         this.renderer.clear();
+
+        //TODO 渲染了2次, 还有优化空间
+        // this.renderer.setScissorTest(false);
+        // this.renderRendererTarget(this.baseRenderTarget);
+        // this.renderer.setScissorTest(true);
+        // this.renderer.setScissor(0, 0, 512, 1000);
         this.renderer.render(this.scene, this.camera);
 
+
+
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {
             stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "2.0.17",
+    "version": "2.0.18",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",