<!-- Three.js WebGPU 物理光照模型演示
🎯 核心功能概述
这是一个基于物理渲染(PBR)的WebGPU光照演示，展示了Three.js中真实世界光照模型的实现。该演示通过一个白炽灯泡照亮场景中的物体（地板、地球仪和砖块立方体），让用户可以交互式地调整光照参数，观察物理准确的光照效果。

🌟 主要技术亮点
1. WebGPU渲染技术
使用Three.js的WebGPURenderer，新一代图形API

相比WebGL提供更好的性能和现代GPU特性支持

支持计算着色器、硬件加速等高级功能

2. 物理正确的光照模型
真实世界光通量单位：使用流明(lm)作为光源强度单位

平方反比衰减：光强随距离平方衰减（decay=2），符合物理定律

照度控制：使用勒克斯(lx)作为环境光照度单位

色调映射：Reinhard色调映射算法处理HDR到LDR的转换

3. 基于物理的材质系统(PBR)
使用MeshStandardMaterial，支持金属度/粗糙度工作流

多层纹理贴图系统：

漫反射贴图（基础颜色）

法线/凹凸贴图（表面细节）

粗糙度贴图（表面光泽控制）

金属度贴图（金属/非金属区域）

4. 动态交互功能
实时参数调整：

灯泡功率：从20lm到110,000lm多种预设

环境光照：从0.0001lx（无月之夜）到50,000lx（直射阳光）

曝光控制：0-1范围可调

阴影开关：实时启用/禁用阴影

相机控制：轨道控制器支持旋转、平移、缩放

动画效果：灯泡的周期性上下浮动动画

5. 高级渲染特性
阴影映射：实时阴影生成，支持投射和接收阴影

纹理过滤：各向异性过滤(anisotropy=4)提升纹理质量

纹理包装：重复包装(wrapping)创建平铺效果

颜色管理：sRGB颜色空间支持

📁 场景组成结构
光源系统
主光源（白炽灯泡）

PointLight类型，模拟点光源

包含可视化球体网格

可调节功率（流明值）

产生动态阴影

环境光（半球光）

HemisphereLight类型

模拟天空和地面的环境反射

可调节照度（勒克斯值）

物体模型
地板：20×20米木纹地板

地球仪：直径50厘米的地球模型

砖块立方体：50×50×50厘米的砖块立方体（共3个）

材质系统
木地板材质：复合纹理（漫反射+凹凸+粗糙度）

砖块材质：砖墙纹理（漫反射+凹凸）

地球材质：地球表面+金属度贴图

灯泡材质：自发光材质

🔧 技术实现细节
核心算法
javascript
// 1. 平方反比衰减计算
bulbMat.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0);

// 2. 曝光度非线性映射
renderer.toneMappingExposure = Math.pow(params.exposure, 5.0);

// 3. 正弦动画
bulbLight.position.y = Math.cos(time) * 0.75 + 1.25;
性能优化
设备像素比适配：适应高DPI显示屏

纹理各向异性过滤：提升倾斜视角纹理质量

阴影状态管理：避免不必要的着色器重新编译

响应式设计
窗口大小变化自动调整相机和渲染器

保持正确的宽高比，避免图像失真

🎮 用户体验特性
控制面板
通过Inspector创建的GUI界面包含：

环境光照度选择下拉框

灯泡功率选择下拉框

曝光度滑动条

阴影开关复选框

交互操作
鼠标左键拖拽：旋转视角

鼠标右键拖拽：平移视角

鼠标滚轮：缩放视角

GUI控制：实时调整光照参数

🧪 物理参数参考
光照强度参考值
灯泡功率：

4W LED灯：20流明

25W白炽灯：180流明

40W白炽灯：400流明（默认）

100W白炽灯：1700流明

1000W白炽灯：110,000流明

环境照度：

无月之夜：0.0001勒克斯

满月之夜：0.5勒克斯

办公室照明：350勒克斯

日光：18,000勒克斯

直射阳光：50,000勒克斯

📊 技术架构优势
模块化设计：使用ES6模块导入，代码结构清晰

配置驱动：光照参数通过配置对象管理，易于扩展

物理准确性：使用真实世界单位和物理定律

