<!-- Three.js Catmull-Rom样条曲线编辑器 - 功能描述与技术点分析
🎯 项目概述
这是一个基于Three.js的交互式3D样条曲线编辑器，允许用户实时创建、编辑和可视化Catmull-Rom样条曲线。该工具提供了三种不同类型的Catmull-Rom曲线算法，支持直观的3D控制点操作，并能导出曲线数据供其他项目使用。

✨ 主要功能
1. 三维曲线可视化
实时显示三种Catmull-Rom曲线：

🔴 均匀曲线（Uniform）：红色，参数均匀分布

🟢 向心曲线（Centripetal）：绿色，产生更平滑的过渡

🔵 弦长曲线（Chordal）：蓝色，适合不均匀分布的点

曲线平滑渲染：使用200个分段确保曲线平滑度

实时更新：控制点移动时曲线立即更新

2. 交互式控制点管理
添加/删除控制点：通过GUI按钮动态调整控制点数量

3D拖拽操作：使用变换控制器实现控制点的移动、旋转、缩放

随机生成：新增控制点可随机生成位置

最小限制：确保至少保留4个控制点（Catmull-Rom曲线要求）

3. 参数控制与调节
张力参数调节：滑块控制均匀曲线的"紧绷"程度（0-1范围）

曲线类型切换：独立控制三种曲线的显示/隐藏

预设数据加载：内置示例控制点配置

4. 数据导入导出
代码生成：将当前控制点导出为可直接使用的Three.js代码

控制台输出：调试信息输出到浏览器控制台

一键复制：通过对话框提示用户复制代码

5. 场景与环境
完整3D场景：包含地面、网格辅助线、光照系统

阴影效果：控制点和曲线都投射真实阴影

相机控制：自由旋转、缩放、平移视角

响应式布局：自动适应窗口大小变化

🛠️ 核心技术点
1. Three.js核心架构
场景图管理：完整的场景树结构，包含相机、灯光、几何体等

渲染管线：WebGL渲染器配合阴影映射

几何体系统：BufferGeometry高效存储顶点数据

材质与光照：MeshLambertMaterial、阴影材质、聚光灯

2. Catmull-Rom曲线算法实现
javascript
// Three.js内置的CatmullRomCurve3类
new THREE.CatmullRomCurve3(controlPoints, closed, curveType, tension)

// 支持的曲线类型：
// - 'centripetal'：向心参数化，避免尖角
// - 'chordal'：弦长参数化，适合不均匀点
// - 'catmullrom'：均匀参数化，默认类型
3. 交互系统设计
射线拾取（Raycasting）：

javascript
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster.intersectObjects(objects);
坐标转换：屏幕坐标 ↔ 归一化设备坐标 ↔ 3D世界坐标

事件处理：鼠标按下/移动/抬起的事件链管理

4. 控制器集成
OrbitControls：相机轨道控制，提供自然视角操作

TransformControls：对象变换控制，支持移动/旋转/缩放

控制器协调：避免控制器间冲突（变换时禁用轨道控制）

5. GUI控制系统
lil-gui库集成：简洁的参数控制面板

实时绑定：参数变化立即触发渲染更新

函数绑定：将按钮直接绑定到功能函数

6. 性能优化技术
BufferAttribute重用：避免每帧创建新的几何体

needsUpdate标记：仅在需要时更新GPU缓冲区

事件节流：合理的事件处理避免过度渲染

7. 数据流管理
text
用户交互 → 控制点位置更新 → 曲线重新计算 → 几何体更新 → GPU渲染
      ↑                                 ↓
  GUI参数控制 ←——— 渲染结果显示 ←———
🔧 关键代码模块
1. 初始化模块
场景、相机、渲染器设置

光照和阴影配置

控制器初始化和事件绑定

2. 曲线计算模块
javascript
function updateSplineOutline() {
  for (每个曲线类型) {
    for (每个分段点 i = 0 到 ARC_SEGMENTS) {
      t = i / (ARC_SEGMENTS - 1);  // 归一化参数
      curve.getPoint(t, point);    // 计算曲线点
      geometry.setXYZ(i, point);   // 更新几何体
    }
    geometry.needsUpdate = true;    // 标记需要更新
  }
}
3. 交互处理模块
鼠标事件到3D坐标的转换

控制点的选择和变换

点击与拖拽的区分

4. 数据序列化模块
控制点位置的格式化输出

THREE.Vector3对象的字符串表示

用户友好的数据导出界面

🎨 视觉效果特性
颜色编码：不同类型曲线使用不同颜色，便于区分

透明效果：35%透明度的曲线，避免视觉遮挡

阴影系统：完整的阴影投射和接收，增强深度感

辅助视觉：网格地面提供空间参考

3D立方体标记：直观显示控制点位置和方向

📱 用户界面设计
分层布局：

3D视图占据主区域

GUI控制面板浮动显示

信息提示位于角落

操作反馈：

鼠标悬停时自动附加变换控制器

点击空白处取消选择

实时视觉更新

🔄 工作流程
初始化 → 加载预设曲线

编辑 → 拖拽控制点调整形状

调节 → 修改参数优化曲线

导出 → 生成代码供其他项目使用

重置 → 可随时添加/删除控制点重新开始

🚀 技术亮点
完整的3D交互体验：从2D鼠标操作到3D空间变换的完整映射

算法可视化：将抽象的数学曲线算法转化为直观的3D图形

实时性能：即使有多个控制点和复杂曲线，仍保持流畅交互

生产就绪：导出的代码可直接在Three.js项目中使用

教育价值：直观展示不同Catmull-Rom参数化方法的差异

📊 适用场景
3D动画制作：创建角色移动路径或相机动画轨迹

工业设计：产品曲线建模和可视化

游戏开发：设计关卡路径或特效轨迹

数据可视化：复杂数据关系的平滑曲线展示

数学教育：计算机图形学和曲线算法的教学演示

科研工具：曲线拟合和参数化研究 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js Catmull-Rom样条曲线编辑器 -->
		<title>Three.js WebGL - Catmull-Rom样条曲线编辑器</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">
		<style>
			/* 页面基础样式：浅灰色背景，深灰色文字 */
			body {
				background-color: #f0f0f0;
				color: #444;
			}
			/* 链接样式：蓝色链接 */
			a {
				color: #08f;
			}
		</style>
	</head>
	<body>
		<!-- Three.js渲染器主容器，所有3D内容将在此显示 -->
		<div id="container"></div>
		<!-- 页面信息区域：显示项目信息和Three.js链接 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - Catmull-Rom样条曲线编辑器
		</div>

		<!-- ES模块导入映射表：定义JavaScript模块的路径别名 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">
			// 导入Three.js核心模块
			import * as THREE from 'three';
			// 导入lil-gui库，用于创建图形用户界面控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			// 导入轨道控制器：允许用户用鼠标旋转、缩放和平移相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入变换控制器：允许用户拖拽、旋转、缩放场景中的对象
			import { TransformControls } from 'three/addons/controls/TransformControls.js';

			// ========== 全局变量声明 ==========
			let container;  // DOM容器元素的引用，用于承载Three.js渲染器
			let camera, scene, renderer;  // Three.js三大核心对象：相机、场景、渲染器
			const splineHelperObjects = [];  // 存储所有控制点对象的数组（立方体表示的控制点）
			let splinePointsLength = 4;  // 当前样条曲线的控制点数量，初始为4个
			const positions = [];  // 存储所有控制点位置的数组（Vector3对象引用）
			const point = new THREE.Vector3();  // 临时向量对象，用于计算和存储曲线上的点

			// ========== 鼠标交互相关变量 ==========
			const raycaster = new THREE.Raycaster();  // 射线投射器：用于鼠标点击检测
			const pointer = new THREE.Vector2();  // 归一化的鼠标坐标（范围：-1到1）
			const onUpPosition = new THREE.Vector2();  // 鼠标按键抬起时的屏幕坐标
			const onDownPosition = new THREE.Vector2();  // 鼠标按键按下时的屏幕坐标

			// ========== 几何体和控制器 ==========
			const geometry = new THREE.BoxGeometry( 20, 20, 20 );  // 控制点的几何体：边长为20的立方体
			let transformControl;  // 变换控制器实例，用于交互操作控制点

			const ARC_SEGMENTS = 200;  // 样条曲线的分段数，数值越大曲线越平滑，但计算开销也越大

			// ========== 样条曲线存储对象 ==========
			const splines = {};  // 存储不同类型Catmull-Rom曲线的对象

			// ========== GUI控制参数配置 ==========
			const params = {
				uniform: true,  // 是否显示"均匀"类型的Catmull-Rom曲线
				tension: 0.5,   // 张力参数：控制曲线的"紧绷"程度，范围0-1，影响均匀曲线
				centripetal: true,  // 是否显示"向心"类型的Catmull-Rom曲线
				chordal: true,   // 是否显示"弦长"类型的Catmull-Rom曲线
				addPoint: addPoint,  // 添加控制点按钮绑定的函数
				removePoint: removePoint,  // 移除控制点按钮绑定的函数
				exportSpline: exportSpline  // 导出样条数据按钮绑定的函数
			};

			// 程序入口：调用初始化函数
			init();

			// ========== 主初始化函数 ==========
			function init() {
				// 获取页面上的容器元素
				container = document.getElementById( 'container' );

				// 创建Three.js场景，设置浅灰色背景
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xf0f0f0 );

				// 创建透视相机
				camera = new THREE.PerspectiveCamera(
					70,  // 视野角度（FOV）：垂直方向70度
					window.innerWidth / window.innerHeight,  // 宽高比：根据窗口计算
					1,   // 近裁剪面：距离相机1个单位以内的物体不显示
					10000  // 远裁剪面：距离相机10000个单位以外的物体不显示
				);
				// 设置相机初始位置：X=0, Y=250, Z=1000
				camera.position.set( 0, 250, 1000 );
				scene.add( camera );  // 将相机添加到场景中

				// ========== 光照设置 ==========
				// 添加环境光：提供均匀的基础照明，无方向性
				scene.add( new THREE.AmbientLight( 0xf0f0f0, 3 ) );
				
				// 创建聚光灯：提供主要照明和阴影
				const light = new THREE.SpotLight( 0xffffff, 4.5 );  // 白色灯光，强度4.5
				light.position.set( 0, 1500, 200 );  // 设置灯光位置
				light.angle = Math.PI * 0.2;  // 照射角度：36度（Math.PI * 0.2弧度）
				light.decay = 0;  // 衰减率：0表示无衰减
				light.castShadow = true;  // 启用阴影投射
				light.shadow.camera.near = 200;  // 阴影相机近平面：200个单位
				light.shadow.camera.far = 2000;   // 阴影相机远平面：2000个单位
				light.shadow.bias = - 0.000222;   // 阴影偏移：修正阴影失真问题
				light.shadow.mapSize.width = 1024;  // 阴影贴图宽度：1024像素
				light.shadow.mapSize.height = 1024; // 阴影贴图高度：1024像素
				scene.add( light );

				// ========== 地面和辅助网格 ==========
				// 创建地面平面：作为场景的基础平面
				const planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );  // 2000x2000的平面
				planeGeometry.rotateX( - Math.PI / 2 );  // 绕X轴旋转-90度，使平面水平
				const planeMaterial = new THREE.ShadowMaterial( { 
					color: 0x000000,  // 黑色阴影材质
					opacity: 0.2  // 透明度20%
				} );
				const plane = new THREE.Mesh( planeGeometry, planeMaterial );
				plane.position.y = - 200;  // 将地面放置在Y轴-200的位置
				plane.receiveShadow = true;  // 地面接收阴影
				scene.add( plane );

				// 添加网格辅助线：帮助用户理解3D空间
				const helper = new THREE.GridHelper( 2000, 100 );  // 2000x2000网格，分为100格
				helper.position.y = - 199;  // 略微高于地面，避免Z-fighting
				helper.material.opacity = 0.25;  // 透明度25%
				helper.material.transparent = true;  // 启用透明
				scene.add( helper );

				// ========== 渲染器设置 ==========
				renderer = new THREE.WebGLRenderer( { antialias: true } );  // 启用抗锯齿
				renderer.setPixelRatio( window.devicePixelRatio );  // 设置像素比，适配高DPI屏幕
				renderer.setSize( window.innerWidth, window.innerHeight );  // 设置渲染器大小为窗口大小
				renderer.shadowMap.enabled = true;  // 启用阴影映射
				container.appendChild( renderer.domElement );  // 将渲染器的canvas添加到DOM

				// ========== GUI控制面板设置 ==========
				const gui = new GUI();  // 创建lil-gui实例
				
				// 添加"均匀曲线"显示/隐藏开关
				gui.add( params, 'uniform' )
				   .name('显示均匀曲线')  // 设置显示名称
				   .onChange( render );  // 值改变时重新渲染
				
				// 添加张力参数滑块
				gui.add( params, 'tension', 0, 1 )
				   .name('张力参数')
				   .step( 0.01 )  // 滑动步长为0.01
				   .onChange( function ( value ) {
						splines.uniform.tension = value;  // 更新均匀曲线的张力参数
						updateSplineOutline();  // 更新曲线显示
						render();  // 重新渲染场景
					} );
				
				// 添加"向心曲线"显示/隐藏开关
				gui.add( params, 'centripetal' )
				   .name('显示向心曲线')
				   .onChange( render );
				
				// 添加"弦长曲线"显示/隐藏开关
				gui.add( params, 'chordal' )
				   .name('显示弦长曲线')
				   .onChange( render );
				
				// 添加"添加控制点"按钮
				gui.add( params, 'addPoint' )
				   .name('添加控制点');
				
				// 添加"移除控制点"按钮
				gui.add( params, 'removePoint' )
				   .name('移除控制点');
				
				// 添加"导出样条数据"按钮
				gui.add( params, 'exportSpline' )
				   .name('导出样条数据');
				
				gui.open();  // 默认打开GUI面板

				// ========== 相机控制器设置 ==========
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.damping = 0.2;  // 阻尼系数，使相机移动更平滑
				controls.addEventListener( 'change', render );  // 相机变化时重新渲染

				// ========== 变换控制器设置 ==========
				transformControl = new TransformControls( camera, renderer.domElement );
				transformControl.addEventListener( 'change', render );  // 变换时重新渲染
				// 当变换控制器激活时，禁用轨道控制器，避免冲突
				transformControl.addEventListener( 'dragging-changed', function ( event ) {
					controls.enabled = ! event.value;
				} );
				scene.add( transformControl.getHelper() );  // 添加变换控制器的辅助UI

				// 当变换控制器完成变换操作时，更新曲线显示
				transformControl.addEventListener( 'objectChange', function () {
					updateSplineOutline();
				} );

				// ========== 事件监听器注册 ==========
				document.addEventListener( 'pointerdown', onPointerDown );  // 鼠标按下事件
				document.addEventListener( 'pointerup', onPointerUp );      // 鼠标抬起事件
				document.addEventListener( 'pointermove', onPointerMove );  // 鼠标移动事件
				window.addEventListener( 'resize', onWindowResize );       // 窗口大小改变事件

				// ========== 样条曲线初始化 ==========
				// 创建初始控制点对象（立方体）
				for ( let i = 0; i < splinePointsLength; i ++ ) {
					addSplineObject( positions[ i ] );
				}

				positions.length = 0;  // 清空位置数组，准备重新填充

				// 从控制点对象获取位置信息
				for ( let i = 0; i < splinePointsLength; i ++ ) {
					positions.push( splineHelperObjects[ i ].position );
				}

				// 创建用于绘制曲线的BufferGeometry
				const geometry = new THREE.BufferGeometry();
				// 设置位置属性：ARC_SEGMENTS个点，每个点有x,y,z三个分量
				geometry.setAttribute( 'position', new THREE.BufferAttribute( 
					new Float32Array( ARC_SEGMENTS * 3 ),  // 200个点 * 3个分量 = 600个浮点数
					3  // 每个顶点有3个分量（x, y, z）
				) );

				// ========== 创建三种Catmull-Rom样条曲线 ==========
				// 1. 均匀曲线 (uniform) - 红色
				let curve = new THREE.CatmullRomCurve3( positions );  // 基于控制点创建曲线
				curve.curveType = 'catmullrom';  // 设置曲线类型为均匀Catmull-Rom
				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
					color: 0xff0000,  // 红色线
					opacity: 0.35     // 35%透明度
				} ) );
				curve.mesh.castShadow = true;  // 曲线投射阴影
				splines.uniform = curve;  // 存储到splines对象

				// 2. 向心曲线 (centripetal) - 绿色
				curve = new THREE.CatmullRomCurve3( positions );
				curve.curveType = 'centripetal';  // 设置曲线类型为向心Catmull-Rom
				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
					color: 0x00ff00,  // 绿色线
					opacity: 0.35
				} ) );
				curve.mesh.castShadow = true;
				splines.centripetal = curve;

				// 3. 弦长曲线 (chordal) - 蓝色
				curve = new THREE.CatmullRomCurve3( positions );
				curve.curveType = 'chordal';  // 设置曲线类型为弦长Catmull-Rom
				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
					color: 0x0000ff,  // 蓝色线
					opacity: 0.35
				} ) );
				curve.mesh.castShadow = true;
				splines.chordal = curve;

				// 将所有曲线网格添加到场景
				for ( const k in splines ) {
					const spline = splines[ k ];
					scene.add( spline.mesh );
				}

				// ========== 加载预设控制点位置 ==========
				// 这些是预先定义的控制点坐标，用于展示曲线效果
				load( [ 
					new THREE.Vector3( 289.76843686945404, 452.51481137238443, 56.10018915737797 ),
					new THREE.Vector3( -53.56300074753207, 171.49711742836848, -14.495472686253045 ),
					new THREE.Vector3( -91.40118730204415, 176.4306956436485, -6.958271935582161 ),
					new THREE.Vector3( -383.785318791128, 491.1365363371675, 47.869296953772746 ) 
				] );

				// 执行初始渲染
				render();
			}

			// ========== 添加控制点对象函数 ==========
			/**
			 * 在场景中添加一个表示控制点的立方体对象
			 * @param {THREE.Vector3} position - 可选的初始位置，如果不提供则随机生成
			 * @returns {THREE.Mesh} 返回创建的控制点对象
			 */
			function addSplineObject( position ) {
				// 创建随机颜色的Lambert材质
				const material = new THREE.MeshLambertMaterial( { 
					color: Math.random() * 0xffffff  // 生成随机RGB颜色
				} );
				const object = new THREE.Mesh( geometry, material );

				// 设置对象位置
				if ( position ) {
					// 如果提供了位置参数，则使用该位置
					object.position.copy( position );
				} else {
					// 否则随机生成位置
					object.position.x = Math.random() * 1000 - 500;  // X轴：-500到500
					object.position.y = Math.random() * 600;        // Y轴：0到600（保持在地面上方）
					object.position.z = Math.random() * 800 - 400;  // Z轴：-400到400
				}

				// 设置阴影属性
				object.castShadow = true;      // 对象投射阴影
				object.receiveShadow = true;   // 对象接收阴影
				
				// 添加到场景和全局数组
				scene.add( object );
				splineHelperObjects.push( object );
				
				return object;
			}

			// ========== 添加控制点函数 ==========
			/**
			 * 添加新的控制点并更新曲线
			 */
			function addPoint() {
				splinePointsLength ++;  // 增加控制点计数
				positions.push( addSplineObject().position );  // 添加新对象并存储其位置
				updateSplineOutline();  // 更新所有曲线的显示
				render();  // 重新渲染场景
			}

			// ========== 移除控制点函数 ==========
			/**
			 * 移除最后一个控制点并更新曲线
			 * 注意：Catmull-Rom曲线需要至少4个控制点才能正确绘制
			 */
			function removePoint() {
				// 确保至少有4个控制点
				if ( splinePointsLength <= 4 ) {
					console.warn('至少需要4个控制点才能绘制Catmull-Rom曲线');
					return;
				}

				// 从数组中移除最后一个控制点对象
				const point = splineHelperObjects.pop();
				splinePointsLength --;
				positions.pop();

				// 如果变换控制器当前控制的是这个点，则分离控制器
				if ( transformControl.object === point ) {
					transformControl.detach();
				}
				scene.remove( point );  // 从场景中移除对象

				updateSplineOutline();  // 更新曲线显示
				render();  // 重新渲染场景
			}

			// ========== 更新样条曲线显示函数 ==========
			/**
			 * 根据当前控制点位置更新所有样条曲线的几何数据
			 */
			function updateSplineOutline() {
				// 遍历所有类型的曲线（uniform, centripetal, chordal）
				for ( const k in splines ) {
					const spline = splines[ k ];  // 获取当前类型的曲线对象
					const splineMesh = spline.mesh;  // 获取曲线的网格对象
					const position = splineMesh.geometry.attributes.position;  // 获取位置属性

					// 计算曲线上ARC_SEGMENTS个点的位置
					for ( let i = 0; i < ARC_SEGMENTS; i ++ ) {
						// 计算归一化参数t（从0到1）
						const t = i / ( ARC_SEGMENTS - 1 );
						
						// 获取曲线上参数t对应的点坐标
						// 第二个参数point是输出参数，函数会将结果存储到这个向量中
						spline.getPoint( t, point );
						
						// 将计算得到的点坐标设置到几何体的顶点位置
						position.setXYZ( i, point.x, point.y, point.z );
					}

					// 标记位置属性需要更新，通知Three.js更新GPU缓冲区
					position.needsUpdate = true;
				}
			}

			// ========== 导出样条数据函数 ==========
			/**
			 * 将当前所有控制点的位置导出为可复用的代码
			 */
			function exportSpline() {
				const strplace = [];  // 存储格式化后的控制点字符串

				// 遍历所有控制点，格式化为THREE.Vector3构造函数调用
				for ( let i = 0; i < splinePointsLength; i ++ ) {
					const p = splineHelperObjects[ i ].position;  // 获取控制点位置
					// 格式：new THREE.Vector3(x坐标, y坐标, z坐标)
					strplace.push( `new THREE.Vector3(${p.x}, ${p.y}, ${p.z})` );
				}

				// 在控制台输出，方便调试
				console.log( '控制点数据：\n' + strplace.join( ',\n' ) );
				
				// 构建完整的JavaScript数组代码
				const code = '[\n\t' + strplace.join( ',\n\t' ) + '\n]';
				
				// 使用浏览器prompt对话框显示代码，方便用户复制
				prompt( '请复制以下代码：', code );
			}

			// ========== 加载控制点数据函数 ==========
			/**
			 * 加载新的控制点位置数据
			 * @param {Array<THREE.Vector3>} new_positions - 新的控制点位置数组
			 */
			function load( new_positions ) {
				// 如果新位置数量多于当前控制点，添加控制点
				while ( new_positions.length > positions.length ) {
					addPoint();  // 调用添加控制点函数
				}

				// 如果新位置数量少于当前控制点，移除多余控制点
				while ( new_positions.length < positions.length ) {
					removePoint();  // 调用移除控制点函数
				}

				// 复制新位置到现有控制点
				for ( let i = 0; i < positions.length; i ++ ) {
					positions[ i ].copy( new_positions[ i ] );
				}

				updateSplineOutline();  // 更新曲线显示
			}

			// ========== 渲染函数 ==========
			/**
			 * 渲染场景，根据GUI参数控制曲线可见性
			 */
			function render() {
				// 根据GUI参数设置各种曲线的可见性
				splines.uniform.mesh.visible = params.uniform;      // 均匀曲线
				splines.centripetal.mesh.visible = params.centripetal;  // 向心曲线
				splines.chordal.mesh.visible = params.chordal;      // 弦长曲线
				
				// 调用渲染器的render方法，绘制场景
				renderer.render( scene, camera );
			}

			// ========== 鼠标按下事件处理函数 ==========
			/**
			 * 记录鼠标按下时的屏幕坐标
			 * @param {MouseEvent} event - 鼠标事件对象
			 */
			function onPointerDown( event ) {
				onDownPosition.x = event.clientX;
				onDownPosition.y = event.clientY;
			}

			// ========== 鼠标抬起事件处理函数 ==========
			/**
			 * 处理鼠标抬起事件，判断是否为点击（而非拖拽）
			 * @param {MouseEvent} event - 鼠标事件对象
			 */
			function onPointerUp( event ) {
				onUpPosition.x = event.clientX;
				onUpPosition.y = event.clientY;

				// 计算鼠标按下和抬起位置的距离
				const distance = onDownPosition.distanceTo( onUpPosition );
				
				// 如果距离为0（或接近0），表示是点击而非拖拽
				if ( distance === 0 ) {
					transformControl.detach();  // 分离变换控制器
					render();  // 重新渲染
				}
			}

			// ========== 鼠标移动事件处理函数 ==========
			/**
			 * 处理鼠标移动事件，实现鼠标悬停选择控制点
			 * @param {MouseEvent} event - 鼠标事件对象
			 */
			function onPointerMove( event ) {
				// 将屏幕坐标转换为归一化设备坐标（NDC）
				// NDC范围：X轴从-1（左）到1（右），Y轴从-1（下）到1（上）
				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;  // Y轴取反，因为屏幕坐标原点在左上角

				// 从相机位置向鼠标方向发射射线
				raycaster.setFromCamera( pointer, camera );

				// 检测射线与控制点对象的交点
				// 第二个参数false表示不递归检测子对象
				const intersects = raycaster.intersectObjects( splineHelperObjects, false );

				// 如果检测到交点（鼠标悬停在控制点上）
				if ( intersects.length > 0 ) {
					const object = intersects[ 0 ].object;  // 获取第一个交点的对象

					// 如果变换控制器当前没有控制这个对象，则附加控制器
					if ( object !== transformControl.object ) {
						transformControl.attach( object );
					}
				}
			}

			// ========== 窗口大小改变事件处理函数 ==========
			/**
			 * 响应窗口大小变化，调整相机和渲染器
			 */
			function onWindowResize() {
				// 更新相机的宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();  // 更新相机投影矩阵

				// 更新渲染器大小为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 重新渲染
				render();
			}
		</script>
	</body>
</html>