<!-- 代码功能与技术点详细分析
🎯 一、核心功能概述
1. 可视化效果
动态心形粒子系统：1000个彩色二十面体沿着心形路径分布和动画

三重动画叠加：

路径分布：粒子按参数化位置沿心形路径排列

垂直波动：每个粒子在Y轴上进行独立的正弦波上下移动

激活波效果：一个"放大波"沿着心形路径循环移动，经过的粒子会被放大

视觉层次：随机颜色、动态背景、环境光照共同创造丰富的视觉体验

2. 交互功能
全3D导航：鼠标拖拽旋转、滚轮缩放、右键平移

实时调试：按H键打开Inspector面板查看场景结构和性能

响应式设计：自动适应不同屏幕尺寸和分辨率

🔧 二、主要技术点详解
1. WebGPU渲染技术
javascript
renderer = new THREE.WebGPURenderer( { antialias: true } );
现代图形API：取代WebGL，提供更好的性能和多线程支持

原生GPU计算：所有动画在GPU上并行处理，不阻塞主线程

异步初始化：await renderer.init()确保WebGPU上下文正确建立

2. 实例化渲染（Instancing）
javascript
mesh.count = count;  // 设置实例数量
const positionAttribute = new THREE.InstancedBufferAttribute(...);
性能优化：1次绘制调用渲染1000个对象（传统需要1000次）

数据组织：通过InstancedBufferAttribute将实例数据上传到GPU

GPU内存效率：顶点数据共享，实例数据独立存储

3. TSL着色器语言（Three.js Shader Language）
javascript
import { abs, add, instancedBufferAttribute, sin, time } from 'three/tsl';
声明式编程：用JavaScript语法编写GPU着色器

实时编译：运行时编译为WebGPU Shader代码

节点系统：material.positionNode = add(positionLocal.mul(s1), offset);

核心TSL节点流程：
text
原始位置 → 本地缩放 → 添加偏移 → 最终位置
   ↓           ↓           ↓
positionLocal × s1 + (instancePosition + 波动)
4. 贝塞尔曲线路径系统
javascript
const path = new THREE.Path().moveTo(...).bezierCurveTo(...);
数学基础：使用三次贝塞尔曲线（4个控制点）

参数化采样：path.getPointAt(t, v)均匀获取路径点

心形公式：通过6段贝塞尔曲线精确构造心形

5. 时间与动画系统
javascript
const localTime = instanceTime.add(time);
const modTime = mod(time.mul(0.4), 1);
全局时间：time节点自动递增（与requestAnimationFrame同步）

实例时间：instanceTime存储每个粒子在路径上的固定位置

调制时间：modTime创建0-1循环的"激活波"

距离计算：abs(instanceTime - modTime)计算粒子与波的距离

6. 环形距离计算（Wrap-around Distance）
javascript
const wrapDist = select(dist.greaterThan(0.5), dist.oneMinus(), dist);
环形路径处理：心形是闭合路径，0和1是相邻点

距离环绕：当距离>0.5时，从另一方向计算更短距离

数学原理：在环形空间中，两点间距离为min(d, 1-d)

7. 渐变缩放效果
javascript
const s1 = select(wrapDist.greaterThan(0.1), float(1), 
                 wrapDist.remap(0, 0.1, 3, 1));
条件缩放：距离>0.1时正常大小，距离≤0.1时渐变放大

重映射函数：remap(0, 0.1, 3, 1)将[0,0.1]线性映射到[3,1]

视觉反馈：创建粒子被"激活波"经过时的膨胀效果

8. 颜色与光照系统
javascript
c.setHSL(0.75 + (Math.random() * 0.25), 1, 0.4);
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04);
HSL颜色模型：色相(H)在0.75-1.0（紫红色系），饱和度(S)=1，亮度(L)=0.4

环境贴图：使用RoomEnvironment生成真实光照和反射

PMREM技术：预过滤环境贴图，优化实时反射性能

9. 响应式与性能优化
javascript
mesh.frustumCulled = false;
renderer.setPixelRatio(window.devicePixelRatio);
视锥体裁剪：禁用自动裁剪，避免错误剔除（粒子分布范围大）

高DPI适配：自动适配Retina等高分辨率屏幕

抗锯齿：开启MSAA或多重采样抗锯齿

📊 三、技术架构层次
底层（GPU层）
WebGPU API：与GPU直接通信

着色器程序：TSL编译的顶点/片元着色器

