<!-- Three.js 第一人称视角3D游戏 - 详细功能说明和技术分析
一、整体功能概述
这是一个基于Three.js的第一人称视角3D交互应用，模拟了简单的3D游戏环境。用户可以在一个随机生成的3D世界中自由探索，具有完整的物理运动系统和交互控制。

主要功能模块：
3D场景渲染 - 创建和渲染包含地形、物体、光照的3D世界

第一人称控制 - 通过鼠标和键盘实现第一人称视角移动

物理引擎 - 模拟重力、跳跃、阻力等物理效果

碰撞检测 - 检测玩家与环境的交互

用户界面 - 游戏开始界面和操作说明

二、核心技术点详解
1. Three.js核心框架
Scene（场景）：3D对象的容器，管理所有渲染元素

Camera（相机）：透视相机（PerspectiveCamera），模拟人眼视角

Renderer（渲染器）：WebGL渲染器，将3D场景渲染到2D屏幕

Geometry（几何体）：定义物体的形状（平面、立方体）

Material（材质）：定义物体的外观（颜色、纹理、光照反应）

2. 指针锁定控制（Pointer Lock API）
javascript
// 关键技术实现：
const controls = new PointerLockControls(camera, document.body);
controls.lock(); // 锁定鼠标指针
controls.unlock(); // 释放鼠标指针
功能：隐藏鼠标光标，直接将鼠标移动转换为相机旋转

应用场景：第一人称射击游戏、3D建模工具等需要精确视角控制的场景

API特性：

需要用户主动交互才能触发（点击事件）

ESC键默认解除锁定

提供lock/unlock事件监听

3. 物理运动系统
3.1 速度与加速度模型
javascript
// 物理公式实现：
velocity.y -= 9.8 * 100.0 * delta; // 重力加速度
velocity.x -= velocity.x * 10.0 * delta; // 阻力（空气阻力）
velocity.z -= direction.z * 400.0 * delta; // 移动加速度
核心物理参数：

重力：9.8 m/s²（地球重力） × 100（质量系数）

移动力：400.0 加速度系数

阻力：10.0 阻力系数

跳跃力：350 垂直冲量

3.2 基于时间增量的运动计算
javascript
const delta = (time - prevTime) / 1000; // 计算时间增量（秒）
帧率无关性：使用时间增量确保在不同性能设备上运动速度一致

平滑运动：基于时间的连续计算而非离散的每帧移动

4. 碰撞检测系统
4.1 射线投射（Raycasting）
javascript
const raycaster = new THREE.Raycaster(
    new THREE.Vector3(),      // 起点：玩家位置
    new THREE.Vector3(0, -1, 0), // 方向：垂直向下
    0,                        // 起始距离
    10                        // 最大检测距离
);
工作原理：从玩家脚部向下发射一条射线

检测逻辑：如果射线与任何物体相交，则玩家"站在"该物体上

应用：跳跃限制（只有站在物体上才能跳跃）

4.2 交互对象管理
javascript
const objects = []; // 存储所有可碰撞物体
const intersections = raycaster.intersectObjects(objects, false);
5. 3D场景生成技术
5.1 程序化地形生成
javascript
// 地形顶点位移算法
vertex.x += Math.random() * 20 - 10; // X轴随机偏移
vertex.y += Math.random() * 2;       // Y轴高度变化
vertex.z += Math.random() * 20 - 10; // Z轴随机偏移
技术特点：在几何体创建后动态修改顶点位置

效果：创造自然的丘陵地形，而非完全平坦的地面

5.2 顶点着色技术
javascript
// HSL颜色模型的应用
color.setHSL(
    Math.random() * 0.3 + 0.5, // 色相：0.5-0.8（绿色到蓝色）
    0.75,                      // 饱和度：固定值
    Math.random() * 0.25 + 0.75, // 亮度：0.75-1.0
    THREE.SRGBColorSpace      // 标准颜色空间
);
非索引几何体：确保每个顶点可以拥有独立颜色

