<!-- Three.js 白炉能量守恒测试 - 功能描述与技术详解
一、代码功能概述
1. 核心功能
这是一个基于Three.js的PBR（基于物理渲染）材质验证工具，专门用于执行白炉测试（White Furnace Test）。该测试验证材质的能量守恒特性——在均匀的中性光照环境中，材质反射的总光量不应超过它接收的光量。

2. 可视化呈现
创建11×11的球体矩阵（共121个球体）

水平方向：粗糙度从0.0到1.0均匀变化

垂直方向：金属度从0.0到1.0均匀变化

形成完整的材质参数空间可视化

3. 交互功能
鼠标移入页面：所有球体变为白色，便于观察能量反射总量

鼠标移出页面：球体恢复浅蓝色，便于区分单个材质特性

窗口自适应：自动调整渲染尺寸和相机参数

二、主要技术点详解
1. Three.js核心架构
渲染管线
javascript
// 三要素架构
renderer.render(scene, camera);
Scene（场景）：所有3D对象的容器，管理渲染状态

Camera（相机）：透视相机，模拟人眼视角（40°视野）

Renderer（渲染器）：WebGLRenderer，硬件加速渲染

几何体创建
javascript
const geometry = new THREE.SphereGeometry(0.4, 32, 16);
球体半径0.4单位

32个经度分段，16个纬度分段

高分段数确保光滑表面，适合PBR材质表现

2. PBR材质系统
MeshPhysicalMaterial参数
javascript
new THREE.MeshPhysicalMaterial({
  roughness: x / 10,      // 微表面粗糙度
  metalness: y / 10,      // 金属度
  color: 0xffffff,        // 基础颜色
  envMap: radianceMap,    // 环境贴图
  envMapIntensity: 1,     // 环境光强度
  transmission: 0,        // 透射率（不透明）
  ior: 1.5                // 折射率（类玻璃）
})
参数详解
粗糙度：控制光线散射程度

0.0 = 完美镜面反射

1.0 = 完全漫反射

金属度：控制菲涅尔反射行为

0.0 = 电介质（塑料、木材）

1.0 = 导体（金属）

折射率：1.5 = 标准玻璃的折射率

3. 白炉环境系统
PMREM环境贴图生成
javascript
// 1. 创建纯色环境场景
const envScene = new THREE.Scene();
envScene.background = new THREE.Color(0xcccccc);

// 2. 使用PMREMGenerator生成优化后的环境贴图
const pmremGenerator = new THREE.PMREMGenerator(renderer);
radianceMap = pmremGenerator.fromScene(envScene).texture;
PMREM技术优势
预滤波：提前计算不同粗糙度级别的反射

Mipmap链：存储多级细节贴图

实时性能：渲染时快速采样，无需实时计算环境反射

能量守恒：确保各粗糙度级别的反射能量正确

4. 能量守恒验证机制
理论依据
能量守恒定律：反射光 + 吸收光 + 透射光 = 入射光

白炉测试标准：在纯白色均匀环境中，物体不应显得比环境更亮

验证方法
javascript
// 通过观察不同参数组合下的表现：
// 1. 粗糙度增加 → 反射更分散 → 表面应该变暗
// 2. 金属度变化 → 反射颜色变化 → 非金属有漫反射，金属有强烈镜面反射
// 3. 任何组合下的球体亮度 ≤ 环境背景亮度
5. 响应式与交互设计
窗口自适应
javascript
function onWindowResize() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  
  camera.aspect = width / height;
  camera.updateProjectionMatrix();  // 必须调用！
  renderer.setSize(width, height);
  
  render();  // 重新渲染
}
颜色切换交互
javascript
// 鼠标移入：白色模式（能量观察模式）
child.material.color.setHex(0xffffff);

// 鼠标移出：蓝色模式（区分模式）
child.material.color.setHex(0xccccff);
6. 模块化与初始化流程
Promise链控制流程
javascript
Promise.resolve()
  .then(init)                // 1. 基础初始化
  .then(createEnvironment)   // 2. 环境创建（依赖渲染器）
  .then(createObjects)       // 3. 对象创建（依赖环境贴图）
  .then(render);             // 4. 最终渲染
初始化顺序重要性
先创建渲染器：需要WebGL上下文

再生成环境贴图：需要渲染器进行离屏渲染

最后创建材质：材质需要引用环境贴图