缓冲区管理：顶点缓冲区、实例缓冲区、统一缓冲区

中间层（Three.js框架）
场景图管理：Scene、Camera、Mesh层级结构

资源管理：Geometry、Material、Texture

动画系统：requestAnimationFrame循环

高层（应用逻辑）
路径生成：贝塞尔曲线数学计算

实例数据：位置、颜色、时间、种子生成

用户交互：OrbitControls事件处理

🚀 四、性能特征
CPU端
低开销：每帧只更新控制器和触发渲染

初始化一次性：所有实例数据预计算，不每帧更新

事件驱动：只在用户交互或窗口调整时计算

GPU端
高度并行：1000个实例的动画在GPU上同时计算

着色器优化：toConst()标记不变节点，编译器优化

批处理渲染：所有实例一次提交，最小化绘制调用

🎨 五、视觉效果实现机制
1. 粒子分布算法
javascript
// 均匀分布 + 随机偏移
path.getPointAt(i/count, v);  // 基础位置
v.x += (0.5 - Math.random()); // 随机散布
2. 波动动画原理
text
Y位置 = 基础Y + sin(时间 + 随机种子) × 0.25
相位差异：每个粒子的随机种子决定波动起始相位

振幅控制：0.25限制波动范围，不破坏心形形状

3. 激活波效果
text
if(粒子在波的0.1距离内):
    缩放 = 从3到1线性过渡
else:
    缩放 = 1
阈值控制：0.1的距离阈值决定影响范围

平滑过渡：线性插值避免突兀变化

🔍 六、调试与开发支持
内置工具
Inspector面板：场景树、属性编辑器、性能监控

实时修改：可以在运行时调整材质参数

着色器查看：查看编译后的WebGPU Shader代码

开发提示
模块化结构：清晰分离初始化、动画、事件处理

异步流程：正确处理WebGPU的异步初始化

错误处理：虽然没有显式try-catch，但结构便于扩展

🌟 七、创新点总结
TSL应用：将复杂着色器逻辑用JavaScript风格编写

环形距离算法：优雅处理闭合路径的距离计算

多重动画叠加：路径+波动+激活波的三重效果

性能与美观平衡：在保证60fps的同时实现丰富视觉效果

