lythreeframe 1.2.41 → 1.2.43

package/dist/bundle.cjs.js

@@ -1515,6 +1515,7 @@ class Viewport {
         return this._app;
     }
     constructor(app, viewportParam, rendererParam, postProcessParam) {
+        this.uiDom = null;
         this._renderer = null;
         this.labelRenderer = null;
         this._app = null;
@@ -1585,7 +1586,7 @@ class Viewport {
             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;
@@ -1615,20 +1616,27 @@ class Viewport {
             uiLayer.style.pointerEvents = 'none'; // UI层默认不响应鼠标事件
             uiLayer.style.zIndex = '10'; // 保证在渲染层之上
             this._canvas.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._canvas)
-            return;
-        let uiLayer = this._canvas.querySelector('.scene-uiLayer');
-        if (!uiLayer) {
-            console.warn("UI Layer not found, check your settings.");
+        if (!this.uiDom)
             return;
-        }
-        uiLayer.appendChild(widget);
+        widget.mount(this.uiDom);
     }
     setupPostProcess() {
         if (this.postProcessParam.steps.length === 0) {
@@ -2110,6 +2118,16 @@ class Controller {
         this.pawn.possess();
         this.raycaster = new webgpu.Raycaster();
     }
+    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();
+        this._pawn = new Orbital(this);
+        this.pawn.possess();
+        this.pawn.enabled = isPawnEnabled;
+    }
     init() {
         if (this.viewPort.canvas) {
             this.viewPort.canvas.addEventListener("pointermove", this.onPointerMove);
@@ -2951,6 +2969,7 @@ class ThreeJsApp {
         this._camera = CameraFactory.updataCamera(param, this.camera);
         if (previousCam !== this.camera) {
             this._onCameraChangedDelegate.broadcast();
+            this.controller.updateCamera();
         }
         this._camera.updateProjectionMatrix();
         this.viewport.markRenderStateDirty();

package/dist/bundle.esm.js

@@ -1513,6 +1513,7 @@ class Viewport {
         return this._app;
     }
     constructor(app, viewportParam, rendererParam, postProcessParam) {
+        this.uiDom = null;
         this._renderer = null;
         this.labelRenderer = null;
         this._app = null;
@@ -1583,7 +1584,7 @@ class Viewport {
             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;
@@ -1613,20 +1614,27 @@ class Viewport {
             uiLayer.style.pointerEvents = 'none'; // UI层默认不响应鼠标事件
             uiLayer.style.zIndex = '10'; // 保证在渲染层之上
             this._canvas.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._canvas)
-            return;
-        let uiLayer = this._canvas.querySelector('.scene-uiLayer');
-        if (!uiLayer) {
-            console.warn("UI Layer not found, check your settings.");
+        if (!this.uiDom)
             return;
-        }
-        uiLayer.appendChild(widget);
+        widget.mount(this.uiDom);
     }
     setupPostProcess() {
         if (this.postProcessParam.steps.length === 0) {
@@ -2108,6 +2116,16 @@ class Controller {
         this.pawn.possess();
         this.raycaster = new Raycaster();
     }
+    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();
+        this._pawn = new Orbital(this);
+        this.pawn.possess();
+        this.pawn.enabled = isPawnEnabled;
+    }
     init() {
         if (this.viewPort.canvas) {
             this.viewPort.canvas.addEventListener("pointermove", this.onPointerMove);
@@ -2949,6 +2967,7 @@ class ThreeJsApp {
         this._camera = CameraFactory.updataCamera(param, this.camera);
         if (previousCam !== this.camera) {
             this._onCameraChangedDelegate.broadcast();
+            this.controller.updateCamera();
         }
         this._camera.updateProjectionMatrix();
         this.viewport.markRenderStateDirty();

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

@@ -28,6 +28,7 @@ export declare class Controller {
     get onClickNothingDelegate(): Delegate<[void]>;
     private _onClickNothingDelegate;
     constructor(app: ThreeJsApp);
+    updateCamera(): void;
     init(): void;
     tick(deltaTime: number): void;
     destroy(): void;

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

@@ -3,7 +3,9 @@ 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 canvas(): HTMLElement | null;
     get renderer(): WebGPURenderer;
     get app(): ThreeJsApp;
@@ -21,7 +23,7 @@ export declare class Viewport {
     protected createLabelRenderer(): void;
     protected createUILayer(): void;
     init(): void;
-    addWidget(widget: HTMLElement): void;
+    addWidget(widget: Widget): void;
     setupPostProcess(): void;
     updatePostProcess(steps: PostProcessStepParam[]): void;
     updateRendererSettings(data: RendererParameters): void;

package/package.json

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