<!-- Three.js 样条曲线挤出几何体演示 - 功能与技术点详解
一、项目概述
这是一个基于Three.js的交互式3D样条曲线管道生成器，允许用户实时创建、调整和沿多种3D曲线运动的管道几何体。项目展示了高级几何体生成、相机动画和实时参数控制等核心3D图形技术。

二、核心功能
1. 多样化的样条曲线库
包含16种预定义数学曲线：

基本曲线：螺旋线、心形线

数学结：奶奶结、三叶结、五叶结、圆环结

多项式曲线：多项式三叶结、八字多项式结

装饰结：4种装饰圆环结变体

自定义曲线：管道样条、闭合样条

2. 实时参数调节系统
几何体参数：

曲线类型：下拉菜单选择不同曲线

缩放比例：2-10倍动态缩放

路径分段：50-500段，控制曲线平滑度

截面分段：2-12段，控制管道圆滑度

闭合控制：开关控制曲线是否首尾相连

相机控制参数：

动画视角：切换自由相机/沿曲线移动相机

前瞻视角：控制相机看向切线方向或前方

辅助线显示：可视化相机视锥体

3. 双相机系统
主相机：用户通过鼠标/触控自由控制的轨道相机

样条相机：自动沿曲线运动的"过山车"视角相机

实时切换：可在两种视角间无缝切换

4. 视觉反馈机制
双材质渲染：实体表面+半透明线框，清晰显示几何结构

相机辅助器：显示相机视锥体，帮助理解3D空间关系

位置指示器：小球标记相机当前位置

三、核心技术点
1. 几何体生成技术
TubeGeometry 管道几何体
javascript
new THREE.TubeGeometry(
  path,               // 样条曲线路径
  tubularSegments,    // 沿路径分段数
  radius,             // 管道半径
  radialSegments,     // 截面分段数
  closed              // 是否闭合
)
工作原理：将圆形截面沿3D路径挤出形成管道

参数影响：

tubularSegments：值越高，曲线越平滑

radialSegments：值越高，管道越圆滑

closed：true时形成环形管道

Catmull-Rom 曲线插值
javascript
new THREE.CatmullRomCurve3(controlPoints)
特点：生成通过所有控制点的平滑曲线

参数化：使用0-1的参数t沿曲线均匀采样

闭合处理：closed: true 时自动连接首尾

2. 相机动画与运动学
Frenet 标架计算
这是项目的核心技术，用于稳定相机沿曲线运动：

javascript
// 1. 切线计算（前进方向）
tubeGeometry.parameters.path.getTangentAt(t, direction);

// 2. Frenet标架插值（避免方向突变）
const pickt = t * segments;
const pick = Math.floor(pickt);
const pickNext = (pick + 1) % segments;

// 3. 副法线插值
binormal.subVectors(
  tubeGeometry.binormals[pickNext],
  tubeGeometry.binormals[pick]
);
binormal.multiplyScalar(pickt - pick)
       .add(tubeGeometry.binormals[pick]);

// 4. 法线计算（叉积）
normal.copy(binormal).cross(direction);
相机稳定技术
弧长参数化：使用弧长而非时间计算观察点，避免速度变化引起的抖动

javascript
// 固定弧长偏移，而非固定时间偏移
(t + 30 / path.getLength()) % 1
位置偏移：相机从曲线中心向外偏移，避免进入管道内部

javascript
position.add(normal.clone().multiplyScalar(15));
3. 性能优化策略
资源管理
javascript
// 几何体释放机制
if (mesh !== undefined) {
  parent.remove(mesh);
  mesh.geometry.dispose();  // 释放GPU内存
}
渲染优化
抗锯齿：antialias: true 提升视觉质量

像素比适配：setPixelRatio(devicePixelRatio) 适配高DPI屏幕

动画循环：使用setAnimationLoop替代requestAnimationFrame

4. 用户交互系统
GUI 参数控制
javascript
const gui = new GUI({ width: 285 });
// 分组组织
const folderGeometry = gui.addFolder('几何体参数');
// 响应式回调
folderGeometry.add(params, 'scale', 2, 10)
  .onChange(() => setScale());
