<!-- Three.js WebGPU 地球模拟系统 - 功能与技术详解
🌍 项目概述
这是一个基于Three.js和WebGPU技术构建的交互式地球与月球3D模拟系统，提供第一人称太空飞行体验。用户可以在太空中自由飞行，近距离观察地球、月球和星空，体验真实的太空探索感觉。

🎮 核心功能
1. 天体模拟系统
真实比例地球：半径6371公里，包含精确的地表纹理

动态云层：半透明云层以不同速度旋转，模拟大气运动

月球系统：按比例缩小的月球模型，在固定轨道运行

轴向倾斜：地球23.5度倾斜，模拟真实的黄赤交角

2. 交互式飞行控制
6自由度控制：

平移：W/S（前后）、A/D（左右）、R/F（上下）

旋转：Q/E（滚转）、方向键上下（俯仰）、方向键左右（偏航）

智能速度调节：根据与天体距离自动调整飞行速度

碰撞避免：接近天体表面时自动减速，防止穿模

3. 视觉效果系统
多层次星空：两层不同密度和颜色的星空背景，增强深度感

动态雾效：指数雾模拟太空深度，远处物体渐隐

胶片滤镜：后期处理添加电影感颗粒和扫描线效果

真实材质：地球使用法线贴图（地形凹凸）、高光贴图（海洋反光）

4. 性能与体验优化
性能监控：实时显示FPS和渲染性能

响应式设计：自适应各种屏幕尺寸和设备

加载优化：纹理按需加载，星空使用静态矩阵优化

🛠️ 主要技术点
1. WebGPU渲染引擎
javascript
// 使用Three.js的WebGPU后端
import * as THREE from 'three/webgpu';
const renderer = new THREE.WebGPURenderer({ antialias: true });
技术优势：

相比WebGL提供更好的性能和更现代的API

支持计算着色器、更高效的内存管理

更好的多线程支持和异步操作

2. 材质与着色系统
Phong着色模型：用于地球表面，支持高光和法线贴图

Lambert着色模型：用于云层，适合漫反射表面

法线贴图技术：在不增加几何复杂度的情况下模拟地形起伏

javascript
normalScale: new THREE.Vector2(0.85, -0.85) // Y轴取反处理坐标系差异
3. 后期处理管道
javascript
import { film } from 'three/addons/tsl/display/FilmNode.js';
postProcessing.outputNode = film(scenePassColor);
TSL着色语言：Three.js的声明式着色语言

胶片滤镜效果：模拟电影胶片的颗粒感和扫描线

渲染通道：分离场景渲染和后期处理

4. 性能优化技术
静态矩阵优化：星空背景禁用自动矩阵更新

几何体复用：地球、云层、月球共享同一球体几何体

距离裁剪：远裁剪面1e7单位，剔除不可见对象

缓冲区属性：使用Float32BufferAttribute高效存储顶点数据

5. 物理模拟与动画
时间增量动画：使用Clock计算delta time，确保帧率无关动画

javascript
const delta = clock.getDelta();
meshPlanet.rotation.y += rotationSpeed * delta;
智能速度控制：

javascript
controls.movementSpeed = 0.33 * d; // d为到天体表面的距离
6. 模块化架构
ES6模块系统：清晰的依赖管理

Import Maps：现代浏览器模块路径映射

Three.js生态系统：充分利用官方和社区扩展

📊 技术架构层次
底层渲染层（WebGPU）
WebGPU API调用

GPU资源管理

着色器编译与执行

中间件层（Three.js）
场景图管理

材质系统

几何体处理

相机控制系统

应用逻辑层
飞行控制器

距离检测逻辑

动画更新循环

用户输入处理

表现层
3D模型渲染

后期处理效果

UI信息显示

性能监控

