<!-- 代码功能和技术点详细说明
一、项目概述
这是一个基于Three.js的NURBS（非均匀有理B样条） 三维图形可视化演示项目。NURBS是计算机图形学中用于表示和分析曲线曲面的强大数学工具，广泛应用于CAD/CAM、工业设计和动画制作等领域。

二、主要功能模块
1. NURBS曲线展示（左侧）
功能：展示一个3阶NURBS曲线

特点：

使用20个随机生成的控制点

同时显示实际曲线（实线）和控制多边形（半透明线）

控制点包含权重参数，可以调整曲线形状

位置：居中偏下（y=-100）

2. NURBS曲面展示（中间）
功能：展示一个二维NURBS曲面

特点：

使用3×4的控制点网格（共12个控制点）

应用纹理贴图可视化曲面参数化

中间控制点设置权重为5，产生更强的吸引力

双面渲染，两面都可见

位置：左侧（x=-400，y=100）

3. NURBS体积截面展示（右侧）
功能：通过多个截面展示三维NURBS体积

特点：

使用3×4×2的控制点网格（共24个控制点）

创建5个不同方向的截面：

前截面（w=0）

中间截面（w=0.5）

后截面（w=1）

顶截面（v=1）

侧截面（u=0）

每个截面缩小50%

位置：右侧（x=400，y=100）

三、核心技术点
1. Three.js基础架构
Scene（场景）：容纳所有3D对象的容器

Camera（相机）：透视相机，模拟人眼视角

Renderer（渲染器）：WebGL渲染器，将3D场景渲染到2D画布

Group（组）：将多个对象组织在一起，便于统一变换

Lighting（光照）：环境光+平行光组合，产生立体感

2. NURBS数学概念实现
A. NURBS曲线
javascript
// 核心参数
- degree（阶数）：3（三次曲线，C2连续）
- knots（节点向量）：定义曲线的参数化方式
- controlPoints（控制点）：带权重的三维点（Vector4）
- weights（权重）：控制点的影响力，默认1
B. NURBS曲面
javascript
// 双参数系统
- u方向：degree=2（二次，C1连续），knots=[0,0,0,1,1,1]
- v方向：degree=3（三次，C2连续），knots=[0,0,0,0,1,1,1,1]
- 控制网格：3行×4列矩阵
C. NURBS体积
javascript
// 三参数系统
- u方向：degree=2
- v方向：degree=3
- w方向：degree=1（线性变化）
- 控制网格：3层×4行×2列三维数组
3. 几何体生成技术
A. BufferGeometry
高性能几何体表示

使用缓冲区存储顶点数据

通过setFromPoints()从点数组创建几何体

B. ParametricGeometry
通过参数化函数生成几何体

需要提供求值函数：(u, v) => Vector3

支持任意参数化表面

4. 渲染与材质
A. 材质系统
LineBasicMaterial：用于绘制线条（曲线和控制多边形）

MeshLambertMaterial：用于渲染曲面，支持光照计算

双面渲染：side: THREE.DoubleSide

B. 纹理映射
使用UV网格纹理（uv_grid_opengl.jpg）

纹理设置：

javascript
map.wrapS = map.wrapT = THREE.RepeatWrapping  // 纹理重复
map.anisotropy = 16  // 各向异性过滤，提高纹理质量
map.colorSpace = THREE.SRGBColorSpace  // 颜色空间
5. 交互系统
A. 旋转控制
基于指针事件（支持鼠标和触摸）

平滑插值动画：group.rotation.y += (target - current) * 0.05

相对坐标计算：event.clientX - windowHalfX

B. 事件处理
pointerdown：开始拖拽，记录初始状态

pointermove：计算旋转角度

pointerup：结束拖拽，清理事件监听

6. 性能优化
A. 渲染优化
抗锯齿：antialias: true

设备像素比适配：setPixelRatio(window.devicePixelRatio)

动画循环：setAnimationLoop()替代requestAnimationFrame

B. 性能监控
集成Stats.js