三、技术亮点
1. 完整的PBR验证套件
同时测试粗糙度和金属度的所有组合

实时可视化PBR材质特性

交互式对比分析

2. 高性能环境映射
使用PMREM技术优化环境贴图

纯色环境贴图内存占用小

支持实时参数调整

3. 教育价值
直观展示PBR材质参数影响

可视化能量守恒原理

适合图形学教学和材质开发

4. 代码结构清晰
函数职责分离明确

异步流程控制合理

错误处理完善

四、应用场景
1. 材质开发与调试
验证自定义PBR材质的正确性

调试材质参数组合

确保能量守恒

2. 渲染引擎测试
测试渲染引擎的PBR实现

比较不同引擎的渲染结果

性能基准测试

3. 图形学教育
教学PBR渲染原理

演示能量守恒概念

展示材质参数可视化

4. 质量保证
确保渲染结果物理准确

防止过亮或过暗的材质

保持视觉一致性

五、扩展可能性
1. 功能增强
javascript
// 可添加的功能：
// 1. 实时参数调整滑块
// 2. 不同环境贴图切换
// 3. 材质导入导出
// 4. 性能监测面板
2. 技术扩展
支持更多材质类型（StandardMaterial, ToonMaterial）

添加法线贴图、高度贴图支持

集成屏幕空间反射（SSR）

添加多光源支持

3. 分析工具
能量守恒量化分析

渲染性能分析

材质对比工具