性能优化：利用WebGPU的现代GPU特性

可维护性：良好的代码组织和详细注释

🔍 学习价值
这个演示非常适合学习以下Web3D开发概念：

Three.js基础架构和组件

WebGPU渲染管线

物理基础渲染原理

真实世界光照计算

交互式3D应用开发

性能优化技巧

🚀 扩展可能性
基于此代码可以进一步开发：

添加更多类型的光源（聚光灯、方向光等）

实现更复杂的光照模型（全局光照、环境光遮蔽）

添加后期处理效果（泛光、景深、色彩分级）

集成物理引擎实现物体交互

开发VR/AR版本 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			文档类型声明：HTML5文档
			语言设置：中文简体
		-->
		<title>Three.js WebGPU演示 - 物理光照模型</title>
		<!-- 
			字符编码：UTF-8，支持中文字符
		-->
		<meta charset="utf-8">
		<!-- 
			视口设置：响应式设计
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放
			minimum-scale=1.0: 最小缩放比例为1
			maximum-scale=1.0: 最大缩放比例为1
			这个设置适用于固定比例的3D展示
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			引入外部CSS样式表
			type="text/css": 指定MIME类型为CSS
			rel="stylesheet": 定义当前文档与链接资源的关系为样式表
			href="example.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 
			3D场景容器div
			id="container": 用于JavaScript中获取DOM元素引用
			渲染器会将canvas元素插入到这个div中
		-->
		<div id="container"></div>

		<!-- 
			信息展示面板
			id="info": 用于样式和JavaScript操作
		-->
		<div id="info">
			<!-- 
				Three.js官网链接
				target="_blank": 在新标签页打开链接
				rel="noopener": 安全属性，防止新页面访问window.opener
				class="logo-link": CSS类名，通常用于设置背景图片显示Three.js logo
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题区域 -->
			<div class="title-wrapper">
				<!-- Three.js主标题链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题：当前演示的名称 -->
				<span>物理光照模型演示</span>
			</div>

			<!-- 
				详细信息区域
				<small>标签：表示小号文字，常用于版权信息、法律文本等
			-->
			<small>
				<!-- 模型来源信息 -->
				物理精确的白炽灯泡模型由 <a href="http://clara.io" target="_blank" rel="noopener">Ben Houston</a> 创建<br />
				<!-- 场景比例说明 -->
				真实世界比例：砖块立方体尺寸为50厘米。地球仪直径为50厘米。<br/>
				<!-- 渲染技术说明 -->
				使用Reinhard色调映射和真实世界光照衰减（衰减指数=2）。
				<br/><br/>
				<!-- 操作指南 -->
				<strong>操作指南：</strong><br/>
				1. 鼠标左键拖拽：旋转视角<br/>
				2. 鼠标右键拖拽：平移视角<br/>
				3. 鼠标滚轮：缩放视角<br/>
				4. 右侧控制面板：调整光照参数
			</small>
		</div>

		<!-- 
			导入映射（Import Map）
			type="importmap": HTML5新特性，用于定义模块导入的映射关系
			作用：将模块标识符映射到实际URL，简化import语句
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			type="module": 表示这是一个ES6模块，支持import/export语法
			模块具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// ============================================
			// 模块导入部分
			// ============================================
			
			// 导入Three.js的WebGPU版本
			// * as THREE: 将所有导出内容命名为THREE对象
			import * as THREE from 'three/webgpu';

			// 导入调试检查器（Inspector）
			// Inspector：一个可视化调试工具，可以查看场景图、材质属性等
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器（OrbitControls）
			// 功能：允许用户通过鼠标拖拽、滚轮来控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ============================================
			// 全局变量声明部分
			// ============================================
			
			// 核心Three.js对象
			let camera;      // 相机对象：定义观察者的视角和投影方式
			let scene;       // 场景对象：包含所有要渲染的3D对象（网格、灯光等）
			let renderer;    // 渲染器对象：负责将3D场景渲染到2D画布上
			
			// 灯光相关对象
			let bulbLight;   // 灯泡点光源：模拟白炽灯泡的点光源
			let bulbMat;     // 灯泡材质：灯泡自身的自发光材质
			let hemiLight;   // 半球光：模拟环境光照（天空和地面光）
			
			// 材质对象
			let ballMat;     // 地球仪材质
			let cubeMat;     // 砖块材质
			let floorMat;    // 地板材质
			
			// 状态跟踪变量
			let previousShadowMap = false; // 记录上一次阴影启用状态，用于检测变化

			// ============================================
			// 光照参数配置
			// ============================================
			
			/*
				灯泡光通量配置（单位：流明）
				光通量：光源每秒钟发出的可见光总量
				参考：http://www.power-sure.com/lumens.htm
				
				结构说明：
				key: 显示在UI中的文本标签
				value: 对应的光通量数值（流明）
			*/
			const bulbLuminousPowers = {
				'110000流明 (1000W白炽灯)': 110000,  // 高功率灯泡，非常明亮
				'3500流明 (300W卤素灯)': 3500,      // 卤素灯，常用于摄影
				'1700流明 (100W白炽灯)': 1700,      // 传统白炽灯
				'800流明 (60W白炽灯)': 800,        // 中等亮度灯泡
				'400流明 (40W白炽灯)': 400,        // 默认值，普通家用灯泡
				'180流明 (25W白炽灯)': 180,        // 低亮度灯泡
				'20流明 (4WLED灯)': 20,           // 小型LED灯
				'关闭': 0                         // 关闭灯泡
			};

			/*
				半球光照度配置（单位：勒克斯）
				照度：单位面积上接收到的光通量
				参考：https://en.wikipedia.org/wiki/Lux
				
				常见场景的照度参考：
				- 无月之夜：0.0001 lx
				- 办公室：350 lx
				- 日光：18000 lx
				- 直射阳光：50000 lx
			*/
			const hemiLuminousIrradiances = {
				'0.0001勒克斯 (无月之夜)': 0.0001,     // 极暗环境
				'0.002勒克斯 (夜光)': 0.002,         // 夜晚微光
				'0.5勒克斯 (满月之夜)': 0.5,         // 月光照明
				'3.4勒克斯 (城市暮光)': 3.4,         // 黄昏时分
				'50勒克斯 (客厅照明)': 50,           // 室内照明
				'100勒克斯 (阴天室内)': 100,         // 阴天室内
				'350勒克斯 (办公室)': 350,           // 标准办公室
				'400勒克斯 (日出/日落)': 400,        // 日出日落时分
				'1000勒克斯 (阴天室外)': 1000,       // 阴天室外
				'18000勒克斯 (日光)': 18000,        // 白天室外（非直射）
				'50000勒克斯 (直射阳光)': 50000     // 晴天正午
			};

			// ============================================
			// 用户可调节参数对象
			// ============================================
			
			const params = {
				shadows: true,       // 阴影开关：是否启用阴影渲染
				exposure: 0.68,      // 曝光度：控制整体画面亮度，范围0-1
				// 默认灯泡功率：取灯泡配置的第5个选项（400流明）
				bulbPower: Object.keys( bulbLuminousPowers )[ 4 ],
				// 默认环境光照度：取环境光配置的第1个选项（0.0001勒克斯）
				hemiIrradiance: Object.keys( hemiLuminousIrradiances )[ 0 ]
			};

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

			// ============================================
			// 函数定义部分
			// ============================================

			/**
			 * 初始化函数 - Three.js场景的核心设置
			 * 功能：创建场景、相机、灯光、几何体、材质、渲染器等所有必要组件
			 * 执行时机：页面加载完成后立即执行
			 */
			function init() {
				// 获取页面中id为"container"的DOM元素
				// 这个div将作为Three.js渲染器的容器
				const container = document.getElementById( 'container' );

				// ============================================
				// 1. 相机设置
				// ============================================
				
				/*
					创建透视相机（PerspectiveCamera）
					参数说明：
					fov: 50 - 视野角度（Field of View），单位度，越大看到范围越广
					aspect: window.innerWidth / window.innerHeight - 宽高比
					near: 0.1 - 近裁剪平面，距离相机多近的物体开始渲染
					far: 100 - 远裁剪平面，距离相机多远的物体停止渲染
				*/
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
				
				// 设置相机初始位置
				// 将相机放置在场景的左后方稍高位置，提供良好的观察角度
				camera.position.x = -4;  // X轴：向左4个单位
				camera.position.z = 4;   // Z轴：向后4个单位（Three.js中Z轴正向为屏幕内）
				camera.position.y = 2;   // Y轴：向上2个单位

				// ============================================
				// 2. 场景创建
				// ============================================
				
				/*
					创建场景对象
					场景是Three.js中所有可渲染对象的容器
					包括：网格（Mesh）、灯光（Light）、相机（Camera）等
				*/
				scene = new THREE.Scene();

				// ============================================
				// 3. 灯泡光源创建
				// ============================================
				
				/*
					灯泡光源由两部分组成：
						1. 点光源（PointLight）：提供光照
						2. 球体网格（Mesh）：可视化显示灯泡本身
				*/
				
				// 3.1 创建灯泡几何体
				// SphereGeometry参数：半径(0.02米=2厘米), 水平分段数(16), 垂直分段数(8)
				const bulbGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );
				
				/*
					3.2 创建点光源
					PointLight参数：
						color: 0xffee88 - 光源颜色（暖黄色，模拟白炽灯）
						intensity: 1 - 光源强度（初始值，后面会根据参数调整）
						distance: 100 - 光照衰减距离，超过此距离光强为0
						decay: 2 - 衰减指数，2表示遵循物理上的平方反比定律
				*/
				bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
				
				/*
					3.3 创建灯泡材质
					MeshStandardMaterial是PBR（基于物理的渲染）材质
					参数：
						emissive: 0xffffee - 自发光颜色（浅黄色）
						emissiveIntensity: 1 - 自发光强度
						color: 0x000000 - 基础颜色为黑色（因为灯泡主要靠自发光）
				*/
				bulbMat = new THREE.MeshStandardMaterial( {
					emissive: 0xffffee,
					emissiveIntensity: 1,
					color: 0x000000
				} );
				
				// 3.4 创建灯泡网格并添加到光源中
				// 这样灯泡网格会跟随光源一起移动
				bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
				
				// 3.5 设置光源位置
				// 灯泡位于场景中心上方2米处
				bulbLight.position.set( 0, 2, 0 );
				
				// 3.6 启用光源阴影投射
				// 这个光源会产生阴影
				bulbLight.castShadow = true;
				
				// 3.7 将光源添加到场景中
				scene.add( bulbLight );

				// ============================================
				// 4. 环境光（半球光）创建
				// ============================================
				
				/*
					HemisphereLight（半球光）模拟环境光照
					参数：
						skyColor: 0xddeeff - 天空颜色（浅蓝色）
						groundColor: 0x0f0e0d - 地面颜色（深灰色）
						intensity: 0.02 - 初始强度（较暗）
					半球光特点：从天空到地面颜色渐变，适合模拟室外环境光
				*/
				hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
				scene.add( hemiLight );

				// ============================================
				// 5. 材质创建和纹理加载
				// ============================================
				
				/*
					5.1 地板材质
					使用PBR材质系统，支持多种贴图通道
				*/
				floorMat = new THREE.MeshStandardMaterial( {
					roughness: 0.8,      // 粗糙度：0（完全光滑）到1（完全粗糙）
					color: 0xffffff,     // 基础颜色：白色
					metalness: 0.2,      // 金属度：0（非金属）到1（金属）
					bumpScale: 1         // 凹凸贴图强度缩放
				} );
				
				// 创建纹理加载器实例
				// TextureLoader用于异步加载图片纹理
				const textureLoader = new THREE.TextureLoader();
				
				/*
					5.1.1 加载地板漫反射贴图
					漫反射贴图：定义表面的基础颜色
				*/
				textureLoader.load( 'textures/hardwood2_diffuse.jpg', function ( map ) {
					// 设置纹理包装方式为重复
					map.wrapS = THREE.RepeatWrapping;     // S方向（U方向，水平）
					map.wrapT = THREE.RepeatWrapping;     // T方向（V方向，垂直）
					
					// 设置各向异性过滤
					// 各向异性过滤：改善倾斜角度观察纹理时的质量
					map.anisotropy = 4;                   // 值越高质量越好，但性能开销越大
					
					// 设置纹理重复次数
					// 10x24次重复：创建木地板拼接效果
					map.repeat.set( 10, 24 );
					
					// 设置颜色空间为sRGB
					// sRGB颜色空间：符合人眼感知的非线性颜色空间
					map.colorSpace = THREE.SRGBColorSpace;
					
					// 将纹理设置为材质的漫反射贴图
					floorMat.map = map;
					
					// 标记材质需要更新
					// Three.js中修改材质属性后需要手动标记更新
					floorMat.needsUpdate = true;
				} );
				
				/*
					5.1.2 加载地板凹凸贴图
					凹凸贴图：通过灰度图模拟表面凹凸，不改变几何体顶点
				*/
				textureLoader.load( 'textures/hardwood2_bump.jpg', function ( map ) {
					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.set( 10, 24 );
					floorMat.bumpMap = map;               // 应用为凹凸贴图
					floorMat.needsUpdate = true;
				} );
				
				/*
					5.1.3 加载地板粗糙度贴图
					粗糙度贴图：定义表面不同区域的粗糙程度（灰度图，白色=粗糙，黑色=光滑）
				*/
				textureLoader.load( 'textures/hardwood2_roughness.jpg', function ( map ) {
					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.set( 10, 24 );
					floorMat.roughnessMap = map;          // 应用为粗糙度贴图
					floorMat.needsUpdate = true;
				} );

				/*
					5.2 砖块材质（用于立方体）
				*/
				cubeMat = new THREE.MeshStandardMaterial( {
					roughness: 0.7,
					color: 0xffffff,
					bumpScale: 1,
					metalness: 0.2
				} );
				
				// 5.2.1 加载砖块漫反射贴图
				textureLoader.load( 'textures/brick_diffuse.jpg', function ( map ) {
					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.set( 1, 1 );               // 不重复，显示完整砖墙纹理
					map.colorSpace = THREE.SRGBColorSpace;
					cubeMat.map = map;
					cubeMat.needsUpdate = true;
				} );
				
				// 5.2.2 加载砖块凹凸贴图
				textureLoader.load( 'textures/brick_bump.jpg', function ( map ) {
					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.set( 1, 1 );
					cubeMat.bumpMap = map;
					cubeMat.needsUpdate = true;
				} );

				/*
					5.3 地球材质（用于球体）
					地球材质使用金属度贴图，模拟海洋（高金属度）和陆地（低金属度）
				*/
				ballMat = new THREE.MeshStandardMaterial( {
					color: 0xffffff,     // 基础颜色
					roughness: 0.5,      // 中等粗糙度
					metalness: 1.0       // 高金属度（配合金属度贴图使用）
				} );
				
				// 5.3.1 加载地球表面贴图（含大气层效果）
				textureLoader.load( 'textures/planets/earth_atmos_2048.jpg', function ( map ) {
					map.anisotropy = 4;                    // 各向异性过滤
					map.colorSpace = THREE.SRGBColorSpace; // sRGB颜色空间
					ballMat.map = map;                     // 设置为漫反射贴图
					ballMat.needsUpdate = true;
				} );
				
				/*
					5.3.2 加载地球金属度/高光贴图
					这个贴图实际上作为金属度贴图使用：
						- 海洋区域：白色（高金属度，高反射）
						- 陆地区域：黑色（低金属度，漫反射为主）
				*/
				textureLoader.load( 'textures/planets/earth_specular_2048.jpg', function ( map ) {
					map.anisotropy = 4;
					map.colorSpace = THREE.SRGBColorSpace;
					ballMat.metalnessMap = map;           // 设置为金属度贴图
					ballMat.needsUpdate = true;
				} );

				// ============================================
				// 6. 几何体创建和场景布置
				// ============================================
				
				/*
					6.1 创建地板
					PlaneGeometry参数：宽度(20米), 高度(20米)
				*/
				const floorGeometry = new THREE.PlaneGeometry( 20, 20 );
				const floorMesh = new THREE.Mesh( floorGeometry, floorMat );
				floorMesh.receiveShadow = true;           // 重要：地板接收阴影
				floorMesh.rotation.x = - Math.PI / 2.0;   // 旋转-90度，使平面水平（默认是竖直的）
				scene.add( floorMesh );

				/*
					6.2 创建地球仪球体
					SphereGeometry参数：半径(0.25米=25厘米), 水平分段(32), 垂直分段(32)
					分段数越高球体越光滑，但性能开销越大
				*/
				const ballGeometry = new THREE.SphereGeometry( 0.25, 32, 32 );
				const ballMesh = new THREE.Mesh( ballGeometry, ballMat );
				ballMesh.position.set( 1, 0.25, 1 );      // 位置：右前方，离地0.25米（半径）
				ballMesh.rotation.y = Math.PI;            // 旋转180度，调整贴图方向
				ballMesh.castShadow = true;               // 重要：球体投射阴影
				scene.add( ballMesh );

				/*
					6.3 创建砖块立方体
					BoxGeometry参数：宽度(0.5米), 高度(0.5米), 深度(0.5米)
				*/
				const boxGeometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
				
				// 6.3.1 第一个立方体
				const boxMesh = new THREE.Mesh( boxGeometry, cubeMat );
				boxMesh.position.set( -0.5, 0.25, -1 );   // 位置：左后方，离地0.25米（半高）
				boxMesh.castShadow = true;                // 投射阴影
				scene.add( boxMesh );

				// 6.3.2 第二个立方体（远处）
				const boxMesh2 = new THREE.Mesh( boxGeometry, cubeMat );
				boxMesh2.position.set( 0, 0.25, -5 );     // 更远的位置
				boxMesh2.castShadow = true;
				scene.add( boxMesh2 );

				// 6.3.3 第三个立方体（右侧）
				const boxMesh3 = new THREE.Mesh( boxGeometry, cubeMat );
				boxMesh3.position.set( 7, 0.25, 0 );      // 右侧远处
				boxMesh3.castShadow = true;
				scene.add( boxMesh3 );

				// ============================================
				// 7. 渲染器设置
				// ============================================
				
				/*
					创建WebGPU渲染器
					WebGPURenderer是Three.js的新一代渲染器
					相比WebGLRenderer有更好的性能和新特性支持
				*/
				renderer = new THREE.WebGPURenderer();
				
				// 设置设备像素比
				// window.devicePixelRatio：物理像素与CSS像素的比值
				// 高DPI屏幕（如Retina）需要更高的像素比
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环
				// setAnimationLoop代替了原来的requestAnimationFrame
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 启用阴影映射
				// Three.js使用阴影贴图技术生成阴影
				renderer.shadowMap.enabled = true;
				
				/*
					设置色调映射（Tone Mapping）
					ReinhardToneMapping：一种常用的色调映射算法
					作用：将HDR（高动态范围）颜色转换为LDR（低动态范围）显示
					模拟人眼对高亮度区域的适应
				*/
				renderer.toneMapping = THREE.ReinhardToneMapping;
				
				// 创建调试检查器并附加到渲染器
				// Inspector提供GUI界面，可以查看和修改场景中的对象属性
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到容器div中
				// renderer.domElement就是canvas元素
				container.appendChild( renderer.domElement );

				// ============================================
				// 8. 交互控制设置
				// ============================================
				
				/*
					创建轨道控制器（OrbitControls）
					参数：
						camera: 要控制的相机对象
						renderer.domElement: 事件监听的DOM元素（canvas）
					功能：鼠标左键旋转、右键平移、滚轮缩放
				*/
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.minDistance = 1;    // 最小缩放距离：相机不能比1个单位更近
				controls.maxDistance = 20;   // 最大缩放距离：相机不能比20个单位更远

				// ============================================
				// 9. 事件监听器设置
				// ============================================
				
				// 窗口大小变化事件监听
				// 当浏览器窗口大小变化时，调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

				// ============================================
				// 10. GUI控制面板创建
				// ============================================
				
				/*
					使用Inspector创建参数控制面板
					createParameters：创建参数分组
					'设置'：分组标题
				*/
				const gui = renderer.inspector.createParameters( '设置' );
				
				// 添加环境光照度下拉选择
				// 参数：对象(params)，属性名('hemiIrradiance')，选项数组
				gui.add( params, 'hemiIrradiance', Object.keys( hemiLuminousIrradiances ) );
				
				// 添加灯泡功率下拉选择
				gui.add( params, 'bulbPower', Object.keys( bulbLuminousPowers ) );
				
				// 添加曝光度滑块控制
				// 参数：对象(params)，属性名('exposure')，最小值(0)，最大值(1)
				gui.add( params, 'exposure', 0, 1 );
				
				// 添加阴影开关
				gui.add( params, 'shadows' );
			}

			/**
			 * 窗口大小变化处理函数
			 * 功能：当浏览器窗口大小改变时，调整相机和渲染器设置
			 * 触发条件：窗口resize事件
			 */
			function onWindowResize() {
				// 更新相机宽高比
				// 保持相机视野与窗口比例一致，避免图像拉伸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 修改相机参数后必须调用此方法使更改生效
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸
				// 使canvas大小与窗口大小保持一致
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 功能：每一帧渲染时调用，更新场景状态和渲染画面
			 * 调用机制：通过renderer.setAnimationLoop(animate)设置
			 * 帧率：通常是60fps（取决于浏览器和硬件）
			 */
			function animate() {
				// ============================================
				// 1. 更新渲染器设置
				// ============================================
				
				/*
					更新色调映射曝光度
					Math.pow(params.exposure, 5.0)：使用幂函数转换
					目的：提供更精细的亮度控制，在低曝光值时变化平缓，高曝光值时变化剧烈
				*/
				renderer.toneMappingExposure = Math.pow( params.exposure, 5.0 );
				
				// 更新阴影设置
				// 根据用户的选择启用或禁用阴影
				renderer.shadowMap.enabled = params.shadows;
				bulbLight.castShadow = params.shadows;

				// ============================================
				// 2. 阴影状态变化检测
				// ============================================
				
				/*
					如果阴影启用状态发生变化
					需要重新编译材质着色器
					这是因为阴影需要特殊的着色器代码
				*/
				if ( params.shadows !== previousShadowMap ) {
					// 标记所有材质需要更新
					ballMat.needsUpdate = true;
					cubeMat.needsUpdate = true;
					floorMat.needsUpdate = true;
					
					// 更新阴影状态记录
					previousShadowMap = params.shadows;
				}

				// ============================================
				// 3. 更新光源参数
				// ============================================
				
				// 更新灯泡功率
				// 根据用户选择从配置对象中获取对应的光通量值
				bulbLight.power = bulbLuminousPowers[ params.bulbPower ];
				
				/*
					计算灯泡材质的自发光强度
					公式：光源强度 / (距离²)
					
					解释：
						- bulbLight.intensity：当前光源的强度
						- Math.pow(0.02, 2.0)：灯泡半径的平方（0.02米）
						- 目的：根据平方反比定律，计算灯泡表面的辐照度
						- 辐照度用于设置材质的自发光强度，使灯泡看起来在发光
				*/
				bulbMat.emissiveIntensity = bulbLight.intensity / Math.pow( 0.02, 2.0 );

				// 更新半球光强度
				// 根据用户选择从配置对象中获取对应的照度值
				hemiLight.intensity = hemiLuminousIrradiances[ params.hemiIrradiance ];
				
				// ============================================
				// 4. 动画效果
				// ============================================
				
				/*
					创建基于时间的动画
					Date.now()：返回当前时间戳（毫秒）
					* 0.0005：将时间转换为秒级并缩放，控制动画速度
				*/
				const time = Date.now() * 0.0005;
				
				/*
					使灯泡做上下浮动动画
					公式：Math.cos(time) * 0.75 + 1.25
					
					解释：
						- Math.cos(time)：余弦函数，值在-1到1之间周期性变化
						- * 0.75：振幅，控制上下浮动的幅度（0.75米）
						- + 1.25：垂直偏移，使灯泡在1.25米高度附近浮动
						- 最终范围：0.5米到2米之间（1.25±0.75）
				*/
				bulbLight.position.y = Math.cos( time ) * 0.75 + 1.25;

				// ============================================
				// 5. 渲染场景
				// ============================================
				
				/*
					核心渲染调用
					参数：
						scene：要渲染的场景对象
						camera：使用的相机对象
					功能：将3D场景通过相机视角渲染到canvas上
				*/
				renderer.render( scene, camera );
			}
		</script>
	</body>
</html>