<!-- 代码功能概述
这是一个基于Three.js的WebGL三维地形生成与交互演示应用，实现了完整的3D地形生成、渲染和交互系统。

主要功能模块
动态地形生成

使用柏林噪声算法生成自然的山脉、丘陵地形

支持实时生成不同形态的地形（每次刷新都不同）

智能纹理创建

根据高度数据自动生成带有光照效果的彩色纹理

模拟太阳光照和海拔着色效果

实时交互系统

鼠标/触摸控制：旋转视角、缩放、平移

射线投射：实时检测鼠标指向的地形位置

视觉反馈：用圆锥体标记交互点并显示法线方向

性能监控与优化

实时显示帧率(FPS)等性能指标

支持高清显示屏(Retina)

响应式布局适配不同屏幕尺寸

核心技术点详解
1. 柏林噪声地形生成
javascript
// 关键代码
const perlin = new ImprovedNoise();
for (let octave = 0; octave < 4; octave++) {
    // 多层噪声叠加
    data[i] += Math.abs(perlin.noise(x/quality, y/quality, z) * quality * 1.75);
    quality *= 5; // 每层频率增加5倍
}
多层叠加(Octaves)：4层不同频率的噪声叠加，产生自然的分形效果

振幅递减：高频层振幅减小(quality*1.75)，符合自然界地形特征

绝对化处理：确保地形高度始终为正，避免出现"洞穴"

2. 法线贴图与光照计算
javascript
// 计算法线向量
vector3.x = data[j-2] - data[j+2];     // X方向导数
vector3.z = data[j-width*2] - data[j+width*2]; // Z方向导数
vector3.normalize();

// 计算光照强度
shade = vector3.dot(sun);  // 法线与光源的点积
导数法线：通过相邻像素高度差计算表面朝向

点积光照：模拟朗伯反射模型，计算明暗效果

高度着色：高海拔区域更亮，低海拔区域更暗

3. 射线投射交互系统
javascript
// 核心交互流程
pointer.x = (clientX / width) * 2 - 1;     // 屏幕坐标转NDC
raycaster.setFromCamera(pointer, camera);  // 从摄像机发射射线
const intersects = raycaster.intersectObject(mesh); // 检测碰撞
坐标转换：将2D屏幕坐标转换为3D标准化设备坐标

碰撞检测：计算射线与地形网格的精确交点

法线提取：获取交点处的表面法线方向

4. 纹理生成与优化技术
javascript
// 纹理生成优化
texture.generateMipmaps = true;  // 生成多级渐远纹理
texture.minFilter = THREE.LinearMipmapLinearFilter; // 三线性过滤
canvasScaled.width = width * 4;  // 4倍超采样抗锯齿
Mipmap系统：提高纹理在远距离的渲染性能和视觉质量

超采样抗锯齿：4倍放大+双线性插值，消除纹理锯齿

随机噪点：添加细微噪点，增加纹理真实感

5. 性能优化策略
javascript
// 性能关键优化
renderer.setPixelRatio(window.devicePixelRatio); // 适配高清屏
geometry.computeVertexNormals(); // 预计算法线
controls.handleResize(); // 控制器响应式处理
设备像素比适配：自动适配Retina等高DPI显示器

预计算法线：避免每帧重新计算几何法线

高效事件处理：被动事件和防抖优化

技术架构特点
前端技术栈
核心库：Three.js (r128+ ES6模块化版本)

辅助库：Stats.js (性能监控)，OrbitControls (摄像机控制)

现代特性：ES6模块化、Import Maps、Canvas 2D API

渲染管线
text
1. 数据生成 → 2. 几何体创建 → 3. 纹理生成 → 
4. 材质应用 → 5. 场景构建 → 6. 实时渲染
交互流程
text
鼠标移动 → 坐标转换 → 射线发射 → 碰撞检测 → 
交点计算 → 法线提取 → 视觉反馈
应用场景与扩展性
适用场景
游戏开发：动态地形生成系统

GIS应用：三维地理信息可视化

教育演示：计算机图形学教学案例

创意艺术：生成式艺术创作

扩展方向
动态地形编辑：实时修改高度数据

多细节层次(LOD)：根据距离动态调整地形精度

物理系统集成：添加碰撞检测和物理模拟

天气效果：动态光照、雾效、水面反射

