<!-- Three.js WebXR 触觉反馈演示 - 功能描述与技术解析
🎮 一、核心功能概述
这是一个沉浸式WebXR交互体验演示，用户通过XR控制器与虚拟世界中的彩色柱子进行互动，同时获得视觉、听觉和触觉三重感官反馈的沉浸式体验。

主要交互流程：
进入XR模式：点击页面上的XR按钮，进入VR/AR体验

控制器交互：使用两个XR控制器在虚拟空间中移动

碰撞触发：当控制器碰到彩色柱子时：

视觉反馈：柱子发出蓝色光芒并轻微缩放

听觉反馈：播放基于五声音阶的音符（不同柱子不同音高）

触觉反馈：控制器振动（强度随柱子高度变化）

实时响应：所有反馈都是实时计算的，提供即时的交互响应

🔧 二、主要技术点详解
1. WebXR API集成
javascript
// 核心XR功能启用
renderer.xr.enabled = true;
XRButton.createButton(renderer) // 自动创建XR入口按钮

// 控制器管理
renderer.xr.getController(0)    // 获取控制器（用于射线）
renderer.xr.getControllerGrip(0) // 获取控制器握柄（用于模型和触觉）
自动设备检测：自动适配VR头显（Oculus、Vive等）和AR设备

控制器模型：自动加载并显示与设备匹配的3D控制器模型

姿态跟踪：实时跟踪控制器位置和旋转

2. 三重感官反馈系统
视觉反馈系统
javascript
// 碰撞时触发
child.material.emissive.b = 1;  // 蓝色发光
child.scale.setScalar(1 + Math.random() * 0.1 * intensity); // 随机缩放
材质发光：通过修改材质的emissive属性实现动态发光效果

随机缩放：轻微的不规则缩放增强视觉冲击力

阴影系统：完整的动态阴影（投射+接收）

听觉反馈系统
javascript
// 3D位置音频
const audio = new THREE.PositionalAudio(listener);
oscillator.frequency.value = 110 * Math.pow(2, musicInterval / 12);

// 五声音阶算法
const musicScale = [0, 3, 5, 7, 10]; // 大调五声音阶
const musicInterval = musicScale[child.userData.index % musicScale.length] + 
                      12 * Math.floor(child.userData.index / musicScale.length);
3D空间音频：声音随控制器位置变化，增强空间感

五声音阶：确保所有音符和谐悦耳

动态音量：只在碰撞时播放，避免持续噪音

触觉反馈系统
javascript
// 触觉振动（如果设备支持）
if (supportHaptic) {
    gamepad.hapticActuators[0].pulse(intensity, 100);
}
设备检测：自动检测控制器是否支持振动功能

强度控制：振动强度与柱子高度成正比

持续时间：固定100毫秒的脉冲式振动

3. 物理碰撞检测
javascript
// 球体-AABB碰撞检测
const sphere = { radius: 0.03, center: controller.position };
box.setFromObject(child); // 计算物体包围盒

if (box.intersectsSphere(sphere)) {
    // 碰撞发生
}
高效算法：使用包围盒(Bounding Box)和球体(Sphere)的相交测试

实时性能：每帧检测，保证60fps的流畅体验

简化模型：用球体近似控制器形状，平衡精度和性能

4. 场景构建与光照
javascript
// 多层次光照系统
scene.add(new THREE.HemisphereLight(0xbcbcbc, 0xa5a5a5, 3)); // 环境光
const light = new THREE.DirectionalLight(0xffffff, 3); // 主方向光

// PBR材质系统
const material = new THREE.MeshStandardMaterial({
    color: new THREE.Color(intensity, 0.1, 0.1),
    roughness: 0.7,
    metalness: 0.0
});
PBR渲染：基于物理的渲染，提供真实的材质表现

混合光照：半球光（环境光）+ 方向光（主光源）

高质量阴影：4096x4096分辨率的阴影贴图

5. 响应式与备用系统
javascript
// 轨道控制器（非XR模式下使用）
controls = new OrbitControls(camera, container);

// 响应式布局
window.addEventListener('resize', onWindowResize);
双模式支持：XR模式 + 传统桌面模式

