<!-- 代码功能与技术点详细分析
🎯 一、主要功能概述
这是一个基于Three.js WebGPU版本的Sheen材质效果演示应用，主要展示以下功能：

1. 3D模型可视化
加载并显示一个高质量的椅子3D模型（Sheen Chair）

模型采用glTF 2.0格式，支持PBR（基于物理的渲染）材质

2. Sheen材质效果
演示KHR_materials_sheen扩展，模拟织物表面的各向异性高光效果

织物材质（如绒布、丝绸）在特定角度下会出现特殊的光泽效果

3. HDR环境照明
使用高动态范围(HDR)环境贴图提供真实的环境照明

实现物理正确的反射和全局光照效果

4. 交互控制
鼠标拖拽旋转视图

滚轮缩放

实时调整材质参数的调试面板

5. 响应式布局
自动适应浏览器窗口大小变化

支持不同分辨率和设备像素比

🚀 二、核心技术点
1. WebGPU渲染技术
javascript
// 使用Three.js的WebGPU后端
import * as THREE from 'three/webgpu';
renderer = new THREE.WebGPURenderer({ antialias: true });
优势：相比WebGL，WebGPU提供更好的性能、更低的开销和更现代化的API

特性：支持计算着色器、更好的多线程利用、显式的GPU内存管理

2. glTF模型格式支持
javascript
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
glTF：被称为"3D的JPEG"，是开放标准的3D传输格式

优点：文件体积小、加载速度快、支持PBR材质

扩展支持：支持KHR_materials_sheen等扩展

3. KHR_materials_sheen材质扩展
javascript
// Sheen材质属性控制
gui.add(object.material, 'sheen', 0, 1);
Sheen：模拟织物表面绒毛的反射特性

物理基础：基于微表面理论的BRDF（双向反射分布函数）

效果：在掠射角（grazing angle）产生特殊的高光

4. HDR环境贴图与IBL
javascript
// 加载HDR环境贴图
scene.environment = texture;
scene.background = texture;
HDR贴图：包含高动态范围的光照信息

IBL（基于图像的照明）：使用环境贴图作为场景的主要光源

色调映射：ACES Filmic算法，将HDR值映射到显示器的LDR范围

5. 物理渲染(PBR)流程
text
1. 环境贴图加载 → 2. 辐照度图生成 → 3. BRDF计算 → 4. 色调映射
PBR优势：物理正确、参数直观、跨平台一致性

核心组件：漫反射、镜面反射、法线贴图、粗糙度、金属度

6. 模块化架构
javascript
// ES6模块导入
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
Import Maps：浏览器原生的模块路径映射

代码分割：按需加载，提高加载效率

依赖管理：清晰的模块依赖关系

7. 交互控制系统
javascript
// 轨道控制器配置
controls.enableDamping = true;  // 启用阻尼效果
controls.minDistance = 1;       // 最小缩放距离
阻尼效果：惯性运动，提供更自然的交互体验

约束控制：限制缩放范围，防止穿模或距离过远

8. 调试与开发工具
javascript
// 集成Inspector调试工具
import { Inspector } from 'three/addons/inspector/Inspector.js';
renderer.inspector = new Inspector();
实时参数调整：无需重新编译即可测试不同参数

性能监控：帧率、渲染时间等指标

场景检查：查看对象层次结构、材质属性

🔧 三、渲染流程详解
1. 初始化阶段


2. 帧渲染循环
javascript
function animate() {
    controls.update();     // 更新交互状态
    render();             // 执行渲染
    requestAnimationFrame(animate); // 下一帧
}
📊 四、技术架构优势
1. 性能优化
WebGPU：利用现代GPU架构，减少CPU开销

异步加载：模型和环境贴图并行加载

智能更新：仅在需要时更新渲染状态

2. 跨平台兼容
Web标准：纯Web技术，无需插件

响应式设计：适应不同屏幕尺寸和设备

渐进增强：在支持WebGPU的设备上获得最佳体验

3. 可维护性
模块化设计：清晰的功能分离

