<!-- 代码功能概述
这是一个基于Three.js WebGPU的过程式地形生成器，能够实时生成具有自然地貌特征的3D地形，并允许用户通过拖拽交互和参数调整来探索和修改地形。

主要功能：
过程式地形生成

使用分形噪声算法实时生成山脉、山谷等地形特征

支持动态修改地形参数（复杂度、高度、扭曲等）

智能材质系统

根据高度、坡度和法线自动混合不同地表材质

沙滩（低海拔平坦区域）

草地（中等海拔区域）

岩石（陡峭山坡）

雪地（高海拔区域，带噪声变化的雪线）

物理水面效果

具有折射和透射特性的逼真水面

可调节折射率、粗糙度和颜色

交互式功能

鼠标拖拽平移整个地形

轨道相机控制（旋转、缩放、平移）

实时参数调节界面

高质量渲染

HDR环境光照和反射

动态阴影系统

色调映射和抗锯齿

主要技术点详解
1. WebGPU渲染引擎
javascript
import * as THREE from 'three/webgpu';
下一代图形API：比WebGL性能更高，功能更强大

显式GPU控制：更细粒度的GPU资源管理

计算着色器支持：适合复杂的地形生成算法

2. Three.js Shading Language (TSL)
javascript
import { mx_noise_float, color, cross, dot, float, Fn, uniform, varying } from 'three/tsl';
节点化着色器编程：可视化/声明式的着色器编写方式

类型安全：强类型的着色器编程

函数式编程：支持自定义函数和循环结构

3. 分形地形生成算法
javascript
// 核心地形高度函数
const terrainElevation = Fn(([position]) => {
    const warpedPosition = position.add(offset).toVar();
    // 扭曲效果
    warpedPosition.addAssign(mx_noise_float(...).mul(warpStrength));
    
    const elevation = float(0).toVar();
    // 多层噪声叠加（分形布朗运动）
    Loop({...}, ({ i }) => {
        const noiseInput = warpedPosition.mul(positionFrequency).mul(i.mul(2));
        const noise = mx_noise_float(noiseInput, 1, 0).div(i.add(1).mul(2));
        elevation.addAssign(noise);
    });
    
    // 增强对比度
    return elevation.abs().pow(2).mul(sign(elevation)).mul(strength);
});
分形布朗运动 (fBm)：通过叠加不同频率的噪声创建自然地形

振幅衰减：高频噪声贡献较小，低频噪声贡献较大

非线性变换：使用幂函数增强地形对比度

4. 基于物理的材质混合
javascript
// 基于高度的材质混合
const grassMix = step(-0.06, vPosition.y);
finalColor.assign(grassMix.mix(finalColor, colorGrass));

// 基于坡度的岩石混合
const rockMix = step(0.5, dot(vNormal, vec3(0, 1, 0)))
                .oneMinus().mul(step(-0.06, vPosition.y));

// 带噪声的雪线
const snowThreshold = mx_noise_float(vPosition.xz.mul(25), 1, 0)
                      .mul(0.1).add(0.45);
step函数：实现清晰的材质边界

法线检测：识别陡峭区域作为岩石

噪声雪线：使雪地边界更自然

5. 实时法线计算
javascript
// 通过相邻顶点计算法线
const neighbourA = positionLocal.xyz.add(vec3(normalLookUpShift, 0.0, 0.0));
const neighbourB = positionLocal.xyz.add(vec3(0.0, 0.0, normalLookUpShift.negate()));

neighbourA.y.addAssign(terrainElevation(neighbourA.xz));
neighbourB.y.addAssign(terrainElevation(neighbourB.xz));

const toA = neighbourA.sub(position).normalize();
const toB = neighbourB.sub(position).normalize();
vNormal.assign(cross(toA, toB)); // 叉积得到法线
实时计算：在着色器中动态计算法线，而非预计算

差分方法：通过相邻点的高度差计算表面斜率

6. 交互式拖拽系统
javascript
// 光线投射检测
drag.raycaster.setFromCamera(drag.screenCoords, camera);
const intersects = drag.raycaster.intersectObject(drag.object);

// 拖拽偏移应用
offset.value.x += delta.x;  // 更新地形偏移
offset.value.y += delta.z;
光线投射：检测鼠标与3D物体的交点