响应式设计：自动适应窗口大小变化

渐进增强：在不支持XR的设备上仍可体验基础功能

🏗️ 三、系统架构
模块化架构
text
1. 初始化模块
   ├── 场景创建
   ├── 相机设置
   ├── 光照系统
   └── 物体生成

2. XR系统模块
   ├── 控制器管理
   ├── 模型加载
   └── 事件处理

3. 反馈系统模块
   ├── 碰撞检测
   ├── 视觉反馈
   ├── 听觉反馈
   └── 触觉反馈

4. 渲染循环模块
   ├── 状态更新
   └── 场景渲染
数据流设计
text
控制器位置/姿态 → 碰撞检测 → 反馈计算 → 渲染输出
     ↓              ↓           ↓          ↓
   3D空间       包围盒检测   三重反馈   视觉呈现
🎯 四、技术亮点
1. 性能优化
高效的碰撞检测：使用简化的几何形状进行快速相交测试

按需音频播放：只在碰撞时播放音频，减少CPU占用

智能渲染：自动适配设备性能（像素比、阴影质量）

2. 用户体验设计
直观的视觉反馈：发光+缩放明确指示碰撞状态

和谐的声音设计：五声音阶确保听觉舒适度

适度的触觉反馈：强度可控，避免过度振动

3. 跨平台兼容
Web标准：基于WebGL和WebXR，无需插件

设备自适应：自动适配不同XR设备

优雅降级：在不支持XR的设备上提供替代体验

4. 可扩展性
模块化设计：易于添加新的交互对象

参数化配置：柱子数量、颜色、音阶均可调整

