lythreeframe 1.0.22 → 1.0.24

package/dist/bundle.cjs.js

@@ -1,9 +1,8 @@
 'use strict';
 
-var three = require('three');
+var webgpu = require('three/webgpu');
 var Addons_js = require('three/examples/jsm/Addons.js');
 var tsl = require('three/tsl');
-var webgpu = require('three/webgpu');
 var BloomNode_js = require('three/examples/jsm/tsl/display/BloomNode.js');
 var DenoiseNode_js = require('three/examples/jsm/tsl/display/DenoiseNode.js');
 var DepthOfFieldNode_js = require('three/examples/jsm/tsl/display/DepthOfFieldNode.js');
@@ -15,6 +14,7 @@ var MotionBlur_js = require('three/examples/jsm/tsl/display/MotionBlur.js');
 var FXAANode_js = require('three/examples/jsm/tsl/display/FXAANode.js');
 var SMAANode_js = require('three/examples/jsm/tsl/display/SMAANode.js');
 var gsap = require('gsap');
+var SkyMesh_js = require('three/examples/jsm/objects/SkyMesh.js');
 var CSS2DRenderer_js = require('three/examples/jsm/renderers/CSS2DRenderer.js');
 var PointerLockControls = require('three/examples/jsm/controls/PointerLockControls');
 var TransformControls_js = require('three/examples/jsm/controls/TransformControls.js');
