<!-- 代码功能详细描述
这是一个基于Three.js的WebXR交互式立方体演示应用，它创建了一个虚拟的3D房间环境，包含200个随机大小、颜色和运动的立方体，支持通过VR控制器进行交互。

核心功能：
虚拟3D环境构建

创建一个6×6×6单位的线框房间

房间内悬浮着200个随机生成的彩色立方体

立方体具有随机的位置、旋转、大小和运动速度

WebXR沉浸式体验

支持VR头显（如Oculus、HTC Vive等）

提供"进入XR"按钮，用户可切换至VR模式

在VR模式下，用户通过头部和手柄与环境交互

控制器交互系统

射线选择：控制器发出射线，可指向并高亮立方体

抓取投掷：按住控制器扳机键抓取立方体，释放时投掷

物理反馈：投掷的立方体获得速度并遵循物理规律运动

动态物理模拟

立方体持续运动并受阻尼影响逐渐减速

边界碰撞检测：立方体撞击墙壁时反弹

旋转模拟：立方体根据运动速度自然旋转

视觉反馈机制

当射线指向立方体时，立方体高亮显示为红色

抓取立方体时，立方体跟随控制器移动

投掷后立方体沿抛物线运动

主要技术点分析
1. Three.js核心架构
javascript
// 三大核心组件
const scene = new THREE.Scene();     // 场景容器
const camera = new THREE.PerspectiveCamera(); // 观察视角
const renderer = new THREE.WebGPURenderer();  // 渲染引擎
场景图(Scene Graph)：层次化管理所有3D对象

相机系统：透视投影模拟人眼视角

渲染器：WebGPU优先，WebGL降级保证兼容性

2. WebXR API集成
javascript
renderer.xr.enabled = true;  // 启用WebXR
XRButton.createButton(renderer);  // 创建XR会话按钮
XR会话管理：处理VR模式的启动和退出

控制器输入：映射手柄按钮和姿态数据

姿态跟踪：实时获取头显和手柄位置/旋转

3. 物理模拟系统
javascript
// 位置更新：P = P + V
cube.position.add(cube.userData.velocity);

// 阻尼效果：V = V * (1 - 阻尼系数)
cube.userData.velocity.multiplyScalar(1 - (0.001 * delta));

// 边界碰撞
if (cube.position.x < -3) {
    cube.position.x = -3;
    cube.userData.velocity.x = -cube.userData.velocity.x;
}
4. 交互检测机制
javascript
// 射线投射检测
raycaster.setFromXRController(controller);
const intersects = raycaster.intersectObjects(room.children);

// 视觉反馈
if (intersects.length > 0) {
    intersects[0].object.material.emissive.setHex(0xff0000);
}
5. 性能优化技术
多视图渲染(Multiview)：单次渲染同时生成左右眼视图

几何体实例化：复用立方体几何体节省内存

帧率无关动画：使用delta time确保不同刷新率下行为一致

批处理渲染：相同材质的对象合并渲染调用

技术架构层次
text
┌─────────────────────────────────────────────┐
│           用户交互层 (Interaction)           │
├─────────────────────────────────────────────┤
│  • 控制器事件处理                           │
│  • 射线碰撞检测                             │
│  • 选择状态管理                             │
├─────────────────────────────────────────────┤
│         物理模拟层 (Physics Simulation)     │
├─────────────────────────────────────────────┤
│  • 运动积分（位置更新）                     │
│  • 碰撞检测与响应                           │
│  • 阻尼衰减系统                             │
├─────────────────────────────────────────────┤
│      3D图形层 (Three.js Graphics)           │
├─────────────────────────────────────────────┤
│  • 场景图管理                               │
│  • 材质与着色器                             │
│  • 光照系统（半球光+平行光）                │
├─────────────────────────────────────────────┤
│      WebXR设备层 (WebXR Device API)         │
├─────────────────────────────────────────────┤
│  • XR会话控制                               │
│  • 姿态数据流                               │
│  • 控制器模型加载                           │
├─────────────────────────────────────────────┤
│    底层渲染层 (WebGPU/WebGL)                │
└─────────────────────────────────────────────┘
关键技术细节
1. 时间管理系统
javascript
const delta = clock.getDelta() * 60;
clock.getDelta()获取上一帧到当前帧的时间差（秒）