自动报告生成 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题 -->
		<title>Three.js白炉能量守恒测试</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">
		<!-- 
			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="main.css">
	</head>
	<body>

		<!-- 主容器：包含整个3D场景和相关信息 -->
		<div id="container">
			<!-- 信息显示区域 - 已替换为中文内容 -->
			<div id="info">
				<!-- 技术框架和概念说明 -->
				<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> -
				<!-- 白炉测试概念链接 -->
				<a href="https://google.github.io/filament/Filament.md.html#toc4.7.2" target="_blank" rel="noopener">白炉测试</a> 能量守恒验证 作者：<a href="https://jsantell.com/" target="_blank" rel="noopener">Jordan Santell</a>
				<!-- 测试参数说明 -->
				<br>粗糙度从左到右递增（0.0 → 1.0）
				<br>金属度从上到下递增（0.0 → 1.0）
				<!-- 使用说明 -->
				<br>鼠标移入页面：所有球体变为白色，用于观察反射能量
				<br>鼠标移出页面：球体恢复浅蓝色，便于区分单个材质
			</div>
		</div>

		<!-- 
			导入映射（Import Maps）
			作用：定义JavaScript模块导入的路径别名
			让浏览器知道导入语句中的模块标识符对应哪个实际文件
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块 - type="module"表示这是一个ES6模块 -->
		<script type="module">

			// 导入Three.js库的所有功能
			// * as THREE 表示将three模块的所有导出内容作为一个名为THREE的对象导入
			import * as THREE from 'three';

			// 全局变量声明
			let scene,      // Three.js场景对象，包含所有3D对象、光源等
				camera,     // 相机对象，定义观察3D场景的视角
				renderer,   // 渲染器对象，负责将3D场景绘制到Canvas上
				radianceMap;// 辐射环境贴图，用于白炉测试的均匀环境光照

			// 颜色常量：定义白炉环境的颜色（浅灰色 #CCCCCC）
			// 白炉测试需要一个均匀的中性色环境来准确评估材质反射
			const COLOR = 0xcccccc;

			/**
			 * 初始化函数
			 * 职责：设置Three.js的基础环境
			 * 1. 创建渲染器并添加到DOM
			 * 2. 设置事件监听器
			 * 3. 创建场景和相机
			 */
			function init() {

				// 获取当前浏览器窗口的尺寸
				const width = window.innerWidth;   // 窗口宽度（像素）
				const height = window.innerHeight; // 窗口高度（像素）
				const aspect = width / height;     // 宽高比，用于相机设置

				// 创建WebGL渲染器
				// WebGLRenderer是Three.js的渲染器，使用WebGL API进行硬件加速渲染
				renderer = new THREE.WebGLRenderer( { 
					antialias: true // 启用抗锯齿，平滑边缘锯齿
				} );
				
				// 设置渲染器的输出画布尺寸
				renderer.setSize( width, height );
				
				// 设置设备像素比，确保在高DPI屏幕（如Retina显示屏）上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 将渲染器的画布（DOM元素）添加到页面body中
				// renderer.domElement是HTMLCanvasElement
				document.body.appendChild( renderer.domElement );

				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，重新调整渲染器尺寸和相机参数
				window.addEventListener( 'resize', onWindowResize );

				/**
				 * 鼠标移入页面事件处理
				 * 功能：将所有球体材质颜色设为纯白色
				 * 目的：在白炉测试中，白色球体更容易观察能量反射情况
				 * 因为白炉环境的背景是浅灰色，白色球体对比更明显
				 */
				document.body.addEventListener( 'mouseover', function () {
					
					// scene.traverse() 遍历场景中的所有对象（包括子对象的子对象）
					scene.traverse( function ( child ) {
						
						// 检查当前遍历的对象是否为网格（Mesh）对象
						// child.isMesh 是Three.js Mesh对象的标识属性
						if ( child.isMesh ) {
							// 将材质的颜色设置为纯白色（#FFFFFF）
							// 这有助于观察每个球体反射的总能量
							child.material.color.setHex( 0xffffff );
						}
						
					} );

					// 调用渲染函数更新画面
					render();

				} );

				/**
				 * 鼠标移出页面事件处理
				 * 功能：将所有球体材质颜色设为浅蓝色
				 * 目的：便于区分和观察单个材质的特性
				 * 浅蓝色与白炉的浅灰色背景形成温和对比
				 */
				document.body.addEventListener( 'mouseout', function () {
					
					scene.traverse( function ( child ) {
						
						if ( child.isMesh ) {
							// 将材质颜色设为浅蓝色（#CCCCFF）
							// 这是一种视觉辅助，帮助用户区分不同的球体
							child.material.color.setHex( 0xccccff );
						}
						
					} );

					// 更新渲染
					render();

				} );

				// 创建Three.js场景对象
				// Scene是所有3D对象的容器，包括网格、光源、相机等
				scene = new THREE.Scene();

				// 创建透视相机（PerspectiveCamera）
				// 透视相机模拟人眼的视觉效果，远处的物体看起来更小
				camera = new THREE.PerspectiveCamera( 
					40,      // 视野角度（Field of View），单位：度
					aspect,  // 宽高比
					1,       // 近裁剪平面：相机能看到的最近距离
					30       // 远裁剪平面：相机能看到的最远距离
				);
				
				// 设置相机在三维空间中的位置
				// 参数：(x, y, z) 坐标
				// 这里将相机放在Z轴正方向18个单位处，面向原点(0,0,0)
				camera.position.set( 0, 0, 18 );

			}

			/**
			 * 创建测试对象函数
			 * 职责：生成11×11网格的球体阵列
			 * 每个球体代表不同的粗糙度和金属度组合
			 * 形成材质参数的二维可视化矩阵
			 */
			function createObjects() {

				// 创建球体几何体
				// 参数：半径，宽度分段数（经线），高度分段数（纬线）
				// 更多分段数 = 更光滑的球体 = 更高的计算开销
				const geometry = new THREE.SphereGeometry( 0.4, 32, 16 );

				// 创建11行×11列的球体网格
				// x: 0到10（包含），代表粗糙度变化
				// y: 0到10（包含），代表金属度变化
				for ( let x = 0; x <= 10; x ++ ) {

					for ( let y = 0; y <= 10; y ++ ) {

						/**
						 * 创建物理材质（MeshPhysicalMaterial）
						 * 这是Three.js中最先进的PBR（基于物理的渲染）材质
						 * 它模拟真实世界的光照物理特性
						 */
						const material = new THREE.MeshPhysicalMaterial( {
							// 粗糙度：0.0（镜面般光滑）到 1.0（完全粗糙）
							// x/10 得到 0.0, 0.1, 0.2, ..., 1.0
							roughness: x / 10,
							
							// 金属度：0.0（非金属，如塑料）到 1.0（金属，如钢铁）
							// y/10 得到 0.0, 0.1, 0.2, ..., 1.0
							metalness: y / 10,
							
							// 基础颜色：白色
							// 在白炉测试中，通常使用中性色以避免颜色对能量计算的影响
							color: 0xffffff,
							
							// 环境贴图：白炉测试的均匀光照环境
							envMap: radianceMap,
							
							// 环境贴图强度：设为1.0表示完全使用环境光
							envMapIntensity: 1,
							
							// 透射率：0.0表示完全不透明
							// 如果大于0，材质会变成透明/半透明（类似玻璃）
							transmission: 0,
							
							// 折射率（Index of Refraction）：1.5
							// 定义光线通过材质时的弯曲程度
							// 1.0 = 空气，1.5 ≈ 玻璃，2.4 ≈ 钻石
							ior: 1.5
						} );

						// 创建网格对象：将几何体和材质组合成可渲染的3D对象
						const mesh = new THREE.Mesh( geometry, material );
						
						// 设置球体在网格中的位置
						// X坐标：x - 5，范围从-5到5，11个球体均匀分布
						mesh.position.x = x - 5;
						
						// Y坐标：5 - y，范围从5到-5
						// 注意：Three.js中Y轴向上为正，这里使用"5-y"让第一行在顶部
						mesh.position.y = 5 - y;
						
						// 将网格对象添加到场景中
						scene.add( mesh );

					}

				}

			}

			/**
			 * 创建环境函数
			 * 职责：生成白炉测试所需的环境贴图
			 * 白炉环境是一个均匀的中性色环境，用于准确评估材质反射
			 */
			function createEnvironment() {

				// 创建一个专门用于生成环境贴图的临时场景
				const envScene = new THREE.Scene();
				
				// 设置场景背景为纯色（浅灰色）
				// 这就是"白炉"环境：均匀、中性、无特征的光照环境
				envScene.background = new THREE.Color( COLOR );

				/**
				 * 创建PMREM（Pre-filtered Mipmapped Radiance Environment Map）生成器
				 * 这是一种高性能的环境贴图生成技术
				 * 
				 * 工作原理：
				 * 1. 将场景渲染到立方体贴图的六个面
				 * 2. 生成不同粗糙度级别的mipmap
				 * 3. 预过滤环境贴图，使其在渲染时能快速采样
				 * 
				 * 对于白炉测试，虽然环境是纯色，但使用PMREM确保一致的渲染管线
				 */
				const pmremGenerator = new THREE.PMREMGenerator( renderer );
				
				/**
				 * 从场景生成辐射环境贴图
				 * fromScene()方法：
				 * 1. 将传入的场景渲染到立方体贴图
				 * 2. 处理生成的环境贴图，使其适合用作PBR材质的环境光照
				 * 3. 返回一个包含texture属性的对象
				 */
				radianceMap = pmremGenerator.fromScene( envScene ).texture;
				
				// 释放PMREM生成器资源
				// 重要：PMREMGenerator使用大量GPU内存，使用后应立即释放
				pmremGenerator.dispose();

				// 将主场景的背景色也设为相同的浅灰色
				// 确保3D场景的背景与环境贴图颜色一致
				scene.background = envScene.background;

			}

			/**
			 * 窗口大小变化处理函数
			 * 职责：响应浏览器窗口大小变化，调整渲染设置
			 */
			function onWindowResize() {

				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机的宽高比
				camera.aspect = width / height;
				
				/**
				 * 更新相机投影矩阵
				 * 重要：更改相机参数后，必须调用此方法
				 * 否则相机不会应用新的参数，导致渲染变形
				 */
				camera.updateProjectionMatrix();

				// 更新渲染器的输出尺寸
				renderer.setSize( width, height );

				// 重新渲染场景，应用新的尺寸设置
				render();

			}

			/**
			 * 渲染函数
			 * 职责：执行实际的渲染操作
			 * 将3D场景通过相机视角渲染到画布上
			 */
			function render() {

				// 调用渲染器的render方法
				// 参数：要渲染的场景，使用的相机
				renderer.render( scene, camera );

			}

			/**
			 * 异步执行初始化流程
			 * 使用Promise链确保初始化步骤按正确顺序执行
			 * 
			 * 执行顺序：
			 * 1. init() - 初始化基础Three.js环境
			 * 2. createEnvironment() - 创建白炉环境贴图
			 * 3. createObjects() - 创建测试球体网格
			 * 4. render() - 执行首次渲染
			 * 
			 * Promise.resolve()创建一个已解决的Promise
			 * .then()链式调用确保每个步骤在前一个完成后执行
			 */
			Promise.resolve()
				.then( init )                // 步骤1：基础初始化
				.then( createEnvironment )   // 步骤2：创建环境（依赖渲染器）
				.then( createObjects )       // 步骤3：创建对象（依赖环境贴图）
				.then( render );             // 步骤4：首次渲染（依赖所有前期工作）

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