lythreeframe 1.2.27 → 1.2.29

package/dist/bundle.cjs.js

@@ -1539,12 +1539,34 @@ class Viewport {
         this.outlineObjects = [];
         this.postProcessParam = Object.assign({}, postProcessParam);
         this._app = app;
-        let element = null;
         if (viewportParam.elementId) {
-            element = document.getElementById(viewportParam.elementId);
-            if (!element) {
-                throw Error(`Can not find domElement which id is ${viewportParam.elementId}`);
+            this._canvas = document.getElementById(viewportParam.elementId);
+        }
+        this.createRenderer(rendererParam);
+        if (viewportParam.isLabelRendererNeeded) {
+            this.createLabelRenderer();
+        }
+        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();
+        });
+    }
+    createRenderer(rendererParam) {
+        const element = this._canvas;
+        if (this._renderer) {
+            if (element) {
+                element.removeChild(this._renderer.domElement);
             }
+            this._renderer.dispose();
         }
         let width = element ? element.clientWidth : 512;
         let height = element ? element.clientHeight : 512;
@@ -1564,34 +1586,29 @@ class Viewport {
         this._renderer.shadowMap.type = rendererParam.shadowMapType;
         this._renderer.toneMapping = rendererParam.toneMapping;
         this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
-        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._renderer.domElement);
+        }
+    }
+    createLabelRenderer() {
+        const element = this._canvas;
+        if (this.labelRenderer) {
             if (element) {
-                element.appendChild(this.labelRenderer.domElement);
+                element.removeChild(this.labelRenderer.domElement);
             }
+            this.labelRenderer.dispose();
         }
+        let width = element ? element.clientWidth : 512;
+        let height = element ? element.clientHeight : 512;
+        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._renderer.domElement);
-            this._canvas = element;
+            element.appendChild(this.labelRenderer.domElement);
         }
