<!-- 代码功能与技术点详解
一、项目概述
这是一个基于Three.js的Minecraft风格体素世界WebGL演示应用，实现了类似Minecraft的3D方块化地形生成、渲染和交互功能。

二、核心功能
1. 动态地形生成
使用柏林噪声算法生成128×128格子的三维地形

支持多层（分形）噪声叠加，形成从宏观到微观的地形细节

地形高度数据经过处理和取整，形成方块化的视觉效果

2. 第一人称探索
模拟FPS游戏的控制方式：WASD键移动 + 鼠标控制视角

相机可在地形上空自由飞行探索

左右键分别控制前进和后退

3. 视觉表现
采用Minecraft经典的艺术风格

使用Painterly纹理包，保持像素化美感

逼真的光照系统（环境光 + 平行光）

4. 性能监控
集成Stats.js性能监控器

实时显示FPS、渲染时间等关键指标

三、主要技术点
1. Three.js核心架构
技术组件	作用	关键配置
Scene（场景）	所有3D对象的容器	设置天空蓝背景色
PerspectiveCamera（透视相机）	模拟人眼视角	FOV=60°，近裁剪面1，远裁剪面20000
WebGLRenderer（渲染器）	WebGL渲染引擎	开启抗锯齿，适配设备像素比
MeshLambertMaterial（材质）	漫反射材质	双面渲染，纹理贴图
2. 地形生成技术
柏林噪声（Perlin Noise）应用：
javascript
// 分形噪声叠加：4层不同频率的噪声
quality = 2 → 8 → 32 → 128
// 每层：频率增加4倍，振幅保持（简化版）
高度图数据处理：
数据存储：一维数组，索引公式：x + z * width

高度转换：(noise * 0.15) | 0 （取整形成方块）

世界坐标：每个方块100单位，世界居中布局

3. 渲染优化策略
3.1 背面剔除（Face Culling）优化
javascript
// 可见性判断条件：
if ((相邻方块高度 !== 当前高度) || 位于世界边界) {
    // 渲染这个面
}
优化效果：

完整立方体有6个面，但通常只有1-3个面可见

128×128的世界理论上最多有98,304个面

实际渲染约30,000-40,000个面，减少60%以上

3.2 几何体合并技术
javascript
// 使用BufferGeometryUtils.mergeGeometries()
const geometry = BufferGeometryUtils.mergeGeometries(geometries);
优势：

减少绘制调用：从数千次调用减少到1次

降低CPU开销：减少WebGL状态切换

优化GPU处理：单次传输大量数据更高效

3.3 视锥体剔除
javascript
geometry.computeBoundingSphere(); // 计算包围球
自动检测整个地形是否在视野内

不在视野时跳过渲染，节省GPU资源

4. 纹理与材质系统
纹理图集技术：
单个纹理文件：包含所有方块面的纹理

UV坐标映射：每个面映射到图集的0.5×0.5区域

像素风格保持：NearestFilter防止纹理插值模糊

光照系统：
环境光：0xeeeeee，强度3，提供基础照明

平行光：模拟太阳，从(1,1,0.5)方向照射，强度12

5. 交互控制系统
FirstPersonControls配置：
javascript
controls.movementSpeed = 1000;    // 移动速度（单位/秒）
controls.lookSpeed = 0.125;       // 鼠标灵敏度
controls.lookVertical = true;     // 允许垂直视角
帧率无关动画：
javascript
// 使用Clock计算delta time
controls.update(clock.getDelta());
确保在不同帧率下移动速度一致（30FPS和60FPS体验相同）

6. 性能优化技术栈
优化层级	技术手段	效果
CPU优化	几何体合并、可见性判断	减少JavaScript计算量
GPU优化	视锥体剔除、纹理图集	减少渲染管线负载
内存优化	复用几何体实例、共享纹理	降低内存占用
渲染优化	背面剔除、批处理	提升帧率
7. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
自动适应浏览器窗口大小变化

保持正确的宽高比和渲染分辨率

