lythreeframe 1.2.43 → 1.2.45

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,14 @@ class WebGPUPostProcessFactory {
 }
 
 class Viewport {
+    get uiDom() {
+        return this._uiDom;
+    }
     get canvas() {
-        return this._canvas;
+        return this._canvasContainer;
+    }
+    get outer() {
+        return this._outerContainer;
     }
     get renderer() {
         if (!this._renderer) {
@@ -1515,19 +1525,20 @@ class Viewport {
         return this._app;
     }
     constructor(app, viewportParam, rendererParam, postProcessParam) {
-        this.uiDom = null;
+        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) {
@@ -1536,7 +1547,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) {
@@ -1544,14 +1555,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);
@@ -1581,7 +1600,7 @@ class Viewport {
         }
     }
     createLabelRenderer() {
-        const element = this._canvas;
+        const element = this._outerContainer;
         if (this.labelRenderer) {
             if (element) {
                 element.removeChild(this.labelRenderer.domElement);
@@ -1601,13 +1620,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';
@@ -1615,29 +1635,13 @@ class Viewport {
             uiLayer.style.height = '100%';
             uiLayer.style.pointerEvents = 'none'; // UI层默认不响应鼠标事件
             uiLayer.style.zIndex = '10'; // 保证在渲染层之上
-            this._canvas.appendChild(uiLayer);
-            this.uiDom = uiLayer;
+            this._outerContainer.appendChild(uiLayer);
+            this._uiDom = uiLayer;
         }
     }
     init() {
         this.setupPostProcess();
     }
-    // addWidget(widget: HTMLElement)
-    // {
-    //     if (!this._canvas) return;
-    //     let uiLayer = this._canvas.querySelector('.scene-uiLayer') as HTMLDivElement;
-    //     if(!uiLayer)
-    //     {
-    //         console.warn("UI Layer not found, check your settings.");
-    //         return 
-    //     }
-    //     uiLayer.appendChild(widget);
-    // }
-    addWidget(widget) {
-        if (!this.uiDom)
-            return;
-        widget.mount(this.uiDom);
-    }
     setupPostProcess() {
         if (this.postProcessParam.steps.length === 0) {
             this.destroyPostProcess();
@@ -1796,7 +1800,7 @@ class Viewport {
     }
     onWindowResize() {
         //console.log("resize")
-        let ele = this._canvas;
+        let ele = this._outerContainer;
         if (!ele) {
             return;
         }
@@ -1816,7 +1820,7 @@ class Viewport {
         if (this.postProcessing) {
             this.postProcessing.render();
         }
-        else { //console.log("render renderer");
+        else {
             this.renderer.render(this.app.world.scene, this.app.camera);
         }
         if (this.labelRenderer) {
@@ -1833,6 +1837,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;
@@ -1840,7 +1855,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);
@@ -1916,7 +1932,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 = [];
@@ -2120,7 +2136,6 @@ class Controller {
     }
     updateCamera() {
         var _a, _b;
-        console.log("update camera");
         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();
@@ -2925,7 +2940,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();
     }
@@ -2936,12 +2952,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();

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,14 @@ class WebGPUPostProcessFactory {
 }
 
 class Viewport {
+    get uiDom() {
+        return this._uiDom;
+    }
     get canvas() {
-        return this._canvas;
+        return this._canvasContainer;
+    }
+    get outer() {
+        return this._outerContainer;
     }
     get renderer() {
         if (!this._renderer) {
@@ -1513,19 +1523,20 @@ class Viewport {
         return this._app;
     }
     constructor(app, viewportParam, rendererParam, postProcessParam) {
-        this.uiDom = null;
+        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) {
@@ -1534,7 +1545,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) {
@@ -1542,14 +1553,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);
@@ -1579,7 +1598,7 @@ class Viewport {
         }
     }
     createLabelRenderer() {
-        const element = this._canvas;
+        const element = this._outerContainer;
         if (this.labelRenderer) {
             if (element) {
                 element.removeChild(this.labelRenderer.domElement);
@@ -1599,13 +1618,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';
@@ -1613,29 +1633,13 @@ class Viewport {
             uiLayer.style.height = '100%';
             uiLayer.style.pointerEvents = 'none'; // UI层默认不响应鼠标事件
             uiLayer.style.zIndex = '10'; // 保证在渲染层之上
-            this._canvas.appendChild(uiLayer);
-            this.uiDom = uiLayer;
+            this._outerContainer.appendChild(uiLayer);
+            this._uiDom = uiLayer;
         }
     }
     init() {
         this.setupPostProcess();
     }
-    // addWidget(widget: HTMLElement)
-    // {
-    //     if (!this._canvas) return;
-    //     let uiLayer = this._canvas.querySelector('.scene-uiLayer') as HTMLDivElement;
-    //     if(!uiLayer)
-    //     {
-    //         console.warn("UI Layer not found, check your settings.");
-    //         return 
-    //     }
-    //     uiLayer.appendChild(widget);
-    // }
-    addWidget(widget) {
-        if (!this.uiDom)
-            return;
-        widget.mount(this.uiDom);
-    }
     setupPostProcess() {
         if (this.postProcessParam.steps.length === 0) {
             this.destroyPostProcess();
@@ -1794,7 +1798,7 @@ class Viewport {
     }
     onWindowResize() {
         //console.log("resize")
-        let ele = this._canvas;
+        let ele = this._outerContainer;
         if (!ele) {
             return;
         }
@@ -1814,7 +1818,7 @@ class Viewport {
         if (this.postProcessing) {
             this.postProcessing.render();
         }
-        else { //console.log("render renderer");
+        else {
             this.renderer.render(this.app.world.scene, this.app.camera);
         }
         if (this.labelRenderer) {
@@ -1831,6 +1835,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;
@@ -1838,7 +1853,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);
@@ -1914,7 +1930,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 = [];
@@ -2118,7 +2134,6 @@ class Controller {
     }
     updateCamera() {
         var _a, _b;
-        console.log("update camera");
         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();
@@ -2923,7 +2938,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();
     }
@@ -2934,12 +2950,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();

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

@@ -3,17 +3,19 @@ import { ThreeJsApp } from "../ThreeJsApp";
 import { PostProcessParam, PostProcessStepParam } from './../PostProcess/PostProcessParam';
 import { RendererParameters } from './Parameters/RendererParameters';
 import { ViewportParam } from './Parameters/ViewportParameters';
-import { Widget } from "@/script/scene/Editor/Widget/Widget";
 export declare class Viewport {
-    protected uiDom: HTMLDivElement | null;
+    get uiDom(): HTMLDivElement | null;
+    protected _uiDom: HTMLDivElement | null;
     get canvas(): HTMLElement | null;
+    get outer(): HTMLElement | null;
     get renderer(): WebGPURenderer;
     get app(): ThreeJsApp;
     private _renderer;
     private labelRenderer;
     protected _app: ThreeJsApp | null;
     private resizeObserver;
-    private _canvas;
+    private _outerContainer;
+    private _canvasContainer;
     private isRenderStateDirty;
     private postProcessParam;
     private postProcessing;
@@ -23,7 +25,6 @@ export declare class Viewport {
     protected createLabelRenderer(): void;
     protected createUILayer(): void;
     init(): void;
-    addWidget(widget: Widget): 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.43",
+  "version": "1.2.45",
   "description": "Three.js 封装",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",