<!-- Three.js 天空与太阳着色器系统 - 功能描述与技术分析
一、整体功能概述
这是一个基于 Three.js WebGL 的动态天空模拟系统，实现了逼真的大气散射效果和太阳光照模拟。系统通过物理参数控制天空外观，提供了交互式的GUI控制面板，允许用户实时调整大气条件、太阳位置和视觉效果。

核心功能模块：
物理天空渲染：模拟真实大气散射现象

动态太阳系统：可调节高度和方向的太阳

交互控制界面：实时参数调整

响应式3D场景：自适应窗口变化的WebGL渲染

二、详细功能描述
1. 大气效果模拟
浑浊度控制：调节大气中悬浮颗粒浓度（类似雾霾/灰尘效果）

瑞利散射：控制天空蓝色程度和日落红色强度

米氏散射：生成太阳周围的光晕效果

动态天气变化：通过参数组合模拟不同天气条件

2. 太阳系统
仰角控制：太阳在天空中的高度（0°地平线 - 90°头顶）

方位角控制：太阳在水平方向的位置（0°北 - 180°南）

时间模拟：通过调整角度模拟一天中不同时间的太阳位置

光照计算：基于太阳位置计算光照方向和强度

3. 用户交互
鼠标拖拽：通过OrbitControls旋转观察视角

实时调节：6个可调物理参数 + 曝光控制

即时反馈：所有调整立即反映在渲染结果中

4. 视觉效果
电影级色调映射：使用ACESFilmic算法实现高质量色彩

曝光控制：模拟相机曝光参数调整

HDR渲染：支持高动态范围视觉效果

三、主要技术点分析
1. Three.js 核心架构
javascript
// 三大核心组件
场景图(Scene Graph) + 相机系统(Camera) + 渲染器(Renderer)

// 渲染管线
JavaScript参数 -> Uniform变量 -> GPU着色器 -> 屏幕像素
2. 物理大气模型
Rayleigh Scattering（瑞利散射）

大气分子对短波长光的散射

主要影响：天空蓝色、日出日落红色

数学公式：散射强度 ∝ 1/λ⁴（λ为波长）

Mie Scattering（米氏散射）

大气颗粒（气溶胶）对光的散射

主要影响：太阳光晕、雾霾效果

各向异性散射：mieDirectionalG控制方向性

3. 着色器技术
glsl
// 核心计算（简化示意）
vec3 calculateSkyColor(
    vec3 viewDirection,    // 观察方向
    vec3 sunDirection,     // 太阳方向
    float turbidity,       // 浑浊度
    float rayleigh,        // 瑞利系数
    float mieCoefficient   // 米氏系数
) {
    // 瑞利散射计算
    float rayleighPhase = 1.0 + dot(viewDirection, sunDirection)²;
    vec3 rayleighColor = rayleighCoeff * rayleighPhase;
    
    // 米氏散射计算
    float miePhase = // Henyey-Greenstein相位函数
    vec3 mieColor = mieCoefficient * miePhase;
    
    // 组合结果
    return exp(-extinction) * (rayleighColor + mieColor);
}
4. 坐标系统转换
text
用户输入（角度） -> 球面坐标 -> 直角坐标 -> 着色器Uniform

角度坐标系：
- 仰角：0°（地平线）到90°（天顶）
- 方位角：0°（北）到180°（南）

数学转换：
φ = π/2 - elevation（弧度）
θ = azimuth（弧度）
x = sin(φ)cos(θ)
y = cos(φ)
z = sin(φ)sin(θ)
5. 渲染优化技术
远裁剪面优化：2,000,000单位，适合大范围天空

设备像素比适配：支持Retina等高DPI显示

色调映射：ACESFilmic实现电影级色彩还原

按需渲染：只在参数变化时重新渲染，节省性能

6. 交互技术
OrbitControls：提供自然的3D场景导航

lil-gui：轻量级参数控制界面

事件驱动架构：GUI变化触发渲染更新

四、技术实现层次
第一层：基础设施
WebGL上下文管理

Three.js对象生命周期

事件系统集成

第二层：渲染管线
text
CPU端：
参数收集 -> Uniform设置 -> 绘制调用

GPU端：
顶点处理 -> 大气计算 -> 色调映射 -> 帧缓冲输出
第三层：物理模拟
散射积分计算（在着色器中实现）

相位函数应用（Rayleigh和Mie相位函数）

光学深度计算（大气厚度模拟）

第四层：用户体验
响应式设计（窗口大小适应）

实时交互（60fps流畅更新）

直观控制（滑块+即时预览）

