lythreeframe 1.0.5 → 1.0.7

package/dist/bundle.cjs.js

@@ -0,0 +1,2782 @@
+'use strict';
+
+var three = require('three');
+var Addons_js = require('three/examples/jsm/Addons.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 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');
+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 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) {
+        this.paths = paths;
+        this.onLoaded = onLoaded;
+    }
+    get Paths() {
+        return this.paths;
+    }
+    onLoadingFinished(loaded) {
+        if (this.onLoaded) {
+            this.onLoaded(loaded);
+        }
+    }
+}
+
+/*
+ * virtual class of 3D Object, should not be use directly.
+ */
+class BaseObject {
+    get IsTickable() {
+        return this.bCanTick;
+    }
+    set IsTickable(bCanTick) {
+        this.bCanTick = bCanTick;
+    }
+    get uuid() {
+        return this._uuid;
+    }
+    constructor(uuid = three.MathUtils.generateUUID()) {
+        this.bCanTick = false;
+        this.bCanTick = false;
+        this._uuid = uuid;
+    }
+    tick(deltaTime) {
+        if (!this.bCanTick) {
+            return;
+        }
+    }
+    destroy() {
+    }
+}
+
+class Component extends BaseObject {
+    set parentActor(value) {
+        this._parentActor = value;
+    }
+    get parentActor() {
+        return this._parentActor;
+    }
+    get threeObject() {
+        return this.obj;
+    }
+    set threeObject(newThreeObject) {
+        this.obj = newThreeObject;
+        if (this.obj) {
+            this.obj.userData["LYObject"] = this;
+        }
+    }
+    get name() {
+        return this._name;
+    }
+    set name(name) {
+        this._name = name;
+    }
+    constructor(newThreeObject) {
+        super(newThreeObject.uuid);
+        this.obj = null;
+        this._parentActor = null;
+        this._name = "Component";
+        this._parentActor = null;
+        this.threeObject = newThreeObject;
+        this._name = `${newThreeObject.type}Component`;
+    }
+    destroyObject() {
+        if (!this.obj) {
+            return;
+        }
+    }
+    destroy() {
+        this.destroyObject();
+    }
+}
+
+// export const LYAttachmentRules = 
+// {
+//     KeepWorld: 1,
+//     KeepRelative: 2,
+// }
+exports.AttachmentRules = void 0;
+(function (AttachmentRules) {
+    AttachmentRules[AttachmentRules["KeepWorld"] = 1] = "KeepWorld";
+    AttachmentRules[AttachmentRules["KeepRelative"] = 2] = "KeepRelative";
+})(exports.AttachmentRules || (exports.AttachmentRules = {}));
+
+class SceneComponent extends Component {
+    set parentActor(value) {
+        this.childrenComponents.forEach((elem) => {
+            elem.parentActor = value;
+        });
+        this._parentActor = value;
+    }
+    get parentActor() {
+        // 通过 _parentActor 私有字段访问父级 Actor
+        return this._parentActor;
+    }
+    constructor(newThreeObject) {
+        super(newThreeObject);
+        this.bCanHover = false;
+        this.bCanClick = false;
+        this.world = null;
+        this._name = "SceneComponent";
+    }
+    createDefaultThreeObject() {
+        this.threeObject = new three.Group();
+    }
+    get isVisible() {
+        if (!this.threeObject) {
+            return false;
+        }
+        return this.threeObject.visible;
+    }
+    setVisible(bVisible) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        this.threeObject.visible = bVisible;
+        if (this.world) {
+            this.world.viewport.markRenderStateDirty();
+        }
+    }
+    setLayers(layer) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        this.threeObject.layers.set(layer);
+        let childComps = this.childrenComponents;
+        childComps.forEach((elem) => {
+            elem.setLayers(layer);
+        });
+    }
+    getBoundsCenterPositionWS() {
+        let ret = new three.Vector3();
+        this.getBounds().getCenter(ret);
+        return this.getWorldPosition();
+    }
+    getBoundsTopCenterPositionWS() {
+        let ret = new three.Vector3();
+        let bounds = this.getBounds();
+        bounds.getCenter(ret);
+        ret.y = bounds.max.y;
+        return ret;
+    }
+    getBoundsBottomCenterPositionWS() {
+        let ret = new three.Vector3();
+        let bounds = this.getBounds();
+        bounds.getCenter(ret);
+        ret.y = bounds.min.y;
+        return ret;
+    }
+    getBounds() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let ret = new three.Box3();
+        ret.setFromObject(this.threeObject, false);
+        if (ret.isEmpty()) {
+            ret.min = ret.max = this.getWorldPosition();
+        }
+        return ret;
+    }
+    get parentComponent() {
+        var _a, _b;
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let target = (_b = (_a = this.threeObject) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.userData.LYObject;
+        if (!target) {
+            return null;
+        }
+        if (!(target instanceof SceneComponent)) {
+            return null;
+        }
+        if (target.parentActor !== this.parentActor) {
+            return null;
+        }
+        return target;
+    }
+    get childrenComponents() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let childrens = [];
+        for (let i = 0; i < this.threeObject.children.length; ++i) {
+            if (!this.threeObject.children[i].userData.LYObject) {
+                console.warn("One of children component has no parentActor", this.threeObject.children[i].userData.LYObject, this.threeObject.children[i]);
+                continue;
+            }
+            if (this.threeObject.children[i].userData.LYObject.parentActor === this.parentActor) {
+                childrens.push(this.threeObject.children[i].userData.LYObject);
+            }
+        }
+        return childrens;
+    }
+    onAddedToWorld(world) {
+        this.world = world;
+        let childrens = this.childrenComponents;
+        for (let i = 0; i < childrens.length; ++i) {
+            childrens[i].onAddedToWorld(this.world);
+        }
+    }
+    destroy() {
+        this.isHoverEnabled = false;
+        this.isClickEnabled = false;
+        this.detachFromParentActor();
+        this.detachFromParentComponent();
+        this.destroyChildren();
+        this.destroyObject();
+        if (this.world) {
+            this.world.viewport.markRenderStateDirty();
+        }
+    }
+    destroyObject() {
+        if (!this.threeObject) {
+            return;
+        }
+        if (this.threeObject.parent) {
+            this.threeObject.parent.remove(this.threeObject);
+        }
+        super.destroyObject();
+    }
+    // Local Transforms
+    // // Position
+    getPosition() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        if (this.threeObject.matrixAutoUpdate) {
+            return this.threeObject.position.clone();
+        }
+        else {
+            const position = new three.Vector3();
+            const quaternion = new three.Quaternion();
+            const scale = new three.Vector3();
+            this.threeObject.matrix.decompose(position, quaternion, scale);
+            return position;
+        }
+    }
+    setPosition(...args) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let newPosition = null;
+        if (args.length === 1 && args[0] instanceof three.Vector3) {
+            newPosition = new three.Vector3().copy(args[0]);
+        }
+        else if (args.length === 3 &&
+            typeof args[0] === "number" &&
+            typeof args[1] === "number" &&
+            typeof args[2] === "number") {
+            newPosition = new three.Vector3(args[0], args[1], args[2]);
+        }
+        if (!newPosition) {
+            return;
+        }
+        this.threeObject.position.copy(newPosition);
+        if (!this.threeObject.matrixAutoUpdate) {
+            this.threeObject.matrix.setPosition(newPosition.x, newPosition.y, newPosition.z);
+        }
+        this.threeObject.updateMatrix();
+        this.threeObject.updateMatrixWorld(true);
+        if (this.world) {
+            this.world.viewport.markRenderStateDirty();
+        }
+    }
+    // // Rotation
+    getRotation() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        if (this.threeObject.matrixAutoUpdate) {
+            return this.threeObject.rotation.clone();
+        }
+        else {
+            const position = new three.Vector3();
+            const quaternion = new three.Quaternion();
+            const scale = new three.Vector3();
+            this.threeObject.matrix.decompose(position, quaternion, scale);
+            return new three.Euler().setFromQuaternion(quaternion);
+        }
+    }
+    setRotation(...args) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let newRotation = null;
+        if (args[0] instanceof three.Euler) {
+            newRotation = new three.Euler().copy(args[0]);
+        }
+        if (typeof (args[0]) === "number" && typeof (args[1]) === "number" && typeof (args[2]) === "number") {
+            newRotation = new three.Euler(args[0], args[1], args[2]);
+        }
+        if (!newRotation) {
+            return;
+        }
+        this.threeObject.rotation.copy(newRotation);
+        this.threeObject.updateMatrix();
+        this.threeObject.updateMatrixWorld(true);
+        if (this.world) {
+            this.world.viewport.markRenderStateDirty();
+        }
+    }
+    // // quat
+    getQuaternion() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        if (this.threeObject.matrixAutoUpdate) {
+            return this.threeObject.quaternion.clone();
+        }
+        else {
+            const position = new three.Vector3();
+            const quaternion = new three.Quaternion();
+            const scale = new three.Vector3();
+            this.threeObject.matrix.decompose(position, quaternion, scale);
+            return quaternion;
+        }
+    }
+    setQuaternion(...args) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let newQuat = null;
+        if (args[0] instanceof three.Quaternion) {
+            newQuat = new three.Quaternion().copy(args[0]);
+        }
+        if (typeof args[0] === "number" && typeof args[1] === "number" && typeof args[2] === "number" && typeof args[3] === "number") {
+            newQuat = new three.Quaternion(args[0], args[1], args[2], args[3]);
+        }
+        if (!newQuat) {
+            console.error("setQuaternion failed,param is invalid", args);
+            return;
+        }
+        this.threeObject.quaternion.copy(newQuat);
+        if (!this.threeObject.matrixAutoUpdate) {
+            const position = new three.Vector3();
+            const quaternion = new three.Quaternion();
+            const scale = new three.Vector3();
+            this.threeObject.matrix.decompose(position, quaternion, scale);
+            this.threeObject.matrix.compose(position, newQuat, scale);
+        }
+        if (this.world) {
+            this.world.viewport.markRenderStateDirty();
+        }
+        this.threeObject.updateMatrix();
+        this.threeObject.updateMatrixWorld(true);
+    }
+    // // Scale
+    getScale() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        if (this.threeObject.matrixAutoUpdate) {
+            return this.threeObject.scale.clone();
+        }
+        else {
+            const position = new three.Vector3();
+            const quaternion = new three.Quaternion();
+            const scale = new three.Vector3();
+            this.threeObject.matrix.decompose(position, quaternion, scale);
+            return scale;
+        }
+    }
+    setScale(...args) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let newScale = null;
+        if (args[0] instanceof three.Vector3) {
+            newScale = new three.Vector3().copy(args[0]);
+        }
+        if (typeof (args[0]) === "number" && typeof (args[1]) === "number" && typeof (args[2]) === "number") {
+            newScale = new three.Vector3(args[0], args[1], args[2]);
+        }
+        if (!newScale) {
+            return;
+        }
+        this.threeObject.scale.copy(newScale);
+        // if(!this.threeObject.matrixAutoUpdate)
+        // {
+        //     const position = new Vector3();
+        //     const quaternion = new Quaternion()
+        //     const scale = new Vector3();
+        //     this.threeObject.matrix.decompose(position, quaternion, scale)
+        //     this.threeObject.matrix.compose(position, quaternion, new Vector3(param1, param2, param3))
+        // }
+        this.threeObject.updateMatrix();
+        this.threeObject.updateMatrixWorld(true);
+        if (this.world) {
+            this.world.viewport.markRenderStateDirty();
+        }
+    }
+    // matrix 
+    getMatrix() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        return this.threeObject.matrix;
+    }
+    setMatrix(matrix) {
+        var _a;
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        // this.threeObject.matrix.copy(matrix)
+        matrix.decompose(this.threeObject.position, this.threeObject.quaternion, this.threeObject.scale);
+        this.threeObject.updateMatrix();
+        this.threeObject.updateMatrixWorld(true);
+        (_a = this.world) === null || _a === void 0 ? void 0 : _a.viewport.markRenderStateDirty();
+    }
+    // World Transform 
+    // // WorldPosition
+    getWorldPosition() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let location = new three.Vector3();
+        this.threeObject.getWorldPosition(location);
+        return location;
+    }
+    // // rotation(euler)
+    getWorldRotation() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let rotation = new three.Quaternion();
+        this.threeObject.getWorldQuaternion(rotation);
+        return new three.Euler().setFromQuaternion(rotation);
+    }
+    // // rotation(quat)
+    getWorldQuaternion() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let rotation = new three.Quaternion();
+        this.threeObject.getWorldQuaternion(rotation);
+        return rotation;
+    }
+    // // Scale
+    getWorldScale() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let scale = new three.Vector3();
+        this.threeObject.getWorldScale(scale);
+        return scale;
+    }
+    // // Matrix
+    getWorldMatrix() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        this.threeObject.updateMatrixWorld(true);
+        return this.threeObject.matrixWorld.clone();
+    }
+    setWorldMatrix(newMatrix) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        if (this.threeObject.parent) {
+            this.threeObject.parent.updateMatrixWorld(true);
+            // 计算父对象的逆世界矩阵
+            const parentInverseWorldMatrix = this.threeObject.parent.matrixWorld.clone().invert();
+            // 计算物体的本地矩阵
+            const cLocalMatrix = new three.Matrix4().multiplyMatrices(parentInverseWorldMatrix, newMatrix);
+            // 更新物体的本地矩阵
+            this.setMatrix(cLocalMatrix);
+            // this.threeObject.matrix.copy(cLocalMatrix);
+            // this.threeObject.matrixAutoUpdate = false;
+            // this.threeObject.matrix.decompose(this.threeObject.position, this.threeObject.quaternion, this.threeObject.scale);
+        }
+        else {
+            this.setMatrix(newMatrix);
+            // // 没有父对象时直接设置世界矩阵为本地矩阵
+            // this.threeObject.matrix.copy(newMatrix);
+            // this.threeObject.matrixAutoUpdate = false;
+        }
+        // 更新世界矩阵
+        this.threeObject.updateMatrixWorld(true);
+        if (this.world) {
+            // 强制场景重新渲染
+            this.world.viewport.markRenderStateDirty();
+        }
+    }
+    getWorldForwardDirection() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let ret = new three.Vector3();
+        this.threeObject.getWorldDirection(ret);
+        return ret;
+    }
+    getWorldUpDirection() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let ret = new three.Vector3(0, 1, 0);
+        ret.applyQuaternion(this.getWorldQuaternion());
+        return ret;
+    }
+    getWorldRightDirection() {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        let ret = new three.Vector3(1, 0, 0);
+        ret.applyQuaternion(this.getWorldQuaternion());
+        return ret;
+    }
+    worldToLocal(vec) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        return this.threeObject.worldToLocal(vec);
+    }
+    localToWorld(vec) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        return this.threeObject.localToWorld(vec);
+    }
+    // Attachment
+    // // to another component
+    // this function will not set newComponent's parentActor
+    attachComponent(newComponent) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        if (!newComponent.threeObject) {
+            throw Error("newComponent threeObject is invalid");
+        }
+        this.threeObject.add(newComponent.threeObject);
+        if (this.world) {
+            newComponent.onAddedToWorld(this.world);
+        }
+    }
+    detachComponent(target) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        if (!target.threeObject) {
+            throw Error("target threeObject is invalid");
+        }
+        this.threeObject.remove(target.threeObject);
+    }
+    // newComponent's parentActor will be the same as this
+    addChildComponent(newComponent, attachmentRule = exports.AttachmentRules.KeepRelative) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        if (!newComponent.threeObject) {
+            throw Error("newComponent threeObject is invalid");
+        }
+        newComponent.parentActor = this.parentActor;
+        if (attachmentRule = exports.AttachmentRules.KeepWorld) {
+            let worldMatrix = newComponent.getWorldMatrix();
+            this.threeObject.add(newComponent.threeObject);
+            newComponent.setWorldMatrix(worldMatrix);
+        }
+        else {
+            this.threeObject.add(newComponent.threeObject);
+        }
+        if (this.world) {
+            newComponent.onAddedToWorld(this.world);
+        }
+        this.threeObject.updateMatrix();
+        this.threeObject.updateMatrixWorld(true);
+    }
+    removeChildComponent(targetComponent) {
+        if (!this.threeObject) {
+            throw Error("threeObject is invalid");
+        }
+        if (!targetComponent.threeObject) {
+            throw Error("targetComponent threeObject is invalid");
+        }
+        this.threeObject.remove(targetComponent.threeObject);
+        targetComponent.destroy();
+    }
+    detachFromParentComponent() {
+        if (this.parentComponent) {
+            this.parentComponent.removeChildComponent(this);
+        }
+    }
+    detachFromParentActor() {
+        if (this.parentActor) {
+            this.parentActor = null;
+        }
+    }
+    destroyChildren() {
+        if (!this.threeObject) {
+            return;
+        }
+        for (let i = 0; i < this.threeObject.children.length; ++i) {
+            this.threeObject.children[i].userData.LYObject.destroy();
+        }
+    }
+    /* horver */
+    set isHoverEnabled(bCanHorver) {
+        this.bCanHover = bCanHorver;
+        let children = this.childrenComponents;
+        for (let i = 0; i < children.length; ++i) {
+            children[i].isHoverEnabled = this.bCanHover;
+        }
+    }
+    get isHoverEnabled() {
+        return this.bCanHover;
+    }
+    // click
+    set isClickEnabled(bCanClick) {
+        this.bCanClick = bCanClick;
+        let children = this.childrenComponents;
+        for (let i = 0; i < children.length; ++i) {
+            children[i].isClickEnabled = this.bCanClick;
+        }
+    }
+    get isClickEnabled() {
+        return this.bCanClick;
+    }
+    onHorveringBegin() {
+        if (!this.isHoverEnabled) {
+            return;
+        }
+        if (this.parentActor) {
+            let comp = this;
+            this.parentActor.onComponentHorveringBegin(comp);
+        }
+    }
+    onHorveringEnd() {
+        if (!this.isHoverEnabled) {
+            return;
+        }
+        if (this.parentActor) {
+            let comp = this;
+            this.parentActor.onComponentHorveringEnd(comp);
+        }
+    }
+    /* click */
+    onClicked() {
+        if (this.parentActor) {
+            let comp = this;
+            this.parentActor.onComponentClicked(comp);
+        }
+    }
+    onDoubleClicked() {
+        if (this.parentActor) {
+            let comp = this;
+            this.parentActor.onComponentDoubleClicked(comp);
+        }
+    }
+}
+
+class MeshComponent extends SceneComponent {
+    get threeObject() {
+        return this.obj;
+    }
+    set threeObject(newThreeObject) {
+        this.obj = newThreeObject;
+        if (this.obj) {
+            this.obj.userData["LYObject"] = this;
+        }
+    }
+    get geometry() {
+        return this.threeObject ? this.threeObject.geometry : null;
+    }
+    set geometry(geo) {
+        if (!this.threeObject) {
+            return;
+        }
+        this.threeObject.geometry = geo;
+    }
+    get material() {
+        return this.threeObject ? this.threeObject.material : null;
+    }
+    set material(newMat) {
+        if (!this.threeObject) {
+            return;
+        }
+        this.threeObject.material = newMat;
+        if (this.world) {
+            this.world.viewport.markRenderStateDirty();
+        }
+    }
+    constructor(...args) {
+        let newMesh = null;
+        if (args[0] instanceof three.Mesh) {
+            newMesh = args[0];
+        }
+        else {
+            if (args[0] instanceof three.BufferGeometry && (args[1] instanceof three.Material || Array.isArray(args[1]))) {
+                newMesh = new three.Mesh(args[0], args[1]);
+            }
+            else {
+                throw new Error('Invalid arguments for A constructor');
+            }
+        }
+        super(newMesh);
+        this.obj = null;
+        this.threeObject = newMesh;
+        LYAssetManager.Get().checkMeshResource(newMesh);
+    }
+    set castShadow(bCast) {
+        if (this.threeObject)
+            this.threeObject.castShadow = bCast;
+    }
+    get castShadow() {
+        return this.threeObject ? this.threeObject.castShadow : false;
+    }
+    set receiveShadow(bReceive) {
+        if (!this.threeObject) {
+            return;
+        }
+        this.threeObject.receiveShadow = bReceive;
+    }
+    get receiveShadow() {
+        return this.threeObject ? this.threeObject.receiveShadow : false;
+    }
+    getBoundsCenterPosition() {
+        let ret = new three.Vector3();
+        this.getBounds().getCenter(ret);
+        return ret;
+    }
+    getBoundsTopCenterPosition() {
+        let ret = new three.Vector3();
+        let bounds = this.getBounds();
+        bounds.getCenter(ret);
+        ret.y = bounds.max.y;
+        return ret;
+    }
+    getBoundsBottomCenterPosition() {
+        let ret = new three.Vector3();
+        let bounds = this.getBounds();
+        bounds.getCenter(ret);
+        ret.y = bounds.min.y;
+        return ret;
+    }
+    destroyObject() {
+        if (this.world && this.world.scene && this.threeObject) {
+            this.world.scene.remove(this.threeObject);
+        }
+        let assetManager = LYAssetManager.Get();
+        const mats = Array.isArray(this.material) ? this.material : [this.material];
+        mats.forEach((material) => {
+            if (material instanceof three.Material) {
+                Object.entries(material).forEach(([key, value]) => {
+                    if (value instanceof three.Texture) {
+                        assetManager.releaseAsset(value);
+                        value = null;
+                    }
+                });
+                assetManager.releaseAsset(material);
+            }
+        });
+        this.material = [];
+        if (this.geometry instanceof three.BufferGeometry) {
+            assetManager.releaseAsset(this.geometry);
+            this.geometry = null;
+        }
+    }
+}
+
+class TSmartPointer {
+    constructor(value, referenceCount = 1) {
+        this.referenceCount = 1;
+        this.value = null;
+        this.value = value;
+        this.referenceCount = referenceCount;
+    }
+    getRefCount() {
+        return this.referenceCount;
+    }
+    addRef(count = 1) {
+        if (this.value !== null) {
+            this.referenceCount += count;
+        }
+    }
+    release() {
+        if (this.value !== null) {
+            this.referenceCount--;
+            console.log(`Reference count decreased to: ${this.referenceCount}`);
+            if (this.referenceCount === 0) {
+                console.log("No more references. Deleting object.");
+                this.value = null;
+            }
+        }
+    }
+    forceRelease() {
+        if (this.value !== null) {
+            this.value = null;
+            this.referenceCount = 0;
+        }
+    }
+    getValue() {
+        return this.value;
+    }
+}
+
+class TAssetPointer extends TSmartPointer {
+    get uuid() {
+        return this._uuid;
+    }
+    constructor(value, referenceCount = 1) {
+        super(value, referenceCount);
+        this._uuid = value.uuid;
+    }
+    release() {
+        if (this.value !== null) {
+            this.referenceCount--;
+            if (this.referenceCount === 0) {
+                this.value.dispose();
+                this.value = null;
+            }
+        }
+    }
+    forceRelease() {
+        if (this.value !== null) {
+            this.value.dispose();
+            this.value = null;
+            this.referenceCount = 0;
+        }
+    }
+}
+
+// this class should be a singleton
+class LYAssetManager {
+    constructor() {
+        this.assetPointer = new Map();
+        this.loadingManager = new three.LoadingManager();
+        this.dracoLoader = new Addons_js.DRACOLoader(this.loadingManager);
+        this.dracoLoader.setDecoderPath(`../../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;
+    }
+    static Get() {
+        return assetManager;
+    }
+    static ClearAssets() {
+        assetManager.clearAssets();
+    }
+    convertThreeObjectToLYObject(parentLYComponent, threejsObject) {
+        let location = threejsObject.position.clone();
+        let rotation = threejsObject.rotation.clone();
+        let scale = threejsObject.scale.clone();
+        let newComp = null;
+        let children = threejsObject.children;
+        threejsObject.children = [];
+        if (threejsObject.type === "Group" || threejsObject.type === "Object3D") {
+            newComp = new SceneComponent(threejsObject);
+        }
+        else if (threejsObject.isMesh) {
+            let obj = threejsObject;
+            newComp = new MeshComponent(obj);
+            // assetManager.#collectMatAndGeoInMesh(threejsObject)
+            threejsObject.layers.set(0);
+        }
+        else {
+            newComp = new SceneComponent(threejsObject);
+        }
+        if (newComp === null) {
+            threejsObject.children = children;
+            //threejsObject.parent = parent
+            console.log("Unprocess", threejsObject);
+            return null;
+        }
+        parentLYComponent.addChildComponent(newComp);
+        newComp.setPosition(location);
+        newComp.setRotation(rotation);
+        newComp.setScale(scale);
+        for (let i = 0; i < children.length; ++i) {
+            this.convertThreeObjectToLYObject(newComp, children[i]);
+        }
+        return threejsObject.userData.LYObject;
+    }
+    collectResourcesAndReferences(gltf) {
+        function countResource(map, resource) {
+            if (!map.has(resource)) {
+                map.set(resource, 1);
+            }
+            else {
+                map.set(resource, map.get(resource) + 1);
+            }
+        }
+        const resources = {
+            geometries: new Map(),
+            materials: new Map(),
+            textures: new Map()
+        };
+        gltf.scene.traverse((child) => {
+            if (child.geometry && child.geometry instanceof three.BufferGeometry) {
+                countResource(resources.geometries, child.geometry);
+            }
+            if (child.material) {
+                const mats = Array.isArray(child.material) ? child.material : [child.material];
+                mats.forEach((mat) => {
+                    if (mat) {
+                        countResource(resources.materials, mat);
+                        Object.entries(mat).forEach(([key, value]) => {
+                            if (value instanceof three.Texture) {
+                                countResource(resources.textures, value);
+                            }
+                        });
+                    }
+                });
+            }
+        });
+        function createPointer(manager, map) {
+            map.forEach((value, key) => {
+                manager.addAsset(key, value);
+            });
+        }
+        createPointer(this, resources.geometries);
+        createPointer(this, resources.materials);
+        createPointer(this, resources.textures);
+        // console.log('Geometries:', Array.from(resources.geometries.entries()));
+        // console.log('Materials:', Array.from(resources.materials.entries()));
+        // console.log('Textures:', Array.from(resources.textures.entries()));
+        // console.log('assetPointer:', this.assetPointer);
+    }
+    checkMeshResource(mesh) {
+        if (mesh.geometry) {
+            if (!mesh.geometry.userData["assetPointer"]) {
+                this.addAsset(mesh.geometry);
+            }
+        }
+        if (mesh.material) {
+            const mats = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+            mats.forEach((material) => {
+                if (material) {
+                    if (!material.userData["assetPointer"]) {
+                        this.addAsset(material);
+                    }
+                    Object.entries(material).forEach(([key, value]) => {
+                        if (value instanceof three.Texture) {
+                            if (!value.userData["assetPointer"]) {
+                                this.addAsset(value);
+                            }
+                        }
+                    });
+                }
+            });
+        }
+    }
+    loadMultiGLTFAsGroup(tasks, onProgress = null, onAllFinished = null) {
+        this.loadingManager.onLoad = onAllFinished ? () => {
+            this.loadingManager.onLoad = () => {
+            };
+            onAllFinished();
+        } : () => {
+            this.loadingManager.onLoad = () => {
+            };
+        };
+        this.loadingManager.onProgress = onProgress ? (url, loaded, total) => {
+            onProgress(url, loaded, total);
+        } : () => {
+        };
+        tasks.forEach((task) => {
+            task.Paths.forEach((path) => {
+                const onGlbLoaded = (glb) => {
+                    task.onLoadingFinished(glb);
+                    this.collectResourcesAndReferences(glb);
+                };
+                try {
+                    this.gltfLoader.load(path, (glb) => {
+                        onGlbLoaded(glb);
+                    });
+                }
+                catch (e) {
+                    console.error(e, path);
+                }
+            });
+        });
+    }
+    loadFile(filepath = '', onLoadFinished) {
+        const loader = new three.FileLoader();
+        loader.load(filepath, (data) => {
+            onLoadFinished(data);
+        });
+    }
+    addAsset(asset, referenceCount = 1) {
+        let pointer = null;
+        if (!asset.userData["assetPointer"]) {
+            pointer = new TAssetPointer(asset, referenceCount);
+            asset.userData["assetPointer"] = pointer;
+        }
+        else {
+            pointer = asset.userData["assetPointer"];
+            pointer.addRef(referenceCount);
+        }
+        if (pointer) {
+            this.assetPointer.set(pointer.uuid, pointer);
+        }
+    }
+    releaseAsset(asset) {
+        // let uuid = asset.uuid
+        let p = asset.userData["assetPointer"];
+        if (p) {
+            p.release();
+        }
+        else {
+            asset.dispose();
+        }
+    }
+    clearAssets() {
+        let pointers = Array.from(this.assetPointer.values());
+        pointers.forEach((p) => {
+            p.forceRelease();
+        });
+        this.assetPointer.clear();
+    }
+}
+let assetManager = new LYAssetManager();
+
+class Delegate {
+    constructor() {
+        this.functions = [];
+    }
+    broadcast(...args) {
+        this.functions.forEach((func) => func(...args));
+    }
+    add(func) {
+        this.functions.push(func);
+    }
+    remove(func) {
+        const index = this.functions.indexOf(func);
+        if (index >= 0) {
+            this.functions.splice(index, 1);
+        }
+        else {
+            console.warn("function not found");
+        }
+    }
+    clear() {
+        this.functions = [];
+    }
+}
+
+const DefaultPostProcessParam = {
+    toneMapping: {
+        exposure: 1,
+        toneMapping: "AgX"
+    }
+};
+
+class World {
+    get scene() {
+        return this._scene;
+    }
+    get viewport() {
+        return this.app.viewport;
+    }
+    get controller() {
+        return this.app.controller;
+    }
+    constructor(app) {
+        this.actors = new Set();
+        this.app = app;
+        this._scene = new three.Scene();
+    }
+    init() {
+    }
+    tick(deltaTime) {
+        this.actors.forEach((elem) => {
+            elem.tick(deltaTime);
+        });
+    }
+    addActor(actor) {
+        if (!actor.rootComponent.threeObject) {
+            throw Error("actor.threeObject is null");
+        }
+        actor.removeFromParent();
+        this.scene.add(actor.rootComponent.threeObject);
+        this.actors.add(actor);
+        actor.onAddedToWorld(this);
+        this.viewport.markRenderStateDirty();
+    }
+    destroy() {
+    }
+}
+
+const DefaultToneMappingParams = {
+    exposure: 1.0,
+    toneMapping: 'AgX',
+};
+const ToneMappingOptions = new Map([
+    ["None", three.NoToneMapping],
+    ["Linear", three.LinearToneMapping],
+    ["Reinhard", three.ReinhardToneMapping],
+    ["Cineon", three.CineonToneMapping],
+    ["ACESFilmic", three.ACESFilmicToneMapping],
+    ["AgX", three.AgXToneMapping],
+    ["Neutral", three.NeutralToneMapping]
+]);
+
+class WebGPUPostProcessFactory {
+    // scene pass
+    static constructScenePass(scene, camera) {
+        const scenePass = tsl.pass(scene, camera);
+        scenePass.setMRT(tsl.mrt({
+            output: tsl.output,
+        }));
+        return scenePass;
+    }
+    static updateScenePass(scenePass, outputNodes) {
+        let oldMRT = scenePass.getMRT();
+        let newMRT = tsl.mrt(outputNodes);
+        if (oldMRT) {
+            scenePass.setMRT(oldMRT.merge(newMRT));
+        }
+        else {
+            scenePass.setMRT(newMRT);
+        }
+        console.log(scenePass.getMRT(), "MRTTTTTTT");
+    }
+    // bloom pass
+    static constructBloomPass(scenePass, params) {
+        const scenePassColor = scenePass.getTextureNode('output');
+        const bloomPass = BloomNode_js.bloom(scenePassColor);
+        WebGPUPostProcessFactory.updateBloomPass(bloomPass, params);
+        return bloomPass;
+    }
+    static updateBloomPass(bloomPass, params) {
+        bloomPass.threshold.value = params.threshold;
+        bloomPass.strength.value = params.strength;
+        bloomPass.radius.value = params.radius;
+    }
+    // DOF pass
+    static constructDOFPass(scenePass, params) {
+        const scenePassColor = scenePass.getTextureNode('output');
+        const scenePassViewZ = scenePass.getViewZNode();
+        return DepthOfFieldNode_js.dof(scenePassColor, scenePassViewZ, tsl.uniform(params.focus), tsl.uniform(params.aperture).mul(0.00001), tsl.uniform(params.maxblur));
+    }
+    static updateDOFPass(dofPass, params) {
+        dofPass.focus.value = params.focus;
+        dofPass.aperture.value = params.aperture * 0.00001;
+        dofPass.maxblur.value = params.maxblur;
+    }
+    // motion blur
+    static constructMotionBlurPass(lastNode, scenePass, param) {
+        WebGPUPostProcessFactory.updateScenePass(scenePass, { velocity: tsl.velocity });
+        const scenePassVelocity = scenePass.getTextureNode('velocity').mul(param.blurAmount);
+        const scenePassColor = scenePass.getTextureNode('output');
+        const motionBlurPass = MotionBlur_js.motionBlur(scenePassColor, scenePassVelocity);
+        return motionBlurPass;
+    }
+    // ssr
+    static constructSSRPass(scenePass, param) {
+        WebGPUPostProcessFactory.updateScenePass(scenePass, {
+            normal: tsl.transformedNormalView,
+            metalness: tsl.metalness,
+        });
+        const scenePassColor = scenePass.getTextureNode('output');
+        const scenePassNormal = scenePass.getTextureNode('normal');
+        const scenePassDepth = scenePass.getTextureNode('depth');
+        const scenePassMetalness = scenePass.getTextureNode('metalness');
+        const ssrPass = SSRNode_js.ssr(scenePassColor, scenePassDepth, scenePassNormal, scenePassMetalness, scenePass.camera);
+        ssrPass.resolutionScale = 1.0;
+        WebGPUPostProcessFactory.updateSSRPass(ssrPass, param);
+        return ssrPass;
+    }
+    static updateSSRPass(ssrPass, params) {
+        ssrPass.maxDistance.value = params.maxDistance;
+        ssrPass.opacity.value = params.opacity;
+        ssrPass.thickness.value = params.thickness;
+    }
+    // GTAO
+    static constructGTAOPass(scenePass, params) {
+        WebGPUPostProcessFactory.updateScenePass(scenePass, {
+            normal: tsl.transformedNormalView,
+        });
+        const scenePassNormal = scenePass.getTextureNode('normal');
+        const scenePassDepth = scenePass.getTextureNode('depth');
+        const aoPass = GTAONode_js.ao(scenePassDepth, scenePassNormal, scenePass.camera);
+        aoPass.resolutionScale = 0.5;
+        WebGPUPostProcessFactory.updateGTAOPass(aoPass, params);
+        return aoPass;
+    }
+    static updateGTAOPass(gtaoPass, params) {
+        gtaoPass.distanceExponent.value = params.distanceExponent;
+        gtaoPass.distanceFallOff.value = params.distanceFallOff;
+        gtaoPass.radius.value = params.radius;
+        gtaoPass.scale.value = params.scale;
+        gtaoPass.thickness.value = params.thickness;
+    }
+    static constructDenoisePass(scenePass, inputNode, params) {
+        WebGPUPostProcessFactory.updateScenePass(scenePass, {
+            normal: tsl.transformedNormalView,
+        });
+        const scenePassNormal = scenePass.getTextureNode('normal');
+        const scenePassDepth = scenePass.getTextureNode('depth');
+        const denoisePass = DenoiseNode_js.denoise(inputNode, scenePassDepth, scenePassNormal, scenePass.camera);
+        WebGPUPostProcessFactory.updateDenoisePass(denoisePass, params);
+        return denoisePass;
+    }
+    static updateDenoisePass(denoisePass, params) {
+        denoisePass.radius.value = params.denoiseRadius;
+        denoisePass.lumaPhi.value = params.lumaPhi;
+        denoisePass.depthPhi.value = params.depthPhi;
+        denoisePass.normalPhi.value = params.normalPhi;
+    }
+    static constructGTAODenoisePass(scenePass, gtaoPass, params) {
+        return WebGPUPostProcessFactory.constructDenoisePass(scenePass, gtaoPass.getTextureNode(), params.denoiseParam);
+    }
+    static updateGTAODenoisePass(denoisePass, params) {
+        WebGPUPostProcessFactory.updateDenoisePass(denoisePass, params.denoiseParam);
+    }
+    static constructLensFlarePass(inputNode, params) {
+        const lensflarePass = LensflareNode_js.lensflare(inputNode, {
+            threshold: tsl.uniform(params.threshold),
+            ghostAttenuationFactor: tsl.uniform(params.ghostAttenuationFactor),
+            ghostSpacing: tsl.uniform(params.ghostSpacing),
+        });
+        return lensflarePass;
+    }
+    static updateLensFlarPass(lensflarePass, params) {
+        lensflarePass.thresholdNode.value = params.threshold;
+        lensflarePass.ghostSpacingNode.value = params.ghostSpacing;
+        lensflarePass.ghostAttenuationFactorNode.value = params.ghostAttenuationFactor;
+    }
+    static constructOutlinePass(scene, camera, outlineObjects, param) {
+        const outlinePass = OutlineNode_js.outline(scene, camera, {
+            selectedObjects: outlineObjects,
+            edgeGlow: param.edgeGlow,
+            edgeThickness: param.edgeThickness
+        });
+        return outlinePass;
+    }
+    static updateOutlinePass(outlinePass, outlineObjects, params) {
+        outlinePass.edgeGlowNode.value = params.edgeGlow;
+        outlinePass.edgeThicknessNode.value = params.edgeThickness;
+        outlinePass.selectedObjects = outlineObjects;
+    }
+    // fxaa 
+    static constructFXAAPass(inputNode) {
+        return FXAANode_js.fxaa(inputNode);
+    }
+    // smaa
+    static constructSMAAPass(inputNode) {
+        return SMAANode_js.smaa(inputNode);
+    }
+}
+
+const DefaultOutlineParams = {
+    edgeStrength: 3.0,
+    edgeGlow: 1.0,
+    edgeThickness: 1.0,
+    pulsePeriod: 0.0,
+    visibleEdgeColor: 0xffffff,
+    hiddenEdgeColor: 0xffffff,
+};
+
+class Viewport {
+    get canvas() {
+        if (!this._canvas) {
+            throw Error("Canvas is not initialized");
+        }
+        return this._canvas;
+    }
+    get renderer() {
+        if (!this._renderer) {
+            throw Error("Renderer is not initialized");
+        }
+        return this._renderer;
+    }
+    get app() {
+        if (!this._app) {
+            throw Error("App is not initialized");
+        }
+        return this._app;
+    }
+    constructor(app, elementId, rendererParam = { antialias: true }, postProcessParam = {}) {
+        this._renderer = null;
+        this.labelRenderer = null;
+        this._app = null;
+        this.resizeObserver = null;
+        this._canvas = null;
+        this.isRenderStateDirty = true;
+        this.postProcessParam = {};
+        this.postProcessing = null;
+        this.scenePass = null;
+        this.bloomPass = null;
+        this.dofPass = null;
+        this.GTAOPass = null;
+        this.denoiseGTAOPass = null;
+        // private denoiseOutlinePass: ShaderNodeObject<DenoiseNode> | null = null;
+        this.ssrPass = null;
+        this.outlinePass = null;
+        // private motionBlurPass: ShaderNodeObject<Node> | null      = null;
+        this.fxaaPass = null;
+        this.smaaPass = null;
+        this.outlineObjects = [];
+        this.postProcessParam = postProcessParam;
+        this._app = app;
+        let element = document.getElementById(elementId);
+        if (!element) {
+            throw Error(`Can not find domElement which id is ${elementId}`);
+        }
+        this._renderer = new webgpu.WebGPURenderer(rendererParam);
+        this._renderer.setPixelRatio(window.devicePixelRatio);
+        this._renderer.setSize(element.clientWidth, element.clientHeight);
+        this._renderer.shadowMap.enabled = true;
+        this.labelRenderer = new Addons_js.CSS2DRenderer();
+        this.labelRenderer.setSize(element.clientWidth, element.clientHeight);
+        this.labelRenderer.domElement.style.pointerEvents = 'none';
+        this.labelRenderer.domElement.style.position = 'absolute';
+        this.labelRenderer.domElement.style.top = '0px';
+        this.labelRenderer.domElement.className = 'scene-labelRenderer';
+        element.appendChild(this.labelRenderer.domElement);
+        element.appendChild(this._renderer.domElement);
+        this._canvas = element;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+                if (entry.contentBoxSize) {
+                    this.onWindowResize();
+                }
+            }
+        });
+        this.resizeObserver.observe(this._canvas);
+        this.setupPostProcess();
+    }
+    init() {
+    }
+    setupPostProcess() {
+        if (this.postProcessParam.toneMapping) {
+            let toneMapping = ToneMappingOptions.get(this.postProcessParam.toneMapping.toneMapping);
+            if (toneMapping) {
+                this.renderer.toneMapping = toneMapping;
+            }
+            this.renderer.toneMappingExposure = this.postProcessParam.toneMapping.exposure;
+        }
+        if (!(Object.keys(this.postProcessParam).some(key => ['bloom', 'dof', 'gtao', 'ssr', "outline"].includes(key)))) {
+            this.destroyPostProcess();
+            return;
+        }
+        if (!this.postProcessing) {
+            this.postProcessing = new webgpu.PostProcessing(this.renderer);
+        }
+        if (!this.scenePass) {
+            this.scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
+        }
+        let finalNode = this.scenePass.getTextureNode('output');
+        // bloom
+        if (this.postProcessParam.bloom) {
+            if (!this.bloomPass) {
+                this.bloomPass = WebGPUPostProcessFactory.constructBloomPass(this.scenePass, this.postProcessParam.bloom);
+            }
+            else {
+                WebGPUPostProcessFactory.updateBloomPass(this.bloomPass, this.postProcessParam.bloom);
+            }
+            finalNode = finalNode.add(this.bloomPass);
+        }
+        else {
+            if (this.bloomPass) {
+                this.bloomPass.dispose();
+                this.bloomPass = null;
+            }
+        }
+        // DOF
+        if (this.postProcessParam.dof) {
+            if (!this.dofPass) {
+                this.dofPass = WebGPUPostProcessFactory.constructDOFPass(this.scenePass, this.postProcessParam.dof);
+            }
+            else {
+                WebGPUPostProcessFactory.updateDOFPass(this.dofPass, this.postProcessParam.dof);
+            }
+            finalNode = this.dofPass;
+        }
+        else {
+            if (this.dofPass) {
+                this.dofPass.dispose();
+                this.dofPass = null;
+            }
+        }
+        // motion blur
+        // if (this.postProcessParam.motionBlur)
+        // {
+        //     if (!this.motionBlurPass)
+        //     {
+        //         this.motionBlurPass = WebGPUPostProcessFactory.constructMotionBlurPass(finalNode, this.scenePass, this.postProcessParam.motionBlur);
+        //     }
+        //     const vignette  = screenUV.distance(.5).remap(.6, 1).mul(2).clamp().oneMinus();
+        //           finalNode = mix(this.motionBlurPass, this.scenePass.getTextureNode("velocity"), 0).mul(vignette);
+        // }
+        // else
+        // {
+        //     if (this.motionBlurPass)
+        //     {
+        //         this.motionBlurPass.dispose();
+        //         this.motionBlurPass = null;
+        //     }
+        // }
+        // ssr
+        if (this.postProcessParam.ssr) {
+            if (!this.ssrPass) {
+                this.ssrPass = WebGPUPostProcessFactory.constructSSRPass(this.scenePass, this.postProcessParam.ssr);
+            }
+            else {
+                WebGPUPostProcessFactory.updateSSRPass(this.ssrPass, this.postProcessParam.ssr);
+            }
+            finalNode = tsl.blendColor(finalNode, this.ssrPass);
+        }
+        // GTAO
+        if (this.postProcessParam.gtao) {
+            if (!this.GTAOPass) {
+                this.GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(this.scenePass, this.postProcessParam.gtao);
+            }
+            else {
+                WebGPUPostProcessFactory.updateGTAOPass(this.GTAOPass, this.postProcessParam.gtao);
+            }
+            if (this.postProcessParam.gtao.denoised) {
+                if (!this.denoiseGTAOPass) {
+                    this.denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(this.scenePass, this.GTAOPass, this.postProcessParam.gtao);
+                }
+                else {
+                    WebGPUPostProcessFactory.updateGTAOPass(this.GTAOPass, this.postProcessParam.gtao);
+                }
+                finalNode = this.denoiseGTAOPass.mul(finalNode);
+            }
+            else {
+                finalNode = this.GTAOPass.getTextureNode().mul(finalNode);
+                if (this.denoiseGTAOPass) {
+                    this.denoiseGTAOPass.dispose();
+                    this.denoiseGTAOPass = null;
+                }
+            }
+        }
+        else {
+            if (this.GTAOPass) {
+                this.GTAOPass.dispose();
+                this.GTAOPass = null;
+            }
+            if (this.denoiseGTAOPass) {
+                this.denoiseGTAOPass.dispose();
+                this.denoiseGTAOPass = null;
+            }
+        }
+        // outline
+        if (this.postProcessParam.outline) {
+            if (!this.outlinePass) {
+                this.outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, this.scenePass.camera, this.outlineObjects, this.postProcessParam.outline);
+            }
+            else {
+                WebGPUPostProcessFactory.updateOutlinePass(this.outlinePass, this.outlineObjects, this.postProcessParam.outline);
+            }
+            const { visibleEdge, hiddenEdge } = this.outlinePass;
+            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)
+            // {
+            //     this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
+            // }
+            // outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
+            // finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
+            finalNode = outlinePulse.add(finalNode);
+            // finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
+        }
+        else {
+            if (this.outlinePass) {
+                this.outlinePass.dispose();
+                this.outlinePass = null;
+            }
+        }
+        if (this.postProcessParam.aa) {
+            if (this.postProcessParam.aa === "fxaa") {
+                this.fxaaPass = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
+                finalNode = this.fxaaPass;
+            }
+            if (this.postProcessParam.aa === "smaa") {
+                this.smaaPass = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
+                finalNode = this.smaaPass;
+            }
+        }
+        else {
+            if (this.fxaaPass) {
+                this.fxaaPass.dispose();
+                this.fxaaPass = null;
+            }
+            if (this.smaaPass) {
+                this.smaaPass.dispose();
+                this.smaaPass = null;
+            }
+        }
+        console.log(this.postProcessParam, "sssssssssssssssssssss");
+        this.postProcessing.outputNode = finalNode;
+        this.markRenderStateDirty();
+    }
+    updateToneMappingParam(params) {
+        this.postProcessParam.toneMapping = params;
+        this.setupPostProcess();
+        this.markRenderStateDirty();
+    }
+    updateBloomPass(params) {
+        this.postProcessParam.bloom = params;
+        this.setupPostProcess();
+    }
+    updateGTAOParam(params) {
+        this.postProcessParam.gtao = params;
+        this.setupPostProcess();
+    }
+    updateDOFParam(params) {
+        this.postProcessParam.dof = params;
+        this.setupPostProcess();
+    }
+    updateSSRParam(params) {
+        this.postProcessParam.ssr = params;
+        this.setupPostProcess();
+    }
+    updateOutlineParam(params) {
+        this.postProcessParam.outline = params;
+        this.setupPostProcess();
+    }
+    addOutlineObject(obj) {
+        if (!this.outlineObjects.includes(obj)) {
+            this.outlineObjects.push(obj);
+        }
+        if (!this.postProcessParam.outline) {
+            this.postProcessParam.outline = DefaultOutlineParams;
+            this.setupPostProcess();
+        }
+        else {
+            this.markRenderStateDirty();
+        }
+    }
+    removeOutlineObject(obj) {
+        if (!this.postProcessParam.outline) {
+            this.outlineObjects = [];
+            return;
+        }
+        const index = this.outlineObjects.indexOf(obj);
+        if (index > -1) {
+            this.outlineObjects.splice(index, 1);
+        }
+        this.markRenderStateDirty();
+    }
+    destroyPostProcess() {
+        if (this.bloomPass) {
+            this.bloomPass.dispose();
+            this.bloomPass = null;
+        }
+        if (this.dofPass) {
+            this.dofPass.dispose();
+            this.dofPass = null;
+        }
+        if (this.GTAOPass) {
+            this.GTAOPass.dispose();
+            this.GTAOPass = null;
+        }
+        if (this.denoiseGTAOPass) {
+            this.denoiseGTAOPass.dispose();
+            this.denoiseGTAOPass = null;
+        }
+        if (this.ssrPass) {
+            this.ssrPass.dispose();
+            this.ssrPass = null;
+        }
+        if (this.outlinePass) {
+            this.outlinePass.dispose();
+            this.outlinePass = null;
+        }
+        this.outlineObjects = [];
+        if (this.scenePass) {
+            this.scenePass.dispose();
+            this.scenePass = null;
+        }
+        if (this.postProcessing) {
+            this.postProcessing.dispose();
+            this.postProcessing = null;
+        }
+    }
+    onWindowResize() {
+        console.log("resize");
+        let ele = this._canvas;
+        if (!ele) {
+            return;
+        }
+        this.app.onWindowResize(ele.clientWidth, ele.clientHeight);
+        this.renderer.setSize(ele.clientWidth, ele.clientHeight);
+        if (this.labelRenderer)
+            this.labelRenderer.setSize(ele.clientWidth, ele.clientHeight);
+        this.markRenderStateDirty();
+    }
+    markRenderStateDirty() {
+        this.isRenderStateDirty = true;
+    }
+    render() {
+        if (!this.isRenderStateDirty) {
+            return;
+        }
+        if (this.postProcessing) {
+            this.postProcessing.render();
+        }
+        else { //console.log("render renderer");
+            this.renderer.render(this.app.world.scene, this.app.camera);
+        }
+        this.isRenderStateDirty = false;
+    }
+    destroy() {
+        var _a;
+        this.destroyPostProcess();
+        this.renderer.setAnimationLoop(null);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.labelRenderer) {
+            this.labelRenderer.domElement.remove();
+            this.labelRenderer = null;
+        }
+        if (this._renderer) {
+            this.renderer.domElement.remove();
+            this._renderer.dispose();
+            this._renderer = null;
+        }
+        (_a = this.postProcessing) === null || _a === void 0 ? void 0 : _a.dispose();
+        this._canvas = null;
+        this._app = null;
+        this._renderer = null;
+        this.outlineObjects = [];
+    }
+}
+
+class Pawn {
+    get camera() {
+        return this.controller.camera;
+    }
+    set enabled(value) {
+        this.control.enabled = value;
+    }
+    get control() {
+        if (!this._control) {
+            throw new Error("Control not initialized");
+        }
+        return this._control;
+    }
+    constructor(controller) {
+        this._control = null;
+        this.isTickEnabled = false;
+        this.controller = controller;
+    }
+    tick(deltaTime) {
+        return;
+    }
+    possess() {
+    }
+    unpossess() {
+    }
+    destroy() {
+    }
+}
+
+class Orbital extends Pawn {
+    get control() {
+        if (!this._control) {
+            throw new Error("Control not initialized");
+        }
+        return this._control;
+    }
+    constructor(controller) {
+        super(controller);
+        this.changeEvent = () => { this.onChange(); };
+        this._control = new Addons_js.OrbitControls(controller.camera, controller.viewPort.canvas);
+        this.control.target.set(0, 0, 0);
+        controller.camera.position.set(0, 4, 4);
+        this.control.update();
+    }
+    possess() {
+        super.possess();
+        this.control.addEventListener('change', this.changeEvent);
+    }
+    unpossess() {
+        super.unpossess();
+        this.control.removeEventListener("change", this.changeEvent);
+    }
+    onChange() {
+        this.controller.viewPort.markRenderStateDirty();
+    }
+}
+
+class Controller {
+    get camera() {
+        return this.app.camera;
+    }
+    get world() {
+        return this.app.world;
+    }
+    get viewPort() {
+        return this.app.viewport;
+    }
+    get pawn() {
+        if (!this._pawn) {
+            throw Error("pawn is null");
+        }
+        return this._pawn;
+    }
+    get onClickNothingDelegate() {
+        return this._onClickNothingDelegate;
+    }
+    constructor(app) {
+        this.prepareClickComponent = null;
+        this._pawn = null;
+        this.onPointerMove = (event) => { this.onPointerMoveEvent(event); };
+        this.onPointerEnter = (event) => { this.onPointerEnterEvent(event); };
+        this.onPointerLeave = (event) => { this.onPointerLeaveEvent(event); };
+        this.onPointerUp = (event) => { this.onPointerUpEvent(event); };
+        this.onPointerDown = (event) => { this.onPointerDownEvent(event); };
+        this.pointerPosition = new three.Vector2();
+        this.doubleClickDelay = 250; // 双击判定时间间隔（毫秒）
+        this.leftClickTimer = null;
+        this.pointerLeftDownPosition = new three.Vector2();
+        this.hoveringComponent = null;
+        this._pointButtonIsDown = new Set();
+        this._onClickNothingDelegate = new Delegate();
+        this.app = app;
+        this._pawn = new Orbital(this);
+        this.pawn.possess();
+        this.raycaster = new three.Raycaster();
+        if (!this.viewPort.canvas) {
+            throw Error("canvas is null");
+        }
+        this.viewPort.canvas.addEventListener("pointermove", this.onPointerMove);
+        this.viewPort.canvas.addEventListener("pointerenter", this.onPointerEnter);
+        this.viewPort.canvas.addEventListener("pointerleave", this.onPointerLeave);
+        this.viewPort.canvas.addEventListener("pointerup", this.onPointerUp);
+        this.viewPort.canvas.addEventListener("pointerdown", this.onPointerDown);
+    }
+    init() {
+    }
+    tick(deltaTime) {
+        this.pawn.tick(deltaTime);
+    }
+    destroy() {
+        if (this.leftClickTimer) {
+            clearTimeout(this.leftClickTimer);
+            this.leftClickTimer = null;
+        }
+        if (this.viewPort.canvas) {
+            this.viewPort.canvas.removeEventListener("pointermove", this.onPointerMove);
+            this.viewPort.canvas.removeEventListener("pointerenter", this.onPointerEnter);
+            this.viewPort.canvas.removeEventListener("pointerleave", this.onPointerLeave);
+            this.viewPort.canvas.removeEventListener("pointerup", this.onPointerUp);
+            this.viewPort.canvas.removeEventListener("pointerdown", this.onPointerDown);
+        }
+        this.pawn.unpossess();
+        this.pawn.destroy();
+        this._pawn = null;
+    }
+    onPointerMoveEvent(event) {
+        var _a, _b;
+        if (!this.viewPort.canvas) {
+            throw Error("canvas is null");
+        }
+        const canvasRect = this.viewPort.canvas.getBoundingClientRect();
+        const offsetX = canvasRect.left;
+        const offsetY = canvasRect.top;
+        const pointer = new three.Vector2(((event.clientX - offsetX) / this.viewPort.canvas.clientWidth) * 2 - 1, 1 - ((event.clientY - offsetY) / this.viewPort.canvas.clientHeight) * 2);
+        this.pointerPosition = pointer;
+        if (this._pointButtonIsDown.size > 0) {
+            return;
+        }
+        const hits = this.getHitResultUnderCursor();
+        if (hits) {
+            let component = hits.object.userData["LYObject"];
+            if (component != this.hoveringComponent) {
+                (_a = this.hoveringComponent) === null || _a === void 0 ? void 0 : _a.onHorveringEnd();
+                this.hoveringComponent = null;
+                if (component instanceof SceneComponent && component.isHoverEnabled) {
+                    component.onHorveringBegin();
+                    this.hoveringComponent = component;
+                }
+            }
+        }
+        else {
+            (_b = this.hoveringComponent) === null || _b === void 0 ? void 0 : _b.onHorveringEnd();
+            this.hoveringComponent = null;
+        }
+    }
+    onPointerUpEvent(event) {
+        this._pointButtonIsDown.delete(event.button);
+        if (event.button === 0) {
+            const pointerOffset = new three.Vector2().subVectors(this.pointerLeftDownPosition, this.pointerPosition).length();
+            if (pointerOffset > 0.005) {
+                if (this.leftClickTimer) {
+                    window.clearTimeout(this.leftClickTimer);
+                    this.leftClickTimer = null;
+                }
+                return;
+            }
+            if (!this.leftClickTimer) {
+                const hit = this.getHitResultUnderCursor();
+                let component = hit ? hit.object.userData["LYObject"] : null;
+                if (component && component instanceof SceneComponent && component.isClickEnabled) {
+                    this.prepareClickComponent = component;
+                    this.leftClickTimer = window.setTimeout(() => {
+                        this.leftClickTimer = null;
+                        if (this.prepareClickComponent) {
+                            this.prepareClickComponent.onClicked();
+                            this.prepareClickComponent = null;
+                        }
+                    }, this.doubleClickDelay);
+                }
+                else {
+                    this._onClickNothingDelegate.broadcast();
+                }
+            }
+            else {
+                console.log("up 2, ", this.prepareClickComponent);
+                window.clearTimeout(this.leftClickTimer);
+                this.leftClickTimer = null;
+                if (this.prepareClickComponent) {
+                    this.prepareClickComponent.onDoubleClicked();
+                }
+                else {
+                    this._onClickNothingDelegate.broadcast();
+                }
+                this.prepareClickComponent = null;
+            }
+        }
+    }
+    onPointerDownEvent(event) {
+        this._pointButtonIsDown.add(event.button);
+        if (event.button === 0) {
+            this.pointerLeftDownPosition = this.pointerPosition.clone();
+        }
+    }
+    onPointerEnterEvent(event) {
+        if (!this.viewPort.canvas) {
+            throw Error("canvas is null");
+        }
+        this.viewPort.canvas.addEventListener("pointermove", this.onPointerMove);
+        this.viewPort.canvas.addEventListener("pointerup", this.onPointerUp);
+        this.viewPort.canvas.addEventListener("pointerdown", this.onPointerDown);
+    }
+    onPointerLeaveEvent(event) {
+        if (!this.viewPort.canvas) {
+            throw Error("canvas is null");
+        }
+        this.viewPort.canvas.removeEventListener("pointermove", this.onPointerMove);
+        this.viewPort.canvas.removeEventListener("pointerup", this.onPointerUp);
+        this.viewPort.canvas.removeEventListener("pointerdown", this.onPointerDown);
+    }
+    getHitResultUnderCursor() {
+        return this.getHitResultFromScreenPoint(this.pointerPosition.x, this.pointerPosition.y);
+    }
+    getHitResultFromScreenPoint(x, y) {
+        this.raycaster.setFromCamera(new three.Vector2(x, y), this.camera);
+        let out = this.raycaster.intersectObjects(this.world.scene.children, true);
+        for (let i = 0; i < out.length; i++) {
+            if (out[i].object.userData["rayIgnored"]) {
+                continue;
+            }
+            return out[i];
+        }
+        return null;
+    }
+}
+
+class CameraFactory {
+    static createCamera(param) {
+        let cam = null;
+        if ("fov" in param.param && "aspect" in param.param) {
+            cam = new three.PerspectiveCamera(param.param.fov, param.param.aspect, param.near, param.far);
+        }
+        if ("left" in param.param && "right" in param.param && "top" in param.param && "bottom" in param.param) {
+            cam = new three.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
+        }
+        if (!cam) {
+            console.error("create camera failed");
+            debugger;
+            throw Error("create camera failed");
+        }
+        return cam;
+    }
+    static updataCamera(param, camera) {
+        if ("fov" in param.param && "aspect" in param.param) {
+            if (camera instanceof three.PerspectiveCamera) {
+                camera.near = param.near;
+                camera.far = param.far;
+                camera.fov = param.param.fov;
+                camera.aspect = param.param.aspect;
+                return camera;
+            }
+            else {
+                return new three.PerspectiveCamera(param.param.fov, param.param.aspect, param.near, param.far);
+            }
+        }
+        if ("left" in param.param && "right" in param.param && "top" in param.param && "bottom" in param.param) {
+            if (camera instanceof three.OrthographicCamera) {
+                camera.near = param.near;
+                camera.far = param.far;
+                camera.left = param.param.left;
+                camera.right = param.param.right;
+                camera.top = param.param.top;
+                camera.bottom = param.param.bottom;
+                return camera;
+            }
+            else {
+                return new three.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
+            }
+        }
+    }
+}
+
+const DefaultRenderParam = {
+    antialias: true,
+};
+const DefaultCameraParam = {
+    near: 0.1,
+    far: 1000,
+    param: {
+        fov: 50,
+        aspect: 1,
+    }
+};
+const DefaultAppParam = {
+    renderParam: DefaultRenderParam,
+    cameraParam: DefaultCameraParam,
+    postProcessParam: DefaultPostProcessParam,
+};
+class ThreeJsApp {
+    get camera() {
+        return this._camera;
+    }
+    get clock() {
+        return this._clock;
+    }
+    get world() {
+        return this._world;
+    }
+    get viewport() {
+        return this._viewport;
+    }
+    get controller() {
+        return this._controller;
+    }
+    get worldClass() {
+        return World;
+    }
+    get viewportClass() {
+        return Viewport;
+    }
+    get controllerClass() {
+        return Controller;
+    }
+    constructor(elementId, appParam = DefaultAppParam) {
+        this._clock = new three.Clock();
+        this._camera = CameraFactory.createCamera(appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam);
+        this._world = new this.worldClass(this);
+        this._viewport = new this.viewportClass(this, elementId, appParam.renderParam ? appParam.renderParam : DefaultRenderParam, appParam.postProcessParam ? appParam.postProcessParam : DefaultPostProcessParam);
+        this._controller = new this.controllerClass(this);
+        this.viewport.renderer.setAnimationLoop(() => {
+            this.tick();
+        });
+        this.init();
+    }
+    init() {
+        this.controller.init();
+        this.world.init();
+        this.viewport.init();
+    }
+    tick() {
+        const delta = this._clock.getDelta();
+        this._controller.tick(delta);
+        this.world.tick(delta);
+        this.viewport.render();
+    }
+    onWindowResize(width, height) {
+        if (this.camera instanceof three.PerspectiveCamera) {
+            this.camera.aspect = width / height;
+        }
+        // if(this.camera instanceof OrthographicCamera)
+        // {
+        //     // to do
+        // }
+        this.camera.updateProjectionMatrix();
+    }
+    destroy() {
+        this.world.destroy();
+        this.controller.destroy();
+        this.viewport.destroy();
+    }
+}
+
+class Actor extends BaseObject {
+    get world() {
+        return this._world;
+    }
+    get name() {
+        console.log("getname", this._name);
+        return this._name;
+    }
+    set name(name) {
+        this._name = name;
+    }
+    get rootComponent() {
+        if (!this._rootComponent) {
+            throw Error("rootComponent is invalid");
+        }
+        return this._rootComponent;
+    }
+    set rootComponent(newRoot) {
+        newRoot.detachFromParentComponent();
+        newRoot.parentActor = this;
+        if (this._rootComponent) {
+            let child = this.rootComponent.childrenComponents;
+            for (let i = 0; i < child.length; ++i) {
+                newRoot.addChildComponent(child[i]);
+            }
+            this.rootComponent.destroy();
+        }
+        this._rootComponent = newRoot;
+    }
+    get childrenComponents() {
+        return this.rootComponent.childrenComponents;
+    }
+    get childActors() {
+        var _a;
+        let ret = [];
+        (_a = this.rootComponent.threeObject) === null || _a === void 0 ? void 0 : _a.children.forEach((elem) => {
+            var _a;
+            let p = (_a = elem.userData["LYObject"]) === null || _a === void 0 ? void 0 : _a.parentActor;
+            if (p !== this && p instanceof Actor) {
+                ret.push(p);
+            }
+        });
+        return ret;
+    }
+    get parentActor() {
+        var _a, _b;
+        let parent = (_b = (_a = this.rootComponent.threeObject) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.userData["LYObject"].parentActor;
+        return parent === this ? null : parent;
+    }
+    get isVisible() {
+        return this.rootComponent ? this.rootComponent.isVisible : false;
+    }
+    constructor(myThreeObject = null) {
+        super();
+        this._name = "Actor";
+        this._rootComponent = null;
+        this._world = null;
+        this.onClickedEvent = [];
+        this.onDoubleClickedEvent = [];
+        this.onHoverBeginEvent = [];
+        this.onHoverEndEvent = [];
+        this.constructRootComponent(myThreeObject);
+    }
+    constructRootComponent(myThreeObject = null) {
+        let tObject = myThreeObject ? myThreeObject : new three.Group();
+        if (tObject.isMesh) {
+            let mesh = tObject;
+            this._rootComponent = new MeshComponent(mesh);
+            this.rootComponent.parentActor = this;
+        }
+        else {
+            this._rootComponent = new SceneComponent(tObject);
+            this.rootComponent.parentActor = this;
+        }
+    }
+    getBoundsCenterPosition(bInWorldSpace = true) {
+        let ret = new three.Vector3();
+        this.getBounds().getCenter(ret);
+        if (!bInWorldSpace) {
+            return ret.sub(this.getPosition());
+        }
+        else {
+            return ret;
+        }
+    }
+    getBoundsTopCenterPosition(bInWorldSpace = true) {
+        let ret = new three.Vector3();
+        let bounds = this.rootComponent.getBounds();
+        bounds.getCenter(ret);
+        ret.y = bounds.max.y;
+        if (!bInWorldSpace) {
+            return ret.sub(this.getPosition());
+        }
+        else {
+            return ret;
+        }
+    }
+    getBoundsBottomCenterPosition(bInWorldSpace = true) {
+        let ret = new three.Vector3();
+        let bounds = this.getBounds();
+        bounds.getCenter(ret);
+        ret.y = bounds.min.y;
+        if (!bInWorldSpace) {
+            return ret.sub(this.getPosition());
+        }
+        else {
+            return ret;
+        }
+    }
+    getBounds() {
+        return this.rootComponent.getBounds();
+    }
+    destroy() {
+        let childActors = this.childActors;
+        childActors.forEach((elem) => {
+            elem.destroy();
+        });
+        this.rootComponent.destroy();
+    }
+    setVisible(bVisible) {
+        this.rootComponent.setVisible(bVisible);
+    }
+    setLayers(layer, bAffectChildActor = true) {
+        this.rootComponent.setLayers(layer);
+        if (bAffectChildActor) {
+            this.childActors.forEach((child) => {
+                child.setLayers(layer, bAffectChildActor);
+            });
+        }
+    }
+    tick(deltaTime) {
+        super.tick(deltaTime);
+        this.rootComponent.tick(deltaTime);
+    }
+    // Local Transforms
+    // // Position
+    getPosition() {
+        return this.rootComponent.getPosition();
+    }
+    setPosition(...args) {
+        if (args.length === 1) {
+            this.rootComponent.setPosition(args[0]);
+        }
+        else {
+            this.rootComponent.setPosition(args[0], args[1], args[2]);
+        }
+    }
+    // // Rotation (euler)
+    getRotation() {
+        return this.rootComponent.getRotation();
+    }
+    setRotation(...args) {
+        if (args.length === 1) {
+            this.rootComponent.setRotation(args[0]);
+        }
+        else {
+            this.rootComponent.setRotation(args[0], args[1], args[2]);
+        }
+    }
+    // // quat
+    getQuaternion() {
+        return this.rootComponent.getQuaternion();
+    }
+    setQuaternion(...args) {
+        if (args.length === 1) {
+            this.rootComponent.setQuaternion(args[0]);
+        }
+        else {
+            this.rootComponent.setQuaternion(args[0], args[1], args[2], args[3]);
+        }
+    }
+    // // Scale
+    getScale() {
+        return this.rootComponent.getScale();
+    }
+    setScale(...args) {
+        if (args.length === 1) {
+            this.rootComponent.setScale(args[0]);
+        }
+        else {
+            this.rootComponent.setScale(args[0], args[1], args[2]);
+        }
+    }
+    // World Transform 
+    // // Matrix
+    getWorldMatrix() {
+        return this.rootComponent.getWorldMatrix();
+    }
+    setWorldMatrix(newMatrix) {
+        this.rootComponent.setWorldMatrix(newMatrix);
+    }
+    // // WorldPosition
+    getWorldPosition() {
+        return this.rootComponent.getWorldPosition();
+    }
+    // setWorldPosition(param1, param2 = undefined, param3 = undefined)
+    // {
+    // }
+    // // rotation(euler)
+    getWorldRotation() {
+        return this.rootComponent.getWorldRotation();
+    }
+    // // rotation(quat)
+    getWorldQuaternion() {
+        return this.rootComponent.getWorldQuaternion();
+    }
+    // // Scale
+    getWorldScale() {
+        return this.rootComponent.getWorldScale();
+    }
+    getWorldForwardDirection() {
+        return this.rootComponent.getWorldForwardDirection();
+    }
+    getWorldUpDirection() {
+        return this.rootComponent.getWorldUpDirection();
+    }
+    getWorldRightDirection() {
+        return this.rootComponent.getWorldRightDirection();
+    }
+    addLocalOffset(axis, value) {
+        let pos = this.getPosition();
+        this.setPosition(pos.x + axis.x * value, pos.y + axis.y * value, pos.z + axis.z * value);
+    }
+    worldToLocal(vec) {
+        return this.rootComponent.worldToLocal(vec);
+    }
+    localToWorld(vec) {
+        return this.rootComponent.localToWorld(vec);
+    }
+    getComponents() {
+        return this.rootComponent.childrenComponents;
+    }
+    addComponent(newComponent, attachmentRule = exports.AttachmentRules.KeepRelative) {
+        this.rootComponent.addChildComponent(newComponent, attachmentRule);
+        if (this._world) {
+            newComponent.onAddedToWorld(this._world);
+        }
+    }
+    removeComponent(targetComponent) {
+        if (targetComponent === this._rootComponent) {
+            return;
+        }
+        this.rootComponent.removeChildComponent(targetComponent);
+    }
+    clearComponent() {
+        this.rootComponent.destroyChildren();
+    }
+    addChildActor(newActor, attachmentRule = exports.AttachmentRules.KeepWorld) {
+        if (!(newActor.rootComponent)) {
+            console.error("Actor :: addChildActor : the 'newActor' you want to add has no rootcomponent");
+            return;
+        }
+        if (newActor.parentActor === this) {
+            return;
+        }
+        if (attachmentRule === exports.AttachmentRules.KeepRelative) {
+            this.rootComponent.attachComponent(newActor.rootComponent);
+        }
+        if (attachmentRule === exports.AttachmentRules.KeepWorld) {
+            let worldMatrix = newActor.getWorldMatrix();
+            this.rootComponent.attachComponent(newActor.rootComponent);
+            newActor.setWorldMatrix(worldMatrix);
+        }
+        if (this._world) {
+            this._world.viewport.markRenderStateDirty();
+        }
+    }
+    removeChildActor(target) {
+        let worldMatrix = target.getWorldMatrix();
+        this.rootComponent.detachComponent(target.rootComponent);
+        target.setWorldMatrix(worldMatrix);
+    }
+    removeFromParent() {
+        if (this.parentActor) {
+            this.parentActor.removeChildActor(this);
+        }
+    }
+    onAddedToWorld(world) {
+        this._world = world;
+        this.rootComponent.onAddedToWorld(this._world);
+        this.childActors.forEach((elem) => {
+            elem.onAddedToWorld(world);
+        });
+    }
+    onRemovedFromWorld() {
+        this._world = null;
+    }
+    get isHoverEnabled() {
+        return this.rootComponent.isHoverEnabled;
+    }
+    set isHoverEnabled(bCanHorver) {
+        this.rootComponent.isHoverEnabled = bCanHorver;
+    }
+    get isClickEnabled() {
+        return this.rootComponent.isClickEnabled;
+    }
+    set isClickEnabled(bCanHorver) {
+        this.rootComponent.isClickEnabled = bCanHorver;
+    }
+    // hovering begin
+    addHoveringBeginEvent(newFunc) {
+        this.onHoverBeginEvent.push(newFunc);
+    }
+    removeHoveringBeginEvent(target) {
+        let index = this.onHoverBeginEvent.indexOf(target);
+        if (index >= 0) {
+            this.onHoverBeginEvent.splice(index, 1);
+        }
+    }
+    clearHoveringBeginEvent() {
+        this.onHoverBeginEvent = [];
+    }
+    onComponentHorveringBegin(component) {
+        for (let i = 0; i < this.onHoverBeginEvent.length; ++i) {
+            this.onHoverBeginEvent[i](component);
+        }
+    }
+    // hovering end
+    addHoveringEndEvent(newFunc) {
+        this.onHoverEndEvent.push(newFunc);
+    }
+    removeHoveringEndEvent(target) {
+        let index = this.onHoverEndEvent.indexOf(target);
+        if (index >= 0) {
+            this.onHoverEndEvent.splice(index, 1);
+        }
+    }
+    clearHoveringEndEvent() {
+        this.onHoverEndEvent = [];
+    }
+    onComponentHorveringEnd(component) {
+        // console.log("onComponentHorveringEnd", this)
+        for (let i = 0; i < this.onHoverEndEvent.length; ++i) {
+            this.onHoverEndEvent[i](component);
+        }
+    }
+    //click
+    addClickEvent(newFunc) {
+        this.onClickedEvent.push(newFunc);
+    }
+    removeClickEvent(target) {
+        let index = this.onClickedEvent.indexOf(target);
+        if (index >= 0) {
+            this.onClickedEvent.splice(index, 1);
+        }
+    }
+    clearClickEvent() {
+        this.onClickedEvent = [];
+    }
+    onComponentClicked(component) {
+        //console.log("onComponentClicked", this.Name, component)
+        for (let i = 0; i < this.onClickedEvent.length; ++i) {
+            this.onClickedEvent[i](component);
+        }
+    }
+    // double click
+    addDoubleClickEvent(newFunc) {
+        this.onDoubleClickedEvent.push(newFunc);
+    }
+    removeDoubleClickEvent(target) {
+        let index = this.onClickedEvent.indexOf(target);
+        if (index >= 0) {
+            this.onDoubleClickedEvent.splice(index, 1);
+        }
+    }
+    onComponentDoubleClicked(component) {
+        //console.log("onComponentClicked", this.Name, component)
+        for (let i = 0; i < this.onDoubleClickedEvent.length; ++i) {
+            this.onDoubleClickedEvent[i](component);
+        }
+    }
+    clearDoubleClickEvent() {
+        this.onDoubleClickedEvent = [];
+    }
+}
+
+/*
+ * virtual class of light, should not be use directly.
+ */
+class LightComponent extends SceneComponent {
+    get threeObject() {
+        if (!this.obj) {
+            throw Error("three object is invalid");
+        }
+        return this.obj;
+    }
+    set threeObject(newThreeObject) {
+        this.obj = newThreeObject;
+        if (this.obj) {
+            this.obj.userData["LYObject"] = this;
+        }
+    }
+    get color() {
+        return this.threeObject.color.getHex();
+    }
+    set color(color) {
+        this.threeObject.color.set(color);
+    }
+    get intensity() {
+        return this.threeObject.intensity;
+    }
+    set intensity(intensity) {
+        this.threeObject.intensity = intensity;
+    }
+    constructor(light) {
+        super(light);
+        this.obj = light;
+    }
+}
+
+class DirectionalLightComponent extends LightComponent {
+    get threeObject() {
+        if (!this.obj) {
+            throw Error("three object is invalid");
+        }
+        return this.obj;
+    }
+    set threeObject(newThreeObject) {
+        this.obj = newThreeObject;
+        if (this.obj) {
+            this.obj.userData["LYObject"] = this;
+        }
+    }
+    get castShadow() {
+        return this.threeObject.castShadow;
+    }
+    set castShadow(value) {
+        this.threeObject.castShadow = value;
+    }
+    constructor(color = 0xffffff, intensity = 10) {
+        let obj = new three.DirectionalLight(color, intensity);
+        super(obj);
+        this.obj = obj;
+        obj.castShadow = true;
+    }
+    setPosition(...args) {
+        if (args.length === 1) {
+            super.setPosition(args[0]);
+        }
+        else {
+            super.setPosition(args[0], args[1], args[2]);
+        }
+        this.update();
+    }
+    update() {
+        if (this.world)
+            this.world.viewport.markRenderStateDirty();
+    }
+    onAddedToWorld(world) {
+        if (!this.threeObject) {
+            throw Error("three object is invalid");
+        }
+        super.onAddedToWorld(world);
+    }
+    destroy() {
+        super.destroy();
+    }
+}
+
+class DirectionalLightActor extends Actor {
+    constructor(color = 0xffffff, intensity = 1) {
+        super();
+        this.lightComponent = new DirectionalLightComponent(color, intensity);
+        this.rootComponent = this.lightComponent;
+        this.lightComponent.castShadow = true;
+    }
+}
+
+class BoxComponent extends MeshComponent {
+    constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new three.MeshStandardMaterial()) {
+        super(new three.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material);
+    }
+}
+
+class BoxActor extends Actor {
+    constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new three.MeshBasicMaterial()) {
+        super();
+        this.addComponent(new BoxComponent(width, height, depth, widthSegments, heightSegments, depthSegments, material));
+    }
+}
+
+class PlaneComponent extends MeshComponent {
+    constructor(width, height, material, widthSegments = 1, heightSegments = 1) {
+        super(new three.PlaneGeometry(width, height, widthSegments, heightSegments), material);
+    }
+}
+
+class PlaneActor extends Actor {
+    get planeComponent() {
+        return this._planeComponent;
+    }
+    constructor(width, height, material = new three.MeshBasicMaterial(), widthSegments = 1, heightSegments = 1) {
+        super();
+        this._planeComponent = new PlaneComponent(width, height, material, widthSegments, heightSegments);
+        this._planeComponent.setRotation(Math.PI * 0.5 * -1, 0, 0);
+        this.addComponent(this._planeComponent);
+        this._planeComponent.receiveShadow = true;
+    }
+    destroy() {
+        var _a;
+        (_a = this._planeComponent) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._planeComponent = null;
+        super.destroy();
+    }
+}
+
+const DefaultBloomParam = {
+    threshold: 0,
+    strength: 1,
+    radius: 0,
+};
+
+const DefaultDenoiseParam = {
+    denoiseRadius: 5,
+    lumaPhi: 5,
+    depthPhi: 5,
+    normalPhi: 5
+};
+
+const DefaultDOFParam = {
+    focus: 500.0,
+    aperture: 5,
+    maxblur: 0.01
+};
+
+const DefaultGTAOParam = {
+    distanceExponent: 1,
+    distanceFallOff: 1,
+    radius: 0.25,
+    scale: 1,
+    thickness: 1,
+    denoised: true,
+    denoiseParam: DefaultDenoiseParam,
+};
+
+const DefaultSSRParam = {
+    maxDistance: 0.5,
+    opacity: 1,
+    thickness: 0.015,
+};
+
+class SphereComponent extends MeshComponent {
+    constructor(radius, material = new three.MeshBasicMaterial(), widthSegments = 32, heightSegments = 16) {
+        super(new three.SphereGeometry(radius, widthSegments, heightSegments), material);
+    }
+}
+
+class LabelComponent extends SceneComponent {
+    get threeObject() {
+        return this.obj;
+    }
+    set threeObject(newThreeObject) {
+        this.obj = newThreeObject;
+        if (this.obj) {
+            this.obj.userData["LYObject"] = this;
+        }
+    }
+    constructor(domElement, center = new three.Vector2(0.5, 1)) {
+        let obj = new CSS2DRenderer_js.CSS2DObject(domElement);
+        super(obj);
+        this.obj = obj;
+        obj.center = center;
+    }
+    set isHoverEnabled(bCanHorver) {
+        return;
+    }
+    set isClickEnabled(bCanClick) {
+        return;
+    }
+    setVisible(bVisible) {
+        super.setVisible(bVisible);
+    }
+    destroy() {
+        if (this.threeObject.element && this.threeObject.element.parentNode) {
+            this.threeObject.element.innerHTML = '';
+            this.threeObject.element.remove();
+        }
+        super.destroy();
+    }
+}
+// example 
+// const labelStyle = document.createElement( 'div' );
+//
+// labelStyle.textContent           = "this.POIData.name";
+// labelStyle.className             = 'label';
+// labelStyle.style.color           = 'white'
+// labelStyle.style.backgroundColor = 'transparent';
+// labelStyle.style.fontSize        = "10px";
+// labelStyle.style.pointerEvents   = 'auto';
+
+class FirstPerson extends Pawn {
+    constructor(controller) {
+        super(controller);
+        this._control = new PointerLockControls.PointerLockControls(controller.camera, controller.viewPort.canvas);
+    }
+}
+
+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;
+exports.Controller = Controller;
+exports.DefaultAppParam = DefaultAppParam;
+exports.DefaultBloomParam = DefaultBloomParam;
+exports.DefaultCameraParam = DefaultCameraParam;
+exports.DefaultDOFParam = DefaultDOFParam;
+exports.DefaultDenoiseParam = DefaultDenoiseParam;
+exports.DefaultGTAOParam = DefaultGTAOParam;
+exports.DefaultOutlineParams = DefaultOutlineParams;
+exports.DefaultPostProcessParam = DefaultPostProcessParam;
+exports.DefaultRenderParam = DefaultRenderParam;
+exports.DefaultSSRParam = DefaultSSRParam;
+exports.DefaultToneMappingParams = DefaultToneMappingParams;
+exports.Delegate = Delegate;
+exports.DirectionalLightActor = DirectionalLightActor;
+exports.DirectionalLightComponent = DirectionalLightComponent;
+exports.FirstPerson = FirstPerson;
+exports.LYAssetManager = LYAssetManager;
+exports.LYLoadTask = LYLoadTask;
+exports.LabelComponent = LabelComponent;
+exports.MeshComponent = MeshComponent;
+exports.Orbital = Orbital;
+exports.PlaneActor = PlaneActor;
+exports.PlaneComponent = PlaneComponent;
+exports.SceneComponent = SceneComponent;
+exports.SphereComponent = SphereComponent;
+exports.ThreeJsApp = ThreeJsApp;
+exports.ToneMappingOptions = ToneMappingOptions;
+exports.TransformGizmo = TransformGizmo;
+exports.Viewport = Viewport;
+exports.WebGPUPostProcessFactory = WebGPUPostProcessFactory;
+exports.World = World;