显示FPS（帧率）、渲染时间等指标

7. 响应式设计
javascript
function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();  // 必须调用！
    renderer.setSize(window.innerWidth, window.innerHeight);
}

四、代码架构设计
text
项目结构：
1. 初始化阶段（init函数）
   ├── 创建DOM容器
   ├── 设置相机和场景
   ├── 配置光照
   └── 创建对象组

2. NURBS对象创建
   ├── 曲线：随机控制点生成
   ├── 曲面：预定义控制网格
   └── 体积：三维控制网格 + 多截面

3. 渲染系统设置
   ├── WebGL渲染器配置
   ├── 性能统计集成
   └── 事件监听绑定

4. 交互系统
   ├── 指针事件处理
   ├── 旋转计算
   └── 平滑动画

5. 响应式处理
   └── 窗口大小变化适配
五、应用场景
工业设计：汽车、飞机外形设计

动画制作：角色建模和运动路径

建筑可视化：复杂曲面建筑设计

游戏开发：高精度模型创建

教育演示：计算机图形学教学

六、技术亮点
完整的NURBS演示：从一维曲线到三维体积

实时交互：支持鼠标拖拽旋转

可视化效果：纹理贴图显示参数化

性能优化：高效的WebGL渲染

模块化设计：清晰的代码结构，易于扩展 -->


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 
        页面基础元数据设置
        - title: 页面标题，显示在浏览器标签页上
        - charset: 字符编码，utf-8支持中文显示
        - viewport: 移动端适配配置
          * width=device-width: 宽度等于设备宽度
          * user-scalable=no: 禁止用户手动缩放页面
          * minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1
    -->
    <title>three.js WebGL - 几何体 - NURBS非均匀有理B样条演示</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    
    <!-- 
        外部样式表链接
        - type="text/css": 指定为CSS样式表
        - rel="stylesheet": 定义与当前文档的关系为样式表
        - href="main.css": 引用的CSS文件路径
    -->
    <link type="text/css" rel="stylesheet" href="main.css">
    
    <!-- 
        内联样式表
        - 覆盖或补充外部样式表的设置
        - 优先级高于外部样式表
    -->
    <style>
        /* 
           body元素的样式设置
           - background-color: 页面背景颜色，#f0f0f0是浅灰色
           - color: 默认文字颜色，#444是深灰色
        */
        body {
            background-color: #f0f0f0;
            color: #444;
        }
        
        /* 
           超链接样式设置
           - color: 链接颜色，#08f是蓝色
        */
        a {
            color: #08f;
        }
    </style>
