<!-- 代码功能和技术点详解
一、总体功能描述
这是一个基于Three.js WebGPU的3D图层管理系统演示，展示如何使用图层功能来组织和控制大量3D粒子对象的可见性。程序创建了三种不同颜色的粒子系统（红、黄、绿），每个系统包含2500个动画粒子，分别分配到不同的图层。用户可以通过交互式控制面板独立切换每个图层粒子系统的显示和隐藏。

核心演示功能：
图层管理：将3D对象分组到不同图层，实现批量可见性控制

大规模实例化渲染：高效渲染7500个动画粒子

GPU着色器动画：使用Three.js着色器语言实现粒子运动效果

交互式控制：实时切换图层可见性，直观观察图层系统工作原理

二、主要技术点详解
1. WebGPU渲染技术
技术实现：

javascript
renderer = new THREE.WebGPURenderer({ antialias: true });
技术特点：

下一代图形API：替代WebGL，提供更低开销、更高效的GPU访问

显式控制：相比WebGL的隐式状态管理，WebGPU提供更细粒度的GPU控制

多线程支持：更好的CPU多线程利用，减少主线程阻塞

计算着色器：支持通用GPU计算（GPGPU），本例中用于粒子动画

优势：

性能提升30-50%相比WebGL

支持更大的绘制调用和更复杂的着色器

更好的错误处理和调试支持

2. 图层系统（Layer System）
技术实现：

javascript
// 对象分配到图层
particles.layers.set(i);

// 相机控制图层可见性
camera.layers.enable(0);
camera.layers.toggle(1);
工作原理：

32个图层：每个相机有32个图层掩码（0-31）

位掩码运算：使用32位整数的位运算高效管理可见性

对象关联：每个Three.js对象可以关联到一个或多个图层

相机筛选：相机只渲染与其启用的图层匹配的对象

应用场景：

UI元素与3D场景分离

特效图层（如后处理效果）

多视角渲染（不同相机看不同图层）

性能优化（临时隐藏复杂对象）

3. GPU实例化渲染
技术实现：

javascript
// 创建实例化属性
const positionAttribute = new THREE.InstancedBufferAttribute(
    new Float32Array(positions), 3
);

// 在着色器中访问实例数据
const instancePosition = instancedBufferAttribute(positionAttribute);
核心原理：

单一绘制调用：所有实例在一次GPU调用中渲染

实例缓冲区：每个实例的数据存储在专用缓冲区

顶点着色器扩展：通过gl_InstanceID访问当前实例数据

内存效率：共享几何体数据，只存储差异化属性

性能对比：

渲染方式	7500个粒子	CPU负担	GPU负担	内存使用
传统渲染	7500次绘制调用	高	中	高
实例化渲染	1次绘制调用	低	低	低
数据组织：

text
实例缓冲区布局：
[实例1位置x, y, z, 旋转x, y, z, 方向x, y, z, 时间偏移]
[实例2位置x, y, z, 旋转x, y, z, 方向x, y, z, 时间偏移]
...
[实例2500位置x, y, z, 旋转x, y, z, 方向x, y, z, 时间偏移]
4. TSL着色器语言（Three.js Shader Language）
技术实现：

javascript
import { positionLocal, time, mod, instancedBufferAttribute, rotate } from 'three/tsl';

// 构建着色器节点图
const rotatedPosition = rotate(positionLocal, instanceRotation.mul(modTime.mul(20)));
material.positionNode = rotatedPosition.add(instancePosition)
    .add(instanceDirection.mul(modTime.mul(50)));
技术特点：

声明式编程：描述计算关系而非具体步骤

节点图系统：着色器逻辑构建为有向无环图

自动优化：系统自动合并和优化着色器代码

类型安全：编译时类型检查，减少运行时错误

节点图示例：

text
位置动画节点图：
positionLocal → rotate → rotatedPosition
                 ↑
instanceRotation → mul(20) → mul(modTime)
                                 ↑
time → mul(0.02) → add(timeOffset) → mod(1.0) → modTime

最终位置：
rotatedPosition + instancePosition + instanceDirection × modTime × 50
与传统GLSL对比优势：

