lythreeframe 1.2.47 → 1.2.49

package/dist/bundle.cjs.js

@@ -3,6 +3,7 @@
 var webgpu = require('three/webgpu');
 var Addons_js = require('three/examples/jsm/Addons.js');
 var tsl = require('three/tsl');
+var three = require('three');
 var DepthOfFieldNode_js = require('three/addons/tsl/display/DepthOfFieldNode.js');
 var BloomNode_js = require('three/examples/jsm/tsl/display/BloomNode.js');
 var DenoiseNode_js = require('three/examples/jsm/tsl/display/DenoiseNode.js');
@@ -11,7 +12,6 @@ var GTAONode_js = require('three/examples/jsm/tsl/display/GTAONode.js');
 var OutlineNode_js = require('three/examples/jsm/tsl/display/OutlineNode.js');
 var SMAANode_js = require('three/examples/jsm/tsl/display/SMAANode.js');
 var gsap = require('gsap');
-var three = require('three');
 var SkyMesh_js = require('three/examples/jsm/objects/SkyMesh.js');
 var CSS2DRenderer_js = require('three/examples/jsm/renderers/CSS2DRenderer.js');
 var PointerLockControls_js = require('three/examples/jsm/controls/PointerLockControls.js');
@@ -645,7 +645,7 @@ class SceneComponent extends Component {
             throw Error("targetComponent threeObject is invalid");
         }
         this.obj.remove(targetComponent.threeObject);
