lythreeframe 1.2.49 → 1.2.50

package/dist/bundle.cjs.js

@@ -1575,7 +1575,7 @@ class Viewport {
             this.setupPostProcess();
         });
     }
-    createRenderer(rendererParam) {
+    async createRenderer(rendererParam) {
         if (this._outerContainer) {
             this._canvasContainer = document.createElement("div");
             this._canvasContainer.style.left = "0px";
@@ -1616,6 +1616,8 @@ class Viewport {
         }
         else {
             this._renderer = new webgpu.WebGPURenderer(renderP);
+            // WebGPU 需要异步初始化
+            await this._renderer.init();
             this._renderer.setPixelRatio(window.devicePixelRatio);
             this._renderer.setSize(width, height);
             this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
@@ -1756,7 +1758,7 @@ class Viewport {
             return;
         }
         if (this.postProcessing) {
-            this.postProcessing.render();
+            this.postProcessing.renderAsync();
         }
         else {
             this.renderer.render(this.app.world.scene, this.app.camera);
@@ -2088,13 +2090,7 @@ class Controller {
         this.pawn.enabled = isPawnEnabled;
     }
     init() {
-        if (this.viewPort.canvas) {
-            this.viewPort.canvas.addEventListener("pointermove", this.onPointerMove);
-            this.viewPort.canvas.addEventListener("pointerenter", this.onPointerEnter);
-            this.viewPort.canvas.addEventListener("pointerleave", this.onPointerLeave);
-            this.viewPort.canvas.addEventListener("pointerup", this.onPointerUp);
-            this.viewPort.canvas.addEventListener("pointerdown", this.onPointerDown);
-        }
+        if (this.viewPort.canvas) ;
     }
     tick(deltaTime) {
         this.pawn.tick(deltaTime);
@@ -2104,13 +2100,7 @@ class Controller {
             clearTimeout(this.leftClickTimer);
             this.leftClickTimer = null;
         }
-        if (this.viewPort.canvas) {
-            this.viewPort.canvas.removeEventListener("pointermove", this.onPointerMove);
-            this.viewPort.canvas.removeEventListener("pointerenter", this.onPointerEnter);
-            this.viewPort.canvas.removeEventListener("pointerleave", this.onPointerLeave);
-            this.viewPort.canvas.removeEventListener("pointerup", this.onPointerUp);
-            this.viewPort.canvas.removeEventListener("pointerdown", this.onPointerDown);
-        }
+        if (this.viewPort.canvas) ;
         this.pawn.unpossess();
         this.pawn.destroy();
         this._pawn = null;
@@ -2265,7 +2255,7 @@ class CameraFactory {
         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 new webgpu.PerspectiveCamera(50, 1, 0.1, 100000);
         }
     }
     static updataCamera(param, camera) {
@@ -2279,6 +2269,7 @@ class CameraFactory {
                             camera.far = data.far;
                             camera.fov = data.fov;
                             camera.aspect = data.aspect;
+                            camera.updateProjectionMatrix();
                             return camera;
                         }
                         return new webgpu.PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
@@ -2293,6 +2284,7 @@ class CameraFactory {
                             camera.right = data.right;
                             camera.top = data.top;
                             camera.bottom = data.bottom;
+                            camera.updateProjectionMatrix();
                             return camera;
                         }
                         return new webgpu.OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
@@ -2313,7 +2305,7 @@ class CameraFactory {
 
 const DefaultPerspectiveCameraParam = {
     near: 0.1,
-    far: 1000,
+    far: 10000,
     type: "Perspective",
     fov: 50,
     aspect: 1,
@@ -2845,7 +2837,14 @@ const DefaultWorldParam = {
     levelActorClass: LevelActor,
 };
 
+/** 动画循环启动延迟时间（毫秒） */
+const ANIMATION_START_DELAY = 100;
+/**
+ * Three.js应用程序主类
+ * 负责管理场景、视口、控制器和资源
+ */
 class ThreeJsApp {
+    // ========== 公共访问器 ==========
     get camera() {
         return this._camera;
     }
@@ -2870,67 +2869,132 @@ class ThreeJsApp {
     get onCameraChangedDelegate() {
         return this._onCameraChangedDelegate;
     }
+    /**
+     * 构造ThreeJs应用程序实例
+     * @param appParam 应用程序参数配置
+     */
     constructor(appParam = DefaultAppParam) {
+        var _a, _b, _c, _d, _e, _f;
+        // ========== 私有字段 ==========
+        this.animationFrameHandle = 0;
         this._tickingFunctions = [];
         this._appParam = { viewportParam: DefaultViewportParam };
         this._onCameraChangedDelegate = new Delegate();
-        this._appParam.cameraParam = appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam;
-        this._appParam.renderParam = appParam.renderParam ? appParam.renderParam : DefaultRendererParameters;
-        this._appParam.postProcessParam = appParam.postProcessParam ? appParam.postProcessParam : DefaultPostProcessParam;
-        this._appParam.viewportParam = appParam.viewportParam ? appParam.viewportParam : DefaultViewportParam;
-        this._appParam.classes = appParam.classes ? appParam.classes : {
+        // 初始化应用参数（使用空值合并运算符简化默认值处理）
+        this._appParam.cameraParam = (_a = appParam.cameraParam) !== null && _a !== void 0 ? _a : DefaultCameraParam;
+        this._appParam.renderParam = (_b = appParam.renderParam) !== null && _b !== void 0 ? _b : DefaultRendererParameters;
+        this._appParam.postProcessParam = (_c = appParam.postProcessParam) !== null && _c !== void 0 ? _c : DefaultPostProcessParam;
+        this._appParam.viewportParam = (_d = appParam.viewportParam) !== null && _d !== void 0 ? _d : DefaultViewportParam;
+        this._appParam.worldParam = (_e = appParam.worldParam) !== null && _e !== void 0 ? _e : DefaultWorldParam;
+        this._appParam.isRenderEveryFrame = appParam.isRenderEveryFrame;
+        this._appParam.classes = (_f = appParam.classes) !== null && _f !== void 0 ? _f : {
             assetManagerClass: AssetManager,
             controllerClass: Controller,
             worldClass: World,
             viewportClass: Viewport,
         };
-        this._appParam.isRenderEveryFrame = appParam.isRenderEveryFrame;
+        // 初始化核心组件
         this._clock = new webgpu.Clock();
         this._camera = CameraFactory.createCamera(this._appParam.cameraParam);
-        this._world = new this._appParam.classes.worldClass(this, this._appParam.worldParam ? this._appParam.worldParam : DefaultWorldParam);
+        this._world = new this._appParam.classes.worldClass(this, this._appParam.worldParam);
         this._viewport = new this._appParam.classes.viewportClass(this, this._appParam.viewportParam, this._appParam.renderParam, this._appParam.postProcessParam);
         this._controller = new this._appParam.classes.controllerClass(this);
         this._assetManager = new this._appParam.classes.assetManagerClass(this);
-        this.viewport.renderer.setAnimationLoop(() => {
-            const delta = this._clock.getDelta();
-            this.tick(delta);
-        });
         this.postConstruct();
+        this.startAnimationLoop();
     }
+    /**
+     * 构造后初始化钩子
+     * 按顺序初始化控制器、世界和视口
+     */
     postConstruct() {
         this.controller.init();
         this.world.init();
         this.viewport.init();
     }
+    /**
+     * 公共初始化方法
+     * 可由子类重写以添加自定义初始化逻辑
+     */
     init() {
-    }
+        // 预留给子类实现
+    }
+    /**
+     * 启动动画循环
+     * 使用延迟启动以确保所有组件完全初始化
+     */
+    startAnimationLoop() {
+        const tick = () => {
+            this.animationFrameHandle = requestAnimationFrame(tick);
+            try {
+                const delta = this._clock.getDelta();
+                this.tick(delta);
+            }
+            catch (error) {
+                console.error('动画循环错误:', error);
+            }
+        };
+        setTimeout(() => {
+            tick();
+        }, ANIMATION_START_DELAY);
+    }
+    /**
+     * 每帧更新方法
+     * @param deltaTime 距离上一帧的时间增量（秒）
+     */
     tick(deltaTime) {
         this._controller.tick(deltaTime);
         this.world.tick(deltaTime);
+        // 执行所有注册的tick函数
         this._tickingFunctions.forEach(func => {
             func(deltaTime);
         });
+        // 根据配置决定是否每帧都渲染
         if (this._appParam.isRenderEveryFrame) {
             this.viewport.markRenderStateDirty();
         }
         this.viewport.render();
     }
+    /**
+     * 添加每帧执行的函数
+     * @param func 接收deltaTime参数的回调函数
+     */
     addTickingFunction(func) {
         this._tickingFunctions.push(func);
     }
+    /**
+     * 移除已注册的tick函数
+     * @param func 要移除的函数引用
+     */
     removeTickingFunction(func) {
         const index = this._tickingFunctions.indexOf(func);
         if (index >= 0) {
             this._tickingFunctions.splice(index, 1);
         }
     }
+    /**
+     * 销毁应用程序并清理所有资源
+     */
     destroy() {
+        // 停止动画循环
+        if (this.animationFrameHandle) {
+            cancelAnimationFrame(this.animationFrameHandle);
+            this.animationFrameHandle = 0;
+        }
+        // 清理委托
         this.onCameraChangedDelegate.clear();
+        // 销毁各个组件
         this.controller.destroy();
         this.world.destroy();
         this.viewport.destroy();
         this._assetManager.clearAssets();
+        // 清空tick函数列表
+        this._tickingFunctions = [];
     }
+    /**
+     * 更新相机参数
+     * @param param 新的相机参数
+     */
     updateCamera(param) {
         const previousCam = this.camera;
         this._camera = CameraFactory.updataCamera(param, this.camera);
@@ -2941,16 +3005,31 @@ class ThreeJsApp {
         this._camera.updateProjectionMatrix();
         this.viewport.markRenderStateDirty();
     }
+    /**
+     * 窗口大小改变时的处理
+     * @param width 新的宽度
+     * @param height 新的高度
+     */
     onWindowResize(width, height) {
         if (this.camera instanceof webgpu.PerspectiveCamera) {
             this.camera.aspect = width / height;
         }
-        // if(this.camera instanceof OrthographicCamera)
-        // {
-        //     // to do
+        // TODO: 实现正交相机的窗口缩放处理
+        // if (this.camera instanceof OrthographicCamera) {
+        //     const aspect = width / height;
+        //     this.camera.left = -width / 2;
+        //     this.camera.right = width / 2;
+        //     this.camera.top = height / 2;
+        //     this.camera.bottom = -height / 2;
         // }
         this.camera.updateProjectionMatrix();
     }
+    /**
+     * 将当前场景渲染为图片
+     * @param width 图片宽度，默认1024
+     * @param height 图片高度，默认1024
+     * @returns 图片的DataURL
+     */
     async renderAsImage(width = 1024, height = 1024) {
         return await this.viewport.renderAsImage(width, height);
     }
@@ -3273,6 +3352,120 @@ class LabelComponent extends SceneComponent {
 // labelStyle.style.fontSize        = "10px";
 // labelStyle.style.pointerEvents   = 'auto';
 
+class CurveComponent extends SceneComponent {
+    get threeObject() {
+        if (!this.obj) {
+            throw new Error("threeObject is null");
+        }
+        return this.obj;
+    }
+    set threeObject(newThreeObject) {
+        this.obj = newThreeObject;
+        if (this.obj) {
+            this.obj.userData["LYObject"] = this;
+        }
+    }
+    get material() {
+        return this.threeObject.material;
+    }
+    constructor(app, points, setup = { color: 0xffffff }, bCreateLine = true, uuid) {
+        var _a, _b, _c;
+        super(app, uuid);
+        this.closed = (_a = setup.closed) !== null && _a !== void 0 ? _a : false;
+        this.curveType = (_b = setup.type) !== null && _b !== void 0 ? _b : 'centripetal';
+        this.tension = (_c = setup.tension) !== null && _c !== void 0 ? _c : 0;
+        this.sourcePoints = points;
+        this.curve = new three.CatmullRomCurve3(points, this.closed, this.curveType, this.tension);
+        this.points = this.curve.getPoints(points.length * (this.tension === 0 ? 1 : 10) - 1);
+        this.material.color = new three.Color(setup.color);
+        this.bCreateLine = bCreateLine;
+        this.name = "CurveComponent";
+        if (this.bCreateLine) {
+            this.createLine();
+        }
+    }
+    isValid() {
+        return this.threeObject != null;
+    }
+    createDefaultObject() {
+        // 创建默认材质
+        const material = new three.LineBasicMaterial({
+            color: 0xffffff,
+            transparent: true,
+            opacity: 1
+        });
+        // 创建空的几何体和线对象
+        const geometry = new three.BufferGeometry();
+        const line = new three.Line(geometry, material);
+        return line;
+    }
+    resetPoints(points) {
+        this.sourcePoints = points;
+        this.curve = new three.CatmullRomCurve3(points, this.closed, this.curveType, this.tension);
+        this.points = this.curve.getPoints(points.length * (this.tension === 0 ? 1 : 10) - 1);
+        if (this.bCreateLine) {
+            this.createLine();
+        }
+    }
+    createLine() {
+        const positions = [];
+        for (let i = 0; i < this.points.length; ++i) {
+            positions.push(this.points[i].x);
+            positions.push(this.points[i].y);
+            positions.push(this.points[i].z);
+        }
+        const geometry = this.threeObject.geometry;
+        geometry.setAttribute('position', new three.Float32BufferAttribute(positions, 3));
+    }
+    destroy() {
+        if (this.isValid() && this.threeObject) {
+            if (this.threeObject.geometry) {
+                this.threeObject.geometry.dispose();
+            }
+            if (this.material) {
+                this.material.dispose();
+            }
+        }
+        super.destroy();
+    }
+    get SourcePoints() {
+        return this.sourcePoints;
+    }
+    get Curve() {
+        return this.curve;
+    }
+    get Points() {
+        return this.points;
+    }
+    getPointAt(u) {
+        return this.curve.getPointAt(u);
+    }
+    getTangentAt(u) {
+        return this.curve.getTangentAt(u);
+    }
+    // 返回曲线在参数 u 处的世界坐标点
+    getWorldPointAt(u) {
+        const p = this.curve.getPointAt(u).clone();
+        if (this.obj) {
+            this.obj.updateMatrixWorld(true);
+            return this.localToWorld(p);
+        }
+        return p;
+    }
+    // 返回曲线在参数 u 处的世界坐标系下的单位切线方向
+    getWorldTangentAt(u) {
+        const t = this.curve.getTangentAt(u).clone();
+        if (this.obj) {
+            this.obj.updateMatrixWorld(true);
+            t.transformDirection(this.obj.matrixWorld);
+        }
+        return t;
+    }
+    getLength() {
+        return this.curve.getLength();
+    }
+}
+
 const DefaultBloomParam = {
     type: exports.PostProcessStepType.Bloom,
     threshold: 0,
@@ -3554,6 +3747,7 @@ exports.AssetManager = AssetManager;
 exports.BoxActor = BoxActor;
 exports.BoxComponent = BoxComponent;
 exports.Controller = Controller;
+exports.CurveComponent = CurveComponent;
 exports.DefaultAAParams = DefaultAAParams;
 exports.DefaultAppParam = DefaultAppParam;
 exports.DefaultBloomParam = DefaultBloomParam;

package/dist/bundle.esm.js

@@ -1,7 +1,7 @@
 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 } from 'three/tsl';
-import { WebGLRenderer, PCFSoftShadowMap, Scene, AmbientLight } from 'three';
+import { WebGLRenderer, PCFSoftShadowMap, Scene, AmbientLight, CatmullRomCurve3, Color, LineBasicMaterial, BufferGeometry as BufferGeometry$1, Line, Float32BufferAttribute } 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';
@@ -1573,7 +1573,7 @@ class Viewport {
             this.setupPostProcess();
         });
     }
-    createRenderer(rendererParam) {
+    async createRenderer(rendererParam) {
         if (this._outerContainer) {
             this._canvasContainer = document.createElement("div");
             this._canvasContainer.style.left = "0px";
@@ -1614,6 +1614,8 @@ class Viewport {
         }
         else {
             this._renderer = new WebGPURenderer(renderP);
+            // WebGPU 需要异步初始化
+            await this._renderer.init();
             this._renderer.setPixelRatio(window.devicePixelRatio);
             this._renderer.setSize(width, height);
             this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
@@ -1754,7 +1756,7 @@ class Viewport {
             return;
         }
         if (this.postProcessing) {
-            this.postProcessing.render();
+            this.postProcessing.renderAsync();
         }
         else {
             this.renderer.render(this.app.world.scene, this.app.camera);
@@ -2086,13 +2088,7 @@ class Controller {
         this.pawn.enabled = isPawnEnabled;
     }
     init() {
-        if (this.viewPort.canvas) {
-            this.viewPort.canvas.addEventListener("pointermove", this.onPointerMove);
-            this.viewPort.canvas.addEventListener("pointerenter", this.onPointerEnter);
-            this.viewPort.canvas.addEventListener("pointerleave", this.onPointerLeave);
-            this.viewPort.canvas.addEventListener("pointerup", this.onPointerUp);
-            this.viewPort.canvas.addEventListener("pointerdown", this.onPointerDown);
-        }
+        if (this.viewPort.canvas) ;
     }
     tick(deltaTime) {
         this.pawn.tick(deltaTime);
@@ -2102,13 +2098,7 @@ class Controller {
             clearTimeout(this.leftClickTimer);
             this.leftClickTimer = null;
         }
-        if (this.viewPort.canvas) {
-            this.viewPort.canvas.removeEventListener("pointermove", this.onPointerMove);
-            this.viewPort.canvas.removeEventListener("pointerenter", this.onPointerEnter);
-            this.viewPort.canvas.removeEventListener("pointerleave", this.onPointerLeave);
-            this.viewPort.canvas.removeEventListener("pointerup", this.onPointerUp);
-            this.viewPort.canvas.removeEventListener("pointerdown", this.onPointerDown);
-        }
+        if (this.viewPort.canvas) ;
         this.pawn.unpossess();
         this.pawn.destroy();
         this._pawn = null;
@@ -2263,7 +2253,7 @@ class CameraFactory {
         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 new PerspectiveCamera(50, 1, 0.1, 100000);
         }
     }
     static updataCamera(param, camera) {
@@ -2277,6 +2267,7 @@ class CameraFactory {
                             camera.far = data.far;
                             camera.fov = data.fov;
                             camera.aspect = data.aspect;
+                            camera.updateProjectionMatrix();
                             return camera;
                         }
                         return new PerspectiveCamera(data.fov, data.aspect, data.near, data.far);
@@ -2291,6 +2282,7 @@ class CameraFactory {
                             camera.right = data.right;
                             camera.top = data.top;
                             camera.bottom = data.bottom;
+                            camera.updateProjectionMatrix();
                             return camera;
                         }
                         return new OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far);
@@ -2311,7 +2303,7 @@ class CameraFactory {
 
 const DefaultPerspectiveCameraParam = {
     near: 0.1,
-    far: 1000,
+    far: 10000,
     type: "Perspective",
     fov: 50,
     aspect: 1,
@@ -2843,7 +2835,14 @@ const DefaultWorldParam = {
     levelActorClass: LevelActor,
 };
 
+/** 动画循环启动延迟时间（毫秒） */
+const ANIMATION_START_DELAY = 100;
+/**
+ * Three.js应用程序主类
+ * 负责管理场景、视口、控制器和资源
+ */
 class ThreeJsApp {
+    // ========== 公共访问器 ==========
     get camera() {
         return this._camera;
     }
@@ -2868,67 +2867,132 @@ class ThreeJsApp {
     get onCameraChangedDelegate() {
         return this._onCameraChangedDelegate;
     }
+    /**
+     * 构造ThreeJs应用程序实例
+     * @param appParam 应用程序参数配置
+     */
     constructor(appParam = DefaultAppParam) {
+        var _a, _b, _c, _d, _e, _f;
+        // ========== 私有字段 ==========
+        this.animationFrameHandle = 0;
         this._tickingFunctions = [];
         this._appParam = { viewportParam: DefaultViewportParam };
         this._onCameraChangedDelegate = new Delegate();
-        this._appParam.cameraParam = appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam;
-        this._appParam.renderParam = appParam.renderParam ? appParam.renderParam : DefaultRendererParameters;
-        this._appParam.postProcessParam = appParam.postProcessParam ? appParam.postProcessParam : DefaultPostProcessParam;
-        this._appParam.viewportParam = appParam.viewportParam ? appParam.viewportParam : DefaultViewportParam;
-        this._appParam.classes = appParam.classes ? appParam.classes : {
+        // 初始化应用参数（使用空值合并运算符简化默认值处理）
+        this._appParam.cameraParam = (_a = appParam.cameraParam) !== null && _a !== void 0 ? _a : DefaultCameraParam;
+        this._appParam.renderParam = (_b = appParam.renderParam) !== null && _b !== void 0 ? _b : DefaultRendererParameters;
+        this._appParam.postProcessParam = (_c = appParam.postProcessParam) !== null && _c !== void 0 ? _c : DefaultPostProcessParam;
+        this._appParam.viewportParam = (_d = appParam.viewportParam) !== null && _d !== void 0 ? _d : DefaultViewportParam;
+        this._appParam.worldParam = (_e = appParam.worldParam) !== null && _e !== void 0 ? _e : DefaultWorldParam;
+        this._appParam.isRenderEveryFrame = appParam.isRenderEveryFrame;
+        this._appParam.classes = (_f = appParam.classes) !== null && _f !== void 0 ? _f : {
             assetManagerClass: AssetManager,
             controllerClass: Controller,
             worldClass: World,
             viewportClass: Viewport,
         };
-        this._appParam.isRenderEveryFrame = appParam.isRenderEveryFrame;
+        // 初始化核心组件
         this._clock = new Clock();
         this._camera = CameraFactory.createCamera(this._appParam.cameraParam);
-        this._world = new this._appParam.classes.worldClass(this, this._appParam.worldParam ? this._appParam.worldParam : DefaultWorldParam);
+        this._world = new this._appParam.classes.worldClass(this, this._appParam.worldParam);
         this._viewport = new this._appParam.classes.viewportClass(this, this._appParam.viewportParam, this._appParam.renderParam, this._appParam.postProcessParam);
         this._controller = new this._appParam.classes.controllerClass(this);
         this._assetManager = new this._appParam.classes.assetManagerClass(this);
-        this.viewport.renderer.setAnimationLoop(() => {
-            const delta = this._clock.getDelta();
-            this.tick(delta);
-        });
         this.postConstruct();
+        this.startAnimationLoop();
     }
+    /**
+     * 构造后初始化钩子
+     * 按顺序初始化控制器、世界和视口
+     */
     postConstruct() {
         this.controller.init();
         this.world.init();
         this.viewport.init();
     }
+    /**
+     * 公共初始化方法
+     * 可由子类重写以添加自定义初始化逻辑
+     */
     init() {
-    }
+        // 预留给子类实现
+    }
+    /**
+     * 启动动画循环
+     * 使用延迟启动以确保所有组件完全初始化
+     */
+    startAnimationLoop() {
+        const tick = () => {
+            this.animationFrameHandle = requestAnimationFrame(tick);
+            try {
+                const delta = this._clock.getDelta();
+                this.tick(delta);
+            }
+            catch (error) {
+                console.error('动画循环错误:', error);
+            }
+        };
+        setTimeout(() => {
+            tick();
+        }, ANIMATION_START_DELAY);
+    }
+    /**
+     * 每帧更新方法
+     * @param deltaTime 距离上一帧的时间增量（秒）
+     */
     tick(deltaTime) {
         this._controller.tick(deltaTime);
         this.world.tick(deltaTime);
+        // 执行所有注册的tick函数
         this._tickingFunctions.forEach(func => {
             func(deltaTime);
         });
+        // 根据配置决定是否每帧都渲染
         if (this._appParam.isRenderEveryFrame) {
             this.viewport.markRenderStateDirty();
         }
         this.viewport.render();
     }
+    /**
+     * 添加每帧执行的函数
+     * @param func 接收deltaTime参数的回调函数
+     */
     addTickingFunction(func) {
         this._tickingFunctions.push(func);
     }
+    /**
+     * 移除已注册的tick函数
+     * @param func 要移除的函数引用
+     */
     removeTickingFunction(func) {
         const index = this._tickingFunctions.indexOf(func);
         if (index >= 0) {
             this._tickingFunctions.splice(index, 1);
         }
     }
+    /**
+     * 销毁应用程序并清理所有资源
+     */
     destroy() {
+        // 停止动画循环
+        if (this.animationFrameHandle) {
+            cancelAnimationFrame(this.animationFrameHandle);
+            this.animationFrameHandle = 0;
+        }
+        // 清理委托
         this.onCameraChangedDelegate.clear();
+        // 销毁各个组件
         this.controller.destroy();
         this.world.destroy();
         this.viewport.destroy();
         this._assetManager.clearAssets();
+        // 清空tick函数列表
+        this._tickingFunctions = [];
     }
+    /**
+     * 更新相机参数
+     * @param param 新的相机参数
+     */
     updateCamera(param) {
         const previousCam = this.camera;
         this._camera = CameraFactory.updataCamera(param, this.camera);
@@ -2939,16 +3003,31 @@ class ThreeJsApp {
         this._camera.updateProjectionMatrix();
         this.viewport.markRenderStateDirty();
     }
+    /**
+     * 窗口大小改变时的处理
+     * @param width 新的宽度
+     * @param height 新的高度
+     */
     onWindowResize(width, height) {
         if (this.camera instanceof PerspectiveCamera) {
             this.camera.aspect = width / height;
         }
-        // if(this.camera instanceof OrthographicCamera)
-        // {
-        //     // to do
+        // TODO: 实现正交相机的窗口缩放处理
+        // if (this.camera instanceof OrthographicCamera) {
+        //     const aspect = width / height;
+        //     this.camera.left = -width / 2;
+        //     this.camera.right = width / 2;
+        //     this.camera.top = height / 2;
+        //     this.camera.bottom = -height / 2;
         // }
         this.camera.updateProjectionMatrix();
     }
+    /**
+     * 将当前场景渲染为图片
+     * @param width 图片宽度，默认1024
+     * @param height 图片高度，默认1024
+     * @returns 图片的DataURL
+     */
     async renderAsImage(width = 1024, height = 1024) {
         return await this.viewport.renderAsImage(width, height);
     }
@@ -3271,6 +3350,120 @@ class LabelComponent extends SceneComponent {
 // labelStyle.style.fontSize        = "10px";
 // labelStyle.style.pointerEvents   = 'auto';
 
+class CurveComponent extends SceneComponent {
+    get threeObject() {
+        if (!this.obj) {
+            throw new Error("threeObject is null");
+        }
+        return this.obj;
+    }
+    set threeObject(newThreeObject) {
+        this.obj = newThreeObject;
+        if (this.obj) {
+            this.obj.userData["LYObject"] = this;
+        }
+    }
+    get material() {
+        return this.threeObject.material;
+    }
+    constructor(app, points, setup = { color: 0xffffff }, bCreateLine = true, uuid) {
+        var _a, _b, _c;
+        super(app, uuid);
+        this.closed = (_a = setup.closed) !== null && _a !== void 0 ? _a : false;
+        this.curveType = (_b = setup.type) !== null && _b !== void 0 ? _b : 'centripetal';
+        this.tension = (_c = setup.tension) !== null && _c !== void 0 ? _c : 0;
+        this.sourcePoints = points;
+        this.curve = new CatmullRomCurve3(points, this.closed, this.curveType, this.tension);
+        this.points = this.curve.getPoints(points.length * (this.tension === 0 ? 1 : 10) - 1);
+        this.material.color = new Color(setup.color);
+        this.bCreateLine = bCreateLine;
+        this.name = "CurveComponent";
+        if (this.bCreateLine) {
+            this.createLine();
+        }
+    }
+    isValid() {
+        return this.threeObject != null;
+    }
+    createDefaultObject() {
+        // 创建默认材质
+        const material = new LineBasicMaterial({
+            color: 0xffffff,
+            transparent: true,
+            opacity: 1
+        });
+        // 创建空的几何体和线对象
+        const geometry = new BufferGeometry$1();
+        const line = new Line(geometry, material);
+        return line;
+    }
+    resetPoints(points) {
+        this.sourcePoints = points;
+        this.curve = new CatmullRomCurve3(points, this.closed, this.curveType, this.tension);
+        this.points = this.curve.getPoints(points.length * (this.tension === 0 ? 1 : 10) - 1);
+        if (this.bCreateLine) {
+            this.createLine();
+        }
+    }
+    createLine() {
+        const positions = [];
+        for (let i = 0; i < this.points.length; ++i) {
+            positions.push(this.points[i].x);
+            positions.push(this.points[i].y);
+            positions.push(this.points[i].z);
+        }
+        const geometry = this.threeObject.geometry;
+        geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    }
+    destroy() {
+        if (this.isValid() && this.threeObject) {
+            if (this.threeObject.geometry) {
+                this.threeObject.geometry.dispose();
+            }
+            if (this.material) {
+                this.material.dispose();
+            }
+        }
+        super.destroy();
+    }
+    get SourcePoints() {
+        return this.sourcePoints;
+    }
+    get Curve() {
+        return this.curve;
+    }
+    get Points() {
+        return this.points;
+    }
+    getPointAt(u) {
+        return this.curve.getPointAt(u);
+    }
+    getTangentAt(u) {
+        return this.curve.getTangentAt(u);
+    }
+    // 返回曲线在参数 u 处的世界坐标点
+    getWorldPointAt(u) {
+        const p = this.curve.getPointAt(u).clone();
+        if (this.obj) {
+            this.obj.updateMatrixWorld(true);
+            return this.localToWorld(p);
+        }
+        return p;
+    }
+    // 返回曲线在参数 u 处的世界坐标系下的单位切线方向
+    getWorldTangentAt(u) {
+        const t = this.curve.getTangentAt(u).clone();
+        if (this.obj) {
+            this.obj.updateMatrixWorld(true);
+            t.transformDirection(this.obj.matrixWorld);
+        }
+        return t;
+    }
+    getLength() {
+        return this.curve.getLength();
+    }
+}
+
 const DefaultBloomParam = {
     type: PostProcessStepType.Bloom,
     threshold: 0,
@@ -3545,4 +3738,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, Pawn, 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, CurveComponent, 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

@@ -37,6 +37,8 @@ export { DirectionalLightComponent } from "./lythreeframe/Object/Components/Ligh
 export { AmbientLightComponent } from './lythreeframe/Object/Components/Light/AmbientLight/AmbientLightComponent';
 export { LabelComponent } from "./lythreeframe/Object/Components/2D/2DComponent";
 export { SkyComponent } from "./lythreeframe/Object/Components/Sky/SkyComponent";
+export { CurveComponent } from './lythreeframe/Object/Components/Curve/CurveComponent';
+export type { CurveComponetSetup } from './lythreeframe/Object/Components/Curve/CurveComponent';
 export type { SkyComponentParam } from "./lythreeframe/Object/Components/Sky/SkyComponent";
 export { DefaultSkyParam } from "./lythreeframe/Object/Components/Sky/SkyComponent";
 export { WebGPUPostProcessFactory } from "./lythreeframe/PostProcess/WebGPUPostProcessFactory";

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

@@ -25,7 +25,7 @@ export declare class Viewport {
     private viewportParam;
     private outlineObjects;
     constructor(app: ThreeJsApp, viewportParam: ViewportParam, rendererParam: RendererParameters, postProcessParam: PostProcessParam);
-    protected createRenderer(rendererParam: RendererParameters): void;
+    protected createRenderer(rendererParam: RendererParameters): Promise<void>;
     protected createLabelRenderer(): void;
     protected createUILayer(): void;
     init(): void;

package/dist/lythreeframe/Object/Components/Curve/CurveComponent.d.ts

@@ -0,0 +1,35 @@
+import { ThreeJsApp } from 'lythreeframe/lythreeframe/ThreeJsApp';
+import { SceneComponent } from './../SceneComponent';
+import { CatmullRomCurve3, ColorRepresentation, Line, LineBasicMaterial, Vector3 } from 'three';
+export interface CurveComponetSetup {
+    type?: 'centripetal' | 'chordal' | 'catmullrom';
+    tension?: number;
+    closed?: boolean;
+    color?: ColorRepresentation;
+}
+export declare class CurveComponent extends SceneComponent {
+    private points;
+    private curve;
+    private closed;
+    private curveType;
+    private tension;
+    private bCreateLine;
+    private sourcePoints;
+    get threeObject(): Line;
+    protected set threeObject(newThreeObject: Line);
+    get material(): LineBasicMaterial;
+    constructor(app: ThreeJsApp, points: Vector3[], setup?: CurveComponetSetup, bCreateLine?: boolean, uuid?: string);
+    isValid(): boolean;
+    protected createDefaultObject(): Line;
+    resetPoints(points: Vector3[]): void;
+    createLine(): void;
+    destroy(): void;
+    get SourcePoints(): Vector3[];
+    get Curve(): CatmullRomCurve3;
+    get Points(): Vector3[];
+    getPointAt(u: number): Vector3;
+    getTangentAt(u: number): Vector3;
+    getWorldPointAt(u: number): Vector3;
+    getWorldTangentAt(u: number): Vector3;
+    getLength(): number;
+}

package/dist/lythreeframe/PostProcess/Param/AAParam.d.ts

@@ -1,4 +1,4 @@
-import { PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
+import { PostProcessStepType, type PostProcessStepParam } from "../PostProcessParam";
 export interface AAParams extends PostProcessStepParam {
     type: PostProcessStepType.Antialiasing;
     method: "fxaa" | "smaa";

package/dist/lythreeframe/PostProcess/Param/Bloom.d.ts

@@ -1,4 +1,4 @@
-import { PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
+import { type PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
 export interface BloomParam extends PostProcessStepParam {
     type: PostProcessStepType.Bloom;
     threshold: number;

package/dist/lythreeframe/PostProcess/Param/DOF.d.ts

@@ -1,4 +1,4 @@
-import { PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
+import { type PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
 export interface DOFParam extends PostProcessStepParam {
     type: PostProcessStepType.DepthOfField;
     focus: number;

package/dist/lythreeframe/PostProcess/Param/GTAO.d.ts

@@ -1,4 +1,4 @@
-import { PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
+import { type PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
 export interface DenoiseParam {
     denoiseRadius: number;
     lumaPhi: number;

package/dist/lythreeframe/PostProcess/Param/Outline.d.ts

@@ -1,5 +1,5 @@
-import { ColorRepresentation } from "three/webgpu";
-import { PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
+import type { ColorRepresentation } from "three";
+import { type PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
 export interface OutlineParams extends PostProcessStepParam {
     type: PostProcessStepType.Outline;
     edgeStrength: number;

package/dist/lythreeframe/PostProcess/Param/SSR.d.ts

@@ -1,4 +1,4 @@
-import { PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
+import { type PostProcessStepParam, PostProcessStepType } from "../PostProcessParam";
 export interface SSRParam extends PostProcessStepParam {
     type: PostProcessStepType.ScreenSpaceReflection;
     maxDistance: number;

package/dist/lythreeframe/PostProcess/WebGPUPostProcessFactory.d.ts

@@ -1,10 +1,10 @@
-import { OutlineParams } from './Param/Outline';
+import { type OutlineParams } from './Param/Outline';
 import { Scene, Camera, Object3D, PassNode, Node } from "three/webgpu";
-import { BloomParam } from "./Param/Bloom";
-import { DOFParam } from "./Param/DOF";
-import { GTAOParam } from "./Param/GTAO";
-import { SSRParam } from "./Param/SSR";
-import { DenoiseParam } from './Param/GTAO';
+import { type BloomParam } from "./Param/Bloom";
+import { type DOFParam } from "./Param/DOF";
+import { type GTAOParam } from "./Param/GTAO";
+import { type SSRParam } from "./Param/SSR";
+import { type DenoiseParam } from './Param/GTAO';
 import { ShaderNodeObject, NodeRepresentation } from 'three/tsl';
 import DepthOfFieldNode from 'three/addons/tsl/display/DepthOfFieldNode.js';
 import BloomNode from 'three/examples/jsm/tsl/display/BloomNode.js';

package/dist/lythreeframe/ThreeJsApp.d.ts

@@ -6,13 +6,12 @@ import { Delegate } from './Delegate';
 import { CameraParam } from './Frame/Parameters/CameraParameter';
 import { AppParam } from './Frame/Parameters/AppParameter';
 import { AssetManager } from './AssetManagement/AssetManager';
+/**
+ * Three.js应用程序主类
+ * 负责管理场景、视口、控制器和资源
+ */
 export declare class ThreeJsApp {
-    get camera(): PerspectiveCamera | OrthographicCamera;
-    get clock(): Clock;
-    get world(): World;
-    get viewport(): Viewport;
-    get controller(): Controller;
-    get assetManager(): AssetManager;
+    private animationFrameHandle;
     protected _clock: Clock;
     protected _camera: PerspectiveCamera | OrthographicCamera;
     protected _world: World;
@@ -20,18 +19,71 @@ export declare class ThreeJsApp {
     protected _controller: Controller;
     protected _assetManager: AssetManager;
     protected _tickingFunctions: Array<(delta: number) => void>;
-    get appParam(): AppParam;
     protected _appParam: AppParam;
-    get onCameraChangedDelegate(): Delegate<[void]>;
     protected _onCameraChangedDelegate: Delegate<[void]>;
+    get camera(): PerspectiveCamera | OrthographicCamera;
+    get clock(): Clock;
+    get world(): World;
+    get viewport(): Viewport;
+    get controller(): Controller;
+    get assetManager(): AssetManager;
+    get appParam(): AppParam;
+    get onCameraChangedDelegate(): Delegate<[void]>;
+    /**
+     * 构造ThreeJs应用程序实例
+     * @param appParam 应用程序参数配置
+     */
     constructor(appParam?: AppParam);
+    /**
+     * 构造后初始化钩子
+     * 按顺序初始化控制器、世界和视口
+     */
     protected postConstruct(): void;
+    /**
+     * 公共初始化方法
+     * 可由子类重写以添加自定义初始化逻辑
+     */
     init(): void;
+    /**
+     * 启动动画循环
+     * 使用延迟启动以确保所有组件完全初始化
+     */
+    protected startAnimationLoop(): void;
+    /**
+     * 每帧更新方法
+     * @param deltaTime 距离上一帧的时间增量（秒）
+     */
     protected tick(deltaTime: number): void;
+    /**
+     * 添加每帧执行的函数
+     * @param func 接收deltaTime参数的回调函数
+     */
     addTickingFunction(func: (deltaTime: number) => void): void;
+    /**
+     * 移除已注册的tick函数
+     * @param func 要移除的函数引用
+     */
     removeTickingFunction(func: (deltaTime: number) => void): void;
+    /**
+     * 销毁应用程序并清理所有资源
+     */
     destroy(): void;
+    /**
+     * 更新相机参数
+     * @param param 新的相机参数
+     */
     updateCamera(param: CameraParam): void;
+    /**
+     * 窗口大小改变时的处理
+     * @param width 新的宽度
+     * @param height 新的高度
+     */
     onWindowResize(width: number, height: number): void;
+    /**
+     * 将当前场景渲染为图片
+     * @param width 图片宽度，默认1024
+     * @param height 图片高度，默认1024
+     * @returns 图片的DataURL
+     */
     renderAsImage(width?: number, height?: number): Promise<string>;
 }

package/package.json

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