轨道控制器
javascript
const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 100;   // 防止相机太近
controls.maxDistance = 2000;  // 防止相机太远
5. 现代化JavaScript特性
ES6 模块系统
// 导入映射表
<script type="importmap">
{
  "imports": {
    "three": "../build/three.module.js",
    "three/addons/": "./jsm/"
  }
}
</script>

// 模块化导入
<script type="module">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
</script>
响应式设计
javascript
// 窗口大小变化处理
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
四、数学与图形学原理
1. 微分几何应用
曲线参数化：使用参数t ∈ [0,1]表示曲线上点的位置

Frenet-Serret公式：描述曲线在三维空间中的局部几何性质

曲率与挠率：隐含在切线、法线、副法线的变化中

2. 三维向量运算
点积与叉积：用于计算角度和垂直方向

向量插值：实现平滑的方向过渡

坐标系转换：世界坐标与局部坐标的转换

3. 透视投影
javascript
new THREE.PerspectiveCamera(fov, aspect, near, far)
视野角度：控制可见范围（主相机50°，样条相机84°）

裁剪平面：near=0.01, far=10000 定义渲染深度范围

五、项目架构特点
1. 模块化设计
分离关注点：初始化、几何体创建、相机动画、渲染各自独立

可配置性：所有参数通过单一params对象管理

可扩展性：易于添加新的曲线类型或控制参数

2. 状态管理
参数驱动：所有视觉效果由参数对象控制

响应式更新：参数变化立即触发对应的更新函数

无副作用：函数职责清晰，避免全局状态污染

3. 错误预防
资源释放：几何体更新时正确释放GPU资源

边界检查：相机控制有最小/最大距离限制

循环安全：使用模运算确保数组索引不越界

六、教育价值
这个项目是学习以下概念的绝佳示例：

计算机图形学基础：几何体生成、坐标变换、光照模型

微分几何应用：曲线参数化、Frenet标架、弧长计算

3D动画原理：相机路径动画、插值技术、时间控制

WebGL编程：Three.js API使用、性能优化、交互设计

数学可视化：抽象数学概念（结理论）的可视化展示

七、技术栈总结
技术	用途	版本/特点
Three.js	3D图形渲染引擎	r128+，使用ES6模块
lil-gui	参数控制界面	轻量级，无依赖
Stats.js	性能监控	显示FPS、内存等指标
OrbitControls	相机控制	提供鼠标/触控交互
Catmull-Rom曲线	路径插值	生成平滑3D曲线
Frenet标架	方向计算	稳定相机沿曲线运动
TubeGeometry	几何体生成	沿路径挤出管道
WebGL 2.0	底层图形API	硬件加速3D渲染 -->


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面标题：Three.js 3D图形库 - 样条挤出几何体演示 -->
    <title>Three.js WebGL - 样条曲线挤出几何体演示</title>
    <!-- 字符编码设置：使用UTF-8编码支持中文字符 -->
    <meta charset="utf-8">
    <!-- 视口设置：适配移动设备，禁止用户缩放 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 外部CSS样式表链接 -->
    <link type="text/css" rel="stylesheet" href="main.css">
    <!-- 内联CSS样式：设置页面基础样式 -->
    <style>
        body {
            background-color: #f0f0f0;  /* 背景颜色：浅灰色 */
            color: #444;                /* 文字颜色：深灰色 */
        }
        a {
            color: #08f;                /* 链接颜色：亮蓝色 */
        }
    </style>
