lythreeframe 1.0.46 → 1.0.48

package/dist/bundle.cjs.js

@@ -1435,9 +1435,6 @@ const DefaultOutlineParams = {
 
 class Viewport {
     get canvas() {
-        if (!this._canvas) {
-            throw Error("Canvas is not initialized");
-        }
         return this._canvas;
     }
     get renderer() {
@@ -1452,7 +1449,7 @@ class Viewport {
         }
         return this._app;
     }
-    constructor(app, elementId, rendererParam = { antialias: true }, postProcessParam = {}) {
+    constructor(app, viewportParam, rendererParam = { antialias: true }, postProcessParam = {}) {
         this._renderer = null;
         this.labelRenderer = null;
         this._app = null;
@@ -1475,31 +1472,44 @@ class Viewport {
         this.outlineObjects = [];
         this.postProcessParam = postProcessParam;
         this._app = app;
-        let element = document.getElementById(elementId);
-        if (!element) {
-            throw Error(`Can not find domElement which id is ${elementId}`);
+        let element = null;
+        if (viewportParam.elementId) {
+            element = document.getElementById(viewportParam.elementId);
+            if (!element) {
+                throw Error(`Can not find domElement which id is ${viewportParam.elementId}`);
+            }
         }
+        let width = element ? element.clientWidth : 512;
+        let height = element ? element.clientHeight : 512;
         this._renderer = new webgpu.WebGPURenderer(rendererParam);
         this._renderer.setPixelRatio(window.devicePixelRatio);
-        this._renderer.setSize(element.clientWidth, element.clientHeight);
+        this._renderer.setSize(width, height);
         this._renderer.shadowMap.enabled = true;
-        this.labelRenderer = new Addons_js.CSS2DRenderer();
-        this.labelRenderer.setSize(element.clientWidth, element.clientHeight);
-        this.labelRenderer.domElement.style.pointerEvents = 'none';
-        this.labelRenderer.domElement.style.position = 'absolute';
-        this.labelRenderer.domElement.style.top = '0px';
-        this.labelRenderer.domElement.className = 'scene-labelRenderer';
-        element.appendChild(this.labelRenderer.domElement);
-        element.appendChild(this._renderer.domElement);
-        this._canvas = element;
-        this.resizeObserver = new ResizeObserver((entries) => {
-            for (let entry of entries) {
-                if (entry.contentBoxSize) {
-                    this.onWindowResize();
-                }
+        if (viewportParam.isLabelRendererNeeded) {
+            this.labelRenderer = new Addons_js.CSS2DRenderer();
+            this.labelRenderer.setSize(width, height);
+            this.labelRenderer.domElement.style.pointerEvents = 'none';
+            this.labelRenderer.domElement.style.position = 'absolute';
+            this.labelRenderer.domElement.style.top = '0px';
+            this.labelRenderer.domElement.className = 'scene-labelRenderer';
+            if (element) {
+                element.appendChild(this.labelRenderer.domElement);
             }
-        });
-        this.resizeObserver.observe(this._canvas);
+        }
+        if (element) {
+            element.appendChild(this._renderer.domElement);
+            this._canvas = element;
+        }
+        if (this._canvas) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (let entry of entries) {
+                    if (entry.contentBoxSize) {
+                        this.onWindowResize();
+                    }
+                }
+            });
+            this.resizeObserver.observe(this._canvas);
+        }
         this.app.onCameraChangedDelegate.add(() => {
             this.setupPostProcess();
         });
@@ -2205,6 +2215,11 @@ const DefaultCameraParam = {
     }
 };
 
+const DefaultViewportParam = {
+    elementId: null,
+    isLabelRendererNeeded: false
+};
+
 const DefaultRenderParam = {
     antialias: true,
 };
@@ -2212,6 +2227,7 @@ const DefaultAppParam = {
     renderParam: DefaultRenderParam,
     cameraParam: DefaultCameraParam,
     postProcessParam: DefaultPostProcessParam,
+    viewportParam: DefaultViewportParam,
     classes: {
         assetManagerClass: AssetManager,
         controllerClass: Controller,
@@ -2245,12 +2261,13 @@ class ThreeJsApp {
     get onCameraChangedDelegate() {
         return this._onCameraChangedDelegate;
     }
-    constructor(elementId, appParam = DefaultAppParam) {
-        this._appParam = {};
+    constructor(appParam = DefaultAppParam) {
+        this._appParam = { viewportParam: DefaultViewportParam };
         this._onCameraChangedDelegate = new Delegate();
         this._appParam.cameraParam = appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam;
         this._appParam.renderParam = appParam.renderParam ? appParam.renderParam : DefaultRenderParam;
         this._appParam.postProcessParam = appParam.postProcessParam ? appParam.postProcessParam : DefaultPostProcessParam;
+        this._appParam.viewportParam = appParam.viewportParam ? appParam.viewportParam : DefaultViewportParam;
         this._appParam.classes = appParam.classes ? appParam.classes : {
             assetManagerClass: AssetManager,
             controllerClass: Controller,
@@ -2260,7 +2277,7 @@ class ThreeJsApp {
         this._clock = new webgpu.Clock();
         this._camera = CameraFactory.createCamera(this._appParam.cameraParam);
         this._world = new this._appParam.classes.worldClass(this);
-        this._viewport = new this._appParam.classes.viewportClass(this, elementId, this._appParam.renderParam, this._appParam.postProcessParam);
+        this._viewport = new this._appParam.classes.viewportClass(this, this._appParam.viewportParam, this._appParam.renderParam, this._appParam.postProcessParam);
         this._controller = new this._appParam.classes.controllerClass(this);
         this._assetManager = new this._appParam.classes.assetManagerClass(this);
         this.viewport.renderer.setAnimationLoop(() => {
@@ -3156,6 +3173,7 @@ exports.DefaultRenderParam = DefaultRenderParam;
 exports.DefaultSSRParam = DefaultSSRParam;
 exports.DefaultSkyParam = DefaultSkyParam;
 exports.DefaultToneMappingParams = DefaultToneMappingParams;
+exports.DefaultViewportParam = DefaultViewportParam;
 exports.Delegate = Delegate;
 exports.DirectionalLightActor = DirectionalLightActor;
 exports.DirectionalLightComponent = DirectionalLightComponent;

package/dist/bundle.esm.js

@@ -1433,9 +1433,6 @@ const DefaultOutlineParams = {
 
 class Viewport {
     get canvas() {
-        if (!this._canvas) {
-            throw Error("Canvas is not initialized");
-        }
         return this._canvas;
     }
     get renderer() {
@@ -1450,7 +1447,7 @@ class Viewport {
         }
         return this._app;
     }
-    constructor(app, elementId, rendererParam = { antialias: true }, postProcessParam = {}) {
+    constructor(app, viewportParam, rendererParam = { antialias: true }, postProcessParam = {}) {
         this._renderer = null;
         this.labelRenderer = null;
         this._app = null;
@@ -1473,31 +1470,44 @@ class Viewport {
         this.outlineObjects = [];
         this.postProcessParam = postProcessParam;
         this._app = app;
-        let element = document.getElementById(elementId);
-        if (!element) {
-            throw Error(`Can not find domElement which id is ${elementId}`);
+        let element = null;
+        if (viewportParam.elementId) {
+            element = document.getElementById(viewportParam.elementId);
+            if (!element) {
+                throw Error(`Can not find domElement which id is ${viewportParam.elementId}`);
+            }
         }
+        let width = element ? element.clientWidth : 512;
+        let height = element ? element.clientHeight : 512;
         this._renderer = new WebGPURenderer(rendererParam);
         this._renderer.setPixelRatio(window.devicePixelRatio);
-        this._renderer.setSize(element.clientWidth, element.clientHeight);
+        this._renderer.setSize(width, height);
         this._renderer.shadowMap.enabled = true;
-        this.labelRenderer = new CSS2DRenderer();
-        this.labelRenderer.setSize(element.clientWidth, element.clientHeight);
-        this.labelRenderer.domElement.style.pointerEvents = 'none';
-        this.labelRenderer.domElement.style.position = 'absolute';
-        this.labelRenderer.domElement.style.top = '0px';
-        this.labelRenderer.domElement.className = 'scene-labelRenderer';
-        element.appendChild(this.labelRenderer.domElement);
-        element.appendChild(this._renderer.domElement);
-        this._canvas = element;
-        this.resizeObserver = new ResizeObserver((entries) => {
-            for (let entry of entries) {
-                if (entry.contentBoxSize) {
-                    this.onWindowResize();
-                }
+        if (viewportParam.isLabelRendererNeeded) {
+            this.labelRenderer = new CSS2DRenderer();
+            this.labelRenderer.setSize(width, height);
+            this.labelRenderer.domElement.style.pointerEvents = 'none';
+            this.labelRenderer.domElement.style.position = 'absolute';
+            this.labelRenderer.domElement.style.top = '0px';
+            this.labelRenderer.domElement.className = 'scene-labelRenderer';
+            if (element) {
+                element.appendChild(this.labelRenderer.domElement);
             }
-        });
-        this.resizeObserver.observe(this._canvas);
+        }
+        if (element) {
+            element.appendChild(this._renderer.domElement);
+            this._canvas = element;
+        }
+        if (this._canvas) {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (let entry of entries) {
+                    if (entry.contentBoxSize) {
+                        this.onWindowResize();
+                    }
+                }
+            });
+            this.resizeObserver.observe(this._canvas);
+        }
         this.app.onCameraChangedDelegate.add(() => {
             this.setupPostProcess();
         });
@@ -2203,6 +2213,11 @@ const DefaultCameraParam = {
     }
 };
 
+const DefaultViewportParam = {
+    elementId: null,
+    isLabelRendererNeeded: false
+};
+
 const DefaultRenderParam = {
     antialias: true,
 };
@@ -2210,6 +2225,7 @@ const DefaultAppParam = {
     renderParam: DefaultRenderParam,
     cameraParam: DefaultCameraParam,
     postProcessParam: DefaultPostProcessParam,
+    viewportParam: DefaultViewportParam,
     classes: {
         assetManagerClass: AssetManager,
         controllerClass: Controller,
@@ -2243,12 +2259,13 @@ class ThreeJsApp {
     get onCameraChangedDelegate() {
         return this._onCameraChangedDelegate;
     }
-    constructor(elementId, appParam = DefaultAppParam) {
-        this._appParam = {};
+    constructor(appParam = DefaultAppParam) {
+        this._appParam = { viewportParam: DefaultViewportParam };
         this._onCameraChangedDelegate = new Delegate();
         this._appParam.cameraParam = appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam;
         this._appParam.renderParam = appParam.renderParam ? appParam.renderParam : DefaultRenderParam;
         this._appParam.postProcessParam = appParam.postProcessParam ? appParam.postProcessParam : DefaultPostProcessParam;
+        this._appParam.viewportParam = appParam.viewportParam ? appParam.viewportParam : DefaultViewportParam;
         this._appParam.classes = appParam.classes ? appParam.classes : {
             assetManagerClass: AssetManager,
             controllerClass: Controller,
@@ -2258,7 +2275,7 @@ class ThreeJsApp {
         this._clock = new Clock();
         this._camera = CameraFactory.createCamera(this._appParam.cameraParam);
         this._world = new this._appParam.classes.worldClass(this);
-        this._viewport = new this._appParam.classes.viewportClass(this, elementId, this._appParam.renderParam, this._appParam.postProcessParam);
+        this._viewport = new this._appParam.classes.viewportClass(this, this._appParam.viewportParam, this._appParam.renderParam, this._appParam.postProcessParam);
         this._controller = new this._appParam.classes.controllerClass(this);
         this._assetManager = new this._appParam.classes.assetManagerClass(this);
         this.viewport.renderer.setAnimationLoop(() => {
@@ -3137,4 +3154,4 @@ class TransformGizmo extends Pawn {
     }
 }
 
-export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRenderParam, DefaultSSRParam, DefaultSkyParam, DefaultToneMappingParams, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, ToneMappingOptions, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
+export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRenderParam, DefaultSSRParam, DefaultSkyParam, DefaultToneMappingParams, DefaultViewportParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, ToneMappingOptions, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };

package/dist/index.d.ts

@@ -14,6 +14,8 @@ export type { CameraParam } from './lythreeframe/Frame/Parameters/CameraParamete
 export { DefaultCameraParam } from './lythreeframe/Frame/Parameters/CameraParameter';
 export type { AppParam, AppClass } from "./lythreeframe/Frame/Parameters/AppParameter";
 export { DefaultRenderParam, DefaultAppParam } from "./lythreeframe/Frame/Parameters/AppParameter";
+export type { ViewportParam } from './lythreeframe/Frame/Parameters/ViewportParameters';
+export { DefaultViewportParam } from './lythreeframe/Frame/Parameters/ViewportParameters';
 export { Actor } from "./lythreeframe/Object/Actor";
 export { DirectionalLightActor } from "./lythreeframe/Object/Actors/Light/DirectionalLightActor";
 export { BoxActor } from "./lythreeframe/Object/Actors/Shape/BoxActor";

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

@@ -6,6 +6,7 @@ import { AssetManager } from "@/lythreeframe/AssetManagement/AssetManager";
 import { Controller } from "../Controller";
 import { World } from "../World";
 import { Viewport } from "../Viewport";
+import { ViewportParam } from "./ViewportParameters";
 export interface AppClass {
     assetManagerClass: typeof AssetManager;
     controllerClass: typeof Controller;
@@ -17,6 +18,7 @@ export interface AppParam {
     cameraParam?: CameraParam;
     postProcessParam?: PostProcessParam;
     worldParam?: WorldParam;
+    viewportParam: ViewportParam;
     classes?: AppClass;
 }
 export declare const DefaultRenderParam: WebGPURendererParameters;

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

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

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

@@ -9,8 +9,9 @@ import { SSRParam } from "../PostProcess/Param/SSR";
 import { OutlineParams } from '../PostProcess/Param/Outline';
 import { Object3D } from 'three/src/Three.WebGPU.Nodes.js';
 import { DOFParam } from '../PostProcess/Param/DOF';
+import { ViewportParam } from './Parameters/ViewportParameters';
 export declare class Viewport {
-    get canvas(): HTMLElement;
+    get canvas(): HTMLElement | null;
     get renderer(): WebGPURenderer;
     get app(): ThreeJsApp;
     private _renderer;
@@ -31,7 +32,7 @@ export declare class Viewport {
     private fxaaPass;
     private smaaPass;
     private outlineObjects;
-    constructor(app: ThreeJsApp, elementId: string, rendererParam?: WebGPURendererParameters, postProcessParam?: PostProcessParam);
+    constructor(app: ThreeJsApp, viewportParam: ViewportParam, rendererParam?: WebGPURendererParameters, postProcessParam?: PostProcessParam);
     init(): void;
     setupPostProcess(): void;
     updateToneMappingParam(params: ToneMappingParams): void;

package/dist/lythreeframe/ThreeJsApp.d.ts

@@ -23,7 +23,7 @@ export declare class ThreeJsApp {
     protected _appParam: AppParam;
     get onCameraChangedDelegate(): Delegate<[void]>;
     protected _onCameraChangedDelegate: Delegate<[void]>;
-    constructor(elementId: string, appParam?: AppParam);
+    constructor(appParam?: AppParam);
     init(): void;
     tick(): void;
     destroy(): void;

package/package.json

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