</head>
<body>
    <!-- 
        信息展示区域
        - id="info": 用于CSS和JavaScript选择器识别
        - 显示three.js框架信息和当前演示内容
    -->
    <div id="info">
        <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> 
        - NURBS非均匀有理B样条曲线和曲面演示示例
        <br>
        <span style="font-size: 14px; color: #666;">
            拖拽鼠标旋转视图 | 包含：NURBS曲线、NURBS曲面、NURBS体积截面
        </span>
    </div>

    <!-- 
        importmap：JavaScript模块导入映射配置
        - 现代浏览器支持的特性，用于定义模块的别名和路径
        - 允许在import语句中使用简化的模块名
    -->
    <script type="importmap">
        {
            "imports": {
                "three": "../build/three.module.js",
                
                "three/addons/": "./jsm/"
            }
        }
    </script>

    <!-- 
        主JavaScript代码模块
        - type="module"：声明这是一个ES6模块，支持import/export语法
        - 模块中的代码有自己的作用域，不会污染全局命名空间
    -->
    <script type="module">
        // ==================== 模块导入部分 ====================
        // 导入three.js的所有功能到THREE命名空间
        // * as THREE：将整个three.js模块导入并命名为THREE
        import * as THREE from 'three';

        // 导入性能统计工具
        // Stats：显示帧率、渲染时间等性能指标的库
        import Stats from 'three/addons/libs/stats.module.js';

        // 导入NURBS相关的曲线和曲面类
        // NURBSCurve：一维NURBS曲线类，用于创建复杂的平滑曲线
        import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
        // NURBSSurface：二维NURBS曲面类，用于创建复杂的平滑曲面
        import { NURBSSurface } from 'three/addons/curves/NURBSSurface.js';
        // NURBSVolume：三维NURBS体积类，用于创建复杂的体积模型
        import { NURBSVolume } from 'three/addons/curves/NURBSVolume.js';
        // ParametricGeometry：参数化几何体类，通过函数生成几何体顶点
        import { ParametricGeometry } from 'three/addons/geometries/ParametricGeometry.js';

        // ==================== 全局变量声明部分 ====================
        // DOM相关变量
        let container;    // 主容器DOM元素，包含所有three.js生成的元素
        let stats;        // 性能统计对象实例

        // three.js核心对象
        let camera;       // 相机对象，定义观察场景的视角
        let scene;        // 场景对象，包含所有要渲染的3D对象
        let renderer;     // 渲染器对象，负责将3D场景渲染到2D画布

        // 场景组织对象
        let group;        // Group对象，用于将多个3D对象组织在一起，方便统一变换

        // 交互控制变量
        let targetRotation = 0;                    // 目标旋转角度（弧度制），用于平滑旋转
        let targetRotationOnPointerDown = 0;       // 鼠标按下时的目标旋转角度
        let pointerX = 0;                          // 当前鼠标指针的X坐标（相对于窗口中心）
        let pointerXOnPointerDown = 0;             // 鼠标按下时的指针X坐标
        let windowHalfX = window.innerWidth / 2;   // 窗口宽度的一半，用于计算相对坐标

        // ==================== 初始化函数调用 ====================
        // 页面加载完成后调用init函数初始化整个3D场景
        init();

        // ==================== 初始化函数定义 ====================
        /**
         * 初始化整个3D场景
         * 1. 创建DOM容器和three.js核心对象
         * 2. 设置光照和相机
         * 3. 创建NURBS曲线、曲面和体积
         * 4. 设置渲染器和事件监听
         */
        function init() {
            // ---------- 1. 创建DOM容器 ----------
            // 创建div元素作为three.js的主容器
            container = document.createElement('div');
            // 将容器添加到body元素中
            document.body.appendChild(container);

            // ---------- 2. 创建相机 ----------
            /*
               透视相机PerspectiveCamera参数说明：
               - 50：视野角度（Field of View），单位度，越大看到的范围越广
               - window.innerWidth / window.innerHeight：宽高比，保持画面不变形
               - 1：近裁剪面距离，比这个距离近的对象不会被渲染
               - 2000：远裁剪面距离，比这个距离远的对象不会被渲染
            */
            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 2000);
            // 设置相机位置：x=0（中心），y=150（高度），z=750（距离观察点的深度）
            camera.position.set(0, 150, 750);

            // ---------- 3. 创建场景 ----------
            // 创建场景对象，所有3D对象都将添加到场景中
            scene = new THREE.Scene();
            // 设置场景背景颜色为浅灰色（与页面背景一致）
            scene.background = new THREE.Color(0xf0f0f0);

            // ---------- 4. 设置光照 ----------
            // 添加环境光：均匀照亮所有方向，无阴影，提供基础亮度
            scene.add(new THREE.AmbientLight(0xffffff));
            
            // 添加平行光：模拟太阳光，有方向性，会产生阴影
            const light = new THREE.DirectionalLight(0xffffff, 3);
            // 设置光源位置（从哪个方向照射）
            light.position.set(1, 1, 1);
            scene.add(light);

            // ---------- 5. 创建对象组 ----------
            // 创建组对象，用于统一管理所有NURBS相关对象
            group = new THREE.Group();
            // 将整个组向上移动50单位，使场景居中
            group.position.y = 50;
            // 将组添加到场景中
            scene.add(group);

            // ==================== 第一部分：NURBS曲线示例 ====================
            console.log("开始创建NURBS曲线...");
            
            // 定义NURBS曲线所需的数据结构
            const nurbsControlPoints = []; // 控制点数组，每个点是THREE.Vector4（x,y,z,w）
            const nurbsKnots = [];         // 节点向量数组，定义曲线的参数化
            const nurbsDegree = 3;         // 曲线阶数，3次NURBS曲线（C2连续）

            // 初始化节点向量：前degree+1个节点必须为0（clamped B样条）
            // 对于3阶曲线，需要4个0节点
            for (let i = 0; i <= nurbsDegree; i++) {
                nurbsKnots.push(0);
            }

            // 生成20个随机控制点和对应的节点
            for (let i = 0, j = 20; i < j; i++) {
                /*
                   创建带权重的控制点（Vector4）：
                   - x: -200到200之间的随机数，水平方向位置
                   - y: 0到400之间的随机数，垂直方向位置
                   - z: -200到200之间的随机数，深度方向位置
                   - w: 权重值，默认1，值越大控制点对曲线的影响越大
                */
                nurbsControlPoints.push(
                    new THREE.Vector4(
                        Math.random() * 400 - 200, // x坐标：随机范围[-200, 200]
                        Math.random() * 400,       // y坐标：随机范围[0, 400]
                        Math.random() * 400 - 200, // z坐标：随机范围[-200, 200]
                        1                          // 权重值：控制点的吸引力强度
                    )
                );

                /*
                   计算节点值：
                   - NURBS曲线需要均匀或非均匀的节点向量
                   - 这里使用均匀节点，值从0到1线性分布
                   - (i + 1) / (j - nurbsDegree)：计算归一化参数
                */
                const knot = (i + 1) / (j - nurbsDegree);
                // 使用clamp函数确保节点值在[0,1]范围内
                nurbsKnots.push(THREE.MathUtils.clamp(knot, 0, 1));
            }

            // 创建NURBS曲线对象
            /*
               参数说明：
               - nurbsDegree: 曲线阶数（3次）
               - nurbsKnots: 节点向量数组
               - nurbsControlPoints: 控制点数组
            */
            const nurbsCurve = new NURBSCurve(nurbsDegree, nurbsKnots, nurbsControlPoints);

            // 创建曲线几何体
            /*
               BufferGeometry：three.js的高性能几何体类型
               setFromPoints：从点数组创建几何体顶点
               getPoints(200)：从NURBS曲线采样200个点
            */
            const nurbsGeometry = new THREE.BufferGeometry();
            nurbsGeometry.setFromPoints(nurbsCurve.getPoints(200));

            // 创建曲线材质
            /*
               LineBasicMaterial：基础的线材质
               - color: 线条颜色，0x333333是深灰色
            */
            const nurbsMaterial = new THREE.LineBasicMaterial({ color: 0x333333 });

            // 创建线对象并添加到组中
            const nurbsLine = new THREE.Line(nurbsGeometry, nurbsMaterial);
            // 设置曲线位置：x=0（中心），y=-100（向下偏移），z=0（深度中心）
            nurbsLine.position.set(0, -100, 0);
            group.add(nurbsLine);

            // 创建控制点连线（显示控制多边形）
            const nurbsControlPointsGeometry = new THREE.BufferGeometry();
            // 使用控制点创建几何体，显示控制点的连接关系
            nurbsControlPointsGeometry.setFromPoints(nurbsCurve.controlPoints);

            // 控制点连线材质（半透明，便于观察）
            const nurbsControlPointsMaterial = new THREE.LineBasicMaterial({
                color: 0x333333,   // 深灰色
                opacity: 0.25,     // 25%不透明度
                transparent: true  // 启用透明度
            });

            // 创建控制点连线对象
            const nurbsControlPointsLine = new THREE.Line(
                nurbsControlPointsGeometry, 
                nurbsControlPointsMaterial
            );
            // 复制曲线的位置，使控制点连线与曲线对齐
            nurbsControlPointsLine.position.copy(nurbsLine.position);
            group.add(nurbsControlPointsLine);

            console.log("NURBS曲线创建完成");

            // ==================== 第二部分：NURBS曲面示例 ====================
            console.log("开始创建NURBS曲面...");
            
            // 使用代码块创建局部作用域，避免变量污染
            {
                /*
                   定义曲面控制点网格：
                   - 3行（u方向）x 4列（v方向）的控制点网格
                   - 每个控制点都是THREE.Vector4（x,y,z,w）
                   - 控制点构成一个3D网格，NURBS曲面通过这些点插值生成
                */
                const nsControlPoints = [
                    // 第一行控制点（u=0）
                    [
                        new THREE.Vector4(-200, -200, 100, 1),   // 左下前角
                        new THREE.Vector4(-200, -100, -200, 1),  // 左中前角
                        new THREE.Vector4(-200, 100, 250, 1),    // 左中后角
                        new THREE.Vector4(-200, 200, -100, 1)    // 左上后角
                    ],
                    // 第二行控制点（u=0.5）
                    [
                        new THREE.Vector4(0, -200, 0, 1),        // 中下前角
                        new THREE.Vector4(0, -100, -100, 5),     // 中中前角，权重5（强影响）
                        new THREE.Vector4(0, 100, 150, 5),       // 中中后角，权重5（强影响）
                        new THREE.Vector4(0, 200, 0, 1)          // 中上后角
                    ],
                    // 第三行控制点（u=1）
                    [
                        new THREE.Vector4(200, -200, -100, 1),   // 右下前角
                        new THREE.Vector4(200, -100, 200, 1),    // 右中前角
                        new THREE.Vector4(200, 100, -250, 1),    // 右中后角
                        new THREE.Vector4(200, 200, 100, 1)      // 右上后角
                    ]
                ];
                
                // 定义两个参数方向的阶数
                const degree1 = 2; // u方向阶数（2次，C1连续）
                const degree2 = 3; // v方向阶数（3次，C2连续）
                
                // 定义节点向量（定义参数化方式）
                const knots1 = [0, 0, 0, 1, 1, 1];           // u方向节点向量
                const knots2 = [0, 0, 0, 0, 1, 1, 1, 1];     // v方向节点向量
                
                // 创建NURBS曲面对象
                const nurbsSurface = new NURBSSurface(
                    degree1, degree2, knots1, knots2, nsControlPoints
                );

                // 加载纹理贴图
                /*
                   TextureLoader：纹理加载器
                   - 加载UV网格纹理，用于可视化曲面的参数化
                */
                const map = new THREE.TextureLoader().load('textures/uv_grid_opengl.jpg');
                map.wrapS = map.wrapT = THREE.RepeatWrapping; // 设置纹理重复模式
                map.anisotropy = 16; // 设置各向异性过滤级别，提高纹理清晰度
                map.colorSpace = THREE.SRGBColorSpace; // 设置颜色空间为sRGB

                /**
                 * 曲面求值函数
                 * 用于ParametricGeometry，通过(u,v)参数获取曲面上的点
                 * @param {number} u - 第一个参数，范围[0,1]
                 * @param {number} v - 第二个参数，范围[0,1]
                 * @param {THREE.Vector3} target - 存储计算结果的向量
                 * @return {THREE.Vector3} 曲面上的点坐标
                 */
                function getSurfacePoint(u, v, target) {
                    return nurbsSurface.getPoint(u, v, target);
                }

                // 创建参数化几何体
                /*
                   ParametricGeometry参数：
                   - getSurfacePoint: 求值函数
                   - 20: u方向分段数（采样密度）
                   - 20: v方向分段数（采样密度）
                */
                const geometry = new ParametricGeometry(getSurfacePoint, 20, 20);
                
                // 创建材质
                const material = new THREE.MeshLambertMaterial({
                    map: map,               // 使用加载的纹理
                    side: THREE.DoubleSide  // 双面渲染，两面都显示纹理
                });
                
                // 创建网格对象
                const object = new THREE.Mesh(geometry, material);
                // 设置位置：x=-400（左侧），y=100（向上偏移），z=0（深度中心）
                object.position.set(-400, 100, 0);
                // 保持原始大小（不缩放）
                object.scale.multiplyScalar(1);
                group.add(object);
            }
            
            console.log("NURBS曲面创建完成");

            // ==================== 第三部分：NURBS体积示例 ====================
            console.log("开始创建NURBS体积...");
            
            {
                /*
                   定义体积控制点网格：
                   - 3层（u方向）x 4行（v方向）x 2列（w方向）的控制点网格
                   - 这是一个三维控制点阵列，定义了一个体积空间
                */
                const nsControlPoints = [
                    // 第一层（u=0）
                    [
                        [ // 第一行（v=0）
                            new THREE.Vector4(-200, -200, -200, 1), // 左下前角
                            new THREE.Vector4(-200, -200, 200, 1)   // 左下后角
                        ],
                        [ // 第二行（v=1/3）
                            new THREE.Vector4(-200, -100, -200, 1),
                            new THREE.Vector4(-200, -100, 200, 1)
                        ],
                        [ // 第三行（v=2/3）
                            new THREE.Vector4(-200, 100, -200, 1),
                            new THREE.Vector4(-200, 100, 200, 1)
                        ],
                        [ // 第四行（v=1）
                            new THREE.Vector4(-200, 200, -200, 1),
                            new THREE.Vector4(-200, 200, 200, 1)
                        ]
                    ],
                    // 第二层（u=0.5）
                    [
                        [
                            new THREE.Vector4(0, -200, -200, 1),
                            new THREE.Vector4(0, -200, 200, 1)
                        ],
                        [
                            new THREE.Vector4(0, -100, -200, 1),
                            new THREE.Vector4(0, -100, 200, 1)
                        ],
                        [
                            new THREE.Vector4(0, 100, -200, 1),
                            new THREE.Vector4(0, 100, 200, 1)
                        ],
                        [
                            new THREE.Vector4(0, 200, -200, 1),
                            new THREE.Vector4(0, 200, 200, 1)
                        ]
                    ],
                    // 第三层（u=1）
                    [
                        [
                            new THREE.Vector4(200, -200, -200, 1),
                            new THREE.Vector4(200, -200, 200, 1)
                        ],
                        [
                            new THREE.Vector4(200, -100, 0, 1),    // z坐标变化，产生扭曲
                            new THREE.Vector4(200, -100, 100, 1)
                        ],
                        [
                            new THREE.Vector4(200, 100, 0, 1),
                            new THREE.Vector4(200, 100, 100, 1)
                        ],
                        [
                            new THREE.Vector4(200, 200, 0, 1),
                            new THREE.Vector4(200, 200, 100, 1)
                        ]
                    ]
                ];
                
                // 定义三个参数方向的阶数
                const degree1 = 2; // u方向阶数
                const degree2 = 3; // v方向阶数
                const degree3 = 1; // w方向阶数（1次，线性变化）
                
                // 定义节点向量
                const knots1 = [0, 0, 0, 1, 1, 1];     // u方向
                const knots2 = [0, 0, 0, 0, 1, 1, 1, 1]; // v方向
                const knots3 = [0, 0, 1, 1];           // w方向
                
                // 创建NURBS体积对象
                const nurbsVolume = new NURBSVolume(
                    degree1, degree2, degree3, 
                    knots1, knots2, knots3, 
                    nsControlPoints
                );

                // 加载纹理贴图（与曲面使用相同的纹理）
                const map = new THREE.TextureLoader().load('textures/uv_grid_opengl.jpg');
                map.wrapS = map.wrapT = THREE.RepeatWrapping;
                map.anisotropy = 16;
                map.colorSpace = THREE.SRGBColorSpace;

                /*
                   由于ParametricGeometry只支持双变量参数几何体（曲面），
                   而NURBSVolume是三变量的（体积），
                   我们需要通过固定一个参数值来创建多个截面：
                   - 固定w值：创建前后截面
                   - 固定v值：创建上下截面
                   - 固定u值：创建左右截面
                */

                // ---------- 截面1：前截面（w=0） ----------
                function getSurfacePointFront(u, v, target) {
                    return nurbsVolume.getPoint(u, v, 0, target);
                }

                // ---------- 截面2：中间截面（w=0.5） ----------
                function getSurfacePointMiddle(u, v, target) {
                    return nurbsVolume.getPoint(u, v, 0.5, target);
                }

                // ---------- 截面3：后截面（w=1） ----------
                function getSurfacePointBack(u, v, target) {
                    return nurbsVolume.getPoint(u, v, 1, target);
                }

                // ---------- 截面4：顶截面（v=1） ----------
                function getSurfacePointTop(u, w, target) {
                    return nurbsVolume.getPoint(u, 1, w, target);
                }

                // ---------- 截面5：侧截面（u=0） ----------
                function getSurfacePointSide(v, w, target) {
                    return nurbsVolume.getPoint(0, v, w, target);
                }

                // 创建前截面网格（w=0）
                const geometryFront = new ParametricGeometry(getSurfacePointFront, 20, 20);
                const materialFront = new THREE.MeshLambertMaterial({ 
                    map: map, 
                    side: THREE.DoubleSide 
                });
                const objectFront = new THREE.Mesh(geometryFront, materialFront);
                objectFront.position.set(400, 100, 0);  // 位置：右侧
                objectFront.scale.multiplyScalar(0.5);  // 缩放：缩小一半
                group.add(objectFront);

                // 创建中间截面网格（w=0.5）
                const geometryMiddle = new ParametricGeometry(getSurfacePointMiddle, 20, 20);
                const materialMiddle = new THREE.MeshLambertMaterial({ 
                    map: map, 
                    side: THREE.DoubleSide 
                });
                const objectMiddle = new THREE.Mesh(geometryMiddle, materialMiddle);
                objectMiddle.position.set(400, 100, 0);
                objectMiddle.scale.multiplyScalar(0.5);
                group.add(objectMiddle);

                // 创建后截面网格（w=1）
                const geometryBack = new ParametricGeometry(getSurfacePointBack, 20, 20);
                const materialBack = new THREE.MeshLambertMaterial({ 
                    map: map, 
                    side: THREE.DoubleSide 
                });
                const objectBack = new THREE.Mesh(geometryBack, materialBack);
                objectBack.position.set(400, 100, 0);
                objectBack.scale.multiplyScalar(0.5);
                group.add(objectBack);

                // 创建顶截面网格（v=1）
                const geometryTop = new ParametricGeometry(getSurfacePointTop, 20, 20);
                const materialTop = new THREE.MeshLambertMaterial({ 
                    map: map, 
                    side: THREE.DoubleSide 
                });
                const objectTop = new THREE.Mesh(geometryTop, materialTop);
                objectTop.position.set(400, 100, 0);
                objectTop.scale.multiplyScalar(0.5);
                group.add(objectTop);

                // 创建侧截面网格（u=0）
                const geometrySide = new ParametricGeometry(getSurfacePointSide, 20, 20);
                const materialSide = new THREE.MeshLambertMaterial({ 
                    map: map, 
                    side: THREE.DoubleSide 
                });
                const objectSide = new THREE.Mesh(geometrySide, materialSide);
                objectSide.position.set(400, 100, 0);
                objectSide.scale.multiplyScalar(0.5);
                group.add(objectSide);
            }
            
            console.log("NURBS体积截面创建完成");

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

            // ==================== 性能统计 ====================
            // 创建性能统计对象
            stats = new Stats();
            // 将性能统计面板添加到容器中
            container.appendChild(stats.dom);

            // ==================== 事件监听器设置 ====================
            // 禁止容器的默认触摸行为（防止页面滚动）
            container.style.touchAction = 'none';
            // 添加指针按下事件监听（支持鼠标和触摸）
            container.addEventListener('pointerdown', onPointerDown);

            // 窗口大小变化事件监听
            window.addEventListener('resize', onWindowResize);
            
            console.log("初始化完成，场景已创建");
        }

        // ==================== 窗口大小变化处理函数 ====================
        /**
         * 处理窗口大小变化事件
         * 1. 更新窗口半宽
         * 2. 更新相机宽高比
         * 3. 更新渲染器尺寸
         */
        function onWindowResize() {
            console.log("窗口大小变化，调整相机和渲染器");
            
            // 更新窗口半宽（用于鼠标交互计算）
            windowHalfX = window.innerWidth / 2;

            // 更新相机宽高比
            camera.aspect = window.innerWidth / window.innerHeight;
            // 必须调用此方法，重新计算相机投影矩阵
            camera.updateProjectionMatrix();

            // 更新渲染器尺寸，适应新窗口大小
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // ==================== 指针交互事件处理函数 ====================
        /**
         * 处理指针（鼠标/触摸）按下事件
         * 1. 记录按下时的状态
         * 2. 添加移动和抬起事件监听
         * @param {PointerEvent} event - 指针事件对象
         */
        function onPointerDown(event) {
            // 如果是多点触控的非主指针，忽略（只处理主指针）
            if (event.isPrimary === false) return;

            console.log("指针按下，开始拖拽交互");

            // 计算指针相对于窗口中心的X坐标
            pointerXOnPointerDown = event.clientX - windowHalfX;
            // 记录当前的目标旋转角度
            targetRotationOnPointerDown = targetRotation;

            // 添加指针移动和抬起事件监听器
            document.addEventListener('pointermove', onPointerMove);
            document.addEventListener('pointerup', onPointerUp);
        }

        /**
         * 处理指针移动事件
         * 根据指针移动距离计算目标旋转角度
         * @param {PointerEvent} event - 指针事件对象
         */
        function onPointerMove(event) {
            // 如果是多点触控的非主指针，忽略
            if (event.isPrimary === false) return;

            // 计算当前指针相对于窗口中心的X坐标
            pointerX = event.clientX - windowHalfX;

            /*
               计算新的目标旋转角度：
               - 根据指针移动距离计算旋转增量
               - 0.02是旋转灵敏度系数，值越大旋转越快
               - 公式：目标旋转 = 按下时的旋转 + 移动距离 × 灵敏度
            */
            targetRotation = targetRotationOnPointerDown + 
                           (pointerX - pointerXOnPointerDown) * 0.02;
        }

        /**
         * 处理指针抬起事件
         * 移除移动和抬起事件监听器
         * @param {PointerEvent} event - 指针事件对象
         */
        function onPointerUp(event) {
            // 如果是多点触控的非主指针，忽略
            if (event.isPrimary === false) return;

            console.log("指针抬起，结束拖拽交互");

            // 移除事件监听器，停止交互
            document.removeEventListener('pointermove', onPointerMove);
            document.removeEventListener('pointerup', onPointerUp);
        }

        // ==================== 动画循环函数 ====================
        /**
         * 动画主循环函数
         * 由renderer.setAnimationLoop自动调用，每秒约60次
         * 1. 调用render函数更新场景
         * 2. 更新性能统计
         */
        function animate() {
            // 渲染场景
            render();
            // 更新性能统计面板（FPS、帧时间等）
            stats.update();
        }

        /**
         * 渲染函数
         * 1. 更新组的旋转角度（平滑插值）
         * 2. 将3D场景渲染到2D画布
         */
        function render() {
            /*
               平滑更新组的旋转角度：
               - 使用线性插值实现平滑旋转效果
               - 0.05是插值系数，值越小旋转越平滑但响应越慢
               - 公式：当前旋转 += (目标旋转 - 当前旋转) × 插值系数
            */
            group.rotation.y += (targetRotation - group.rotation.y) * 0.05;
            
            /*
               渲染场景：
               - renderer.render(场景, 相机)
               - 将3D场景通过相机的视角渲染到画布上
            */
            renderer.render(scene, camera);
        }
    </script>
</body>
</html>