lythreeframe 1.2.52 → 1.2.53

package/dist/bundle.esm.js

@@ -1,4 +1,4 @@
-import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, OrthographicCamera, PerspectiveCamera, Clock, DirectionalLight, AmbientLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry } from 'three/webgpu';
+import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, PostProcessing, Color, WebGPURenderer, Vector2, Raycaster, OrthographicCamera, PerspectiveCamera, Clock, DirectionalLight, AmbientLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry } from 'three/webgpu';
 import { GLTFLoader, DRACOLoader, CSS2DRenderer, OrbitControls } from 'three/examples/jsm/Addons.js';
 import { pass, mrt, output, uniform, metalness, transformedNormalView, time, oscSine } from 'three/tsl';
 import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';
@@ -892,32 +892,48 @@ class TSmartPointer {
     getRefCount() {
         return this.referenceCount;
     }
+    isValid() {
+        return this.value !== null;
+    }
     addRef(count = 1) {
         if (this.value !== null) {
             this.referenceCount += count;
         }
     }
     release() {
-        if (this.value !== null) {
+        if (this.value !== null && this.referenceCount > 0) {
             this.referenceCount--;
-            //console.log(`Reference count decreased to: ${this.referenceCount}`);
             if (this.referenceCount === 0) {
-                //console.log("No more references. Deleting object.");
-                this.value = null;
+                this.dispose();
             }
         }
     }
     forceRelease() {
         if (this.value !== null) {
-            this.value = null;
+            this.dispose();
             this.referenceCount = 0;
         }
     }
+    /**
+     * 子类覆盖此方法以执行清理逻辑
+     */
+    dispose() {
+        this.value = null;
+    }
     getValue() {
         return this.value;
     }
 }
 
+/**
+ * userData 键名常量
+ */
+const ASSET_POINTER_KEY = 'assetPointer';
+const EDITOR_ASSET_ID_KEY = 'editorAssetId';
+/**
+ * Three.js 资源的智能指针
+ * 管理 BufferGeometry、Material、Texture 的生命周期
+ */
 class TAssetPointer extends TSmartPointer {
     get uuid() {
         return this._uuid;
@@ -925,40 +941,32 @@ class TAssetPointer extends TSmartPointer {
     constructor(value, referenceCount = 0) {
         super(value, referenceCount);
         this._uuid = value.uuid;
-        value.userData["assetPointer"] = this;
+        value.userData[ASSET_POINTER_KEY] = this;
     }
-    release() {
-        // if (this.value) {
-        //     this.referenceCount--;
-        //     if (this.referenceCount === 0) {
-        //         setTimeout(() => {
-        //             this.value!.dispose();
-        //             this.value = null;
-        //         }, 0);
-        //     }
-        // }
-        // console.log("realease", this)
-    }
-    forceRelease() {
-        console.log("forceRelease", this);
+    /**
+     * 释放资源，清理 userData 并调用 Three.js 的 dispose
+     */
+    dispose() {
         if (this.value) {
-            if (this.value.userData && this.value.userData["assetPointer"]) {
-                delete this.value.userData["assetPointer"];
+            // 清理 userData 中的引用
+            if (this.value.userData) {
+                delete this.value.userData[ASSET_POINTER_KEY];
+                delete this.value.userData[EDITOR_ASSET_ID_KEY];
             }
+            // 调用 Three.js 资源的 dispose 方法
             if (typeof this.value.dispose === "function") {
-                setTimeout(() => {
-                    this.value.dispose();
-                    this.value = null;
-                }, 0);
+                this.value.dispose();
             }
-            setTimeout(() => {
-                //this.value = null;
-                this.referenceCount = 0;
-            }, 0);
         }
+        // 调用父类清理 value = null
+        super.dispose();
     }
 }
 
+/**
+ * 材质资产指针
+ * 管理材质及其关联的纹理引用
+ */
 class MaterialAssetPointer extends TAssetPointer {
     constructor(value, usedTextures, referenceCount = 0) {
         super(value, referenceCount);
@@ -967,41 +975,57 @@ class MaterialAssetPointer extends TAssetPointer {
     get texturePointers() {
         return this.textures;
     }
+    /**
+     * 设置材质的纹理属性
+     */
     setTexture(name, texturePtr) {
-        let mat = this.getValue();
-        let texture = texturePtr.getValue();
+        const mat = this.getValue();
+        const texture = texturePtr.getValue();
         if (!texture) {
             throw new Error("Texture is null");
         }
         if (!mat) {
             throw new Error("Material is null");
         }
-        if (this.textures.has(name)) {
-            this.textures.get(name).release();
-            this.textures.delete(name);
-        }
-        try {
+        const oldTexture = this.textures.get(name);
+        if (oldTexture !== texturePtr) {
+            // 释放旧纹理引用
+            if (oldTexture) {
+                oldTexture.release();
+            }
+            // 设置新纹理
             this.textures.set(name, texturePtr);
-            const matAny = mat;
-            matAny[name] = texture;
+            mat[name] = texture;
             texturePtr.addRef();
             mat.needsUpdate = true;
         }
-        catch (e) {
-            throw e;
-        }
     }
-    release() {
-        for (let texture of this.textures.values()) {
-            texture.release();
+    /**
+     * 移除纹理属性
+     */
+    removeTexture(name) {
+        const mat = this.getValue();
+        const oldTexture = this.textures.get(name);
+        if (oldTexture) {
+            oldTexture.release();
+            this.textures.delete(name);
+            if (mat) {
+                mat[name] = null;
+                mat.needsUpdate = true;
+            }
         }
-        super.release();
     }
-    forceRelease() {
-        for (let texture of this.textures.values()) {
+    /**
+     * 释放材质时同时释放所有关联的纹理引用
+     */
+    dispose() {
+        // 释放所有纹理引用
+        for (const texture of this.textures.values()) {
             texture.release();
         }
-        super.forceRelease();
+        this.textures.clear();
+        // 调用父类清理材质
+        super.dispose();
     }
 }
 
@@ -1214,6 +1238,54 @@ class AssetManager {
     }
 }
 
+/**
+ * 资产类别 - 用于底层资产管理
+ */
+var AssetCategory;
+(function (AssetCategory) {
+    AssetCategory["Geometry"] = "geometry";
+    AssetCategory["Material"] = "material";
+    AssetCategory["Texture"] = "texture";
+    AssetCategory["Actor"] = "actor";
+    AssetCategory["ActorManager"] = "actorManager";
+    AssetCategory["Level"] = "level";
+    AssetCategory["HTML"] = "html";
+    AssetCategory["Code"] = "code";
+    AssetCategory["Undefined"] = "undefined";
+})(AssetCategory || (AssetCategory = {}));
+/**
+ * 资产加载状态
+ */
+var AssetLoadState;
+(function (AssetLoadState) {
+    AssetLoadState["Unloaded"] = "unloaded";
+    AssetLoadState["Loading"] = "loading";
+    AssetLoadState["Loaded"] = "loaded";
+    AssetLoadState["Error"] = "error";
+})(AssetLoadState || (AssetLoadState = {}));
+/**
+ * 引用者类型
+ */
+var ReferenceType;
+(function (ReferenceType) {
+    ReferenceType["Actor"] = "actor";
+    ReferenceType["Component"] = "component";
+    ReferenceType["Material"] = "material";
+    ReferenceType["Level"] = "level";
+    ReferenceType["AssetPointer"] = "assetPointer";
+    ReferenceType["External"] = "external";
+})(ReferenceType || (ReferenceType = {}));
+/**
+ * @deprecated 使用 AssetCategory 替代
+ */
+var AssetType;
+(function (AssetType) {
+    AssetType[AssetType["geometry"] = 1] = "geometry";
+    AssetType[AssetType["material"] = 2] = "material";
+    AssetType[AssetType["texture"] = 3] = "texture";
+    AssetType[AssetType["undefined"] = -1] = "undefined";
+})(AssetType || (AssetType = {}));
+
 class Delegate {
     constructor() {
         this.functions = [];
@@ -1473,6 +1545,142 @@ class WebGPUPostProcessFactory {
     }
 }
 
+class PostProcessManager {
+    constructor(renderer, scene, camera, postProcessParam, onDirtyCallback) {
+        this.postProcessing = null;
+        this.outlineObjects = [];
+        this.onDirtyCallback = null;
+        this.renderer = renderer;
+        this.scene = scene;
+        this.camera = camera;
+        this.postProcessParam = Object.assign({}, postProcessParam);
+        this.onDirtyCallback = onDirtyCallback !== null && onDirtyCallback !== void 0 ? onDirtyCallback : null;
+    }
+    get processing() {
+        return this.postProcessing;
+    }
+    updateCamera(camera) {
+        this.camera = camera;
+    }
+    setup() {
+        if (this.postProcessParam.steps.length === 0) {
+            this.destroy();
+            this.markDirty();
+            return;
+        }
+        if (!this.postProcessing) {
+            this.postProcessing = new PostProcessing(this.renderer);
+        }
+        const scenePass = WebGPUPostProcessFactory.constructScenePass(this.scene, this.camera);
+        let finalNode = scenePass.getTextureNode('output');
+        this.postProcessParam.steps.forEach((step) => {
+            switch (step.type) {
+                case PostProcessStepType.Bloom:
+                    {
+                        const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
+                        finalNode = finalNode.add(bloomPass);
+                        break;
+                    }
+                case PostProcessStepType.DepthOfField:
+                    {
+                        const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
+                        finalNode = finalNode.add(dofPass);
+                        break;
+                    }
+                case PostProcessStepType.ScreenSpaceReflection:
+                    {
+                        console.warn("[PostProcess] SSR 目前存在技术问题，暂不支持。");
+                        break;
+                    }
+                case PostProcessStepType.GroundTruthAmbientOcclusion:
+                    {
+                        console.warn("[PostProcess] AO 目前存在技术问题，暂不支持。");
+                        break;
+                    }
+                case PostProcessStepType.Outline:
+                    {
+                        const outlineParam = step;
+                        const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.scene, scenePass.camera, this.outlineObjects, outlineParam);
+                        const { visibleEdge, hiddenEdge } = outlinePass;
+                        const pulsePeriod = uniform(outlineParam.pulsePeriod);
+                        const period = time.div(pulsePeriod).mul(2);
+                        const osc = oscSine(period).mul(.5).add(.5);
+                        const outlineColor = visibleEdge
+                            .mul(uniform(new Color(outlineParam.visibleEdgeColor)))
+                            .add(hiddenEdge.mul(uniform(new Color(outlineParam.hiddenEdgeColor))))
+                            .mul(outlineParam.edgeStrength);
+                        const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
+                        finalNode = outlinePulse.add(finalNode);
+                        break;
+                    }
+                case PostProcessStepType.Antialiasing:
+                    {
+                        const aaParam = step;
+                        if (aaParam.method === "fxaa") {
+                            finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
+                        }
+                        if (aaParam.method === "smaa") {
+                            finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
+                        }
+                        break;
+                    }
+            }
+        });
+        this.postProcessing.outputNode = finalNode;
+        this.postProcessing.needsUpdate = true;
+        this.markDirty();
+    }
+    updateSteps(steps) {
+        this.postProcessParam.steps = steps;
+        this.setup();
+    }
+    addOutlineObject(obj) {
+        if (!this.outlineObjects.includes(obj)) {
+            this.outlineObjects.push(obj);
+        }
+        this.markDirty();
+    }
+    setOutlineObjects(objects) {
+        this.outlineObjects.length = 0;
+        this.outlineObjects.push(...objects);
+        this.markDirty();
+    }
+    removeOutlineObject(obj) {
+        const index = this.outlineObjects.indexOf(obj);
+        if (index > -1) {
+            this.outlineObjects.splice(index, 1);
+        }
+        this.markDirty();
+    }
+    render() {
+        if (this.postProcessing) {
+            this.postProcessing.render();
+            return true;
+        }
+        console.log("render false");
+        return false;
+    }
+    async renderAsync() {
+        if (this.postProcessing) {
+            await this.postProcessing.renderAsync();
+            return true;
+        }
+        return false;
+    }
+    destroy() {
+        this.outlineObjects = [];
+        if (this.postProcessing) {
+            this.postProcessing.dispose();
+            this.postProcessing = null;
+        }
+    }
+    markDirty() {
+        if (this.onDirtyCallback) {
+            this.onDirtyCallback();
+        }
+    }
+}
+
 class Viewport {
     get uiDom() {
         return this._uiDom;
@@ -1504,8 +1712,7 @@ class Viewport {
         this._outerContainer = null;
         this._canvasContainer = null;
         this.isRenderStateDirty = true;
-        this.postProcessing = null;
-        this.outlineObjects = [];
+        this.postProcessManager = null;
         this.postProcessParam = Object.assign({}, postProcessParam);
         this._app = app;
         if (viewportParam.elementId) {
@@ -1529,7 +1736,10 @@ class Viewport {
             this.resizeObserver.observe(this._outerContainer);
         }
         this.app.onCameraChangedDelegate.add(() => {
-            this.setupPostProcess();
+            if (this.postProcessManager) {
+                this.postProcessManager.updateCamera(this.app.camera);
+                this.postProcessManager.setup();
+            }
         });
     }
     createRenderer(rendererParam) {
@@ -1614,159 +1824,39 @@ class Viewport {
         this.setupPostProcess();
     }
     setupPostProcess() {
-        if (this.postProcessParam.steps.length === 0) {
-            this.destroyPostProcess();
-            this.markRenderStateDirty();
-            return;
-        }
-        if (!this.postProcessing) {
-            this.postProcessing = new PostProcessing(this.renderer);
+        if (!this.postProcessManager) {
+            this.postProcessManager = new PostProcessManager(this.renderer, this.app.world.scene, this.app.camera, this.postProcessParam, () => this.markRenderStateDirty());
         }
-        const scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
-        let finalNode = scenePass.getTextureNode('output');
-        this.postProcessParam.steps.forEach((step) => {
-            switch (step.type) {
-                case PostProcessStepType.Bloom:
-                    {
-                        const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
-                        //console.log("[PostProcess] BloomPass 构建完成");
-                        finalNode = finalNode.add(bloomPass);
-                        break;
-                    }
-                case PostProcessStepType.DepthOfField:
-                    {
-                        const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
-                        //console.log("[PostProcess] DOFPass 构建完成");
-                        finalNode = finalNode.add(dofPass);
-                        break;
-                    }
-                case PostProcessStepType.ScreenSpaceReflection:
-                    {
-                        console.warn("[PostProcess] SSR 目前存在技术问题，暂不支持。");
-                        // const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, step as SSRParam);
-                        // console.log("[PostProcess] SSRPass 构建完成");
-                        //finalNode = blendColor(finalNode, ssrPass);
-                        break;
-                    }
-                case PostProcessStepType.GroundTruthAmbientOcclusion:
-                    {
-                        console.warn("[PostProcess] AO 目前存在技术问题，暂不支持。");
-                        // const stepParam = step as GTAOParam
-                        // const GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, stepParam);
-                        // console.log("[PostProcess] GTAOPass 构建完成");
-                        // if (stepParam.denoised)
-                        // {
-                        //     const denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, GTAOPass, stepParam);
-                        //     console.log("[PostProcess] GTAODenoisePass 构建完成");
-                        //     finalNode = denoiseGTAOPass.mul(finalNode);
-                        // }
-                        // else
-                        // {
-                        //     finalNode = GTAOPass.getTextureNode().mul(finalNode);
-                        // }
-                        break;
-                    }
-                case PostProcessStepType.Outline:
-                    {
-                        const outlineParam = step;
-                        const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, scenePass.camera, this.outlineObjects, outlineParam);
-                        const { visibleEdge, hiddenEdge } = outlinePass;
-                        const pulsePeriod = uniform(outlineParam.pulsePeriod);
-                        const period = time.div(pulsePeriod).mul(2);
-                        const osc = oscSine(period).mul(.5).add(.5);
-                        const outlineColor = visibleEdge.mul(uniform(new Color(outlineParam.visibleEdgeColor))).add(hiddenEdge.mul(uniform(new Color(outlineParam.hiddenEdgeColor)))).mul(outlineParam.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);
-                        //console.log("[PostProcess] OutlinePass 构建完成");
-                        break;
-                    }
-                case PostProcessStepType.Antialiasing:
-                    {
-                        const aaParam = step;
-                        if (aaParam.method === "fxaa") {
-                            finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
-                            //console.log("[PostProcess] FXAAPass 构建完成");
-                        }
-                        if (aaParam.method === "smaa") {
-                            finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
-                            //console.log("[PostProcess] SMAAPass 构建完成");
-                        }
-                        break;
-                    }
-            }
-        });
-        this.postProcessing.outputNode = finalNode;
-        this.postProcessing.needsUpdate = true;
-        //console.log("[PostProcess] setup complete",  this.postProcessParam.steps);
-        this.markRenderStateDirty();
+        this.postProcessManager.setup();
     }
     updatePostProcess(steps) {
-        this.postProcessParam.steps = steps;
-        this.setupPostProcess();
+        if (this.postProcessManager) {
+            this.postProcessManager.updateSteps(steps);
+        }
     }
     updateRendererSettings(data) {
         this.createRenderer(data);
         this.markRenderStateDirty();
     }
-    // updateBloomPass(params: BloomParam)
-    // {
-    //     this.postProcessParam.bloom = { ...params };
-    //     this.setupPostProcess();
-    // }
-    // updateGTAOParam(params: GTAOParam)
-    // {
-    //     this.postProcessParam.gtao = { ...params };
-    //     this.setupPostProcess();
-    // }
-    // updateDOFParam(params: DOFParam) 
-    // {
-    //     this.postProcessParam.dof = { ...params };
-    //     this.setupPostProcess();
-    // }
-    // updateSSRParam(params: SSRParam)
-    // {
-    //     this.postProcessParam.ssr = { ...params };
-    //     this.setupPostProcess();
-    // }
-    // updateOutlineParam(params: OutlineParams)
-    // {
-    //     this.postProcessParam.outline = { ...params }
-    //     this.setupPostProcess();
-    // }
-    // updateAAParam(params: AAParams)
-    // {
-    //     this.postProcessParam.aa = { ...params };
-    //     this.setupPostProcess();
-    // }
     addOutlineObject(obj) {
-        if (!this.outlineObjects.includes(obj)) {
-            this.outlineObjects.push(obj);
+        if (this.postProcessManager) {
+            this.postProcessManager.addOutlineObject(obj);
         }
-        this.markRenderStateDirty();
     }
     setOutlineObjects(objects) {
-        this.outlineObjects.length = 0;
-        this.outlineObjects.push(...objects);
-        this.markRenderStateDirty();
+        if (this.postProcessManager) {
+            this.postProcessManager.setOutlineObjects(objects);
+        }
     }
     removeOutlineObject(obj) {
-        const index = this.outlineObjects.indexOf(obj);
-        if (index > -1) {
-            this.outlineObjects.splice(index, 1);
+        if (this.postProcessManager) {
+            this.postProcessManager.removeOutlineObject(obj);
         }
-        this.markRenderStateDirty();
     }
     destroyPostProcess() {
-        this.outlineObjects = [];
-        if (this.postProcessing) {
-            this.postProcessing.dispose();
-            this.postProcessing = null;
+        if (this.postProcessManager) {
+            this.postProcessManager.destroy();
+            this.postProcessManager = null;
         }
     }
     onWindowResize() {
@@ -1786,11 +1876,10 @@ class Viewport {
     }
     render() {
         if (!this.isRenderStateDirty) {
+            console.log("render clean retrn");
             return;
         }
-        if (this.postProcessing) {
-            this.postProcessing.render();
-        }
+        if (this.postProcessManager && this.postProcessManager.render()) ;
         else {
             this.renderer.render(this.app.world.scene, this.app.camera);
         }
@@ -1800,42 +1889,40 @@ class Viewport {
         this.isRenderStateDirty = false;
     }
     async renderAsImage(width = 1024, height = 1024) {
-        return new Promise(async (resolve, reject) => {
-            try {
-                if (this.postProcessing) {
-                    await this.postProcessing.renderAsync();
-                }
-                else {
-                    await this.renderer.renderAsync(this.app.world.scene, this.app.camera);
-                }
-                // 检查 renderer.domElement 的尺寸
-                const sourceWidth = this.renderer.domElement.width;
-                const sourceHeight = this.renderer.domElement.height;
-                // 如果源尺寸为0，则使用容器尺寸
-                let actualWidth = sourceWidth || width;
-                let actualHeight = sourceHeight || height;
-                if (actualWidth <= 0 || actualHeight <= 0) {
-                    // 如果仍然无效，则使用默认值
-                    actualWidth = width;
-                    actualHeight = height;
-                }
-                const offscreenCanvas = document.createElement('canvas');
-                offscreenCanvas.width = width;
-                offscreenCanvas.height = height;
-                const context = offscreenCanvas.getContext('2d');
-                if (!context) {
-                    throw Error("Can not create context");
-                }
-                // 使用实际尺寸进行绘制
-                context.drawImage(this.renderer.domElement, 0, 0, actualWidth, actualHeight, 0, 0, width, height);
-                const ret = offscreenCanvas.toDataURL('image/jpeg');
-                offscreenCanvas.remove();
-                resolve(ret);
+        try {
+            if (this.postProcessManager && await this.postProcessManager.renderAsync()) {
+                // Post processing rendered
             }
-            catch (error) {
-                reject(error);
+            else {
+                await this.renderer.renderAsync(this.app.world.scene, this.app.camera);
             }
-        });
+            // 检查 renderer.domElement 的尺寸
+            const sourceWidth = this.renderer.domElement.width;
+            const sourceHeight = this.renderer.domElement.height;
+            // 如果源尺寸为0，则使用容器尺寸
+            let actualWidth = sourceWidth || width;
+            let actualHeight = sourceHeight || height;
+            if (actualWidth <= 0 || actualHeight <= 0) {
+                // 如果仍然无效，则使用默认值
+                actualWidth = width;
+                actualHeight = height;
+            }
+            const offscreenCanvas = document.createElement('canvas');
+            offscreenCanvas.width = width;
+            offscreenCanvas.height = height;
+            const context = offscreenCanvas.getContext('2d');
+            if (!context) {
+                throw Error("Can not create context");
+            }
+            // 使用实际尺寸进行绘制
+            context.drawImage(this.renderer.domElement, 0, 0, actualWidth, actualHeight, 0, 0, width, height);
+            const ret = offscreenCanvas.toDataURL('image/jpeg');
+            offscreenCanvas.remove();
+            return ret;
+        }
+        catch (error) {
+            return "";
+        }
     }
     setAlpha(alpha) {
         if (!this._renderer) {
@@ -1886,7 +1973,6 @@ class Viewport {
         this._renderer.stencil = stencil;
     }
     destroy() {
-        var _a;
         this.destroyPostProcess();
         this.renderer.setAnimationLoop(null);
         if (this.resizeObserver) {
@@ -1902,11 +1988,8 @@ class Viewport {
             this._renderer.dispose();
             this._renderer = null;
         }
-        (_a = this.postProcessing) === null || _a === void 0 ? void 0 : _a.dispose();
         this._outerContainer = null;
         this._app = null;
-        this._renderer = null;
-        this.outlineObjects = [];
     }
 }
 
@@ -2064,195 +2147,248 @@ class Orbital extends Pawn {
 }
 
 class Controller {
-    get camera() {
-        return this._app.camera;
-    }
-    get world() {
-        return this._app.world;
-    }
-    get viewPort() {
-        return this._app.viewport;
-    }
+    // ==================== Getters ====================
+    get camera() { return this._app.camera; }
+    get world() { return this._app.world; }
+    get viewPort() { return this._app.viewport; }
+    get app() { return this._app; }
+    get onClickNothingDelegate() { return this._onClickNothingDelegate; }
+    get onComponentClickDelegate() { return this._onComponentClickDelegate; }
+    get onComponentDoubleClickDelegate() { return this._onComponentDoubleClickDelegate; }
+    get onComponentHoverBeginDelegate() { return this._onComponentHoverBeginDelegate; }
+    get onComponentHoverEndDelegate() { return this._onComponentHoverEndDelegate; }
+    get onComponentPointerDownDelegate() { return this._onComponentPointerDownDelegate; }
     get pawn() {
-        if (!this._pawn) {
+        if (!this._pawn)
             throw Error("pawn is null");
-        }
         return this._pawn;
     }
-    get app() {
-        return this._app;
-    }
-    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 Vector2();
-        this.doubleClickDelay = 250; // 双击判定时间间隔（毫秒）
-        this.leftClickTimer = null;
-        this.pointerLeftDownPosition = new Vector2();
+        this.prepareClickComponent = null;
+        this.prepareClickHit = null;
         this.hoveringComponent = null;
         this._pointButtonIsDown = new Set();
         this._onClickNothingDelegate = new Delegate();
+        this._onComponentClickDelegate = new Delegate();
+        this._onComponentDoubleClickDelegate = new Delegate();
+        this._onComponentHoverBeginDelegate = new Delegate();
+        this._onComponentHoverEndDelegate = new Delegate();
+        this._onComponentPointerDownDelegate = new Delegate();
+        // Pointer state
+        this.pointerPosition = new Vector2();
+        this.pointerLeftDownPosition = new Vector2();
+        // Reusable objects to avoid GC pressure
+        this._tempVec2 = new Vector2();
+        this._raycastVec2 = new Vector2();
+        // Double click detection
+        this.doubleClickDelay = 250;
+        this.leftClickTimer = null;
+        // Event handlers (bound)
+        this.onPointerMove = (e) => this.onPointerMoveEvent(e);
+        this.onPointerEnter = (e) => this.onPointerEnterEvent(e);
+        this.onPointerLeave = (e) => this.onPointerLeaveEvent(e);
+        this.onPointerUp = (e) => this.onPointerUpEvent(e);
+        this.onPointerDown = (e) => this.onPointerDownEvent(e);
         this._app = app;
         this._pawn = new Orbital(this);
         this.pawn.possess();
         this.raycaster = new Raycaster();
     }
+    init() {
+        const canvas = this.viewPort.canvas;
+        if (canvas) {
+            canvas.addEventListener("pointerenter", this.onPointerEnter);
+            canvas.addEventListener("pointerleave", this.onPointerLeave);
+            this.addCorePointerListeners();
+        }
+    }
     updateCamera() {
         var _a, _b;
-        let isPawnEnabled = this.pawn.enabled;
+        const isPawnEnabled = this.pawn.enabled;
         (_a = this._pawn) === null || _a === void 0 ? void 0 : _a.unpossess();
         (_b = this._pawn) === null || _b === void 0 ? void 0 : _b.destroy();
         this._pawn = new Orbital(this);
         this.pawn.possess();
         this.pawn.enabled = isPawnEnabled;
     }
-    init() {
-        if (this.viewPort.canvas) {
-            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);
-        }
-    }
     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.clearClickTimer();
+        this.clearHoveringComponent();
+        const canvas = this.viewPort.canvas;
+        if (canvas) {
+            canvas.removeEventListener("pointerenter", this.onPointerEnter);
+            canvas.removeEventListener("pointerleave", this.onPointerLeave);
+            this.removeCorePointerListeners();
         }
         this.pawn.unpossess();
         this.pawn.destroy();
         this._pawn = null;
     }
     onPointerMoveEvent(event) {
-        var _a, _b;
-        if (!this.viewPort.canvas) {
+        const canvas = this.viewPort.canvas;
+        if (!canvas)
             throw Error("canvas is null");
-        }
-        const canvasRect = this.viewPort.canvas.getBoundingClientRect();
-        const offsetX = canvasRect.left;
-        const offsetY = canvasRect.top;
-        const pointer = new 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) {
+        const canvasRect = canvas.getBoundingClientRect();
+        this.pointerPosition.set(((event.clientX - canvasRect.left) / canvas.clientWidth) * 2 - 1, 1 - ((event.clientY - canvasRect.top) / canvas.clientHeight) * 2);
+        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;
-                }
+        const component = hits === null || hits === void 0 ? void 0 : hits.object.userData["LYObject"];
+        if (component !== this.hoveringComponent) {
+            this.clearHoveringComponent();
+            if (component instanceof SceneComponent && component.isHoverEnabled && hits) {
+                this.fireHoverEvent(component, hits, true);
+            }
+        }
+    }
+    clearHoveringComponent() {
+        if (this.hoveringComponent) {
+            this.fireHoverEvent(this.hoveringComponent, null, false);
+        }
+    }
+    fireHoverEvent(component, hit, isBegin) {
+        const event = { component, hit, handled: false };
+        if (isBegin) {
+            this._onComponentHoverBeginDelegate.broadcast(event);
+            if (!event.handled) {
+                component.onHorveringBegin();
             }
+            this.hoveringComponent = component;
         }
         else {
-            (_b = this.hoveringComponent) === null || _b === void 0 ? void 0 : _b.onHorveringEnd();
+            this._onComponentHoverEndDelegate.broadcast(event);
+            if (!event.handled) {
+                component.onHorveringEnd();
+            }
             this.hoveringComponent = null;
         }
     }
     onPointerUpEvent(event) {
         this._pointButtonIsDown.delete(event.button);
-        if (event.button === 0) {
-            const pointerOffset = new 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 {
-                window.clearTimeout(this.leftClickTimer);
+        if (event.button !== 0)
+            return;
+        // Check if pointer moved too much (drag instead of click)
+        const pointerOffset = this._tempVec2.subVectors(this.pointerLeftDownPosition, this.pointerPosition).length();
+        if (pointerOffset > 0.005) {
+            this.clearClickTimer();
+            return;
+        }
+        if (!this.leftClickTimer) {
+            this.handleFirstClick();
+        }
+        else {
+            this.handleDoubleClick();
+        }
+    }
+    handleFirstClick() {
+        const hit = this.getHitResultUnderCursor();
+        const component = hit === null || hit === void 0 ? void 0 : hit.object.userData["LYObject"];
+        if (component instanceof SceneComponent && component.isClickEnabled && hit) {
+            this.prepareClickComponent = component;
+            this.prepareClickHit = hit;
+            this.leftClickTimer = window.setTimeout(() => {
                 this.leftClickTimer = null;
-                if (this.prepareClickComponent) {
-                    this.prepareClickComponent.onDoubleClicked();
+                if (this.prepareClickComponent && this.prepareClickHit) {
+                    this.fireClickEvent(this.prepareClickComponent, this.prepareClickHit, false);
+                    this.prepareClickComponent = null;
+                    this.prepareClickHit = null;
                 }
-                else {
-                    this._onClickNothingDelegate.broadcast();
-                }
-                this.prepareClickComponent = null;
+            }, this.doubleClickDelay);
+        }
+        else {
+            this._onClickNothingDelegate.broadcast();
+        }
+    }
+    handleDoubleClick() {
+        this.clearClickTimer();
+        if (this.prepareClickComponent && this.prepareClickHit) {
+            this.fireClickEvent(this.prepareClickComponent, this.prepareClickHit, true);
+        }
+        else {
+            this._onClickNothingDelegate.broadcast();
+        }
+        this.prepareClickComponent = null;
+        this.prepareClickHit = null;
+    }
+    fireClickEvent(component, hit, isDoubleClick) {
+        const event = { component, hit, handled: false };
+        if (isDoubleClick) {
+            this._onComponentDoubleClickDelegate.broadcast(event);
+            if (!event.handled) {
+                component.onDoubleClicked();
             }
         }
+        else {
+            this._onComponentClickDelegate.broadcast(event);
+            if (!event.handled) {
+                component.onClicked();
+            }
+        }
+    }
+    clearClickTimer() {
+        if (this.leftClickTimer) {
+            window.clearTimeout(this.leftClickTimer);
+            this.leftClickTimer = null;
+        }
     }
     onPointerDownEvent(event) {
         this._pointButtonIsDown.add(event.button);
         if (event.button === 0) {
-            this.pointerLeftDownPosition = this.pointerPosition.clone();
+            this.pointerLeftDownPosition.copy(this.pointerPosition);
+        }
+        // 广播组件按下事件
+        const hit = this.getHitResultUnderCursor();
+        const component = hit === null || hit === void 0 ? void 0 : hit.object.userData["LYObject"];
+        if (component instanceof SceneComponent && hit) {
+            this.firePointerDownEvent(component, hit, event.button);
         }
     }
+    firePointerDownEvent(component, hit, button) {
+        const event = { component, hit, button, handled: false };
+        this._onComponentPointerDownDelegate.broadcast(event);
+    }
     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);
+        this.addCorePointerListeners();
     }
     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);
+        this.removeCorePointerListeners();
+    }
+    addCorePointerListeners() {
+        const canvas = this.viewPort.canvas;
+        if (!canvas)
+            return;
+        canvas.addEventListener("pointermove", this.onPointerMove);
+        canvas.addEventListener("pointerup", this.onPointerUp);
+        canvas.addEventListener("pointerdown", this.onPointerDown);
+    }
+    removeCorePointerListeners() {
+        const canvas = this.viewPort.canvas;
+        if (!canvas)
+            return;
+        canvas.removeEventListener("pointermove", this.onPointerMove);
+        canvas.removeEventListener("pointerup", this.onPointerUp);
+        canvas.removeEventListener("pointerdown", this.onPointerDown);
     }
     getHitResultUnderCursor() {
         return this.getHitResultFromScreenPoint(this.pointerPosition.x, this.pointerPosition.y);
     }
     getHitResultFromScreenPoint(x, y) {
-        this.raycaster.setFromCamera(new 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"]) {
+        this._raycastVec2.set(x, y);
+        this.raycaster.setFromCamera(this._raycastVec2, this.camera);
+        const out = this.raycaster.intersectObjects(this.world.scene.children, true);
+        for (const hit of out) {
+            if (hit.object.userData["rayIgnored"])
                 continue;
-            }
-            let component = out[i].object.userData["LYObject"];
-            if (!component) {
+            const component = hit.object.userData["LYObject"];
+            if (!component)
                 continue;
-            }
-            if (!component.isHoverEnabled && !component.isClickEnabled) {
+            if (!component.isHoverEnabled && !component.isClickEnabled)
                 continue;
-            }
-            return out[i];
+            return hit;
         }
         return null;
     }
@@ -3566,4 +3702,4 @@ class TransformGizmo extends Pawn {
     }
 }
 
-export { Actor, AmbientLightActor, AmbientLightComponent, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOrthographicCameraParam, DefaultOutlineParams, DefaultPerspectiveCameraParam, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, PostProcessStepType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
+export { ASSET_POINTER_KEY, Actor, AmbientLightActor, AmbientLightComponent, AssetCategory, AssetLoadState, AssetManager, AssetType, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOrthographicCameraParam, DefaultOutlineParams, DefaultPerspectiveCameraParam, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, EDITOR_ASSET_ID_KEY, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, PostProcessStepType, ReferenceType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };