<!-- Three.js VR手部交互立方体演示 - 功能描述与技术分析
🎯 一、核心功能概述
这是一个基于WebXR和Three.js的VR手部交互演示应用，允许用户通过VR设备的手部追踪功能在虚拟环境中创建立方体、抓取立方体并进行缩放操作。

主要交互功能：
1. 创建立方体
触发方式：左手做捏合手势

效果：在左手食指指尖位置生成一个随机颜色的立方体

立方体特性：

尺寸：0.05单位（Three.js世界单位）

材质：标准材质，随机颜色，完全粗糙表面

物理属性：具有碰撞检测边界，可被选择和操作

2. 抓取与移动立方体
触发方式：右手做捏合手势

工作流程：

右手食指接触立方体时捏合 → 抓取立方体

立方体吸附到右手食指，跟随手指移动

松开捏合手势 → 释放立方体到当前位置

技术特点：使用Three.js的attach()方法实现父子层级关系绑定

3. 双手缩放立方体
触发条件：

右手已抓取一个立方体

左手食指同时接触同一个立方体

左手做捏合手势

缩放机制：

基于两手食指指尖的距离变化进行缩放

距离增加 → 立方体放大

距离减小 → 立方体缩小

算法特点：等比缩放，保持立方体形状不变

4. 场景与环境
基础环境：

灰色地面（4x4单位）

半球光环境照明

方向光主光源（带阴影）

交互辅助：

控制器射线指示器（可视化指向方向）

手部3D模型（可视化手部姿态）

🔧 二、主要技术架构
1. Three.js核心组件
javascript
// 三大核心对象
场景 (Scene)        - 容纳所有3D对象的容器
相机 (Camera)       - 透视相机，模拟人眼视角
渲染器 (Renderer)   - WebGL渲染器，负责将3D转为2D图像
2. WebXR/VR技术栈
WebXR Device API：浏览器与VR设备的通信接口

手部追踪：实时获取手部关节位置和旋转数据

控制器模型：可视化VR控制器和手部模型

会话管理：VR模式的启动、运行和退出

3. 交互与事件系统
捏合事件检测：pinchstart和pinchend事件

碰撞检测：基于球体边界检测算法

状态管理：抓取状态、缩放状态的跟踪和维护

💡 三、关键技术实现细节
1. 碰撞检测系统
javascript
// 核心算法：球体边界检测
function collideObject(indexTip) {
  for (每个立方体) {
    // 1. 计算指尖与立方体中心的距离
    distance = 指尖位置.distanceTo(立方体中心位置);
    
    // 2. 计算立方体的有效碰撞半径
    //    边界球半径 × 当前缩放值
    effectiveRadius = boundingSphere.radius × scale.x;
    
    // 3. 判断是否碰撞
    if (distance < effectiveRadius) {
      return 立方体; // 碰撞发生
    }
  }
  return null; // 无碰撞
}
技术特点：

使用边界球而非精确几何体碰撞，性能更优

考虑物体缩放对碰撞范围的影响

使用临时向量避免内存分配，优化性能

2. 双手缩放算法
javascript
// 缩放公式
newScale = initialScale + (currentDistance / initialDistance - 1)

// 数学解释：
// - 当 currentDistance = initialDistance 时，newScale = initialScale
// - 当 currentDistance > initialDistance 时，newScale > initialScale（放大）
// - 当 currentDistance < initialDistance 时，newScale < initialScale（缩小）
3. 物体层级管理
javascript
// 抓取时：将立方体附加到食指关节
indexTip.attach(object);

// 释放时：将立方体重新附加到场景
scene.attach(object);
原理：Three.js使用父子层级系统，改变父级会自动更新物体的位置和旋转。

🎮 四、技术亮点
1. 性能优化
临时向量复用：避免在动画循环中频繁创建Vector3对象

边界球预计算：在创建立方体时计算好边界球，避免实时计算

批量渲染：Three.js自动优化相同材质的物体渲染

2. 用户交互设计
直观的双手交互：左手创建，右手抓取，双手缩放

视觉反馈：控制器射线、手部模型、阴影效果

渐进式交互：从简单创建到复杂缩放的多层次交互

3. 错误处理与状态管理
javascript
// 状态一致性保证
onPinchEndRight() {
  // 释放物体时同时重置缩放状态
  scaling.active = false;
  
  // 清理用户数据
  controller.userData.selected = undefined;
  
  // 重置全局状态
  grabbing = false;
}
🚀 五、扩展与改进方向
现有功能可扩展点：
物理模拟：添加重力、碰撞响应、惯性等物理效果