</head>
<body>
    <!-- Three.js 3D场景渲染容器：所有3D内容将渲染在此div内 -->
    <div id="container"></div>
    <!-- 页面信息栏：显示项目信息和链接 -->
    <div id="info">
        <a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 样条曲线挤出几何体示例
        <br>（使用箭头键或鼠标拖拽旋转视角，滚动缩放）
    </div>

    <!-- 导入映射表：现代浏览器中ES模块的路径映射配置 -->
    <!-- 作用：告诉浏览器如何解析模块导入语句中的路径 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../build/three.module.js",
                "three/addons/": "./jsm/"
            }
        }
    </script>

    <!-- 主JavaScript模块：使用type="module"表示这是ES6模块 -->
    <script type="module">

        // 1. ========== 模块导入部分 ==========
        // 导入Three.js核心库的所有功能
        import * as THREE from 'three';

        // 导入性能监控器：显示帧率等性能指标
        import Stats from 'three/addons/libs/stats.module.js';
        // 导入轻量级GUI库：创建用户交互控制面板
        import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

        // 导入Three.js扩展曲线库：包含多种预定义的3D曲线
        import * as Curves from 'three/addons/curves/CurveExtras.js';
        // 导入轨道控制器：允许用户用鼠标控制相机旋转和缩放
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 2. ========== 全局变量声明 ==========
        let container, stats;                    // DOM容器和性能统计对象
        let camera, scene, renderer;            // 主相机、场景、渲染器
        let splineCamera, cameraHelper, cameraEye; // 沿曲线移动的相机及其辅助对象

        // 向量变量声明：用于相机沿曲线移动时的方向和位置计算
        const direction = new THREE.Vector3();  // 切线方向（曲线前进方向）
        const binormal = new THREE.Vector3();   // 副法线方向（垂直于法线和切线）
        const normal = new THREE.Vector3();     // 法线方向（垂直于切线）
        const position = new THREE.Vector3();   // 当前位置
        const lookAt = new THREE.Vector3();     // 观察目标点

        // 3. ========== 自定义样条曲线定义 ==========
        
        // 创建自定义的Catmull-Rom样条曲线（用于管道演示）
        // Catmull-Rom曲线特点：通过控制点生成平滑曲线，但不一定通过所有控制点
        const pipeSpline = new THREE.CatmullRomCurve3([
            // 一系列三维向量点，定义曲线的形状
            new THREE.Vector3(0, 10, -10), new THREE.Vector3(10, 0, -10),
            new THREE.Vector3(20, 0, 0), new THREE.Vector3(30, 0, 10),
            new THREE.Vector3(30, 0, 20), new THREE.Vector3(20, 0, 30),
            new THREE.Vector3(10, 0, 30), new THREE.Vector3(0, 0, 30),
            new THREE.Vector3(-10, 10, 30), new THREE.Vector3(-10, 20, 30),
            new THREE.Vector3(0, 30, 30), new THREE.Vector3(10, 30, 30),
            new THREE.Vector3(20, 30, 15), new THREE.Vector3(10, 30, 10),
            new THREE.Vector3(0, 30, 10), new THREE.Vector3(-10, 20, 10),
            new THREE.Vector3(-10, 10, 10), new THREE.Vector3(0, 0, 10),
            new THREE.Vector3(10, -10, 10), new THREE.Vector3(20, -15, 10),
            new THREE.Vector3(30, -15, 10), new THREE.Vector3(40, -15, 10),
            new THREE.Vector3(50, -15, 10), new THREE.Vector3(60, 0, 10),
            new THREE.Vector3(70, 0, 0), new THREE.Vector3(80, 0, 0),
            new THREE.Vector3(90, 0, 0), new THREE.Vector3(100, 0, 0)
        ]);

        // 创建闭合样条曲线示例
        const sampleClosedSpline = new THREE.CatmullRomCurve3([
            new THREE.Vector3(0, -40, -40),
            new THREE.Vector3(0, 40, -40),
            new THREE.Vector3(0, 140, -40),
            new THREE.Vector3(0, 40, 40),
            new THREE.Vector3(0, -40, 40)
        ]);
        // 设置曲线属性
        sampleClosedSpline.curveType = 'catmullrom';  // 曲线类型：Catmull-Rom
        sampleClosedSpline.closed = true;             // 闭合曲线：首尾相连

        // 4. ========== 样条曲线字典 ==========
        // 包含多种预定义的数学曲线，用户可以通过GUI选择不同的曲线
        const splines = {
            GrannyKnot: new Curves.GrannyKnot(),                    // 奶奶结曲线
            HeartCurve: new Curves.HeartCurve(3.5),                 // 心形曲线，参数3.5控制大小
            VivianiCurve: new Curves.VivianiCurve(70),              // 维维亚尼曲线，参数70控制尺寸
            KnotCurve: new Curves.KnotCurve(),                      // 普通结曲线
            HelixCurve: new Curves.HelixCurve(),                    // 螺旋线
            TrefoilKnot: new Curves.TrefoilKnot(),                  // 三叶结
            TorusKnot: new Curves.TorusKnot(20),                    // 圆环结，参数20控制缠绕数
            CinquefoilKnot: new Curves.CinquefoilKnot(20),          // 五叶结
            TrefoilPolynomialKnot: new Curves.TrefoilPolynomialKnot(14), // 多项式三叶结
            FigureEightPolynomialKnot: new Curves.FigureEightPolynomialKnot(), // 八字形多项式结
            DecoratedTorusKnot4a: new Curves.DecoratedTorusKnot4a(), // 装饰圆环结4a型
            DecoratedTorusKnot4b: new Curves.DecoratedTorusKnot4b(), // 装饰圆环结4b型
            DecoratedTorusKnot5a: new Curves.DecoratedTorusKnot5a(), // 装饰圆环结5a型
            DecoratedTorusKnot5c: new Curves.DecoratedTorusKnot5c(), // 装饰圆环结5c型
            PipeSpline: pipeSpline,                                 // 自定义管道样条
            SampleClosedSpline: sampleClosedSpline                  // 示例闭合样条
        };

        // 5. ========== 场景对象和几何体变量 ==========
        let parent;         // 父容器对象，用于包含管道网格和沿曲线移动的相机
        let tubeGeometry;   // 管道几何体对象
        let mesh;           // 管道网格对象

        // 6. ========== 控制参数对象 ==========
        // 这些参数可以通过GUI界面实时调整
        const params = {
            spline: 'GrannyKnot',           // 当前选中的样条曲线类型（默认：奶奶结）
            scale: 4,                       // 几何体缩放比例（范围：2-10）
            extrusionSegments: 100,         // 挤出分段数（路径细分程度，值越高曲线越平滑）
            radiusSegments: 3,              // 半径分段数（管道截面圆的分段数，值越高管道越圆滑）
            closed: true,                   // 是否闭合曲线（true：首尾相连形成闭环）
            animationView: false,           // 是否启用动画视角（true：使用沿曲线移动的相机）
            lookAhead: false,               // 是否启用前瞻视角（true：相机看向前方，false：看向切线方向）
            cameraHelper: false,            // 是否显示相机辅助线（显示相机视锥体）
        };

        // 7. ========== 材质定义 ==========
        // 创建兰伯特材质（用于管道实体部分）
        // 兰伯特材质特点：模拟漫反射表面，对光照有反应但无镜面高光
        const material = new THREE.MeshLambertMaterial({ color: 0xff00ff }); // 品红色

        // 创建基础线框材质（用于管道线框部分）
        const wireframeMaterial = new THREE.MeshBasicMaterial({
            color: 0x000000,        // 黑色
            opacity: 0.3,           // 透明度30%
            wireframe: true,        // 线框模式
            transparent: true       // 启用透明度
        });

        // 8. ========== 函数定义部分 ==========

        /**
         * 添加管道几何体函数
         * 根据当前选择的样条曲线和参数创建或更新管道几何体
         * 功能：1. 移除旧的几何体 2. 创建新的几何体 3. 添加到场景
         */
        function addTube() {
            // 如果已经存在网格对象，先移除并释放资源
            if (mesh !== undefined) {
                parent.remove(mesh);            // 从父容器中移除
                mesh.geometry.dispose();        // 释放几何体占用的GPU内存
            }

            // 从样条字典中获取当前选中的样条曲线
            const extrudePath = splines[params.spline];
            
            // 创建TubeGeometry（管道几何体）
            // TubeGeometry参数说明：
            // 1. path: 挤出路径（样条曲线）
            // 2. tubularSegments: 管道分段数（沿路径方向的分段）
            // 3. radius: 管道半径
            // 4. radialSegments: 径向分段数（管道截面的分段）
            // 5. closed: 是否闭合
            tubeGeometry = new THREE.TubeGeometry(
                extrudePath,            // 挤出路径（当前选中的样条曲线）
                params.extrusionSegments, // 沿路径的分段数（控制曲线平滑度）
                2,                       // 管道半径（固定值2）
                params.radiusSegments,   // 径向分段数（控制管道圆滑度）
                params.closed            // 是否闭合
            );

            // 将几何体添加到场景
            addGeometry(tubeGeometry);
            // 应用当前缩放比例
            setScale();
        }

        /**
         * 设置几何体缩放比例函数
         * 功能：将当前缩放参数应用到管道网格
         */
        function setScale() {
            // 在三个坐标轴上应用相同的缩放比例
            mesh.scale.set(params.scale, params.scale, params.scale);
        }

        /**
         * 添加几何体到场景函数
         * @param {THREE.BufferGeometry} geometry - 要添加到场景的几何体对象
         * 功能：创建包含实体和线框的双重网格并添加到父容器
         */
        function addGeometry(geometry) {
            // 创建主网格（使用兰伯特材质，显示实体表面）
            mesh = new THREE.Mesh(geometry, material);
            
            // 创建线框网格（使用线框材质，显示结构线框）
            const wireframe = new THREE.Mesh(geometry, wireframeMaterial);
            
            // 将线框网格作为子对象添加到主网格
            // 这样线框会随着主网格一起移动、旋转、缩放
            mesh.add(wireframe);

            // 将主网格添加到父容器对象
            parent.add(mesh);
        }

        /**
         * 相机动画控制函数
         * 功能：根据参数控制相机辅助器和位置指示器的可见性
         */
        function animateCamera() {
            // 相机辅助器：显示相机视锥体，帮助理解相机视角
            cameraHelper.visible = params.cameraHelper;
            // 相机位置指示器：显示相机当前位置的小球
            cameraEye.visible = params.cameraHelper;
        }

        // 9. ========== 初始化函数调用 ==========
        // 页面加载完成后立即执行初始化
        init();

        /**
         * 初始化函数 - Three.js应用的入口点
         * 功能：初始化所有Three.js组件（场景、相机、灯光、渲染器等）
         */
        function init() {
            // 获取DOM容器元素
            container = document.getElementById('container');

            // 创建主透视相机（用于手动控制的视角）
            // 透视相机参数说明：
            // 1. fov: 视野角度（50度）
            // 2. aspect: 宽高比（根据窗口大小计算）
            // 3. near: 近裁剪面（0.01，比这近的物体不渲染）
            // 4. far: 远裁剪面（10000，比这远的物体不渲染）
            camera = new THREE.PerspectiveCamera(
                50,
                window.innerWidth / window.innerHeight,
                0.01,
                10000
            );
            // 设置相机初始位置（x:0, y:50, z:500）
            camera.position.set(0, 50, 500);

            // 创建场景对象
            scene = new THREE.Scene();
            // 设置场景背景颜色（浅灰色，与页面背景一致）
            scene.background = new THREE.Color(0xf0f0f0);

            // 添加环境光（均匀照亮所有表面，无方向性）
            // 环境光特点：无阴影，均匀照明，模拟间接光照
            scene.add(new THREE.AmbientLight(0xffffff));

            // 添加平行光（模拟太阳光，有明确方向）
            // 参数：颜色（白色），强度（1.5倍）
            const light = new THREE.DirectionalLight(0xffffff, 1.5);
            light.position.set(0, 0, 1);  // 设置光源方向（从z轴正方向照射）
            scene.add(light);

            // 创建父容器对象
            // 作用：将管道网格和沿曲线移动的相机分组，方便整体控制
            parent = new THREE.Object3D();
            scene.add(parent);

            // 创建沿样条曲线移动的相机（用于动画视角）
            // 使用更宽的视野（84度）以获得更好的沉浸感
            splineCamera = new THREE.PerspectiveCamera(
                84,
                window.innerWidth / window.innerHeight,
                0.01,
                1000
            );
            // 将此相机添加到父容器，这样它会随着管道一起移动
            parent.add(splineCamera);

            // 创建相机辅助器（显示相机视锥体）
            // 作用：帮助可视化相机的视野范围
            cameraHelper = new THREE.CameraHelper(splineCamera);
            scene.add(cameraHelper);

            // 初始添加管道几何体（使用默认参数）
            addTube();

            // 创建相机位置指示器（一个小球，显示相机当前位置）
            cameraEye = new THREE.Mesh(
                new THREE.SphereGeometry(5),  // 球体几何体，半径5
                new THREE.MeshBasicMaterial({ color: 0xdddddd }) // 浅灰色基础材质
            );
            parent.add(cameraEye);

            // 初始状态：隐藏辅助器
            cameraHelper.visible = params.cameraHelper;
            cameraEye.visible = params.cameraHelper;

            // 创建WebGL渲染器
            // antialias: true 开启抗锯齿，使边缘更平滑
            renderer = new THREE.WebGLRenderer({ antialias: true });
            // 设置设备像素比（适配高DPI屏幕，如Retina显示屏）
            renderer.setPixelRatio(window.devicePixelRatio);
            // 设置渲染器尺寸为整个窗口大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            // 设置动画循环回调函数（替代传统的requestAnimationFrame）
            renderer.setAnimationLoop(animate);
            // 将渲染器的canvas元素添加到DOM容器
            container.appendChild(renderer.domElement);

            // 初始化性能统计器
            stats = new Stats();
            // 将性能统计器面板添加到DOM容器
            container.appendChild(stats.dom);

            // 10. ========== GUI控制面板创建 ==========
            
            // 创建GUI实例，设置宽度285像素
            const gui = new GUI({ width: 285 });

            // 创建几何体控制文件夹
            const folderGeometry = gui.addFolder('几何体参数');
            
            // 添加样条曲线类型选择下拉菜单
            folderGeometry.add(params, 'spline', Object.keys(splines))
                .name('曲线类型')
                .onChange(function() {
                    // 当曲线类型改变时，重新创建管道
                    addTube();
                });
            
            // 添加缩放控制滑块（范围2-10，步长2）
            folderGeometry.add(params, 'scale', 2, 10)
                .name('缩放比例')
                .step(2)
                .onChange(function() {
                    // 当缩放比例改变时，更新网格缩放
                    setScale();
                });
            
            // 添加挤出分段数控制滑块（范围50-500，步长50）
            folderGeometry.add(params, 'extrusionSegments', 50, 500)
                .name('路径分段')
                .step(50)
                .onChange(function() {
                    // 当分段数改变时，重新创建管道
                    addTube();
                });
            
            // 添加半径分段数控制滑块（范围2-12，步长1）
            folderGeometry.add(params, 'radiusSegments', 2, 12)
                .name('截面分段')
                .step(1)
                .onChange(function() {
                    addTube();
                });
            
            // 添加闭合控制复选框
            folderGeometry.add(params, 'closed')
                .name('闭合曲线')
                .onChange(function() {
                    addTube();
                });
            
            folderGeometry.open();  // 默认展开几何体参数文件夹

            // 创建相机控制文件夹
            const folderCamera = gui.addFolder('相机控制');
            
            // 添加动画视角切换复选框
            folderCamera.add(params, 'animationView')
                .name('动画视角')
                .onChange(function() {
                    animateCamera();
                });
            
            // 添加前瞻视角切换复选框
            folderCamera.add(params, 'lookAhead')
                .name('前瞻视角')
                .onChange(function() {
                    animateCamera();
                });
            
            // 添加相机辅助器显示切换复选框
            folderCamera.add(params, 'cameraHelper')
                .name('显示辅助线')
                .onChange(function() {
                    animateCamera();
                });
            
            folderCamera.open();  // 默认展开相机控制文件夹

            // 创建轨道控制器（用于手动控制主相机）
            // 参数：要控制的相机，事件监听的DOM元素
            const controls = new OrbitControls(camera, renderer.domElement);
            controls.minDistance = 100;   // 最小缩放距离（不能比这更近）
            controls.maxDistance = 2000;  // 最大缩放距离（不能比这更远）

            // 监听窗口大小变化事件
            window.addEventListener('resize', onWindowResize);
        }

        /**
         * 窗口大小变化处理函数
         * 功能：当浏览器窗口大小改变时，更新相机和渲染器设置
         */
        function onWindowResize() {
            // 更新主相机宽高比
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();  // 必须调用此方法使宽高比生效
            
            // 更新沿曲线移动的相机宽高比
            splineCamera.aspect = window.innerWidth / window.innerHeight;
            splineCamera.updateProjectionMatrix();

            // 更新渲染器尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        /**
         * 动画循环函数（每帧调用）
         * 功能：1. 渲染场景 2. 更新性能统计
         */
        function animate() {
            render();      // 渲染场景
            stats.update(); // 更新性能统计器显示
        }

        /**
         * 渲染函数（每帧执行的核心函数）
         * 功能：1. 计算相机沿曲线移动 2. 更新相机方向 3. 渲染场景
         */
        function render() {
            // 11. ========== 相机沿曲线移动计算 ==========
            
            // 计算动画时间（20秒一个循环）
            const time = Date.now();          // 当前时间戳（毫秒）
            const looptime = 20 * 1000;       // 循环总时间：20秒
            const t = (time % looptime) / looptime;  // 归一化时间（0到1之间）

            // 获取当前时间点在样条曲线上的位置
            // getPointAt(t): 获取曲线上参数t对应的点（t在0-1之间）
            tubeGeometry.parameters.path.getPointAt(t, position);
            position.multiplyScalar(params.scale);  // 应用当前缩放比例

            // 12. ========== Frenet标架插值计算 ==========
            // Frenet标架：由切线、法线、副法线组成的局部坐标系
            // 用于确定曲线上的点的朝向
            
            const segments = tubeGeometry.tangents.length;  // 切线数组长度
            const pickt = t * segments;                     // 计算对应的数组索引（浮点数）
            const pick = Math.floor(pickt);                 // 向下取整（当前段起始索引）
            const pickNext = (pick + 1) % segments;         // 下一段索引（使用模运算处理循环）

            // 计算副法线插值（在两个相邻副法线之间线性插值）
            // 目的：使副法线在曲线段之间平滑过渡
            binormal.subVectors(
                tubeGeometry.binormals[pickNext],  // 下一段的副法线
                tubeGeometry.binormals[pick]       // 当前段的副法线
            );
            binormal.multiplyScalar(pickt - pick)  // 乘以插值比例
                    .add(tubeGeometry.binormals[pick]);  // 加上当前段副法线

            // 获取当前点的切线方向（曲线前进方向）
            tubeGeometry.parameters.path.getTangentAt(t, direction);
            
            const offset = 15;  // 相机偏移量（从曲线中心向外偏移的距离）

            // 计算法线方向（垂直于切线和副法线）
            // 公式：法线 = 副法线 × 切线（叉积）
            normal.copy(binormal).cross(direction);

            // 将相机位置从曲线中心向外偏移（沿法线方向）
            // 这样相机就不会在管道内部，而是在管道外部观察
            position.add(normal.clone().multiplyScalar(offset));

            // 13. ========== 更新相机位置 ==========
            splineCamera.position.copy(position);  // 更新沿曲线移动的相机位置
            cameraEye.position.copy(position);     // 更新相机位置指示器（小球）

            // 14. ========== 计算观察目标点 ==========
            // 为了稳定相机的朝向，使用弧长参数而不是时间参数
            // 这样可以避免在曲线曲率变化大的地方相机抖动
            
            // 计算稍微超前一点的位置作为观察目标
            // 30 / path.getLength(): 向前偏移固定弧长（30单位）
            tubeGeometry.parameters.path.getPointAt(
                (t + 30 / tubeGeometry.parameters.path.getLength()) % 1,  // 超前一点的参数
                lookAt
            );
            lookAt.multiplyScalar(params.scale);  // 应用缩放比例

            // 15. ========== 设置相机朝向 ==========
            // 如果未启用前瞻视角，则让相机看向切线方向
            if (!params.lookAhead) {
                // 观察点 = 当前位置 + 切线方向
                lookAt.copy(position).add(direction);
            }
            
            // 使用lookAt矩阵设置相机朝向
            // 参数：相机位置，观察点，上方向（法线方向）
            splineCamera.matrix.lookAt(splineCamera.position, lookAt, normal);
            
            // 将矩阵转换为四元数（Three.js相机使用四元数表示旋转）
            splineCamera.quaternion.setFromRotationMatrix(splineCamera.matrix);

            // 更新相机辅助器（如果可见）
            cameraHelper.update();

            // 16. ========== 渲染场景 ==========
            // 根据参数选择使用哪个相机渲染
            // 如果animationView为true，使用沿曲线移动的相机
            // 否则使用主相机（可通过鼠标控制）
            renderer.render(
                scene,  // 要渲染的场景
                params.animationView === true ? splineCamera : camera  // 使用的相机
            );
        }

    </script>
</body>
</html>