配置驱动：参数集中管理，易于调整

调试友好：内置开发工具，便于问题排查

🎨 五、视觉效果特点
1. 材质表现
织物质感：通过Sheen效果模拟绒布材质

环境反射：HDR贴图提供真实的环境反射

光影过渡：平滑的高光和阴影过渡

2. 色彩表现
高动态范围：保留亮部和暗部细节

准确的颜色：物理正确的色彩渲染

色调映射：电影级的色彩处理

🔍 六、实际应用场景
1. 产品展示
电商平台的3D商品展示

家具、服装等材质的逼真呈现

2. 设计预览
材料设计和选择

光照环境模拟

3. 教育演示
3D图形学教学

物理渲染原理展示

4. 虚拟试穿/试看
家居布置预览

材质效果对比

📈 七、性能考量
渲染开销
几何复杂度：模型三角面数控制

纹理大小：HDR贴图分辨率优化

着色器复杂度：PBR材质计算优化

内存使用
纹理内存：HDR贴图的内存占用

几何数据：顶点、法线、UV数据

帧缓冲区：抗锯齿和后期处理开销 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的文字
			本例展示Three.js WebGPU版本中的Sheen材质效果
			Sheen是一种模拟织物表面绒毛反射特性的材质效果
		-->
		<title>Three.js WebGPU - Sheen材质效果演示</title>
		
		<!-- 
			字符编码设置：UTF-8确保正确显示中文字符
			这是现代网页开发的标准配置
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)设置：响应式网页设计的关键配置
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放（确保WebGL画布显示稳定）
			minimum-scale=1.0: 最小缩放比例为100%
			maximum-scale=1.0: 最大缩放比例为100%
			这些设置特别适合需要固定显示比例的3D应用
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			引入外部CSS样式表：example.css
			通常包含页面布局、字体、颜色等基础样式
			rel="stylesheet": 定义链接关系为样式表
			type="text/css": 指定MIME类型（HTML5中可省略）
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
		
		<!-- 
			内联样式：直接在当前页面中定义的CSS
			这里设置整个页面的背景颜色为浅灰色(#bbbbbb)
			内联样式的优先级高于外部样式表
		-->
		<style>
			body {
				background: #bbbbbb;  /* 中灰色背景，与3D场景形成对比 */
			}
		</style>
	</head>

	<body>
		<!-- 
			信息展示区域：显示项目标题、链接和版权信息
			id="info": 为这个div元素指定唯一标识符，便于CSS和JavaScript操作
			这个区域通常浮动在3D场景上方，作为UI叠加层
		-->
		<div id="info">
			<!-- 
				Three.js官方logo链接
				href: 点击后跳转到Three.js官网
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全属性，防止新页面访问原页面的window对象
				class="logo-link": CSS类名，通常通过CSS设置logo的背景图片
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 
				标题包装器：包含主标题和副标题
				class="title-wrapper": CSS类名，用于样式控制
			-->
			<div class="title-wrapper">
				<!-- 主标题：Three.js框架名称，链接到官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题：当前示例的具体内容描述 -->
				<span>glTF格式 + 各向异性材质演示</span>
			</div>

			<!-- 
				详细信息区域：使用<small>标签表示次要信息
				通常字体较小，颜色较淡，显示在主要标题下方
			-->
			<small>
				<!-- 
					技术规范链接：指向Khronos Group的glTF材质扩展规范
					KHR_materials_sheen是glTF 2.0的扩展，用于模拟织物、毛发等材质
				-->
				使用的技术规范: <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_sheen" target="_blank" rel="noopener">KHR_materials_sheen材质扩展</a> 
				<!-- 
					分隔符：中文全角空格，用于更好的中文排版
				-->
				｜
				<!-- 
					模型来源信息：说明演示中使用的3D模型来源
				-->
				演示模型: <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/SheenChair" target="_blank" rel="noopener">Sheen Chair（光泽椅子）</a>
				<!-- 
					模型描述：简要说明这个模型的特点
				-->
				- 来自glTF官方示例库的织物材质椅子模型
			</small>
		</div>

		<!-- 
			导入映射(Import Map)：现代JavaScript模块系统的配置部分
			type="importmap": 指定脚本类型为导入映射
			导入映射允许浏览器将模块标识符映射到实际URL
			这在ES6模块系统中用于解决模块路径解析问题
		-->
		<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>

		<!-- 
			主JavaScript模块：页面功能的核心实现
			type="module": 声明这是一个ES6模块，支持import/export语法
			模块作用域：模块内的变量不会污染全局命名空间
		-->
		<script type="module">
			// 导入Three.js的WebGPU版本主模块
			// * as THREE: 将整个模块导入并命名为THREE对象
			// 这个对象包含Three.js的所有核心类（Scene, Camera, Renderer等）
			import * as THREE from 'three/webgpu';

			// 从Three.js附加组件中导入轨道控制器
			// OrbitControls: 允许用户通过鼠标拖拽、滚轮缩放来与3D场景交互
			// 这是Three.js生态系统中非常常用的交互控制组件
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入GLTF加载器
			// GLTF(Graphics Language Transmission Format): 现代3D模型的开放标准格式
			// GLTFLoader: Three.js提供的glTF格式加载器，支持.glb（二进制）和.gltf（JSON）格式
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入UltraHDR加载器
			// UltraHDRLoader: 用于加载HDR(High Dynamic Range)格式的环境贴图
			// HDR贴图包含高动态范围的光照信息，用于物理渲染(PBR)和真实感渲染
			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';

			// 导入调试检查器(Inspector)
			// Inspector: 提供一个可视化界面，用于实时调整场景中对象的参数
			// 常用于开发和调试，可以实时修改材质属性、光照参数等
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 声明全局变量（在整个模块内可用）
			let camera;      // 相机对象：定义观察3D场景的视角
			let scene;       // 场景对象：包含所有3D对象（网格、光源、相机等）的容器
			let renderer;    // 渲染器对象：负责将3D场景渲染到2D画布上
			let controls;    // 控制器对象：用户交互控制

			// 调用初始化函数，启动整个应用
			// 这是整个3D应用的入口点
			init();

			/**
			 * 初始化函数：设置整个3D应用的基础环境
			 * 包括：创建容器、初始化相机、场景、渲染器、加载资源、设置事件监听器等
			 * 这个函数只执行一次，完成应用的初始化工作
			 */
			function init() {
				// 创建一个新的div元素作为3D渲染的容器
				// 这个容器将包含WebGPU渲染器创建的canvas元素
				const container = document.createElement('div');
				
				// 将新创建的容器添加到页面的body元素中
				// appendChild: DOM操作方法，将元素添加为指定元素的最后一个子元素
				document.body.appendChild(container);

				/**
				 * 创建透视相机(PerspectiveCamera)
				 * 透视相机模拟人眼视角，远处物体看起来更小，近处物体看起来更大
				 * 参数说明：
				 * 1. fov (45): 视野角度(Field of View)，单位是度，45°是自然视角
				 * 2. aspect ratio: 宽高比，设置为窗口宽度除以高度，确保画面不拉伸
				 * 3. near plane (0.1): 近裁剪面，距离相机0.1单位以内的物体不被渲染
				 * 4. far plane (20): 远裁剪面，距离相机20单位以外的物体不被渲染
				 */
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 20);
				
				/**
				 * 设置相机在3D空间中的位置
				 * camera.position.set(x, y, z): 设置相机的三维坐标
				 * x (-0.75): 水平位置，负值表示向左偏移
				 * y (0.7): 垂直位置，正值表示向上偏移
				 * z (1.25): 深度位置，正值表示向前（向屏幕外）偏移
				 * 这个初始位置经过调整，确保椅子模型在视图中居中且大小合适
				 */
				camera.position.set(-0.75, 0.7, 1.25);

				/**
				 * 创建场景(Scene)对象
				 * 场景是所有3D对象的容器，包括网格、光源、相机等
				 * 可以理解为3D世界的舞台，渲染器会将这个舞台渲染到画布上
				 */
				scene = new THREE.Scene();
				
				/**
				 * 注释掉的光源设置
				 * 这里原本添加了一个白色的定向光，强度为2
				 * 但当前版本使用HDR环境贴图提供照明，所以不需要额外的定向光
				 * 如果取消注释，会在场景中添加一个平行光源
				 */
				// scene.add(new THREE.DirectionalLight(0xffffff, 2));

				// ------------------ 加载3D模型 ------------------
				/**
				 * 使用GLTFLoader加载椅子模型
				 * 加载过程是异步的，模型加载完成后会执行回调函数
				 */
				new GLTFLoader()
					/**
					 * 设置模型文件的基础路径
					 * setPath('models/gltf/'): 告诉加载器在'models/gltf/'目录下查找模型文件
					 * 这样在load方法中只需要提供相对路径
					 */
					.setPath('models/gltf/')
					/**
					 * 加载指定的glTF模型文件
					 * 'SheenChair.glb': 模型文件名，.glb是glTF的二进制格式
					 * 回调函数参数gltf: 包含加载的3D场景数据的对象
					 */
					.load('SheenChair.glb', function (gltf) {
						// 将加载的整个3D场景添加到主场景中
						// gltf.scene包含模型的所有网格、材质、变换等信息
						scene.add(gltf.scene);

						/**
						 * 通过名称查找特定的网格对象
						 * getObjectByName('SheenChair_fabric'): 在场景图中查找名为'SheenChair_fabric'的对象
						 * 这个名字是在3D建模软件中定义的，通常表示椅子的织物部分
						 * object变量现在引用的是包含Sheen材质的网格
						 */
						const object = gltf.scene.getObjectByName('SheenChair_fabric');

						/**
						 * 为找到的网格对象创建调试控制面板
						 * renderer.inspector.createParameters(): 使用Inspector插件创建参数控制面板
						 * 'SheenChair_fabric': 面板的标题，显示在GUI上
						 * 返回值gui: 控制面板对象，可以添加各种控制组件
						 */
						const gui = renderer.inspector.createParameters('SheenChair_fabric');
						
						/**
						 * 在控制面板中添加滑块控制
						 * gui.add(): Inspector的API，添加一个控制项
						 * object.material: 网格的材质对象
						 * 'sheen': 要控制的材质属性名，这是KHR_materials_sheen扩展定义的属性
						 * 0: 滑块的最小值
						 * 1: 滑块的最大值
						 * 这个滑块允许用户实时调整材质的sheen强度，观察效果变化
						 */
						gui.add(object.material, 'sheen', 0, 1);
					});

				// ------------------ 初始化WebGPU渲染器 ------------------
				/**
				 * 创建WebGPU渲染器实例
				 * WebGPURenderer: Three.js的WebGPU后端渲染器
				 * 参数{ antialias: true }: 启用抗锯齿，使3D边缘更平滑
				 * WebGPU是新一代图形API，相比WebGL有更好的性能和功能支持
				 */
				renderer = new THREE.WebGPURenderer({ antialias: true });
				
				/**
				 * 设置渲染器的像素比例
				 * window.devicePixelRatio: 设备像素比（物理像素与逻辑像素的比例）
				 * 在高DPI屏幕（如Retina显示屏）上，这个值通常大于1
				 * 设置像素比可以确保渲染分辨率与屏幕物理分辨率匹配，避免模糊
				 */
				renderer.setPixelRatio(window.devicePixelRatio);
				
				/**
				 * 设置渲染器的大小（以像素为单位）
				 * window.innerWidth: 浏览器窗口的内部宽度（不包括工具栏、滚动条等）
				 * window.innerHeight: 浏览器窗口的内部高度
				 * 这确保渲染的画布填满整个浏览器视口
				 */
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				/**
				 * 设置动画循环回调函数
				 * setAnimationLoop(animate): 指定一个函数在每一帧渲染前被调用
				 * 这个机制替代了传统的requestAnimationFrame，更适合WebGPU/WebGL渲染循环
				 * animate函数将在每一帧被调用，用于更新场景状态和重新渲染
				 */
				renderer.setAnimationLoop(animate);
				
				/**
				 * 设置色调映射(Tone Mapping)算法
				 * ACESFilmicToneMapping: 一种电影级的色调映射算法
				 * 色调映射将HDR(高动态范围)颜色值转换为显示器可以显示的LDR(低动态范围)值
				 * ACESFilmic是行业标准，能产生电影般自然的颜色和对比度
				 */
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				/**
				 * 设置色调映射的曝光值
				 * toneMappingExposure: 控制场景的整体亮度
				 * 1.0是默认值，大于1会使场景变亮，小于1会使场景变暗
				 * 这个值可以根据HDR环境贴图的亮度进行调整
				 */
				renderer.toneMappingExposure = 1;
				
				/**
				 * 将Inspector实例附加到渲染器
				 * 这样Inspector可以访问渲染器的内部状态，并提供调试功能
				 */
				renderer.inspector = new Inspector();
				
				/**
				 * 将渲染器的DOM元素（canvas）添加到之前创建的容器中
				 * renderer.domElement: 渲染器创建的canvas HTML元素
				 * container.appendChild(): 将canvas添加为容器的子元素
				 * 现在canvas显示在页面中，并准备渲染3D内容
				 */
				container.appendChild(renderer.domElement);

				/**
				 * 设置场景的背景颜色
				 * 在HDR环境贴图加载完成前，使用一个中性灰色作为背景
				 * new THREE.Color(0xAAAAAA): 创建颜色对象，参数是十六进制颜色值
				 * 这个颜色是浅灰色，与模型和环境贴图形成良好的对比
				 */
				scene.background = new THREE.Color(0xAAAAAA);

				// ------------------ 加载HDR环境贴图 ------------------
				/**
				 * 使用UltraHDRLoader加载HDR环境贴图
				 * HDR贴图提供场景的环境光照和反射信息
				 */
				new UltraHDRLoader()
					/**
					 * 设置纹理文件的基础路径
					 * setPath('textures/equirectangular/'): 指定HDR贴图所在的目录
					 */
					.setPath('textures/equirectangular/')
					/**
					 * 加载HDR贴图文件
					 * 'royal_esplanade_2k.hdr.jpg': HDR贴图文件名
					 * 这是一个2K分辨率的HDR贴图，royal_esplanade可能是拍摄地点名称
					 * 回调函数参数texture: 加载完成的纹理对象
					 */
					.load('royal_esplanade_2k.hdr.jpg', function (texture) {
						/**
						 * 设置纹理的映射方式
						 * EquirectangularReflectionMapping: 等距柱状反射映射
						 * 这种映射方式将360度环境贴图包裹在球体上，用于环境反射和背景
						 * 它是HDR环境贴图的标准映射方式
						 */
						texture.mapping = THREE.EquirectangularReflectionMapping;

						/**
						 * 将HDR贴图设置为场景背景
						 * 这样场景的背景不再是单一颜色，而是真实的HDR环境
						 * 用户旋转相机时，会看到背景也随之变化
						 */
						scene.background = texture;
						
						/**
						 * 注释掉的背景模糊设置
						 * backgroundBlurriness: 控制背景的模糊程度（0-1）
						 * 这个功能需要PMREM(Pre-filtered Mipmapped Radiance Environment Map)支持
						 * PMREM是预过滤的环境贴图，用于性能优化
						 * @TODO 表示这是一个待实现的功能
						 */
						// scene.backgroundBlurriness = 1; // @TODO: Needs PMREM
						
						/**
						 * 将HDR贴图设置为场景环境贴图
						 * environment: 环境贴图，用于物体的环境反射和全局照明
						 * 在物理渲染(PBR)中，环境贴图提供了主要的光照信息和反射内容
						 * 物体表面会反射这个环境贴图，产生真实的光照效果
						 */
						scene.environment = texture;
					});

				// ------------------ 初始化轨道控制器 ------------------
				/**
				 * 创建轨道控制器实例
				 * OrbitControls: 将相机控制和用户输入（鼠标、触摸）连接起来
				 * 参数1: camera - 要控制的相机对象
				 * 参数2: renderer.domElement - 接收用户输入事件的DOM元素（通常是canvas）
				 */
				controls = new OrbitControls(camera, renderer.domElement);
				
				/**
				 * 启用阻尼效果
				 * enableDamping: 当设置为true时，相机移动会有惯性效果
				 * 用户停止拖拽后，相机会缓慢减速停止，提供更自然的交互体验
				 * 注意：启用阻尼后，需要在动画循环中调用controls.update()
				 */
				controls.enableDamping = true;
				
				/**
				 * 设置相机与目标点的最小距离
				 * minDistance: 相机可以靠近目标点的最近距离
				 * 1个单位距离，防止相机穿过物体或离物体太近
				 */
				controls.minDistance = 1;
				
				/**
				 * 设置相机与目标点的最大距离
				 * maxDistance: 相机可以远离目标点的最远距离
				 * 10个单位距离，防止相机离物体太远
				 */
				controls.maxDistance = 10;
				
				/**
				 * 设置轨道控制的目标点（旋转和缩放的焦点）
				 * target.set(x, y, z): 设置目标点的三维坐标
				 * (0, 0.35, 0): 这个位置大约是椅子模型的中心略上方
				 * 这样旋转时会围绕椅子中心旋转，而不是场景原点
				 */
				controls.target.set(0, 0.35, 0);
				
				/**
				 * 更新控制器内部状态
				 * update(): 应用所有设置并计算初始状态
				 * 在控制器创建或参数修改后应该调用一次
				 */
				controls.update();

				// ------------------ 设置窗口大小变化监听器 ------------------
				/**
				 * 监听窗口大小变化事件
				 * window.addEventListener(): 注册事件监听器
				 * 'resize': 事件类型，当浏览器窗口大小改变时触发
				 * onWindowResize: 事件处理函数，窗口大小变化时被调用
				 * 这确保3D场景在窗口大小变化时能正确调整
				 */
				window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时，这个函数被调用
			 * 它确保3D渲染的正确显示，避免拉伸或变形
			 */
			function onWindowResize() {
				/**
				 * 更新相机的宽高比
				 * 宽高比 = 窗口宽度 / 窗口高度
				 * 如果不更新，当窗口大小变化时，3D场景会被拉伸或压缩
				 */
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/**
				 * 更新相机的投影矩阵
				 * updateProjectionMatrix(): 重新计算相机的投影变换
				 * 当相机参数（如宽高比、视野角度等）改变后，必须调用这个方法
				 * 这样新的相机参数才会在下一帧渲染中生效
				 */
				camera.updateProjectionMatrix();

				/**
				 * 更新渲染器的尺寸
				 * setSize(): 将渲染器的画布大小调整为新的窗口尺寸
				 * 这确保3D渲染填满整个窗口，保持像素级精度
				 */
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/**
			 * 动画循环函数
			 * 每一帧渲染前被调用（通常每秒60次）
			 * 这个函数负责更新场景状态和用户交互
			 * 在WebGPU/WebGL应用中，动画循环是核心机制
			 */
			function animate() {
				/**
				 * 更新轨道控制器
				 * controls.update(): 处理用户输入，计算新的相机位置
				 * 如果启用了阻尼效果（enableDamping: true），必须在每一帧调用这个方法
				 * 否则阻尼效果不会生效
				 */
				controls.update();

				/**
				 * 调用渲染函数
				 * 执行实际的3D渲染工作
				 */
				render();
			}

			/**
			 * 渲染函数
			 * 执行实际的3D场景渲染
			 * 将3D场景通过相机视角渲染到2D画布上
			 */
			function render() {
				/**
				 * 渲染器执行渲染
				 * renderer.render(scene, camera): 核心渲染方法
				 * 参数1: scene - 要渲染的3D场景
				 * 参数2: camera - 渲染使用的相机视角
				 * 这个方法会将3D场景通过指定的相机投影到2D画布上
				 */
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>