@@ -47,7 +47,7 @@ class BaseObject {
     get uuid() {
         return this._uuid;
     }
-    constructor(uuid = three.MathUtils.generateUUID()) {
+    constructor(uuid = webgpu.MathUtils.generateUUID()) {
         this.bCanTick = false;
         this.bCanTick = false;
         this._uuid = uuid;
@@ -132,7 +132,7 @@ class SceneComponent extends Component {
         this._name = "SceneComponent";
     }
     createDefaultThreeObject() {
-        this.threeObject = new three.Group();
+        this.threeObject = new webgpu.Group();
     }
     get isVisible() {
         if (!this.threeObject) {
@@ -160,19 +160,19 @@ class SceneComponent extends Component {
         });
     }
     getBoundsCenterPositionWS() {
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         this.getBounds().getCenter(ret);
         return this.getWorldPosition();
     }
     getBoundsTopCenterPositionWS() {
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         let bounds = this.getBounds();
         bounds.getCenter(ret);
         ret.y = bounds.max.y;
         return ret;
     }
     getBoundsBottomCenterPositionWS() {
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         let bounds = this.getBounds();
         bounds.getCenter(ret);
         ret.y = bounds.min.y;
@@ -182,7 +182,7 @@ class SceneComponent extends Component {
         if (!this.threeObject) {
             throw Error("threeObject is invalid");
         }
-        let ret = new three.Box3();
+        let ret = new webgpu.Box3();
         ret.setFromObject(this.threeObject, false);
         if (ret.isEmpty()) {
             ret.min = ret.max = this.getWorldPosition();
@@ -259,9 +259,9 @@ class SceneComponent extends Component {
             return this.threeObject.position.clone();
         }
         else {
-            const position = new three.Vector3();
-            const quaternion = new three.Quaternion();
-            const scale = new three.Vector3();
+            const position = new webgpu.Vector3();
+            const quaternion = new webgpu.Quaternion();
+            const scale = new webgpu.Vector3();
             this.threeObject.matrix.decompose(position, quaternion, scale);
             return position;
         }
@@ -271,14 +271,14 @@ class SceneComponent extends Component {
             throw Error("threeObject is invalid");
         }
         let newPosition = null;
-        if (args.length === 1 && args[0] instanceof three.Vector3) {
-            newPosition = new three.Vector3().copy(args[0]);
+        if (args.length === 1 && args[0] instanceof webgpu.Vector3) {
+            newPosition = new webgpu.Vector3().copy(args[0]);
         }
         else if (args.length === 3 &&
             typeof args[0] === "number" &&
             typeof args[1] === "number" &&
             typeof args[2] === "number") {
-            newPosition = new three.Vector3(args[0], args[1], args[2]);
+            newPosition = new webgpu.Vector3(args[0], args[1], args[2]);
         }
         if (!newPosition) {
             return;
@@ -302,11 +302,11 @@ class SceneComponent extends Component {
             return this.threeObject.rotation.clone();
         }
         else {
-            const position = new three.Vector3();
-            const quaternion = new three.Quaternion();
-            const scale = new three.Vector3();
+            const position = new webgpu.Vector3();
+            const quaternion = new webgpu.Quaternion();
+            const scale = new webgpu.Vector3();
             this.threeObject.matrix.decompose(position, quaternion, scale);
-            return new three.Euler().setFromQuaternion(quaternion);
+            return new webgpu.Euler().setFromQuaternion(quaternion);
         }
     }
     setRotation(...args) {
@@ -314,11 +314,11 @@ class SceneComponent extends Component {
             throw Error("threeObject is invalid");
         }
         let newRotation = null;
-        if (args[0] instanceof three.Euler) {
-            newRotation = new three.Euler().copy(args[0]);
+        if (args[0] instanceof webgpu.Euler) {
+            newRotation = new webgpu.Euler().copy(args[0]);
         }
         if (typeof (args[0]) === "number" && typeof (args[1]) === "number" && typeof (args[2]) === "number") {
-            newRotation = new three.Euler(args[0], args[1], args[2]);
+            newRotation = new webgpu.Euler(args[0], args[1], args[2]);
         }
         if (!newRotation) {
             return;
@@ -339,9 +339,9 @@ class SceneComponent extends Component {
             return this.threeObject.quaternion.clone();
         }
         else {
-            const position = new three.Vector3();
-            const quaternion = new three.Quaternion();
-            const scale = new three.Vector3();
+            const position = new webgpu.Vector3();
+            const quaternion = new webgpu.Quaternion();
+            const scale = new webgpu.Vector3();
             this.threeObject.matrix.decompose(position, quaternion, scale);
             return quaternion;
         }
@@ -351,11 +351,11 @@ class SceneComponent extends Component {
             throw Error("threeObject is invalid");
         }
         let newQuat = null;
-        if (args[0] instanceof three.Quaternion) {
-            newQuat = new three.Quaternion().copy(args[0]);
+        if (args[0] instanceof webgpu.Quaternion) {
+            newQuat = new webgpu.Quaternion().copy(args[0]);
         }
         if (typeof args[0] === "number" && typeof args[1] === "number" && typeof args[2] === "number" && typeof args[3] === "number") {
-            newQuat = new three.Quaternion(args[0], args[1], args[2], args[3]);
+            newQuat = new webgpu.Quaternion(args[0], args[1], args[2], args[3]);
         }
         if (!newQuat) {
             console.error("setQuaternion failed,param is invalid", args);
@@ -363,9 +363,9 @@ class SceneComponent extends Component {
         }
         this.threeObject.quaternion.copy(newQuat);
         if (!this.threeObject.matrixAutoUpdate) {
-            const position = new three.Vector3();
-            const quaternion = new three.Quaternion();
-            const scale = new three.Vector3();
+            const position = new webgpu.Vector3();
+            const quaternion = new webgpu.Quaternion();
+            const scale = new webgpu.Vector3();
             this.threeObject.matrix.decompose(position, quaternion, scale);
             this.threeObject.matrix.compose(position, newQuat, scale);
         }
@@ -384,9 +384,9 @@ class SceneComponent extends Component {
             return this.threeObject.scale.clone();
         }
         else {
-            const position = new three.Vector3();
-            const quaternion = new three.Quaternion();
-            const scale = new three.Vector3();
+            const position = new webgpu.Vector3();
+            const quaternion = new webgpu.Quaternion();
+            const scale = new webgpu.Vector3();
             this.threeObject.matrix.decompose(position, quaternion, scale);
             return scale;
         }
@@ -396,11 +396,11 @@ class SceneComponent extends Component {
             throw Error("threeObject is invalid");
         }
         let newScale = null;
-        if (args[0] instanceof three.Vector3) {
-            newScale = new three.Vector3().copy(args[0]);
+        if (args[0] instanceof webgpu.Vector3) {
+            newScale = new webgpu.Vector3().copy(args[0]);
         }
         if (typeof (args[0]) === "number" && typeof (args[1]) === "number" && typeof (args[2]) === "number") {
-            newScale = new three.Vector3(args[0], args[1], args[2]);
+            newScale = new webgpu.Vector3(args[0], args[1], args[2]);
         }
         if (!newScale) {
             return;
@@ -444,7 +444,7 @@ class SceneComponent extends Component {
         if (!this.threeObject) {
             throw Error("threeObject is invalid");
         }
-        let location = new three.Vector3();
+        let location = new webgpu.Vector3();
         this.threeObject.getWorldPosition(location);
         return location;
     }
@@ -453,16 +453,16 @@ class SceneComponent extends Component {
         if (!this.threeObject) {
             throw Error("threeObject is invalid");
         }
-        let rotation = new three.Quaternion();
+        let rotation = new webgpu.Quaternion();
         this.threeObject.getWorldQuaternion(rotation);
-        return new three.Euler().setFromQuaternion(rotation);
+        return new webgpu.Euler().setFromQuaternion(rotation);
     }
     // // rotation(quat)
     getWorldQuaternion() {
         if (!this.threeObject) {
             throw Error("threeObject is invalid");
         }
-        let rotation = new three.Quaternion();
+        let rotation = new webgpu.Quaternion();
         this.threeObject.getWorldQuaternion(rotation);
         return rotation;
     }
@@ -471,7 +471,7 @@ class SceneComponent extends Component {
         if (!this.threeObject) {
             throw Error("threeObject is invalid");
         }
-        let scale = new three.Vector3();
+        let scale = new webgpu.Vector3();
         this.threeObject.getWorldScale(scale);
         return scale;
     }
@@ -492,7 +492,7 @@ class SceneComponent extends Component {
             // 计算父对象的逆世界矩阵
             const parentInverseWorldMatrix = this.threeObject.parent.matrixWorld.clone().invert();
             // 计算物体的本地矩阵
-            const cLocalMatrix = new three.Matrix4().multiplyMatrices(parentInverseWorldMatrix, newMatrix);
+            const cLocalMatrix = new webgpu.Matrix4().multiplyMatrices(parentInverseWorldMatrix, newMatrix);
             // 更新物体的本地矩阵
             this.setMatrix(cLocalMatrix);
             // this.threeObject.matrix.copy(cLocalMatrix);
@@ -516,7 +516,7 @@ class SceneComponent extends Component {
         if (!this.threeObject) {
             throw Error("threeObject is invalid");
         }
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         this.threeObject.getWorldDirection(ret);
         return ret;
     }
@@ -524,7 +524,7 @@ class SceneComponent extends Component {
         if (!this.threeObject) {
             throw Error("threeObject is invalid");
         }
-        let ret = new three.Vector3(0, 1, 0);
+        let ret = new webgpu.Vector3(0, 1, 0);
         ret.applyQuaternion(this.getWorldQuaternion());
         return ret;
     }
@@ -532,7 +532,7 @@ class SceneComponent extends Component {
         if (!this.threeObject) {
             throw Error("threeObject is invalid");
         }
-        let ret = new three.Vector3(1, 0, 0);
+        let ret = new webgpu.Vector3(1, 0, 0);
         ret.applyQuaternion(this.getWorldQuaternion());
         return ret;
     }
@@ -711,12 +711,12 @@ class MeshComponent extends SceneComponent {
     }
     constructor(...args) {
         let newMesh = null;
-        if (args[0] instanceof three.Mesh) {
+        if (args[0] instanceof webgpu.Mesh) {
             newMesh = args[0];
         }
         else {
-            if (args[0] instanceof three.BufferGeometry && (args[1] instanceof three.Material || Array.isArray(args[1]))) {
-                newMesh = new three.Mesh(args[0], args[1]);
+            if (args[0] instanceof webgpu.BufferGeometry && (args[1] instanceof webgpu.Material || Array.isArray(args[1]))) {
+                newMesh = new webgpu.Mesh(args[0], args[1]);
             }
             else {
                 throw new Error('Invalid arguments for A constructor');
@@ -744,19 +744,19 @@ class MeshComponent extends SceneComponent {
         return this.threeObject ? this.threeObject.receiveShadow : false;
     }
     getBoundsCenterPosition() {
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         this.getBounds().getCenter(ret);
         return ret;
     }
     getBoundsTopCenterPosition() {
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         let bounds = this.getBounds();
         bounds.getCenter(ret);
         ret.y = bounds.max.y;
         return ret;
     }
     getBoundsBottomCenterPosition() {
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         let bounds = this.getBounds();
         bounds.getCenter(ret);
         ret.y = bounds.min.y;
@@ -769,9 +769,9 @@ class MeshComponent extends SceneComponent {
         let assetManager = LYAssetManager.Get();
         const mats = Array.isArray(this.material) ? this.material : [this.material];
         mats.forEach((material) => {
-            if (material instanceof three.Material) {
+            if (material instanceof webgpu.Material) {
                 Object.entries(material).forEach(([key, value]) => {
-                    if (value instanceof three.Texture) {
+                    if (value instanceof webgpu.Texture) {
                         assetManager.releaseAsset(value);
                         value = null;
                     }
@@ -780,7 +780,7 @@ class MeshComponent extends SceneComponent {
             }
         });
         this.material = [];
-        if (this.geometry instanceof three.BufferGeometry) {
+        if (this.geometry instanceof webgpu.BufferGeometry) {
             assetManager.releaseAsset(this.geometry);
             this.geometry = null;
         }
@@ -854,7 +854,7 @@ class LYAssetManager {
     constructor() {
         this.assetPointer = new Map();
         this.dracoLoader = null;
-        this.loadingManager = new three.LoadingManager();
+        this.loadingManager = new webgpu.LoadingManager();
         this.gltfLoader = new Addons_js.GLTFLoader(this.loadingManager);
     }
     get LoadingManager() {
@@ -922,7 +922,7 @@ class LYAssetManager {
             textures: new Map()
         };
         gltf.scene.traverse((child) => {
-            if (child.geometry && child.geometry instanceof three.BufferGeometry) {
+            if (child.geometry && child.geometry instanceof webgpu.BufferGeometry) {
                 countResource(resources.geometries, child.geometry);
             }
             if (child.material) {
@@ -931,7 +931,7 @@ class LYAssetManager {
                     if (mat) {
                         countResource(resources.materials, mat);
                         Object.entries(mat).forEach(([key, value]) => {
-                            if (value instanceof three.Texture) {
+                            if (value instanceof webgpu.Texture) {
                                 countResource(resources.textures, value);
                             }
                         });
@@ -966,7 +966,7 @@ class LYAssetManager {
                         this.addAsset(material);
                     }
                     Object.entries(material).forEach(([key, value]) => {
-                        if (value instanceof three.Texture) {
+                        if (value instanceof webgpu.Texture) {
                             if (!value.userData["assetPointer"]) {
                                 this.addAsset(value);
                             }
@@ -1010,7 +1010,7 @@ class LYAssetManager {
         this.gltfLoader.parse(data, path, onLoadFinished);
     }
     loadFile(filepath = '', onLoadFinished) {
-        const loader = new three.FileLoader();
+        const loader = new webgpu.FileLoader();
         loader.load(filepath, (data) => {
             onLoadFinished(data);
         });
@@ -1109,7 +1109,7 @@ class World {
     constructor(app) {
         this.actors = new Set();
         this.app = app;
-        this._scene = new three.Scene();
+        this._scene = new webgpu.Scene();
     }
     init() {
     }
@@ -1124,7 +1124,7 @@ class World {
         });
         this.actors.clear();
         this.scene.traverse((child) => {
-            if (child instanceof three.Mesh) {
+            if (child instanceof webgpu.Mesh) {
                 ThreeObjectLibrary.disposeMeshResource(child);
             }
         });
@@ -1147,13 +1147,13 @@ const DefaultToneMappingParams = {
     toneMapping: 'AgX',
 };
 const ToneMappingOptions = new Map([
-    ["None", three.NoToneMapping],
-    ["Linear", three.LinearToneMapping],
-    ["Reinhard", three.ReinhardToneMapping],
-    ["Cineon", three.CineonToneMapping],
-    ["ACESFilmic", three.ACESFilmicToneMapping],
-    ["AgX", three.AgXToneMapping],
-    ["Neutral", three.NeutralToneMapping]
+    ["None", webgpu.NoToneMapping],
+    ["Linear", webgpu.LinearToneMapping],
+    ["Reinhard", webgpu.ReinhardToneMapping],
+    ["Cineon", webgpu.CineonToneMapping],
+    ["ACESFilmic", webgpu.ACESFilmicToneMapping],
+    ["AgX", webgpu.AgXToneMapping],
+    ["Neutral", webgpu.NeutralToneMapping]
 ]);
 
 class WebGPUPostProcessFactory {
@@ -1755,8 +1755,8 @@ class Orbital extends Pawn {
     focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
         this.stopFocusing();
         let finalQuat = null;
-        if (targetQuat instanceof three.Euler) {
-            finalQuat = new three.Quaternion().setFromEuler(targetQuat);
+        if (targetQuat instanceof webgpu.Euler) {
+            finalQuat = new webgpu.Quaternion().setFromEuler(targetQuat);
         }
         else {
             finalQuat = targetQuat;
@@ -1765,20 +1765,20 @@ class Orbital extends Pawn {
             finalQuat = this.controller.camera.quaternion;
         }
         finalQuat.normalize();
-        let dir = new three.Vector3(0, 0, 1);
+        let dir = new webgpu.Vector3(0, 0, 1);
         dir.applyQuaternion(finalQuat).multiplyScalar(-1);
         dir.normalize();
         // quat
         // let startQuat = this.camera.quaternion.clone();
         // position
         let startPos = this.camera.position.clone();
-        let endPos = new three.Vector3(targetPos.x + dir.x * distance * -1, targetPos.y + dir.y * distance * -1, targetPos.z + dir.z * distance * -1);
-        let posDir = new three.Vector3().subVectors(endPos, startPos);
+        let endPos = new webgpu.Vector3(targetPos.x + dir.x * distance * -1, targetPos.y + dir.y * distance * -1, targetPos.z + dir.z * distance * -1);
+        let posDir = new webgpu.Vector3().subVectors(endPos, startPos);
         let movingLength = posDir.length();
         posDir.normalize();
         // target
         let startTarget = this.control.target.clone();
-        let targetDir = new three.Vector3().subVectors(targetPos, startTarget);
+        let targetDir = new webgpu.Vector3().subVectors(targetPos, startTarget);
         let targetDistance = targetDir.length();
         targetDir.normalize();
         // start animation
@@ -1793,8 +1793,8 @@ class Orbital extends Pawn {
             alpha: 1,
             onUpdate: () => {
                 let alpha = obj.alpha;
-                let camPos = new three.Vector3(startPos.x + posDir.x * alpha * movingLength, startPos.y + posDir.y * alpha * movingLength, startPos.z + posDir.z * alpha * movingLength);
-                let targetPos = new three.Vector3(startTarget.x + targetDir.x * alpha * targetDistance, startTarget.y + targetDir.y * alpha * targetDistance, startTarget.z + targetDir.z * alpha * targetDistance);
+                let camPos = new webgpu.Vector3(startPos.x + posDir.x * alpha * movingLength, startPos.y + posDir.y * alpha * movingLength, startPos.z + posDir.z * alpha * movingLength);
+                let targetPos = new webgpu.Vector3(startTarget.x + targetDir.x * alpha * targetDistance, startTarget.y + targetDir.y * alpha * targetDistance, startTarget.z + targetDir.z * alpha * targetDistance);
                 _this.control.object.position.copy(camPos);
                 _this.control.target.copy(targetPos);
                 _this.control.update();
@@ -1849,17 +1849,17 @@ class Controller {
         this.onPointerLeave = (event) => { this.onPointerLeaveEvent(event); };
         this.onPointerUp = (event) => { this.onPointerUpEvent(event); };
         this.onPointerDown = (event) => { this.onPointerDownEvent(event); };
-        this.pointerPosition = new three.Vector2();
+        this.pointerPosition = new webgpu.Vector2();
         this.doubleClickDelay = 250; // 双击判定时间间隔（毫秒）
         this.leftClickTimer = null;
-        this.pointerLeftDownPosition = new three.Vector2();
+        this.pointerLeftDownPosition = new webgpu.Vector2();
         this.hoveringComponent = null;
         this._pointButtonIsDown = new Set();
         this._onClickNothingDelegate = new Delegate();
         this.app = app;
         this._pawn = new Orbital(this);
         this.pawn.possess();
-        this.raycaster = new three.Raycaster();
+        this.raycaster = new webgpu.Raycaster();
         if (!this.viewPort.canvas) {
             throw Error("canvas is null");
         }
@@ -1898,7 +1898,7 @@ class Controller {
         const canvasRect = this.viewPort.canvas.getBoundingClientRect();
         const offsetX = canvasRect.left;
         const offsetY = canvasRect.top;
-        const pointer = new three.Vector2(((event.clientX - offsetX) / this.viewPort.canvas.clientWidth) * 2 - 1, 1 - ((event.clientY - offsetY) / this.viewPort.canvas.clientHeight) * 2);
+        const pointer = new webgpu.Vector2(((event.clientX - offsetX) / this.viewPort.canvas.clientWidth) * 2 - 1, 1 - ((event.clientY - offsetY) / this.viewPort.canvas.clientHeight) * 2);
         this.pointerPosition = pointer;
         if (this._pointButtonIsDown.size > 0) {
             return;
@@ -1923,7 +1923,7 @@ class Controller {
     onPointerUpEvent(event) {
         this._pointButtonIsDown.delete(event.button);
         if (event.button === 0) {
-            const pointerOffset = new three.Vector2().subVectors(this.pointerLeftDownPosition, this.pointerPosition).length();
+            const pointerOffset = new webgpu.Vector2().subVectors(this.pointerLeftDownPosition, this.pointerPosition).length();
             if (pointerOffset > 0.005) {
                 if (this.leftClickTimer) {
                     window.clearTimeout(this.leftClickTimer);
@@ -1988,7 +1988,7 @@ class Controller {
         return this.getHitResultFromScreenPoint(this.pointerPosition.x, this.pointerPosition.y);
     }
     getHitResultFromScreenPoint(x, y) {
-        this.raycaster.setFromCamera(new three.Vector2(x, y), this.camera);
+        this.raycaster.setFromCamera(new webgpu.Vector2(x, y), this.camera);
         let out = this.raycaster.intersectObjects(this.world.scene.children, true);
         for (let i = 0; i < out.length; i++) {
             if (out[i].object.userData["rayIgnored"]) {
@@ -2007,10 +2007,10 @@ class CameraFactory {
     static createCamera(param) {
         let cam = null;
         if ("fov" in param.param && "aspect" in param.param) {
-            cam = new three.PerspectiveCamera(param.param.fov, param.param.aspect, param.near, param.far);
+            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 three.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
+            cam = new webgpu.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
         }
         if (!cam) {
             console.error("create camera failed");
@@ -2021,7 +2021,7 @@ class CameraFactory {
     }
     static updataCamera(param, camera) {
         if ("fov" in param.param && "aspect" in param.param) {
-            if (camera instanceof three.PerspectiveCamera) {
+            if (camera instanceof webgpu.PerspectiveCamera) {
                 camera.near = param.near;
                 camera.far = param.far;
                 camera.fov = param.param.fov;
@@ -2029,11 +2029,11 @@ class CameraFactory {
                 return camera;
             }
             else {
-                return new three.PerspectiveCamera(param.param.fov, param.param.aspect, param.near, param.far);
+                return 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) {
-            if (camera instanceof three.OrthographicCamera) {
+            if (camera instanceof webgpu.OrthographicCamera) {
                 camera.near = param.near;
                 camera.far = param.far;
                 camera.left = param.param.left;
@@ -2043,7 +2043,7 @@ class CameraFactory {
                 return camera;
             }
             else {
-                return new three.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
+                return new webgpu.OrthographicCamera(param.param.left, param.param.right, param.param.top, param.param.bottom, param.near, param.far);
             }
         }
         return camera;
@@ -2105,7 +2105,7 @@ class ThreeJsApp {
         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._clock = new three.Clock();
+        this._clock = new webgpu.Clock();
         this._camera = CameraFactory.createCamera(this._appParam.cameraParam);
         this._world = new this.worldClass(this);
         this._viewport = new this.viewportClass(this, elementId, this._appParam.renderParam, this._appParam.postProcessParam);
@@ -2141,7 +2141,7 @@ class ThreeJsApp {
         this.viewport.markRenderStateDirty();
     }
     onWindowResize(width, height) {
-        if (this.camera instanceof three.PerspectiveCamera) {
+        if (this.camera instanceof webgpu.PerspectiveCamera) {
             this.camera.aspect = width / height;
         }
         // if(this.camera instanceof OrthographicCamera)
@@ -2216,7 +2216,7 @@ class Actor extends BaseObject {
         this.constructRootComponent(myThreeObject);
     }
     constructRootComponent(myThreeObject = null) {
-        let tObject = myThreeObject ? myThreeObject : new three.Group();
+        let tObject = myThreeObject ? myThreeObject : new webgpu.Group();
         if (tObject.isMesh) {
             let mesh = tObject;
             this._rootComponent = new MeshComponent(mesh);
@@ -2228,7 +2228,7 @@ class Actor extends BaseObject {
         }
     }
     getBoundsCenterPosition(bInWorldSpace = true) {
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         this.getBounds().getCenter(ret);
         if (!bInWorldSpace) {
             return ret.sub(this.getPosition());
@@ -2238,7 +2238,7 @@ class Actor extends BaseObject {
         }
     }
     getBoundsTopCenterPosition(bInWorldSpace = true) {
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         let bounds = this.rootComponent.getBounds();
         bounds.getCenter(ret);
         ret.y = bounds.max.y;
@@ -2250,7 +2250,7 @@ class Actor extends BaseObject {
         }
     }
     getBoundsBottomCenterPosition(bInWorldSpace = true) {
-        let ret = new three.Vector3();
+        let ret = new webgpu.Vector3();
         let bounds = this.getBounds();
         bounds.getCenter(ret);
         ret.y = bounds.min.y;
@@ -2582,7 +2582,7 @@ class DirectionalLightComponent extends LightComponent {
         this.threeObject.castShadow = value;
     }
     constructor(color = 0xffffff, intensity = 10) {
-        let obj = new three.DirectionalLight(color, intensity);
+        let obj = new webgpu.DirectionalLight(color, intensity);
         super(obj);
         this.obj = obj;
         obj.castShadow = true;
@@ -2614,28 +2614,101 @@ class DirectionalLightComponent extends LightComponent {
 class DirectionalLightActor extends Actor {
     constructor(color = 0xffffff, intensity = 1) {
         super();
-        this.lightComponent = new DirectionalLightComponent(color, intensity);
+        this.lightComponent = null;
+        this.lightComponent = this.rootComponent;
+        if (this.lightComponent) {
+            this.lightComponent.color = color;
+            this.lightComponent.intensity = intensity;
+        }
+        this.lightComponent.castShadow = true;
+    }
+    constructRootComponent() {
+        this.lightComponent = new DirectionalLightComponent();
         this.rootComponent = this.lightComponent;
         this.lightComponent.castShadow = true;
+        this.rootComponent.parentActor = this;
     }
 }
 
 class BoxComponent extends MeshComponent {
-    constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new three.MeshStandardMaterial()) {
-        super(new three.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material);
+    constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new webgpu.MeshStandardMaterial()) {
+        super(new webgpu.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material);
     }
 }
 
 class BoxActor extends Actor {
-    constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new three.MeshBasicMaterial()) {
+    constructor(width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new webgpu.MeshBasicMaterial()) {
         super();
         this.addComponent(new BoxComponent(width, height, depth, widthSegments, heightSegments, depthSegments, material));
     }
 }
 
+const DefaultSkyParam = {
+    turbidity: 10,
+    rayleigh: 2,
+    mieCoefficient: 0.005,
+    mieDirectionalG: 0.8,
+    elevation: 23.44,
+    azimuth: 135,
+};
+class SkyComponent extends SceneComponent {
+    get threeObject() {
+        if (!this.obj) {
+            throw Error("three object is invalid");
+        }
+        return this.obj;
+    }
+    set threeObject(newThreeObject) {
+        this.obj = newThreeObject;
+        if (this.obj) {
+            this.obj.userData["LYObject"] = this;
+        }
+    }
+    constructor(skyparam) {
+        let obj = new SkyMesh_js.SkyMesh();
+        super(obj);
+        this.skyParam = DefaultSkyParam;
+        this.sunPosition = new webgpu.Vector3();
+        this.obj = obj;
+        this.name = "SkyComponent";
+        if (skyparam) {
+            this.skyParam = skyparam;
+        }
+        this.updateSky();
+    }
+    updateSky() {
+        var _a, _b;
+        this.threeObject.turbidity.value = this.skyParam.turbidity;
+        this.threeObject.rayleigh.value = this.skyParam.rayleigh;
+        this.threeObject.mieCoefficient.value = this.skyParam.mieCoefficient;
+        this.threeObject.mieDirectionalG.value = this.skyParam.mieDirectionalG;
+        const phi = webgpu.MathUtils.degToRad(90 - this.skyParam.elevation);
+        const theta = webgpu.MathUtils.degToRad(this.skyParam.azimuth);
+        this.sunPosition.setFromSphericalCoords(1, phi, theta);
+        this.threeObject.sunPosition.value.copy(this.sunPosition);
+        (_b = (_a = this.world) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.markRenderStateDirty();
+    }
+}
+
+class SkyActor extends Actor {
+    constructor() {
+        super();
+        this._name = "SkyActor";
+        this.skyComponent = null;
+        this.name = "DirectionalLightActor";
+        this.skyComponent = this.rootComponent;
+        this.rootComponent.name = `${this.rootComponent.name}(Root)`;
+    }
+    constructRootComponent() {
+        this.skyComponent = new SkyComponent();
+        this.rootComponent = this.skyComponent;
+        this.rootComponent.parentActor = this;
+    }
+}
+
 class PlaneComponent extends MeshComponent {
     constructor(width, height, material, widthSegments = 1, heightSegments = 1) {
-        super(new three.PlaneGeometry(width, height, widthSegments, heightSegments), material);
+        super(new webgpu.PlaneGeometry(width, height, widthSegments, heightSegments), material);
     }
 }
 
@@ -2643,7 +2716,7 @@ class PlaneActor extends Actor {
     get planeComponent() {
         return this._planeComponent;
     }
-    constructor(width, height, material = new three.MeshBasicMaterial(), widthSegments = 1, heightSegments = 1) {
+    constructor(width, height, material = new webgpu.MeshBasicMaterial(), widthSegments = 1, heightSegments = 1) {
         super();
         this._planeComponent = new PlaneComponent(width, height, material, widthSegments, heightSegments);
         this._planeComponent.setRotation(Math.PI * 0.5 * -1, 0, 0);
@@ -2658,44 +2731,9 @@ class PlaneActor extends Actor {
     }
 }
 
-const DefaultBloomParam = {
-    threshold: 0,
-    strength: 1,
-    radius: 0,
-};
-
-const DefaultDenoiseParam = {
-    denoiseRadius: 5,
-    lumaPhi: 5,
-    depthPhi: 5,
-    normalPhi: 5
-};
-
-const DefaultDOFParam = {
-    focus: 500.0,
-    aperture: 5,
-    maxblur: 0.01
-};
-
-const DefaultGTAOParam = {
-    distanceExponent: 1,
-    distanceFallOff: 1,
-    radius: 0.25,
-    scale: 1,
-    thickness: 1,
-    denoised: true,
-    denoiseParam: DefaultDenoiseParam,
-};
-
-const DefaultSSRParam = {
-    maxDistance: 0.5,
-    opacity: 1,
-    thickness: 0.015,
-};
-
 class SphereComponent extends MeshComponent {
-    constructor(radius, material = new three.MeshBasicMaterial(), widthSegments = 32, heightSegments = 16) {
-        super(new three.SphereGeometry(radius, widthSegments, heightSegments), material);
+    constructor(radius, material = new webgpu.MeshBasicMaterial(), widthSegments = 32, heightSegments = 16) {
+        super(new webgpu.SphereGeometry(radius, widthSegments, heightSegments), material);
     }
 }
 
@@ -2709,7 +2747,7 @@ class LabelComponent extends SceneComponent {
             this.obj.userData["LYObject"] = this;
         }
     }
-    constructor(domElement, center = new three.Vector2(0.5, 1)) {
+    constructor(domElement, center = new webgpu.Vector2(0.5, 1)) {
         let obj = new CSS2DRenderer_js.CSS2DObject(domElement);
         super(obj);
         this.obj = obj;
@@ -2742,6 +2780,41 @@ class LabelComponent extends SceneComponent {
 // labelStyle.style.fontSize        = "10px";
 // labelStyle.style.pointerEvents   = 'auto';
 
+const DefaultBloomParam = {
+    threshold: 0,
+    strength: 1,
+    radius: 0,
+};
+
+const DefaultDenoiseParam = {
+    denoiseRadius: 5,
+    lumaPhi: 5,
+    depthPhi: 5,
+    normalPhi: 5
+};
+
+const DefaultDOFParam = {
+    focus: 500.0,
+    aperture: 5,
+    maxblur: 0.01
+};
+
+const DefaultGTAOParam = {
+    distanceExponent: 1,
+    distanceFallOff: 1,
+    radius: 0.25,
+    scale: 1,
+    thickness: 1,
+    denoised: true,
+    denoiseParam: DefaultDenoiseParam,
+};
+
+const DefaultSSRParam = {
+    maxDistance: 0.5,
+    opacity: 1,
+    thickness: 0.015,
+};
+
 class FirstPerson extends Pawn {
     constructor(controller) {
         super(controller);
@@ -2759,7 +2832,7 @@ class TransformGizmo extends Pawn {
     constructor(controller) {
         super(controller);
         this._control = null;
-        this.helperObject = new three.Object3D();
+        this.helperObject = new webgpu.Object3D();
         this.targets = [];
         this.primaryTarget = null;
         this.targetMatrixMap = new Map();
@@ -2833,7 +2906,7 @@ class TransformGizmo extends Pawn {
                 if (tar !== this.primaryTarget) {
                     let t = this.targetMatrixMap.get(tar);
                     if (t) {
-                        let TB2 = new three.Matrix4().multiplyMatrices(TA2, t); // B 
+                        let TB2 = new webgpu.Matrix4().multiplyMatrices(TA2, t); // B 
                         tar.onTransforming(TB2);
                     }
                 }
@@ -2916,6 +2989,7 @@ exports.DefaultOutlineParams = DefaultOutlineParams;
 exports.DefaultPostProcessParam = DefaultPostProcessParam;
 exports.DefaultRenderParam = DefaultRenderParam;
 exports.DefaultSSRParam = DefaultSSRParam;
+exports.DefaultSkyParam = DefaultSkyParam;
 exports.DefaultToneMappingParams = DefaultToneMappingParams;
 exports.Delegate = Delegate;
 exports.DirectionalLightActor = DirectionalLightActor;
@@ -2929,6 +3003,8 @@ exports.Orbital = Orbital;
 exports.PlaneActor = PlaneActor;
 exports.PlaneComponent = PlaneComponent;
 exports.SceneComponent = SceneComponent;
+exports.SkyActor = SkyActor;
+exports.SkyComponent = SkyComponent;
 exports.SphereComponent = SphereComponent;
 exports.ThreeJsApp = ThreeJsApp;
 exports.ThreeObjectLibrary = ThreeObjectLibrary;