无需字符串拼接，代码更易维护

支持模块化和代码复用

更好的IDE支持和自动完成

运行时可以动态修改着色器逻辑

5. 粒子动画系统
动画组成：

a. 时间系统：

javascript
// 每个粒子有不同的起始时间
const localTime = instancedBufferAttribute(timeAttribute).add(time.mul(0.02));
const modTime = mod(localTime, 1.0);  // 0-1循环
b. 位置动画：

基础位置：随机分布在屏幕左侧（X: -25~-20, Y: -10~50, Z: -5~5）

运动方向：主要向右上方（X: 0.7-0.9, Y: -0.3~-0.15）

运动公式：新位置 = 初始位置 + 方向 × 时间 × 50

c. 旋转动画：

旋转轴：每个粒子有随机的旋转轴向量

旋转速度：随时间变化的旋转速度（×20倍）

旋转公式：顶点绕随机轴旋转，旋转角度随时间增加

动画曲线：

text
时间循环：0 → 1 → 0 → 1 ...
位置变化：初始位置 → 沿方向移动 → 重置 → 重新开始
旋转变化：初始角度 → 加速旋转 → 重置 → 重新开始
6. 背景着色器效果
技术实现：

javascript
// 水平渐变
const horizontalEffect = screenUV.x.mix(color(0xf996ae), color(0xf6f0a3));

// 径向光晕
const lightEffect = screenUV.distance(vec2(0.5, 1.0))
    .oneMinus().mul(color(0xd9b6fd));
效果分解：

