lythreeframe 1.2.42 → 1.2.44

package/dist/bundle.cjs.js

@@ -81,6 +81,9 @@ class Component extends BaseObject {
     }
     set name(name) {
         this._name = name;
+        if (this.obj) {
+            this.obj.name = name;
+        }
     }
     constructor(uuid) {
         super(uuid ? uuid : webgpu.MathUtils.generateUUID());
@@ -642,6 +645,7 @@ class SceneComponent extends Component {
             throw Error("targetComponent threeObject is invalid");
         }
         this.obj.remove(targetComponent.threeObject);
+        console.log("removeChildComponent");
         targetComponent.destroy();
     }
     detachFromParentComponent() {
@@ -1499,8 +1503,11 @@ class WebGPUPostProcessFactory {
 }
 
 class Viewport {
+    get uiDom() {
+        return this._uiDom;
+    }
     get canvas() {
-        return this._canvas;
+        return this._canvasContainer;
     }
     get renderer() {
         if (!this._renderer) {
@@ -1515,18 +1522,20 @@ class Viewport {
         return this._app;
     }
     constructor(app, viewportParam, rendererParam, postProcessParam) {
+        this._uiDom = null;
         this._renderer = null;
         this.labelRenderer = null;
         this._app = null;
         this.resizeObserver = null;
-        this._canvas = null;
+        this._outerContainer = null;
+        this._canvasContainer = null;
         this.isRenderStateDirty = true;
         this.postProcessing = null;
         this.outlineObjects = [];
         this.postProcessParam = Object.assign({}, postProcessParam);
         this._app = app;
         if (viewportParam.elementId) {
-            this._canvas = document.getElementById(viewportParam.elementId);
+            this._outerContainer = document.getElementById(viewportParam.elementId);
         }
         this.createRenderer(rendererParam);
         if (viewportParam.isLabelRendererNeeded) {
@@ -1535,7 +1544,7 @@ class Viewport {
         if (viewportParam.isUILayerNeeded) {
             this.createUILayer();
         }
-        if (this._canvas) {
+        if (this._outerContainer) {
             this.resizeObserver = new ResizeObserver((entries) => {
                 for (let entry of entries) {
                     if (entry.contentBoxSize) {
@@ -1543,14 +1552,22 @@ class Viewport {
                     }
                 }
             });
-            this.resizeObserver.observe(this._canvas);
+            this.resizeObserver.observe(this._outerContainer);
         }
         this.app.onCameraChangedDelegate.add(() => {
             this.setupPostProcess();
         });
     }
     createRenderer(rendererParam) {
-        const element = this._canvas;
+        if (this._outerContainer) {
+            this._canvasContainer = document.createElement("div");
+            this._canvasContainer.style.left = "0px";
+            this._canvasContainer.style.top = "0px";
+            this._canvasContainer.style.width = "100%";
+            this._canvasContainer.style.height = "100%";
+            this._outerContainer.appendChild(this._canvasContainer);
+        }
+        const element = this._canvasContainer;
         if (this._renderer) {
             if (element) {
                 element.removeChild(this._renderer.domElement);
@@ -1580,12 +1597,12 @@ class Viewport {
         }
     }
     createLabelRenderer() {
-        const element = this._canvas;
+        const element = this._outerContainer;
         if (this.labelRenderer) {
             if (element) {
                 element.removeChild(this.labelRenderer.domElement);
             }
-            this.labelRenderer.dispose();
+            // this.labelRenderer.dispose();
         }
         let width = element ? element.clientWidth : 512;
         let height = element ? element.clientHeight : 512;
@@ -1600,13 +1617,14 @@ class Viewport {
         }
     }
     createUILayer() {
-        if (!this._canvas)
+        if (!this._outerContainer)
             return;
         // 检查是否已存在 UI 层，避免重复创建
-        let uiLayer = this._canvas.querySelector('.scene-uiLayer');
+        let uiLayer = this._outerContainer.querySelector('.scene-uiLayer');
         if (!uiLayer) {
             uiLayer = document.createElement('div');
             uiLayer.className = 'scene-uiLayer';
+            uiLayer.id = "scene-uiLayer";
             uiLayer.style.position = 'absolute';
             uiLayer.style.left = '0';
             uiLayer.style.top = '0';
@@ -1614,22 +1632,13 @@ class Viewport {
             uiLayer.style.height = '100%';
             uiLayer.style.pointerEvents = 'none'; // UI层默认不响应鼠标事件
             uiLayer.style.zIndex = '10'; // 保证在渲染层之上
-            this._canvas.appendChild(uiLayer);
+            this._outerContainer.appendChild(uiLayer);
+            this._uiDom = uiLayer;
         }
     }
     init() {
         this.setupPostProcess();
     }
-    addWidget(widget) {
-        if (!this._canvas)
-            return;
-        let uiLayer = this._canvas.querySelector('.scene-uiLayer');
-        if (!uiLayer) {
-            console.warn("UI Layer not found, check your settings.");
-            return;
-        }
-        uiLayer.appendChild(widget);
-    }
     setupPostProcess() {
         if (this.postProcessParam.steps.length === 0) {
             this.destroyPostProcess();
@@ -1788,7 +1797,7 @@ class Viewport {
     }
     onWindowResize() {
         //console.log("resize")
-        let ele = this._canvas;
+        let ele = this._outerContainer;
         if (!ele) {
             return;
         }
@@ -1825,6 +1834,17 @@ class Viewport {
                 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;
@@ -1832,7 +1852,8 @@ class Viewport {
                 if (!context) {
                     throw Error("Can not create context");
                 }
-                context.drawImage(this.renderer.domElement, 0, 0, width, height);
+                // 使用实际尺寸进行绘制
+                context.drawImage(this.renderer.domElement, 0, 0, actualWidth, actualHeight, 0, 0, width, height);
                 const ret = offscreenCanvas.toDataURL('image/jpeg');
                 offscreenCanvas.remove();
                 resolve(ret);
@@ -1908,7 +1929,7 @@ class Viewport {
             this._renderer = null;
         }
         (_a = this.postProcessing) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._canvas = null;
+        this._outerContainer = null;
         this._app = null;
         this._renderer = null;
         this.outlineObjects = [];
@@ -2112,10 +2133,12 @@ class Controller {
     }
     updateCamera() {
         var _a, _b;
+        let 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) {
@@ -2914,7 +2937,8 @@ class ThreeJsApp {
         this._controller = new this._appParam.classes.controllerClass(this);
         this._assetManager = new this._appParam.classes.assetManagerClass(this);
         this.viewport.renderer.setAnimationLoop(() => {
-            this.tick();
+            const delta = this._clock.getDelta();
+            this.tick(delta);
         });
         this.postConstruct();
     }
@@ -2925,12 +2949,11 @@ class ThreeJsApp {
     }
     init() {
     }
-    tick() {
-        const delta = this._clock.getDelta();
-        this._controller.tick(delta);
-        this.world.tick(delta);
+    tick(deltaTime) {
+        this._controller.tick(deltaTime);
+        this.world.tick(deltaTime);
         this._tickingFunctions.forEach(func => {
-            func(delta);
+            func(deltaTime);
         });
         if (this._appParam.isRenderEveryFrame) {
             this.viewport.markRenderStateDirty();
@@ -2958,9 +2981,9 @@ class ThreeJsApp {
         this._camera = CameraFactory.updataCamera(param, this.camera);
         if (previousCam !== this.camera) {
             this._onCameraChangedDelegate.broadcast();
+            this.controller.updateCamera();
         }
         this._camera.updateProjectionMatrix();
-        this.controller.updateCamera();
         this.viewport.markRenderStateDirty();
     }
     onWindowResize(width, height) {

package/dist/bundle.esm.js

@@ -79,6 +79,9 @@ class Component extends BaseObject {
     }
     set name(name) {
         this._name = name;
+        if (this.obj) {
+            this.obj.name = name;
+        }
     }
     constructor(uuid) {
         super(uuid ? uuid : MathUtils.generateUUID());
@@ -640,6 +643,7 @@ class SceneComponent extends Component {
             throw Error("targetComponent threeObject is invalid");
         }
         this.obj.remove(targetComponent.threeObject);
+        console.log("removeChildComponent");
         targetComponent.destroy();
     }
     detachFromParentComponent() {
@@ -1497,8 +1501,11 @@ class WebGPUPostProcessFactory {
 }
 
 class Viewport {
+    get uiDom() {
+        return this._uiDom;
+    }
     get canvas() {
-        return this._canvas;
+        return this._canvasContainer;
     }
     get renderer() {
         if (!this._renderer) {
@@ -1513,18 +1520,20 @@ class Viewport {
         return this._app;
     }
     constructor(app, viewportParam, rendererParam, postProcessParam) {
+        this._uiDom = null;
         this._renderer = null;
         this.labelRenderer = null;
         this._app = null;
         this.resizeObserver = null;
-        this._canvas = null;
+        this._outerContainer = null;
+        this._canvasContainer = null;
         this.isRenderStateDirty = true;
         this.postProcessing = null;
         this.outlineObjects = [];
         this.postProcessParam = Object.assign({}, postProcessParam);
         this._app = app;
         if (viewportParam.elementId) {
-            this._canvas = document.getElementById(viewportParam.elementId);
+            this._outerContainer = document.getElementById(viewportParam.elementId);
         }
         this.createRenderer(rendererParam);
         if (viewportParam.isLabelRendererNeeded) {
@@ -1533,7 +1542,7 @@ class Viewport {
         if (viewportParam.isUILayerNeeded) {
             this.createUILayer();
         }
-        if (this._canvas) {
+        if (this._outerContainer) {
             this.resizeObserver = new ResizeObserver((entries) => {
                 for (let entry of entries) {
                     if (entry.contentBoxSize) {
@@ -1541,14 +1550,22 @@ class Viewport {
                     }
                 }
             });
-            this.resizeObserver.observe(this._canvas);
+            this.resizeObserver.observe(this._outerContainer);
         }
         this.app.onCameraChangedDelegate.add(() => {
             this.setupPostProcess();
         });
     }
     createRenderer(rendererParam) {
-        const element = this._canvas;
+        if (this._outerContainer) {
+            this._canvasContainer = document.createElement("div");
+            this._canvasContainer.style.left = "0px";
+            this._canvasContainer.style.top = "0px";
+            this._canvasContainer.style.width = "100%";
+            this._canvasContainer.style.height = "100%";
+            this._outerContainer.appendChild(this._canvasContainer);
+        }
+        const element = this._canvasContainer;
         if (this._renderer) {
             if (element) {
                 element.removeChild(this._renderer.domElement);
@@ -1578,12 +1595,12 @@ class Viewport {
         }
     }
     createLabelRenderer() {
-        const element = this._canvas;
+        const element = this._outerContainer;
         if (this.labelRenderer) {
             if (element) {
                 element.removeChild(this.labelRenderer.domElement);
             }
-            this.labelRenderer.dispose();
+            // this.labelRenderer.dispose();
         }
         let width = element ? element.clientWidth : 512;
         let height = element ? element.clientHeight : 512;
@@ -1598,13 +1615,14 @@ class Viewport {
         }
     }
     createUILayer() {
-        if (!this._canvas)
+        if (!this._outerContainer)
             return;
         // 检查是否已存在 UI 层，避免重复创建
-        let uiLayer = this._canvas.querySelector('.scene-uiLayer');
+        let uiLayer = this._outerContainer.querySelector('.scene-uiLayer');
         if (!uiLayer) {
             uiLayer = document.createElement('div');
             uiLayer.className = 'scene-uiLayer';
+            uiLayer.id = "scene-uiLayer";
             uiLayer.style.position = 'absolute';
             uiLayer.style.left = '0';
             uiLayer.style.top = '0';
@@ -1612,22 +1630,13 @@ class Viewport {
             uiLayer.style.height = '100%';
             uiLayer.style.pointerEvents = 'none'; // UI层默认不响应鼠标事件
             uiLayer.style.zIndex = '10'; // 保证在渲染层之上
-            this._canvas.appendChild(uiLayer);
+            this._outerContainer.appendChild(uiLayer);
+            this._uiDom = uiLayer;
         }
     }
     init() {
         this.setupPostProcess();
     }
-    addWidget(widget) {
-        if (!this._canvas)
-            return;
-        let uiLayer = this._canvas.querySelector('.scene-uiLayer');
-        if (!uiLayer) {
-            console.warn("UI Layer not found, check your settings.");
-            return;
-        }
-        uiLayer.appendChild(widget);
-    }
     setupPostProcess() {
         if (this.postProcessParam.steps.length === 0) {
             this.destroyPostProcess();
@@ -1786,7 +1795,7 @@ class Viewport {
     }
     onWindowResize() {
         //console.log("resize")
-        let ele = this._canvas;
+        let ele = this._outerContainer;
         if (!ele) {
             return;
         }
@@ -1823,6 +1832,17 @@ class Viewport {
                 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;
@@ -1830,7 +1850,8 @@ class Viewport {
                 if (!context) {
                     throw Error("Can not create context");
                 }
-                context.drawImage(this.renderer.domElement, 0, 0, width, height);
+                // 使用实际尺寸进行绘制
+                context.drawImage(this.renderer.domElement, 0, 0, actualWidth, actualHeight, 0, 0, width, height);
                 const ret = offscreenCanvas.toDataURL('image/jpeg');
                 offscreenCanvas.remove();
                 resolve(ret);
@@ -1906,7 +1927,7 @@ class Viewport {
             this._renderer = null;
         }
         (_a = this.postProcessing) === null || _a === void 0 ? void 0 : _a.dispose();
-        this._canvas = null;
+        this._outerContainer = null;
         this._app = null;
         this._renderer = null;
         this.outlineObjects = [];
@@ -2110,10 +2131,12 @@ class Controller {
     }
     updateCamera() {
         var _a, _b;
+        let 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) {
@@ -2912,7 +2935,8 @@ class ThreeJsApp {
         this._controller = new this._appParam.classes.controllerClass(this);
         this._assetManager = new this._appParam.classes.assetManagerClass(this);
         this.viewport.renderer.setAnimationLoop(() => {
-            this.tick();
+            const delta = this._clock.getDelta();
+            this.tick(delta);
         });
         this.postConstruct();
     }
@@ -2923,12 +2947,11 @@ class ThreeJsApp {
     }
     init() {
     }
-    tick() {
-        const delta = this._clock.getDelta();
-        this._controller.tick(delta);
-        this.world.tick(delta);
+    tick(deltaTime) {
+        this._controller.tick(deltaTime);
+        this.world.tick(deltaTime);
         this._tickingFunctions.forEach(func => {
-            func(delta);
+            func(deltaTime);
         });
         if (this._appParam.isRenderEveryFrame) {
             this.viewport.markRenderStateDirty();
@@ -2956,9 +2979,9 @@ class ThreeJsApp {
         this._camera = CameraFactory.updataCamera(param, this.camera);
         if (previousCam !== this.camera) {
             this._onCameraChangedDelegate.broadcast();
+            this.controller.updateCamera();
         }
         this._camera.updateProjectionMatrix();
-        this.controller.updateCamera();
         this.viewport.markRenderStateDirty();
     }
     onWindowResize(width, height) {

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

@@ -4,6 +4,8 @@ import { PostProcessParam, PostProcessStepParam } from './../PostProcess/PostPro
 import { RendererParameters } from './Parameters/RendererParameters';
 import { ViewportParam } from './Parameters/ViewportParameters';
 export declare class Viewport {
+    get uiDom(): HTMLDivElement | null;
+    protected _uiDom: HTMLDivElement | null;
     get canvas(): HTMLElement | null;
     get renderer(): WebGPURenderer;
     get app(): ThreeJsApp;
@@ -11,7 +13,8 @@ export declare class Viewport {
     private labelRenderer;
     protected _app: ThreeJsApp | null;
     private resizeObserver;
-    private _canvas;
+    private _outerContainer;
+    private _canvasContainer;
     private isRenderStateDirty;
     private postProcessParam;
     private postProcessing;
@@ -21,7 +24,6 @@ export declare class Viewport {
     protected createLabelRenderer(): void;
     protected createUILayer(): void;
     init(): void;
-    addWidget(widget: HTMLElement): void;
     setupPostProcess(): void;
     updatePostProcess(steps: PostProcessStepParam[]): void;
     updateRendererSettings(data: RendererParameters): void;

package/dist/lythreeframe/ThreeJsApp.d.ts

@@ -27,7 +27,7 @@ export declare class ThreeJsApp {
     constructor(appParam?: AppParam);
     protected postConstruct(): void;
     init(): void;
-    tick(): void;
+    protected tick(deltaTime: number): void;
     addTickingFunction(func: (deltaTime: number) => void): void;
     removeTickingFunction(func: (deltaTime: number) => void): void;
     destroy(): void;

package/package.json

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