<!-- Three.js 三维地形与雾效演示 - 代码功能与技术点详解
一、整体功能概述
这是一个基于Three.js构建的交互式三维地形漫游系统，具有以下核心功能：

1. 动态地形生成
程序化生成自然风格的三维地形

支持第一人称视角的实时漫游

包含逼真的雾效和光照效果

2. 核心交互体验
鼠标控制：左键前进、右键后退、拖动鼠标控制视角

实时渲染：60FPS流畅的WebGL渲染

自适应窗口：响应式设计，自动适应不同屏幕尺寸

性能监控：实时显示帧率等性能指标

二、主要技术架构
1. Three.js核心框架
javascript
// 基于Three.js模块化架构
import * as THREE from 'three';
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
2. 项目结构组件
text
1. 场景管理（Scene）
2. 相机系统（PerspectiveCamera）
3. 渲染管线（WebGLRenderer）
4. 控制器系统（FirstPersonControls）
5. 地形生成器
6. 纹理生成器
7. 性能监控器（Stats.js）
三、核心技术点详解
1. 地形生成技术 - 分形布朗运动（FBM）
原理实现：
javascript
// 四层噪声叠加实现自然地形
for (let j = 0; j < 4; j++) {
    for (let i = 0; i < size; i++) {
        data[i] += Math.abs(perlin.noise(x/quality, y/quality, z) * quality * 1.75);
    }
    quality *= 5; // 每层频率×5，振幅×5
}
技术特点：
多级噪声叠加：4层Perlin噪声创建分形地形

频率递增：quality从1到125，生成从宏观到微观的地形特征

确定性随机：固定种子确保地形可重现

高度范围：Uint8Array（0-255）存储高度数据

2. 实时纹理生成技术
法向量光照计算：
javascript
// 中心差分法计算法向量
vector3.x = data[j-2] - data[j+2];  // X方向斜率
vector3.y = 2;                      // 垂直分量（控制陡峭度）
vector3.z = data[j-width*2] - data[j+width*2]; // Z方向斜率

// 兰伯特光照模型
shade = vector3.dot(sun); // 点积计算光照强度
颜色生成算法：
javascript
// 基于高度和光照的RGB计算
R = (96 + shade*128) * (0.5 + height*0.007)  // 红色基调
G = (32 + shade*96)  * (0.5 + height*0.007)  // 绿色较少
B = (shade*96)       * (0.5 + height*0.007)  // 蓝色仅来自光照
纹理优化：
基础纹理：256×256分辨率

4倍放大：使用Canvas 2D API放大到1024×1024

噪点添加：RGB通道添加0-4随机值，增加自然感

3. 雾效渲染技术
指数雾效配置：
javascript
scene.fog = new THREE.FogExp2(0xefd1b5, 0.0025);
颜色匹配：雾色与背景色一致（#efd1b5）

指数衰减：浓度随距离平方增加，模拟真实大气

深度提示：增强场景的远近层次感

4. 第一人称控制系统
控制器配置：
javascript
controls = new FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 150;  // 移动速度
controls.lookSpeed = 0.1;      // 视角灵敏度
帧率无关运动：
javascript
// 基于时间差的运动计算
controls.update(clock.getDelta());
deltaTime：确保不同帧率下移动速度一致

事件解耦：渲染循环与用户输入分离

5. 性能优化技术
1. 几何体优化
顶点复用：PlaneGeometry使用共享顶点

索引缓冲：自动生成三角形索引

BufferGeometry：使用TypedArray高效存储

2. 渲染优化
Frustum Culling：Three.js自动视锥体剔除

状态管理：最小化WebGL状态切换

纹理压缩：Canvas纹理自动GPU上传

3. 内存管理
高度数据：Uint8Array（1字节/顶点）

顶点数据：Float32Array（12字节/顶点）

纹理内存：1024×1024 RGBA ≈ 4MB

6. 响应式设计技术
自适应布局：
javascript
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    controls.handleResize();
}
移动端适配：
视口设置：禁用缩放，固定缩放比例

DPI适配：devicePixelRatio支持Retina屏

触摸支持：通过控制器间接支持