四、技术亮点
1. 高效的体素渲染
不是为每个方块创建独立的Mesh对象

而是为每个可见面创建几何体，然后合并

兼顾了开发便利性和运行性能

2. 智能的可见性判断
不仅判断相邻方块是否遮挡

还考虑高度差1格的情况（形成阶梯）

世界边界面始终渲染，避免"世界边缘"漏洞

3. 真实的地形生成
柏林噪声产生自然连续的地形

分形叠加增加细节层次感

参数可调，可生成不同风格的地形

4. 完整的用户体验
直观的控制方式

实时性能监控

视觉风格一致性

五、潜在扩展方向
1. 功能增强
添加方块放置/破坏功能

实现昼夜循环系统

加入水体、树木等更多元素

2. 性能优化
实现LOD（多层次细节）

添加遮挡剔除（Occlusion Culling）

使用WebGL 2.0特性（如实例化渲染）

3. 视觉效果
添加阴影系统

实现天气效果（雨、雪、雾）

支持动态光照（火炬、熔岩）

六、项目意义
这个项目展示了：

Three.js的高级应用：如何处理大规模体素数据

WebGL性能优化：在浏览器中渲染复杂3D场景的技巧

程序化内容生成：使用算法创建丰富内容

交互式3D体验：在Web端提供游戏级交互 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js实现Minecraft风格体素世界 -->
		<title>Three.js WebGL - 几何体 - Minecraft风格体素世界</title>
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		<!-- 
			视口设置，针对移动设备优化：
			width=device-width：宽度等于设备宽度
			user-scalable=no：禁止用户手动缩放页面
			minimum-scale=1.0：最小缩放比例为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">
		<!-- 引入外部CSS样式表 -->
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			/* 页面主体样式 */
			body {
				background-color: #bfd1e5;  /* 浅蓝色背景，模拟天空 */
				color: #61443e;            /* 深褐色文字，与Minecraft风格协调 */
				margin: 0;                 /* 移除默认边距 */
				padding: 0;                /* 移除默认内边距 */
				overflow: hidden;          /* 隐藏滚动条，全屏显示3D场景 */
				font-family: Arial, sans-serif; /* 设置字体 */
			}
			/* 超链接样式 */
			a {
				color: #a06851;            /* 棕红色链接，与文字颜色形成对比 */
				text-decoration: none;     /* 移除下划线 */
			}
			a:hover {
				text-decoration: underline; /* 鼠标悬停时显示下划线 */
			}
		</style>
	</head>
	<body>
		<!-- 
			3D场景容器：
			这是一个空div，Three.js将在此创建canvas元素并渲染3D场景
			通过JavaScript动态插入canvas元素
		-->
		<div id="container"></div>
		<!-- 
			页面信息栏：
			显示项目信息、操作说明和版权信息
			固定在页面左下角（通过外部CSS样式实现）
		-->
		<div id="info">
			<!-- 项目技术信息 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 
			<a href="http://www.minecraft.net/" target="_blank" rel="noopener">Minecraft风格</a> 体素世界演示。<br>
			<!-- 纹理包信息 -->
			使用 <a href="http://painterlypack.net/" target="_blank" rel="noopener">Painterly纹理包</a>。<br>
			<!-- 操作说明 -->
			操作指南：鼠标左键前进，鼠标右键后退<br>
			使用WASD键或鼠标移动控制视角
		</div>

		<!-- 
			importmap声明：
			这是JavaScript模块导入映射，现代浏览器支持的特性
			定义了模块名称与实际文件路径的映射关系
			允许使用import语句导入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核心库的所有功能
			// THREE是一个命名空间对象，包含Three.js的所有核心类
			import * as THREE from 'three';

			// 导入性能监控器
			// Stats是一个显示FPS（帧率）和内存使用情况的小工具
			// 帮助开发者监控应用性能
			import Stats from 'three/addons/libs/stats.module.js';

			// 导入第一人称控制器
			// 提供类似FPS游戏的控制方式：WASD移动，鼠标控制视角
			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
			
			// 导入改进的柏林噪声生成器
			// 用于生成自然的地形高度图
			// 柏林噪声是一种梯度噪声，能够产生连续、自然的外观
			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
			
			// 导入BufferGeometry工具集
			// 提供了mergeGeometries函数，可以将多个几何体合并为一个
			// 显著提高渲染性能，减少绘制调用（draw calls）
			import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';

			// ==================== 全局变量声明 ====================
			
			// DOM元素引用
			let container;      // 用于存放Three.js渲染器的容器div
			let stats;          // 性能监控器实例
			
			// Three.js核心对象
			let camera;         // 相机：定义了观察3D场景的视角
			let controls;       // 控制器：处理用户输入，控制相机移动
			let scene;          // 场景：包含所有3D对象的容器
			let renderer;       // 渲染器：负责将3D场景绘制到2D屏幕上
			
			// 世界参数配置
			const worldWidth = 128;    // 世界宽度（X方向方块数量）
			const worldDepth = 128;    // 世界深度（Z方向方块数量）
			const worldHalfWidth = worldWidth / 2;  // 世界宽度的一半，用于居中计算
			const worldHalfDepth = worldDepth / 2;  // 世界深度的一半，用于居中计算
			
			// 生成高度图数据
			// 这是一个一维数组，存储了每个(x,z)位置的地形高度值
			// 数组索引计算方式：index = x + z * worldWidth
			const data = generateHeight(worldWidth, worldDepth);
			
			// 创建Three.js时钟对象
			// 用于计算帧与帧之间的时间差（delta time）
			// 确保动画速度与帧率无关，在不同设备上表现一致
			const clock = new THREE.Clock();

			// ==================== 初始化函数调用 ====================
			// 页面加载完成后自动执行init函数
			init();

			/**
			 * 主初始化函数
			 * 负责创建和设置Three.js的所有核心组件：
			 * 1. 创建场景、相机、渲染器
			 * 2. 生成地形几何体
			 * 3. 设置光照
			 * 4. 设置控制器
			 * 5. 设置事件监听
			 */
			function init() {
				// 获取页面中的容器元素
				// Three.js将在这个div中创建canvas元素
				container = document.getElementById('container');

				// ==================== 创建相机 ====================
				/*
					创建透视投影相机（PerspectiveCamera）：
					模拟人眼的视觉效果，近大远小
					参数说明：
						- 60: 视野角度（Field of View），单位是度
						  60度是一个比较自然的视角
						- window.innerWidth / window.innerHeight: 宽高比
						  根据浏览器窗口尺寸计算
						- 1: 近裁剪平面（near clipping plane）
						  距离相机小于1的物体不会被渲染
						- 20000: 远裁剪平面（far clipping plane）
						  距离相机大于20000的物体不会被渲染
				*/
				camera = new THREE.PerspectiveCamera(
					60, 
					window.innerWidth / window.innerHeight, 
					1, 
					20000
				);
				
				// 设置相机初始位置
				// 放在世界中心点上方一定高度处
				camera.position.y = getY(worldHalfWidth, worldHalfDepth) * 100 + 100;
				/*
					相机位置计算说明：
						- getY(worldHalfWidth, worldHalfDepth): 获取世界中心点的高度值
						- * 100: 高度值转换为实际坐标（每个方块高100单位）
						- + 100: 额外增加100单位，让相机从空中开始
				*/

				// ==================== 创建场景 ====================
				/*
					场景（Scene）是Three.js中所有3D对象的容器
					它本身不显示任何内容，只是作为对象的组织结构
				*/
				scene = new THREE.Scene();
				// 设置场景背景颜色（浅蓝色，模拟天空）
				scene.background = new THREE.Color(0xbfd1e5);

				// 创建变换矩阵
				// Matrix4表示4x4的变换矩阵，可以存储平移、旋转、缩放等信息
				// 用于批量应用变换到几何体
				const matrix = new THREE.Matrix4();

				// ==================== 创建立方体面模板 ====================
				/*
					创建6个平面的几何体作为立方体的面
					每个面都是100x100单位的正方形
					UV坐标调整：将纹理映射到纹理图集的正确位置
					
					纹理图集说明：
						Minecraft使用纹理图集技术，将多个纹理打包到一个大图中
						每个方块面在纹理图集中占0.5x0.5的区域
						UV坐标范围是0-1，调整到0-0.5可以正确映射
				*/

				// +X面：右侧面（从立方体内部看是右侧）
				const pxGeometry = new THREE.PlaneGeometry(100, 100);  // 创建平面几何体
				// 调整UV坐标：前两个顶点的V坐标设置为0.5
				pxGeometry.attributes.uv.array[1] = 0.5;  // 第一个顶点的V坐标（索引1）
				pxGeometry.attributes.uv.array[3] = 0.5;  // 第二个顶点的V坐标（索引3）
				pxGeometry.rotateY(Math.PI / 2);          // 绕Y轴旋转90度，使其面向+X方向
				pxGeometry.translate(50, 0, 0);           // 平移到正确位置（平面中心在原点，需要偏移50）

				// -X面：左侧面
				const nxGeometry = new THREE.PlaneGeometry(100, 100);
				nxGeometry.attributes.uv.array[1] = 0.5;
				nxGeometry.attributes.uv.array[3] = 0.5;
				nxGeometry.rotateY(-Math.PI / 2);         // 绕Y轴旋转-90度，面向-X方向
				nxGeometry.translate(-50, 0, 0);          // 向-X方向平移

				// +Y面：顶面
				const pyGeometry = new THREE.PlaneGeometry(100, 100);
				// 调整不同的UV坐标：第三、四个顶点的V坐标
				pyGeometry.attributes.uv.array[5] = 0.5;  // 第三个顶点的V坐标（索引5）
				pyGeometry.attributes.uv.array[7] = 0.5;  // 第四个顶点的V坐标（索引7）
				pyGeometry.rotateX(-Math.PI / 2);         // 绕X轴旋转-90度，使其朝上
				pyGeometry.translate(0, 50, 0);           // 向上平移

				// +Z面：前面（默认朝向-Z，调整后朝向+Z）
				const pzGeometry = new THREE.PlaneGeometry(100, 100);
				pzGeometry.attributes.uv.array[1] = 0.5;
				pzGeometry.attributes.uv.array[3] = 0.5;
				// 注意：默认创建的平面朝向-Z方向，这里不需要旋转
				pzGeometry.translate(0, 0, 50);           // 向+Z方向平移

				// -Z面：后面
				const nzGeometry = new THREE.PlaneGeometry(100, 100);
				nzGeometry.attributes.uv.array[1] = 0.5;
				nzGeometry.attributes.uv.array[3] = 0.5;
				nzGeometry.rotateY(Math.PI);              // 绕Y轴旋转180度，使其朝向-Z
				nzGeometry.translate(0, 0, -50);          // 向-Z方向平移

				// 存储所有几何体的数组
				// 每个方块可见的面都会添加到这个数组中
				const geometries = [];

				// ==================== 生成地形几何体 ====================
				/*
					双重循环遍历整个世界网格：
					外层循环：Z方向（深度）
					内层循环：X方向（宽度）
					为每个位置生成一个方块（如果需要）
				*/
				for (let z = 0; z < worldDepth; z++) {
					for (let x = 0; x < worldWidth; x++) {
						// 获取当前坐标的高度值（方块层数）
						const h = getY(x, z);

						/*
							创建变换矩阵，将方块放置到正确位置：
							makeTranslation() 创建一个平移矩阵
							参数：x, y, z 方向的平移量
							
							坐标计算说明：
								- X坐标：x * 100 - worldHalfWidth * 100
								  将方块放置到世界坐标中，使世界中心在(0,0,0)
								- Y坐标：h * 100
								  根据高度图决定方块高度
								- Z坐标：z * 100 - worldHalfDepth * 100
								  类似X坐标的居中处理
						*/
						matrix.makeTranslation(
							x * 100 - worldHalfWidth * 100,  // X坐标
							h * 100,                         // Y坐标（高度）
							z * 100 - worldHalfDepth * 100   // Z坐标
						);

						// 获取相邻方块的高度（用于可见性判断）
						const px = getY(x + 1, z);  // 右侧方块（X+1方向）
						const nx = getY(x - 1, z);  // 左侧方块（X-1方向）
						const pz = getY(x, z + 1);  // 前方方块（Z+1方向）
						const nz = getY(x, z - 1);  // 后方方块（Z-1方向）

						/*
							可见性判断逻辑（背面剔除优化）：
							1. 如果一个面被相邻方块完全遮挡，则不渲染
							2. 如果相邻方块高度不同，说明需要渲染这个面
							3. 如果相邻方块比当前方块高1格，也渲染（形成阶梯状）
							4. 世界边界的面总是渲染
							
							这种优化显著减少需要渲染的面数：
							一个完整的立方体有6个面，但通常只有1-3个面可见
							在128x128的世界中，可能减少50-70%的渲染量
						*/

						// 总是渲染顶面（除非被其他方块完全覆盖，但这种情况很少）
						geometries.push(pyGeometry.clone().applyMatrix4(matrix));

						// 右侧面可见性判断
						// 条件：右侧方块高度不同 或 右侧方块比当前高1格 或 在世界左边界
						if ((px !== h && px !== h + 1) || x === 0) {
							// 克隆几何体模板，应用变换矩阵，添加到数组
							geometries.push(pxGeometry.clone().applyMatrix4(matrix));
						}

						// 左侧面可见性判断
						// 条件：左侧方块高度不同 或 左侧方块比当前高1格 或 在世界右边界
						if ((nx !== h && nx !== h + 1) || x === worldWidth - 1) {
							geometries.push(nxGeometry.clone().applyMatrix4(matrix));
						}

						// 前面可见性判断
						// 条件：前方方块高度不同 或 前方方块比当前高1格 或 在世界后边界
						if ((pz !== h && pz !== h + 1) || z === worldDepth - 1) {
							geometries.push(pzGeometry.clone().applyMatrix4(matrix));
						}

						// 后面可见性判断
						// 条件：后方方块高度不同 或 后方方块比当前高1格 或 在世界前边界
						if ((nz !== h && nz !== h + 1) || z === 0) {
							geometries.push(nzGeometry.clone().applyMatrix4(matrix));
						}
					}
				}

				// ==================== 合并几何体 ====================
				/*
					使用BufferGeometryUtils.mergeGeometries()合并所有几何体
					这个操作有显著的性能优势：
					1. 减少WebGL绘制调用（draw calls）：从数千次减少到1次
					2. 减少CPU到GPU的数据传输
					3. 启用视锥体剔除时更高效
				*/
				const geometry = BufferGeometryUtils.mergeGeometries(geometries);
				
				// 计算几何体的包围球（bounding sphere）
				// 用于视锥体剔除（frustum culling）优化
				// 当整个几何体在视野外时，不进行渲染
				geometry.computeBoundingSphere();

				// ==================== 加载纹理 ====================
				/*
					使用TextureLoader加载纹理图集
					纹理图集包含了所有方块面的纹理
				*/
				const texture = new THREE.TextureLoader().load('textures/minecraft/atlas.png');
				// 设置纹理颜色空间为sRGB，获得更自然的颜色显示
				texture.colorSpace = THREE.SRGBColorSpace;
				// 设置放大过滤器为NearestFilter（最近邻过滤）
				// 保持像素风格，防止纹理模糊（重要！这是保持Minecraft风格的关键）
				texture.magFilter = THREE.NearestFilter;

				// ==================== 创建网格对象 ====================
				/*
					网格（Mesh）是几何体（Geometry）和材质（Material）的组合
					几何体定义了形状，材质定义了外观
				*/
				const mesh = new THREE.Mesh(
					geometry,  // 合并后的几何体
					new THREE.MeshLambertMaterial({  // Lambert材质（漫反射材质）
						map: texture,        // 使用纹理图集
						side: THREE.DoubleSide  // 双面渲染：内外都能看到纹理
					})
				);
				// 将网格添加到场景中
				scene.add(mesh);

				// ==================== 设置光照 ====================
				/*
					光照对于3D场景至关重要：
					1. 环境光：提供均匀的基础照明，没有方向性
					2. 平行光：模拟太阳光，有方向性，产生明暗对比
				*/
				
				// 环境光：为所有表面提供基础亮度
				const ambientLight = new THREE.AmbientLight(0xeeeeee, 3);
				// 参数1：颜色（浅灰色）
				// 参数2：强度（3是比较强的环境光）
				scene.add(ambientLight);

				// 平行光：模拟太阳光
				const directionalLight = new THREE.DirectionalLight(0xffffff, 12);
				// 设置光源方向（从(1,1,0.5)方向照射）
				directionalLight.position.set(1, 1, 0.5).normalize();
				// .normalize() 将向量转换为单位向量（长度为1）
				scene.add(directionalLight);

				// ==================== 创建渲染器 ====================
				/*
					WebGLRenderer是Three.js的核心渲染器
					它将3D场景渲染到HTML canvas元素上
				*/
				renderer = new THREE.WebGLRenderer({ 
					antialias: true  // 开启抗锯齿，使边缘更平滑
				});
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina显示屏）上获得更清晰的图像
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// setAnimationLoop是requestAnimationFrame的Three.js封装
				// 以显示器的刷新率（通常60Hz）持续调用animate函数
				renderer.setAnimationLoop(animate);
				
				// 将渲染器的DOM元素（canvas）添加到容器中
				container.appendChild(renderer.domElement);

				// ==================== 设置控制器 ====================
				/*
					FirstPersonControls提供第一人称视角控制
					类似FPS游戏的操作方式
				*/
				controls = new FirstPersonControls(camera, renderer.domElement);
				
				// 配置控制器参数
				controls.movementSpeed = 1000;    // 移动速度（单位/秒）
				controls.lookSpeed = 0.125;       // 视角旋转速度（鼠标灵敏度）
				controls.lookVertical = true;     // 允许垂直视角移动（抬头/低头）

				// ==================== 设置性能监控器 ====================
				/*
					Stats.js是一个轻量级性能监控工具
					显示FPS（帧率）、MS（每帧毫秒数）、MB（内存使用）等信息
				*/
				stats = new Stats();
				// 将性能监控器的DOM元素添加到容器中
				container.appendChild(stats.dom);

				// ==================== 设置窗口大小变化监听 ====================
				/*
					当浏览器窗口大小变化时，需要更新：
					1. 相机宽高比（aspect ratio）
					2. 渲染器尺寸
					3. 控制器的内部状态
				*/
				window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当用户调整浏览器窗口大小时调用
			 */
			function onWindowResize() {
				// 更新相机的宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 必须调用此方法使宽高比更改生效
				camera.updateProjectionMatrix();

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

				// 通知控制器处理尺寸变化
				// 控制器可能需要更新内部参数（如鼠标坐标转换）
				controls.handleResize();
			}

			/**
			 * 生成地形高度图（使用柏林噪声）
			 * 使用多层（分形）噪声叠加，创建自然的地形
			 * 
			 * @param {number} width - 地形宽度（X方向）
			 * @param {number} height - 地形高度（Z方向）
			 * @returns {Array} - 一维数组，存储每个位置的高度值
			 * 
			 * 分形噪声原理：
			 * 1. 使用不同频率的噪声叠加
			 * 2. 低频噪声决定地形的大致形状（山脉、山谷）
			 * 3. 高频噪声添加细节（小丘、凹陷）
			 * 4. 高频噪声的幅度逐渐减小，避免细节过于突兀
			 */
			function generateHeight(width, height) {
				// 创建空数组存储高度数据
				const data = [];
				
				// 创建柏林噪声生成器实例
				const perlin = new ImprovedNoise();
				
				// 计算总数据点数
				const size = width * height;
				
				// 随机Z偏移值，使每次生成的地形不同
				const z = Math.random() * 100;

				// 初始频率（质量）值，决定噪声的粗糙程度
				let quality = 2;

				/*
					生成4层噪声叠加（分形噪声）：
					第一层：低频噪声（粗糙轮廓）
					第二层：中频噪声（中等细节）
					第三层：高频噪声（精细细节）
					第四层：超高频噪声（微小细节）
				*/
				for (let j = 0; j < 4; j++) {
					// 第一层：初始化数组（后面几层在已有数据上累加）
					if (j === 0) {
						for (let i = 0; i < size; i++) {
							data[i] = 0;  // 初始高度为0
						}
					}

					// 为每个点添加当前频率的噪声值
					for (let i = 0; i < size; i++) {
						// 计算当前点的2D坐标
						const x = i % width;        // X坐标：取模运算
						const y = Math.floor(i / width);  // Y坐标：除法取整
						
						/*
							柏林噪声调用说明：
								perlin.noise(x, y, z) 返回-1.0到1.0之间的值
								参数除以quality：控制频率（频率=1/quality）
								乘以quality：控制振幅（振幅=quality）
								
							随着quality增加，频率增加（更快的波动），振幅也增加
							但实际中，通常高频噪声的振幅应该减小，这里为了简化
						*/
						data[i] += perlin.noise(x / quality, y / quality, z) * quality;
					}

					// 每层增加频率（quality乘4）
					// 这意味着每层噪声的频率是前一层的4倍
					// 频率：2 → 8 → 32 → 128
					quality *= 4;
				}

				// 返回生成的高度数据
				return data;
			}

			/**
			 * 获取指定坐标的高度值
			 * 从高度图数据中读取并转换
			 * 
			 * @param {number} x - X坐标（0到worldWidth-1）
			 * @param {number} z - Z坐标（0到worldDepth-1）
			 * @returns {number} - 高度值（向下取整的整数）
			 * 
			 * 注意：位运算 |0 是JavaScript中快速向下取整的方法
			 * 相当于 Math.floor()，但性能更好
			 */
			function getY(x, z) {
				// 计算数组索引：x + z * worldWidth
				const index = x + z * worldWidth;
				
				// 从高度图获取原始值，乘以0.15减小高度范围，然后取整
				// 乘以0.15：将噪声值（-1到1）映射到更合理的高度范围
				// |0：快速向下取整，创建方块化效果
				return (data[index] * 0.15) | 0;
			}

			/**
			 * 动画循环函数
			 * 由renderer.setAnimationLoop()持续调用
			 * 以显示器刷新率（通常60FPS）运行
			 */
			function animate() {
				// 调用渲染函数，绘制当前帧
				render();
				
				// 更新性能监控器显示
				stats.update();
				
				/*
					动画循环流程：
					1. 浏览器调用animate()
					2. animate()调用render()
					3. render()更新控制器并渲染场景
					4. 浏览器在下一帧再次调用animate()
					5. 循环持续进行
				*/
			}

			/**
			 * 渲染函数
			 * 负责更新场景状态并执行渲染
			 */
			function render() {
				/*
					更新第一人称控制器：
					controls.update() 需要传入时间差（delta time）
					clock.getDelta() 返回上一帧到当前帧的时间（秒）
					使用delta time确保移动速度与帧率无关
				*/
				controls.update(clock.getDelta());
				
				/*
					执行渲染：
					renderer.render() 是Three.js的核心渲染方法
					参数1：要渲染的场景
					参数2：使用的相机
					这个方法会执行完整的渲染管线：
					1. 更新场景图
					2. 执行视锥体剔除
					3. 排序透明对象
					4. 向WebGL发送绘制命令
				*/
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>