🔧 关键技术实现细节
1. 距离检测与速度控制算法
javascript
// 计算到最近天体表面的距离
if (dMoon < dPlanet) {
    d = (dMoon - radius * moonScale * 1.01); // 月球
} else {
    d = (dPlanet - radius * 1.01); // 地球
}
// 线性速度调节：距离越近速度越慢
controls.movementSpeed = 0.33 * d;
2. 多层次星空生成算法
javascript
// 生成两层不同密度的星空
for (let i = 0; i < 250; i++) // 稀疏层
for (let i = 0; i < 1500; i++) // 密集层
// 随机旋转和缩放创建深度感
stars.rotation.set(Math.random()*6, Math.random()*6, Math.random()*6);
stars.scale.setScalar(i * 10);
3. 坐标系与单位系统
单位制：1单位 = 1公里（真实比例）

坐标原点：地球中心为(0,0,0)

光照方向：从(-1,0,1)方向照射（左上角）

4. 纹理加载与色彩管理
javascript
// sRGB色彩空间确保准确的颜色显示
materialNormalMap.map.colorSpace = THREE.SRGBColorSpace;
// 纹理资源管理
const textureLoader = new THREE.TextureLoader();
🎯 创新特色
科学准确性：

地球真实半径6371公里

23.5度轴向倾斜

月球相对比例准确

沉浸式体验：

6自由度太空飞行

智能速度调节

电影级视觉效果

性能平衡：

高质量视觉效果与流畅帧率平衡

渐进式渲染优化

内存使用优化

📈 可扩展方向
添加更多天体：太阳系其他行星

轨道力学模拟：真实的天体运动轨迹

大气散射效果：更真实的地球大气

昼夜循环系统：动态光照变化