视觉增强：创建丰富多彩、自然的外观

5.3 随机物体分布
javascript
// 500个立方体的随机分布算法
box.position.x = Math.floor(Math.random() * 20 - 10) * 20;
box.position.y = Math.floor(Math.random() * 20) * 20 + 10;
box.position.z = Math.floor(Math.random() * 20 - 10) * 20;
规律性分布：使用网格化随机分布，避免物体重叠

性能优化：使用相同的几何体和材质实例，节省内存

6. 光照与视觉效果
6.1 半球光（HemisphereLight）
javascript
const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 2.5);
特点：模拟天空和地面的环境光照

参数：天空颜色（浅蓝）、地面颜色（灰）、光照强度

6.2 雾效（Fog）
javascript
scene.fog = new THREE.Fog(0xffffff, 0, 750);
功能：增强场景深度感，远处物体逐渐融入背景

参数：雾颜色、起始距离、完全覆盖距离

7. 材质系统
7.1 地面材质（MeshBasicMaterial）
类型：基础材质，不受光照影响

特性：性能高，适合大型表面（地面）

配置：使用顶点颜色（vertexColors: true）

7.2 立方体材质（MeshPhongMaterial）
类型：冯氏材质，支持光照和高光

特性：

specular: 0xffffff：白色镜面高光

flatShading: true：平面着色（每个面独立计算）

vertexColors: true：支持顶点颜色

8. 输入处理系统
8.1 键盘控制
WASD/方向键：四方向移动控制

空格键：跳跃动作

事件机制：keydown/keyup事件监听

8.2 状态机设计
javascript
let moveForward = false;
let moveBackward = false;
let moveLeft = false;
let moveRight = false;
let canJump = false;
状态驱动：按键事件只改变状态标志，动画循环中根据状态计算运动

分离关注点：输入处理与物理计算解耦

9. 性能优化技术
9.1 几何体复用
javascript
const boxGeometry = new THREE.BoxGeometry(20, 20, 20).toNonIndexed();
// 500个立方体共享同一个几何体定义
内存效率：避免为每个物体创建独立的几何体数据

渲染优化：GPU可以批量处理相同几何体

9.2 高效的渲染循环
javascript
renderer.setAnimationLoop(animate); // 替代requestAnimationFrame
现代API：Three.js封装的动画循环

自动同步：与显示器刷新率同步（通常60fps）

9.3 自适应渲染
javascript
renderer.setPixelRatio(window.devicePixelRatio); // 适应高DPI屏幕
10. 用户界面设计
10.1 响应式布局
CSS Flexbox：完美的居中布局

视口单位：width: 100vw, height: 100vh

10.2 交互设计
渐进式交互：点击开始 → 指针锁定 → 游戏开始

状态反馈：清晰的视觉状态变化

操作说明：详细的中文控制说明

11. 模块化与代码组织
11.1 ES6模块系统
javascript
import * as THREE from 'three';
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
模块化导入：按需加载Three.js功能

依赖管理：通过importmap配置模块路径

11.2 函数式组织
init()：初始化所有资源

animate()：主动画循环

onWindowResize()：响应式处理

三、技术亮点总结
完整的3D游戏循环：从初始化、输入处理、物理更新到渲染的完整流程

基于物理的运动系统：真实的运动感，而非简单的位移

高效的碰撞检测：简单的射线检测实现复杂的地面检测

程序化内容生成：动态创建多样化的3D世界

优秀的用户体验：流畅的控制和直观的界面