归一化坐标：将屏幕坐标转换为3D世界坐标

地形偏移：通过修改统一变量实现整体地形移动

7. HDR环境照明
javascript
hdrLoader.load('./textures/equirectangular/pedestrian_overpass_1k.hdr', (environmentMap) => {
    scene.background = environmentMap;
    scene.environment = environmentMap;
});
高动态范围：包含更广的亮度范围，提供更真实的光照

等距柱状投影：全景环境贴图格式

环境反射：物体表面反射周围环境

8. 高级水材质
javascript
new THREE.MeshPhysicalMaterial({
    transmission: 1,    // 完全透射（像玻璃/水）
    roughness: 0.5,     // 水面粗糙度
    ior: 1.333,        // 水的折射率
    color: '#4db2ff'    // 基础颜色
});
物理材质：基于物理的渲染模型

折射效果：模拟光线通过水面时的弯曲

透射效果：模拟光线穿过透明介质

9. 模块化架构
javascript
// 导入映射表
{
    "imports": {
        "three": "../build/three.webgpu.js",
        "three/tsl": "../build/three.tsl.js",
        "three/addons/": "./jsm/"
    }
}
ES6模块：现代JavaScript模块系统

路径别名：简化导入语句

依赖管理：清晰的模块依赖关系

10. 调试和优化
Inspector工具：可视化场景调试

性能优化：删除不必要的几何属性（UV、法线）

内存管理：合理设置几何体分段数

技术特点总结
优势：
实时性：所有地形生成和渲染都在GPU上实时完成

程序化：无需美术资源，代码生成所有内容

可调节：所有参数都可以实时修改并立即看到效果

高性能：利用WebGPU和现代GPU架构