多人协作模式：多用户同时探索 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：显示应用名称和功能描述 -->
		<title>Three.js WebGPU 地球模拟 - 飞行控制演示</title>
		
		<!-- 元数据设置 -->
		<meta charset="utf-8">  <!-- 字符编码为UTF-8，支持中文和多语言 -->
		<!-- viewport设置：适配移动设备，禁止用户手动缩放，设置最小和最大缩放比例为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:#000; /* 设置背景为纯黑色，模拟太空背景 */
				color: #eee;    /* 设置文字颜色为浅灰色，在黑色背景上有良好对比度 */
				margin: 0;      /* 移除默认外边距 */
				padding: 0;     /* 移除默认内边距 */
				overflow: hidden; /* 隐藏滚动条，防止页面滚动影响3D体验 */
				font-family: Arial, sans-serif; /* 设置字体族 */
			}

			/* 链接样式 */
			a {
				color: #0080ff; /* 设置链接颜色为亮蓝色 */
				text-decoration: none; /* 移除链接下划线 */
			}

			/* 鼠标悬停时链接效果 */
			a:hover {
				text-decoration: underline; /* 鼠标悬停时显示下划线 */
			}
			b {
				color: orange
			}
			
		</style>
	</head>

	<body>
		<!-- 信息显示面板：包含标题、链接和操作说明 -->
		<div id="info">
			<!-- 主标题和Three.js官网链接 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebGPU - 地球与月球模拟系统 [飞行控制模式]<br/>
			<!-- 操作说明部分 -->
			<strong>移动控制：</strong>
			<b>W</b>向前 / <b>S</b>向后 / <b>A</b>向左 / <b>D</b>向右
			<b>R</b>上升 / <b>F</b>下降
			<b>Q</b>左滚转 / <b>E</b>右滚转
			<strong>视角控制：</strong>
			<b>↑↓</b>俯仰（上下看）
			<b>←→</b>偏航（左右看）<br/>
			<br/>
		</div>

		<!-- Import Maps：现代JavaScript模块映射配置，允许浏览器将模块标识符映射到实际URL -->
		<!-- 这个特性允许我们在代码中使用简化的模块名称，而不需要完整的相对或绝对路径 -->
		<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模块 -->
		<script type="module">
			// ============================================
			// 模块导入部分
			// ============================================
			
			// 导入Three.js核心库的WebGPU版本
			// WebGPU是新一代图形API，相比WebGL有更好的性能和更现代化的特性
			import * as THREE from 'three/webgpu';
			
			// 从TSL（Three.js着色语言）导入pass函数
			// pass函数用于创建渲染通道，是后期处理的基础
			import { pass } from 'three/tsl';
			
			// 导入胶片滤镜节点，用于创建电影胶片效果的后期处理
			// 这种效果模拟了胶片的颗粒感和扫描线，增加视觉质感
			import { film } from 'three/addons/tsl/display/FilmNode.js';

			// 导入性能统计器（Stats.js）
			// 这是一个轻量级的性能监控库，可以显示帧率(FPS)、渲染时间等指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入飞行控制器
			// 提供第一人称飞行控制，支持6自由度（前后、左右、上下、俯仰、偏航、滚转）
			import { FlyControls } from 'three/addons/controls/FlyControls.js';

			// ============================================
			// 常量定义部分
			// ============================================
			
			// 地球物理常数（单位：公里）
			// 6371公里是地球的实际平均半径，这里按1:1比例建模
			const radius = 6371;
			
			// 地球自转轴倾斜角度（弧度）
			// 0.41弧度约等于23.5度，这是地球实际的黄赤交角
			// 这个倾斜导致地球四季变化
			const tilt = 0.41;
			
			// 地球自转速度系数
			// 这个值控制地球自转的视觉速度，不是真实的自转速度
			// 真实地球自转一周需要24小时，这里为了视觉效果进行了加速
			const rotationSpeed = 0.02;

			// 云层缩放比例
			// 云层应该在地球表面上方，所以需要比地球稍大
			// 1.005表示云层半径是地球半径的1.005倍
			const cloudsScale = 1.005;
			
			// 月球相对于地球的缩放比例
			// 月球的真实半径大约是地球的0.27倍，这里使用0.23以保持视觉平衡
			const moonScale = 0.23;

			// ============================================
			// 屏幕尺寸和全局变量
			// ============================================
			
			// 页面边距（当前为0，表示全屏显示）
			const MARGIN = 0;
			
			// 动态屏幕尺寸变量
			// 这些变量会在窗口大小改变时更新
			let SCREEN_HEIGHT = window.innerHeight - MARGIN * 2;
			let SCREEN_WIDTH = window.innerWidth;

			// 主要Three.js对象变量声明
			let camera;         // 相机：定义观察3D场景的视角
			let controls;       // 控制器：处理用户输入和相机移动
			let scene;          // 场景：包含所有3D对象的容器
			let renderer;       // 渲染器：负责将3D场景绘制到2D画布
			let stats;          // 性能统计器对象
			
			// 几何体和网格对象
			let geometry;       // 球体几何体（被地球、云层、月球共享）
			let meshPlanet;     // 地球网格对象
			let meshClouds;     // 云层网格对象
			let meshMoon;       // 月球网格对象
			
			let dirLight;       // 方向光源：模拟太阳光

			let postProcessing; // 后期处理对象，用于应用滤镜和特效

			// 创建纹理加载器实例
			// 纹理是2D图像，用于为3D模型提供表面细节
			const textureLoader = new THREE.TextureLoader();

			// 距离计算变量
			let d;       // 相机到最近天体表面的实际距离（用于速度控制）
			let dPlanet; // 相机到地球中心的距离
			let dMoon;   // 相机到月球中心的距离
			
			// 三维向量，用于临时计算相机到月球的距离
			// Vector3是Three.js中表示三维向量的类，有x、y、z三个分量
			const dMoonVec = new THREE.Vector3();

			// 创建时钟对象
			// Clock用于跟踪时间，计算帧间时间差(delta time)，确保动画速度与帧率无关
			const clock = new THREE.Clock();

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

			// ============================================
			// 初始化函数：设置整个3D场景
			// ============================================
			function init() {
				// --------------------------------------------------
				// 1. 相机设置
				// --------------------------------------------------
				// 创建透视相机（PerspectiveCamera）
				// 参数说明：
				//   - 25: 视野角度（FOV），单位是度，较小的值产生望远镜效果，较大的值产生广角效果
				//   - SCREEN_WIDTH/SCREEN_HEIGHT: 宽高比，根据窗口尺寸计算
				//   - 50: 近裁剪面，距离相机小于50单位的物体不会被渲染
				//   - 1e7: 远裁剪面，距离相机大于10,000,000单位的物体不会被渲染
				// 这样的设置适合太空场景，可以同时看到很近的地球表面和很远的星空
				camera = new THREE.PerspectiveCamera(25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7);
				
				// 设置相机初始位置：在地球正前方，距离地球5倍半径的位置
				// 这个距离提供了良好的地球全景视图
				camera.position.z = radius * 5;

				// --------------------------------------------------
				// 2. 场景设置
				// --------------------------------------------------
				// 创建场景对象，所有3D对象（网格、灯光等）都将添加到场景中
				scene = new THREE.Scene();
				
				// 为场景添加指数雾效（FogExp2）
				// 指数雾随着距离增加而指数级变浓，适合模拟大气效果
				// 参数说明：
				//   - 0x000000: 雾的颜色，黑色与太空背景一致
				//   - 0.00000025: 雾的密度，非常小的值产生微弱的深度感
				scene.fog = new THREE.FogExp2(0x000000, 0.00000025);

				// --------------------------------------------------
				// 3. 光照设置
				// --------------------------------------------------
				// 创建平行光源（DirectionalLight），模拟太阳光
				// 平行光的特点是光线平行，所有光线来自同一方向，类似太阳光
				// 参数说明：
				//   - 0xffffff: 光的颜色，白色光
				//   - 3: 光的强度，3倍强度确保地球被充分照亮
				dirLight = new THREE.DirectionalLight(0xffffff, 3);
				
				// 设置光源方向：从左上角照射（x=-1, y=0, z=1）
				// normalize()将向量长度变为1，保持方向但标准化强度
				dirLight.position.set(-1, 0, 1).normalize();
				
				// 将光源添加到场景
				scene.add(dirLight);

				// --------------------------------------------------
				// 4. 地球材质创建
				// --------------------------------------------------
				// 创建Phong材质，支持高光和法线贴图
				// Phong着色模型计算每个像素的光照，效果较好但计算量较大
				const materialNormalMap = new THREE.MeshPhongMaterial({
					specular: 0x7c7c7c,     // 高光颜色：浅灰色，控制反射光的颜色
					shininess: 15,          // 高光强度：值越大高光点越小越亮
					
					// 漫反射贴图：地球表面纹理，包含陆地和海洋
					// 这是地球的主纹理，2048x2048分辨率确保清晰度
					map: textureLoader.load('textures/planets/earth_atmos_2048.jpg'),
					
					// 高光贴图：控制表面哪些部分反光
					// 白色区域反光强（海洋），黑色区域反光弱（陆地）
					specularMap: textureLoader.load('textures/planets/earth_specular_2048.jpg'),
					
					// 法线贴图：在不增加几何复杂度的前提下模拟表面凹凸
					// 通过改变表面法线方向创造地形起伏的错觉
					normalMap: textureLoader.load('textures/planets/earth_normal_2048.jpg'),
					
					// 法线贴图缩放：控制凹凸效果的强度
					// Y轴缩放为负值是因为法线贴图的坐标系与Three.js的坐标系不同
					// 0.85是强度系数，值越大凹凸效果越明显
					normalScale: new THREE.Vector2(0.85, -0.85)
				});
				
				// 设置纹理颜色空间为sRGB
				// sRGB是标准RGB色彩空间，能更准确地在屏幕上显示颜色
				materialNormalMap.map.colorSpace = THREE.SRGBColorSpace;

				// --------------------------------------------------
				// 5. 地球网格创建
				// --------------------------------------------------
				// 创建球体几何体
				// 参数说明：
				//   - radius: 球体半径，使用地球实际半径
				//   - 100: 宽度分段数（经度方向），值越高球体越平滑
				//   - 50: 高度分段数（纬度方向），值越高球体越平滑
				geometry = new THREE.SphereGeometry(radius, 100, 50);
				
				// 创建网格对象：将几何体与材质结合
				meshPlanet = new THREE.Mesh(geometry, materialNormalMap);
				
				// 设置地球自转轴倾斜
				// rotation.z控制绕Z轴旋转，模拟地球23.5度的轴向倾斜
				meshPlanet.rotation.z = tilt;
				
				// 将地球添加到场景
				scene.add(meshPlanet);

				// --------------------------------------------------
				// 6. 云层材质创建
				// --------------------------------------------------
				// 创建Lambert材质，适合半透明对象
				// Lambert着色模型计算每个顶点光照，然后插值，适合漫反射表面
				const materialClouds = new THREE.MeshLambertMaterial({
					// 云层纹理：PNG格式支持透明度
					map: textureLoader.load('textures/planets/earth_clouds_1024.png'),
					transparent: true  // 启用透明度，PNG中的透明部分将不可见
				});
				materialClouds.map.colorSpace = THREE.SRGBColorSpace;

				// --------------------------------------------------
				// 7. 云层网格创建
				// --------------------------------------------------
				// 使用相同的球体几何体创建云层
				meshClouds = new THREE.Mesh(geometry, materialClouds);
				
				// 云层需要比地球稍大，确保云层漂浮在地球表面上方
				meshClouds.scale.set(cloudsScale, cloudsScale, cloudsScale);
				
				// 云层与地球有相同的轴向倾斜
				meshClouds.rotation.z = tilt;
				
				// 将云层添加到场景
				scene.add(meshClouds);

				// --------------------------------------------------
				// 8. 月球材质创建
				// --------------------------------------------------
				const materialMoon = new THREE.MeshPhongMaterial({
					// 月球表面纹理：显示月海的黑暗区域和月陆的明亮区域
					map: textureLoader.load('textures/planets/moon_1024.jpg')
				});
				materialMoon.map.colorSpace = THREE.SRGBColorSpace;

				// --------------------------------------------------
				// 9. 月球网格创建
				// --------------------------------------------------
				meshMoon = new THREE.Mesh(geometry, materialMoon);
				
				// 设置月球位置：在地球右侧，距离5倍地球半径
				// 真实地月距离约38万公里，这里为了视觉压缩了距离
				meshMoon.position.set(radius * 5, 0, 0);
				
				// 设置月球大小：按比例缩放
				meshMoon.scale.set(moonScale, moonScale, moonScale);
				
				// 将月球添加到场景
				scene.add(meshMoon);

				// --------------------------------------------------
				// 10. 星空背景创建
				// --------------------------------------------------
				// 创建多层次星空背景，增强深度感
				const r = radius; // 使用地球半径作为星空球体的半径参考
				
				// 创建两个不同的星空几何体，用于生成不同层次的星星
				const starsGeometry = [new THREE.BufferGeometry(), new THREE.BufferGeometry()];
				
				// 顶点数组：存储星星的位置坐标
				const vertices1 = []; // 第一层星星（较少的星星）
				const vertices2 = []; // 第二层星星（较多的星星）
				
				// 临时向量，用于计算每个星星的位置
				const vertex = new THREE.Vector3();

				// 生成第一层星星：250颗，分布较稀疏
				for (let i = 0; i < 250; i++) {
					// 生成随机方向：每个分量在[-1, 1]范围内
					vertex.x = Math.random() * 2 - 1;
					vertex.y = Math.random() * 2 - 1;
					vertex.z = Math.random() * 2 - 1;
					
					// 将向量扩展到半径为r的球面上
					// multiplyScalar(r)将向量长度变为r
					vertex.multiplyScalar(r);
					
					// 将顶点坐标添加到数组（三个一组：x, y, z）
					vertices1.push(vertex.x, vertex.y, vertex.z);
				}

				// 生成第二层星星：1500颗，分布较密集
				for (let i = 0; i < 1500; i++) {
					vertex.x = Math.random() * 2 - 1;
					vertex.y = Math.random() * 2 - 1;
					vertex.z = Math.random() * 2 - 1;
					vertex.multiplyScalar(r);
					vertices2.push(vertex.x, vertex.y, vertex.z);
				}

				// 将顶点数据设置到几何体中
				// Float32BufferAttribute是高效存储浮点数据的缓冲区属性
				// 参数说明：
				//   - 第一个参数：顶点数据数组
				//   - 第二个参数：每个顶点有几个分量（3表示x,y,z）
				starsGeometry[0].setAttribute('position', new THREE.Float32BufferAttribute(vertices1, 3));
				starsGeometry[1].setAttribute('position', new THREE.Float32BufferAttribute(vertices2, 3));

				// 创建三种不同灰度的星星材质
				// PointsMaterial用于渲染点精灵（如星星）
				const starsMaterials = [
					new THREE.PointsMaterial({ color: 0x9c9c9c }), // 浅灰色（#9c9c9c）
					new THREE.PointsMaterial({ color: 0x838383 }), // 中灰色（#838383）
					new THREE.PointsMaterial({ color: 0x5a5a5a })  // 深灰色（#5a5a5a）
				];

				// 创建多层星空，产生深度感
				for (let i = 10; i < 30; i++) {
					// 交替使用两个几何体和三种材质
					// i%2 在0和1之间切换，选择不同的几何体
					// i%3 在0、1、2之间切换，选择不同的材质
					const stars = new THREE.Points(starsGeometry[i % 2], starsMaterials[i % 3]);
					
					// 为每层星空设置随机旋转，避免星星排列过于规则
					stars.rotation.x = Math.random() * 6;
					stars.rotation.y = Math.random() * 6;
					stars.rotation.z = Math.random() * 6;
					
					// 设置缩放：不同层次的星空有不同的缩放
					// i*10 随着i增加，缩放越大，产生近大远小的效果
					stars.scale.setScalar(i * 10);
					
					// 性能优化：禁用自动矩阵更新
					// 星空是静态背景，不需要每帧更新变换矩阵
					stars.matrixAutoUpdate = false;
					
					// 手动更新一次矩阵，后续不再更新
					stars.updateMatrix();
					
					// 将星空添加到场景
					scene.add(stars);
				}

				// --------------------------------------------------
				// 11. 渲染器创建和设置
				// --------------------------------------------------
				// 创建WebGPU渲染器
				// WebGPURenderer是Three.js的WebGPU后端渲染器
				// 参数说明：
				//   - antialias: true 启用抗锯齿，平滑边缘锯齿
				renderer = new THREE.WebGPURenderer({ antialias: true });
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina显示器）上，这可以确保清晰渲染
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为窗口大小
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
				
				// 设置动画循环
				// setAnimationLoop是requestAnimationFrame的Three.js封装
				// 参数animate是每帧调用的回调函数
				renderer.setAnimationLoop(animate);
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body
				document.body.appendChild(renderer.domElement);

				// --------------------------------------------------
				// 12. 飞行控制器设置
				// --------------------------------------------------
				// 创建飞行控制器
				// 参数说明：
				//   - camera: 要控制的相机对象
				//   - renderer.domElement: 监听输入事件的DOM元素
				controls = new FlyControls(camera, renderer.domElement);
				
				// 设置基础移动速度：1000单位/秒
				// 这个速度会在后续根据距离动态调整
				controls.movementSpeed = 1000;
				
				// 设置控制器的DOM元素
				controls.domElement = renderer.domElement;
				
				// 设置滚转速度：π/24 弧度/秒
				// 滚转是绕Z轴旋转，类似飞机的横滚
				controls.rollSpeed = Math.PI / 24;
				
				// 禁用自动前进：需要手动控制移动
				controls.autoForward = false;
				
				// 禁用拖拽查看：鼠标移动直接控制视角，不需要按住鼠标
				controls.dragToLook = false;

				// --------------------------------------------------
				// 13. 性能统计器设置
				// --------------------------------------------------
				// 创建Stats.js实例
				stats = new Stats();
				
				// 将统计器的DOM元素添加到页面
				// stats.dom是一个div元素，包含FPS等性能指标
				document.body.appendChild(stats.dom);

				// --------------------------------------------------
				// 14. 事件监听器设置
				// --------------------------------------------------
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);

				// --------------------------------------------------
				// 15. 后期处理设置
				// --------------------------------------------------
				// 创建后期处理实例
				// PostProcessing是Three.js的后期处理框架
				postProcessing = new THREE.PostProcessing(renderer);
				
				// 创建场景渲染通道
				// pass函数创建一个渲染通道，将场景和相机结合
				const scenePass = pass(scene, camera);
				
				// 获取场景通道的颜色纹理节点
				// 这个节点包含了渲染后的场景图像数据
				const scenePassColor = scenePass.getTextureNode();
				
				// 设置后期处理的输出节点为应用了胶片滤镜的场景
				// film函数创建胶片滤镜效果，模拟电影胶片的颗粒感和扫描线
				postProcessing.outputNode = film(scenePassColor);
			}

			// ============================================
			// 窗口大小变化处理函数
			// ============================================
			function onWindowResize() {
				// 更新屏幕尺寸变量
				SCREEN_HEIGHT = window.innerHeight;
				SCREEN_WIDTH = window.innerWidth;

				// 更新相机宽高比
				// 宽高比改变后，需要更新投影矩阵以确保正确渲染
				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
				
				// 更新相机投影矩阵
				// 当相机参数（如宽高比）改变时，必须调用此方法
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 确保渲染画布与窗口大小一致
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
			}

			// ============================================
			// 动画循环函数（每帧调用）
			// ============================================
			function animate() {
				// 渲染场景
				render();
				
				// 更新性能统计器显示
				// 这会更新FPS、帧时间等指标的显示
				stats.update();
			}

			// ============================================
			// 渲染函数（执行实际的渲染操作）
			// ============================================
			function render() {
				// 获取时间增量（delta time）
				// delta是上一帧到当前帧经过的时间（秒）
				// 使用时间增量确保动画速度与帧率无关
				const delta = clock.getDelta();

				// --------------------------------------------------
				// 1. 更新地球和云层旋转
				// --------------------------------------------------
				// 更新地球自转
				// rotation.y控制绕Y轴旋转，模拟地球自西向东自转
				// rotationSpeed * delta 确保旋转速度与时间成正比，与帧率无关
				meshPlanet.rotation.y += rotationSpeed * delta;
				
				// 更新云层旋转（比地球稍快）
				// 云层以1.25倍地球自转速度旋转，模拟大气环流
				meshClouds.rotation.y += 1.25 * rotationSpeed * delta;

				// --------------------------------------------------
				// 2. 计算相机到天体的距离
				// --------------------------------------------------
				// 计算相机到地球中心的距离
				// position.length()计算向量的长度（即距离原点的距离）
				// 因为地球在原点，所以这是相机到地球中心的距离
				dPlanet = camera.position.length();

				// 计算相机到月球中心的向量差
				// subVectors(a, b) 计算 a - b
				// 结果dMoonVec是从月球中心指向相机的向量
				dMoonVec.subVectors(camera.position, meshMoon.position);
				
				// 计算相机到月球中心的距离
				dMoon = dMoonVec.length();

				// --------------------------------------------------
				// 3. 动态调整移动速度（智能速度控制）
				// --------------------------------------------------
				// 判断相机离哪个天体更近
				if (dMoon < dPlanet) {
					// 如果离月球更近，计算到月球表面的距离
					// 从到月球中心的距离减去月球半径（乘以1.01留出安全余量）
					d = (dMoon - radius * moonScale * 1.01);
				} else {
					// 如果离地球更近，计算到地球表面的距离
					// 从到地球中心的距离减去地球半径（乘以1.01留出安全余量）
					d = (dPlanet - radius * 1.01);
				}

				// 根据距离动态调整移动速度
				// 公式：速度 = 0.33 * 到表面的距离
				// 这意味着：
				//   - 距离越远，移动速度越快（适合太空旅行）
				//   - 距离越近，移动速度越慢（适合精细观察）
				//   - 当接近表面时，速度趋近于0，防止穿入天体内部
				controls.movementSpeed = 0.33 * d;
				
				// 更新控制器状态
				// 处理用户输入，根据当前速度和delta time更新相机位置和旋转
				controls.update(delta);
				
				// 执行后期处理渲染
				// 这会渲染整个场景，应用胶片滤镜，并输出到画布
				postProcessing.render();
			}
		</script>
	</body>
</html>