lythreeframe 1.0.13 → 1.0.14

package/dist/bundle.cjs.js

@@ -14,6 +14,7 @@ var OutlineNode_js = require('three/examples/jsm/tsl/display/OutlineNode.js');
 var MotionBlur_js = require('three/examples/jsm/tsl/display/MotionBlur.js');
 var FXAANode_js = require('three/examples/jsm/tsl/display/FXAANode.js');
 var SMAANode_js = require('three/examples/jsm/tsl/display/SMAANode.js');
+var gsap = require('gsap');
 var CSS2DRenderer_js = require('three/examples/jsm/renderers/CSS2DRenderer.js');
 var PointerLockControls = require('three/examples/jsm/controls/PointerLockControls');
 var TransformControls_js = require('three/examples/jsm/controls/TransformControls.js');
@@ -1353,6 +1354,9 @@ class Viewport {
             }
         });
         this.resizeObserver.observe(this._canvas);
+        this.app.onCameraChangedDelegate.add(() => {
+            this.setupPostProcess();
+        });
         this.setupPostProcess();
     }
     init() {
@@ -1684,6 +1688,10 @@ class Pawn {
     }
     unpossess() {
     }
+    focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
+    }
+    stopFocusing() {
+    }
     destroy() {
     }
 }
@@ -1695,8 +1703,12 @@ class Orbital extends Pawn {
         }
         return this._control;
     }
+    get camera() {
+        return this.controller.camera;
+    }
     constructor(controller) {
         super(controller);
+        this.anim = null;
         this.changeEvent = () => { this.onChange(); };
         this._control = new Addons_js.OrbitControls(controller.camera, controller.viewPort.canvas);
         this.control.target.set(0, 0, 0);
@@ -1714,6 +1726,71 @@ class Orbital extends Pawn {
     onChange() {
         this.controller.viewPort.markRenderStateDirty();
     }
+    focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
+        this.stopFocusing();
+        let finalQuat = null;
+        if (targetQuat instanceof three.Euler) {
+            finalQuat = new three.Quaternion().setFromEuler(targetQuat);
+        }
+        else {
+            finalQuat = targetQuat;
+        }
+        if (!targetQuat) {
+            finalQuat = this.controller.camera.quaternion;
+        }
+        finalQuat.normalize();
+        let dir = new three.Vector3(0, 0, 1);
+        dir.applyQuaternion(finalQuat).multiplyScalar(-1);
+        dir.normalize();
+        // quat
+        // let startQuat = this.camera.quaternion.clone();
+        // position
+        let startPos = this.camera.position.clone();
+        let endPos = new three.Vector3(targetPos.x + dir.x * distance * -1, targetPos.y + dir.y * distance * -1, targetPos.z + dir.z * distance * -1);
+        let posDir = new three.Vector3().subVectors(endPos, startPos);
+        let movingLength = posDir.length();
+        posDir.normalize();
+        // target
+        let startTarget = this.control.target.clone();
+        let targetDir = new three.Vector3().subVectors(targetPos, startTarget);
+        let targetDistance = targetDir.length();
+        targetDir.normalize();
+        // start animation
+        if (movingLength + targetDistance < 0.1) {
+            return;
+        }
+        //this.enabled = false;
+        let obj = { alpha: 0 };
+        this.anim = gsap.gsap.to(obj, {
+            duration: time,
+            alpha: 1,
+            onUpdate: () => {
+                let alpha = obj.alpha;
+                let camPos = new three.Vector3(startPos.x + posDir.x * alpha * movingLength, startPos.y + posDir.y * alpha * movingLength, startPos.z + posDir.z * alpha * movingLength);
+                let targetPos = new three.Vector3(startTarget.x + targetDir.x * alpha * targetDistance, startTarget.y + targetDir.y * alpha * targetDistance, startTarget.z + targetDir.z * alpha * targetDistance);
+                this.control.object.position.copy(camPos);
+                this.control.target.copy(targetPos);
+                this.control.update();
+                if (onGoing) {
+                    onGoing();
+                }
+                this.controller.viewPort.markRenderStateDirty();
+            },
+            onComplete: function () {
+                //_this.enabled = true;
+                if (onFinished) {
+                    onFinished();
+                }
+                this.controller.viewPort.markRenderStateDirty();
+            }
+        });
+    }
+    stopFocusing() {
+        if (this.anim) {
+            this.anim.kill();
+        }
+        this.anim = null;
+    }
 }
 
 class Controller {
@@ -1892,6 +1969,9 @@ class Controller {
         }
         return null;
     }
