lythreeframe 1.0.12 → 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');
@@ -852,13 +853,9 @@ class TAssetPointer extends TSmartPointer {
 class LYAssetManager {
     constructor() {
         this.assetPointer = new Map();
+        this.dracoLoader = null;
         this.loadingManager = new three.LoadingManager();
-        this.dracoLoader = new Addons_js.DRACOLoader(this.loadingManager);
-        this.dracoLoader.setDecoderPath(`./public/draco/`);
-        this.dracoLoader.setDecoderConfig({ type: "js" });
-        this.dracoLoader.preload();
         this.gltfLoader = new Addons_js.GLTFLoader(this.loadingManager);
-        this.gltfLoader.setDRACOLoader(this.dracoLoader);
     }
     get LoadingManager() {
         return this.loadingManager;
@@ -869,6 +866,13 @@ class LYAssetManager {
     static ClearAssets() {
         assetManager.clearAssets();
     }
+    setupDracoLoader(dracoPath) {
+        this.dracoLoader = new Addons_js.DRACOLoader(this.loadingManager);
+        this.dracoLoader.setDecoderPath(dracoPath);
+        this.dracoLoader.setDecoderConfig({ type: "js" });
+        this.dracoLoader.preload();
+        this.gltfLoader.setDRACOLoader(this.dracoLoader);
+    }
     convertThreeObjectToLYObject(parentLYComponent, threejsObject) {
         let location = threejsObject.position.clone();
         let rotation = threejsObject.rotation.clone();
@@ -1350,6 +1354,9 @@ class Viewport {
             }
         });
         this.resizeObserver.observe(this._canvas);
+        this.app.onCameraChangedDelegate.add(() => {
+            this.setupPostProcess();
+        });
         this.setupPostProcess();
     }
     init() {
@@ -1681,6 +1688,10 @@ class Pawn {
     }
     unpossess() {
     }
+    focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
+    }
+    stopFocusing() {
+    }
     destroy() {
     }
 }
@@ -1692,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);
@@ -1711,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 {
@@ -1889,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 {
@@ -1934,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;
     }
 }
 
@@ -1978,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);
@@ -2000,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;
@@ -2011,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

@@ -1,5 +1,5 @@
 import { MathUtils, Group, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, BufferGeometry, Material, Texture, LoadingManager, FileLoader, Scene, NoToneMapping, LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, AgXToneMapping, NeutralToneMapping, Vector2, Raycaster, PerspectiveCamera, OrthographicCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry, Object3D } from 'three';
-import { DRACOLoader, GLTFLoader, CSS2DRenderer, OrbitControls } from 'three/examples/jsm/Addons.js';
+import { GLTFLoader, DRACOLoader, CSS2DRenderer, OrbitControls } from 'three/examples/jsm/Addons.js';
 import { pass, mrt, output, uniform, velocity, metalness, transformedNormalView, blendColor, time, oscSine } from 'three/tsl';
 import { WebGPURenderer, PostProcessing, Color } from 'three/webgpu';
 import { bloom } from 'three/examples/jsm/tsl/display/BloomNode.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';
@@ -850,13 +851,9 @@ class TAssetPointer extends TSmartPointer {
 class LYAssetManager {
     constructor() {
         this.assetPointer = new Map();
+        this.dracoLoader = null;
         this.loadingManager = new LoadingManager();
-        this.dracoLoader = new DRACOLoader(this.loadingManager);
-        this.dracoLoader.setDecoderPath(`./public/draco/`);
-        this.dracoLoader.setDecoderConfig({ type: "js" });
-        this.dracoLoader.preload();
         this.gltfLoader = new GLTFLoader(this.loadingManager);
-        this.gltfLoader.setDRACOLoader(this.dracoLoader);
     }
     get LoadingManager() {
         return this.loadingManager;
@@ -867,6 +864,13 @@ class LYAssetManager {
     static ClearAssets() {
         assetManager.clearAssets();
     }
+    setupDracoLoader(dracoPath) {
+        this.dracoLoader = new DRACOLoader(this.loadingManager);
+        this.dracoLoader.setDecoderPath(dracoPath);
+        this.dracoLoader.setDecoderConfig({ type: "js" });
+        this.dracoLoader.preload();
+        this.gltfLoader.setDRACOLoader(this.dracoLoader);
+    }
     convertThreeObjectToLYObject(parentLYComponent, threejsObject) {
         let location = threejsObject.position.clone();
         let rotation = threejsObject.rotation.clone();
@@ -1348,6 +1352,9 @@ class Viewport {
             }
         });
         this.resizeObserver.observe(this._canvas);
+        this.app.onCameraChangedDelegate.add(() => {
+            this.setupPostProcess();
+        });
         this.setupPostProcess();
     }
     init() {
@@ -1679,6 +1686,10 @@ class Pawn {
     }
     unpossess() {
     }
+    focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
+    }
+    stopFocusing() {
+    }
     destroy() {
     }
 }
@@ -1690,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);
@@ -1709,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 {
@@ -1887,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 {
@@ -1932,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;
     }
 }
 