交互性强：提供多种交互方式 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 文档标题 -->
		<title>Three.js WebGPU - 过程式地形生成器</title>
		<!-- 元数据设置 -->
		<meta charset="utf-8">  <!-- 设置文档字符编码为UTF-8，支持多语言字符 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			viewport 元标签：控制移动设备上的视口行为
			width=device-width: 视口宽度等于设备宽度
			user-scalable=no: 禁止用户缩放页面（为了保持3D场景的稳定显示）
			minimum-scale=1.0: 最小缩放比例为1倍
			maximum-scale=1.0: 最大缩放比例为1倍
		-->
		
		<!-- 外部CSS样式表链接 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 页面信息展示区域 -->
		<div id="info">
			<!-- Three.js 官方网站链接（通过CSS样式显示为logo） -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link" title="访问Three.js官网">
				<!-- 这个链接通常是Three.js的logo，通过CSS背景图片显示 -->
			</a>

			<!-- 标题包装器 -->
			<div class="title-wrapper">
				<!-- 主标题链接到Three.js官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题：描述当前应用 -->
				<span>过程式地形生成器</span>
			</div>

			<!-- 项目来源和版权信息 -->
			<small>
				<!-- 
					说明此项目基于Three.js Journey课程
					target="_blank": 在新标签页中打开链接
					rel="noopener": 安全属性，防止新页面访问原页面的window对象
				-->
				基于 <a href="https://threejs-journey.com/lessons/procedural-terrain-shader" target="_blank" rel="noopener">Three.js Journey</a> 课程。
			</small>
		</div>

		<!-- 
			导入映射表（Import Map）
			这是现代JavaScript模块系统的一部分，允许我们为模块指定别名
			作用：解决模块路径问题，让浏览器知道如何解析模块导入语句
		-->
		<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模块
			type="module": 告诉浏览器这是一个ES6模块，支持模块化导入导出
		-->
		<script type="module">

			// ============ 模块导入部分 ============
			
			// 导入Three.js WebGPU核心库的所有功能，命名为THREE
			// WebGPU是下一代图形API，相比WebGL性能更好，功能更强大
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js Shading Language (TSL) 的着色器函数和节点
			// 这些是用于编写节点化着色器的基础构建块
			import { 
				mx_noise_float,  // 噪声函数（来自MaterialX库），用于生成地形高度
				color,           // 颜色节点，用于创建和管理颜色值
				cross,           // 向量叉积函数，用于计算法线
				dot,             // 向量点积函数
				float,           // 浮点数节点
				transformNormalToView,  // 将法线从模型空间转换到视图空间的函数
				positionLocal,   // 模型空间中的顶点位置
				sign,            // 符号函数（返回1、0或-1）
				step,            // 阶跃函数（如果x<edge返回0，否则返回1）
				Fn,              // 函数定义器，用于创建自定义着色器函数
				uniform,         // 统一变量（在着色器中保持不变，可从JavaScript设置）
				varying,         // 可变变量（从顶点着色器传递到片元着色器）
				vec2,            // 二维向量
				vec3,            // 三维向量
				Loop             // 循环结构，用于在着色器中创建循环
			} from 'three/tsl';

			// 导入调试工具：Inspector
			// 这是一个可视化调试界面，可以实时查看和修改场景中的对象和材质
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器（OrbitControls）
			// 允许用户通过鼠标拖拽来旋转、缩放和平移相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入HDR（高动态范围）加载器
			// HDR贴图包含更广的亮度范围，能提供更真实的环境照明
			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';

			// ============ 全局变量声明 ============
			
			// camera: 场景相机，定义观察场景的视角
			// scene: 场景容器，包含所有要渲染的3D对象
			// renderer: 渲染器，负责将3D场景绘制到2D画布上
			// controls: 相机控制器，处理用户交互
			// drag: 地形拖拽交互系统对象
			let camera, scene, renderer, controls, drag;

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

			// ============ 初始化函数 ============
			function init() {

				// ------------ 1. 创建相机 ------------
				// 使用透视相机（PerspectiveCamera），模拟人眼观察世界的效果
				// 参数：视野角度(FOV), 宽高比(aspect), 近裁剪面(near), 远裁剪面(far)
				camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 100);
				// 设置相机初始位置：x=-10（左）, y=8（上）, z=-2.2（后）
				camera.position.set(-10, 8, -2.2);

				// ------------ 2. 创建场景 ------------
				scene = new THREE.Scene();
				// 设置默认背景颜色为深褐色（十六进制颜色0x201919）
				scene.background = new THREE.Color(0x201919);

				// ------------ 3. 加载HDR环境贴图 ------------
				// 创建HDR加载器实例
				const hdrLoader = new HDRLoader();
				// 异步加载HDR环境贴图文件
				hdrLoader.load('./textures/equirectangular/pedestrian_overpass_1k.hdr', (environmentMap) => {

					// 设置贴图映射方式为等距柱状投影（Equirectangular）
					// 这种映射方式将球面展开为矩形，常用于全景图和环境贴图
					environmentMap.mapping = THREE.EquirectangularReflectionMapping;

					// 将HDR贴图设置为场景背景
					scene.background = environmentMap;
					// 设置背景模糊度，值从0到1，0为清晰，1为完全模糊
					scene.backgroundBlurriness = 0.5;
					// 设置场景环境贴图，用于物体反射和环境照明
					scene.environment = environmentMap;
			
				});

				// ------------ 4. 创建光照 ------------
				// 创建平行光（DirectionalLight），模拟太阳光（光线平行）
				const directionalLight = new THREE.DirectionalLight('#ffffff', 2);
				// 设置光源位置
				directionalLight.position.set(6.25, 3, 4);
				// 启用阴影投射
				directionalLight.castShadow = true;
				// 设置阴影贴图分辨率（宽度×高度），越高阴影越清晰但性能消耗越大
				directionalLight.shadow.mapSize.set(1024, 1024);
				// 设置阴影相机参数（定义哪些物体会投射阴影）
				directionalLight.shadow.camera.near = 0.1;  // 近裁剪面
				directionalLight.shadow.camera.far = 30;    // 远裁剪面
				directionalLight.shadow.camera.top = 8;     // 上边界
				directionalLight.shadow.camera.right = 8;   // 右边界
				directionalLight.shadow.camera.bottom = -8; // 下边界
				directionalLight.shadow.camera.left = -8;   // 左边界
				// 阴影法线偏移：解决阴影痤疮问题（当阴影接收面和投射面重合时产生的伪影）
				directionalLight.shadow.normalBias = 0.05;
				// 阴影偏移：解决阴影粉刺问题（当阴影接收面和投射面非常接近时产生的伪影）
				directionalLight.shadow.bias = 0;
				// 将平行光添加到场景中
				scene.add(directionalLight);

				// ------------ 5. 创建地形材质 ------------
				// 使用MeshStandardNodeMaterial（基于物理的节点化标准材质）
				const material = new THREE.MeshStandardNodeMaterial({
					metalness: 0,     // 金属度：0表示非金属材质（如泥土、岩石）
					roughness: 0.5,   // 粗糙度：0.5表示中等粗糙度（介于完全光滑和完全粗糙之间）
					color: '#85d534'  // 基础颜色：草绿色
				});

				// ------------ 6. 定义TSL统一变量 ------------
				// 这些变量可以通过JavaScript动态修改，并自动同步到着色器中
				// 统一变量：在着色器执行期间保持不变，所有顶点和片元共享同一个值
				const noiseIterations = uniform(3);                 // 噪声迭代次数：控制地形细节复杂度
				const positionFrequency = uniform(0.175);           // 位置频率：控制地形特征的缩放比例
				const warpFrequency = uniform(6);                   // 扭曲频率：控制地形扭曲效果的频率
				const warpStrength = uniform(1);                    // 扭曲强度：控制地形扭曲的程度
				const strength = uniform(10);                       // 强度：控制地形高度变化的幅度
				const offset = uniform(vec2(0, 0));                 // 偏移：用于拖拽平移地形
				const normalLookUpShift = uniform(0.01);            // 法线查找偏移：用于计算法线时的微小偏移量
				const colorSand = uniform(color('#ffe894'));        // 沙滩颜色：浅黄色
				const colorGrass = uniform(color('#85d534'));       // 草地颜色：草绿色
				const colorSnow = uniform(color('#ffffff'));        // 雪地颜色：白色
				const colorRock = uniform(color('#bfbd8d'));        // 岩石颜色：浅灰色

				// ------------ 7. 定义TSL可变变量 ------------
				// 可变变量：在顶点着色器中计算，然后插值后传递到片元着色器
				// 每个顶点可以有不同的值，在传递给片元着色器时会进行插值
				const vNormal = varying(vec3());      // 顶点法线：用于光照计算
				const vPosition = varying(vec3());    // 顶点位置：用于基于高度的材质混合

				// ------------ 8. 定义地形高度函数 ------------
				// 这是一个自定义的TSL函数，计算任意位置(x,z)处的地形高度(y)
				// Fn函数包装器：用于创建可重用的着色器函数
				const terrainElevation = Fn(([position]) => {

					// 8.1 添加地形偏移并创建扭曲效果
					// toVar()：将表达式转换为变量，使其可以被修改
					const warpedPosition = position.add(offset).toVar();
					// 应用扭曲效果：基于噪声函数修改位置，使地形更自然
					warpedPosition.addAssign(
						mx_noise_float(
							warpedPosition.mul(positionFrequency).mul(warpFrequency), // 扭曲输入
							1,  // 八度数（octaves）：噪声的细节层级数
							0   // 偏移量
						).mul(warpStrength)  // 应用扭曲强度
					);
			
					// 8.2 初始化高度值为0
					const elevation = float(0).toVar();
					
					// 8.3 循环叠加多层噪声（分形布朗运动 - Fractal Brownian Motion, fBm）
					// 这是过程式地形生成的核心技术，通过叠加不同频率的噪声创建自然地形
					Loop({
						type: 'float',                // 循环变量类型为浮点数
						start: float(1),              // 起始值为1
						end: noiseIterations.toFloat(), // 结束值为噪声迭代次数
						condition: '<='               // 循环条件：i <= end
					}, ({ i }) => {  // i是循环变量

						// 计算噪声输入：增加频率并添加偏移避免重复模式
						const noiseInput = warpedPosition
							.mul(positionFrequency)  // 应用基础频率
							.mul(i.mul(2))           // 每层频率加倍（2,4,6,...）
							.add(i.mul(987));        // 添加随机偏移（987是任意选择的素数）

						// 计算噪声值并应用振幅衰减（persistence）
						// 噪声振幅随迭代次数递减：振幅 = 1/((i+1)*2)
						// 这使得高频噪声（细节）的贡献较小，低频噪声（宏观形状）的贡献较大
						const noise = mx_noise_float(noiseInput, 1, 0)  // 获取噪声值
							.div(i.add(1).mul(2));  // 振幅衰减公式
						
						// 累加高度值
						elevation.addAssign(noise);
			
					});

					// 8.4 增强地形对比度
					// sign()：获取高度的符号（正、负或零）
					const elevationSign = sign(elevation);
					// 应用非线性变换：取绝对值的平方，恢复符号，乘以强度
					// 这使平缓区域更平缓，陡峭区域更陡峭
					elevation.assign(
						elevation.abs()      // 取绝对值
							.pow(2)          // 平方运算（增强对比度）
							.mul(elevationSign)  // 恢复原始符号
							.mul(strength)   // 应用全局强度
					);

					// 返回最终高度值
					return elevation;
			
				});

				// ------------ 9. 设置材质的位置节点（顶点着色器） ------------
				// 位置节点控制网格中每个顶点的最终位置
				material.positionNode = Fn(() => {

					// 9.1 计算相邻位置（用于法线计算）
					// 通过在X和Z方向上添加微小偏移来获取相邻顶点位置
					const neighbourA = positionLocal.xyz
						.add(vec3(normalLookUpShift, 0.0, 0.0))  // X方向偏移
						.toVar();
					const neighbourB = positionLocal.xyz
						.add(vec3(0.0, 0.0, normalLookUpShift.negate()))  // Z方向负偏移
						.toVar();

					// 9.2 计算当前位置的高度
					// 获取模型空间中的原始顶点位置
					const position = positionLocal.xyz.toVar();
					// 调用地形高度函数计算当前(x,z)位置的高度
					const elevation = terrainElevation(positionLocal.xz);
					// 将高度值添加到Y坐标（抬升顶点）
					position.y.addAssign(elevation);
			
					// 9.3 计算相邻位置的高度
					// 为相邻位置应用相同的高度计算
					neighbourA.y.addAssign(terrainElevation(neighbourA.xz));
					neighbourB.y.addAssign(terrainElevation(neighbourB.xz));

					// 9.4 通过三角形法计算法线
					// 计算从当前位置到相邻位置的向量
					const toA = neighbourA.sub(position).normalize();  // 单位向量
					const toB = neighbourB.sub(position).normalize();  // 单位向量
					// 叉积运算得到法线向量（垂直于点A、点B和当前位置构成的平面）
					// 叉积方向由右手定则决定
					vNormal.assign(cross(toA, toB));

					// 9.5 存储位置到可变变量（传递到片元着色器）
					// 将应用了地形偏移的最终位置存储到vPosition变量
					// 这样片元着色器可以访问每个片段的世界位置
					vPosition.assign(position.add(vec3(offset.x, 0, offset.y)));

					// 返回最终顶点位置
					return position;
			
				})();  // 立即执行函数并返回结果

				// ------------ 10. 设置材质的法线节点 ------------
				// 法线节点定义材质表面对光线的反应方式
				// transformNormalToView：将法线从模型空间转换到视图空间
				// 这是光照计算所需的坐标系
				material.normalNode = transformNormalToView(vNormal);

				// ------------ 11. 设置材质的颜色节点（片元着色器） ------------
				// 颜色节点控制每个像素的最终颜色
				material.colorNode = Fn(() => {

					// 11.1 基础颜色：从沙滩颜色开始
					const finalColor = colorSand.toVar();

					// 11.2 草地区域混合（基于高度阈值）
					// step(edge, x)：如果x >= edge返回1，否则返回0
					// 这里-0.06是草地开始的高度阈值
					const grassMix = step(-0.06, vPosition.y);
					// mix(a, b, t)：线性插值，t=0返回a，t=1返回b
					finalColor.assign(grassMix.mix(finalColor, colorGrass));

					// 11.3 岩石区域混合（基于法线角度和高度）
					// 点积运算：计算法线与垂直向量(0,1,0)的点积
					// 点积接近1表示表面接近水平，接近0表示表面垂直
					const verticality = dot(vNormal, vec3(0, 1, 0));
					// step(0.5, verticality)：垂直度大于0.5时返回1（表示较平缓的表面）
					// oneMinus()：取反（1变0，0变1），所以现在1表示陡峭的表面
					// mul(step(-0.06, vPosition.y))：只在地面以上区域应用岩石
					const rockMix = step(0.5, verticality)
						.oneMinus()  // 取反：陡峭区域为1
						.mul(step(-0.06, vPosition.y));  // 限制在地面以上
					// 混合岩石颜色
					finalColor.assign(rockMix.mix(finalColor, colorRock));

					// 11.4 雪地区域混合（基于高度和噪声）
					// 创建雪线噪声：在基础高度阈值(0.45)上添加噪声变化
					const snowThreshold = mx_noise_float(
						vPosition.xz.mul(25),  // 输入坐标缩放25倍
						1,  // 八度数
						0   // 偏移量
					)
					.mul(0.1)    // 噪声振幅为0.1
					.add(0.45);  // 基础高度为0.45
					
					// 如果当前位置高度大于雪线阈值，则显示雪
					const snowMix = step(snowThreshold, vPosition.y);
					// 混合雪地颜色
					finalColor.assign(snowMix.mix(finalColor, colorSnow));

					// 返回最终计算的颜色
					return finalColor;
			
				})();  // 立即执行函数并返回结果

				// ------------ 12. 创建地形几何体 ------------
				// PlaneGeometry：平面几何体，默认在XY平面
				// 参数：宽度, 高度, 宽度分段数, 高度分段数
				// 分段数越高，地形越精细，但性能消耗也越大
				const geometry = new THREE.PlaneGeometry(10, 10, 500, 500);
				// 删除不需要的几何属性以节省内存
				geometry.deleteAttribute('uv');     // UV坐标（纹理坐标），我们使用程序化纹理所以不需要
				geometry.deleteAttribute('normal'); // 法线，我们在着色器中计算所以不需要
				// 旋转几何体使其平铺在XZ平面上（默认是在XY平面）
				geometry.rotateX(-Math.PI * 0.5);  // 旋转-90度（-π/2）

				// ------------ 13. 创建地形网格对象 ------------
				// 将几何体和材质组合成网格对象
				const terrain = new THREE.Mesh(geometry, material);
				terrain.receiveShadow = true;  // 允许地形接收其他物体投射的阴影
				terrain.castShadow = true;     // 允许地形投射阴影到其他物体
				scene.add(terrain);  // 将地形添加到场景中

				// ------------ 14. 创建水面 ------------
				// 创建水面几何体（低分段数，因为水面是平坦的）
				const water = new THREE.Mesh(
					new THREE.PlaneGeometry(10, 10, 1, 1),
					// MeshPhysicalMaterial：高级物理材质，支持折射、透射等效果
					new THREE.MeshPhysicalMaterial({
						transmission: 1,   // 透射率：1表示完全透明（像玻璃或水）
						roughness: 0.5,    // 粗糙度：控制水面反射的模糊程度
						ior: 1.333,        // 折射率：水的折射率约为1.333
						color: '#4db2ff'   // 水的基础颜色：浅蓝色
					})
				);
				// 旋转水面使其平铺在XZ平面上
				water.rotation.x = -Math.PI * 0.5;
				// 将水面放置在地形下方一点点，看起来像是地形周围的水
				water.position.y = -0.1;
				// 将水面添加到场景中
				scene.add(water);

				// ------------ 15. 初始化拖拽交互系统 ------------
				// 创建一个对象来管理所有拖拽相关的数据和功能
				drag = {};
				// 屏幕坐标：归一化的设备坐标（NDC），范围从-1到1
				drag.screenCoords = new THREE.Vector2();
				// 世界坐标：3D场景中的坐标
				drag.prevWorldCoords = new THREE.Vector3();  // 上一帧的世界坐标
				drag.worldCoords = new THREE.Vector3();      // 当前帧的世界坐标
				// 光线投射器：用于检测鼠标光标与3D物体的交点
				drag.raycaster = new THREE.Raycaster();
				// 状态标志
				drag.down = false;   // 鼠标是否按下
				drag.hover = false;  // 鼠标是否悬停在可拖拽区域上

				// 创建拖拽交互平面（不可见）
				// 这是一个透明的平面，用于检测拖拽交互
				drag.object = new THREE.Mesh(
					new THREE.PlaneGeometry(10, 10, 1, 1),  // 与地形相同大小的平面
					new THREE.MeshBasicMaterial()  // 基础材质（完全透明）
				);
				// 旋转平面使其平铺在XZ平面上
				drag.object.rotation.x = -Math.PI * 0.5;
				// 设置为不可见（仅用于交互检测）
				drag.object.visible = false;
				// 将交互平面添加到场景中
				scene.add(drag.object);

				// 定义获取交点的函数
				drag.getIntersect = () => {
					// 从相机和屏幕坐标设置光线投射器
					drag.raycaster.setFromCamera(drag.screenCoords, camera);
					// 检测光线与交互平面的交点
					const intersects = drag.raycaster.intersectObject(drag.object);
					// 如果有交点，返回第一个交点（最接近相机的交点）
					if (intersects.length)
						return intersects[0];
					// 没有交点则返回null
					return null;
				};

				// 定义更新拖拽状态的函数（每帧调用）
				drag.update = () => {
					// 获取当前鼠标位置与交互平面的交点
					const intersect = drag.getIntersect();

					// 更新悬停状态和光标样式
					if (intersect) {
						// 鼠标悬停在交互平面上
						drag.hover = true;
						// 如果鼠标没有按下，显示"抓取"光标
						if (!drag.down)
							renderer.domElement.style.cursor = 'grab';
					} else {
						// 鼠标不在交互平面上
						drag.hover = false;
						// 恢复默认光标
						renderer.domElement.style.cursor = 'default';
					}

					// 处理拖拽移动
					if (drag.hover && drag.down) {
						// 更新当前世界坐标
						drag.worldCoords.copy(intersect.point);
						// 计算与上一帧的位移差
						const delta = drag.prevWorldCoords.sub(drag.worldCoords);

						// 更新地形偏移值（实现拖拽平移效果）
						// offset是之前定义的统一变量，修改它会自动更新着色器
						offset.value.x += delta.x;  // X方向位移
						offset.value.y += delta.z;  // Z方向位移（注意：在3D中，屏幕的Y对应世界的Z）
					}

					// 保存当前坐标供下一帧使用
					drag.prevWorldCoords.copy(drag.worldCoords);
				};

				// ------------ 16. 创建WebGPU渲染器 ------------
				// 创建WebGPU渲染器实例
				renderer = new THREE.WebGPURenderer({ antialias: true });  // 启用抗锯齿
				// 设置色调映射：ACES Filmic Tone Mapping
				// 色调映射将HDR（高动态范围）颜色转换到LDR（低动态范围）显示设备
				// ACES Filmic是电影行业标准，能提供更自然的颜色和对比度
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				// 启用阴影映射
				renderer.shadowMap.enabled = true;
				// 设置设备像素比（支持Retina等高分辨率显示器）
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为窗口尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环回调函数（每帧调用animate函数）
				renderer.setAnimationLoop(animate);
				// 将渲染器的画布元素添加到页面body中
				document.body.appendChild(renderer.domElement);

				// ------------ 17. 初始化Inspector调试工具 ------------
				// 创建Inspector实例并附加到渲染器上
				renderer.inspector = new Inspector();
				// 将Inspector的DOM元素添加到页面中
				document.body.appendChild(renderer.inspector.domElement);

				// ------------ 18. 创建轨道控制器 ------------
				// 创建OrbitControls实例，绑定到相机和渲染器画布
				controls = new OrbitControls(camera, renderer.domElement);
				// 设置最大垂直旋转角度（弧度），防止相机翻转
				controls.maxPolarAngle = Math.PI * 0.45;  // 约81度
				// 设置控制目标点（相机围绕此点旋转）
				controls.target.y = -0.5;
				// 启用阻尼效果（惯性），使相机移动更平滑
				controls.enableDamping = true;
				// 设置相机与目标点的最小距离
				controls.minDistance = 0.1;
				// 设置相机与目标点的最大距离
				controls.maxDistance = 50;

				// ------------ 19. 创建调试GUI ------------
				// 通过Inspector创建参数面板
				const gui = renderer.inspector.createParameters('参数设置');

				// 19.1 地形参数面板
				const terrainGui = gui.addFolder('🏔️ 地形参数');
				// 添加各种地形参数的滑块控制
				terrainGui.add(noiseIterations, 'value', 0, 10, 1)
					.name('噪声迭代次数')
					.onChange(() => { /* 参数变化时的回调（可选） */ });
				terrainGui.add(positionFrequency, 'value', 0, 1, 0.001)
					.name('位置频率');
				terrainGui.add(strength, 'value', 0, 20, 0.001)
					.name('地形强度');
				terrainGui.add(warpFrequency, 'value', 0, 20, 0.001)
					.name('扭曲频率');
				terrainGui.add(warpStrength, 'value', 0, 2, 0.001)
					.name('扭曲强度');

				// 添加颜色选择器
				terrainGui.addColor({ color: colorSand.value }, 'color')
					.name('沙滩颜色')
					.onChange((value) => { colorSand.value = value; });
				terrainGui.addColor({ color: colorGrass.value }, 'color')
					.name('草地颜色')
					.onChange((value) => { colorGrass.value = value; });
				terrainGui.addColor({ color: colorSnow.value }, 'color')
					.name('雪地颜色')
					.onChange((value) => { colorSnow.value = value; });
				terrainGui.addColor({ color: colorRock.value }, 'color')
					.name('岩石颜色')
					.onChange((value) => { colorRock.value = value; });

				// 19.2 水面参数面板
				const waterGui = gui.addFolder('💧 水面参数');
				waterGui.add(water.material, 'roughness', 0, 1, 0.01)
					.name('粗糙度');
				waterGui.add(water.material, 'ior', 1, 2, 0.001)
					.name('折射率');
				waterGui.addColor({ color: water.material.color }, 'color')
					.name('水面颜色')
					.onChange((value) => { water.material.color.set(value); });

				// ------------ 20. 事件监听器 ------------

				// 20.1 鼠标移动事件：更新屏幕坐标
				window.addEventListener('pointermove', (event) => {
					// 将鼠标位置从屏幕坐标转换为归一化设备坐标（NDC）
					// NDC范围：x从-1（左）到1（右），y从-1（下）到1（上）
					drag.screenCoords.x = (event.clientX / window.innerWidth - 0.5) * 2;
					// 注意：Three.js的Y轴与屏幕Y轴方向相反，所以需要取反
					drag.screenCoords.y = -(event.clientY / window.innerHeight - 0.5) * 2;
				});

				// 20.2 鼠标按下事件：开始拖拽
				renderer.domElement.addEventListener('pointerdown', () => {
					// 只有当鼠标悬停在可拖拽区域上时才处理按下事件
					if (drag.hover) {
						// 更改光标样式为"抓取中"
						renderer.domElement.style.cursor = 'grabbing';
						// 禁用轨道控制器（防止拖拽和相机控制冲突）
						controls.enabled = false;
						// 设置拖拽状态为"按下"
						drag.down = true;
						// 放大交互平面（使拖拽更容易，即使鼠标稍微移出地形也能继续拖拽）
						drag.object.scale.setScalar(10);

						// 获取当前交点并初始化拖拽坐标
						const intersect = drag.getIntersect();
						drag.prevWorldCoords.copy(intersect.point);  // 记录拖拽起点
						drag.worldCoords.copy(intersect.point);      // 当前点
					}
				});

				// 20.3 鼠标释放事件：结束拖拽
				window.addEventListener('pointerup', () => {
					// 重置所有拖拽相关状态
					drag.down = false;       // 鼠标不再按下
					controls.enabled = true;  // 重新启用轨道控制器
					drag.object.scale.setScalar(1);  // 恢复交互平面原始大小
				});

				// 20.4 窗口大小改变事件：调整渲染器和相机
				window.addEventListener('resize', onWindowResize);

			}

			// ============ 窗口大小改变处理函数 ============
			function onWindowResize() {
				// 更新相机宽高比（保持正确的透视）
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机投影矩阵（必须调用，否则渲染会变形）
				camera.updateProjectionMatrix();
				// 更新渲染器尺寸以匹配新窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ============ 动画循环函数 ============
			// 这是每帧都会调用的函数，用于更新和渲染场景
			async function animate() {
				// 更新轨道控制器（如果启用了阻尼，需要每帧更新）
				controls.update();
				// 更新拖拽交互状态
				drag.update();
				// 渲染场景：将3D场景绘制到2D画布上
				renderer.render(scene, camera);
			}

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