+    focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
+        this.pawn.focusTo(targetPos, targetQuat, distance, time, onGoing, onFinished);
+    }
 }
 
 class CameraFactory {
@@ -1937,6 +2017,7 @@ class CameraFactory {
                 return new three.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
             }
         }
+        return camera;
     }
 }
 
@@ -1981,7 +2062,11 @@ class ThreeJsApp {
     get controllerClass() {
         return Controller;
     }
+    get onCameraChangedDelegate() {
+        return this._onCameraChangedDelegate;
+    }
     constructor(elementId, appParam = DefaultAppParam) {
+        this._onCameraChangedDelegate = new Delegate();
         this._clock = new three.Clock();
         this._camera = CameraFactory.createCamera(appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam);
         this._world = new this.worldClass(this);
@@ -2003,6 +2088,14 @@ class ThreeJsApp {
         this.world.tick(delta);
         this.viewport.render();
     }
+    updateCamera(param) {
+        const previousCam = this.camera;
+        this._camera = CameraFactory.updataCamera(param, this.camera);
+        if (previousCam !== this.camera) {
+            this._onCameraChangedDelegate.broadcast();
+        }
+        this.viewport.markRenderStateDirty();
+    }
     onWindowResize(width, height) {
         if (this.camera instanceof three.PerspectiveCamera) {
             this.camera.aspect = width / height;
@@ -2014,6 +2107,7 @@ class ThreeJsApp {
         this.camera.updateProjectionMatrix();
     }
     destroy() {
+        this.onCameraChangedDelegate.clear();
         this.world.destroy();
         this.controller.destroy();
         this.viewport.destroy();

package/dist/bundle.esm.js

@@ -12,6 +12,7 @@ import { outline } from 'three/examples/jsm/tsl/display/OutlineNode.js';
 import { motionBlur } from 'three/examples/jsm/tsl/display/MotionBlur.js';
 import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js';
 import { smaa } from 'three/examples/jsm/tsl/display/SMAANode.js';
+import { gsap } from 'gsap';
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
@@ -1351,6 +1352,9 @@ class Viewport {
             }
         });
         this.resizeObserver.observe(this._canvas);
+        this.app.onCameraChangedDelegate.add(() => {
+            this.setupPostProcess();
+        });
         this.setupPostProcess();
     }
     init() {
@@ -1682,6 +1686,10 @@ class Pawn {
     }
     unpossess() {
     }
+    focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
+    }
+    stopFocusing() {
+    }
     destroy() {
     }
 }
@@ -1693,8 +1701,12 @@ class Orbital extends Pawn {
         }
         return this._control;
     }