@@ -1976,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);
@@ -1998,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;
@@ -2009,6 +2105,7 @@ class ThreeJsApp {
         this.camera.updateProjectionMatrix();
     }
     destroy() {
+        this.onCameraChangedDelegate.clear();
         this.world.destroy();
         this.controller.destroy();
         this.viewport.destroy();

package/dist/lythreeframe/AssetManagement/AssetManager.d.ts

@@ -5,13 +5,14 @@ import { TAssetPointer } from "./AssetPointer/AssetPointer";
 import { DRACOLoader, GLTF, GLTFLoader } from 'three/examples/jsm/Addons.js';
 export declare class LYAssetManager {
     protected assetPointer: Map<string, TAssetPointer<BufferGeometry | Texture | Material>>;
-    protected readonly dracoLoader: DRACOLoader;
+    protected dracoLoader: DRACOLoader | null;
     protected readonly gltfLoader: GLTFLoader;
     protected readonly loadingManager: LoadingManager;
     constructor();
     get LoadingManager(): LoadingManager;
     static Get(): LYAssetManager;
     static ClearAssets(): void;
+    setupDracoLoader(dracoPath: string): void;
     convertThreeObjectToLYObject(parentLYComponent: SceneComponent, threejsObject: any): SceneComponent | null;
     private collectResourcesAndReferences;
     checkMeshResource(mesh: Mesh): void;

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.12",
+  "version": "1.0.14",
   "description": "Three.js 封装",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
@@ -16,9 +16,7 @@
     "@types/three": "^0.173.0"
   },
   "files": [
-    "dist",
-    "public",
-    "public/draco"
+    "dist"
   ],
   "devDependencies": {
     "@rollup/plugin-typescript": "^12.1.2",

package/public/draco/README.md

@@ -1,32 +0,0 @@
-# Draco 3D Data Compression
-
-Draco is an open-source library for compressing and decompressing 3D geometric meshes and point clouds. It is intended to improve the storage and transmission of 3D graphics.
-
-[Website](https://google.github.io/draco/) | [GitHub](https://github.com/google/draco)
-
-## Contents
-
-This folder contains three utilities:
-
-* `draco_decoder.js` — Emscripten-compiled decoder, compatible with any modern browser.
-* `draco_decoder.wasm` — WebAssembly decoder, compatible with newer browsers and devices.
-* `draco_wasm_wrapper.js` — JavaScript wrapper for the WASM decoder.
-
-Each file is provided in two variations:
-
-* **Default:** Latest stable builds, tracking the project's [master branch](https://github.com/google/draco).
-* **glTF:** Builds targeted by the [glTF mesh compression extension](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression), tracking the [corresponding Draco branch](https://github.com/google/draco/tree/gltf_2.0_draco_extension).
-
-Either variation may be used with `THREE.DRACOLoader`:
-
-```js
-var dracoLoader = new THREE.DRACOLoader();
-dracoLoader.setDecoderPath('path/to/decoders/');
-dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
-```
-
-Further [documentation on GitHub](https://github.com/google/draco/tree/master/javascript/example#static-loading-javascript-decoder).
-
-## License
-
-[Apache License 2.0](https://github.com/google/draco/blob/master/LICENSE)