四、数据流与渲染管线
1. 数据处理流程
text
1. 噪声生成 → 高度数据（Uint8Array）
2. 高度数据 → 几何体顶点（Float32Array）
3. 高度数据 + 光照 → 纹理图像（Canvas）
4. 几何体 + 纹理 → 网格对象（Mesh）
5. 网格 + 雾效 → 场景渲染
2. 渲染循环流程
text
1. 用户输入处理（控制器更新）
2. 相机矩阵计算（投影+视图）
3. 场景图遍历（对象变换）
4. WebGL状态设置（材质、纹理）
5. GPU绘制调用（Shader执行）
6. 后期处理（雾效混合）
7. 显示输出（Canvas绘制）
五、关键技术参数
地形参数：
尺寸：7500 × 7500 单位

分辨率：256 × 256 顶点

最大高度：255 × 10 = 2550 单位

三角形数量：255 × 255 × 2 ≈ 130,050

渲染参数：
视野角度：60度（自然视角）

裁剪范围：1 - 10,000单位

雾效密度：0.0025（中低浓度）

纹理尺寸：1024 × 1024像素

性能参数：
顶点数：65,536个

三角形数：130,050个

纹理内存：~4MB

几何内存：~1.5MB

六、扩展与优化建议
1. 性能提升方向
LOD系统：根据距离使用不同细节层次

地形分块：分块加载和渲染大地形

Web Worker：地形计算移出主线程

压缩纹理：使用KTX2或Basis Universal

2. 视觉效果增强
动态光照：日夜循环、天气系统

水体渲染：添加湖泊、河流效果

植被系统：基于高度的植被分布

后期效果：SSAO、运动模糊、色彩校正

3. 交互功能扩展
地形编辑：实时修改地形高度

保存/加载：地形数据序列化

多人模式：WebSocket多人漫游

VR支持：WebXR VR体验

七、学习价值
这个项目是学习以下技术的优秀范例：

Three.js核心概念：场景、相机、渲染器、网格、材质

程序化内容生成：噪声算法、地形生成、纹理合成

计算机图形学：光照模型、雾效、法向量计算

WebGL优化：内存管理、渲染性能、GPU利用