+    get camera() {
+        return this.controller.camera;
+    }
     constructor(controller) {
         super(controller);
+        this.anim = null;
         this.changeEvent = () => { this.onChange(); };
         this._control = new OrbitControls(controller.camera, controller.viewPort.canvas);
         this.control.target.set(0, 0, 0);
@@ -1712,6 +1724,71 @@ class Orbital extends Pawn {
     onChange() {
         this.controller.viewPort.markRenderStateDirty();
     }
+    focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
+        this.stopFocusing();
+        let finalQuat = null;
+        if (targetQuat instanceof Euler) {
+            finalQuat = new Quaternion().setFromEuler(targetQuat);
+        }
+        else {
+            finalQuat = targetQuat;
+        }
+        if (!targetQuat) {
+            finalQuat = this.controller.camera.quaternion;
+        }
+        finalQuat.normalize();
+        let dir = new Vector3(0, 0, 1);
+        dir.applyQuaternion(finalQuat).multiplyScalar(-1);
+        dir.normalize();
+        // quat
+        // let startQuat = this.camera.quaternion.clone();
+        // position
+        let startPos = this.camera.position.clone();
+        let endPos = new Vector3(targetPos.x + dir.x * distance * -1, targetPos.y + dir.y * distance * -1, targetPos.z + dir.z * distance * -1);
+        let posDir = new Vector3().subVectors(endPos, startPos);
+        let movingLength = posDir.length();
+        posDir.normalize();
+        // target
+        let startTarget = this.control.target.clone();
+        let targetDir = new Vector3().subVectors(targetPos, startTarget);
+        let targetDistance = targetDir.length();
+        targetDir.normalize();
+        // start animation
+        if (movingLength + targetDistance < 0.1) {
+            return;
+        }
+        //this.enabled = false;
+        let obj = { alpha: 0 };
+        this.anim = gsap.to(obj, {
+            duration: time,
+            alpha: 1,
+            onUpdate: () => {
+                let alpha = obj.alpha;
+                let camPos = new Vector3(startPos.x + posDir.x * alpha * movingLength, startPos.y + posDir.y * alpha * movingLength, startPos.z + posDir.z * alpha * movingLength);
+                let targetPos = new Vector3(startTarget.x + targetDir.x * alpha * targetDistance, startTarget.y + targetDir.y * alpha * targetDistance, startTarget.z + targetDir.z * alpha * targetDistance);
+                this.control.object.position.copy(camPos);
+                this.control.target.copy(targetPos);
+                this.control.update();
+                if (onGoing) {
+                    onGoing();
+                }
+                this.controller.viewPort.markRenderStateDirty();
+            },
+            onComplete: function () {
+                //_this.enabled = true;
+                if (onFinished) {
+                    onFinished();
+                }
+                this.controller.viewPort.markRenderStateDirty();
+            }
+        });
+    }
+    stopFocusing() {
+        if (this.anim) {
+            this.anim.kill();
+        }
+        this.anim = null;
+    }
 }
 
 class Controller {
@@ -1890,6 +1967,9 @@ class Controller {
         }
         return null;
     }
+    focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
+        this.pawn.focusTo(targetPos, targetQuat, distance, time, onGoing, onFinished);
+    }
 }
 
 class CameraFactory {
@@ -1935,6 +2015,7 @@ class CameraFactory {
                 return new OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
             }
         }
+        return camera;
     }
 }
 