更多手势：旋转手势、抛掷手势、双手操作等

材质交互：改变颜色、透明度、纹理等

多用户协作：WebRTC实现多用户共享场景

技术升级方向：
性能优化：

使用InstancedMesh优化大量相同物体的渲染

添加LOD（细节层次）系统

实现对象池复用

交互增强：

触觉反馈（如果设备支持）

手势识别库集成（如MediaPipe Hands）

语音命令控制

场景丰富：

环境模型导入

光照烘焙

后处理效果（辉光、景深等）

📊 六、技术栈总结
技术领域	具体技术	作用
3D渲染	Three.js	核心3D渲染引擎
VR支持	WebXR API	VR设备连接与手部追踪
交互控制	OrbitControls	桌面模式下的相机控制
模型加载	XRControllerModelFactory	控制器3D模型
手部渲染	XRHandModelFactory	手部3D模型
物理模拟	自定义碰撞检测	物体交互检测 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题 - 中文版 -->
		<title>Three.js VR 手部交互 - 立方体演示</title>
		<!-- 字符编码设置为UTF-8，支持中文字符 -->
		<meta charset="utf-8">
		<!-- 响应式视口设置，确保在移动设备上正确显示，禁止用户缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<!-- 引入外部CSS样式表 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<!-- 信息显示区域 - 中文版 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> VR - 手部输入交互 - 立方体操作演示<br/>
			操作说明：<br/>
			1. 左手捏合 - 创建新立方体<br/>
			2. 右手捏合 - 抓取/释放立方体<br/>
			3. 双手同时捏合同一立方体 - 缩放立方体<br/>
			4. 需要VR设备和手部追踪功能支持
		</div>

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

		<script type="module">
			// ============================================
			// 模块导入部分
			// ============================================
			
			// 导入Three.js核心库 - 用于3D图形渲染
			import * as THREE from 'three';
			
			// 导入轨道控制器 - 允许在非VR模式下用鼠标控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入VR按钮组件 - 创建进入/退出VR模式的UI按钮
			import { VRButton } from 'three/addons/webxr/VRButton.js';
			
			// 导入XR控制器模型工厂 - 用于创建控制器3D模型
			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
			
			// 导入XR手部模型工厂 - 用于创建手部追踪的3D手模型
			import { XRHandModelFactory } from 'three/addons/webxr/XRHandModelFactory.js';

			// ============================================
			// 全局变量声明部分
			// ============================================
			
			// DOM元素变量
			let container; // 主容器DOM元素，用于承载Three.js渲染的canvas
			
			// Three.js核心对象变量
			let camera, scene, renderer; // 相机、场景、渲染器 - Three.js三大核心组件
			
			// VR手部模型变量
			let hand1, hand2; // hand1: 左手模型, hand2: 右手模型
			
			// VR控制器变量
			let controller1, controller2; // 控制器逻辑对象（用于射线交互等）
			let controllerGrip1, controllerGrip2; // 控制器握把模型（3D可见部分）
			
			// 临时计算向量
			// 用于避免在动画循环中频繁创建新对象，提高性能
			const tmpVector1 = new THREE.Vector3(); // 临时向量1，用于世界坐标转换计算
			const tmpVector2 = new THREE.Vector3(); // 临时向量2，用于世界坐标转换计算

			// 控制变量
			let controls; // OrbitControls轨道控制器实例

			// 交互状态变量
			let grabbing = false; // 抓取状态标志：true表示右手正在抓取物体
			
			// 缩放状态对象 - 存储双手缩放操作的相关信息
			const scaling = {
				active: false, // 是否正在缩放：true表示正在进行双手缩放操作
				initialDistance: 0, // 初始距离：开始缩放时两手食指指尖的距离
				object: null, // 被缩放的物体对象引用
				initialScale: 1 // 初始缩放值：开始缩放时物体的原始缩放大小
			};

			// 数据存储变量
			const spheres = []; // 存储所有创建的立方体对象的数组
			// 注意：变量名是spheres（球体），但实际创建的是立方体（BoxGeometry）
			// 这是代码中的一个命名不一致，但功能上是正确的

			// ============================================
			// 应用程序初始化 - 程序入口点
			// ============================================
			init();

			/**
			 * 主初始化函数
			 * 负责创建整个3D场景的所有组件：
			 * 1. 创建DOM容器
			 * 2. 初始化Three.js核心对象（场景、相机、渲染器）
			 * 3. 设置灯光和阴影
			 * 4. 创建地面
			 * 5. 初始化VR控制器和手部模型
			 * 6. 设置事件监听器
			 * 7. 启动动画循环
			 */
			function init() {
				// ----------------------------
				// 1. DOM容器创建
				// ----------------------------
				container = document.createElement( 'div' ); // 创建div元素作为Three.js容器
				document.body.appendChild( container ); // 将容器添加到body中

				// ----------------------------
				// 2. 场景初始化
				// ----------------------------
				scene = new THREE.Scene(); // 创建3D场景
				scene.background = new THREE.Color( 0x444444 ); // 设置场景背景色为深灰色（RGB: 0x44,0x44,0x44）

				// ----------------------------
				// 3. 相机初始化
				// ----------------------------
				// 创建透视相机（模拟人眼视角）
				// 参数说明：
				// 50 - 视野角度（Field of View），单位：度
				// window.innerWidth / window.innerHeight - 宽高比
				// 0.1 - 近裁剪面（最近可见距离）
				// 10 - 远裁剪面（最远可见距离）
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
				camera.position.set( 0, 1.6, 3 ); // 设置相机位置（x, y, z），y=1.6模拟人眼高度

				// ----------------------------
				// 4. 轨道控制器初始化
				// ----------------------------
				// 创建轨道控制器，允许用鼠标拖拽旋转视角
				// 在VR模式下，这个控制器会被VR控制器替代
				controls = new OrbitControls( camera, container );
				controls.target.set( 0, 1.6, 0 ); // 设置控制器的目标点（看向的位置）
				controls.update(); // 更新控制器状态

				// ----------------------------
				// 5. 地面创建
				// ----------------------------
				const floorGeometry = new THREE.PlaneGeometry( 4, 4 ); // 创建平面几何体，宽4单位，高4单位
				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x666666 } ); // 创建标准材质，灰色
				const floor = new THREE.Mesh( floorGeometry, floorMaterial ); // 创建网格对象（几何体+材质）
				floor.rotation.x = - Math.PI / 2; // 旋转平面90度，使其水平放置（默认平面是垂直的）
				floor.receiveShadow = true; // 启用地面接收阴影功能
				scene.add( floor ); // 将地面添加到场景中

				// ----------------------------
				// 6. 灯光设置
				// ----------------------------
				// 6.1 半球光（环境光）
				// 参数说明：天空颜色，地面颜色，光照强度
				// 半球光模拟天空的漫反射光照，提供基础的环境照明
				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5, 3 ) );

				// 6.2 平行光（主光源）
				// 平行光模拟太阳光，所有光线平行照射，用于产生清晰的阴影
				const light = new THREE.DirectionalLight( 0xffffff, 3 ); // 白色光，强度3
				light.position.set( 0, 6, 0 ); // 设置光源位置（从上方照射）
				light.castShadow = true; // 启用阴影投射
				
				// 阴影相机参数设置 - 控制阴影的渲染范围
				// 这些值定义了阴影相机的视锥体边界
				light.shadow.camera.top = 2;    // 上边界
				light.shadow.camera.bottom = -2; // 下边界
				light.shadow.camera.right = 2;  // 右边界
				light.shadow.camera.left = -2;  // 左边界
				
				// 阴影贴图分辨率 - 值越高阴影越清晰，但性能消耗越大
				light.shadow.mapSize.set( 4096, 4096 ); // 4096x4096像素的阴影贴图
				scene.add( light ); // 将平行光添加到场景

				// ----------------------------
				// 7. 渲染器初始化
				// ----------------------------
				renderer = new THREE.WebGLRenderer( { antialias: true } ); // 创建WebGL渲染器，开启抗锯齿
				renderer.setPixelRatio( window.devicePixelRatio ); // 设置设备像素比，适应高清屏幕
				renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染尺寸为全屏
				renderer.setAnimationLoop( animate ); // 设置动画循环回调函数
				renderer.shadowMap.enabled = true; // 启用阴影渲染
				renderer.xr.enabled = true; // 启用WebXR支持，这是VR功能的关键

				// 将渲染器的canvas元素添加到DOM容器中
				container.appendChild( renderer.domElement );

				// ----------------------------
				// 8. WebXR/VR设置
				// ----------------------------
				// 定义XR会话的初始化配置
				// requiredFeatures: 指定需要的XR特性，这里要求手部追踪功能
				const sessionInit = {
					requiredFeatures: [ 'hand-tracking' ] // 必须支持手部追踪
				};

				// 创建VR按钮并添加到页面
				// 这个按钮允许用户进入/退出VR模式
				document.body.appendChild( VRButton.createButton( renderer, sessionInit ) );

				// ----------------------------
				// 9. VR控制器初始化
				// ----------------------------
				// 9.1 获取第一个控制器（左手控制器）
				controller1 = renderer.xr.getController( 0 ); // 索引0代表左手
				scene.add( controller1 ); // 将控制器添加到场景

				// 9.2 获取第二个控制器（右手控制器）
				controller2 = renderer.xr.getController( 1 ); // 索引1代表右手
				scene.add( controller2 ); // 将控制器添加到场景

				// 创建模型工厂
				const controllerModelFactory = new XRControllerModelFactory(); // 控制器模型工厂
				const handModelFactory = new XRHandModelFactory(); // 手部模型工厂

				// ----------------------------
				// 10. 左手详细设置
				// ----------------------------
				// 10.1 左手控制器握把模型
				controllerGrip1 = renderer.xr.getControllerGrip( 0 ); // 获取左手控制器握把
				// 创建控制器模型并添加到握把
				controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
				scene.add( controllerGrip1 ); // 将握把模型添加到场景

				// 10.2 左手手部模型
				hand1 = renderer.xr.getHand( 0 ); // 获取左手手部追踪对象
				// 监听左手捏合开始事件 - 当用户用左手做捏合手势时触发
				hand1.addEventListener( 'pinchstart', onPinchStartLeft );
				// 监听左手捏合结束事件 - 当用户停止左手捏合手势时触发
				hand1.addEventListener( 'pinchend', () => {
					scaling.active = false; // 左手捏合结束时，停止缩放操作
				} );
				// 创建手部3D模型并添加到手部对象
				hand1.add( handModelFactory.createHandModel( hand1 ) );
				scene.add( hand1 ); // 将左手添加到场景

				// ----------------------------
				// 11. 右手详细设置
				// ----------------------------
				// 11.1 右手控制器握把模型
				controllerGrip2 = renderer.xr.getControllerGrip( 1 ); // 获取右手控制器握把
				controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
				scene.add( controllerGrip2 );

				// 11.2 右手手部模型
				hand2 = renderer.xr.getHand( 1 ); // 获取右手手部追踪对象
				// 监听右手捏合开始事件 - 用于抓取物体
				hand2.addEventListener( 'pinchstart', onPinchStartRight );
				// 监听右手捏合结束事件 - 用于释放物体
				hand2.addEventListener( 'pinchend', onPinchEndRight );
				hand2.add( handModelFactory.createHandModel( hand2 ) );
				scene.add( hand2 );

				// ----------------------------
				// 12. 控制器射线指示器
				// ----------------------------
				// 创建射线几何体，用于显示控制器的指向方向
				// 从原点(0,0,0)到(0,0,-1)的一条线，表示向屏幕内方向
				const geometry = new THREE.BufferGeometry().setFromPoints( [ 
					new THREE.Vector3( 0, 0, 0 ),    // 起点
					new THREE.Vector3( 0, 0, -1 )    // 终点（Z轴负方向）
				] );

				// 创建线对象
				const line = new THREE.Line( geometry );
				line.name = 'line'; // 给对象命名，便于调试
				line.scale.z = 5; // 将射线长度缩放5倍，使其可见

				// 为两个控制器都添加射线指示器
				controller1.add( line.clone() ); // 左手控制器
				controller2.add( line.clone() ); // 右手控制器

				// ----------------------------
				// 13. 窗口事件监听器
				// ----------------------------
				// 监听窗口大小变化事件，调整渲染尺寸和相机参数
				window.addEventListener( 'resize', onWindowResize );
			}

			// ============================================
			// 工具函数和事件处理函数
			// ============================================

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，需要重新调整：
			 * 1. 相机宽高比（避免画面拉伸）
			 * 2. 渲染器输出尺寸（填充整个窗口）
			 * 3. 更新相机投影矩阵（应用新的宽高比）
			 */
			function onWindowResize() {
				// 更新相机宽高比为当前窗口的宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵 - 必须调用此方法应用新的宽高比
				camera.updateProjectionMatrix();
				// 更新渲染器的输出尺寸为当前窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// 立方体的半径常量
			// 注意：这个常量名称为SphereRadius（球体半径），但实际用于立方体的尺寸
			// 这可能是因为最初计划创建球体，但后来改为了立方体，而变量名未更新
			const SphereRadius = 0.05; // 0.05个单位（Three.js中的单位长度）
			
			/**
			 * 左手捏合开始事件处理函数
			 * 主要功能：
			 * 1. 如果右手正在抓取物体，检查左手是否也接触同一物体
			 *    如果是，则开始双手缩放操作
			 * 2. 否则，在左手食指位置创建一个新的彩色立方体
			 * 
			 * @param {Object} event - WebXR手部追踪事件对象
			 */
			function onPinchStartLeft( event ) {
				const controller = event.target; // 获取触发事件的控制器（左手）

				// 情况1：检查是否正在进行抓取操作（右手正在抓取物体）
				if ( grabbing ) {
					// 获取左手食指指尖关节
					const indexTip = controller.joints[ 'index-finger-tip' ];
					// 检测左手食指是否与任何立方体发生碰撞
					const sphere = collideObject( indexTip );

					// 如果左手也碰到了某个立方体
					if ( sphere ) {
						// 获取右手当前选中的立方体
						const sphere2 = hand2.userData.selected;
						
						// 调试输出
						console.log( '左手碰到的立方体:', sphere, '右手选中的立方体:', sphere2 );
						
						// 检查左右手是否碰到同一个立方体
						if ( sphere === sphere2 ) {
							// 开始双手缩放操作
							scaling.active = true; // 激活缩放状态
							scaling.object = sphere; // 设置要缩放的对象
							scaling.initialScale = sphere.scale.x; // 记录对象的当前缩放值
							
							// 计算两手食指指尖的初始距离
							// 这个距离将作为缩放的参考基准
							scaling.initialDistance = indexTip.position.distanceTo( 
								hand2.joints[ 'index-finger-tip' ].position 
							);
							
							// 开始缩放后直接返回，不再创建新立方体
							return;
						}
					}
				}

				// 情况2：创建新立方体（当没有缩放操作时）
				
				// 2.1 创建立方体几何体
				// BoxGeometry参数：宽度，高度，深度（这里三个维度都使用SphereRadius）
				const geometry = new THREE.BoxGeometry( SphereRadius, SphereRadius, SphereRadius );
				
				// 2.2 创建材质
				const material = new THREE.MeshStandardMaterial( {
					color: Math.random() * 0xffffff, // 随机颜色（0x000000到0xffffff之间）
					roughness: 1.0, // 粗糙度设为1（完全粗糙，无光泽）
					metalness: 0.0  // 金属度设为0（非金属材质）
				} );
				
				// 2.3 创建网格对象（几何体+材质）
				const spawn = new THREE.Mesh( geometry, material );
				
				// 计算几何体的边界球体
				// 这是碰撞检测的关键：计算一个能包围整个几何体的最小球体
				spawn.geometry.computeBoundingSphere();

				// 2.4 设置立方体的位置和旋转
				// 获取左手食指指尖关节的位置和旋转信息
				const indexTip = controller.joints[ 'index-finger-tip' ];
				spawn.position.copy( indexTip.position ); // 复制指尖位置
				spawn.quaternion.copy( indexTip.quaternion ); // 复制指尖旋转

				// 2.5 存储和管理立方体
				spheres.push( spawn ); // 添加到全局数组，便于后续管理和碰撞检测
				scene.add( spawn ); // 添加到场景中，使其可见和可交互
			}

			/**
			 * 碰撞检测函数
			 * 检测指定的关节（通常是食指指尖）是否与场景中的任何立方体相交
			 * 使用球体碰撞检测算法：计算指尖与立方体中心的距离，与立方体边界球半径比较
			 * 
			 * @param {THREE.Object3D} indexTip - 要检测的关节（食指指尖）
			 * @returns {THREE.Mesh|null} - 返回相交的立方体对象，如果没有相交则返回null
			 */
			function collideObject( indexTip ) {
				// 遍历所有立方体
				for ( let i = 0; i < spheres.length; i ++ ) {
					const sphere = spheres[ i ]; // 当前检查的立方体
					
					// 计算指尖和立方体在世界坐标系中的距离
					// 使用临时向量避免创建新对象，提高性能
					const distance = indexTip.getWorldPosition( tmpVector1 )
						.distanceTo( sphere.getWorldPosition( tmpVector2 ) );
					
					// 获取立方体边界球的半径
					// 注意：需要乘以物体的缩放值，因为缩放会影响边界球的实际大小
					const effectiveRadius = sphere.geometry.boundingSphere.radius * sphere.scale.x;
					
					// 检查距离是否小于有效半径（发生碰撞）
					if ( distance < effectiveRadius ) {
						return sphere; // 返回碰撞到的立方体
					}
				}
				
				return null; // 没有碰撞发生
			}

			/**
			 * 右手捏合开始事件处理函数
			 * 主要功能：抓取/选中立方体
			 * 当右手做捏合手势时，检测食指是否碰到立方体，如果碰到则将其"抓取"
			 * 
			 * @param {Object} event - WebXR手部追踪事件对象
			 */
			function onPinchStartRight( event ) {
				const controller = event.target; // 获取触发事件的控制器（右手）
				const indexTip = controller.joints[ 'index-finger-tip' ]; // 获取右手食指指尖关节
				const object = collideObject( indexTip ); // 检测是否与任何立方体碰撞
				
				// 如果检测到碰撞（食指碰到了立方体）
				if ( object ) {
					grabbing = true; // 设置抓取状态为true
					
					// 将立方体附加到食指指尖
					// attach()方法会将物体从当前父级移除，并添加到指定的新父级
					// 这样立方体就会跟随食指移动
					indexTip.attach( object );
					
					// 在控制器的userData中存储选中的物体
					// userData是Three.js对象的一个自定义数据存储属性
					controller.userData.selected = object;
					
					// 调试输出
					console.log( '已选中立方体', object );
				}
			}

			/**
			 * 右手捏合结束事件处理函数
			 * 主要功能：释放已抓取的立方体
			 * 当用户松开右手捏合手势时，将立方体放回场景中
			 * 
			 * @param {Object} event - WebXR手部追踪事件对象
			 */
			function onPinchEndRight( event ) {
				const controller = event.target; // 获取触发事件的控制器（右手）

				// 检查之前是否有选中的物体
				// 使用!== undefined而不是if(controller.userData.selected)是为了避免误判（selected可能是null）
				if ( controller.userData.selected !== undefined ) {
					const object = controller.userData.selected; // 获取之前选中的物体
					
					// 重置物体的自发光效果（如果有的话）
					// 这里将蓝色自发光分量设为0
					object.material.emissive.b = 0;
					
					// 将物体从食指指尖分离，重新附加到场景根节点
					// scene.attach()会将物体从当前父级移除，并添加到场景中
					scene.attach( object );
					
					// 清除选中状态
					controller.userData.selected = undefined;
					grabbing = false; // 重置抓取状态
				}

				// 确保缩放状态被重置
				// 这是安全措施，防止右手释放物体后缩放状态仍然激活
				scaling.active = false;
			}

			// ============================================
			// 动画循环函数
			// ============================================

			/**
			 * 动画循环函数
			 * 这是Three.js应用的核心，每帧都会被自动调用（通常每秒60次）
			 * 主要功能：
			 * 1. 更新缩放逻辑（如果正在进行缩放操作）
			 * 2. 渲染场景
			 * 
			 * 注意：这个函数通过renderer.setAnimationLoop(animate)设置为动画循环回调
			 * 在VR模式下，浏览器会自动以合适的帧率调用此函数
			 */
			function animate() {
				// 处理缩放逻辑（如果正在进行缩放操作）
				if ( scaling.active ) {
					// 1. 获取两手食指指尖的当前位置
					const indexTip1Pos = hand1.joints[ 'index-finger-tip' ].position; // 左手食指
					const indexTip2Pos = hand2.joints[ 'index-finger-tip' ].position; // 右手食指
					
					// 2. 计算两手食指指尖的当前距离
					// Vector3.distanceTo()计算两点之间的欧几里得距离
					const distance = indexTip1Pos.distanceTo( indexTip2Pos );
					
					// 3. 计算新的缩放值
					// 缩放算法：新的缩放值 = 初始缩放值 + (当前距离 / 初始距离 - 1)
					// 这个公式的含义：
					// - 当距离等于初始距离时，(当前距离/初始距离 - 1) = 0，缩放值不变
					// - 当距离增大时，(当前距离/初始距离 - 1) > 0，物体放大
					// - 当距离减小时，(当前距离/初始距离 - 1) < 0，物体缩小
					const newScale = scaling.initialScale + distance / scaling.initialDistance - 1;
					
					// 4. 应用新的缩放值
					// setScalar()方法将所有缩放分量（x, y, z）设置为相同的值
					// 这实现了均匀缩放（等比例缩放）
					scaling.object.scale.setScalar( newScale );
				}

				// 渲染场景
				// 这是整个Three.js管线的最后一步，将3D场景绘制到2D画布上
				renderer.render( scene, camera );
			}

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