五、关键技术参数说明
参数	物理意义	视觉效果	典型范围
turbidity	大气浑浊度	雾霾/灰尘程度	0-20
rayleigh	瑞利散射强度	天空蓝色程度	0-4
mieCoefficient	米氏散射系数	光晕大小	0-0.1
mieDirectionalG	散射方向性	光晕锐利度	0-1
elevation	太阳高度	时间/季节	0-90°
azimuth	太阳方向	东南西北	-180-180°
六、应用场景
游戏开发：动态天气系统、时间流逝

模拟训练：飞行模拟器、驾驶模拟

建筑设计：日照分析、建筑可视化

影视预演：光线条件预览

科学可视化：大气现象模拟

七、技术亮点总结
基于物理的渲染：真实大气散射模型

实时性能：GPU加速，60fps流畅交互

高度可配置：7个物理参数完全可控

生产级质量：电影级色调映射和HDR支持

现代Web标准：ES6模块、Import Maps、响应式设计 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示Three.js实现的天空和太阳着色器效果 -->
		<title>Three.js WebGL - 天空与太阳着色器效果</title>
		<!-- 字符编码：使用UTF-8以支持中文字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：确保网页在移动设备上正确显示，禁止用户手动缩放 -->
		<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">
	</head>
	<body>

		<!-- 信息显示区域：显示项目信息和Three.js官网链接 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			WebGL - 动态天空与太阳着色器模拟系统
		</div>

		<!-- 导入映射表（Import Map）：现代JavaScript模块导入的配置 -->
		<!-- 作用：告诉浏览器如何解析import语句中的模块路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

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

			// 从three模块导入所有内容并命名为THREE
			// THREE是Three.js的主命名空间，包含所有核心功能
			import * as THREE from 'three';

			// 从three.js附加组件中导入特定功能
			// GUI：轻量级的图形用户界面库，用于创建参数控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			// OrbitControls：轨道控制器，允许用户用鼠标拖拽旋转视图
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// Sky：天空对象，提供基于物理的天空渲染效果
			import { Sky } from 'three/addons/objects/Sky.js';

			// 全局变量声明：在整个模块中可用的变量
			let camera;     // 相机对象：定义观察3D场景的视角
			let scene;      // 场景对象：所有3D对象的容器
			let renderer;   // 渲染器对象：负责将3D场景绘制到2D画布上
			let sky;        // 天空对象：模拟大气散射的天空效果
			let sun;        // 太阳向量：表示太阳在3D空间中的位置

			// 程序入口：先初始化场景，然后进行第一次渲染
			init();    // 初始化所有Three.js组件
			render();  // 执行渲染，将场景绘制到屏幕上

			/**
			 * 初始化天空系统函数
			 * 主要功能：
			 * 1. 创建天空对象并添加到场景
			 * 2. 设置太阳位置参数
			 * 3. 创建GUI控制面板
			 * 4. 设置大气散射参数
			 */
			function initSky() {

				// 创建天空对象实例
				// Sky类使用基于物理的大气散射模型模拟真实天空
				sky = new Sky();
				
				// 设置天空的缩放比例
				// setScalar(450000)：将天空球体放大到450000倍
				// 这样天空看起来无限远，形成逼真的天空穹顶效果
				sky.scale.setScalar( 450000 );
				
				// 将天空对象添加到场景中
				// scene.add()将对象添加到场景图层次结构中
				scene.add( sky );

				// 创建太阳位置向量
				// THREE.Vector3表示三维空间中的点或方向
				// 这里用于存储太阳在天空中的位置
				sun = new THREE.Vector3();

				// GUI控制器参数对象
				// 这个对象存储所有可以通过GUI调整的参数值
				// 每个参数都有物理意义，影响天空的外观
				const effectController = {
					turbidity: 10,           // 浑浊度：大气中悬浮颗粒的浓度
					// 范围：0-20，值越高天空越浑浊（类似雾霾效果）
					
					rayleigh: 3,             // 瑞利散射系数：影响天空蓝色程度
					// 瑞利散射是大气分子对短波长光（蓝光）的散射
					// 值越高，天空越蓝，日落时的红色越明显
					
					mieCoefficient: 0.005,   // 米氏散射系数：影响太阳周围光晕
					// 米氏散射是大气中较大颗粒（气溶胶）的散射
					// 值越高，太阳周围的光晕越明显
					
					mieDirectionalG: 0.7,    // 米氏散射方向性参数
					// 控制散射光的各向异性程度
					// 范围：0-1，值越高散射越向前，形成更锐利的光晕
					
					elevation: 2,            // 太阳仰角：太阳相对于地平线的角度
					// 范围：0-90度，0=地平线，90=头顶正上方
					// 控制太阳在天空中的高度
					
					azimuth: 180,            // 太阳方位角：太阳相对于正北的方向
					// 范围：-180到180度，0=正北，90=正东，180=正南，-90=正西
					// 控制太阳在水平方向的位置
					
					exposure: renderer.toneMappingExposure  // 曝光度
					// 控制场景的整体亮度，类似相机曝光参数
				};

				/**
				 * GUI参数改变回调函数
				 * 当用户在GUI中调整任何参数时调用此函数
				 * 主要功能：
				 * 1. 更新天空着色器的uniform参数
				 * 2. 重新计算太阳位置
				 * 3. 更新渲染器曝光设置
				 * 4. 重新渲染场景
				 */
				function guiChanged() {

					// 获取天空材质的uniforms对象
					// uniforms是着色器（Shader）中的全局变量
					// 通过JavaScript可以动态修改这些值
					const uniforms = sky.material.uniforms;
					
					// 更新天空着色器的各个uniform参数
					// 这些值直接影响GPU中着色器的计算
					uniforms[ 'turbidity' ].value = effectController.turbidity;
					uniforms[ 'rayleigh' ].value = effectController.rayleigh;
					uniforms[ 'mieCoefficient' ].value = effectController.mieCoefficient;
					uniforms[ 'mieDirectionalG' ].value = effectController.mieDirectionalG;

					// 将仰角和方位角转换为球面坐标
					// 球面坐标由三个参数组成：半径r、极角φ（phi）、方位角θ（theta）
					
					// 将仰角转换为极角φ
					// 90 - elevation是因为：仰角0°时太阳在地平线（φ=90°），仰角90°时太阳在头顶（φ=0°）
					const phi = THREE.MathUtils.degToRad( 90 - effectController.elevation );
					
					// 将方位角转换为弧度制的方位角θ
					const theta = THREE.MathUtils.degToRad( effectController.azimuth );

					// 根据球面坐标设置太阳位置
					// setFromSphericalCoords参数：
					// 1. radius=1：单位距离，太阳在单位球面上的位置
					// 2. phi：极角（从天顶开始的角度）
					// 3. theta：方位角（在xy平面内的角度）
					sun.setFromSphericalCoords( 1, phi, theta );

					// 将太阳位置向量复制到着色器的uniform中
					// 着色器使用这个值计算光照和阴影方向
					uniforms[ 'sunPosition' ].value.copy( sun );

					// 更新渲染器的色调映射曝光度
					// 色调映射（Tone Mapping）将HDR颜色转换为显示器的LDR范围
					renderer.toneMappingExposure = effectController.exposure;
					
					// 重新渲染场景，应用所有更改
					// renderer.render()是Three.js的核心渲染函数
					// 参数：scene（要渲染的场景），camera（观察视角）
					renderer.render( scene, camera );

				}

				// 创建GUI控制面板实例
				// GUI将在屏幕上创建一个可折叠的控制面板
				const gui = new GUI();

				// 为每个参数添加GUI控制滑块
				// 语法：gui.add(对象, 属性名, 最小值, 最大值, 步长).onChange(回调函数)
				
				// 浑浊度控制滑块
				gui.add( effectController, 'turbidity', 0.0, 20.0, 0.1 ).onChange( guiChanged );
				// 瑞利散射系数控制滑块
				gui.add( effectController, 'rayleigh', 0.0, 4, 0.001 ).onChange( guiChanged );
				// 米氏散射系数控制滑块
				gui.add( effectController, 'mieCoefficient', 0.0, 0.1, 0.001 ).onChange( guiChanged );
				// 米氏散射方向性控制滑块
				gui.add( effectController, 'mieDirectionalG', 0.0, 1, 0.001 ).onChange( guiChanged );
				// 太阳仰角控制滑块
				gui.add( effectController, 'elevation', 0, 90, 0.1 ).onChange( guiChanged );
				// 太阳方位角控制滑块
				gui.add( effectController, 'azimuth', -180, 180, 0.1 ).onChange( guiChanged );
				// 曝光度控制滑块
				gui.add( effectController, 'exposure', 0, 1, 0.0001 ).onChange( guiChanged );

				// 初始化调用：设置所有参数的初始值并更新天空
				// 确保场景从一开始就显示正确的天空效果
				guiChanged();

			}

			/**
			 * 主初始化函数
			 * Three.js应用的核心初始化步骤：
			 * 1. 创建相机、场景、渲染器
			 * 2. 设置场景内容
			 * 3. 设置事件监听器
			 * 4. 初始化控制器
			 */
			function init() {

				// ========== 创建透视相机 ==========
				// THREE.PerspectiveCamera：模拟人眼视角的相机
				camera = new THREE.PerspectiveCamera(
					60,                                    // 视野角度（Field of View）
					// 单位：度，控制相机能看到的角度范围
					// 60°接近人眼的自然视野
					
					window.innerWidth / window.innerHeight, // 宽高比
					// 根据浏览器窗口尺寸计算，确保渲染不拉伸
					
					100,                                    // 近裁剪面
					// 距离相机小于此值的物体不会被渲染
					// 防止近处物体出现渲染问题
					
					2000000                                 // 远裁剪面
					// 距离相机大于此值的物体不会被渲染
					// 对于天空场景需要很大的值
				);
				
				// 设置相机初始位置
				// 参数：x, y, z坐标
				camera.position.set( 0, 100, 2000 );  // 地面以上100单位，向后2000单位

				// ========== 创建场景 ==========
				// THREE.Scene：所有3D对象的容器
				// 场景图结构：可以包含网格、灯光、相机等对象
				scene = new THREE.Scene();

				// ========== 创建网格辅助器 ==========
				// THREE.GridHelper：在场景中显示网格线，帮助理解空间关系
				const helper = new THREE.GridHelper(
					10000,   // 网格大小：10000x10000单位
					2,       // 细分数量：创建2x2的网格
					0xffffff, // 中心线颜色：白色（十六进制RGB）
					0xffffff  // 网格线颜色：白色
				);
				// 将网格辅助器添加到场景
				scene.add( helper );

				// ========== 创建WebGL渲染器 ==========
				// THREE.WebGLRenderer：使用WebGL API进行硬件加速渲染
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比
				// window.devicePixelRatio：设备物理像素与CSS像素的比例
				// 对于高DPI屏幕（如Retina），提高此值可以获得更清晰的图像
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置色调映射算法
				// THREE.ACESFilmicToneMapping：电影级色调映射算法
				// 提供更自然的颜色过渡和更好的高光处理
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 设置初始曝光度
				// 控制整体亮度，0.5是中等亮度
				renderer.toneMappingExposure = 0.5;
				
				// 将渲染器的canvas元素添加到HTML文档的body中
				// renderer.domElement：渲染器创建的<canvas>元素
				document.body.appendChild( renderer.domElement );

				// ========== 创建轨道控制器 ==========
				// OrbitControls：允许用户用鼠标交互控制相机
				const controls = new OrbitControls( camera, renderer.domElement );
				
				// 添加变化事件监听器
				// 当用户拖拽相机时，调用render函数重新渲染
				controls.addEventListener( 'change', render );
				
				// （注释掉的）限制垂直旋转角度
				// Math.PI / 2 = 90度，限制相机不能看到地面以下
				// 对于天空场景通常启用此限制
				// controls.maxPolarAngle = Math.PI / 2;
				
				// 禁用缩放功能
				// 对于固定的天空视图，通常不需要缩放
				controls.enableZoom = false;
				
				// 禁用平移功能
				// 保持视图中心固定
				controls.enablePan = false;

				// ========== 初始化天空效果 ==========
				// 调用之前定义的initSky函数，创建天空和GUI
				initSky();

				// ========== 添加窗口大小变化事件监听器 ==========
				// 当用户调整浏览器窗口大小时，确保3D场景正确适应
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 窗口大小变化事件处理函数
			 * 响应浏览器窗口大小变化，确保渲染正确适配
			 */
			function onWindowResize() {

				// 更新相机的宽高比
				// 根据新的窗口尺寸重新计算
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 重要：更改相机参数后必须调用此方法
				// 投影矩阵定义了3D空间如何映射到2D屏幕
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 使<canvas>元素的大小与窗口大小匹配
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 执行一次渲染，应用所有更改
				render();

			}

			/**
			 * 渲染函数
			 * Three.js的核心渲染循环
			 * 将3D场景通过相机视角绘制到2D画布上
			 */
			function render() {

				// 调用渲染器的render方法
				// 参数：
				// 1. scene：要渲染的场景对象
				// 2. camera：观察场景的相机对象
				// 这个过程包括：
				// - 清除上一帧的画面
				// - 计算相机视图矩阵
				// - 遍历场景中的所有对象
				// - 对每个对象执行顶点着色和片段着色
				// - 将结果绘制到<canvas>元素上
				renderer.render( scene, camera );

			}

		</script>

	</body>

</html>