-        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();
-        });
     }
     init() {
         this.setupPostProcess();
@@ -1693,6 +1710,10 @@ class Viewport {
         this.postProcessParam.steps = steps;
         this.setupPostProcess();
     }
+    updateRendererSettings(data) {
+        this.createRenderer(data);
+        this.markRenderStateDirty();
+    }
     // updateBloomPass(params: BloomParam)
     // {
     //     this.postProcessParam.bloom = { ...params };
@@ -2194,59 +2215,90 @@ class Controller {
 
 class CameraFactory {
     static createCamera(param) {
-        let cam = null;
-        if ("fov" in param.param && "aspect" in param.param) {
-            cam = new webgpu.PerspectiveCamera(param.param.fov, param.param.aspect, param.near, param.far);
-        }
-        if ("left" in param.param && "right" in param.param && "top" in param.param && "bottom" in param.param) {
-            cam = new webgpu.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
+        try {
+            switch (param.type) {
+                case "Perspective":
+                    {
+                        let data = param;
+                        return new webgpu.PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
+                    }
+                case "Orthographic":
+                    {
+                        let data = param;
+                        return new webgpu.OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
+                    }
+                default:
+                    {
+                        throw new Error("Invalid camera type");
+                    }
+            }
         }
-        if (!cam) {
-            console.error("create camera failed");
-            debugger;
-            throw Error("create camera failed");
+        catch (error) {
+            console.warn("[CameraFactory]Error occurred while creating camera: ", error);
+            console.warn("[CameraFactory]Create default perspective camera instead");
+            return new webgpu.PerspectiveCamera(50, 1, 0.1, 1000);
         }
-        return cam;
     }
     static updataCamera(param, camera) {
-        if ("fov" in param.param && "aspect" in param.param) {
-            if (camera instanceof webgpu.PerspectiveCamera) {
-                camera.near = param.near;
-                camera.far = param.far;
-                camera.fov = param.param.fov;
-                camera.aspect = param.param.aspect;
-                return camera;
-            }
-            else {
-                return new webgpu.PerspectiveCamera(param.param.fov, param.param.aspect, param.near, param.far);
+        try {
+            switch (param.type) {
+                case "Perspective":
+                    {
+                        let data = param;
+                        if (camera instanceof webgpu.PerspectiveCamera) {
+                            camera.near = data.near;
+                            camera.far = data.far;
+                            camera.fov = data.fov;
+                            camera.aspect = data.aspect;
+                            return camera;
+                        }
+                        return new webgpu.PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
+                    }
+                case "Orthographic":
+                    {
+                        let data = param;
+                        if (camera instanceof webgpu.OrthographicCamera) {
+                            camera.near = data.near;
+                            camera.far = data.far;
+                            camera.left = data.left;
+                            camera.right = data.right;
+                            camera.top = data.top;
+                            camera.bottom = data.bottom;
+                            return camera;
+                        }
+                        return new webgpu.OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
+                    }
+                default:
+                    {
+                        throw new Error("Invalid camera type");
+                    }
             }
         }
-        if ("left" in param.param && "right" in param.param && "top" in param.param && "bottom" in param.param) {
-            if (camera instanceof webgpu.OrthographicCamera) {
-                camera.near = param.near;
-                camera.far = param.far;
-                camera.left = param.param.left;
-                camera.right = param.param.right;
-                camera.top = param.param.top;
-                camera.bottom = param.param.bottom;
-                return camera;
-            }
-            else {
-                return new webgpu.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
-            }
+        catch (error) {
+            console.warn("[CameraFactory]Error occurred while updating camera: ", error);
+            console.warn("[CameraFactory]Update Failed. Return old camera instead");
+            return camera;
         }
-        return camera;
     }
 }
 
-const DefaultCameraParam = {
+const DefaultPerspectiveCameraParam = {
     near: 0.1,
     far: 1000,
-    param: {
-        fov: 50,
-        aspect: 1,
-    }
+    type: "Perspective",
+    fov: 50,
+    aspect: 1,
+};
+const DefaultOrthographicCameraParam = {
+    type: "Orthographic",
+    near: 0.1,
+    far: 1000,
+    left: -1,
+    right: 1,
+    top: 1,
+    bottom: -1,
 };
+const DefaultCameraParam = JSON.parse(JSON.stringify(DefaultPerspectiveCameraParam));
 
 const DefaultViewportParam = {
     elementId: null,
@@ -3352,7 +3404,9 @@ exports.DefaultCameraParam = DefaultCameraParam;
 exports.DefaultDOFParam = DefaultDOFParam;
 exports.DefaultDenoiseParam = DefaultDenoiseParam;
 exports.DefaultGTAOParam = DefaultGTAOParam;
+exports.DefaultOrthographicCameraParam = DefaultOrthographicCameraParam;
 exports.DefaultOutlineParams = DefaultOutlineParams;
+exports.DefaultPerspectiveCameraParam = DefaultPerspectiveCameraParam;
 exports.DefaultPostProcessParam = DefaultPostProcessParam;
 exports.DefaultRendererParameters = DefaultRendererParameters;
 exports.DefaultSSRParam = DefaultSSRParam;

package/dist/bundle.esm.js

@@ -1,4 +1,4 @@
-import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, PerspectiveCamera, OrthographicCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry } from 'three/webgpu';
+import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, OrthographicCamera, PerspectiveCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry } from 'three/webgpu';
 import { GLTFLoader, DRACOLoader, CSS2DRenderer, OrbitControls } from 'three/examples/jsm/Addons.js';
 import { pass, mrt, output, uniform, metalness, transformedNormalView, time, oscSine } from 'three/tsl';
 import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';
@@ -1537,12 +1537,34 @@ class Viewport {
         this.outlineObjects = [];
         this.postProcessParam = Object.assign({}, postProcessParam);
         this._app = app;
-        let element = null;
         if (viewportParam.elementId) {
-            element = document.getElementById(viewportParam.elementId);
-            if (!element) {
-                throw Error(`Can not find domElement which id is ${viewportParam.elementId}`);
+            this._canvas = document.getElementById(viewportParam.elementId);
+        }
+        this.createRenderer(rendererParam);
+        if (viewportParam.isLabelRendererNeeded) {
+            this.createLabelRenderer();
+        }
+        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();
+        });
+    }
+    createRenderer(rendererParam) {
+        const element = this._canvas;
+        if (this._renderer) {
+            if (element) {
+                element.removeChild(this._renderer.domElement);
             }
+            this._renderer.dispose();
         }
         let width = element ? element.clientWidth : 512;
         let height = element ? element.clientHeight : 512;
@@ -1562,34 +1584,29 @@ class Viewport {
         this._renderer.shadowMap.type = rendererParam.shadowMapType;
         this._renderer.toneMapping = rendererParam.toneMapping;
         this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
-        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._renderer.domElement);
+        }
+    }
+    createLabelRenderer() {
+        const element = this._canvas;
+        if (this.labelRenderer) {
             if (element) {
-                element.appendChild(this.labelRenderer.domElement);
+                element.removeChild(this.labelRenderer.domElement);
             }
+            this.labelRenderer.dispose();
         }
+        let width = element ? element.clientWidth : 512;
+        let height = element ? element.clientHeight : 512;
+        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._renderer.domElement);
-            this._canvas = element;
+            element.appendChild(this.labelRenderer.domElement);
         }
-        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();
-        });
     }
     init() {
         this.setupPostProcess();
@@ -1691,6 +1708,10 @@ class Viewport {
         this.postProcessParam.steps = steps;
         this.setupPostProcess();
     }
+    updateRendererSettings(data) {
+        this.createRenderer(data);
+        this.markRenderStateDirty();
+    }
     // updateBloomPass(params: BloomParam)
     // {
     //     this.postProcessParam.bloom = { ...params };
@@ -2192,59 +2213,90 @@ class Controller {
 
 class CameraFactory {
     static createCamera(param) {
-        let cam = null;
-        if ("fov" in param.param && "aspect" in param.param) {
-            cam = new PerspectiveCamera(param.param.fov, param.param.aspect, param.near, param.far);
-        }
-        if ("left" in param.param && "right" in param.param && "top" in param.param && "bottom" in param.param) {
-            cam = new OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
+        try {
+            switch (param.type) {
+                case "Perspective":
+                    {
+                        let data = param;
+                        return new PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
+                    }
+                case "Orthographic":
+                    {
+                        let data = param;
+                        return new OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
+                    }
+                default:
+                    {
+                        throw new Error("Invalid camera type");
+                    }
+            }
         }
-        if (!cam) {
-            console.error("create camera failed");
-            debugger;
-            throw Error("create camera failed");
+        catch (error) {
+            console.warn("[CameraFactory]Error occurred while creating camera: ", error);
+            console.warn("[CameraFactory]Create default perspective camera instead");
+            return new PerspectiveCamera(50, 1, 0.1, 1000);
         }
-        return cam;
     }
     static updataCamera(param, camera) {
-        if ("fov" in param.param && "aspect" in param.param) {
-            if (camera instanceof PerspectiveCamera) {
-                camera.near = param.near;
-                camera.far = param.far;
-                camera.fov = param.param.fov;
-                camera.aspect = param.param.aspect;
-                return camera;
-            }
-            else {
-                return new PerspectiveCamera(param.param.fov, param.param.aspect, param.near, param.far);
+        try {
+            switch (param.type) {
+                case "Perspective":
+                    {
+                        let data = param;
+                        if (camera instanceof PerspectiveCamera) {
+                            camera.near = data.near;
+                            camera.far = data.far;
+                            camera.fov = data.fov;
+                            camera.aspect = data.aspect;
+                            return camera;
+                        }
+                        return new PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
+                    }
+                case "Orthographic":
+                    {
+                        let data = param;
+                        if (camera instanceof OrthographicCamera) {
+                            camera.near = data.near;
+                            camera.far = data.far;
+                            camera.left = data.left;
+                            camera.right = data.right;
+                            camera.top = data.top;
+                            camera.bottom = data.bottom;
+                            return camera;
+                        }
+                        return new OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
+                    }
+                default:
+                    {
+                        throw new Error("Invalid camera type");
+                    }
             }
         }
-        if ("left" in param.param && "right" in param.param && "top" in param.param && "bottom" in param.param) {
-            if (camera instanceof OrthographicCamera) {
-                camera.near = param.near;
-                camera.far = param.far;
-                camera.left = param.param.left;
-                camera.right = param.param.right;
-                camera.top = param.param.top;
-                camera.bottom = param.param.bottom;
-                return camera;
-            }
-            else {
-                return new OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
-            }
+        catch (error) {
+            console.warn("[CameraFactory]Error occurred while updating camera: ", error);
+            console.warn("[CameraFactory]Update Failed. Return old camera instead");
+            return camera;
         }
-        return camera;
     }
 }
 
-const DefaultCameraParam = {
+const DefaultPerspectiveCameraParam = {
     near: 0.1,
     far: 1000,
-    param: {
-        fov: 50,
-        aspect: 1,
-    }
+    type: "Perspective",
+    fov: 50,
+    aspect: 1,
+};
+const DefaultOrthographicCameraParam = {
+    type: "Orthographic",
+    near: 0.1,
+    far: 1000,
+    left: -1,
+    right: 1,
+    top: 1,
+    bottom: -1,
 };
+const DefaultCameraParam = JSON.parse(JSON.stringify(DefaultPerspectiveCameraParam));
 
 const DefaultViewportParam = {
     elementId: null,
@@ -3338,4 +3390,4 @@ class TransformGizmo extends Pawn {
     }
 }
 
-export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, PostProcessStepType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
+export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOrthographicCameraParam, DefaultOutlineParams, DefaultPerspectiveCameraParam, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, PostProcessStepType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };

package/dist/index.d.ts

@@ -10,8 +10,8 @@ export { ThreeJsApp } from "./lythreeframe/ThreeJsApp";
 export { Controller } from "./lythreeframe/Frame/Controller";
 export { Viewport } from "./lythreeframe/Frame/Viewport";
 export { World } from "./lythreeframe/Frame/World";
-export type { CameraParam } from './lythreeframe/Frame/Parameters/CameraParameter';
-export { DefaultCameraParam } from './lythreeframe/Frame/Parameters/CameraParameter';
+export type { CameraParam, PerspectiveCameraParam, OrthographicCameraParam } from './lythreeframe/Frame/Parameters/CameraParameter';
+export { DefaultCameraParam, DefaultPerspectiveCameraParam, DefaultOrthographicCameraParam } from './lythreeframe/Frame/Parameters/CameraParameter';
 export type { AppParam, AppClass } from "./lythreeframe/Frame/Parameters/AppParameter";
 export { DefaultAppParam } from "./lythreeframe/Frame/Parameters/AppParameter";
 export type { ViewportParam } from './lythreeframe/Frame/Parameters/ViewportParameters';

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

@@ -1,16 +1,22 @@
 export interface CameraParam {
-    near: number;
-    far: number;
-    param: PerspectiveCameraParam | OrthographicCameraParam;
+    type: "Perspective" | "Orthographic";
 }
-export interface PerspectiveCameraParam {
+export interface PerspectiveCameraParam extends CameraParam {
+    type: "Perspective";
     fov: number;
     aspect: number;
+    near: number;
+    far: number;
 }
-export interface OrthographicCameraParam {
+export interface OrthographicCameraParam extends CameraParam {
+    type: "Orthographic";
     left: number;
     right: number;
     top: number;
     bottom: number;
+    near: number;
+    far: number;
 }
+export declare const DefaultPerspectiveCameraParam: PerspectiveCameraParam;
+export declare const DefaultOrthographicCameraParam: OrthographicCameraParam;
 export declare const DefaultCameraParam: CameraParam;

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

@@ -18,9 +18,12 @@ export declare class Viewport {
     private postProcessing;
     private outlineObjects;
     constructor(app: ThreeJsApp, viewportParam: ViewportParam, rendererParam: RendererParameters, postProcessParam: PostProcessParam);
+    protected createRenderer(rendererParam: RendererParameters): void;
+    protected createLabelRenderer(): void;
     init(): void;
     setupPostProcess(): void;
     updatePostProcess(steps: PostProcessStepParam[]): void;
+    updateRendererSettings(data: RendererParameters): void;
     addOutlineObject(obj: Object3D): void;
     setOutlineObjects(objects: Object3D[]): void;
     removeOutlineObject(obj: Object3D): void;

package/package.json

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