lythreeframe 1.0.6 → 1.0.7

package/dist/bundle.cjs.js

@@ -2,13 +2,12 @@
 
 var three = require('three');
 var Addons_js = require('three/examples/jsm/Addons.js');
-var Nodes_js = require('three/examples/jsm/nodes/Nodes.js');
-var WebGPURenderer_js = require('three/examples/jsm/renderers/webgpu/WebGPURenderer.js');
+var tsl = require('three/tsl');
+var webgpu = require('three/webgpu');
 var BloomNode_js = require('three/examples/jsm/tsl/display/BloomNode.js');
 var DenoiseNode_js = require('three/examples/jsm/tsl/display/DenoiseNode.js');
 var DepthOfFieldNode_js = require('three/examples/jsm/tsl/display/DepthOfFieldNode.js');
 var GTAONode_js = require('three/examples/jsm/tsl/display/GTAONode.js');
-var tsl = require('three/tsl');
 var SSRNode_js = require('three/examples/jsm/tsl/display/SSRNode.js');
 var LensflareNode_js = require('three/examples/jsm/tsl/display/LensflareNode.js');
 var OutlineNode_js = require('three/examples/jsm/tsl/display/OutlineNode.js');
@@ -17,6 +16,7 @@ var FXAANode_js = require('three/examples/jsm/tsl/display/FXAANode.js');
 var SMAANode_js = require('three/examples/jsm/tsl/display/SMAANode.js');
 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');
 
 class LYLoadTask {
     constructor(paths, onLoaded) {
@@ -1326,7 +1326,7 @@ class Viewport {
         if (!element) {
             throw Error(`Can not find domElement which id is ${elementId}`);
         }
-        this._renderer = new WebGPURenderer_js.WebGPURenderer(rendererParam);
+        this._renderer = new webgpu.WebGPURenderer(rendererParam);
         this._renderer.setPixelRatio(window.devicePixelRatio);
         this._renderer.setSize(element.clientWidth, element.clientHeight);
         this._renderer.shadowMap.enabled = true;
@@ -1364,7 +1364,7 @@ class Viewport {
             return;
         }
         if (!this.postProcessing) {
-            this.postProcessing = new WebGPURenderer_js.PostProcessing(this.renderer);
+            this.postProcessing = new webgpu.PostProcessing(this.renderer);
         }
         if (!this.scenePass) {
             this.scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
@@ -1428,7 +1428,7 @@ class Viewport {
             else {
                 WebGPUPostProcessFactory.updateSSRPass(this.ssrPass, this.postProcessParam.ssr);
             }
-            finalNode = Nodes_js.blendColor(finalNode, this.ssrPass);
+            finalNode = tsl.blendColor(finalNode, this.ssrPass);
         }
         // GTAO
         if (this.postProcessParam.gtao) {
@@ -1474,10 +1474,10 @@ class Viewport {
                 WebGPUPostProcessFactory.updateOutlinePass(this.outlinePass, this.outlineObjects, this.postProcessParam.outline);
             }
             const { visibleEdge, hiddenEdge } = this.outlinePass;
-            const pulsePeriod = Nodes_js.uniform(this.postProcessParam.outline.pulsePeriod);
-            const period = Nodes_js.time.div(pulsePeriod).mul(2);
-            const osc = Nodes_js.oscSine(period).mul(.5).add(.5);
-            const outlineColor = visibleEdge.mul(Nodes_js.uniform(new WebGPURenderer_js.Color(this.postProcessParam.outline.visibleEdgeColor))).add(hiddenEdge.mul(Nodes_js.uniform(new WebGPURenderer_js.Color(this.postProcessParam.outline.hiddenEdgeColor)))).mul(this.postProcessParam.outline.edgeStrength);
+            const pulsePeriod = tsl.uniform(this.postProcessParam.outline.pulsePeriod);
+            const period = tsl.time.div(pulsePeriod).mul(2);
+            const osc = tsl.oscSine(period).mul(.5).add(.5);
+            const outlineColor = visibleEdge.mul(tsl.uniform(new webgpu.Color(this.postProcessParam.outline.visibleEdgeColor))).add(hiddenEdge.mul(tsl.uniform(new webgpu.Color(this.postProcessParam.outline.hiddenEdgeColor)))).mul(this.postProcessParam.outline.edgeStrength);
             const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
             // if(!this.denoiseOutlinePass)
             // {
@@ -2611,6 +2611,141 @@ class FirstPerson extends Pawn {
     }
 }
 
+class TransformGizmo extends Pawn {
+    get control() {
+        if (!this._control) {
+            throw new Error("Control not initialized");
+        }
+        return this._control;
+    }
+    constructor(controller) {
+        super(controller);
+        this._control = null;
+        this.helperObject = new three.Object3D();
+        this.targets = [];
+        this.primaryTarget = null;
+        this.targetMatrixMap = new Map();
+        this.onDraggingChangedEvent = (param) => { this.onDraggingChanged(param); };
+        this.onObjectChangeEvent = () => { this.onObjectChanged(); };
+        this.onChangeEvent = () => { this.onChange(); };
+        this.onUpdateFunctions = [];
+        this.onDraggingFunctions = [];
+        this._control = new TransformControls_js.TransformControls(controller.camera, controller.viewPort.canvas);
+        this.control.getHelper().traverse((elem) => {
+            elem.userData["rayIgnored"] = true;
+        });
+        this.helperObject.name = "TransformHelperObject";
+    }
+    possess() {
+        var _a;
+        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.add(this.helperObject);
+        this.control.attach(this.helperObject);
+        this.control.addEventListener('change', this.onChangeEvent);
+        this.control.addEventListener('dragging-changed', this.onDraggingChangedEvent);
+        this.control.addEventListener('objectChange', this.onObjectChangeEvent);
+    }
+    unpossess() {
+        var _a;
+        this.control.removeEventListener('change', this.onChangeEvent);
+        this.control.removeEventListener('dragging-changed', this.onDraggingChangedEvent);
+        this.control.removeEventListener('objectChange', this.onObjectChangeEvent);
+        this.control.detach();
+        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.remove(this.helperObject);
+    }
+    onChange() {
+        this.controller.viewPort.markRenderStateDirty();
+    }
+    onDraggingChanged(event) {
+        if (this.primaryTarget) {
+            let tMatrix = this.primaryTarget.getMatrixInWorld();
+            tMatrix.decompose(this.helperObject.position, this.helperObject.quaternion, this.helperObject.scale);
+        }
+        this.onDraggingFunctions.forEach((elem) => {
+            elem(event.value);
+        });
+    }
+    onObjectChanged() {
+        if (this.primaryTarget) {
+            //const TA1 = this.primaryTarget.getMatrixInWorld();
+            this.helperObject.updateMatrixWorld(true);
+            const TA2 = this.helperObject.matrixWorld.clone();
+            this.primaryTarget.onTransforming(TA2);
+            // const TA1Inverse      = TA1.clone().invert();
+            //const transformMatrix = new Matrix4().multiplyMatrices(TA2, TA1Inverse);
+            this.targets.forEach((tar) => {
+                if (tar !== this.primaryTarget) {
+                    let t = this.targetMatrixMap.get(tar);
+                    if (t) {
+                        let TB2 = new three.Matrix4().multiplyMatrices(TA2, t); // B 
+                        tar.onTransforming(TB2);
+                    }
+                }
+            });
+        }
+        this.onUpdateFunctions.forEach((elem) => {
+            elem();
+        });
+    }
+    set enable(newEnable) {
+        this.control.enabled = newEnable;
+    }
+    setTarget(primaryTarget, multiTargets, onUpdate = null, onDragging = null) {
+        var _a;
+        this.targetMatrixMap.clear();
+        let tMatrix = primaryTarget.getMatrixInWorld();
+        tMatrix.decompose(this.helperObject.position, this.helperObject.quaternion, this.helperObject.scale);
+        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.add(this.control.getHelper());
+        // this.control.attach(this.helperObject);
+        this.primaryTarget = primaryTarget;
+        this.targets = multiTargets;
+        this.targets.forEach((elem) => {
+            const tarMatrix = elem.getMatrixInWorld();
+            const TB_local = tMatrix.clone().invert().multiply(tarMatrix);
+            this.targetMatrixMap.set(elem, TB_local);
+        });
+        if (onUpdate) {
+            this.onUpdateFunctions.push(onUpdate);
+        }
+        if (onUpdate) {
+            this.onUpdateFunctions.push(onUpdate);
+        }
+        if (onDragging) {
+            this.onDraggingFunctions.push(onDragging);
+        }
+        this.isTickEnabled = true;
+    }
+    getMode() {
+        return this.control.getMode();
+    }
+    setMode(mode) {
+        this.control.setMode(mode);
+    }
+    setSpace(space) {
+        this.control.setSpace(space);
+    }
+    setAxis(axis) {
+        this.control.showX = axis ? axis === null || axis === void 0 ? void 0 : axis.includes("X") : false;
+        this.control.showY = axis ? axis === null || axis === void 0 ? void 0 : axis.includes("Y") : false;
+        this.control.showZ = axis ? axis === null || axis === void 0 ? void 0 : axis.includes("Z") : false;
+    }
+    setSize(size) {
+        this.control.setSize(size);
+    }
+    destroy() {
+        var _a;
+        this.isTickEnabled = false;
+        this.unpossess();
+        this.targetMatrixMap.clear();
+        this.targets = [];
+        this.primaryTarget = null;
+        this.onUpdateFunctions = [];
+        this.onDraggingFunctions = [];
+        (_a = this._control) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._control = null;
+        super.destroy();
+    }
+}
+
 exports.Actor = Actor;
 exports.BoxActor = BoxActor;
 exports.BoxComponent = BoxComponent;
@@ -2641,6 +2776,7 @@ exports.SceneComponent = SceneComponent;
 exports.SphereComponent = SphereComponent;
 exports.ThreeJsApp = ThreeJsApp;
 exports.ToneMappingOptions = ToneMappingOptions;
+exports.TransformGizmo = TransformGizmo;
 exports.Viewport = Viewport;
 exports.WebGPUPostProcessFactory = WebGPUPostProcessFactory;
 exports.World = World;

package/dist/bundle.esm.js

@@ -1,12 +1,11 @@
-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 } from 'three';
+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 { blendColor, uniform as uniform$1, time, oscSine } from 'three/examples/jsm/nodes/Nodes.js';
-import { WebGPURenderer, PostProcessing, Color } from 'three/examples/jsm/renderers/webgpu/WebGPURenderer.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';
 import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js';
 import { dof } from 'three/examples/jsm/tsl/display/DepthOfFieldNode.js';
 import { ao } from 'three/examples/jsm/tsl/display/GTAONode.js';
-import { pass, mrt, output, uniform, velocity, metalness, transformedNormalView } from 'three/tsl';
 import { ssr } from 'three/examples/jsm/tsl/display/SSRNode.js';
 import { lensflare } from 'three/examples/jsm/tsl/display/LensflareNode.js';
 import { outline } from 'three/examples/jsm/tsl/display/OutlineNode.js';
@@ -15,6 +14,7 @@ import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js';
 import { smaa } from 'three/examples/jsm/tsl/display/SMAANode.js';
 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';
 
 class LYLoadTask {
     constructor(paths, onLoaded) {
@@ -1472,10 +1472,10 @@ class Viewport {
                 WebGPUPostProcessFactory.updateOutlinePass(this.outlinePass, this.outlineObjects, this.postProcessParam.outline);
             }
             const { visibleEdge, hiddenEdge } = this.outlinePass;
-            const pulsePeriod = uniform$1(this.postProcessParam.outline.pulsePeriod);
+            const pulsePeriod = uniform(this.postProcessParam.outline.pulsePeriod);
             const period = time.div(pulsePeriod).mul(2);
             const osc = oscSine(period).mul(.5).add(.5);
-            const outlineColor = visibleEdge.mul(uniform$1(new Color(this.postProcessParam.outline.visibleEdgeColor))).add(hiddenEdge.mul(uniform$1(new Color(this.postProcessParam.outline.hiddenEdgeColor)))).mul(this.postProcessParam.outline.edgeStrength);
+            const outlineColor = visibleEdge.mul(uniform(new Color(this.postProcessParam.outline.visibleEdgeColor))).add(hiddenEdge.mul(uniform(new Color(this.postProcessParam.outline.hiddenEdgeColor)))).mul(this.postProcessParam.outline.edgeStrength);
             const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
             // if(!this.denoiseOutlinePass)
             // {
@@ -2609,4 +2609,139 @@ class FirstPerson extends Pawn {
     }
 }
 
-export { Actor, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRenderParam, DefaultSSRParam, DefaultToneMappingParams, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, LYAssetManager, LYLoadTask, LabelComponent, MeshComponent, Orbital, PlaneActor, PlaneComponent, SceneComponent, SphereComponent, ThreeJsApp, ToneMappingOptions, Viewport, WebGPUPostProcessFactory, World };
+class TransformGizmo extends Pawn {
+    get control() {
+        if (!this._control) {
+            throw new Error("Control not initialized");
+        }
+        return this._control;
+    }
+    constructor(controller) {
+        super(controller);
+        this._control = null;
+        this.helperObject = new Object3D();
+        this.targets = [];
+        this.primaryTarget = null;
+        this.targetMatrixMap = new Map();
+        this.onDraggingChangedEvent = (param) => { this.onDraggingChanged(param); };
+        this.onObjectChangeEvent = () => { this.onObjectChanged(); };
+        this.onChangeEvent = () => { this.onChange(); };
+        this.onUpdateFunctions = [];
+        this.onDraggingFunctions = [];
+        this._control = new TransformControls(controller.camera, controller.viewPort.canvas);
+        this.control.getHelper().traverse((elem) => {
+            elem.userData["rayIgnored"] = true;
+        });
+        this.helperObject.name = "TransformHelperObject";
+    }
+    possess() {
+        var _a;
+        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.add(this.helperObject);
+        this.control.attach(this.helperObject);
+        this.control.addEventListener('change', this.onChangeEvent);
+        this.control.addEventListener('dragging-changed', this.onDraggingChangedEvent);
+        this.control.addEventListener('objectChange', this.onObjectChangeEvent);
+    }
+    unpossess() {
+        var _a;
+        this.control.removeEventListener('change', this.onChangeEvent);
+        this.control.removeEventListener('dragging-changed', this.onDraggingChangedEvent);
+        this.control.removeEventListener('objectChange', this.onObjectChangeEvent);
+        this.control.detach();
+        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.remove(this.helperObject);
+    }
+    onChange() {
+        this.controller.viewPort.markRenderStateDirty();
+    }
+    onDraggingChanged(event) {
+        if (this.primaryTarget) {
+            let tMatrix = this.primaryTarget.getMatrixInWorld();
+            tMatrix.decompose(this.helperObject.position, this.helperObject.quaternion, this.helperObject.scale);
+        }
+        this.onDraggingFunctions.forEach((elem) => {
+            elem(event.value);
+        });
+    }
+    onObjectChanged() {
+        if (this.primaryTarget) {
+            //const TA1 = this.primaryTarget.getMatrixInWorld();
+            this.helperObject.updateMatrixWorld(true);
+            const TA2 = this.helperObject.matrixWorld.clone();
+            this.primaryTarget.onTransforming(TA2);
+            // const TA1Inverse      = TA1.clone().invert();
+            //const transformMatrix = new Matrix4().multiplyMatrices(TA2, TA1Inverse);
+            this.targets.forEach((tar) => {
+                if (tar !== this.primaryTarget) {
+                    let t = this.targetMatrixMap.get(tar);
+                    if (t) {
+                        let TB2 = new Matrix4().multiplyMatrices(TA2, t); // B 
+                        tar.onTransforming(TB2);
+                    }
+                }
+            });
+        }
+        this.onUpdateFunctions.forEach((elem) => {
+            elem();
+        });
+    }
+    set enable(newEnable) {
+        this.control.enabled = newEnable;
+    }
+    setTarget(primaryTarget, multiTargets, onUpdate = null, onDragging = null) {
+        var _a;
+        this.targetMatrixMap.clear();
+        let tMatrix = primaryTarget.getMatrixInWorld();
+        tMatrix.decompose(this.helperObject.position, this.helperObject.quaternion, this.helperObject.scale);
+        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.add(this.control.getHelper());
+        // this.control.attach(this.helperObject);
+        this.primaryTarget = primaryTarget;
+        this.targets = multiTargets;
+        this.targets.forEach((elem) => {
+            const tarMatrix = elem.getMatrixInWorld();
+            const TB_local = tMatrix.clone().invert().multiply(tarMatrix);
+            this.targetMatrixMap.set(elem, TB_local);
+        });
+        if (onUpdate) {
+            this.onUpdateFunctions.push(onUpdate);
+        }
+        if (onUpdate) {
+            this.onUpdateFunctions.push(onUpdate);
+        }
+        if (onDragging) {
+            this.onDraggingFunctions.push(onDragging);
+        }
+        this.isTickEnabled = true;
+    }
+    getMode() {
+        return this.control.getMode();
+    }
+    setMode(mode) {
+        this.control.setMode(mode);
+    }
+    setSpace(space) {
+        this.control.setSpace(space);
+    }
+    setAxis(axis) {
+        this.control.showX = axis ? axis === null || axis === void 0 ? void 0 : axis.includes("X") : false;
+        this.control.showY = axis ? axis === null || axis === void 0 ? void 0 : axis.includes("Y") : false;
+        this.control.showZ = axis ? axis === null || axis === void 0 ? void 0 : axis.includes("Z") : false;
+    }
+    setSize(size) {
+        this.control.setSize(size);
+    }
+    destroy() {
+        var _a;
+        this.isTickEnabled = false;
+        this.unpossess();
+        this.targetMatrixMap.clear();
+        this.targets = [];
+        this.primaryTarget = null;
+        this.onUpdateFunctions = [];
+        this.onDraggingFunctions = [];
+        (_a = this._control) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._control = null;
+        super.destroy();
+    }
+}
+
+export { Actor, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRenderParam, DefaultSSRParam, DefaultToneMappingParams, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, LYAssetManager, LYLoadTask, LabelComponent, MeshComponent, Orbital, PlaneActor, PlaneComponent, SceneComponent, SphereComponent, ThreeJsApp, ToneMappingOptions, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };

package/dist/index.d.ts

@@ -38,3 +38,5 @@ export { LabelComponent } from "./lythreeframe/Object/Components/2D/2DComponent"
 export { Orbital } from "./lythreeframe/Object/PawnV2/Oribital";
 export { FirstPerson } from "./lythreeframe/Object/PawnV2/FirstPerson";
 export type { ITransforming } from "./lythreeframe/Object/PawnV2/TransformControl";
+export { TransformType } from "./lythreeframe/Object/PawnV2/TransformControl";
+export { TransformGizmo } from "./lythreeframe/Object/PawnV2/TransformControl";

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

@@ -1,6 +1,6 @@
 import { PostProcessParam } from './../PostProcess/PostProcessParam';
 import { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.js";
-import { WebGPURenderer } from "three/examples/jsm/renderers/webgpu/WebGPURenderer.js";
+import { WebGPURenderer } from "three/webgpu";
 import { BloomParam } from "../PostProcess/Param/Bloom";
 import { GTAOParam } from "../PostProcess/Param/GTAO";
 import { ToneMappingParams } from "../PostProcess/Param/ToneMapping";

package/package.json

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