lythreeframe 1.2.31 → 1.2.32

package/dist/bundle.cjs.js

@@ -1546,6 +1546,9 @@ class Viewport {
         if (viewportParam.isLabelRendererNeeded) {
             this.createLabelRenderer();
         }
+        if (viewportParam.isUILayerNeeded) {
+            this.createUILayer();
+        }
         if (this._canvas) {
             this.resizeObserver = new ResizeObserver((entries) => {
                 for (let entry of entries) {
@@ -1610,9 +1613,37 @@ class Viewport {
             element.appendChild(this.labelRenderer.domElement);
         }
     }
+    createUILayer() {
+        if (!this._canvas)
+            return;
+        // 检查是否已存在 UI 层，避免重复创建
+        let uiLayer = this._canvas.querySelector('.scene-uiLayer');
+        if (!uiLayer) {
+            uiLayer = document.createElement('div');
+            uiLayer.className = 'scene-uiLayer';
+            uiLayer.style.position = 'absolute';
+            uiLayer.style.left = '0';
+            uiLayer.style.top = '0';
+            uiLayer.style.width = '100%';
+            uiLayer.style.height = '100%';
+            uiLayer.style.pointerEvents = 'none'; // UI层默认不响应鼠标事件
+            uiLayer.style.zIndex = '10'; // 保证在渲染层之上
+            this._canvas.appendChild(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();
@@ -2322,7 +2353,8 @@ const DefaultCameraParam = JSON.parse(JSON.stringify(DefaultPerspectiveCameraPar
 
 const DefaultViewportParam = {
     elementId: null,
-    isLabelRendererNeeded: false
+    isLabelRendererNeeded: false,
+    isUILayerNeeded: false,
 };
 
 const DefaultRendererParameters = {

package/dist/bundle.esm.js

@@ -1544,6 +1544,9 @@ class Viewport {
         if (viewportParam.isLabelRendererNeeded) {
             this.createLabelRenderer();
         }
+        if (viewportParam.isUILayerNeeded) {
+            this.createUILayer();
+        }
         if (this._canvas) {
             this.resizeObserver = new ResizeObserver((entries) => {
                 for (let entry of entries) {
@@ -1608,9 +1611,37 @@ class Viewport {
             element.appendChild(this.labelRenderer.domElement);
         }
     }
+    createUILayer() {
+        if (!this._canvas)
+            return;
+        // 检查是否已存在 UI 层，避免重复创建
+        let uiLayer = this._canvas.querySelector('.scene-uiLayer');
+        if (!uiLayer) {
+            uiLayer = document.createElement('div');
+            uiLayer.className = 'scene-uiLayer';
+            uiLayer.style.position = 'absolute';
+            uiLayer.style.left = '0';
+            uiLayer.style.top = '0';
+            uiLayer.style.width = '100%';
+            uiLayer.style.height = '100%';
+            uiLayer.style.pointerEvents = 'none'; // UI层默认不响应鼠标事件
+            uiLayer.style.zIndex = '10'; // 保证在渲染层之上
+            this._canvas.appendChild(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();
@@ -2320,7 +2351,8 @@ const DefaultCameraParam = JSON.parse(JSON.stringify(DefaultPerspectiveCameraPar
 
 const DefaultViewportParam = {
     elementId: null,
-    isLabelRendererNeeded: false
+    isLabelRendererNeeded: false,
+    isUILayerNeeded: false,
 };
 
 const DefaultRendererParameters = {

package/dist/lythreeframe/Frame/Parameters/ViewportParameters.d.ts

@@ -1,5 +1,6 @@
 export interface ViewportParam {
     elementId: string | null;
     isLabelRendererNeeded: boolean;
+    isUILayerNeeded: boolean;
 }
 export declare const DefaultViewportParam: ViewportParam;

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

@@ -1,5 +1,4 @@
-import { Object3D } from 'three/src/Three.WebGPU.Nodes.js';
-import { ShadowMapType, ToneMapping, WebGPURenderer } from "three/webgpu";
+import { ShadowMapType, ToneMapping, WebGPURenderer, Object3D } from "three/webgpu";
 import { ThreeJsApp } from "../ThreeJsApp";
 import { PostProcessParam, PostProcessStepParam } from './../PostProcess/PostProcessParam';
 import { RendererParameters } from './Parameters/RendererParameters';
@@ -20,7 +19,9 @@ export declare class Viewport {
     constructor(app: ThreeJsApp, viewportParam: ViewportParam, rendererParam: RendererParameters, postProcessParam: PostProcessParam);
     protected createRenderer(rendererParam: RendererParameters): void;
     protected createLabelRenderer(): void;
+    protected createUILayer(): void;
     init(): void;
+    addWidget(widget: HTMLElement): void;
     setupPostProcess(): void;
     updatePostProcess(steps: PostProcessStepParam[]): void;
     updateRendererSettings(data: RendererParameters): void;

package/package.json

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