性能指标
顶点数量：65,536个 (256×256网格)

三角形数量：130,050个

纹理尺寸：1024×1024像素 (4倍放大后)

目标帧率：60 FPS (在主流硬件上) -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js WebGL 三维地形交互演示 -->
		<title>Three.js WebGL - 三维地形交互演示 (射线投射)</title>
		<!-- 字符编码设置为UTF-8，支持中文和特殊字符 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			width=device-width - 宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放（为了更好的3D交互体验）
			minimum-scale=1.0 - 最小缩放比例为1.0倍
			maximum-scale=1.0 - 最大缩放比例为1.0倍（固定缩放）
		-->
		<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">
		<!-- 内联CSS样式：定义页面基础样式 -->
		<style>
			/* 主体样式：浅蓝色背景配深褐色文字 */
			body {
				background-color: #bfd1e5; /* 浅蓝色背景 */
				color: #61443e; /* 深褐色文字颜色 */
				margin: 0; /* 移除默认边距 */
				padding: 0; /* 移除默认内边距 */
				overflow: hidden; /* 隐藏滚动条，全屏显示3D场景 */
			}
			/* 链接样式：棕色链接 */
			a {
				color: #a06851; /* 棕色链接颜色 */
				text-decoration: none; /* 去除下划线 */
			}
			/* 鼠标悬停在链接上时的效果 */
			a:hover {
				text-decoration: underline; /* 添加下划线 */
			}
		</style>
	</head>
	<body>
		<!-- 
			主容器：Three.js渲染器将在此div内部创建canvas元素
			所有3D内容都会在这个容器内渲染显示
		-->
		<div id="container"></div>
		
		<!-- 
			信息显示栏：显示项目信息和版权链接
			替换为中文内容，包含Three.js官网链接
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			- WebGL三维地形射线交互演示
			<br>
			<span style="font-size: 12px; color: #888;">
				使用鼠标拖拽旋转视角，滚轮缩放，移动鼠标进行地形探测
			</span>
		</div>

		<!-- 
			导入映射表 (Import Maps)：
			现代浏览器支持的模块导入映射功能
			定义模块路径的别名，简化import语句
			作用：告诉浏览器"three"模块在哪里
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：使用type="module"支持ES6模块化
			这是整个3D应用的核心逻辑代码
		-->
		<script type="module">
			// ========== 模块导入区域 ==========
			// 导入Three.js核心库的所有功能
			// THREE是一个全局命名空间，包含所有Three.js的核心类
			import * as THREE from 'three';
			
			// 导入性能监控器（Stats.js）
			// 用于显示帧率(FPS)、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入轨道控制器（OrbitControls）
			// 允许用户用鼠标拖拽旋转摄像机，用滚轮缩放
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入改进的柏林噪声生成器
			// 用于生成自然、连续的地形高度数据（模拟山脉、丘陵）
			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';

			// ========== 全局变量声明区域 ==========
			// DOM元素引用
			let container;  // 主容器DOM元素
			let stats;      // 性能监控器实例
			
			// Three.js核心对象
			let camera;     // 摄像机：定义观察3D场景的视角
			let controls;   // 轨道控制器：处理用户交互
			let scene;      // 场景：包含所有3D对象的容器
			let renderer;   // 渲染器：负责将3D场景渲染到2D画布
			
			// 地形相关对象
			let mesh;       // 地形网格：包含几何体和材质的3D对象
			let texture;    // 地形纹理：应用在地形表面的图像
			
			// 地形尺寸常量
			const worldWidth = 256;      // 地形网格宽度方向的分段数（顶点数-1）
			const worldDepth = 256;      // 地形网格深度方向的分段数
			const worldHalfWidth = worldWidth / 2;   // 宽度的一半，用于定位中心
			const worldHalfDepth = worldDepth / 2;   // 深度的一半，用于定位中心
			
			// 交互相关对象
			let helper;                   // 辅助对象：显示射线碰撞点的3D标记
			const raycaster = new THREE.Raycaster();  // 射线投射器：用于检测鼠标与3D对象的碰撞
			const pointer = new THREE.Vector2();       // 2D指针坐标：存储标准化设备坐标

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

			// ========== 初始化函数定义 ==========
			/**
			 * 初始化函数：设置整个Three.js应用
			 * 1. 创建渲染器
			 * 2. 创建场景和摄像机
			 * 3. 创建地形几何体
			 * 4. 生成地形高度数据
			 * 5. 创建地形纹理
			 * 6. 设置事件监听器
			 * 7. 启动动画循环
			 */
			function init() {
				// ----- 第1步：获取和设置容器 -----
				container = document.getElementById('container');
				container.innerHTML = '';  // 清空容器，确保干净的初始状态

				// ----- 第2步：创建WebGL渲染器 -----
				// 参数说明：{ antialias: true } 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				// 设置设备像素比，支持高清显示屏（Retina等）
				// devicePixelRatio表示物理像素与CSS像素的比值
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数（替代传统的requestAnimationFrame）
				// animate函数将在每一帧被自动调用
				renderer.setAnimationLoop(animate);
				
				// 将渲染器的canvas元素添加到容器中
				// renderer.domElement就是<canvas>元素
				container.appendChild(renderer.domElement);

				// ----- 第3步：创建场景 -----
				// 场景是所有3D对象的容器，相当于一个虚拟的3D世界
				scene = new THREE.Scene();
				
				// 设置场景背景颜色（与body背景色一致）
				// 使用十六进制颜色值，这里是一个浅蓝色
				scene.background = new THREE.Color(0xbfd1e5);

				// ----- 第4步：创建摄像机 -----
				// 透视摄像机参数说明：
				// 1. 视野角度(FOV)：60度，角度越大看到的范围越广
				// 2. 宽高比：窗口宽度除以高度，保持比例正确
				// 3. 近裁剪面：10，距离摄像机10个单位以内的物体不显示
				// 4. 远裁剪面：20000，距离摄像机20000个单位以外的物体不显示
				camera = new THREE.PerspectiveCamera(
					60, 
					window.innerWidth / window.innerHeight, 
					10, 
					20000
				);

				// ----- 第5步：创建轨道控制器 -----
				// 将摄像机与渲染器的canvas元素绑定
				// 用户可以通过鼠标拖拽和滚轮控制摄像机
				controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置摄像机的最小距离：不能缩放到距离目标点小于1000单位
				controls.minDistance = 1000;
				
				// 设置摄像机的最大距离：不能缩放到距离目标点大于10000单位
				controls.maxDistance = 10000;
				
				// 设置最大极角：限制垂直旋转角度
				// Math.PI / 2 = 90度，防止摄像机旋转到地面下方
				controls.maxPolarAngle = Math.PI / 2;

				// ----- 第6步：生成地形高度数据 -----
				// 调用generateHeight函数生成256x256的高度图数据
				// 返回的是一个Uint8Array，每个元素代表一个顶点的高度值（0-255）
				const data = generateHeight(worldWidth, worldDepth);

				// ----- 第7步：设置摄像机初始位置 -----
				// 计算地形中心点的高度索引：中心点的数组位置
				const centerHeightIndex = worldHalfWidth + worldHalfDepth * worldWidth;
				
				// 将控制器目标点（摄像机看向的点）设置在地形中心上方500单位
				// 这样摄像机默认会看向地形中心区域
				controls.target.y = data[centerHeightIndex] + 500;
				
				// 设置摄像机初始位置：在目标点上方2000单位，右侧2000单位
				camera.position.y = controls.target.y + 2000;
				camera.position.x = 2000;
				
				// 更新控制器内部状态，应用上述位置设置
				controls.update();

				// ----- 第8步：创建地形几何体 -----
				// 平面几何体参数说明：
				// 1. 宽度：7500单位
				// 2. 高度（深度）：7500单位  
				// 3. 宽度分段数：worldWidth - 1 = 255
				// 4. 深度分段数：worldDepth - 1 = 255
				// 分段数越多，几何体越精细，但性能开销越大
				const geometry = new THREE.PlaneGeometry(
					7500, 
					7500, 
					worldWidth - 1, 
					worldDepth - 1
				);
				
				// 旋转几何体：默认平面是垂直于Y轴的，需要将其平放
				// -Math.PI / 2 = -90度，绕X轴旋转使平面水平
				geometry.rotateX(-Math.PI / 2);

				// ----- 第9步：应用高度数据到几何体 -----
				// 获取几何体的顶点位置数组
				// 这是一个一维数组，每3个元素代表一个顶点的(x, y, z)坐标
				const vertices = geometry.attributes.position.array;
				
				// 遍历所有顶点，修改Y坐标（高度）
				// i：高度数据索引，j：顶点数组索引
				for (let i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {
					// vertices[j] = x坐标，vertices[j+1] = y坐标，vertices[j+2] = z坐标
					// 将高度数据乘以10倍放大后赋给y坐标
					vertices[j + 1] = data[i] * 10;
				}
				
				// 重要：更新几何体的法线向量
				// 法线向量用于光照计算，修改顶点后必须重新计算
				geometry.computeVertexNormals();

				// ----- 第10步：生成和创建地形纹理 -----
				// 调用generateTexture函数生成基于高度数据的彩色纹理
				texture = new THREE.CanvasTexture(generateTexture(data, worldWidth, worldDepth));
				
				// 设置纹理包裹方式：超出纹理坐标范围时使用边缘像素延伸
				// 防止纹理边缘出现黑色缝隙
				texture.wrapS = THREE.ClampToEdgeWrapping;  // S方向（U，水平）
				texture.wrapT = THREE.ClampToEdgeWrapping;  // T方向（V，垂直）
				
				// 设置颜色空间为sRGB，使颜色显示更符合人眼感知
				texture.colorSpace = THREE.SRGBColorSpace;
				
				// 生成纹理的Mipmap（多级渐远纹理）
				// 提高纹理在远距离显示时的质量和性能
				texture.generateMipmaps = true;
				
				// 设置纹理过滤方式：线性过滤，使纹理在缩放时更平滑
				texture.minFilter = THREE.LinearMipmapLinearFilter;
				texture.magFilter = THREE.LinearFilter;

				// ----- 第11步：创建地形网格并添加到场景 -----
				// 创建网格：几何体 + 材质 = 可渲染的3D对象
				// 使用MeshBasicMaterial基础材质，只显示纹理，不受光照影响
				mesh = new THREE.Mesh(
					geometry, 
					new THREE.MeshBasicMaterial({ 
						map: texture,  // 设置纹理贴图
						side: THREE.DoubleSide  // 双面渲染，两面都可见
					})
				);
				
				// 将地形网格添加到场景中
				scene.add(mesh);

				// ----- 第12步：创建射线交互辅助对象 -----
				// 创建一个圆锥体作为鼠标指向位置的视觉标记
				// 参数：底面半径20，高度100，侧面分段数3（三角形锥）
				const geometryHelper = new THREE.ConeGeometry(20, 100, 3);
				
				// 平移几何体：将圆锥体向上移动50，使其底部位于原点
				geometryHelper.translate(0, 50, 0);
				
				// 旋转几何体：使其指向Z轴正方向（默认圆锥指向Y轴正方向）
				geometryHelper.rotateX(Math.PI / 2);
				
				// 创建辅助网格：使用法线材质，颜色会根据表面方向变化
				helper = new THREE.Mesh(
					geometryHelper, 
					new THREE.MeshNormalMaterial()
				);
				
				// 将辅助对象添加到场景
				scene.add(helper);
				
				// 初始隐藏辅助对象，直到鼠标移动到地形上
				helper.visible = false;

				// ----- 第13步：添加事件监听器 -----
				// 监听鼠标移动事件，用于射线投射检测
				container.addEventListener('pointermove', onPointerMove);
				
				// 监听触摸设备事件，支持移动端触摸交互
				container.addEventListener('touchmove', onPointerMove, { passive: false });

				// ----- 第14步：创建性能监控器 -----
				// 实例化Stats.js性能监控器
				stats = new Stats();
				
				// 设置性能监控器的显示模式
				// 0: FPS（帧率）, 1: MS（每帧毫秒数）, 2: MB（内存使用）
				stats.showPanel(0);
				
				// 将性能监控器的DOM元素添加到容器
				container.appendChild(stats.dom);
				
				// 设置性能监控器在左上角显示
				stats.dom.style.position = 'absolute';
				stats.dom.style.left = '10px';
				stats.dom.style.top = '10px';

				// ----- 第15步：添加窗口大小变化监听器 -----
				// 当浏览器窗口大小改变时，调整摄像机、渲染器和控制器
				window.addEventListener('resize', onWindowResize);
				
				// 初始调整一次，确保正确的尺寸
				onWindowResize();
			}

			// ========== 窗口大小变化处理函数 ==========
			/**
			 * 响应浏览器窗口大小变化
			 * 1. 更新摄像机宽高比
			 * 2. 更新摄像机投影矩阵
			 * 3. 更新渲染器尺寸
			 * 4. 更新控制器（如果需要）
			 */
			function onWindowResize() {
				// 更新摄像机宽高比为新的窗口比例
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新摄像机投影矩阵，必须调用此方法使设置生效
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸为新的窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 可选：更新控制器，某些控制器可能需要响应尺寸变化
				controls.handleResize();
			}

			// ========== 地形高度生成函数 ==========
			/**
			 * 使用多层柏林噪声生成地形高度数据
			 * 原理：叠加多个不同频率的噪声层（八度音阶）创建丰富细节
			 * @param {number} width - 地形网格宽度（顶点数）
			 * @param {number} height - 地形网格高度（顶点数）
			 * @returns {Uint8Array} - 高度数据数组，值范围0-255
			 */
			function generateHeight(width, height) {
				// 计算总数据点数
				const size = width * height;
				
				// 创建无符号8位整数数组存储高度数据
				// 每个元素占用1字节，值范围0-255
				const data = new Uint8Array(size);
				
				// 创建柏林噪声生成器实例
				const perlin = new ImprovedNoise();
				
				// 随机Z偏移值，使每次生成的地形都不同
				// 乘以100确保足够大的变化范围
				const z = Math.random() * 100;

				// 初始质量（频率）参数
				let quality = 1;
				
				// 叠加4层噪声（4个八度音阶）
				// 第一层：低频，定义地形大致形状
				// 第二层：中频，添加中等细节
				// 第三层：高频，添加小细节
				// 第四层：超高频，添加细微纹理
				for (let octave = 0; octave < 4; octave++) {
					// 遍历所有数据点
					for (let i = 0; i < size; i++) {
						// 计算当前点的(x, y)坐标
						// i % width: x坐标（列索引）
						// ~~(i / width): y坐标（行索引），~~是快速取整运算符
						const x = i % width;
						const y = ~~(i / width);
						
						// 计算当前层的噪声值
						// 参数说明：
						// x / quality: x坐标除以质量参数，控制频率
						// y / quality: y坐标除以质量参数
						// z: 固定的Z偏移，作为"时间"维度
						let noiseValue = perlin.noise(x / quality, y / quality, z);
						
						// 取噪声值的绝对值，确保高度始终为正
						// 乘以quality * 1.75: 振幅随频率增加而减小
						// 这是分形噪声的典型特性：高频层贡献更小
						noiseValue = Math.abs(noiseValue * quality * 1.75);
						
						// 将当前层的噪声值叠加到总高度
						data[i] += noiseValue;
					}
					
					// 每增加一层，频率乘以5（质量参数增加）
					// 这意味着每一层的频率是前一层的5倍
					// 同时振幅会相应减小（通过上面的*quality控制）
					quality *= 5;
				}
				
				// 返回生成的高度数据
				return data;
			}

			// ========== 地形纹理生成函数 ==========
			/**
			 * 根据高度数据生成带有光照效果的彩色纹理
			 * 使用法线贴图和模拟光照创建3D视觉效果
			 * @param {Uint8Array} data - 高度数据数组
			 * @param {number} width - 纹理宽度
			 * @param {number} height - 纹理高度
			 * @returns {HTMLCanvasElement} - 包含生成纹理的Canvas元素
			 */
			function generateTexture(data, width, height) {
				// 局部变量声明
				let context;      // Canvas绘图上下文
				let image;        // ImageData对象
				let imageData;    // 图像数据数组
				let shade;        // 光照强度值（0-1）
				
				// 用于计算法线向量的临时变量
				const vector3 = new THREE.Vector3(0, 0, 0);
				
				// 模拟光源方向（太阳位置）
				// 设置为(1, 1, 1)表示光源在右前上方
				const sun = new THREE.Vector3(1, 1, 1);
				
				// 归一化光源向量，使其长度为1
				// 这是计算点积（光照强度）的前提
				sun.normalize();

				// ----- 第1步：创建基础Canvas -----
				// 创建一个与高度数据相同尺寸的Canvas
				const canvas = document.createElement('canvas');
				canvas.width = width;
				canvas.height = height;
				
				// 获取2D绘图上下文
				context = canvas.getContext('2d');
				
				// 填充黑色背景
				context.fillStyle = '#000000';
				context.fillRect(0, 0, width, height);
				
				// 获取Canvas的图像数据
				// ImageData包含一个一维数组，每4个元素代表一个像素的RGBA值
				image = context.getImageData(0, 0, width, height);
				imageData = image.data;

				// ----- 第2步：为每个像素计算颜色 -----
				// 遍历所有像素（图像数据每4个元素一个像素）
				// i: 图像数据索引，j: 高度数据索引
				for (let i = 0, j = 0, l = imageData.length; i < l; i += 4, j++) {
					// 计算当前像素的法线向量（通过高度差）
					// 这是法线贴图的核心：通过相邻像素的高度差模拟表面朝向
					
					// X方向导数：左边像素高度 - 右边像素高度
					// 注意：这里使用了步长为2的采样，跳过直接相邻像素，获得更平滑的法线
					vector3.x = data[j - 2] - data[j + 2];
					
					// Y分量：固定为2，控制法线的垂直分量强度
					// 这个值越大，地形看起来越平坦；越小，地形看起来越陡峭
					vector3.y = 2;
					
					// Z方向导数：上边像素高度 - 下边像素高度
					// 注意：width * 2 表示跳过一行
					vector3.z = data[j - width * 2] - data[j + width * 2];
					
					// 归一化法线向量（使其长度为1）
					vector3.normalize();
					
					// 计算光照强度：法线向量与光源向量的点积
					// 值范围：-1到1，但归一化后通常为0到1
					// 1表示表面正对光源，0表示表面与光线平行，负值表示背对光源
					shade = vector3.dot(sun);
					
					// 确保光照强度非负（背光面也有一点基础亮度）
					shade = Math.max(shade, 0);
					
					// 计算当前像素的基础高度影响因子
					// 0.5 + data[j] * 0.007：高度越高，颜色越亮
					// 0.007是缩放因子，控制高度对颜色的影响程度
					const heightFactor = 0.5 + data[j] * 0.007;
					
					// 设置红色通道(R)
					// 96：基础红色值（深红色）
					// shade * 128：光照影响的红色增量
					// 乘以heightFactor：高度影响
					imageData[i] = (96 + shade * 128) * heightFactor;
					
					// 设置绿色通道(G)
					// 32：基础绿色值（较暗的绿色）
					// shade * 96：光照影响的绿色增量
					imageData[i + 1] = (32 + shade * 96) * heightFactor;
					
					// 设置蓝色通道(B)
					// 只有光照影响，没有基础蓝色值（使地形呈棕黄色调）
					// shade * 96：光照影响的蓝色增量
					imageData[i + 2] = (shade * 96) * heightFactor;
					
					// 设置Alpha通道(A) - 完全不透明
					imageData[i + 3] = 255;
				}
				
				// 将计算好的图像数据写回Canvas
				context.putImageData(image, 0, 0);

				// ----- 第3步：创建放大Canvas（抗锯齿） -----
				// 为了获得更好的视觉效果，将纹理放大4倍
				const canvasScaled = document.createElement('canvas');
				canvasScaled.width = width * 4;   // 宽度放大4倍
				canvasScaled.height = height * 4; // 高度放大4倍
				
				// 获取放大Canvas的上下文
				context = canvasScaled.getContext('2d');
				
				// 设置缩放变换：放大4倍
				context.scale(4, 4);
				
				// 将原始Canvas绘制到放大Canvas上
				// 浏览器会自动进行双线性插值，使放大后的图像更平滑
				context.drawImage(canvas, 0, 0);
				
				// 获取放大后的图像数据
				image = context.getImageData(0, 0, canvasScaled.width, canvasScaled.height);
				imageData = image.data;

				// ----- 第4步：添加随机噪点（增加真实感） -----
				// 遍历放大后的所有像素
				for (let i = 0, l = imageData.length; i < l; i += 4) {
					// 生成0-4的随机整数作为噪点强度
					// ~~是快速取整运算符，等同于Math.floor
					const noise = ~~(Math.random() * 5);
					
					// 为RGB三个通道添加相同的噪点值
					// 这样添加的是灰度噪点，不会改变颜色色调
					imageData[i] += noise;      // 红色通道
					imageData[i + 1] += noise;  // 绿色通道
					imageData[i + 2] += noise;  // 蓝色通道
					
					// Alpha通道保持不变
				}
				
				// 将添加噪点后的图像数据写回Canvas
				context.putImageData(image, 0, 0);

				// 返回最终的放大Canvas
				return canvasScaled;
			}

			// ========== 动画循环函数 ==========
			/**
			 * 动画循环函数：每一帧自动调用
			 * 这是Three.js应用的核心循环，驱动场景更新和渲染
			 */
			function animate() {
				// 渲染场景
				render();
				
				// 更新性能监控器
				// 这会在性能面板上更新FPS、渲染时间等数据
				stats.update();
				
				// 更新轨道控制器
				// 必须在每一帧调用，以处理用户输入和更新摄像机
				controls.update();
			}

			// ========== 渲染函数 ==========
			/**
			 * 渲染函数：将3D场景绘制到2D画布
			 * 1. 使用当前摄像机视角
			 * 2. 渲染整个场景
			 */
			function render() {
				// 调用渲染器的render方法
				// 参数1：要渲染的场景
				// 参数2：使用的摄像机
				renderer.render(scene, camera);
			}

			// ========== 鼠标/触摸移动事件处理函数 ==========
			/**
			 * 处理指针（鼠标/触摸）移动事件
			 * 1. 将屏幕坐标转换为标准化设备坐标
			 * 2. 从摄像机发射射线
			 * 3. 检测射线与地形的交点
			 * 4. 更新辅助对象的位置和方向
			 * @param {PointerEvent|TouchEvent} event - 指针事件对象
			 */
			function onPointerMove(event) {
				// 阻止默认行为，防止触摸时的页面滚动
				event.preventDefault();
				
				// 获取事件的位置信息
				// 对于触摸事件，使用第一个触摸点
				let clientX, clientY;
				if (event.type === 'touchmove') {
					clientX = event.touches[0].clientX;
					clientY = event.touches[0].clientY;
				} else {
					clientX = event.clientX;
					clientY = event.clientY;
				}
				
				// ----- 第1步：转换为标准化设备坐标 -----
				// 将屏幕坐标转换为Three.js使用的标准化设备坐标
				// 范围：X和Y轴都是-1到1
				// 左上角：(-1, 1)，右下角：(1, -1)
				
				// X坐标转换：从[0, 窗口宽度]映射到[-1, 1]
				pointer.x = (clientX / renderer.domElement.clientWidth) * 2 - 1;
				
				// Y坐标转换：从[0, 窗口高度]映射到[1, -1]
				// 注意：Y轴是反的，因为屏幕坐标原点在左上角，而3D坐标原点在中心
				pointer.y = -(clientY / renderer.domElement.clientHeight) * 2 + 1;
				
				// ----- 第2步：设置射线投射器 -----
				// 从摄像机位置向鼠标指向的3D空间点发射射线
				// 射线方向由摄像机投影矩阵和鼠标位置计算得出
				raycaster.setFromCamera(pointer, camera);
				
				// ----- 第3步：检测射线与地形的交点 -----
				// intersectObject方法检测射线与指定对象的交点
				// 返回一个数组，包含所有交点信息（按距离排序）
				const intersects = raycaster.intersectObject(mesh);
				
				// ----- 第4步：处理检测结果 -----
				if (intersects.length > 0) {
					// 获取第一个交点（距离摄像机最近的点）
					const intersect = intersects[0];
					
					// 显示辅助对象
					helper.visible = true;
					
					// 重置辅助对象的位置和旋转
					helper.position.set(0, 0, 0);
					helper.rotation.set(0, 0, 0);
					
					// 将辅助对象移动到交点位置
					// intersect.point是一个Vector3，表示交点的世界坐标
					helper.position.copy(intersect.point);
					
					// 让辅助对象朝向交点处的法线方向
					// intersect.face.normal是交点所在面的法线向量
					// 注意：这里添加交点位置，因为lookAt需要世界坐标
					helper.lookAt(
						intersect.point.x + intersect.face.normal.x,
						intersect.point.y + intersect.face.normal.y,
						intersect.point.z + intersect.face.normal.z
					);
					
					// 稍微将辅助对象向上移动一点，避免陷入地形中
					helper.position.y += 10;
				} else {
					// 如果没有交点，隐藏辅助对象
					helper.visible = false;
				}
			}
		</script>
	</body>
</html>