<!-- 代码功能概述
这是一个基于Three.js的WebXR交互式虚拟现实应用程序，实现了在一个3D虚拟房间内与200个彩色立方体进行沉浸式交互的体验。

核心功能
3D虚拟环境：创建一个6x6x6米的线框房间，包含200个随机颜色、大小和旋转的立方体

WebXR沉浸体验：支持VR头显和控制器交互

物理模拟：立方体具有简单的物理特性（速度、碰撞、反弹、摩擦力）

交互系统：

控制器射线指向并高亮选中的立方体

按下控制器按钮可抓取并投掷立方体

动态更新：立方体持续运动并遵守物理规则

主要技术点详解
1. WebXR API集成
javascript
// 关键配置
renderer.xr.enabled = true;  // 启用WebXR支持
XRButton.createButton(renderer, {  // 创建XR进入按钮
    'optionalFeatures': ['depth-sensing']
});
WebXR设备API：标准化VR/AR设备访问

会话管理：通过按钮启动/停止XR会话

控制器输入：支持6DoF（六自由度）控制器

立体渲染：自动为每只眼睛渲染不同视角

2. Three.js核心架构
javascript
// 场景图结构
scene (根节点)
├── camera (透视相机)
├── room (房间容器)
│   ├── 线框立方体 (边界)
│   └── 200个小立方体 (子物体)
├── hemisphereLight (半球环境光)
├── directionalLight (平行光)
├── controller (XR控制器)
└── controllerGrip (控制器3D模型)
场景图(Scene Graph)：树状结构管理3D对象

透视相机(PerspectiveCamera)：模拟人眼视角

几何体与材质系统：

javascript
// BoxGeometry + MeshLambertMaterial = 3D立方体
const object = new THREE.Mesh(
    geometry, 
    new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff })
);
3. 物理模拟系统
javascript
// 每个立方体的物理属性
object.userData.velocity = new THREE.Vector3();  // 速度向量
object.userData.velocity.multiplyScalar(1 - (0.001 * delta));  // 速度衰减
物理特性：

速度向量：存储x、y、z三个方向的速度分量

碰撞检测：边界检查（AABB：轴对齐边界框）

反弹算法：碰撞时反转速度方向

摩擦力模拟：速度随时间衰减

旋转物理：根据线速度产生角速度

4. 交互检测系统
javascript
// 射线投射检测
raycaster.setFromXRController(controller);
const intersects = raycaster.intersectObjects(room.children, false);
交互流程：

控制器射线：从控制器位置发出射线

相交检测：使用Raycaster计算与物体的交点

视觉反馈：改变选中物体的自发光颜色

选择处理：控制器按钮触发时抓取物体

5. 动画循环与性能优化
javascript
// 时间增量计算
const delta = clock.getDelta() * 60;
renderer.setAnimationLoop(animate);  // WebXR专用动画循环
性能优化策略：

时间增量(delta)：使动画速度与帧率无关

实例化几何体：所有立方体共享同一几何体，减少内存

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

设备像素比适配：在高DPI屏幕上提供清晰渲染

6. 控制器模型系统
javascript
const controllerModelFactory = new XRControllerModelFactory();
controllerGrip.add(controllerModelFactory.createControllerModel(controllerGrip));
控制器类型：

tracked-pointer：VR手柄（显示为射线）

gaze：凝视控制（显示为瞄准环）

7. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
自适应特性：

窗口大小变化：自动调整相机宽高比

全屏支持：适合VR设备全屏显示

移动设备适配：视口设置优化移动体验