乘以60使动画速度与60FPS基准一致

确保不同刷新率下动画速度恒定

2. 控制器模式适配
javascript
switch (targetRayMode) {
    case 'tracked-pointer': // VR手柄：显示射线
    case 'gaze':           // 凝视控制：显示圆环
}
tracked-pointer：有6自由度的手柄控制器

gaze：基于头显注视点的交互方式

screen：基于触摸屏的交互（本示例未使用）

3. 立方体状态管理
javascript
// 每个立方体的自定义数据
object.userData.velocity = new THREE.Vector3(); // 运动速度
object.userData.isSelecting = false;           // 选择状态
INTERSECTED.currentHex = ...;                  // 原始颜色缓存
4. 渲染管线优化
抗锯齿(Antialiasing)：平滑几何体边缘

多视图(Multiview)：VR模式下减少50%绘制调用

材质复用：所有立方体共享几何体，仅材质不同 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示为"Three.js WebXR 交互立方体示例" -->
		<title>Three.js WebXR 交互立方体示例</title>
		<!-- 字符编码设置：确保页面正确显示中文字符 -->
		<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> WebXR - 交互式立方体演示
			<br><small>使用VR控制器与立方体进行交互</small>
		</div>

		<!-- ES模块导入映射：配置Three.js模块的导入路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：包含所有Three.js WebXR逻辑 -->
		<script type="module">

			// 1. 导入Three.js核心库（WebGPU版本）
			import * as THREE from 'three/webgpu';

			// 2. 导入Three.js插件和工具模块
			// BoxLineGeometry：用于创建房间的线框立方体几何体
			// XRButton：创建WebXR会话的UI按钮
			// XRControllerModelFactory：创建XR控制器3D模型的工厂类
			import { BoxLineGeometry } from 'three/addons/geometries/BoxLineGeometry.js';
			import { XRButton } from 'three/addons/webxr/XRButton.js';
			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';

			// 3. 创建Three.js时钟对象
			// 用途：计算时间增量(delta time)，实现帧率无关的动画
			const clock = new THREE.Clock();

			// 4. 全局变量声明区
			let container;            // DOM容器元素，用于放置Three.js渲染器
			let camera;               // 3D场景相机：定义观察视角
			let scene;                // 3D场景：包含所有3D对象的容器
			let raycaster;            // 射线投射器：用于检测3D对象与射线的交点
			let renderer;             // 渲染器：负责将3D场景渲染到2D画布
			let room;                 // 房间对象：表示虚拟空间的线框立方体
			let controller;           // XR控制器：用户输入设备（手柄、手部等）
			let controllerGrip;       // 控制器握把：控制器3D模型的可视部分
			let INTERSECTED = null;   // 当前被射线选中的对象引用

			// 5. 初始化函数调用：启动Three.js应用
			init();

			/**
			 * 6. 初始化函数定义：设置Three.js场景、相机、渲染器和交互功能
			 * 这是整个应用的入口点，按顺序执行：
			 * 1. 创建DOM容器和场景
			 * 2. 设置相机和灯光
			 * 3. 创建房间和立方体
			 * 4. 配置WebXR渲染器和控制器
			 * 5. 添加事件监听器
			 */
			function init() {

				// 6.1 创建DOM容器
				// 创建一个div元素作为Three.js渲染器的父容器
				container = document.createElement( 'div' );
				// 将容器添加到页面body中
				document.body.appendChild( container );

				// 6.2 创建3D场景
				// Scene对象是所有3D对象（网格、灯光、相机等）的根容器
				scene = new THREE.Scene();
				// 设置场景背景颜色：RGB(80,80,80) - 灰色
				scene.background = new THREE.Color( 0x505050 );

				// 6.3 创建透视相机
				// 参数说明：
				// 50 - 视野角度(FOV)：垂直视角50度，值越大看到的范围越广
				// window.innerWidth / window.innerHeight - 宽高比：根据窗口尺寸计算
				// 0.1 - 近裁剪平面：距离相机0.1个单位以内的物体不被渲染
				// 10 - 远裁剪平面：距离相机10个单位以外的物体不被渲染
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
				// 设置相机初始位置：(x,y,z) = (0, 1.6, 3)
				// y=1.6模拟人眼高度（约1.6米），z=3使相机稍微远离场景中心
				camera.position.set( 0, 1.6, 3 );
				// 将相机添加到场景中（相机也是场景中的一个对象）
				scene.add( camera );

				// 6.4 创建房间线框
				// 使用BoxLineGeometry创建6x6x6的立方体线框，内部有10x10x10的细分
				// translate(0, 3, 0)：将几何体向上移动3个单位，使房间中心在地面以上
				room = new THREE.LineSegments(
					new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
					// LineBasicMaterial：线框基础材质，只渲染线条
					new THREE.LineBasicMaterial( { color: 0xbcbcbc } )
				);
				// 将房间添加到场景
				scene.add( room );

				// 6.5 添加环境照明
				// HemisphereLight：半球光，模拟天空和地面的环境光
				// 参数1：天空颜色，参数2：地面颜色，参数3：光照强度
				scene.add( new THREE.HemisphereLight( 0xa5a5a5, 0x898989, 3 ) );

				// 6.6 添加定向光源
				// DirectionalLight：平行光，模拟太阳光，所有光线平行照射
				const light = new THREE.DirectionalLight( 0xffffff, 3 );
				// 设置光源方向：从(1,1,1)位置指向原点(0,0,0)
				light.position.set( 1, 1, 1 ).normalize();  // normalize()将向量长度变为1
				scene.add( light );

				// 6.7 创建立方体几何体
				// BoxGeometry：创建立方体几何体，尺寸0.15x0.15x0.15单位
				const geometry = new THREE.BoxGeometry( 0.15, 0.15, 0.15 );

				// 6.8 创建200个随机立方体
				for ( let i = 0; i < 200; i ++ ) {

					// 6.8.1 创建立方体网格对象
					// Mesh：3D网格对象，包含几何体(geometry)和材质(material)
					// MeshLambertMaterial：朗伯材质，对光照有反应但不反光
					// Math.random() * 0xffffff：生成随机RGB颜色
					const object = new THREE.Mesh( 
						geometry, 
						new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) 
					);

					// 6.8.2 随机设置立方体位置
					// 位置范围：x和z在[-2, 2]，y在[0, 4]（房间内）
					object.position.x = Math.random() * 4 - 2;  // Math.random()返回[0,1)的随机数
					object.position.y = Math.random() * 4;
					object.position.z = Math.random() * 4 - 2;

					// 6.8.3 随机设置立方体旋转（欧拉角）
					// 每个轴随机旋转0到2π弧度（0到360度）
					object.rotation.x = Math.random() * 2 * Math.PI;
					object.rotation.y = Math.random() * 2 * Math.PI;
					object.rotation.z = Math.random() * 2 * Math.PI;

					// 6.8.4 随机设置立方体缩放
					// 缩放范围：[0.5, 1.5]，使立方体大小不一
					object.scale.x = Math.random() + 0.5;
					object.scale.y = Math.random() + 0.5;
					object.scale.z = Math.random() + 0.5;

					// 6.8.5 为立方体添加物理属性：速度向量
					// userData：Three.js对象的自定义数据存储区域
					object.userData.velocity = new THREE.Vector3();
					// 随机速度：每个分量在[-0.005, 0.005]范围内
					object.userData.velocity.x = Math.random() * 0.01 - 0.005;
					object.userData.velocity.y = Math.random() * 0.01 - 0.005;
					object.userData.velocity.z = Math.random() * 0.01 - 0.005;

					// 6.8.6 将立方体添加到房间中
					// 注意：立方体是room的子对象，不是scene的直接子对象
					room.add( object );
				}

				// 6.9 创建射线投射器
				// Raycaster：用于计算鼠标/射线与3D对象的交点
				// 在VR中用于控制器射线与对象的碰撞检测
				raycaster = new THREE.Raycaster();

				// 6.10 创建WebGPU渲染器
				// WebGPURenderer：使用WebGPU API进行渲染（如果浏览器支持）
				// 配置参数：
				// - antialias: true - 启用抗锯齿，平滑边缘
				// - forceWebGL: true - 如果WebGPU不可用，回退到WebGL
				// - outputBufferType: THREE.UnsignedByteType - 输出缓冲区数据类型
				// - multiview: true - 启用多视图，用于VR左右眼同时渲染优化
				renderer = new THREE.WebGPURenderer( { 
					antialias: true, 
					forceWebGL: true, 
					outputBufferType: THREE.UnsignedByteType, 
					multiview: true 
				} );
				
				// 设置渲染器像素比：适配高DPI屏幕（如Retina显示屏）
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环：animate函数将每帧调用
				renderer.setAnimationLoop( animate );
				
				// 启用WebXR支持
				renderer.xr.enabled = true;
				
				// 将渲染器的canvas元素添加到DOM容器
				container.appendChild( renderer.domElement );

				// 6.11 控制器交互事件处理函数
				
				/**
				 * 控制器选择开始事件处理函数
				 * 当用户按下控制器选择按钮（如扳机键）时触发
				 */
				function onSelectStart() {
					// 在控制器的userData中标记选择状态
					this.userData.isSelecting = true;
				}

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

				// 6.12 获取XR控制器对象（索引0表示第一个控制器）
				controller = renderer.xr.getController( 0 );
				
				// 为控制器添加事件监听器
				controller.addEventListener( 'selectstart', onSelectStart );  // 选择开始
				controller.addEventListener( 'selectend', onSelectEnd );      // 选择结束
				
				/**
				 * 控制器连接事件处理
				 * 当XR控制器与系统成功连接时触发
				 */
				controller.addEventListener( 'connected', function ( event ) {
					// event.data包含控制器信息，targetRayMode表示射线模式
					const targetRayMode = event.data.targetRayMode;
					
					// 根据射线模式添加控制器视觉表示
					// 'tracked-pointer'：追踪指针（如VR手柄）
					// 'gaze'：凝视（如基于头显的注视点）
					if ( targetRayMode === 'tracked-pointer' || targetRayMode === 'gaze' ) {
						// buildController创建控制器射线或注视点的视觉表示
						this.add( buildController( event.data ) );
					}
				} );
				
				/**
				 * 控制器断开连接事件处理
				 * 当XR控制器断开连接时触发
				 */
				controller.addEventListener( 'disconnected', function () {
					// 移除控制器的视觉表示（第一个子对象）
					this.remove( this.children[ 0 ] );
				} );
				
				// 将控制器添加到场景中
				scene.add( controller );

				// 6.13 创建控制器模型工厂
				// 用于生成控制器的3D模型（手柄外观）
				const controllerModelFactory = new XRControllerModelFactory();

				// 6.14 获取控制器握把并添加3D模型
				// getControllerGrip获取控制器的握把部分
				controllerGrip = renderer.xr.getControllerGrip( 0 );
				// 创建控制器模型并添加到握把
				controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) );
				// 将握把添加到场景
				scene.add( controllerGrip );

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

				// 6.16 创建WebXR按钮并添加到页面
				// XRButton.createButton创建"进入XR"按钮
				// 用户点击此按钮开始XR会话（VR/AR模式）
				document.body.appendChild( XRButton.createButton( renderer ) );

			}

			/**
			 * 7. 构建控制器视觉表示的函数
			 * 根据控制器的目标射线模式创建不同的视觉反馈
			 * @param {Object} data - 控制器数据对象
			 * @returns {THREE.Object3D} 控制器视觉表示对象
			 */
			function buildController( data ) {

				let geometry, material;

				// 7.1 根据射线模式创建不同视觉表示
				switch ( data.targetRayMode ) {

					case 'tracked-pointer':
						// 7.1.1 创建射线几何体（从控制器发出的射线）
						geometry = new THREE.BufferGeometry();
						// 设置顶点位置：两个点(0,0,0)和(0,0,-1)，形成一条向前的线段
						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 ) );

						// 7.1.2 创建线段材质
						material = new THREE.LineBasicMaterial( { 
							vertexColors: true,           // 使用顶点颜色（从灰色渐变到黑色）
							blending: THREE.AdditiveBlending  // 加法混合：使射线更亮
						} );

						// 7.1.3 返回射线对象
						return new THREE.Line( geometry, material );

					case 'gaze':
						// 7.1.4 创建凝视模式圆环（用于注视点交互）
						geometry = new THREE.RingGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
						// 参数：内半径0.02，外半径0.04，分段数32，向前平移1单位
						material = new THREE.MeshBasicMaterial( { 
							opacity: 0.5,      // 半透明：50%不透明度
							transparent: true   // 启用透明度
						} );
						// 7.1.5 返回圆环网格对象
						return new THREE.Mesh( geometry, material );
				}

			}

			/**
			 * 8. 窗口大小调整处理函数
			 * 响应浏览器窗口大小变化，更新相机和渲染器
			 */
			function onWindowResize() {
				// 8.1 更新相机宽高比
				// 相机宽高比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				// 8.2 更新相机投影矩阵
				// 当相机参数改变后，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();
				
				// 8.3 更新渲染器尺寸
				// 使渲染器画布与窗口新尺寸匹配
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 9. 动画循环函数
			 * 每一帧渲染时调用，执行以下操作：
			 * 1. 处理控制器交互
			 * 2. 检测射线与对象的交点
			 * 3. 更新所有立方体的物理状态
			 * 4. 渲染场景
			 * 注意：此函数由renderer.setAnimationLoop自动调用
			 */
			function animate() {

				// 9.1 获取时间增量（乘以60实现帧率无关动画）
				// clock.getDelta()返回自上一帧以来的时间（秒）
				// 乘以60使动画速度与60FPS下的行为一致
				const delta = clock.getDelta() * 60;

				// 9.2 处理控制器选择交互
				// 如果控制器处于选择状态（用户按着选择按钮）
				if ( controller.userData.isSelecting === true ) {
					
					// 9.2.1 获取房间中的第一个立方体（索引0）
					const cube = room.children[ 0 ];
					// 从房间中移除该立方体（后续会重新添加）
					room.remove( cube );

					// 9.2.2 将立方体移动到控制器当前位置
					// copy方法复制控制器的位置向量
					cube.position.copy( controller.position );
					
					// 9.2.3 为立方体设置新的随机速度
					// 速度范围：x和y在[-0.01*delta, 0.01*delta]之间
					// z方向有向前的倾向：在[-0.05*delta, -0.04*delta]之间
					cube.userData.velocity.x = ( Math.random() - 0.5 ) * 0.02 * delta;
					cube.userData.velocity.y = ( Math.random() - 0.5 ) * 0.02 * delta;
					cube.userData.velocity.z = ( Math.random() * 0.01 - 0.05 ) * delta;
					
					// 9.2.4 应用控制器的旋转到速度向量
					// 使立方体抛出的方向与控制器方向一致
					cube.userData.velocity.applyQuaternion( controller.quaternion );
					
					// 9.2.5 将立方体添加回房间（添加到数组末尾）
					// 这样它就不再是第一个立方体，下一个被选择的将是不同的立方体
					room.add( cube );
				}

				// 9.3 射线交点检测：检测控制器射线与立方体的交互
				
				// 9.3.1 从XR控制器更新射线投射器
				// 设置射线的起点和方向为控制器的位置和方向
				raycaster.setFromXRController( controller );
				
				// 9.3.2 计算射线与房间内所有立方体的交点
				// 参数1：要检测的对象数组（room.children包含所有立方体）
				// 参数2：是否递归检测子对象（false表示只检测直接子对象）
				const intersects = raycaster.intersectObjects( room.children, false );

				// 9.3.3 处理交点检测结果
				if ( intersects.length > 0 ) {
					// 如果检测到交点
					if ( INTERSECTED != intersects[ 0 ].object ) {
						// 如果当前交点对象与之前不同（射线移到了新对象上）
						
						// 9.3.4 恢复之前高亮对象的自发光颜色
						if ( INTERSECTED ) {
							// 将材质的自发光颜色恢复为保存的原始颜色
							INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
						}

						// 9.3.5 设置新的高亮对象
						// 更新INTERSECTED为当前交点对象
						INTERSECTED = intersects[ 0 ].object;
						// 保存对象当前的自身光颜色
						INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
						// 设置自发光颜色为红色（0xff0000）作为高亮效果
						INTERSECTED.material.emissive.setHex( 0xff0000 );
					}
				} else {
					// 如果没有检测到交点（射线没有指向任何立方体）
					if ( INTERSECTED ) {
						// 恢复之前高亮对象的颜色
						INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
					}
					// 清空当前交点对象引用
					INTERSECTED = null;
				}

				// 9.4 更新所有立方体的物理状态
				// 遍历房间中的所有立方体（room.children数组）
				for ( let i = 0; i < room.children.length; i ++ ) {

					// 9.4.1 获取当前立方体引用
					const cube = room.children[ i ];

					// 9.4.2 应用速度阻尼（空气阻力模拟）
					// multiplyScalar：向量乘以标量
					// 1 - (0.001 * delta)：每帧减少0.1%的速度（乘以delta实现帧率无关）
					cube.userData.velocity.multiplyScalar( 1 - ( 0.001 * delta ) );

					// 9.4.3 更新立方体位置：位置 = 位置 + 速度
					cube.position.add( cube.userData.velocity );

					// 9.4.4 X轴边界碰撞检测
					// 房间边界：x范围[-3, 3]（房间宽度6，中心在0）
					if ( cube.position.x < - 3 || cube.position.x > 3 ) {
						// 使用clamp函数将位置限制在边界内
						cube.position.x = THREE.MathUtils.clamp( cube.position.x, - 3, 3 );
						// 反转X方向速度（模拟反弹）
						cube.userData.velocity.x = - cube.userData.velocity.x;
					}

					// 9.4.5 Y轴边界碰撞检测
					// 房间边界：y范围[0, 6]（地面到天花板）
					if ( cube.position.y < 0 || cube.position.y > 6 ) {
						cube.position.y = THREE.MathUtils.clamp( cube.position.y, 0, 6 );
						// 反转Y方向速度
						cube.userData.velocity.y = - cube.userData.velocity.y;
					}

					// 9.4.6 Z轴边界碰撞检测
					// 房间边界：z范围[-3, 3]（房间深度6，中心在0）
					if ( cube.position.z < - 3 || cube.position.z > 3 ) {
						cube.position.z = THREE.MathUtils.clamp( cube.position.z, - 3, 3 );
						// 反转Z方向速度
						cube.userData.velocity.z = - cube.userData.velocity.z;
					}

					// 9.4.7 根据速度更新立方体旋转
					// 速度越快，旋转越快，乘以2增加旋转效果，乘以delta实现帧率无关
					cube.rotation.x += cube.userData.velocity.x * 2 * delta;
					cube.rotation.y += cube.userData.velocity.y * 2 * delta;
					cube.rotation.z += cube.userData.velocity.z * 2 * delta;
				}

				// 9.5 渲染场景：将3D场景绘制到2D画布
				// 参数1：要渲染的场景对象
				// 参数2：使用的相机视角
				renderer.render( scene, camera );

			}

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