-        targetComponent.destroy();
+        // targetComponent.destroy();
     }
     detachFromParentComponent() {
         if (this.parentComponent) {
@@ -1148,6 +1148,7 @@ class AssetManager {
         }
     }
     async loadGltfFromPathAsync(path) {
+        this.setupDracoLoader("/SceneResource/draco/");
         let res = await this.gltfLoader.loadAsync(path);
         return res;
     }
@@ -1155,6 +1156,7 @@ class AssetManager {
         this.gltfLoader.load(path, onLoadFinished);
     }
     loadGltfFromBuffer(data, path, onLoadFinished) {
+        this.setupDracoLoader("/SceneResource/draco/");
         this.gltfLoader.parse(data, path, onLoadFinished);
     }
     loadFile(filepath = '', onLoadFinished) {
@@ -1519,7 +1521,12 @@ class Viewport {
     }
     get renderer() {
         if (!this._renderer) {
-            throw Error("Renderer is not initialized");
+            if (this._webGLRenderer) {
+                return this._webGLRenderer;
+            }
+            else {
+                throw Error("Renderer is not initialized");
+            }
         }
         return this._renderer;
     }
@@ -1532,6 +1539,7 @@ class Viewport {
     constructor(app, viewportParam, rendererParam, postProcessParam) {
         this._uiDom = null;
         this._renderer = null;
+        this._webGLRenderer = null;
         this.labelRenderer = null;
         this._app = null;
         this.resizeObserver = null;
@@ -1545,6 +1553,7 @@ class Viewport {
         if (viewportParam.elementId) {
             this._outerContainer = document.getElementById(viewportParam.elementId);
         }
+        this.viewportParam = Object.assign({}, viewportParam);
         this.createRenderer(rendererParam);
         if (viewportParam.isLabelRendererNeeded) {
             this.createLabelRenderer();
@@ -1593,15 +1602,29 @@ class Viewport {
         renderP.logarithmicDepthBuffer = rendererParam.logarithmicDepthBuffer;
         renderP.samples = rendererParam.samples;
         renderP.colorBufferType = rendererParam.colorBufferType;
-        this._renderer = new webgpu.WebGPURenderer(renderP);
-        this._renderer.setPixelRatio(window.devicePixelRatio);
-        this._renderer.setSize(width, height);
-        this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
-        this._renderer.shadowMap.type = rendererParam.shadowMapType;
-        this._renderer.toneMapping = rendererParam.toneMapping;
-        this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
-        if (element) {
-            element.appendChild(this._renderer.domElement);
+        if (this.viewportParam.usingWebGLRenderer) {
+            this._webGLRenderer = new three.WebGLRenderer();
+            this._webGLRenderer.setPixelRatio(window.devicePixelRatio);
+            this._webGLRenderer.setSize(width, height);
+            this._webGLRenderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
+            this._webGLRenderer.shadowMap.type = rendererParam.shadowMapType ? rendererParam.shadowMapType : three.PCFSoftShadowMap;
+            this._webGLRenderer.toneMapping = rendererParam.toneMapping;
+            this._webGLRenderer.toneMappingExposure = rendererParam.toneMappingExposure;
+            if (element) {
+                element.appendChild(this._webGLRenderer.domElement);
+            }
+        }
+        else {
+            this._renderer = new webgpu.WebGPURenderer(renderP);
+            this._renderer.setPixelRatio(window.devicePixelRatio);
+            this._renderer.setSize(width, height);
+            this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
+            this._renderer.shadowMap.type = rendererParam.shadowMapType;
+            this._renderer.toneMapping = rendererParam.toneMapping;
+            this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
+            if (element) {
+                element.appendChild(this._renderer.domElement);
+            }
         }
     }
     createLabelRenderer() {
@@ -1648,97 +1671,7 @@ class Viewport {
         this.setupPostProcess();
     }
     setupPostProcess() {
-        if (this.postProcessParam.steps.length === 0) {
-            this.destroyPostProcess();
-            this.markRenderStateDirty();
-            return;
-        }
-        if (!this.postProcessing) {
-            this.postProcessing = new webgpu.PostProcessing(this.renderer);
-        }
-        const scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
-        let finalNode = scenePass.getTextureNode('output');
-        this.postProcessParam.steps.forEach((step) => {
-            switch (step.type) {
-                case exports.PostProcessStepType.Bloom:
-                    {
-                        const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
-                        //console.log("[PostProcess] BloomPass 构建完成");
-                        finalNode = finalNode.add(bloomPass);
-                        break;
-                    }
-                case exports.PostProcessStepType.DepthOfField:
-                    {
-                        const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
-                        //console.log("[PostProcess] DOFPass 构建完成");
-                        finalNode = finalNode.add(dofPass);
-                        break;
-                    }
-                case exports.PostProcessStepType.ScreenSpaceReflection:
-                    {
-                        console.warn("[PostProcess] SSR 目前存在技术问题，暂不支持。");
-                        // const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, step as SSRParam);
-                        // console.log("[PostProcess] SSRPass 构建完成");
-                        //finalNode = blendColor(finalNode, ssrPass);
-                        break;
-                    }
-                case exports.PostProcessStepType.GroundTruthAmbientOcclusion:
-                    {
-                        console.warn("[PostProcess] AO 目前存在技术问题，暂不支持。");
-                        // const stepParam = step as GTAOParam
-                        // const GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, stepParam);
-                        // console.log("[PostProcess] GTAOPass 构建完成");
-                        // if (stepParam.denoised)
-                        // {
-                        //     const denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, GTAOPass, stepParam);
-                        //     console.log("[PostProcess] GTAODenoisePass 构建完成");
-                        //     finalNode = denoiseGTAOPass.mul(finalNode);
-                        // }
-                        // else
-                        // {
-                        //     finalNode = GTAOPass.getTextureNode().mul(finalNode);
-                        // }
-                        break;
-                    }
-                case exports.PostProcessStepType.Outline:
-                    {
-                        const outlineParam = step;
-                        const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, scenePass.camera, this.outlineObjects, outlineParam);
-                        const { visibleEdge, hiddenEdge } = outlinePass;
-                        const pulsePeriod = tsl.uniform(outlineParam.pulsePeriod);
-                        const period = tsl.time.div(pulsePeriod).mul(2);
-                        const osc = tsl.oscSine(period).mul(.5).add(.5);
-                        const outlineColor = visibleEdge.mul(tsl.uniform(new webgpu.Color(outlineParam.visibleEdgeColor))).add(hiddenEdge.mul(tsl.uniform(new webgpu.Color(outlineParam.hiddenEdgeColor)))).mul(outlineParam.edgeStrength);
-                        const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
-                        // if(!this.denoiseOutlinePass)
-                        // {
-                        //     this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
-                        // }
-                        // outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
-                        // finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
-                        finalNode = outlinePulse.add(finalNode);
-                        //console.log("[PostProcess] OutlinePass 构建完成");
-                        break;
-                    }
-                case exports.PostProcessStepType.Antialiasing:
-                    {
-                        const aaParam = step;
-                        if (aaParam.method === "fxaa") {
-                            finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
-                            //console.log("[PostProcess] FXAAPass 构建完成");
-                        }
-                        if (aaParam.method === "smaa") {
-                            finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
-                            //console.log("[PostProcess] SMAAPass 构建完成");
-                        }
-                        break;
-                    }
-            }
-        });
-        this.postProcessing.outputNode = finalNode;
-        this.postProcessing.needsUpdate = true;
-        //console.log("[PostProcess] setup complete",  this.postProcessParam.steps);
-        this.markRenderStateDirty();
+        return;
     }
     updatePostProcess(steps) {
         this.postProcessParam.steps = steps;
@@ -1840,7 +1773,13 @@ class Viewport {
                     await this.postProcessing.renderAsync();
                 }
                 else {
-                    await this.renderer.renderAsync(this.app.world.scene, this.app.camera);
+                    if (this._renderer) {
+                        await this._renderer.renderAsync(this.app.world.scene, this.app.camera);
+                    }
+                    else if (this._webGLRenderer) {
+                        console.log("render with gl");
+                        this._webGLRenderer.render(this.app.world.scene, this.app.camera);
+                    }
                 }
                 // 检查 renderer.domElement 的尺寸
                 const sourceWidth = this.renderer.domElement.width;
@@ -2293,6 +2232,14 @@ class Controller {
     focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
         this.pawn.focusTo(targetPos, targetQuat, distance, time, onGoing, onFinished);
     }
+    setPawn(pawn) {
+        if (this._pawn) {
+            this._pawn.unpossess();
+            this._pawn.destroy();
+        }
+        this._pawn = pawn;
+        this._pawn.possess();
+    }
 }
 
 class CameraFactory {
@@ -3135,7 +3082,7 @@ class AmbientLightComponent extends LightComponent {
         this.threeObject.intensity = intensity;
     }
     createDefaultObject() {
-        return new webgpu.AmbientLight(0xffffff, 10);
+        return new three.AmbientLight(0xffffff, 10);
     }
     setPosition(...args) {
         if (args.length === 1) {
@@ -3179,7 +3126,7 @@ class AmbientLightActor extends Actor {
 }
 
 class BoxComponent extends MeshComponent {
-    constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new webgpu.MeshStandardMaterial(), uuid) {
+    constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new webgpu.MeshStandardMaterial({ color: 0x00ff00 }), uuid) {
         super(app, new webgpu.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material, uuid);
     }
 }
@@ -3634,6 +3581,7 @@ exports.LevelComponent = LevelComponent;
 exports.MaterialAssetPointer = MaterialAssetPointer;
 exports.MeshComponent = MeshComponent;
 exports.Orbital = Orbital;
+exports.Pawn = Pawn;
 exports.PlaneActor = PlaneActor;
 exports.PlaneComponent = PlaneComponent;
 exports.SceneComponent = SceneComponent;

package/dist/bundle.esm.js

@@ -1,6 +1,7 @@
-import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, OrthographicCamera, PerspectiveCamera, Clock, DirectionalLight, AmbientLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry } from 'three/webgpu';
+import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer, 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 { pass, mrt, output, uniform, metalness, transformedNormalView } from 'three/tsl';
+import { WebGLRenderer, PCFSoftShadowMap, Scene, AmbientLight } from 'three';
 import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';
 import { bloom } from 'three/examples/jsm/tsl/display/BloomNode.js';
 import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js';
@@ -9,7 +10,6 @@ import { ao } from 'three/examples/jsm/tsl/display/GTAONode.js';
 import { outline } from 'three/examples/jsm/tsl/display/OutlineNode.js';
 import { smaa } from 'three/examples/jsm/tsl/display/SMAANode.js';
 import { gsap } from 'gsap';
-import { Scene } from 'three';
 import { SkyMesh } from 'three/examples/jsm/objects/SkyMesh.js';
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
@@ -643,7 +643,7 @@ class SceneComponent extends Component {
             throw Error("targetComponent threeObject is invalid");
         }
         this.obj.remove(targetComponent.threeObject);
-        targetComponent.destroy();
+        // targetComponent.destroy();
     }
     detachFromParentComponent() {
         if (this.parentComponent) {
@@ -1146,6 +1146,7 @@ class AssetManager {
         }
     }
     async loadGltfFromPathAsync(path) {
+        this.setupDracoLoader("/SceneResource/draco/");
         let res = await this.gltfLoader.loadAsync(path);
         return res;
     }
@@ -1153,6 +1154,7 @@ class AssetManager {
         this.gltfLoader.load(path, onLoadFinished);
     }
     loadGltfFromBuffer(data, path, onLoadFinished) {
+        this.setupDracoLoader("/SceneResource/draco/");
         this.gltfLoader.parse(data, path, onLoadFinished);
     }
     loadFile(filepath = '', onLoadFinished) {
@@ -1517,7 +1519,12 @@ class Viewport {
     }
     get renderer() {
         if (!this._renderer) {
-            throw Error("Renderer is not initialized");
+            if (this._webGLRenderer) {
+                return this._webGLRenderer;
+            }
+            else {
+                throw Error("Renderer is not initialized");
+            }
         }
         return this._renderer;
     }
@@ -1530,6 +1537,7 @@ class Viewport {
     constructor(app, viewportParam, rendererParam, postProcessParam) {
         this._uiDom = null;
         this._renderer = null;
+        this._webGLRenderer = null;
         this.labelRenderer = null;
         this._app = null;
         this.resizeObserver = null;
@@ -1543,6 +1551,7 @@ class Viewport {
         if (viewportParam.elementId) {
             this._outerContainer = document.getElementById(viewportParam.elementId);
         }
+        this.viewportParam = Object.assign({}, viewportParam);
         this.createRenderer(rendererParam);
         if (viewportParam.isLabelRendererNeeded) {
             this.createLabelRenderer();
@@ -1591,15 +1600,29 @@ class Viewport {
         renderP.logarithmicDepthBuffer = rendererParam.logarithmicDepthBuffer;
         renderP.samples = rendererParam.samples;
         renderP.colorBufferType = rendererParam.colorBufferType;
-        this._renderer = new WebGPURenderer(renderP);
-        this._renderer.setPixelRatio(window.devicePixelRatio);
-        this._renderer.setSize(width, height);
-        this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
-        this._renderer.shadowMap.type = rendererParam.shadowMapType;
-        this._renderer.toneMapping = rendererParam.toneMapping;
-        this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
-        if (element) {
-            element.appendChild(this._renderer.domElement);
+        if (this.viewportParam.usingWebGLRenderer) {
+            this._webGLRenderer = new WebGLRenderer();
+            this._webGLRenderer.setPixelRatio(window.devicePixelRatio);
+            this._webGLRenderer.setSize(width, height);
+            this._webGLRenderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
+            this._webGLRenderer.shadowMap.type = rendererParam.shadowMapType ? rendererParam.shadowMapType : PCFSoftShadowMap;
+            this._webGLRenderer.toneMapping = rendererParam.toneMapping;
+            this._webGLRenderer.toneMappingExposure = rendererParam.toneMappingExposure;
+            if (element) {
+                element.appendChild(this._webGLRenderer.domElement);
+            }
+        }
+        else {
+            this._renderer = new WebGPURenderer(renderP);
+            this._renderer.setPixelRatio(window.devicePixelRatio);
+            this._renderer.setSize(width, height);
+            this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
+            this._renderer.shadowMap.type = rendererParam.shadowMapType;
+            this._renderer.toneMapping = rendererParam.toneMapping;
+            this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
+            if (element) {
+                element.appendChild(this._renderer.domElement);
+            }
         }
     }
     createLabelRenderer() {
@@ -1646,97 +1669,7 @@ class Viewport {
         this.setupPostProcess();
     }
     setupPostProcess() {
-        if (this.postProcessParam.steps.length === 0) {
-            this.destroyPostProcess();
-            this.markRenderStateDirty();
-            return;
-        }
-        if (!this.postProcessing) {
-            this.postProcessing = new PostProcessing(this.renderer);
-        }
-        const scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
-        let finalNode = scenePass.getTextureNode('output');
-        this.postProcessParam.steps.forEach((step) => {
-            switch (step.type) {
-                case PostProcessStepType.Bloom:
-                    {
-                        const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
-                        //console.log("[PostProcess] BloomPass 构建完成");
-                        finalNode = finalNode.add(bloomPass);
-                        break;
-                    }
-                case PostProcessStepType.DepthOfField:
-                    {
-                        const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
-                        //console.log("[PostProcess] DOFPass 构建完成");
-                        finalNode = finalNode.add(dofPass);
-                        break;
-                    }
-                case PostProcessStepType.ScreenSpaceReflection:
-                    {
-                        console.warn("[PostProcess] SSR 目前存在技术问题，暂不支持。");
-                        // const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, step as SSRParam);
-                        // console.log("[PostProcess] SSRPass 构建完成");
-                        //finalNode = blendColor(finalNode, ssrPass);
-                        break;
-                    }
-                case PostProcessStepType.GroundTruthAmbientOcclusion:
-                    {
-                        console.warn("[PostProcess] AO 目前存在技术问题，暂不支持。");
-                        // const stepParam = step as GTAOParam
-                        // const GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, stepParam);
-                        // console.log("[PostProcess] GTAOPass 构建完成");
-                        // if (stepParam.denoised)
-                        // {
-                        //     const denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, GTAOPass, stepParam);
-                        //     console.log("[PostProcess] GTAODenoisePass 构建完成");
-                        //     finalNode = denoiseGTAOPass.mul(finalNode);
-                        // }
-                        // else
-                        // {
-                        //     finalNode = GTAOPass.getTextureNode().mul(finalNode);
-                        // }
-                        break;
-                    }
-                case PostProcessStepType.Outline:
-                    {
-                        const outlineParam = step;
-                        const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, scenePass.camera, this.outlineObjects, outlineParam);
-                        const { visibleEdge, hiddenEdge } = outlinePass;
-                        const pulsePeriod = uniform(outlineParam.pulsePeriod);
-                        const period = time.div(pulsePeriod).mul(2);
-                        const osc = oscSine(period).mul(.5).add(.5);
-                        const outlineColor = visibleEdge.mul(uniform(new Color(outlineParam.visibleEdgeColor))).add(hiddenEdge.mul(uniform(new Color(outlineParam.hiddenEdgeColor)))).mul(outlineParam.edgeStrength);
-                        const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
-                        // if(!this.denoiseOutlinePass)
-                        // {
-                        //     this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
-                        // }
-                        // outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
-                        // finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
-                        finalNode = outlinePulse.add(finalNode);
-                        //console.log("[PostProcess] OutlinePass 构建完成");
-                        break;
-                    }
-                case PostProcessStepType.Antialiasing:
-                    {
-                        const aaParam = step;
-                        if (aaParam.method === "fxaa") {
-                            finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
-                            //console.log("[PostProcess] FXAAPass 构建完成");
-                        }
-                        if (aaParam.method === "smaa") {
-                            finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
-                            //console.log("[PostProcess] SMAAPass 构建完成");
-                        }
-                        break;
-                    }
-            }
-        });
-        this.postProcessing.outputNode = finalNode;
-        this.postProcessing.needsUpdate = true;
-        //console.log("[PostProcess] setup complete",  this.postProcessParam.steps);
-        this.markRenderStateDirty();
+        return;
     }
     updatePostProcess(steps) {
         this.postProcessParam.steps = steps;
@@ -1838,7 +1771,13 @@ class Viewport {
                     await this.postProcessing.renderAsync();
                 }
                 else {
-                    await this.renderer.renderAsync(this.app.world.scene, this.app.camera);
+                    if (this._renderer) {
+                        await this._renderer.renderAsync(this.app.world.scene, this.app.camera);
+                    }
+                    else if (this._webGLRenderer) {
+                        console.log("render with gl");
+                        this._webGLRenderer.render(this.app.world.scene, this.app.camera);
+                    }
                 }
                 // 检查 renderer.domElement 的尺寸
                 const sourceWidth = this.renderer.domElement.width;
@@ -2291,6 +2230,14 @@ class Controller {
     focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
         this.pawn.focusTo(targetPos, targetQuat, distance, time, onGoing, onFinished);
     }
+    setPawn(pawn) {
+        if (this._pawn) {
+            this._pawn.unpossess();
+            this._pawn.destroy();
+        }
+        this._pawn = pawn;
+        this._pawn.possess();
+    }
 }
 
 class CameraFactory {
@@ -3177,7 +3124,7 @@ class AmbientLightActor extends Actor {
 }
 
 class BoxComponent extends MeshComponent {
-    constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshStandardMaterial(), uuid) {
+    constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshStandardMaterial({ color: 0x00ff00 }), uuid) {
         super(app, new BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material, uuid);
     }
 }
@@ -3598,4 +3545,4 @@ class TransformGizmo extends Pawn {
     }
 }
 
-export { Actor, AmbientLightActor, AmbientLightComponent, 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 };
+export { Actor, AmbientLightActor, AmbientLightComponent, 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, Pawn, PlaneActor, PlaneComponent, PostProcessStepType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };

package/dist/index.d.ts

@@ -58,6 +58,7 @@ export { DefaultSSRParam } from "./lythreeframe/PostProcess/Param/SSR";
 export type { SSRParam } from "./lythreeframe/PostProcess/Param/SSR";
 export { DefaultAAParams } from "./lythreeframe/PostProcess/Param/AAParam";
 export type { AAParams } from "./lythreeframe/PostProcess/Param/AAParam";
+export { Pawn } from "./lythreeframe/Object/PawnV2/Pawn";
 export { Orbital } from "./lythreeframe/Object/PawnV2/Oribital";
 export { FirstPerson } from "./lythreeframe/Object/PawnV2/FirstPerson";
 export type { ITransforming } from "./lythreeframe/Object/PawnV2/TransformControl";

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

@@ -40,4 +40,5 @@ export declare class Controller {
     getHitResultUnderCursor(): Intersection | null;
     getHitResultFromScreenPoint(x: number, y: number): Intersection | null;
     focusTo(targetPos: Vector3, targetQuat: Quaternion | Euler, distance: number, time: number, onGoing?: (() => void) | null, onFinished?: (() => void) | null): void;
+    setPawn(pawn: Pawn): void;
 }

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

@@ -7,6 +7,7 @@ import { ViewportParam } from "./ViewportParameters";
 import { AssetManager } from "../../AssetManagement/AssetManager";
 import { PostProcessParam } from "../../PostProcess/PostProcessParam";
 import { RendererParameters } from "./RendererParameters";
+import { ControllerParameters } from "./ControllerParameters";
 export interface AppClass {
     assetManagerClass: typeof AssetManager;
     controllerClass: typeof Controller;
@@ -19,6 +20,7 @@ export interface AppParam {
     postProcessParam?: PostProcessParam;
     worldParam?: WorldParam;
     viewportParam: ViewportParam;
+    controllerParam?: ControllerParameters;
     classes?: AppClass;
     isRenderEveryFrame?: boolean;
 }

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

@@ -0,0 +1,2 @@
+export interface ControllerParameters {
+}

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

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

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

@@ -1,16 +1,19 @@
-import { ShadowMapType, ToneMapping, WebGPURenderer, Object3D } from "three/webgpu";
+import { Object3D, ShadowMapType, ToneMapping } from "three";
+import { WebGPURenderer } from "three/webgpu";
 import { ThreeJsApp } from "../ThreeJsApp";
 import { PostProcessParam, PostProcessStepParam } from './../PostProcess/PostProcessParam';
 import { RendererParameters } from './Parameters/RendererParameters';
 import { ViewportParam } from './Parameters/ViewportParameters';
+import { WebGLRenderer } from "three";
 export declare class Viewport {
     get uiDom(): HTMLDivElement | null;
     protected _uiDom: HTMLDivElement | null;
     get canvas(): HTMLElement | null;
     get outer(): HTMLElement | null;
-    get renderer(): WebGPURenderer;
+    get renderer(): WebGPURenderer | WebGLRenderer;
     get app(): ThreeJsApp;
     private _renderer;
+    private _webGLRenderer;
     private labelRenderer;
     protected _app: ThreeJsApp | null;
     private resizeObserver;
@@ -19,6 +22,7 @@ export declare class Viewport {
     private isRenderStateDirty;
     private postProcessParam;
     private postProcessing;
+    private viewportParam;
     private outlineObjects;
     constructor(app: ThreeJsApp, viewportParam: ViewportParam, rendererParam: RendererParameters, postProcessParam: PostProcessParam);
     protected createRenderer(rendererParam: RendererParameters): void;

package/dist/lythreeframe/Object/Components/Light/AmbientLight/AmbientLightComponent.d.ts

@@ -1,5 +1,5 @@
 import { LightComponent } from "../LightComponent";
-import { ColorRepresentation, AmbientLight, Vector3 } from "three/webgpu";
+import { ColorRepresentation, AmbientLight, Vector3 } from "three";
 import { World } from "../../../../Frame/World";
 import { ThreeJsApp } from "../../../../ThreeJsApp";
 export declare class AmbientLightComponent extends LightComponent {

package/package.json

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