关键技术亮点
1. 模块化导入系统
javascript
import * as THREE from 'three';  // ES6模块化
import { XRButton } from 'three/addons/webxr/XRButton.js';
2. 用户数据存储
javascript
object.userData.velocity = new THREE.Vector3();  // 扩展对象属性
3. 四元数旋转应用
javascript
cube.userData.velocity.applyQuaternion(controller.quaternion);  // 基于控制器方向投掷
4. 数学工具使用
javascript
THREE.MathUtils.clamp(cube.position.x, -3, 3);  // 限制值在范围内
5. 颜色处理
javascript
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();  // 保存/恢复颜色
技术栈总结
技术领域	使用的技术	作用
3D渲染	Three.js WebGLRenderer	高性能3D图形渲染
VR/AR	WebXR Device API	虚拟现实设备支持
物理引擎	自定义简单物理系统	运动、碰撞、反弹
交互	Raycaster射线检测	物体选择和交互
动画	requestAnimationFrame + Clock	平滑动画和更新
模块化	ES6 Modules + Import Maps	代码组织和依赖管理
响应式	CSS + JavaScript事件	多设备适配 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			文档类型声明：告诉浏览器这是HTML5文档
			语言设置：zh-CN表示简体中文
		-->
		<title>Three.js WebXR 交互式立方体演示</title>
		<!-- 
			页面标题：显示在浏览器标签页上的文字
			中文标题：Three.js WebXR交互式立方体演示
		-->
		<meta charset="utf-8">
		<!-- 
			字符编码：utf-8支持所有Unicode字符，包括中文
			必须设置在head的前几行，否则可能出现乱码
		-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<!-- 
			视口设置（针对移动设备优化）：
			width=device-width：宽度等于设备宽度
			initial-scale=1.0：初始缩放比例为1（不缩放）
			user-scalable=no：禁止用户手动缩放（在XR应用中常见，防止意外缩放）
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
		<!-- 
			外部样式表链接：
			type="text/css"：指定链接文件类型为CSS样式表
			rel="stylesheet"：定义当前文档与链接文件的关系为样式表
			href="main.css"：样式表文件路径（与HTML文件同级目录）
		-->
	</head>
	<body>
		<!-- 
			页面主体部分：所有可见内容都在这里
			body标签包含网页的所有可视元素
		-->

		<!-- 
			信息展示区域：显示项目信息和链接
			id="info"：为这个div元素设置唯一标识符，方便CSS和JavaScript操作
		-->
		<div id="info">
			<!-- 
				链接到Three.js官网：
				target="_blank"：在新标签页打开链接
				rel="noopener"：安全设置，防止新页面通过window.opener访问原页面
				链接文本：Three.js官方网站
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js官方网站</a> 
			<!-- 文本内容：WebXR - 交互式立方体演示 -->
			WebXR - 交互式立方体演示
		</div>

		<!-- 
			导入映射配置（Import Maps）：
			这是现代JavaScript模块系统的重要特性
			允许开发者控制浏览器解析模块导入的方式
			类似于"模块别名"或"路径映射"
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主应用程序脚本（模块类型）：
			type="module"：表示这是一个ES6模块，支持import/export语法
			模块脚本默认具有defer特性，会在HTML解析完成后执行
			模块作用域是独立的，不会污染全局命名空间
		-->
		<script type="module">
			// ================================
			// 模块导入部分
			// ================================
			
			// 导入Three.js核心库的所有导出，并命名为THREE
			// THREE将包含Three.js的所有核心类（Scene, Camera, Mesh等）
			import * as THREE from 'three';
			// * 表示导入所有导出内容
			// as THREE 表示将所有导入内容绑定到THREE对象上

			// 从Three.js附加组件中导入BoxLineGeometry几何体
			// BoxLineGeometry：一个特殊的几何体，用于创建由线框组成的立方体
			// 通常用于创建房间边界或网格地面
			import { BoxLineGeometry } from 'three/addons/geometries/BoxLineGeometry.js';
			// { BoxLineGeometry }：这是命名导入（Named Import），只导入指定的成员

			// 导入WebXR按钮组件
			// XRButton：一个用于创建进入/退出XR体验的UI按钮
			// 它会自动检测设备支持的XR模式（VR/AR）
			import { XRButton } from 'three/addons/webxr/XRButton.js';

			// 导入XR控制器模型工厂
			// XRControllerModelFactory：用于创建XR控制器的3D模型
			// 根据不同的XR设备（Oculus, Vive等）生成对应的控制器模型
			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';

			// ================================
			// 全局变量声明
			// ================================
			
			// 创建Clock对象，用于跟踪时间
			// 在动画循环中，clock.getDelta()可以获取上一帧到当前帧的时间差
			// 这能确保动画速度在不同刷新率的设备上保持一致
			const clock = new THREE.Clock();

			// 定义全局变量（使用let，因为这些变量在初始化后可能会被重新赋值）
			let container;      // 存储Three.js渲染器canvas的容器DOM元素
			let camera;         // 3D场景中的相机，决定了用户的观察视角
			let scene;          // 3D场景，包含所有要渲染的3D对象
			let raycaster;      // 射线投射器，用于检测3D空间中的对象相交
			let renderer;       // WebGL渲染器，负责将3D场景绘制到canvas上

			let room;           // 房间对象，是一个线框立方体，也是所有小立方体的父容器

			let controller;     // XR控制器对象，用于处理控制器的输入和交互
			let controllerGrip; // 控制器手柄模型，显示控制器在3D空间中的外观
			let INTERSECTED;    // 当前被射线击中的立方体对象（用于高亮显示）

			// ================================
			// 主初始化函数调用
			// ================================
			
			// 立即调用init函数，启动应用程序
			init();

			// ================================
			// 函数定义部分
			// ================================
			
			/**
			 * 应用程序初始化函数
			 * 这是整个应用的入口点，负责：
			 * 1. 创建DOM容器
			 * 2. 设置Three.js核心对象
			 * 3. 创建3D场景和物体
			 * 4. 配置WebXR功能
			 * 5. 设置事件监听器
			 */
			function init() {
				// --------------------------------
				// 1. 创建DOM容器
				// --------------------------------
				
				// 创建一个新的div元素作为Three.js渲染器的容器
				// document.createElement('div')：使用DOM API创建元素
				container = document.createElement('div');
				
				// 将创建的div元素添加到body的末尾
				// appendChild：DOM方法，将元素添加为指定父元素的最后一个子元素
				document.body.appendChild(container);

				// --------------------------------
				// 2. 创建Three.js场景
				// --------------------------------
				
				// 创建场景对象
				// 场景是所有3D对象的容器，类似于一个"舞台"
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// 使用十六进制颜色值：0x505050（深灰色）
				// 0x前缀表示十六进制数
				scene.background = new THREE.Color(0x505050);

				// --------------------------------
				// 3. 创建相机
				// --------------------------------
				
				// 创建透视相机（Perspective Camera）
				// 参数说明：
				// 50 - 视野角度（Field of View），单位是度，值越大看到的内容越多
				// window.innerWidth / window.innerHeight - 宽高比，根据窗口大小计算
				// 0.1 - 近裁剪面（Near Clipping Plane），距离相机小于此值的物体不渲染
				// 10 - 远裁剪面（Far Clipping Plane），距离相机大于此值的物体不渲染
				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10);
				
				// 设置相机位置（x, y, z坐标系）
				// x: 0（左右位置，正右负左）
				// y: 1.6（上下位置，正上负下，1.6米大约是人眼高度）
				// z: 3（前后位置，正前负后，3表示相机向后3个单位）
				camera.position.set(0, 1.6, 3);
				
				// 将相机添加到场景中
				// 虽然相机通常不直接渲染，但它是场景的一部分
				scene.add(camera);

				// --------------------------------
				// 4. 创建房间（边界）
				// --------------------------------
				
				// 创建房间对象（使用线框立方体表示房间边界）
				room = new THREE.LineSegments(
					// 几何体：使用BoxLineGeometry创建6x6x6的线框立方体
					// 参数说明：
					// 6, 6, 6 - 立方体的宽、高、深
					// 10, 10, 10 - 每个维度上的分段数（影响线的密度）
					// .translate(0, 3, 0) - 将几何体向上平移3个单位（使房间中心在y轴中点）
					new BoxLineGeometry(6, 6, 6, 10, 10, 10).translate(0, 3, 0),
					
					// 材质：使用线基础材质
					// 参数说明：
					// color: 0xbcbcbc - 线的颜色（浅灰色）
					new THREE.LineBasicMaterial({ color: 0xbcbcbc })
				);
				
				// 将房间添加到场景
				scene.add(room);

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

				// 添加平行光（Directional Light）
				// 模拟太阳光，所有光线平行照射
				// 参数说明：
				// 0xffffff - 光的颜色（白色）
				// 3 - 光照强度
				const light = new THREE.DirectionalLight(0xffffff, 3);
				
				// 设置光源方向
				// 先设置向量(1, 1, 1)，表示右前上方向
				// .normalize()：将向量转换为单位向量（长度为1），保持方向但标准化强度
				light.position.set(1, 1, 1).normalize();
				
				// 将光源添加到场景
				scene.add(light);

				// --------------------------------
				// 6. 创建随机立方体
				// --------------------------------
				
				// 创建立方体基础几何体
				// 参数：宽、高、深（0.15米）
				const geometry = new THREE.BoxGeometry(0.15, 0.15, 0.15);

				// 循环创建200个随机立方体
				// for循环：重复执行200次
				for (let i = 0; i < 200; i++) {
					// 创建立方体网格（Mesh）
					// 网格 = 几何体 + 材质
					const object = new THREE.Mesh(
						geometry,  // 使用上面创建的几何体
						// 使用Lambert材质（适合非光泽表面）
						// 参数说明：
						// color: Math.random() * 0xffffff - 随机生成颜色
						// Math.random()返回0-1的随机数
						// 0xffffff是十六进制白色（十进制16777215）
						new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff })
					);

					// 设置随机位置
					// x和z坐标：Math.random() * 4 - 2 生成-2到2之间的随机数
					// y坐标：Math.random() * 4 生成0到4之间的随机数
					object.position.x = Math.random() * 4 - 2;  // -2到2
					object.position.y = Math.random() * 4;      // 0到4
					object.position.z = Math.random() * 4 - 2;  // -2到2

					// 设置随机旋转角度（每个轴0到2π弧度，即0-360度）
					// 2 * Math.PI 等于360度
					object.rotation.x = Math.random() * 2 * Math.PI;  // 绕x轴旋转
					object.rotation.y = Math.random() * 2 * Math.PI;  // 绕y轴旋转
					object.rotation.z = Math.random() * 2 * Math.PI;  // 绕z轴旋转

					// 设置随机缩放（0.5到1.5倍）
					// Math.random()返回0-1，+0.5后得到0.5-1.5
					object.scale.x = Math.random() + 0.5;  // x轴缩放
					object.scale.y = Math.random() + 0.5;  // y轴缩放
					object.scale.z = Math.random() + 0.5;  // z轴缩放

					// 为每个立方体添加自定义数据：速度向量
					// userData是Three.js对象的属性，可以存储任意自定义数据
					object.userData.velocity = new THREE.Vector3();
					
					// 设置随机速度（每个分量范围：-0.005到0.005）
					// Math.random() * 0.01 - 0.005 生成-0.005到0.005的随机数
					object.userData.velocity.x = Math.random() * 0.01 - 0.005;  // x方向速度
					object.userData.velocity.y = Math.random() * 0.01 - 0.005;  // y方向速度
					object.userData.velocity.z = Math.random() * 0.01 - 0.005;  // z方向速度

					// 将立方体添加到房间中（作为房间的子对象）
					// 这样立方体就会继承房间的位置、旋转等变换
					room.add(object);
				}

				// --------------------------------
				// 7. 创建射线投射器
				// --------------------------------
				
				// 射线投射器用于检测3D空间中的对象相交
				// 常用于鼠标/控制器交互、碰撞检测等
				raycaster = new THREE.Raycaster();

				// --------------------------------
				// 8. 创建WebGL渲染器
				// --------------------------------
				
				// 创建WebGL渲染器
				// 参数说明：
				// antialias: true - 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				// 设置设备像素比
				// window.devicePixelRatio返回设备的物理像素与CSS像素的比值
				// 在高DPI屏幕（如Retina屏）上，这个值通常是2或3
				// 设置像素比可以使渲染更清晰
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// setAnimationLoop替代了传统的requestAnimationFrame
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop(animate);
				
				// 启用WebXR支持
				// 这是使用Three.js进行XR开发的关键设置
				renderer.xr.enabled = true;
				
				// 将渲染器的canvas元素添加到容器中
				// renderer.domElement是渲染器创建的canvas元素
				container.appendChild(renderer.domElement);

				// --------------------------------
				// 9. 定义控制器事件处理函数
				// --------------------------------
				
				/**
				 * 控制器选择开始事件处理函数
				 * 当用户按下控制器上的选择按钮时触发
				 * this指向触发事件的控制器对象
				 */
				function onSelectStart() {
					// 在控制器的userData中设置选择状态标记
					this.userData.isSelecting = true;
				}

				/**
				 * 控制器选择结束事件处理函数
				 * 当用户释放控制器上的选择按钮时触发
				 */
				function onSelectEnd() {
					// 清除选择状态标记
					this.userData.isSelecting = false;
				}

				// --------------------------------
				// 10. 设置XR控制器
				// --------------------------------
				
				// 获取XR控制器（索引0表示第一个/主控制器）
				// 不同XR系统可能有多个控制器（左右手）
				controller = renderer.xr.getController(0);
				
				// 为控制器添加事件监听器
				controller.addEventListener('selectstart', onSelectStart);  // 监听选择开始
				controller.addEventListener('selectend', onSelectEnd);      // 监听选择结束
				
				// 监听控制器连接事件
				// 当控制器成功连接到XR会话时触发
				controller.addEventListener('connected', function (event) {
					// event.data包含控制器的配置信息
					// buildController函数根据控制器类型创建视觉表示
					// this指向控制器对象，将创建的视觉对象添加为控制器的子对象
					this.add(buildController(event.data));
				});
				
				// 监听控制器断开事件
				// 当控制器从XR会话断开时触发
				controller.addEventListener('disconnected', function () {
					// 移除控制器的视觉表示（第一个子对象）
					this.remove(this.children[0]);
				});
				
				// 将控制器添加到场景中
				scene.add(controller);

				// --------------------------------
				// 11. 创建控制器模型
				// --------------------------------
				
				// 创建XR控制器模型工厂
				// 这个工厂能根据不同的XR设备创建对应的3D控制器模型
				const controllerModelFactory = new XRControllerModelFactory();

				// 获取控制器手柄对象
				// 控制器手柄是控制器的3D模型表示
				controllerGrip = renderer.xr.getControllerGrip(0);
				
				// 为手柄添加控制器模型
				controllerGrip.add(controllerModelFactory.createControllerModel(controllerGrip));
				
				// 将控制器手柄添加到场景
				scene.add(controllerGrip);

				// --------------------------------
				// 12. 设置窗口大小变化监听
				// --------------------------------
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);

				// --------------------------------
				// 13. 创建WebXR按钮
				// --------------------------------
				
				// 创建并添加WebXR按钮到页面
				// XRButton.createButton会自动创建一个按钮，点击可以进入/退出XR体验
				document.body.appendChild(XRButton.createButton(renderer, {
					// 可选特性配置：深度感知
					// 深度感知允许应用获取场景的深度信息，用于遮挡处理等
					'optionalFeatures': ['depth-sensing'],
					
					// 深度感知详细配置
					'depthSensing': {
						// 使用偏好：GPU优化模式（性能更好）
						'usagePreference': ['gpu-optimized'],
						
						// 数据格式偏好：空数组表示使用默认格式
						'dataFormatPreference': []
					}
				}));
			}

			/**
			 * 根据控制器类型构建对应的视觉表示
			 * 
			 * 不同的XR设备有不同的控制器类型，需要不同的视觉表示：
			 * 1. 'tracked-pointer'：追踪指针模式（如VR手柄控制器）
			 *    显示为一个射线，指向用户交互的方向
			 * 2. 'gaze'：凝视模式（如Cardboard类手机VR）
			 *    显示为一个瞄准环，用户通过头部移动来控制
			 * 
			 * @param {Object} data - 控制器数据对象，包含控制器类型等信息
			 * @param {string} data.targetRayMode - 目标射线模式
			 * @returns {THREE.Object3D} 控制器视觉对象（射线或瞄准环）
			 */
			function buildController(data) {
				// 声明局部变量：几何体和材质
				let geometry, material;

				// 根据控制器的目标射线模式选择不同的视觉表现
				switch (data.targetRayMode) {
					// 追踪指针模式（大多数VR手柄）
					case 'tracked-pointer':
						// 创建射线几何体
						geometry = new THREE.BufferGeometry();
						
						// 设置几何体的位置属性
						// 创建包含两个顶点的线段：[起点(0,0,0), 终点(0,0,-1)]
						// 参数说明：
						// [0, 0, 0, 0, 0, -1] - 顶点数据数组（两个点，每个点xyz三个坐标）
						// 3 - 每个顶点的分量数（x,y,z共3个）
						geometry.setAttribute('position', new THREE.Float32BufferAttribute([0, 0, 0, 0, 0, -1], 3));
						
						// 设置几何体的颜色属性
						// 起点颜色(0.5,0.5,0.5)灰色，终点颜色(0,0,0)黑色
						// 这会创建一个从灰色渐变到黑色的线段
						geometry.setAttribute('color', new THREE.Float32BufferAttribute([0.5, 0.5, 0.5, 0, 0, 0], 3));
						
						// 创建线基础材质
						material = new THREE.LineBasicMaterial({
							vertexColors: true,          // 使用顶点颜色（启用上面设置的颜色渐变）
							blending: THREE.AdditiveBlending  // 叠加混合模式（使射线看起来更亮）
						});
						
						// 返回射线对象
						return new THREE.Line(geometry, material);

					// 凝视模式（Cardboard类设备）
					case 'gaze':
						// 创建环形几何体（用于瞄准环）
						// 参数说明：
						// 0.02 - 内半径
						// 0.04 - 外半径
						// 32 - 分段数（影响圆的平滑度）
						// .translate(0, 0, -1) - 将圆环平移到z轴-1位置（在用户前方）
						geometry = new THREE.RingGeometry(0.02, 0.04, 32).translate(0, 0, -1);
						
						// 创建基础网格材质
						material = new THREE.MeshBasicMaterial({
							opacity: 0.5,      // 不透明度50%（半透明）
							transparent: true   // 启用透明度
						});
						
						// 返回瞄准环对象
						return new THREE.Mesh(geometry, material);
				}
			}

			/**
			 * 窗口大小变化处理函数
			 * 当用户调整浏览器窗口大小时，需要：
			 * 1. 更新相机宽高比
			 * 2. 更新相机投影矩阵
			 * 3. 更新渲染器尺寸
			 */
			function onWindowResize() {
				// 更新相机宽高比
				// 窗口大小变化后，需要重新计算宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 改变相机参数后必须调用此方法，使更改生效
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸
				// 使渲染器的canvas大小与窗口大小保持一致
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/**
			 * 动画循环函数（每一帧执行）
			 * 这是Three.js应用的核心，负责：
			 * 1. 处理用户交互
			 * 2. 更新物体状态
			 * 3. 执行物理模拟
			 * 4. 渲染场景
			 * 
			 * 使用clock.getDelta()获取时间增量，确保动画速度与帧率无关
			 */
			function animate() {
				// 获取时间增量（从上一帧到现在的时间差，单位：秒）
				// 乘以60是为了将时间标准化（假设60FPS为基准）
				// 这样动画速度在不同刷新率的设备上表现一致
				const delta = clock.getDelta() * 60;

				// ================================
				// 1. 处理控制器选择交互
				// ================================
				
				// 检查控制器是否正在选择（按钮被按下）
				if (controller.userData.isSelecting === true) {
					// 获取房间的第一个立方体（索引0）
					// 注意：房间的第一个子元素是立方体，因为房间线框是LineSegments类型的对象
					const cube = room.children[0];
					
					// 从房间中移除这个立方体
					// 我们将重新放置它，所以先移除
					room.remove(cube);

					// 将立方体位置设置为控制器当前位置
					// copy方法复制控制器的位置向量
					cube.position.copy(controller.position);
					
					// 为立方体设置新的随机速度
					// 速度计算：(Math.random() - 0.5)生成-0.5到0.5的随机数
					// 乘以0.02 * delta：根据时间增量调整速度大小
					cube.userData.velocity.x = (Math.random() - 0.5) * 0.02 * delta;  // x方向速度
					cube.userData.velocity.y = (Math.random() - 0.5) * 0.02 * delta;  // y方向速度
					cube.userData.velocity.z = (Math.random() * 0.01 - 0.05) * delta; // z方向速度（略微向前）
					
					// 根据控制器的旋转方向应用速度
					// applyQuaternion：将四元数旋转应用到速度向量
					// 这样立方体的抛出方向会与控制器指向方向一致
					cube.userData.velocity.applyQuaternion(controller.quaternion);
					
					// 将立方体重新添加到房间（添加到末尾）
					// 这样它就变成了最后一个立方体，下次会选择另一个立方体
					room.add(cube);
				}

				// ================================
				// 2. 射线碰撞检测（高亮选中的立方体）
				// ================================
				
				// 从XR控制器设置射线投射器的原点（射线起点）和方向
				// 射线从控制器发出，指向控制器指向的方向
				raycaster.setFromXRController(controller);
				
				// 检测射线与房间内所有立方体的交点
				// 参数说明：
				// room.children - 要检测的对象数组（房间的所有子对象）
				// false - 不递归检测子对象的子对象（立方体没有子对象）
				const intersects = raycaster.intersectObjects(room.children, false);

				// 如果射线与至少一个立方体相交
				if (intersects.length > 0) {
					// 检查当前交点的对象是否与之前不同
					if (INTERSECTED != intersects[0].object) {
						// 如果之前有选中的对象，恢复其自发光颜色
						if (INTERSECTED) {
							// 将自发光颜色设置回之前保存的原始颜色
							INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
						}

						// 更新当前选中的对象为新的交点对象
						INTERSECTED = intersects[0].object;
						
						// 保存当前对象的原始自发光颜色
						// getHex()获取颜色的十六进制值
						INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
						
						// 设置新的自发光颜色为红色（0xff0000）
						// 这会使得选中的立方体发出红光
						INTERSECTED.material.emissive.setHex(0xff0000);
					}
				} else {
					// 如果射线没有与任何立方体相交
					
					// 如果有之前选中的对象，恢复其颜色
					if (INTERSECTED) {
						INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
					}
					
					// 清空选中的对象引用
					INTERSECTED = undefined;
				}

				// ================================
				// 3. 立方体物理模拟更新
				// ================================
				
				// 遍历房间中的所有立方体（使用for循环）
				// room.children.length是房间中子对象的数量
				for (let i = 0; i < room.children.length; i++) {
					// 获取当前立方体
					const cube = room.children[i];

					// 应用速度衰减（模拟空气阻力/摩擦力）
					// multiplyScalar：向量乘以标量
					// 1 - (0.001 * delta)：衰减因子，随时间减小速度
					// 这样立方体会逐渐慢下来
					cube.userData.velocity.multiplyScalar(1 - (0.001 * delta));
					
					// 根据速度更新立方体位置
					// add：向量加法，当前位置加上速度向量
					cube.position.add(cube.userData.velocity);

					// ================================
					// 边界碰撞检测与反弹
					// ================================
					
					// X轴边界碰撞（房间x范围：-3到3）
					// 检查立方体是否超出左右边界
					if (cube.position.x < -3 || cube.position.x > 3) {
						// 使用clamp函数将位置限制在边界内
						// clamp：限制值在最小值和最大值之间
						cube.position.x = THREE.MathUtils.clamp(cube.position.x, -3, 3);
						
						// 反转x方向速度（反弹）
						// 负号使速度方向相反
						cube.userData.velocity.x = -cube.userData.velocity.x;
					}

					// Y轴边界碰撞（房间y范围：0到6）
					// 检查立方体是否超出上下边界
					if (cube.position.y < 0 || cube.position.y > 6) {
						// 限制y位置在0到6之间
						cube.position.y = THREE.MathUtils.clamp(cube.position.y, 0, 6);
						
						// 反转y方向速度
						cube.userData.velocity.y = -cube.userData.velocity.y;
					}

					// Z轴边界碰撞（房间z范围：-3到3）
					// 检查立方体是否超出前后边界
					if (cube.position.z < -3 || cube.position.z > 3) {
						// 限制z位置在-3到3之间
						cube.position.z = THREE.MathUtils.clamp(cube.position.z, -3, 3);
						
						// 反转z方向速度
						cube.userData.velocity.z = -cube.userData.velocity.z;
					}

					// ================================
					// 立方体旋转更新
					// ================================
					
					// 根据速度更新立方体旋转
					// 速度越大，旋转越快
					// 乘以2 * delta：调整旋转速度，并与时间增量同步
					cube.rotation.x += cube.userData.velocity.x * 2 * delta;  // 绕x轴旋转
					cube.rotation.y += cube.userData.velocity.y * 2 * delta;  // 绕y轴旋转
					cube.rotation.z += cube.userData.velocity.z * 2 * delta;  // 绕z轴旋转
				}

				// ================================
				// 4. 渲染场景
				// ================================
				
				// 使用渲染器将场景绘制到canvas上
				// 参数：场景对象和相机对象
				// 这个方法会递归遍历场景中的所有对象并渲染它们
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>