水平渐变：从左到右从粉色(#f996ae)渐变到浅黄色(#f6f0a3)

顶部光晕：以屏幕顶部中心(0.5, 1.0)为原点，向外辐射的紫色(#d9b6fd)光晕

叠加模式：两种效果相加（Additive Blending），增强视觉层次

数学原理：

screenUV：屏幕空间UV坐标（左下角(0,0)，右上角(1,1)）

distance()：计算两点间欧几里得距离

oneMinus()：1 - value，用于反转距离（中心亮边缘暗）

mix()：线性插值，mix(a, b, t) = a × (1-t) + b × t

7. 性能优化策略
优化技术：

实例化渲染：7500个粒子→1次绘制调用

单通道渲染：forceSinglePass: true避免多次渲染状态切换

Alpha测试：alphaTest: 0.1提前丢弃透明片段

GPU计算：所有动画在着色器中并行计算

纹理共享：所有粒子使用同一纹理，减少纹理绑定开销

性能指标（估算）：

绘制调用：4次（3个粒子系统+1个背景）

顶点数：7500 × 4 = 30,000个顶点（实际30个，实例化放大）

内存使用：约500KB顶点数据 + 纹理

帧率：60FPS稳定（现代GPU）

8. 交互系统
控制面板：

javascript
const gui = renderer.inspector.createParameters('图层控制');
gui.add(layers, '红色粒子层').onChange(() => {
    camera.layers.toggle(0);
});
功能特点：

实时切换：无需重新渲染场景，立即生效

状态同步：GUI状态与实际图层状态同步

用户反馈：直观显示每个图层的开关状态

三、技术栈总结
技术组件	作用	关键优势
Three.js WebGPU	3D渲染引擎	高性能、现代API支持
图层系统	对象分组管理	批量可见性控制、渲染优化
实例化渲染	高效渲染重复对象	大幅减少绘制调用
TSL着色器	GPU编程	类型安全、易于维护
Inspector	调试工具	实时场景检查和修改
纹理精灵	粒子外观	透明边缘、视觉丰富性
四、应用场景扩展
游戏开发：

特效图层管理（爆炸、烟雾、魔法）

UI与游戏场景分离

多层后处理效果

数据可视化：

多层数据叠加显示

动态切换数据图层

3D图表分层渲染

建筑可视化：

楼层切换显示

管线图层管理

家具图层控制

教育演示：

解剖图层（皮肤、肌肉、骨骼）

机械结构分层展示

历史地层可视化 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面基础设置 -->
		<!-- 页面标题：展示示例主题和技术栈 -->
		<title>three.js WebGPU 示例 - 图层系统演示</title>
		<!-- 字符编码：使用UTF-8支持多语言字符 -->
		<meta charset="utf-8">
		<!-- 移动端视口设置：固定视口大小，禁止用户缩放，确保3D渲染一致性 -->
		<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="example.css">
	</head>
	<body>

		<!-- 信息展示区域：位于页面左上角的固定信息面板 -->
		<div id="info">
			<!-- three.js 官方LOGO链接：点击跳转到three.js官网 -->
			<!-- rel="noopener"：安全属性，防止新页面访问原页面的window对象 -->
			<!-- 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>
				使用图层系统组织和控制3D对象的可见性。
				<br>
				（每个颜色代表不同的图层，可通过右侧面板控制显示/隐藏）
			</small>
		</div>

		<!-- 导入映射配置：现代JavaScript模块系统的别名配置 -->
		<!-- 作用：简化模块导入路径，让浏览器知道如何解析模块标识符 -->
		<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模块 -->
		<script type="module">

			// ==================== 模块导入区域 ====================
			
			// 导入Three.js核心模块（WebGPU版本）
			// WebGPU是下一代图形API，比WebGL更高效，支持更多现代GPU特性
			import * as THREE from 'three/webgpu';

			// 导入调试检查器：用于在运行时检查和调试Three.js场景
			// 提供场景树查看、属性修改、性能监控等功能
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入TSL（Three.js着色器语言）节点
			// TSL是一种高级着色器语言，可以在JavaScript中编写着色器逻辑
			// positionLocal: 模型局部空间位置
			// time: 全局时间变量（自动递增）
			// mod: 取模运算，用于循环动画
			// instancedBufferAttribute: 实例化缓冲区属性访问器
			// rotate: 旋转变换节点
			// screenUV: 屏幕UV坐标（归一化的屏幕位置）
			// color: 颜色构造器
			// vec2: 二维向量构造器
			import { positionLocal, time, mod, instancedBufferAttribute, rotate, screenUV, color, vec2 } from 'three/tsl';

			// ==================== 全局变量声明 ====================
			// 这三个变量将在整个应用中使用
			let camera;     // 相机：定义观察者的视角和可见范围
			let scene;      // 场景：包含所有3D对象的容器
			let renderer;   // 渲染器：负责将3D场景渲染到2D屏幕

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

			// ==================== 初始化函数定义 ====================
			/**
			 * 应用初始化函数
			 * 负责创建场景、相机、渲染器、对象和事件监听器
			 */
			function init() {

				// ---------- 1. 创建相机 ----------
				/**
				 * 创建透视相机（PerspectiveCamera）
				 * 参数说明：
				 *   - 60: 视野角度（FOV），单位度，模拟人眼视角
				 *   - window.innerWidth / window.innerHeight: 宽高比
				 *   - 0.1: 近裁剪面，距离小于此值的物体不显示
				 *   - 100: 远裁剪面，距离大于此值的物体不显示
				 */
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
				
				// 启用相机的图层：相机只能看到启用了相应图层的对象
				// 图层是0-31的整数，每个对象可以分配到一个或多个图层
				camera.layers.enable( 0 ); // 启用图层0（默认已启用，这里显式启用）
				camera.layers.enable( 1 ); // 启用图层1（黄色粒子）
				camera.layers.enable( 2 ); // 启用图层2（绿色粒子）

				// 设置相机位置：沿Z轴向后移动10个单位
				// 这样可以看到整个粒子场景
				camera.position.z = 10;

				// ---------- 2. 创建场景 ----------
				/**
				 * 场景是包含所有3D对象（网格、灯光、相机等）的容器
				 * 场景本身也是一个对象，可以设置背景、雾效等环境属性
				 */
				scene = new THREE.Scene();

				// ---------- 3. 创建背景着色器效果 ----------
				/**
				 * 使用TSL创建动态背景效果
				 * TSL允许在JavaScript中构建着色器节点图
				 */
				
				// 3.1 水平渐变效果
				// screenUV.x: 获取屏幕水平方向的位置（0到1）
				// mix(): 混合函数，根据第一个参数在两种颜色间插值
				// color(0xf996ae): 创建粉色（十六进制颜色）
				// color(0xf6f0a3): 创建浅黄色
				// 最终效果：从左到右从粉色渐变到浅黄色
				const horizontalEffect = screenUV.x.mix( color( 0xf996ae ), color( 0xf6f0a3 ) );

				// 3.2 光源/光晕效果
				// screenUV.distance(vec2(0.5, 1.0)): 计算每个像素到点(0.5, 1.0)的距离
				// (0.5, 1.0)表示屏幕顶部中心点
				// oneMinus(): 1减去当前值，反转距离（中心点最亮）
				// mul(color(0xd9b6fd)): 乘以紫色，给光晕着色
				const lightEffect = screenUV.distance( vec2( 0.5, 1.0 ) ).oneMinus().mul( color( 0xd9b6fd ) );

				// 3.3 合并效果并设置为场景背景
				// add(): 将两个效果相加（颜色叠加）
				// backgroundNode: TSL特有的背景节点属性
				scene.backgroundNode = horizontalEffect.add( lightEffect );

				// ---------- 4. 加载纹理 ----------
				/**
				 * 加载粒子精灵纹理（透明PNG图像）
				 * 纹理加载是异步的，但TextureLoader会处理回调
				 */
				const sprite = new THREE.TextureLoader().load( 'textures/sprites/blossom.png' );
				// 设置颜色空间：SRGBColorSpace适合显示颜色
				// 这与物理渲染中的线性颜色空间不同
				sprite.colorSpace = THREE.SRGBColorSpace;

				// 每个图层的粒子数量
				const count = 2500;

				// 创建基础几何体：平面（每个粒子的形状）
				// 0.25 x 0.25单位的正方形平面
				const geometry = new THREE.PlaneGeometry( 0.25, 0.25 );

				// 定义三个图层的颜色（十六进制）
				// 红色图层、黄色图层、绿色图层
				const colors = [ 0xD70654, 0xFFD95F, 0xB8D576 ];

				// ---------- 5. 创建三个图层的粒子系统 ----------
				/**
				 * 循环创建三个图层，每个图层有不同颜色的粒子
				 * 每个图层使用相同的几何体但不同的材质
				 */
				for ( let i = 0; i < 3; i ++ ) {

					// 5.1 创建粒子网格
					// 参数：几何体、材质（通过getMaterial函数创建）
					const particles = new THREE.Mesh( geometry, getMaterial( count, colors[ i ], sprite ) );
					
					// 5.2 设置图层归属
					// set(i): 将对象分配到第i层（0、1、2）
					// 只有相机启用了相同图层的对象才会被渲染
					particles.layers.set( i );
					
					// 5.3 设置实例数量
					// 对于实例化网格，需要显式设置实例数量
					particles.count = count;
					
					// 5.4 添加到场景
					scene.add( particles );

				}

				// ---------- 6. 创建渲染器 ----------
				/**
				 * WebGPURenderer是Three.js的WebGPU后端渲染器
				 * 比传统的WebGLRenderer性能更好，功能更强大
				 */
				renderer = new THREE.WebGPURenderer( { antialias: true } ); // antialias: 开启抗锯齿
				
				// 设置设备像素比：匹配屏幕的物理像素密度
				// 在高DPI屏幕上可以获得更清晰的渲染效果
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环：每帧调用animate函数
				// 替代传统的requestAnimationFrame循环
				renderer.setAnimationLoop( animate );
				
				// 附加调试检查器：方便开发和调试
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到页面body中
				// domElement是渲染器创建的<canvas>元素
				document.body.appendChild( renderer.domElement );

				// ---------- 7. 创建GUI控制面板 ----------
				/**
				 * 使用检查器的GUI功能创建图层控制面板
				 * 用户可以交互式地切换不同图层的可见性
				 */
				
				// 图层状态对象：存储每个图层的开关状态
				const layers = {
					'红色粒子层': true,    // 对应图层0
					'黄色粒子层': true,    // 对应图层1
					'绿色粒子层': true     // 对应图层2
				};

				// 创建参数面板，标题为"图层控制"
				const gui = renderer.inspector.createParameters( '图层控制' );

				// 7.1 添加红色图层控制
				gui.add( layers, '红色粒子层' )
				   .onChange( () => {
						// 切换相机图层0的启用状态
						camera.layers.toggle( 0 );
					} );

				// 7.2 添加黄色图层控制
				gui.add( layers, '黄色粒子层' )
				   .onChange( () => {
						// 切换相机图层1的启用状态
						camera.layers.toggle( 1 );
					} );

				// 7.3 添加绿色图层控制
				gui.add( layers, '绿色粒子层' )
				   .onChange( () => {
						// 切换相机图层2的启用状态
						camera.layers.toggle( 2 );
					} );

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

			}

			// ==================== 粒子材质创建函数 ====================
			/**
			 * 创建实例化粒子材质
			 * 使用TSL着色器节点实现GPU实例化动画
			 * 
			 * @param {number} count - 粒子数量
			 * @param {number} color - 粒子颜色（十六进制）
			 * @param {THREE.Texture} sprite - 粒子纹理
			 * @returns {THREE.MeshBasicNodeMaterial} - 带有动画节点的材质
			 */
			function getMaterial( count, color, sprite ) {

				// ---------- 1. 准备实例化数据数组 ----------
				/**
				 * 实例化允许用一个draw call渲染大量相同几何体
				 * 每个实例有不同的属性（位置、旋转等）
				 */
				const positions = [];    // 每个粒子的初始位置（x, y, z）
				const rotations = [];    // 每个粒子的旋转轴（x, y, z分量）
				const directions = [];   // 每个粒子的运动方向向量（x, y, z）
				const timeOffsets = [];  // 每个粒子的时间偏移，用于错开动画

				const v = new THREE.Vector3(); // 临时向量对象，用于计算

				// ---------- 2. 为每个粒子生成随机数据 ----------
				for ( let i = 0; i < count; i ++ ) {

					// 2.1 生成随机位置
					// X轴：-25到-20（集中在左侧）
					// Y轴：-10到50（垂直方向范围较大）
					// Z轴：-5到5（前后方向有少量深度变化）
					positions.push(
						THREE.MathUtils.randFloat( - 25, - 20 ),
						THREE.MathUtils.randFloat( - 10, 50 ),
						THREE.MathUtils.randFloat( - 5, 5 )
					);

					// 2.2 生成随机方向向量
					// X分量：0.7-0.9（主要向右）
					// Y分量：-0.3到-0.15（轻微向上）
					// Z分量：0（保持在XY平面内）
					v.set( 
						THREE.MathUtils.randFloat( 0.7, 0.9 ), 
						THREE.MathUtils.randFloat( - 0.3, - 0.15 ), 
						0 
					).normalize(); // 归一化为单位向量

					// 2.3 生成随机旋转轴（三个随机分量）
					// 这些值用于定义粒子绕哪个轴旋转
					rotations.push( 
						Math.random(), 
						Math.random(), 
						Math.random() 
					);

					// 2.4 存储方向向量
					directions.push( v.x, v.y, v.z );

					// 2.5 生成时间偏移
					// 基于粒子索引，确保每个粒子有不同的动画起始时间
					// i/count 产生0到1的均匀分布
					timeOffsets.push( i / count );

				}

				// ---------- 3. 创建实例化缓冲区属性 ----------
				/**
				 * InstancedBufferAttribute是专门用于实例化的缓冲区
				 * 它包含所有实例的数据，GPU会为每个实例读取相应的数据
				 */
				// 位置属性：每个实例3个浮点数（x, y, z）
				const positionAttribute = new THREE.InstancedBufferAttribute( new Float32Array( positions ), 3 );
				
				// 旋转属性：每个实例3个浮点数（旋转轴分量）
				const rotationAttribute = new THREE.InstancedBufferAttribute( new Float32Array( rotations ), 3 );
				
				// 方向属性：每个实例3个浮点数（运动方向）
				const directionAttribute = new THREE.InstancedBufferAttribute( new Float32Array( directions ), 3 );
				
				// 时间偏移属性：每个实例1个浮点数
				const timeAttribute = new THREE.InstancedBufferAttribute( new Float32Array( timeOffsets ), 1 );

				// ---------- 4. 创建基础材质 ----------
				/**
				 * MeshBasicNodeMaterial是支持TSL节点的基本材质
				 * 它不响应灯光，使用直接指定的颜色
				 */
				const material = new THREE.MeshBasicNodeMaterial( {
					color: color,        // 基础颜色（从参数传入）
					map: sprite,        // 基础颜色纹理
					alphaMap: sprite,   // 透明度纹理（使用同一纹理）
					alphaTest: 0.1,     // Alpha测试阈值：alpha值小于0.1的像素被丢弃
					side: THREE.DoubleSide, // 双面渲染：平面的两面都渲染
					forceSinglePass: true // 强制单通道渲染：提高实例化性能
				} );

				// ---------- 5. TSL着色器节点编程 ----------
				/**
				 * 这里构建着色器节点图，定义GPU端的动画逻辑
				 * 所有计算都在着色器中并行执行，性能极高
				 */
				
				// 5.1 将缓冲区属性转换为TSL节点
				const instancePosition = instancedBufferAttribute( positionAttribute );  // 实例位置节点
				const instanceDirection = instancedBufferAttribute( directionAttribute ); // 实例方向节点
				const instanceRotation = instancedBufferAttribute( rotationAttribute );   // 实例旋转节点

				// 5.2 计算粒子本地时间
				// time: 全局时间（从应用开始经过的秒数）
				// time.mul(0.02): 减慢时间速度
				// add(时间偏移): 每个粒子有不同的起始时间
				const localTime = instancedBufferAttribute( timeAttribute ).add( time.mul( 0.02 ) );
				
				// 5.3 对时间取模，创建循环动画
				// mod(time, 1.0): 时间在0-1之间循环
				// 这使得粒子的动画在完成一个周期后重新开始
				const modTime = mod( localTime, 1.0 );

				// 5.4 计算旋转效果
				// positionLocal: 模型局部坐标系中的位置（每个顶点的原始位置）
				// instanceRotation.mul(modTime.mul(20)): 旋转角度随时间变化
				// rotate(): 对局部位置应用旋转
				// 效果：粒子绕随机轴旋转，旋转速度随时间变化
				const rotatedPosition = rotate( positionLocal, instanceRotation.mul( modTime.mul( 20 ) ) );
				
				// 5.5 计算最终位置（核心动画逻辑）
				// 最终位置 = 旋转后的局部位置 + 实例初始位置 + 运动偏移
				// rotatedPosition: 旋转效果（粒子自身旋转）
				// instancePosition: 每个粒子的初始位置
				// instanceDirection.mul(modTime.mul(50)): 随时间沿方向移动
				// 乘以50增加移动距离，使动画更明显
				material.positionNode = rotatedPosition
					.add( instancePosition )                          // 加上初始位置
					.add( instanceDirection.mul( modTime.mul( 50 ) ) ); // 加上运动偏移

				// ---------- 6. 返回材质 ----------
				return material;

			}

			// ==================== 窗口大小改变处理函数 ====================
			/**
			 * 响应窗口大小变化
			 * 确保3D渲染正确适应新的窗口尺寸
			 */
			function onWindowResize() {

				// 1. 更新相机宽高比
				// 相机需要知道渲染区域的宽高比来计算正确的透视投影
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机投影矩阵
				// 修改aspect后必须调用此方法重新计算投影矩阵
				camera.updateProjectionMatrix();

				// 3. 更新渲染器尺寸
				// 设置渲染器的输出canvas为新的窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			// ==================== 动画循环函数 ====================
			/**
			 * 每一帧执行的渲染函数
			 * 由renderer.setAnimationLoop自动调用
			 * 约60次/秒（取决于屏幕刷新率）
			 */
			function animate() {

				// 渲染场景和相机到屏幕
				// 这是整个3D管道的最终输出步骤
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>