插件式反馈：可以轻松添加新的感官反馈类型 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js WebXR触觉反馈演示 -->
		<title>Three.js WebXR触觉反馈演示</title>
		<!-- 字符编码设置为UTF-8，支持中文和特殊字符 -->
		<meta charset="utf-8">
		<!-- 
			视口(viewport)设置：
			width=device-width：宽度等于设备宽度
			initial-scale=1.0：初始缩放比例为1倍
			user-scalable=no：禁止用户手动缩放（在XR体验中很重要）
			这个设置确保了页面在移动设备和XR头显中正确显示
		-->
		<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>

		<!-- 
			信息显示区域：
			1. 显示项目名称和链接
			2. 简要说明应用功能
			3. 在非XR模式下提供基本操作指引
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebXR触觉反馈演示 - 使用XR控制器与彩色柱子交互，体验视觉、听觉和触觉的多重反馈
		</div>

		<!-- 
			模块导入映射(Import Map)：
			这是现代JavaScript模块系统的一部分，告诉浏览器如何解析模块路径
			- "three": 指向Three.js主库
			- "three/addons/": 指向Three.js附加组件目录
			这样我们可以在代码中使用简洁的导入语句
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块，使用type="module"支持ES6模块化 -->
		<script type="module">

			// ============ 导入模块 ============
			// 导入Three.js核心库的所有功能，使用* as THREE将整个库作为一个对象
			import * as THREE from 'three';
			// 导入轨道控制器，用于在非XR模式下通过鼠标控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入XR按钮组件，用于创建进入/退出XR模式的UI按钮
			import { XRButton } from 'three/addons/webxr/XRButton.js';
			// 导入XR控制器模型工厂，用于创建和显示控制器的3D模型
			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';

			// ============ 全局变量声明 ============
			// 渲染容器：Three.js渲染器输出的canvas元素将放置在这个div中
			let container;
			// 三大核心对象：相机（决定视图）、场景（包含所有3D对象）、渲染器（负责绘制）
			let camera, scene, renderer;

			// 音频监听器：用于3D空间音频，可以感知声音的方向和距离
			let listener;
			// XR控制器对象：表示控制器的抽象，用于射线交互等逻辑
			let controller1, controller2;
			// XR控制器握柄：包含控制器的3D模型，用于显示和物理交互
			let controllerGrip1, controllerGrip2;

			// 3D包围盒对象：用于高效的碰撞检测，可以快速计算物体的边界
			const box = new THREE.Box3();

			// 轨道控制器：允许用户在非XR模式下用鼠标控制视角
			// 物体组：包含所有彩色柱子的容器，方便统一管理和操作
			let controls, group;

			// 调用初始化函数，启动应用
			init();

			// ============ 初始化函数 ============
			function init() {
				/*
				 * 这是整个应用的入口点，负责创建和设置所有必要的Three.js组件
				 * 执行顺序：创建DOM元素 -> 设置3D场景 -> 创建物体 -> 设置渲染器 -> 设置XR功能
				 */

				// 1. 创建并添加渲染容器
				// 创建一个div元素作为Three.js渲染的画布容器
				container = document.createElement( 'div' );
				// 将容器添加到body元素中，使其显示在页面上
				document.body.appendChild( container );

				// 2. 创建场景(Scene)
				// 场景是所有3D对象的容器，类似于一个虚拟世界
				scene = new THREE.Scene();
				// 设置场景背景颜色为中性灰色(#808080)，避免纯黑或纯白造成的视觉疲劳
				scene.background = new THREE.Color( 0x808080 );

				// 3. 创建相机(Camera)
				/*
				 * 使用透视相机(PerspectiveCamera)，模拟人眼的视觉效果
				 * 参数说明：
				 *   - 50: 视野角度(Field of View)，单位是度，50度是较自然的视角
				 *   - window.innerWidth / window.innerHeight: 纵横比，根据窗口大小计算
				 *   - 0.1: 近裁剪面，距离相机小于0.1单位的物体不会被渲染
				 *   - 10: 远裁剪面，距离相机大于10单位的物体不会被渲染
				 */
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
				// 设置相机初始位置：X=0（中心），Y=1.6（模拟人眼高度），Z=3（向前3个单位）
				camera.position.set( 0, 1.6, 3 );

				// 4. 创建音频监听器
				/*
				 * AudioListener是3D音频系统的耳朵，跟随相机移动
				 * 当音频源相对于监听器移动时，会产生多普勒效应和音量变化
				 */
				listener = new THREE.AudioListener();
				// 将监听器附加到相机上，使其跟随视角移动
				camera.add( listener );

				// 5. 创建轨道控制器
				/*
				 * OrbitControls允许用户：
				 *   - 鼠标左键拖拽：旋转视角
				 *   - 鼠标右键拖拽：平移视角
				 *   - 鼠标滚轮：缩放视角
				 * 这对于非XR模式下的场景探索非常有用
				 */
				controls = new OrbitControls( camera, container );
				// 设置控制器的目标点为(0, 1.6, 0)，即人眼高度的中心点
				controls.target.set( 0, 1.6, 0 );
				// 更新控制器内部状态
				controls.update();

				// 6. 创建地面
				/*
				 * 地面是场景的基础参考平面，帮助用户感知空间深度和高度
				 */
				// 创建平面几何体：宽4单位，高4单位（Three.js中1单位通常等于1米）
				const floorGeometry = new THREE.PlaneGeometry( 4, 4 );
				/*
				 * 创建阴影材质：
				 *   - opacity: 0.25 - 阴影透明度25%
				 *   - blending: THREE.CustomBlending - 自定义混合模式
				 *   - transparent: false - 材质本身不透明，但阴影部分透明
				 * ShadowMaterial专门用于接收阴影，本身不可见
				 */
				const floorMaterial = new THREE.ShadowMaterial( { opacity: 0.25, blending: THREE.CustomBlending, transparent: false } );
				// 创建网格对象，组合几何体和材质
				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
				// 旋转平面使其水平：绕X轴旋转-90度（Three.js中Y轴向上）
				floor.rotation.x = - Math.PI / 2;
				// 启用地面接收阴影
				floor.receiveShadow = true;
				// 将地面添加到场景中
				scene.add( floor );

				// 7. 添加环境光照
				/*
				 * HemisphereLight（半球光）模拟天空和地面的环境反射光
				 * 参数说明：
				 *   - 0xbcbcbc: 天空颜色（浅灰色）
				 *   - 0xa5a5a5: 地面颜色（稍深的灰色）
				 *   - 3: 光照强度
				 */
				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5, 3 ) );

				// 8. 添加方向光（主光源）
				/*
				 * DirectionalLight（方向光）模拟太阳等平行光源
				 * 用于产生清晰的阴影和物体表面的明暗对比
				 */
				const light = new THREE.DirectionalLight( 0xffffff, 3 ); // 白色光，强度3
				light.position.set( 0, 6, 0 ); // 光源位置：正上方6单位
				light.castShadow = true; // 启用阴影投射
				// 设置阴影相机的范围（阴影贴图覆盖的区域）
				light.shadow.camera.top = 2;    // 上边界
				light.shadow.camera.bottom = - 2; // 下边界
				light.shadow.camera.right = 2;  // 右边界
				light.shadow.camera.left = - 2; // 左边界
				// 设置阴影贴图分辨率：4096x4096像素，高分辨率减少阴影锯齿
				light.shadow.mapSize.set( 4096, 4096 );
				scene.add( light );

				// 9. 创建彩色柱子组
				/*
				 * 这是本演示的核心交互对象
				 * 10个不同高度的彩色柱子，用户可以用XR控制器与之交互
				 */
				group = new THREE.Group(); // 创建组对象，用于统一管理多个柱子
				group.position.z = - 0.5; // 将整个组向后移动0.5单位
				scene.add( group ); // 将组添加到场景
				const BOXES = 10; // 柱子数量

				// 循环创建10个柱子
				for ( let i = 0; i < BOXES; i ++ ) {
					/*
					 * 柱子属性计算：
					 * intensity: 强度值，从0.1到1.0线性增加
					 * w: 柱子宽度，固定为0.1单位（10厘米）
					 * h: 柱子高度，从0.5到0.95线性增加
					 */
					const intensity = ( i + 1 ) / BOXES; // (i+1)/10，避免0值
					const w = 0.1; // 宽度：0.1单位
					const h = 0.05 * i + 0.5; // 高度：0.5 + i*0.05

					// 创建立方体几何体
					const geometry = new THREE.BoxGeometry( w, h, w );
					// 平移几何体：将原点从中心移动到柱子底部，方便放置
					geometry.translate( 0, h / 2, 0 );

					/*
					 * 创建材质：
					 *   - color: 基于强度的红色渐变（强度越高越红）
					 *   - roughness: 0.7 - 粗糙度70%，产生漫反射效果
					 *   - metalness: 0.0 - 金属度0%，非金属材质
					 * MeshStandardMaterial是PBR（基于物理渲染）材质
					 */
					const material = new THREE.MeshStandardMaterial( {
						color: new THREE.Color( intensity, 0.1, 0.1 ), // RGB: (强度, 0.1, 0.1)
						roughness: 0.7,
						metalness: 0.0
					} );

					// 创建网格对象，组合几何体和材质
					const object = new THREE.Mesh( geometry, material );
					// 计算X轴位置：均匀分布在-5到5之间
					object.position.x = ( i - 5 ) * ( w + 0.05 ); // (i-5)*0.15
					object.castShadow = true; // 投射阴影
					object.receiveShadow = true; // 接收阴影
					
					// 在对象上存储自定义数据，用于后续交互
					object.userData = {
						index: i + 1,      // 柱子索引（1到10）
						intensity: intensity // 强度值（0.1到1.0）
					};

					group.add( object ); // 将柱子添加到组中
				}

				// 10. 创建渲染器(Renderer)
				/*
				 * WebGLRenderer是Three.js的核心，负责将3D场景绘制到2D画布上
				 */
				renderer = new THREE.WebGLRenderer( { antialias: true } ); // 启用抗锯齿
				renderer.setPixelRatio( window.devicePixelRatio ); // 设置设备像素比，适应高DPI屏幕
				renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染尺寸为窗口大小
				renderer.setAnimationLoop( animate ); // 设置动画循环函数
				renderer.shadowMap.enabled = true; // 启用阴影映射
				renderer.xr.enabled = true; // 启用WebXR支持
				// 将渲染器的canvas元素添加到容器中
				container.appendChild( renderer.domElement );

				// 11. 创建XR按钮
				/*
				 * XRButton.createButton()会自动检测浏览器支持的XR模式
				 * 可能返回：VR按钮、AR按钮或"XR NOT SUPPORTED"信息
				 */
				document.body.appendChild( XRButton.createButton( renderer ) );

				// 12. 初始化XR控制器

				// 获取控制器对象（索引0和1对应左右手）
				// 这些控制器用于射线交互和基本输入
				controller1 = renderer.xr.getController( 0 );
				scene.add( controller1 );

				controller2 = renderer.xr.getController( 1 );
				scene.add( controller2 );

				// 创建控制器模型工厂，用于生成控制器的3D模型
				const controllerModelFactory = new XRControllerModelFactory();

				// 获取控制器握柄对象
				// 握柄包含实际的控制器模型和触觉反馈功能
				controllerGrip1 = renderer.xr.getControllerGrip( 0 );
				// 监听控制器连接事件
				controllerGrip1.addEventListener( 'connected', controllerConnected );
				// 监听控制器断开事件
				controllerGrip1.addEventListener( 'disconnected', controllerDisconnected );
				// 创建控制器模型并添加到握柄
				controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
				scene.add( controllerGrip1 );

				// 第二个控制器（右手）
				controllerGrip2 = renderer.xr.getControllerGrip( 1 );
				controllerGrip2.addEventListener( 'connected', controllerConnected );
				controllerGrip2.addEventListener( 'disconnected', controllerDisconnected );
				controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
				scene.add( controllerGrip2 );

				// 13. 监听窗口大小变化事件
				// 当浏览器窗口大小改变时，重新调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

				// 初始化完成，应用开始运行
				console.log('Three.js WebXR触觉反馈演示初始化完成');
			}

			// ============ 控制器连接事件处理函数 ============
			function controllerConnected( event ) {
				/*
				 * 当XR控制器成功连接时调用
				 * event.data包含控制器信息，如gamepad对象
				 */

				console.log('控制器已连接:', event);

				// 1. 创建音频振荡器
				/*
				 * OscillatorNode是Web Audio API的一部分，用于生成音频波形
				 * 这里使用正弦波(sine)，产生纯净的音调
				 */
				const oscillator = listener.context.createOscillator();
				oscillator.type = 'sine'; // 波形类型：正弦波
				oscillator.start(); // 开始振荡

				// 2. 创建3D位置音频
				/*
				 * PositionalAudio使音频源具有3D空间位置
				 * 当控制器移动时，声音会相应改变
				 */
				const audio = new THREE.PositionalAudio( listener );
				audio.setNodeSource( oscillator ); // 设置音频源为振荡器
				audio.setRefDistance( 20 ); // 参考距离：20单位，影响音量衰减曲线
				audio.setVolume( 0 ); // 初始音量为0（静音）

				// 3. 在控制器上存储自定义数据
				/*
				 * userData是Three.js对象的通用属性，用于存储任意数据
				 * 这里存储的信息将在碰撞检测和反馈中使用
				 */
				this.userData.gamepad = event.data.gamepad; // 游戏手柄API对象
				this.userData.colliding = false; // 碰撞状态标志
				this.userData.audio = audio; // 音频对象引用

				// 4. 将音频添加到控制器
				// 这样音频源就会跟随控制器一起移动
				this.add( audio );

				console.log('控制器音频系统已初始化');
			}

			// ============ 控制器断开事件处理函数 ============
			function controllerDisconnected() {
				/*
				 * 当XR控制器断开连接时调用
				 * 清理相关资源，防止内存泄漏
				 */

				console.log('控制器已断开');

				// 获取控制器上的音频对象
				const audio = this.userData.audio;
				// 停止音频振荡器
				audio.source.stop();

				// 从控制器移除音频对象
				this.remove( audio );

				// 清理userData中的引用
				this.userData.gamepad = undefined;
				this.userData.audio = undefined;

				console.log('控制器音频系统已清理');
			}

			// ============ 窗口大小变化处理函数 ============
			function onWindowResize() {
				/*
				 * 响应式设计：当浏览器窗口大小改变时，调整渲染
				 * 这对于多设备兼容性和窗口调整很重要
				 */

				// 1. 更新相机纵横比
				// 纵横比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机投影矩阵（必须调用）
				camera.updateProjectionMatrix();

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

				console.log(`窗口大小已调整: ${window.innerWidth} x ${window.innerHeight}`);
			}

			// ============ 碰撞检测主函数 ============
			function handleCollisions() {
				/*
				 * 每帧调用，处理所有碰撞检测逻辑
				 * 执行流程：重置状态 -> 检测碰撞 -> 更新状态
				 */

				// 1. 重置所有柱子的碰撞状态
				// 每帧开始时，假设所有柱子都没有被碰撞
				for ( let i = 0; i < group.children.length; i ++ ) {
					group.children[ i ].collided = false;
				}

				// 2. 分别处理两个控制器的碰撞检测
				handleController( controllerGrip1 );
				handleController( controllerGrip2 );

				// 3. 处理未碰撞的柱子
				// 恢复它们的原始外观（移除发光效果和缩放）
				for ( let i = 0; i < group.children.length; i ++ ) {
					const child = group.children[ i ];
					if ( ! child.collided ) {
						// 重置蓝色发光强度为0
						child.material.emissive.b = 0;
						// 恢复原始大小（缩放因子为1）
						child.scale.setScalar( 1 );
					}
				}
			}

			// ============ 五声音阶定义 ============
			/*
			 * 使用五声音阶产生悦耳的音符，避免不和谐音程
			 * 数组中的数字表示相对于根音的半音数：
			 *   0: 根音（C）
			 *   3: 小三度（Eb）
			 *   5: 纯四度（F）
			 *   7: 纯五度（G）
			 *   10: 小七度（Bb）
			 * 这是大调五声音阶，在C大调中是：C, D, E, G, A
			 * 这里使用的是：C, Eb, F, G, Bb（更蓝调的感觉）
			 */
			const musicScale = [ 0, 3, 5, 7, 10 ];

			// ============ 单个控制器碰撞处理函数 ============
			function handleController( controller ) {
				/*
				 * 处理单个控制器与所有柱子的碰撞检测
				 * 如果检测到碰撞，触发视觉、听觉和触觉反馈
				 */

				// 1. 重置控制器的碰撞状态
				controller.userData.colliding = false;

				// 2. 获取控制器的音频和游戏手柄对象
				const audio = controller.userData.audio;
				const gamepad = controller.userData.gamepad;

				// 3. 安全检查：如果音频或游戏手柄未初始化，直接返回
				if ( audio === undefined || gamepad === undefined ) return;

				// 4. 获取音频源（振荡器）和检查触觉支持
				const oscillator = audio.source;
				// 检查游戏手柄是否支持触觉反馈（振动）
				const supportHaptic = 'hapticActuators' in gamepad && 
									  gamepad.hapticActuators != null && 
									  gamepad.hapticActuators.length > 0;

				// 5. 创建球形碰撞检测区域
				/*
				 * 使用球体进行碰撞检测的原因：
				 *   - 计算简单高效
				 *   - 适合控制器这种大致球形的物体
				 *   - 不需要精确的控制器几何模型
				 */
				const sphere = {
					radius: 0.03, // 半径0.03单位（3厘米）
					center: controller.position // 球心在控制器位置
				};

				// 6. 遍历所有柱子，检测碰撞
				for ( let i = 0; i < group.children.length; i ++ ) {
					const child = group.children[ i ]; // 当前柱子
					
					// 计算柱子的轴对齐包围盒(AABB)
					box.setFromObject( child );

					// 检测球体与AABB是否相交
					if ( box.intersectsSphere( sphere ) ) {
						/*
						 * 碰撞发生！执行以下反馈：
						 *   - 视觉：柱子发光并轻微缩放
						 *   - 听觉：播放对应音符
						 *   - 触觉：控制器振动（如果支持）
						 */

						// 7. 视觉反馈：柱子发光（蓝色）
						/*
						 * emissive属性控制材质的自发光颜色
						 * 这里设置蓝色通道为1，使柱子发出蓝光
						 */
						child.material.emissive.b = 1;
						
						// 8. 计算碰撞强度并应用随机缩放
						/*
						 * 强度 = 柱子索引 / 总柱子数
						 * 例如：第1个柱子强度0.1，第10个柱子强度1.0
						 */
						const intensity = child.userData.index / group.children.length;
						// 随机缩放：1 + (0到0.1之间随机值) * 强度
						child.scale.setScalar( 1 + Math.random() * 0.1 * intensity );

						// 9. 触觉反馈（如果支持）
						if ( supportHaptic ) {
							/*
							 * 调用游戏手柄的振动功能
							 * 参数：
							 *   - intensity: 振动强度（0.0到1.0）
							 *   - 100: 振动持续时间（毫秒）
							 */
							gamepad.hapticActuators[ 0 ].pulse( intensity, 100 );
						}

						// 10. 计算并设置音符频率
						/*
						 * 音乐逻辑：
						 *   1. 使用柱子索引在五声音阶中循环
						 *   2. 每5个柱子提高一个八度（+12半音）
						 *   3. 基于A2=110Hz计算频率
						 * 
						 * 例如：
						 *   柱子1: 索引1 -> musicScale[1%5=1]=3 -> 无八度偏移 -> 半音数=3
						 *   柱子6: 索引6 -> musicScale[6%5=1]=3 -> 八度偏移1 -> 半音数=3+12=15
						 */
						const musicInterval = musicScale[ child.userData.index % musicScale.length ] + 
											  12 * Math.floor( child.userData.index / musicScale.length );
						// 计算频率：110Hz * 2^(半音数/12)
						oscillator.frequency.value = 110 * Math.pow( 2, musicInterval / 12 );
						
						// 11. 更新碰撞状态
						controller.userData.colliding = true; // 控制器正在碰撞
						group.children[ i ].collided = true;  // 柱子被碰撞
					}
				}

				// 12. 根据碰撞状态设置音频音量
				/*
				 * 如果控制器正在与任何柱子碰撞，播放音频
				 * 否则静音
				 * 这样只有碰撞时才有声音，避免持续噪音
				 */
				if ( controller.userData.colliding ) {
					audio.setVolume( 0.5 ); // 50%音量
				} else {
					audio.setVolume( 0 ); // 静音
				}
			}

			// ============ 动画循环函数 ============
			/*
			 * 这是Three.js的核心动画循环
			 * 由renderer.setAnimationLoop(animate)设置
			 * 每帧自动调用（通常是60fps）
			 */
			function animate() {
				/*
				 * 每帧执行顺序：
				 *   1. 处理碰撞检测和反馈
				 *   2. 渲染场景
				 * 
				 * 注意：Three.js会自动处理XR模式下的相机更新
				 * 在XR模式下，相机位置由头显控制
				 * 在非XR模式下，相机由OrbitControls控制
				 */

				// 1. 处理碰撞检测
				// 检测控制器与柱子的碰撞，并触发相应反馈
				handleCollisions();

				// 2. 渲染场景
				// 将3D场景绘制到2D画布上
				renderer.render( scene, camera );
			}

			// ============ 应用总结 ============
			/*
			 * 本演示展示了Three.js WebXR的强大功能：
			 * 
			 * 1. XR集成：
			 *    - 自动检测XR设备
			 *    - 提供进入/退出XR的UI
			 *    - 支持多控制器
			 * 
			 * 2. 多感官反馈：
			 *    - 视觉：碰撞时发光和缩放
			 *    - 听觉：基于五声音阶的3D空间音频
			 *    - 触觉：控制器振动（如果支持）
			 * 
			 * 3. 物理交互：
			 *    - 实时碰撞检测
			 *    - 包围盒与球体相交测试
			 * 
			 * 4. 用户体验：
			 *    - 非XR模式下的备用控制（OrbitControls）
			 *    - 响应式设计
			 *    - 平滑的动画和过渡
			 * 
			 * 这是一个完整的XR交互演示，适合学习和参考
			 */

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