@@ -1979,7 +2060,11 @@ class ThreeJsApp {
     get controllerClass() {
         return Controller;
     }
+    get onCameraChangedDelegate() {
+        return this._onCameraChangedDelegate;
+    }
     constructor(elementId, appParam = DefaultAppParam) {
+        this._onCameraChangedDelegate = new Delegate();
         this._clock = new Clock();
         this._camera = CameraFactory.createCamera(appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam);
         this._world = new this.worldClass(this);
@@ -2001,6 +2086,14 @@ class ThreeJsApp {
         this.world.tick(delta);
         this.viewport.render();
     }
+    updateCamera(param) {
+        const previousCam = this.camera;
+        this._camera = CameraFactory.updataCamera(param, this.camera);
+        if (previousCam !== this.camera) {
+            this._onCameraChangedDelegate.broadcast();
+        }
+        this.viewport.markRenderStateDirty();
+    }
     onWindowResize(width, height) {
         if (this.camera instanceof PerspectiveCamera) {
             this.camera.aspect = width / height;
@@ -2012,6 +2105,7 @@ class ThreeJsApp {
         this.camera.updateProjectionMatrix();
     }
     destroy() {
+        this.onCameraChangedDelegate.clear();
         this.world.destroy();
         this.controller.destroy();
         this.viewport.destroy();

package/dist/lythreeframe/Factory/CameraFactory.d.ts

@@ -16,5 +16,5 @@ export interface OrthographicCameraParam {
 }
 export declare class CameraFactory {
     static createCamera(param: CameraParam): PerspectiveCamera | OrthographicCamera;
-    static updataCamera(param: CameraParam, camera: PerspectiveCamera | OrthographicCamera): PerspectiveCamera | OrthographicCamera | undefined;
+    static updataCamera(param: CameraParam, camera: PerspectiveCamera | OrthographicCamera): PerspectiveCamera | OrthographicCamera;
 }

package/dist/lythreeframe/Frame/Controller.d.ts

@@ -1,5 +1,5 @@
 import { ThreeJsApp } from "../ThreeJsApp";
-import { Intersection, OrthographicCamera, PerspectiveCamera } from "three";
+import { Euler, Intersection, OrthographicCamera, PerspectiveCamera, Quaternion, Vector3 } from "three";
 import { World } from "./World";
 import { Viewport } from "./Viewport";
 import { Pawn } from "../Object/PawnV2/Pawn";
@@ -37,4 +37,5 @@ export declare class Controller {
     onPointerLeaveEvent(event: MouseEvent): void;
     getHitResultUnderCursor(): Intersection | null;
     getHitResultFromScreenPoint(x: number, y: number): Intersection | null;
+    focusTo(targetPos: Vector3, targetQuat: Quaternion | Euler, distance: number, time: number, onGoing?: (() => void) | null, onFinished?: (() => void) | null): void;
 }

package/dist/lythreeframe/Object/PawnV2/Oribital.d.ts

@@ -1,12 +1,17 @@
 import { Pawn } from "./Pawn";
 import { Controller } from "../../Frame/Controller";
 import { OrbitControls } from "three/examples/jsm/Addons.js";
+import { Euler, Quaternion, Vector3 } from "three";
 export declare class Orbital extends Pawn {
+    private anim;
     get control(): OrbitControls;
     protected _control: OrbitControls;
     protected changeEvent: () => void;
+    get camera(): import("three").PerspectiveCamera | import("three").OrthographicCamera;
     constructor(controller: Controller);
     possess(): void;
     unpossess(): void;
     onChange(): void;
+    focusTo(targetPos: Vector3, targetQuat: Quaternion | Euler, distance: number, time: number, onGoing?: (() => void) | null, onFinished?: (() => void) | null): void;
+    stopFocusing(): void;
 }

package/dist/lythreeframe/Object/PawnV2/Pawn.d.ts

@@ -1,3 +1,4 @@
+import { Euler, Quaternion, Vector3 } from "three";
 import { Controller } from "../../Frame/Controller";
 export declare abstract class Pawn {
     get camera(): import("three").PerspectiveCamera | import("three").OrthographicCamera;
@@ -10,5 +11,7 @@ export declare abstract class Pawn {
     tick(deltaTime: number): void;
     possess(): void;
     unpossess(): void;
+    focusTo(targetPos: Vector3, targetQuat: Quaternion | Euler, distance: number, time: number, onGoing?: (() => void) | null, onFinished?: (() => void) | null): void;
+    stopFocusing(): void;
     destroy(): void;
 }

package/dist/lythreeframe/ThreeJsApp.d.ts

@@ -5,6 +5,7 @@ import { Controller } from "./Frame/Controller";
 import { Clock, OrthographicCamera, PerspectiveCamera } from "three";
 import { CameraParam } from "./Factory/CameraFactory";
 import { WebGPURendererParameters } from 'three/src/renderers/webgpu/WebGPURenderer.js';
+import { Delegate } from './Delegate';
 export interface AppParam {
     renderParam?: WebGPURendererParameters;
     cameraParam?: CameraParam;
@@ -27,9 +28,12 @@ export declare class ThreeJsApp {
     protected _world: World;
     protected _viewport: Viewport;
     protected _controller: Controller;
+    get onCameraChangedDelegate(): Delegate<[void]>;
+    protected _onCameraChangedDelegate: Delegate<[void]>;
     constructor(elementId: string, appParam?: AppParam);
     init(): void;
     tick(): void;
+    updateCamera(param: CameraParam): void;
     onWindowResize(width: number, height: number): void;
     destroy(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lythreeframe",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Three.js 封装",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",