交互设计：第一人称控制、用户输入处理 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：改为中文描述 -->
		<title>Three.js WebGL - 三维地形与雾效演示</title>
		<!-- 字符编码：指定为UTF-8以支持中文字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动端，禁止缩放以保证Three.js渲染稳定性 -->
		<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>
			body {
				/* 设置页面背景色（米黄色）和文字颜色（深棕色） */
				background-color: #efd1b5;
				color: #61443e;
				/* 移除默认边距确保Three.js渲染器能全屏显示 */
				margin: 0;
				overflow: hidden; /* 隐藏滚动条 */
				font-family: Arial, sans-serif; /* 设置字体 */
			}
			a {
				/* 链接颜色（棕红色） */
				color: #a06851;
				text-decoration: none; /* 移除下划线 */
			}
			a:hover {
				/* 鼠标悬停时的链接颜色 */
				color: #8a5a45;
				text-decoration: underline; /* 添加下划线效果 */
			}
		</style>
	</head>
	<body>

		<!-- Three.js渲染器容器：WebGL画布将被插入到此元素中 -->
		<div id="container"></div>
		<!-- 信息显示区域：展示项目信息和操作说明 -->
		<div id="info">
			<!-- 链接到Three.js官网 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			- WebGL三维地形与雾效演示 <br />
			<!-- 操作说明：中文提示 -->
			(操作说明：鼠标左键前进，鼠标右键后退，拖动鼠标控制视角)
		</div>

		<!-- 导入映射（Import Maps）：现代浏览器模块加载配置 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：使用ES6模块语法 -->
		<script type="module">

			// ==================== 导入模块 ====================
			// 导入three.js核心库：THREE对象包含所有three.js核心功能
			import * as THREE from 'three';

			// 导入性能统计器：显示FPS（帧率）、MS（渲染时间）等性能指标
			import Stats from 'three/addons/libs/stats.module.js';

			// 导入第一人称控制器：提供第一人称视角的移动和视角控制
			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
			// 导入改进的柏林噪声生成器：用于生成自然的地形高度数据
			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';

			// ==================== 全局变量声明 ====================
			let container;    // 存放Three.js渲染器的DOM容器
			let stats;       // 性能统计器实例
			let camera;      // 三维相机（观察者视角）
			let controls;    // 第一人称控制器实例
			let scene;       // 三维场景（包含所有三维对象）
			let renderer;    // WebGL渲染器
			let mesh;        // 地形网格对象（几何体+材质）
			let texture;     // 地形纹理（根据高度数据生成）

			// 地形数据尺寸：决定地形的分辨率和细节程度
			const worldWidth = 256;   // 地形宽度方向的分段数（顶点数-1）
			const worldDepth = 256;   // 地形深度方向的分段数（顶点数-1）
			
			// 创建Three.js时钟对象：用于计算时间差（deltaTime），实现平滑动画
			const clock = new THREE.Clock();

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

			/**
			 * 初始化函数：Three.js应用的核心初始化逻辑
			 * 1. 创建场景、相机、渲染器
			 * 2. 生成地形几何体和纹理
			 * 3. 设置控制器和事件监听
			 * 4. 启动动画循环
			 */
			function init() {
				// 获取DOM容器元素
				container = document.getElementById('container');

				// ==================== 创建相机 ====================
				// 创建透视投影相机（模拟人眼视角）
				camera = new THREE.PerspectiveCamera(
					60,                                // 视野角度（FOV）：60度，角度越大看到范围越广
					window.innerWidth / window.innerHeight, // 宽高比：根据窗口尺寸计算
					1,                                 // 近裁剪面：相机能看到的最小距离
					10000                              // 远裁剪面：相机能看到的远距离
				);

				// ==================== 创建场景 ====================
				scene = new THREE.Scene();
				// 设置场景背景色（与页面背景色一致）
				scene.background = new THREE.Color(0xefd1b5);
				/**
				 * 创建指数雾效（FogExp2）：雾浓度随距离指数增长
				 * 参数1：雾的颜色（与背景色一致）
				 * 参数2：雾的密度（0.0025），值越大雾越浓
				 * 作用：增强场景的深度感和距离感，远处地形逐渐融入雾中
				 */
				scene.fog = new THREE.FogExp2(0xefd1b5, 0.0025);

				// ==================== 生成地形高度数据 ====================
				// 调用generateHeight函数生成256x256的地形高度数据数组
				const data = generateHeight(worldWidth, worldDepth);

				// ==================== 设置相机初始位置和朝向 ====================
				// 设置相机在三维空间中的位置（x, y, z）
				camera.position.set(100, 800, -800);
				// 设置相机看向的目标点（x, y, z）
				camera.lookAt(-100, 810, -800);

				// ==================== 创建地形几何体 ====================
				/**
				 * 创建平面几何体作为地形基础
				 * 参数1：平面宽度（7500单位）
				 * 参数2：平面高度/深度（7500单位）
				 * 参数3：宽度分段数（255段，对应256个顶点）
				 * 参数4：高度/深度分段数（255段，对应256个顶点）
				 * 注：分段数越多，地形细节越丰富，但性能开销越大
				 */
				const geometry = new THREE.PlaneGeometry(
					7500, 
					7500, 
					worldWidth - 1, 
					worldDepth - 1
				);
				/**
				 * 将平面绕X轴旋转-90度
				 * 原因：默认创建的平面是垂直的（在XZ平面），旋转后变为水平（在XY平面）
				 * 这样Y轴就变成了高度轴，符合地形高度概念
				 */
				geometry.rotateX(-Math.PI / 2);

				// 获取几何体的顶点位置属性数组
				// Three.js中几何体的顶点数据以Float32Array形式存储：[x1, y1, z1, x2, y2, z2, ...]
				const vertices = geometry.attributes.position.array;

				/**
				 * 遍历所有顶点，根据高度数据修改Y坐标（高度）
				 * i: 高度数据数组的索引（0到65535）
				 * j: 顶点属性数组的索引（0到196607，因为每个顶点有3个值）
				 * 注意：高度数据点数量 = 顶点数量 = worldWidth * worldDepth
				 */
				for (let i = 0, j = 0, l = vertices.length; i < l; i++, j += 3) {
					// j+0: x坐标，j+1: y坐标（高度），j+2: z坐标
					// 将高度数据乘以10放大，增强地形起伏效果
					vertices[j + 1] = data[i] * 10;
				}

				// ==================== 创建地形纹理 ====================
				/**
				 * 根据高度数据生成Canvas纹理
				 * generateTexture函数返回一个HTMLCanvasElement
				 * THREE.CanvasTexture可以将Canvas转换为WebGL纹理
				 */
				texture = new THREE.CanvasTexture(generateTexture(data, worldWidth, worldDepth));
				// 设置纹理包裹方式：边缘拉伸（防止纹理重复时出现接缝）
				texture.wrapS = THREE.ClampToEdgeWrapping;
				texture.wrapT = THREE.ClampToEdgeWrapping;
				// 设置纹理颜色空间：sRGB（更符合人眼感知的颜色空间）
				texture.colorSpace = THREE.SRGBColorSpace;

				// ==================== 创建地形网格对象 ====================
				/**
				 * 创建网格（Mesh）：几何体 + 材质
				 * MeshBasicMaterial：基础材质，只显示纹理颜色，不受光照影响
				 * 使用map属性将纹理应用到材质上
				 */
				mesh = new THREE.Mesh(
					geometry, 
					new THREE.MeshBasicMaterial({ map: texture })
				);
				// 将地形网格添加到场景中
				scene.add(mesh);

				// ==================== 创建WebGL渲染器 ====================
				renderer = new THREE.WebGLRenderer({
					antialias: true // 可添加抗锯齿参数（可选，提高画质但消耗性能）
				});
				// 设置设备像素比率：适应高DPI屏幕（如Retina显示屏）
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为全屏
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环回调函数（替代传统的requestAnimationFrame）
				renderer.setAnimationLoop(animate);
				// 将渲染器的canvas元素添加到DOM容器中
				container.appendChild(renderer.domElement);

				// ==================== 创建第一人称控制器 ====================
				/**
				 * 参数1：要控制的相机
				 * 参数2：事件监听的DOM元素（通常是渲染器的canvas）
				 */
				controls = new FirstPersonControls(camera, renderer.domElement);
				// 设置移动速度（单位/秒）
				controls.movementSpeed = 150;
				// 设置视角旋转速度
				controls.lookSpeed = 0.1;
				// 可添加的其他参数（可选）：
				// controls.lookVertical = true; // 允许垂直视角旋转
				// controls.constrainVertical = true; // 限制垂直视角角度

				// ==================== 创建性能统计器 ====================
				stats = new Stats();
				// 将统计器的DOM元素（显示FPS的面板）添加到容器中
				container.appendChild(stats.dom);
				// 可选：设置统计器面板位置
				stats.dom.style.position = 'absolute';
				stats.dom.style.top = '0px';
				stats.dom.style.left = '0px';

				// ==================== 事件监听 ====================
				// 监听窗口大小变化事件，自适应调整渲染
				window.addEventListener('resize', onWindowResize);
				
				// 可选：添加键盘事件监听（如果需要键盘控制）
				// window.addEventListener('keydown', onKeyDown);
				// window.addEventListener('keyup', onKeyUp);

				// 可选：添加全屏切换支持
				// renderer.domElement.addEventListener('dblclick', toggleFullscreen);
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，需要更新相机和渲染器设置
			 */
			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} - 包含高度数据的Uint8数组（0-255）
			 */
			function generateHeight(width, height) {
				// 计算总点数
				const size = width * height;
				// 创建Uint8Array存储高度数据（256级高度）
				const data = new Uint8Array(size);
				
				// ==================== 设置确定性随机种子 ====================
				/**
				 * 为了确保每次生成的地形相同（可重现）
				 * 重写Math.random函数，使用正弦函数生成伪随机数
				 * 种子从π/4开始，每次调用递增
				 */
				let seed = Math.PI / 4;
				window.Math.random = function() {
					const x = Math.sin(seed++) * 10000;
					// 返回0-1之间的浮点数
					return x - Math.floor(x);
				};

				// ==================== 创建柏林噪声生成器 ====================
				const perlin = new ImprovedNoise();
				// 随机Z轴偏移，决定地形在噪声空间中的位置
				const z = Math.random() * 100;

				// ==================== 多级噪声叠加（分形布朗运动） ====================
				/**
				 * 分形布朗运动（FBM）原理：
				 * 叠加多个不同频率（缩放）和振幅（强度）的噪声
				 * 低频噪声生成大尺度地形特征（山脉、山谷）
				 * 高频噪声生成小尺度细节（岩石、凹凸）
				 * 
				 * 公式：FBM(x) = noise(x) + 0.5*noise(2x) + 0.25*noise(4x) + ...
				 */
				let quality = 1; // 初始频率因子（控制噪声的缩放）
				
				// 循环4次，叠加4级噪声
				for (let j = 0; j < 4; j++) {
					// 遍历所有数据点
					for (let i = 0; i < size; i++) {
						// 计算当前点在二维网格中的坐标
						const x = i % width;          // X坐标（0到width-1）
						const y = ~~(i / width);      // Y坐标（0到height-1），~~是快速取整
						
						/**
						 * 计算当前频率的噪声值并叠加到数据中
						 * perlin.noise(x/quality, y/quality, z):
						 *   - x/quality, y/quality: 坐标缩放，quality越大，频率越低（特征越大）
						 *   - z: 固定的Z偏移，决定噪声图案
						 * Math.abs(): 取绝对值，使所有高度值为正
						 * * quality * 1.75: 振幅缩放，quality越大，振幅越大
						 * 
						 * 注意：这里使用加法叠加，每次循环quality增加，频率降低，振幅增加
						 */
						data[i] += Math.abs(perlin.noise(x / quality, y / quality, z) * quality * 1.75);
					}
					
					// 每次循环后，quality乘以5
					// 这意味着：频率降低5倍（特征变大5倍），振幅增加5倍
					quality *= 5;
				}

				// ==================== 后处理（可选） ====================
				// 这里可以添加高度数据的后处理，例如：
				// 1. 平滑处理（减少噪点）
				// 2. 高度范围归一化（确保所有值在0-255之间）
				// 3. 应用侵蚀模拟等

				return data;
			}

			/**
			 * 生成地形纹理
			 * 根据高度数据生成带光照效果的地形纹理
			 * 使用法线贴图原理计算每个像素的颜色
			 * 
			 * @param {Uint8Array} data - 高度数据数组
			 * @param {number} width - 纹理宽度（像素）
			 * @param {number} height - 纹理高度（像素）
			 * @returns {HTMLCanvasElement} - 包含纹理图像的Canvas元素
			 */
			function generateTexture(data, width, height) {
				// 局部变量声明
				let context;     // Canvas 2D上下文
				let image;       // ImageData对象
				let imageData;   // 图像数据数组
				let shade;       // 光照强度（0-1）

				// ==================== 创建基础Canvas ====================
				const canvas = document.createElement('canvas');
				canvas.width = width;
				canvas.height = height;

				// 获取2D渲染上下文
				context = canvas.getContext('2d');
				// 填充黑色背景（后续会被高度和光照颜色覆盖）
				context.fillStyle = '#000';
				context.fillRect(0, 0, width, height);

				// 获取整个Canvas的图像数据
				image = context.getImageData(0, 0, canvas.width, canvas.height);
				// 获取像素数据数组：每4个元素表示一个像素的RGBA值
				imageData = image.data;

				// ==================== 计算法向量和光照 ====================
				/**
				 * 用于计算法向量的临时向量
				 * 法向量：垂直于表面的单位向量，用于计算光照
				 */
				const vector3 = new THREE.Vector3(0, 0, 0);

				/**
				 * 模拟太阳方向的光源向量
				 * Vector3(1, 1, 1)表示光源来自右前上方
				 * normalize()将其转换为单位向量（长度为1）
				 */
				const sun = new THREE.Vector3(1, 1, 1);
				sun.normalize();

				// ==================== 遍历每个像素计算颜色 ====================
				/**
				 * 遍历所有像素（i: 像素索引，j: 高度数据索引）
				 * imageData.length = width * height * 4
				 * 每个像素占用4个数组元素：R, G, B, A
				 */
				for (let i = 0, j = 0, l = imageData.length; i < l; i += 4, j++) {
					/**
					 * 计算法向量（使用中心差分法）
					 * 原理：通过相邻像素的高度差估算表面斜率
					 * 
					 * vector3.x = data[j-2] - data[j+2]:
					 *   - 计算X方向（左右）的高度差
					 *   - j-2: 左边第二个点，j+2: 右边第二个点
					 *   - 使用间隔2的点是为了获得更平滑的法线
					 * 
					 * vector3.y = 2:
					 *   - Y分量固定为2，控制法向量的"陡峭程度"
					 *   - 值越大，法向量越垂直，光照对比越小
					 * 
					 * vector3.z = data[j-width*2] - data[j+width*2]:
					 *   - 计算Z方向（前后）的高度差
					 *   - j-width*2: 上方第二个点，j+width*2: 下方第二个点
					 */
					vector3.x = data[j - 2] - data[j + 2];
					vector3.y = 2;
					vector3.z = data[j - width * 2] - data[j + width * 2];
					
					// 将法向量归一化（转换为单位向量）
					vector3.normalize();

					/**
					 * 计算光照强度（兰伯特余弦定律）
					 * 点积 = |A|·|B|·cosθ，由于都是单位向量，所以直接是cosθ
					 * 值范围：-1到1，1表示完全朝向光源，-1表示完全背对光源
					 */
					shade = vector3.dot(sun);
					// 注意：这里没有处理负值，背光面也会有基础颜色

					/**
					 * 计算最终颜色值（基于高度和光照）
					 * 颜色公式：基础颜色 + 光照影响 + 高度影响
					 * 
					 * R通道计算：
					 *   (96 + shade * 128): 基础红色96 + 光照影响（-128到128）
					 *   (0.5 + data[j] * 0.007): 高度影响因子
					 *   - 0.5: 基础亮度
					 *   - data[j] * 0.007: 高度越高越亮（data[j]范围0-255）
					 * 
					 * G通道计算：
					 *   (32 + shade * 96): 基础绿色32 + 光照影响（-96到96）
					 *   绿色比红色少，使整体呈红土地色调
					 * 
					 * B通道计算：
					 *   (shade * 96): 只有光照影响，无基础蓝色
					 *   使背光面偏蓝紫色（环境光效果）
					 */
					imageData[i] = (96 + shade * 128) * (0.5 + data[j] * 0.007);     // Red
					imageData[i + 1] = (32 + shade * 96) * (0.5 + data[j] * 0.007); // Green
					imageData[i + 2] = (shade * 96) * (0.5 + data[j] * 0.007);      // Blue
					// Alpha通道保持默认255（完全不透明）
					imageData[i + 3] = 255;
				}

				// 将处理后的图像数据写回Canvas
				context.putImageData(image, 0, 0);

				// ==================== 纹理放大和细节增强 ====================
				/**
				 * 将纹理放大4倍以提高分辨率
				 * 原始256x256 -> 放大后1024x1024
				 * 提高纹理质量，避免近距离观察时像素化
				 */
				const canvasScaled = document.createElement('canvas');
				canvasScaled.width = width * 4;
				canvasScaled.height = height * 4;

				// 获取新Canvas的2D上下文
				context = canvasScaled.getContext('2d');
				// 设置缩放变换（放大4倍）
				context.scale(4, 4);
				// 绘制原始纹理到放大后的Canvas
				context.drawImage(canvas, 0, 0);

				// 获取放大后的图像数据
				image = context.getImageData(0, 0, canvasScaled.width, canvasScaled.height);
				imageData = image.data;

				/**
				 * 为纹理添加随机噪点
				 * 目的：使纹理更自然，避免计算机生成的完美感
				 * 每个像素的RGB通道都增加0-4的随机值
				 */
				for (let i = 0, l = imageData.length; i < l; i += 4) {
					// 生成0-4之间的随机整数
					const v = ~~(Math.random() * 5);

					// 为RGB通道添加相同的随机值（灰度噪点）
					imageData[i] += v;      // Red
					imageData[i + 1] += v;  // Green
					imageData[i + 2] += v;  // Blue
					// Alpha通道保持不变
				}

				// 将添加噪点后的图像数据写回Canvas
				context.putImageData(image, 0, 0);

				// 返回放大并添加噪点后的Canvas
				return canvasScaled;
			}

			/**
			 * 动画循环函数
			 * 每一帧自动调用，驱动整个Three.js应用
			 */
			function animate() {
				// 调用渲染函数，绘制当前帧
				render();
				// 更新性能统计器显示
				stats.update();
				
				// 可选：添加其他每帧更新逻辑
				// 例如：更新动画、物理模拟、用户输入处理等
			}

			/**
			 * 渲染函数
			 * 执行实际的WebGL渲染操作
			 */
			function render() {
				/**
				 * 更新第一人称控制器
				 * clock.getDelta(): 获取上一帧到当前帧的时间差（秒）
				 * 控制器根据时间差计算移动距离，实现帧率无关的运动
				 */
				controls.update(clock.getDelta());
				
				/**
				 * 执行WebGL渲染
				 * 参数1：要渲染的场景
				 * 参数2：使用的相机
				 * 内部流程：
				 * 1. 清空颜色和深度缓冲区
				 * 2. 应用雾效计算
				 * 3. 遍历场景所有对象进行渲染
				 * 4. 应用相机投影和视图变换
				 */
				renderer.render(scene, camera);
				
				// 可选：添加后期处理效果
				// 例如：辉光、景深、颜色校正等
			}

		</script>

	</body>
</html>