完整交互体验：从渲染到交互的全套3D Web应用 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上
			这里修改为中文标题，表明这是一个基于three.js WebGPU的实例路径动画示例
		-->
		<title>Three.js WebGPU - 实例路径动画</title>
		<!-- 
			字符编码设置：UTF-8编码确保中文字符能正确显示
		-->
		<meta charset="utf-8">
		<!-- 
			移动端视口设置：
			width=device-width - 视口宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放（为了保持3D场景的稳定性）
			minimum-scale=1.0, maximum-scale=1.0 - 固定缩放比例为1.0
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			外部CSS样式表链接：
			rel="stylesheet" - 指定为样式表
			href="example.css" - 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			页面信息展示区域：
			id="info" - 用于CSS样式和JavaScript操作的标识
			这个区域展示示例的基本信息和链接
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接：
				class="logo-link" - 用于CSS样式设置，通常用作logo背景
				target="_blank" - 在新标签页中打开链接
				rel="noopener" - 安全设置，防止新页面访问window.opener
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 
				标题包装器：包含主标题和副标题
				class="title-wrapper" - 用于样式布局
			-->
			<div class="title-wrapper">
				<!-- 主标题链接：指向Three.js官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题：本示例的具体名称 -->
				<span>实例路径动画</span>
			</div>

			<!-- 
				示例描述文字：
				<small>标签表示小号字体，用于辅助说明
				这里描述了本示例的核心功能
			-->
			<small>
				本示例展示了如何在Three.js中使用WebGPU渲染器，
				沿着预定义的心形路径创建和动画化大量实例化对象。
				每个实例都有独立的颜色和动画效果，形成一个动态的心形图案。
			</small>
			
			<!-- 添加更多说明信息 -->
			<div class="features" style="margin-top: 50px;">
				<small>
					功能特点：<br>
					1. 使用WebGPU进行高性能渲染<br>
					2. 实例化渲染1000个二十面体<br>
					3. TSL着色器语言实现复杂动画<br>
					4. 交互式轨道控制器<br>
					5. 响应式设计适配不同屏幕
				</small>
			</div>
			
			<!-- 操作提示 -->
			<div class="tips">
				<small>
					操作提示：<br>
					• 鼠标拖拽：旋转视角<br>
					• 鼠标滚轮：缩放场景<br>
					• 右键拖拽：平移视图<br>
					• 按H键：打开调试面板
				</small>
			</div>
		</div>

		<!-- 
			导入映射配置 (Import Maps)：
			现代JavaScript模块化方案，用于映射模块标识符到实际URL
			允许在浏览器中直接使用类似Node.js的导入语法
		-->
		<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>

		<!-- 
			主脚本模块：
			type="module" 表示这是一个ES6模块，支持import/export语法
			模块具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">

			// ==================== 模块导入部分 ====================
			// 导入Three.js核心库（WebGPU版本）
			import * as THREE from 'three/webgpu';

			// 导入Three.js附加组件
			// OrbitControls: 轨道控制器，用于鼠标控制相机旋转、缩放和平移
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// RoomEnvironment: 预制的房间环境，用于生成环境贴图
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			// Inspector: 调试检查器，用于开发时查看场景结构、性能等信息
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入TSL (Three.js着色器语言) 函数
			// 这些函数将在GPU着色器中执行，用于顶点和片元处理
			import { 
				abs,      // 绝对值函数
				add,      // 加法运算
				instancedBufferAttribute, // 实例化缓冲区属性
				positionLocal, // 本地顶点位置
				mod,      // 取模运算
				time,     // 全局时间变量（自动更新）
				sin,      // 正弦函数
				vec3,     // 三维向量构造函数
				select,   // 条件选择函数（类似三目运算符）
				float,    // 浮点数构造函数
				screenUV, // 屏幕UV坐标（0-1范围）
				color     // 颜色构造函数
			} from 'three/tsl';

			// ==================== 全局变量声明 ====================
			// 声明将在整个模块中使用的变量
			let camera;    // 相机对象（观察场景的视角）
			let scene;     // 场景对象（包含所有3D对象）
			let renderer;  // 渲染器对象（负责将3D场景绘制到2D画布）
			let controls;  // 控制器对象（用户交互控制）

			// 常量定义：要创建的实例数量
			// 使用const声明，因为实例数量在运行时不会改变
			const count = 1000;  // 1000个实例化对象

			// ==================== 初始化调用 ====================
			// 页面加载后立即调用初始化函数
			// 注意：init函数被标记为async，因为它包含异步操作
			init();

			// ==================== 主初始化函数 ====================
			// async关键字表示这是一个异步函数，内部可以使用await等待Promise
			async function init() {

				// ---------- 1. 创建和设置相机 ----------
				// 使用透视相机（Perspective Camera），模拟人眼看到的3D效果
				camera = new THREE.PerspectiveCamera(
					60,                         // 视野角度（Field of View），单位：度
					window.innerWidth / window.innerHeight, // 宽高比（根据窗口尺寸计算）
					0.01,                       // 近裁剪面（Near Clipping Plane），相机能看到的最小距离
					100                         // 远裁剪面（Far Clipping Plane），相机能看到的最近距离
				);
				// 设置相机初始位置：沿Z轴正方向移动15个单位
				// 在Three.js坐标系中：X轴向右，Y轴向上，Z轴朝向观察者
				camera.position.z = 15;

				// ---------- 2. 创建和设置场景 ----------
				// Scene对象是所有3D对象的容器，包括网格、灯光、相机等
				scene = new THREE.Scene();
				
				// 设置场景背景：使用TSL节点创建动态渐变背景
				// 这个背景效果是通过着色器程序实时计算的，不是静态图片
				scene.backgroundNode = screenUV
					.distance( .5 )          // 计算每个像素到屏幕中心(0.5,0.5)的距离
					.remap( 0, 0.65 )        // 将距离值从[0,0.65]范围重新映射到[0,1]
					.mix(                    // 混合两种颜色
						color( 0x94254c ),   // 紫红色 (#94254c)
						color( 0x000000 )    // 黑色
					);

				// ---------- 3. 创建心形路径 ----------
				// 定义路径的参考点坐标
				const x = 0, y = 0;
				
				// 创建Path对象并绘制心形
				// 心形曲线通过多个贝塞尔曲线段连接而成
				const path = new THREE.Path()
					// 从起点开始（心形左上角内侧）
					.moveTo( x - 2.5, y - 2.5 )
					
					// 第一段曲线：左上角到顶部左侧
					// 贝塞尔曲线需要4个点：起点、起点控制点、终点控制点、终点
					// 这里起点和起点控制点相同，创建的是一个平滑连接
					.bezierCurveTo( 
						x - 2.5, y - 2.5,  // 起点控制点（与起点相同）
						x - 2, y,          // 终点控制点
						x, y               // 终点（心形顶部中心）
					)
					
					// 第二段曲线：顶部左侧到顶部右侧
					.bezierCurveTo( 
						x + 3, y,          // 控制点1
						x + 3, y - 3.5,    // 控制点2
						x + 3, y - 3.5     // 终点（心形右上角）
					)
					
					// 第三段曲线：右上角到心形右侧凹陷处
					.bezierCurveTo( 
						x + 3, y - 5.5,    // 控制点1
						x + 1, y - 7.7,    // 控制点2
						x - 2.5, y - 9.5   // 终点（心形底部尖角）
					)
					
					// 第四段曲线：底部尖角到左下角
					.bezierCurveTo( 
						x - 6, y - 7.7,    // 控制点1
						x - 8, y - 5.5,    // 控制点2
						x - 8, y - 3.5     // 终点（心形左下角）
					)
					
					// 第五段曲线：左下角到顶部左侧
					.bezierCurveTo( 
						x - 8, y - 3.5,    // 控制点1
						x - 8, y,          // 控制点2
						x - 5, y           // 终点（心形左上角外侧）
					)
					
					// 第六段曲线：回到起点，闭合心形
					.bezierCurveTo( 
						x - 3.5, y,        // 控制点1
						x - 2.5, y - 2.5,  // 控制点2
						x - 2.5, y - 2.5   // 终点（与起点相同，闭合路径）
					);

				// ---------- 4. 创建实例化几何体和材质 ----------
				// IcosahedronGeometry: 二十面体几何体，由20个等边三角形面组成
				// 参数0.1表示半径，这里创建的是较小的几何体
				const geometry = new THREE.IcosahedronGeometry( 0.1 );
				
				// MeshStandardNodeMaterial: 基于物理的标准材质（节点版本）
				// 节点材质允许使用TSL着色器语言编写自定义着色逻辑
				const material = new THREE.MeshStandardNodeMaterial();

				// 创建网格对象，将几何体和材质组合起来
				const mesh = new THREE.Mesh( geometry, material );
				
				// 设置网格的整体位置偏移（所有实例共享这个偏移）
				mesh.position.set( 2.5, 5, 0 );
				
				// 关键设置：指定实例数量
				// 这告诉Three.js这个网格应该被渲染count次，每次使用不同的实例数据
				mesh.count = count;
				
				// 禁用视锥体裁剪
				// 通常Three.js会自动剔除相机视野外的对象以提高性能
				// 这里禁用是因为实例可能分布在较大范围，裁剪计算可能不准确
				mesh.frustumCulled = false;
				
				// 将网格添加到场景中
				scene.add( mesh );

				// ---------- 5. 生成实例数据 ----------
				// 创建临时对象用于计算，避免在循环中反复创建新对象
				const v = new THREE.Vector3();  // 用于存储3D位置
				const c = new THREE.Color();    // 用于存储颜色值

				// 声明数组存储实例数据
				const positions = [];  // 位置数组：[x1, y1, z1, x2, y2, z2, ...]
				const times = [];      // 时间参数数组：每个实例在路径上的参数化位置(0-1)
				const seeds = [];      // 随机种子数组：为每个实例生成不同的动画效果
				const colors = [];     // 颜色数组：[r1, g1, b1, r2, g2, b2, ...]

				// 循环生成每个实例的数据
				for ( let i = 0; i < count; i ++ ) {

					// 计算当前实例在路径上的参数化位置
					// i/count 将索引转换为0到1之间的值
					const t = i / count;
					
					// 根据参数t获取路径上的对应点
					// getPointAt方法会在路径上均匀采样
					path.getPointAt( t, v );

					// 为每个实例添加随机偏移，使它们不完全在路径上
					// 0.5 - Math.random() 生成-0.5到0.5之间的随机值
					v.x += ( 0.5 - Math.random() );  // X轴随机偏移
					v.y += ( 0.5 - Math.random() );  // Y轴随机偏移
					v.z = ( 0.5 - Math.random() );   // Z轴随机偏移（完全随机，不基于路径）

					// 将位置坐标添加到数组
					positions.push( v.x, v.y, v.z );
					
					// 存储时间参数
					times.push( t );
					
					// 存储随机种子（0-1之间的随机数）
					// 这个种子将在着色器中用于创建每个实例独特的动画
					seeds.push( Math.random() );

					// 为每个实例生成随机颜色
					// HSL颜色模型：色相(Hue)、饱和度(Saturation)、亮度(Lightness)
					// 0.75 + Math.random()*0.25：色相在0.75-1.0之间（紫红色系）
					// 饱和度：1（最大饱和度）
					// 亮度：0.4（中等偏暗，增强对比度）
					c.setHSL( 0.75 + ( Math.random() * 0.25 ), 1, 0.4 );
					
					// 将RGB颜色值添加到数组
					colors.push( c.r, c.g, c.b );

				}

				// ---------- 6. 创建实例化BufferAttributes ----------
				// InstancedBufferAttribute: 专门用于实例化渲染的缓冲区属性
				// 这些属性数据将被上传到GPU，每个实例读取对应的数据
				
				// 位置属性：每个实例3个浮点数(x,y,z)
				const positionAttribute = new THREE.InstancedBufferAttribute( 
					new Float32Array( positions ),  // 将JavaScript数组转换为TypedArray
					3                               // 每个实例的数据大小（3个值）
				);
				
				// 颜色属性：每个实例3个浮点数(r,g,b)
				const colorAttribute = new THREE.InstancedBufferAttribute( 
					new Float32Array( colors ), 
					3 
				);
				
				// 时间属性：每个实例1个浮点数（在路径上的位置参数）
				const timeAttribute = new THREE.InstancedBufferAttribute( 
					new Float32Array( times ), 
					1 
				);
				
				// 随机种子属性：每个实例1个浮点数
				const seedAttribute = new THREE.InstancedBufferAttribute( 
					new Float32Array( seeds ), 
					1 
				);

				// ---------- 7. TSL着色器节点设置 ----------
				// 这部分代码使用TSL（Three.js着色器语言）创建GPU着色器程序
				// 所有计算都在GPU上并行执行，极大提高性能

				// 将BufferAttributes转换为TSL节点
				// 这些节点可以在着色器程序中被访问和操作
				const instancePosition = instancedBufferAttribute( positionAttribute );
				const instanceColor = instancedBufferAttribute( colorAttribute );
				const instanceSeed = instancedBufferAttribute( seedAttribute );
				const instanceTime = instancedBufferAttribute( timeAttribute );

				// 计算本地时间：每个实例的独特时间
				// instanceTime是固定的（实例在路径上的位置）
				// time是全局时间（随着动画循环不断增加）
				// 两者相加创建随时间移动但每个实例不同的时间值
				const localTime = instanceTime.add( time );
				
				// 计算调制时间：创建一个在0-1之间循环的全局时间
				// time.mul(0.4): 将全局时间乘以0.4，减慢动画速度
				// mod(..., 1): 对1取模，确保结果在0-1之间循环
				// 这个值表示当前"激活波"在路径上的位置
				const modTime = mod( time.mul( 0.4 ), 1 );
				
				// 创建正弦波动效果：Y轴上的上下移动
				// sin(localTime + instanceSeed): 基于时间和随机种子的正弦波
				// .mul(0.25): 将振幅减小到0.25，控制波动范围
				// 每个实例有自己独特的波动模式和相位
				const s0 = sin( localTime.add( instanceSeed ) ).mul( 0.25 );
				
				// 计算实例与激活波的距离
				// 这个距离决定了实例是否应该被"激活"（放大）
				const dist = abs( instanceTime.sub( modTime ) ).toConst();
				
				// 处理环绕距离：当实例在路径两端时（0和1附近）
				// 如果距离大于0.5，说明需要"绕回"计算另一端的距离
				// select(condition, trueValue, falseValue): 条件选择
				// dist.oneMinus(): 计算1-distance
				const wrapDist = select( 
					dist.greaterThan( 0.5 ),  // 条件：距离是否大于0.5
					dist.oneMinus(),          // 真：取1-distance（环绕）
					dist                      // 假：保持原距离
				).toConst();
				
				// 计算缩放因子：在激活波附近创建放大效果
				// 如果距离大于0.1：缩放为1（正常大小）
				// 如果距离小于0.1：从3到1渐变缩放
				// remap(0, 0.1, 3, 1): 将[0,0.1]范围内的值重新映射到[3,1]
				const s1 = select( 
					wrapDist.greaterThan( 0.1 ),           // 条件：距离是否大于0.1
					float( 1 ),                            // 真：缩放为1
					wrapDist.remap( 0, 0.1, 3, 1 )         // 假：渐变缩放
				);

				// 计算最终位置偏移：
				// 使用原始位置，但在Y轴上添加正弦波动
				// toConst('offset'): 将这个节点标记为常量，可以优化GPU性能
				const offset = vec3( 
					instancePosition.x,                     // X坐标不变
					instancePosition.y.add( s0 ),           // Y坐标添加波动
					instancePosition.z                      // Z坐标不变
				).toConst( 'offset' );
				
				// 设置材质的位置节点：
				// 这是顶点着色器的核心计算，决定每个顶点的最终位置
				// positionLocal.mul(s1): 将本地顶点坐标乘以缩放因子
				// add(..., offset): 再加上实例的偏移位置
				material.positionNode = add( positionLocal.mul( s1 ), offset );
				
				// 设置材质的颜色节点：
				// 直接使用实例颜色，每个实例有自己的颜色
				material.colorNode = instanceColor;

				// ---------- 8. 创建和设置WebGPU渲染器 ----------
				// WebGPURenderer: Three.js的WebGPU后端渲染器
				// WebGPU是现代图形API，提供比WebGL更好的性能和功能
				renderer = new THREE.WebGPURenderer( { 
					antialias: true  // 开启抗锯齿，平滑边缘锯齿
				} );
				
				// 设置设备像素比：适配高DPI屏幕（如Retina显示屏）
				// window.devicePixelRatio: 物理像素与CSS像素的比例
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// 浏览器会在每一帧调用animate函数，实现平滑动画
				renderer.setAnimationLoop( animate );
				
				// 设置色调映射：NeutralToneMapping保持颜色相对中性
				// 色调映射将HDR（高动态范围）颜色转换为屏幕可显示的LDR颜色
				renderer.toneMapping = THREE.NeutralToneMapping;
				
				// 添加调试检查器：按H键可以打开/关闭
				// 检查器显示场景图、性能统计、GPU信息等，非常有用
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				document.body.appendChild( renderer.domElement );

				// ---------- 9. 初始化渲染器（异步操作） ----------
				// WebGPU初始化是异步的，需要等待Promise完成
				// await会暂停函数执行，直到初始化完成
				await renderer.init();

				// ---------- 10. 创建环境光照 ----------
				// PMREMGenerator: 预过滤环境贴图生成器
				// 环境贴图用于模拟周围环境的光照和反射
				const pmremGenerator = new THREE.PMREMGenerator( renderer );
				
				// 从RoomEnvironment场景生成环境贴图
				// RoomEnvironment是一个预制的房间场景，包含墙壁、天花板等
				// 0.04是光照强度系数
				scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

				// ---------- 11. 创建轨道控制器 ----------
				// OrbitControls允许用户用鼠标控制相机
				// 参数1：要控制的相机对象
				// 参数2：事件监听的DOM元素（这里使用渲染器的canvas）
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 启用阻尼效果：相机移动时有惯性，停止操作后慢慢停下
				// 这提供了更自然、更平滑的用户体验
				controls.enableDamping = true;

				// ---------- 12. 添加窗口大小变化监听器 ----------
				// 当用户调整浏览器窗口大小时，需要更新相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

			}

			// ==================== 窗口大小变化处理函数 ====================
			// 当浏览器窗口大小改变时，这个函数会被调用
			function onWindowResize() {

				// 1. 更新相机的宽高比
				// 因为窗口尺寸变了，宽高比也需要相应调整
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机的投影矩阵
				// 修改了相机参数后，必须调用updateProjectionMatrix重新计算投影矩阵
				camera.updateProjectionMatrix();

				// 3. 更新渲染器的尺寸
				// 确保渲染器canvas的大小与窗口大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			// ==================== 动画循环函数 ====================
			// 这个函数在每一帧都会被调用（通常每秒60次）
			// 负责更新场景状态和重新渲染
			function animate() {

				// 1. 更新控制器状态
				// 如果启用了阻尼效果，这里会计算相机的惯性运动
				// 即使没有用户输入，相机也可能在移动
				controls.update();

				// 2. 渲染场景
				// 这是最核心的操作：将3D场景绘制到2D画布上
				// 参数1：要渲染的场景对象
				// 参数2：用于渲染的相机对象
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>