现代Web技术栈：ES6模块、CSS Flexbox、WebGL -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题 -->
		<title>Three.js - 第一人称视角演示（指针锁定控制）</title>
		<!-- 字符编码 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			- width=device-width: 宽度等于设备宽度
			- user-scalable=no: 禁止用户缩放（防止移动端缩放影响3D体验）
			- minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0
			这样设置可以确保在不同设备上获得一致的3D渲染体验
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 引入外部样式表 -->
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			/* 
				遮罩层样式：
				这个div覆盖整个屏幕，用于显示开始界面
				当游戏开始时，这个层会被隐藏
			*/
			#blocker {
				position: absolute; /* 绝对定位，相对于最近的定位祖先元素（body） */
				width: 100%; /* 占据整个视口宽度 */
				height: 100%; /* 占据整个视口高度 */
				background-color: rgba(0,0,0,0.5); /* 黑色半透明背景，50%透明度 */
			}

			/* 
				开始界面容器样式：
				这个div包含游戏开始前的操作说明
			*/
			#instructions {
				width: 100%; /* 宽度100% */
				height: 100%; /* 高度100% */
				/* 使用Flexbox布局实现完美的居中效果 */
				display: flex; /* 启用弹性布局 */
				flex-direction: column; /* 垂直排列子元素 */
				justify-content: center; /* 垂直居中：在主轴（垂直方向）上居中 */
				align-items: center; /* 水平居中：在交叉轴（水平方向）上居中 */
				/* 其他样式 */
				text-align: center; /* 文本居中 */
				font-size: 14px; /* 基础字体大小 */
				cursor: pointer; /* 鼠标悬停时显示手型指针，提示可点击 */
				color: white; /* 白色文字，确保在深色背景上可见 */
				font-family: Arial, sans-serif; /* 设置字体族 */
			}
		</style>
	</head>
	<body>
		<!-- 游戏开始界面遮罩层 -->
		<div id="blocker">
			<!-- 游戏开始界面，包含操作说明 -->
			<div id="instructions">
				<!-- 主标题 -->
				<p style="font-size:36px; margin-bottom: 20px; font-weight: bold;">
					点击开始游戏
				</p>
				<!-- 操作说明 -->
				<p style="font-size: 18px; line-height: 1.6;">
					<b>移动控制：</b><br/>
					W / 上箭头 - 向前移动<br/>
					A / 左箭头 - 向左移动<br/>
					S / 下箭头 - 向后移动<br/>
					D / 右箭头 - 向右移动<br/>
					<br/>
					<b>动作控制：</b><br/>
					空格键 - 跳跃<br/>
					<br/>
					<b>视角控制：</b><br/>
					鼠标移动 - 环顾四周<br/>
					<br/>
					<b>退出游戏：</b><br/>
					ESC键 - 退出指针锁定模式
				</p>
				<!-- 温馨提示 -->
				<p style="font-size: 14px; margin-top: 30px; color: #cccccc;">
					提示：游戏开始后，鼠标会被锁定在窗口中。<br/>
					按下ESC键可以退出游戏模式，重新显示鼠标。
				</p>
			</div>
		</div>

		<!-- 
			导入映射配置：
			这个配置告诉浏览器如何解析模块导入语句
			在Three.js的模块化版本中非常重要
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module" 表示这是一个ES6模块，支持import/export语法
		-->
		<script type="module">
			// ============================================
			// 导入依赖模块
			// ============================================
			
			// 导入Three.js库的所有功能（使用* as THREE将整个模块作为一个对象导入）
			import * as THREE from 'three';
			// 导入指针锁定控制器（PointerLockControls）
			// 这是一个Three.js的插件，提供第一人称视角的鼠标控制功能
			import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';

			// ============================================
			// 全局变量声明
			// ============================================
			
			// Three.js核心对象
			let camera;      // 相机：定义观察3D场景的视角
			let scene;       // 场景：包含所有3D对象的容器
			let renderer;    // 渲染器：将3D场景渲染到2D屏幕的工具
			let controls;    // 控制器：处理用户输入（鼠标、键盘）的控制系统

			// 可交互对象数组：存储场景中所有可以与其发生碰撞的物体
			const objects = [];

			// 射线投射器：用于检测碰撞，判断玩家是否站在物体上
			let raycaster;

			// 移动状态标志：记录当前哪些移动键被按下
			let moveForward = false;   // 向前移动标志
			let moveBackward = false;  // 向后移动标志
			let moveLeft = false;      // 向左移动标志
			let moveRight = false;     // 向右移动标志
			let canJump = false;       // 跳跃状态标志：是否可以跳跃

			// 时间和物理相关变量
			let prevTime = performance.now(); // 上一帧的时间戳（毫秒）
			// 物理向量：用于计算运动
			const velocity = new THREE.Vector3(); // 速度向量：存储x,y,z三个方向的速度
			const direction = new THREE.Vector3(); // 方向向量：根据按键计算移动方向
			const vertex = new THREE.Vector3(); // 顶点向量：临时变量，用于几何体处理
			const color = new THREE.Color(); // 颜色对象：临时变量，用于颜色计算

			// ============================================
			// 初始化函数调用（程序入口点）
			// ============================================
			init();

			// ============================================
			// 初始化函数定义
			// ============================================
			function init() {
				// ****************************
				// 1. 创建相机（Camera）
				// ****************************
				// 使用透视相机（PerspectiveCamera），模拟人眼视角
				// 参数说明：
				// - 75: 视野角度（Field of View），单位是度，值越大看到的范围越广
				// - window.innerWidth / window.innerHeight: 纵横比（宽高比）
				// - 1: 近裁剪面（Near Clipping Plane），比这个距离近的物体不会被渲染
				// - 1000: 远裁剪面（Far Clipping Plane），比这个距离远的物体不会被渲染
				camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
				// 设置相机的初始位置：x=0, y=10（离地面10个单位高度）, z=0
				camera.position.y = 10;

				// ****************************
				// 2. 创建场景（Scene）
				// ****************************
				scene = new THREE.Scene(); // 创建新的场景对象
				// 设置场景背景颜色为白色（十六进制颜色值0xffffff表示白色）
				scene.background = new THREE.Color(0xffffff);
				// 添加雾效（Fog）：增强场景的深度感和距离感
				// 参数说明：
				// - 0xffffff: 雾的颜色（白色）
				// - 0: 雾开始的距离（从相机位置开始）
				// - 750: 雾完全覆盖的距离（750个单位距离外的物体完全被雾遮挡）
				scene.fog = new THREE.Fog(0xffffff, 0, 750);

				// ****************************
				// 3. 添加光照（Lighting）
				// ****************************
				// 创建半球光（HemisphereLight）：模拟自然光照效果
				// 半球光从上到下渐变，适合模拟天空和地面的光照
				// 参数说明：
				// - 0xeeeeff: 天空颜色（浅蓝色）
				// - 0x777788: 地面颜色（灰色）
				// - 2.5: 光照强度
				const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 2.5);
				light.position.set(0.5, 1, 0.75); // 设置光源位置
				scene.add(light); // 将光源添加到场景中

				// ****************************
				// 4. 初始化指针锁定控制器
				// ****************************
				// 创建PointerLockControls实例
				// 参数说明：
				// - camera: 要控制的相机对象
				// - document.body: 监听输入事件的DOM元素（整个页面）
				controls = new PointerLockControls(camera, document.body);

				// ****************************
				// 5. 设置开始界面的事件监听
				// ****************************
				// 获取DOM元素的引用
				const blocker = document.getElementById('blocker'); // 遮罩层
				const instructions = document.getElementById('instructions'); // 开始界面

				// 为开始界面添加点击事件监听器
				// 当用户点击"点击开始游戏"时，触发指针锁定
				instructions.addEventListener('click', function () {
					// 请求浏览器锁定指针（鼠标）
					// 成功锁定后，鼠标会被隐藏，鼠标移动直接控制相机视角
					controls.lock();
				});

				// 监听指针锁定成功事件
				controls.addEventListener('lock', function () {
					// 当指针成功锁定时，隐藏开始界面
					instructions.style.display = 'none'; // 隐藏文字
					blocker.style.display = 'none'; // 隐藏遮罩层
					// 现在游戏正式开始，玩家可以用鼠标和键盘控制角色
				});

				// 监听指针解锁事件（用户按下ESC键时会触发）
				controls.addEventListener('unlock', function () {
					// 当指针解锁时，重新显示开始界面
					blocker.style.display = 'block'; // 显示遮罩层
					instructions.style.display = ''; // 显示文字（使用默认display值）
					// 游戏暂停，等待用户再次点击开始
				});

				// 将控制器对象添加到场景中
				// controls.object是控制器的3D表示（一个虚拟对象）
				scene.add(controls.object);

				// ****************************
				// 6. 设置键盘控制
				// ****************************
				
				// 键盘按下事件处理函数
				const onKeyDown = function (event) {
					// 使用switch语句根据按下的键码执行不同的操作
					switch (event.code) {
						// 向前移动：上箭头键 或 W键
						case 'ArrowUp':
						case 'KeyW':
							moveForward = true; // 设置向前移动标志为true
							break;

						// 向左移动：左箭头键 或 A键
						case 'ArrowLeft':
						case 'KeyA':
							moveLeft = true; // 设置向左移动标志为true
							break;

						// 向后移动：下箭头键 或 S键
						case 'ArrowDown':
						case 'KeyS':
							moveBackward = true; // 设置向后移动标志为true
							break;

						// 向右移动：右箭头键 或 D键
						case 'ArrowRight':
						case 'KeyD':
							moveRight = true; // 设置向右移动标志为true
							break;

						// 跳跃：空格键
						case 'Space':
							// 检查是否可以跳跃（玩家必须在地面或物体上）
							if (canJump === true) {
								velocity.y += 350; // 给Y轴速度一个向上的冲量
								// 注意：这里的350是一个经验值，调整这个值可以改变跳跃高度
							}
							canJump = false; // 跳跃后，暂时不能再次跳跃（直到再次落地）
							break;

						// 可以在这里添加更多的按键控制...
					}
				};

				// 键盘释放事件处理函数
				const onKeyUp = function (event) {
					switch (event.code) {
						// 停止向前移动
						case 'ArrowUp':
						case 'KeyW':
							moveForward = false; // 设置向前移动标志为false
							break;

						// 停止向左移动
						case 'ArrowLeft':
						case 'KeyA':
							moveLeft = false; // 设置向左移动标志为false
							break;

						// 停止向后移动
						case 'ArrowDown':
						case 'KeyS':
							moveBackward = false; // 设置向后移动标志为false
							break;

						// 停止向右移动
						case 'ArrowRight':
						case 'KeyD':
							moveRight = false; // 设置向右移动标志为false
							break;

						// 注意：空格键不需要处理释放事件
						// 跳跃是一次性动作，按下时执行，释放时不执行特殊操作
					}
				};

				// 为整个文档添加键盘事件监听器
				document.addEventListener('keydown', onKeyDown); // 监听按键按下
				document.addEventListener('keyup', onKeyUp);     // 监听按键释放

				// ****************************
				// 7. 初始化射线投射器（碰撞检测）
				// ****************************
				// 创建射线投射器，用于检测玩家是否站在地面或物体上
				// 参数说明：
				// - new THREE.Vector3(): 射线的起点（原点）
				// - new THREE.Vector3(0, -1, 0): 射线的方向（向下）
				// - 0: 射线检测的起始距离
				// - 10: 射线检测的最大距离（只检测10个单位内的物体）
				raycaster = new THREE.Raycaster(
					new THREE.Vector3(), 
					new THREE.Vector3(0, -1, 0), 
					0, 
					10
				);

				// ****************************
				// 8. 创建地面
				// ****************************
				// 创建平面几何体作为地面
				// 参数说明：
				// - 2000: 平面宽度（X轴方向）
				// - 2000: 平面高度（Z轴方向）
				// - 100: 宽度分段数（面片数量）
				// - 100: 高度分段数（面片数量）
				// 分段数越高，平面越精细，可以添加更多细节，但性能消耗也越大
				let floorGeometry = new THREE.PlaneGeometry(2000, 2000, 100, 100);
				// 将平面绕X轴旋转-90度（使平面从垂直变为水平）
				floorGeometry.rotateX(-Math.PI / 2);

				// 为地面添加随机高度变化（地形起伏）
				// 获取顶点位置属性
				let position = floorGeometry.attributes.position;

				// 遍历所有顶点
				for (let i = 0, l = position.count; i < l; i++) {
					// 获取第i个顶点的坐标
					vertex.fromBufferAttribute(position, i);

					// 为每个顶点添加随机偏移，创建自然的地形起伏效果
					// X轴：-10到10之间的随机偏移
					vertex.x += Math.random() * 20 - 10;
					// Y轴：0到2之间的随机高度变化
					vertex.y += Math.random() * 2;
					// Z轴：-10到10之间的随机偏移
					vertex.z += Math.random() * 20 - 10;

					// 将修改后的顶点坐标设置回几何体
					position.setXYZ(i, vertex.x, vertex.y, vertex.z);
				}

				// 将几何体转换为非索引格式
				// 索引几何体：多个三角形共享顶点，节省内存但每个顶点只能有一种颜色
				// 非索引几何体：每个三角形有独立的顶点，可以给每个顶点单独着色
				// toNonIndexed()确保每个面都有独立的顶点，便于实现顶点着色效果
				floorGeometry = floorGeometry.toNonIndexed();
				// 重新获取位置属性（转换后属性会重置）
				position = floorGeometry.attributes.position;
				// 存储顶点颜色的数组
				const colorsFloor = [];

				// 为每个顶点生成随机颜色（实现多彩的地面效果）
				for (let i = 0, l = position.count; i < l; i++) {
					// 使用HSL颜色模型生成颜色（比RGB更容易控制）
					// HSL参数：
					// - H（色相）：0.5-0.8之间的随机值（绿色到蓝色范围）
					// - S（饱和度）：固定0.75（中等饱和度）
					// - L（亮度）：0.75-1.0之间的随机值（较亮的颜色）
					// - THREE.SRGBColorSpace：使用sRGB颜色空间（标准的web颜色空间）
					color.setHSL(
						Math.random() * 0.3 + 0.5, // 色相
						0.75,                     // 饱和度
						Math.random() * 0.25 + 0.75, // 亮度
						THREE.SRGBColorSpace      // 颜色空间
					);
					// 将颜色的RGB分量添加到数组
					// 每个顶点需要3个值：R、G、B
					colorsFloor.push(color.r, color.g, color.b);
				}

				// 创建颜色缓冲区属性并添加到几何体
				// Float32BufferAttribute：高效存储浮点数的缓冲区属性
				// 参数说明：
				// - colorsFloor: 颜色数据数组
				// - 3: 每个顶点的分量数（RGB是3个分量）
				floorGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colorsFloor, 3));

				// 创建地面材质
				// MeshBasicMaterial：基础材质，不受光照影响，性能较好
				// vertexColors: true 表示使用顶点颜色而不是材质颜色
				const floorMaterial = new THREE.MeshBasicMaterial({ vertexColors: true });
				
				// 创建网格对象（几何体 + 材质）
				const floor = new THREE.Mesh(floorGeometry, floorMaterial);
				// 将地面添加到场景中
				scene.add(floor);

				// ****************************
				// 9. 创建场景中的物体（立方体）
				// ****************************
				// 创建立方体几何体，作为场景中的障碍物/装饰物
				// 参数：20x20x20的立方体，并转换为非索引格式
				const boxGeometry = new THREE.BoxGeometry(20, 20, 20).toNonIndexed();

				// 为立方体生成顶点颜色（类似于地面的处理）
				position = boxGeometry.attributes.position;
				const colorsBox = [];

				for (let i = 0, l = position.count; i < l; i++) {
					color.setHSL(
						Math.random() * 0.3 + 0.5,
						0.75,
						Math.random() * 0.25 + 0.75,
						THREE.SRGBColorSpace
					);
					colorsBox.push(color.r, color.g, color.b);
				}

				// 将颜色属性添加到立方体几何体
				boxGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colorsBox, 3));

				// 创建500个随机分布的立方体
				for (let i = 0; i < 500; i++) {
					// 创建立方体材质
					// MeshPhongMaterial：冯氏材质，支持光照、高光和阴影
					// 参数说明：
					// - specular: 0xffffff 镜面反射颜色（白色高光）
					// - flatShading: true 平面着色（每个面是平的，不是光滑的）
					// - vertexColors: true 使用顶点颜色
					const boxMaterial = new THREE.MeshPhongMaterial({
						specular: 0xffffff,
						flatShading: true,
						vertexColors: true
					});
					// 为材质设置基础颜色（顶点颜色会叠加在这个颜色上）
					boxMaterial.color.setHSL(
						Math.random() * 0.2 + 0.5,
						0.75,
						Math.random() * 0.25 + 0.75,
						THREE.SRGBColorSpace
					);

					// 创建立方体网格
					const box = new THREE.Mesh(boxGeometry, boxMaterial);
					
					// 随机设置立方体的位置
					// X坐标：-10到9之间的整数乘以20（-200到180，间隔20）
					box.position.x = Math.floor(Math.random() * 20 - 10) * 20;
					// Y坐标：0到19之间的整数乘以20再加10（10到390，间隔20）
					box.position.y = Math.floor(Math.random() * 20) * 20 + 10;
					// Z坐标：-10到9之间的整数乘以20（-200到180，间隔20）
					box.position.z = Math.floor(Math.random() * 20 - 10) * 20;

					// 将立方体添加到场景
					scene.add(box);
					// 将立方体添加到可交互对象数组（用于碰撞检测）
					objects.push(box);
				}

				// ****************************
				// 10. 初始化渲染器
				// ****************************
				// 创建WebGL渲染器
				// 参数说明：
				// - antialias: true 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer({ antialias: true });
				// 设置设备像素比（适配高DPI屏幕，如Retina显示屏）
				// 在高DPI屏幕上，这个值会是2或3，渲染更高分辨率的图像
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器的尺寸为整个浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环
				// setAnimationLoop是requestAnimationFrame的封装
				// 它会以显示器的刷新率（通常是60fps）调用animate函数
				renderer.setAnimationLoop(animate);
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild(renderer.domElement);

				// ****************************
				// 11. 添加窗口大小变化监听
				// ****************************
				// 当浏览器窗口大小改变时，调整相机和渲染器
				window.addEventListener('resize', onWindowResize);
			}

			// ============================================
			// 窗口大小变化处理函数
			// ============================================
			function onWindowResize() {
				// 更新相机的纵横比（宽高比）
				// 当窗口大小改变时，宽高比也会改变
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵
				// 投影矩阵定义了3D空间如何映射到2D屏幕，纵横比改变后必须更新
				camera.updateProjectionMatrix();
				// 更新渲染器尺寸，使其与窗口大小匹配
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ============================================
			// 动画循环函数（每帧调用）
			// ============================================
			function animate() {
				// 获取当前时间戳（毫秒）
				// performance.now()比Date.now()精度更高
				const time = performance.now();

				// 只有在指针锁定模式下（游戏进行中）才处理移动
				if (controls.isLocked === true) {
					// ****************************
					// 1. 碰撞检测：检查玩家是否站在物体上
					// ****************************
					// 设置射线投射器的起点为玩家当前位置
					raycaster.ray.origin.copy(controls.object.position);
					// 将起点向下移动10个单位（从玩家脚部位置发射射线）
					raycaster.ray.origin.y -= 10;

					// 执行射线检测，检测与objects数组中物体的交点
					// 参数说明：
					// - objects: 要检测的物体数组
					// - false: 不递归检测子对象（只检测物体本身）
					const intersections = raycaster.intersectObjects(objects, false);
					// 如果有交点，说明玩家站在物体上
					const onObject = intersections.length > 0;

					// ****************************
					// 2. 计算时间增量
					// ****************************
					// 计算从上一帧到当前帧的时间差（秒）
					// 使用时间增量可以使动画与帧率无关，在不同性能的电脑上运动速度一致
					const delta = (time - prevTime) / 1000;

					// ****************************
					// 3. 应用物理：阻力
					// ****************************
					// 应用阻力到水平速度（X和Z轴）
					// 阻力公式：velocity -= velocity * 阻力系数 * 时间
					// 10.0是阻力系数，值越大减速越快
					velocity.x -= velocity.x * 10.0 * delta;
					velocity.z -= velocity.z * 10.0 * delta;

					// ****************************
					// 4. 应用物理：重力
					// ****************************
					// 应用重力到垂直速度（Y轴）
					// 重力公式：velocity.y -= 重力加速度 * 质量 * 时间
					// 9.8是地球重力加速度（米/秒²）
					// 100.0是玩家的质量（虚拟值，影响下落速度）
					velocity.y -= 9.8 * 100.0 * delta;

					// ****************************
					// 5. 计算移动方向
					// ****************************
					// 根据按键状态计算移动方向向量
					// Number()将布尔值转换为1或0
					// 如果同时按下W和S，direction.z会是0（相互抵消）
					direction.z = Number(moveForward) - Number(moveBackward);
					direction.x = Number(moveRight) - Number(moveLeft);
					// 标准化方向向量（使其长度为1）
					// 这确保无论向哪个方向移动，速度都是一致的
					// 如果不标准化，斜向移动（同时按W和D）会比单一方向移动更快
					direction.normalize();

					// ****************************
					// 6. 根据按键施加力
					// ****************************
					// 如果正在向前或向后移动，给Z轴速度施加力
					// 400.0是移动加速度，值越大加速越快
					if (moveForward || moveBackward) {
						velocity.z -= direction.z * 400.0 * delta;
					}
					// 如果正在向左或向右移动，给X轴速度施加力
					if (moveLeft || moveRight) {
						velocity.x -= direction.x * 400.0 * delta;
					}

					// ****************************
					// 7. 处理站立状态
					// ****************************
					// 如果玩家站在物体上
					if (onObject === true) {
						// 确保垂直速度不小于0（防止穿过地面）
						// Math.max(0, velocity.y) 如果velocity.y是负数，则设为0
						velocity.y = Math.max(0, velocity.y);
						// 允许跳跃（只有站在物体上时才能跳跃）
						canJump = true;
					}

					// ****************************
					// 8. 应用水平移动
					// ****************************
					// 使用控制器的方法移动玩家
					// 注意：这里使用负号是因为速度方向与实际移动方向相反
					// moveRight: 沿X轴移动
					controls.moveRight(-velocity.x * delta);
					// moveForward: 沿Z轴移动
					controls.moveForward(-velocity.z * delta);

					// ****************************
					// 9. 应用垂直移动（跳跃/下落）
					// ****************************
					// 直接修改Y轴位置（不同于水平移动使用控制器方法）
					// 这是重力和跳跃的实现
					controls.object.position.y += (velocity.y * delta);

					// ****************************
					// 10. 地面碰撞检测
					// ****************************
					// 如果玩家位置低于地面高度（10个单位）
					if (controls.object.position.y < 10) {
						// 重置垂直速度为0（停止下落）
						velocity.y = 0;
						// 将玩家位置设置为地面高度
						controls.object.position.y = 10;
						// 允许跳跃（玩家在地面上）
						canJump = true;
					}
				}

				// 更新上一帧时间，用于下一帧计算时间增量
				prevTime = time;

				// 渲染场景
				// 将3D场景通过相机视角渲染到2D画布上
				// 这是整个动画循环的最后一步，也是最重要的一步
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>