<!-- Three.js WebGPU 环境贴图示例 - 功能描述和技术要点
🎯 一、核心功能概述
这是一个使用 Three.js WebGPU 渲染器 实现的环境贴图（Environment Mapping）交互式演示。它展示了如何在 3D 场景中创建逼真的环境反射和折射效果，让用户能够实时体验和调整不同的环境映射技术。

主要演示功能：
环境反射/折射效果：在球体表面模拟周围环境的反射或折射

双模式环境贴图：支持立方体贴图和等距柱状贴图的实时切换

交互式控制：用户可以通过 GUI 界面调整各种参数

动态旋转效果：背景环境和材质可以独立或同步旋转

实时预览：所有更改立即在 3D 场景中反映

🛠️ 二、技术架构详解
1. 渲染技术栈
Three.js WebGPU 版本：使用最新的 WebGPU 渲染后端

相比传统 WebGL，WebGPU 提供更现代的 GPU 访问接口

更好的多线程支持和更低的 CPU 开销

支持计算着色器等高级功能

ES6 模块化：使用 JavaScript 模块化导入系统

2. 环境贴图技术
(1) 立方体贴图（Cube Mapping）
javascript
// 六个独立的面组成的环境立方体
纹理文件：posx.jpg, negx.jpg, posy.jpg, negy.jpg, posz.jpg, negz.jpg
原理：使用 6 张 2D 纹理组成一个虚拟立方体

优点：性能高效，适合实时渲染

缺点：需要准备 6 张匹配的图片

(2) 等距柱状贴图（Equirectangular Mapping）
javascript
// 单张全景图片（360° × 180°）
纹理文件：2294472375_24a3b8ef46_o.jpg
原理：将球形环境展开为 2:1 的矩形图片

优点：单张图片即可表示完整环境，制作相对简单

缺点：需要实时转换为立方体贴图或球谐函数

3. 映射技术类型
(1) 反射映射（Reflection Mapping）
THREE.EquirectangularReflectionMapping

THREE.CubeReflectionMapping

模拟镜面反射效果，物体像镜子一样反射环境

(2) 折射映射（Refraction Mapping）
THREE.EquirectangularRefractionMapping

THREE.CubeRefractionMapping

模拟光线透过透明物体的折射效果

可以模拟玻璃、水等材质的视觉效果

4. 核心3D组件
(1) 相机系统
javascript
THREE.PerspectiveCamera(70, aspect, 0.1, 100)
透视投影：模拟人眼视觉效果

视锥体：近裁剪面 0.1，远裁剪面 100

自适应：根据窗口尺寸自动调整宽高比

(2) 几何体
javascript
THREE.IcosahedronGeometry(1, 15)
二十面体：近似球体的多面体

细分级别 15：通过细分获得光滑的球体表面

顶点数控制：平衡视觉效果和渲染性能

(3) 材质系统
javascript
THREE.MeshBasicMaterial({ envMap: textureCube })
基础网格材质：不受光照影响，仅显示环境贴图

envMap 属性：关键的环境贴图引用

needsUpdate 机制：Three.js 的材质更新标记系统

5. 交互控制系统
(1) OrbitControls 轨道控制器
javascript
new OrbitControls(camera, renderer.domElement)
鼠标拖拽：旋转相机视角

滚轮缩放：调整相机距离

限制范围：防止相机穿模或过度远离

(2) Inspector GUI 系统
javascript
renderer.inspector.createParameters('控制参数')
实时参数调节：无需刷新页面

回调函数机制：参数变化时触发场景更新

可视化界面：直观的滑块和切换按钮

6. 动画与渲染循环
(1) 渲染循环机制
javascript
renderer.setAnimationLoop(animate)
基于时间戳：确保动画流畅性

自动帧率适应：与显示器刷新率同步

增量更新：通过时间差计算平滑过渡

(2) 旋转动画系统
javascript
scene.backgroundRotation.x += 0.001
增量旋转：每帧增加固定角度

独立控制：X/Y/Z 轴可分别控制

同步机制：材质旋转可与背景旋转同步

🔧 三、关键技术实现
1. 纹理加载与处理
javascript
// 异步加载优化
const loader = new THREE.CubeTextureLoader();
loader.setPath('textures/cube/Bridge2/');
路径预设置：简化文件引用

渐进式加载：大纹理文件的加载优化

颜色空间管理：确保 sRGB 颜色正确显示

2. 场景管理
javascript
scene.background = textureCube;  // 背景环境
scene.add(sphereMesh);           // 添加物体
层次结构：场景作为所有对象的容器

状态管理：背景、环境光、雾等全局设置

资源管理：自动清理未使用的纹理和几何体

3. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
视口适配：自动适应不同屏幕尺寸

像素比感知：支持高 DPI 显示器（Retina）

性能优化：避免不必要的重渲染

4. 内存管理
javascript
// 自动垃圾回收
// 但需要注意：
// 1. 纹理引用计数
// 2. 几何体缓存
// 3. 材质实例共享
Three.js 内部缓存：重复使用几何体和材质

手动释放：dispose() 方法显式释放资源

内存泄漏预防：移除场景对象时的清理

🚀 四、性能优化策略
1. WebGPU 特定优化
命令缓冲：减少 CPU-GPU 通信开销

并行渲染：更好的多线程支持

计算着色器：未来可扩展的优化空间

2. 渲染优化
几何体优化：通过细分级别控制顶点数

纹理尺寸：根据显示需求选择合适的纹理分辨率

渲染调用批处理：减少状态切换

3. 动画优化
增量更新：避免每帧重新计算完整状态

条件渲染：只在需要时执行特定计算

帧率稳定：防抖动和帧时间平滑处理

💡 五、可扩展性设计
1. 模块化扩展
添加新材质：轻松替换为物理材质(PBR)

多物体支持：可扩展为多个不同材质的物体

后期处理：可集成 Bloom、SSAO 等后期效果

2. 功能扩展
动态环境贴图：实时生成环境贴图

HDR 支持：高动态范围环境贴图

多视角渲染：同时显示多个相机视角

3. 交互扩展
VR/AR 支持：通过 WebXR 扩展

手势控制：移动设备触摸交互

键盘控制：增强导航功能

📊 六、技术难点与解决方案
1. 环境贴图切换
难点：不同映射类型的无缝切换
解决方案：

javascript
sphereMaterial.envMap = newTexture;
sphereMaterial.needsUpdate = true;
2. 反射/折射切换
难点：映射类型的动态更改
解决方案：

javascript
texture.mapping = isRefraction ? 
    THREE.CubeRefractionMapping : 
    THREE.CubeReflectionMapping;
3. 旋转同步
难点：多个旋转轴的独立控制
解决方案：

javascript
if (params.syncMaterial) {
    sphereMesh.material.envMapRotation.copy(scene.backgroundRotation);
}
🌟 七、实际应用场景
1. 产品可视化
珠宝、手表等反光产品的在线展示

汽车漆面效果预览

建筑玻璃幕墙反射效果

2. 游戏开发
角色装备的金属反射

水面和玻璃的折射效果

天空盒和环境光照

3. 教育培训
光学原理教学（反射、折射）

材质特性展示

3D 图形学教学

4. 虚拟展厅
艺术品在不同光照环境下的展示

室内设计材质预览

虚拟试衣间的环境反射

🔮 八、未来发展方向
1. 技术升级
Ray Tracing：实时光线追踪环境反射

AI 降噪：机器学习优化的实时渲染

动态全局光照：实时计算的环境光照

2. 功能增强
材质编辑器：可视化材质参数调节

环境捕获：从用户摄像头实时生成环境贴图

跨平台优化：更好的移动端和 VR 支持 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元数据 -->
		<!-- 标题：Three.js环境贴图示例（WebGPU版本） -->
		<title>Three.js WebGPU - 环境贴图示例</title>
		<!-- 字符编码：使用UTF-8支持中文字符 -->
		<meta charset="utf-8">
		<!-- 
			视口设置(Viewport)：
			width=device-width - 宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放（防止移动端缩放影响3D效果）
			minimum-scale=1.0 - 最小缩放比例为1.0
			maximum-scale=1.0 - 最大缩放比例为1.0
			这些设置确保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>
		<!-- 
			信息展示区域容器：
			id="info" - 用于CSS样式选择和JavaScript操作
			这个区域通常显示标题、链接和说明信息
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接：
				href - 指向Three.js官网
				target="_blank" - 在新标签页打开链接
				rel="noopener" - 安全设置，防止新页面访问原页面的window对象
				class="logo-link" - 通常用于添加Three.js Logo背景图片样式
				这是一个无文字的链接，点击会跳转到Three.js官网
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
				<!-- 链接内通常没有文字内容，使用CSS背景图片显示Logo -->
			</a>

			<!-- 标题包装容器：用于样式控制 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接：
					同样指向Three.js官网，但有文字显示
					用户可以看到并点击"Three.js"文字
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 
					副标题/当前示例名称：
					这是一个普通文本元素，显示当前示例的具体名称
					"环境贴图"表示这个示例演示的是环境映射技术
				-->
				<span>环境贴图</span>
			</div>

			<!-- 
				版权和图片来源说明：
				<small>标签表示次要信息，通常显示较小字体
				这里说明了等距柱状贴图的作者信息
			-->
			<small>
				<!-- 
					等距柱状环境贴图版权信息：
					href指向摄影师的作品页面
					target和rel属性确保安全地在新的标签页打开
				-->
				等距柱状贴图由 <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a> 提供。
				<br>
				<!-- 添加额外的中文说明 -->
				本示例展示Three.js中的环境映射技术，包括立方体贴图和等距柱状贴图。
			</small>
		</div>

		<!-- 
			导入映射(Import Map)配置：
			这是一个现代JavaScript模块加载机制，允许为模块指定别名和路径
			浏览器在解析import语句时会参考这个配置
		-->
		<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对象
			// WebGPU是新一代图形API，替代WebGL，提供更好的性能和更现代的GPU功能访问
			import * as THREE from 'three/webgpu';

			// 导入调试检查器：用于创建参数控制面板(GUI)
			// Inspector是一个可视化调试工具，可以实时调整场景参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器：提供鼠标/触摸交互控制
			// OrbitControls允许用户通过鼠标拖拽、滚轮缩放来操作3D场景
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ==================== 全局变量声明 ====================
			// 控制器对象：用于处理用户输入控制相机
			let controls;
			// 相机对象：定义观察3D场景的视角
			let camera;
			// 场景对象：包含所有要渲染的3D对象（网格、灯光、相机等）
			let scene;
			// 渲染器对象：负责将3D场景绘制到2D画布上
			let renderer;
			
			// 纹理对象：
			// textureEquirec - 等距柱状环境贴图（单张全景图）
			// textureCube - 立方体环境贴图（6个面的图片）
			let textureEquirec, textureCube;
			
			// 3D对象：
			// sphereMesh - 球体网格对象（几何体+材质的组合）
			// sphereMaterial - 球体的材质对象（定义外观属性）
			// params - 参数对象，存储GUI控制的各种设置
			let sphereMesh, sphereMaterial, params;

			// ==================== 初始化调用 ====================
			// 页面加载完成后立即调用初始化函数
			// 这是整个程序的入口点
			init();

			// ==================== 初始化函数定义 ====================
			/**
			 * 初始化函数：设置整个Three.js应用
			 * 这个函数按顺序执行：
			 * 1. 创建相机和场景
			 * 2. 加载纹理资源
			 * 3. 创建3D对象
			 * 4. 设置渲染器
			 * 5. 添加控制器和GUI
			 * 6. 绑定事件监听器
			 */
			function init() {
				// ---------- 第一部分：相机设置 ----------
				// 创建透视相机(PerspectiveCamera)，模拟人眼视角
				// 参数说明：
				// 70 - 视野角度(Field of View)，单位度，影响可见范围大小
				// window.innerWidth/window.innerHeight - 宽高比，根据窗口尺寸自动计算
				// 0.1 - 近裁剪面，距离相机0.1单位以内的物体不显示
				// 100 - 远裁剪面，距离相机100单位以外的物体不显示
				camera = new THREE.PerspectiveCamera(
					70, 
					window.innerWidth / window.innerHeight, 
					0.1, 
					100
				);
				
				// 设置相机初始位置
				// 参数：x坐标, y坐标, z坐标
				// 这里将相机放在z轴2.5单位位置，面向原点(0,0,0)
				camera.position.set(0, 0, 2.5);

				// ---------- 第二部分：场景设置 ----------
				// 创建场景对象，作为所有3D对象的容器
				// Scene类似于一个舞台，包含要渲染的所有内容
				scene = new THREE.Scene();

				// ---------- 第三部分：纹理加载 ----------
				// 3.1 创建立方体贴图加载器
				// CubeTextureLoader专门用于加载立方体环境的6个面
				const loader = new THREE.CubeTextureLoader();
				
				// 设置纹理文件的基础路径
				// 所有后续加载的文件都会在这个路径下查找
				loader.setPath('textures/cube/Bridge2/');
				
				// 加载立方体贴图的6个面图片
				// 参数顺序非常重要，必须是：[正x, 负x, 正y, 负y, 正z, 负z]
				// 这些图片组成一个完整的环境立方体
				textureCube = loader.load([
					'posx.jpg',  // 正X面（右面）
					'negx.jpg',  // 负X面（左面）
					'posy.jpg',  // 正Y面（上面）
					'negy.jpg',  // 负Y面（下面）
					'posz.jpg',  // 正Z面（前面）
					'negz.jpg'   // 负Z面（后面）
				]);

				// 3.2 创建通用纹理加载器
				// TextureLoader可以加载各种类型的2D纹理
				const textureLoader = new THREE.TextureLoader();
				
				// 加载等距柱状环境贴图（全景图）
				// 这是一张长方形的图片，包含360度环境信息
				textureEquirec = textureLoader.load('textures/2294472375_24a3b8ef46_o.jpg');
				
				// 设置等距柱状贴图的映射类型
				// EquirectangularReflectionMapping表示该贴图用于环境反射
				textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
				
				// 设置颜色空间
				// SRGBColorSpace是标准颜色空间，确保颜色显示正确
				textureEquirec.colorSpace = THREE.SRGBColorSpace;

				// 设置场景背景
				// 初始使用立方体贴图作为场景背景
				// 用户会看到一个环绕的环境背景
				scene.background = textureCube;

				// ---------- 第四部分：创建3D物体 ----------
				// 4.1 创建几何体：二十面体
				// IcosahedronGeometry是近似球体的多面体
				// 参数：半径=1，细分级别=15
				// 细分级别越高，球体越光滑，但顶点数也越多
				const geometry = new THREE.IcosahedronGeometry(1, 15);
				
				// 4.2 创建材质：基础网格材质
				// MeshBasicMaterial是最简单的材质，不受灯光影响
				// envMap属性指定环境贴图，物体会反射周围环境
				sphereMaterial = new THREE.MeshBasicMaterial({ 
					envMap: textureCube  // 初始使用立方体贴图
				});
				
				// 4.3 创建网格：组合几何体和材质
				// Mesh是Three.js中最基本的可渲染对象
				sphereMesh = new THREE.Mesh(geometry, sphereMaterial);
				
				// 4.4 将球体添加到场景中
				// 现在球体会出现在场景原点(0,0,0)位置
				scene.add(sphereMesh);

				// ---------- 第五部分：渲染器设置 ----------
				// 5.1 创建WebGPU渲染器
				// WebGPURenderer是Three.js的下一代渲染器
				// 相比WebGLRenderer，它提供更好的性能和更现代的特性
				renderer = new THREE.WebGPURenderer();
				
				// 5.2 设置设备像素比
				// window.devicePixelRatio获取设备的物理像素与CSS像素比例
				// 在高DPI屏幕（如Retina显示屏）上，这个值通常大于1
				// 设置正确的像素比可以避免图像模糊
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 5.3 设置渲染器尺寸
				// 让渲染器填满整个浏览器窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 5.4 设置动画循环
				// setAnimationLoop指定每帧调用的函数
				// 这比传统的requestAnimationFrame更方便
				// animate函数会在每一帧被自动调用
				renderer.setAnimationLoop(animate);
				
				// 5.5 创建调试检查器
				// Inspector用于创建参数控制面板(GUI)
				renderer.inspector = new Inspector();
				
				// 5.6 将渲染器的DOM元素添加到页面
				// renderer.domElement是<canvas>元素，所有3D内容都绘制在这里
				document.body.appendChild(renderer.domElement);

				// ---------- 第六部分：控制器设置 ----------
				// 创建轨道控制器
				// 参数1：要控制的相机对象
				// 参数2：事件监听的DOM元素（通常是渲染器的canvas）
				controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置相机最小距离（不能太靠近物体）
				controls.minDistance = 1.5;
				
				// 设置相机最大距离（不能太远离物体）
				controls.maxDistance = 6;

				// ---------- 第七部分：GUI参数初始化 ----------
				// 定义用户可以通过GUI调整的所有参数
				params = {
					Type: 'Cube',  // 环境贴图类型：'Cube'或'Equirectangular'
					Refraction: false,  // 是否使用折射效果（false为反射）
					backgroundRotationX: false,  // 是否启用背景绕X轴旋转
					backgroundRotationY: false,  // 是否启用背景绕Y轴旋转
					backgroundRotationZ: false,  // 是否启用背景绕Z轴旋转
					syncMaterial: false  // 是否同步材质旋转和背景旋转
				};

				// 创建GUI控制面板
				// createParameters方法创建参数控制组
				const gui = renderer.inspector.createParameters('控制参数');
				
				// 7.1 添加贴图类型选择器
				gui.add(params, 'Type', ['Cube', 'Equirectangular'])
				   .name('贴图类型')  // 设置中文显示名称
				   .onChange(function (value) {
						// 当用户改变选项时执行的回调函数
						if (value === 'Cube') {
							// 切换到立方体贴图
							scene.background = textureCube;  // 更新场景背景
							sphereMaterial.envMap = textureCube;  // 更新材质环境贴图
							sphereMaterial.needsUpdate = true;  // 标记材质需要更新
						} else if (value === 'Equirectangular') {
							// 切换到等距柱状贴图
							scene.background = textureEquirec;  // 更新场景背景
							sphereMaterial.envMap = textureEquirec;  // 更新材质环境贴图
							sphereMaterial.needsUpdate = true;  // 标记材质需要更新
						}
					});
				
				// 7.2 添加反射/折射切换开关
				gui.add(params, 'Refraction')
				   .name('折射效果')  // 设置中文显示名称
				   .onChange(function (value) {
						// 当用户切换反射/折射时执行
						if (value) {
							// 切换到折射映射
							textureEquirec.mapping = THREE.EquirectangularRefractionMapping;
							textureCube.mapping = THREE.CubeRefractionMapping;
						} else {
							// 切换回反射映射
							textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
							textureCube.mapping = THREE.CubeReflectionMapping;
						}
						// 标记材质需要更新
						sphereMaterial.needsUpdate = true;
					});
				
				// 7.3 添加三个旋转控制开关
				gui.add(params, 'backgroundRotationX').name('X轴旋转');
				gui.add(params, 'backgroundRotationY').name('Y轴旋转');
				gui.add(params, 'backgroundRotationZ').name('Z轴旋转');
				
				// 7.4 添加旋转同步开关
				gui.add(params, 'syncMaterial').name('同步材质旋转');

				// ---------- 第八部分：事件监听器 ----------
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，需要更新相机和渲染器
				window.addEventListener('resize', onWindowResize);
				
				// 初始化完成，控制台输出信息
				console.log('Three.js环境贴图示例初始化完成');
				console.log('使用鼠标拖拽旋转视角，滚轮缩放');
				console.log('在右侧控制面板调整参数查看不同效果');
			}

			// ==================== 窗口大小变化处理函数 ====================
			/**
			 * 处理窗口大小变化事件
			 * 当浏览器窗口改变大小时，需要更新：
			 * 1. 相机的宽高比（防止图像拉伸）
			 * 2. 渲染器的尺寸（填满新窗口）
			 */
			function onWindowResize() {
				// 更新相机宽高比
				// 使用新的窗口尺寸计算宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 当相机参数改变后，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸
				// 确保canvas元素与窗口大小一致
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 可选：在控制台输出新尺寸（调试用）
				console.log(`窗口大小已更新: ${window.innerWidth} × ${window.innerHeight}`);
			}

			// ==================== 动画循环函数 ====================
			/**
			 * 动画循环函数（每帧调用）
			 * 这是Three.js应用的核心循环，负责：
			 * 1. 更新场景状态（如旋转）
			 * 2. 执行必要的计算
			 * 3. 渲染场景到画布
			 * 
			 * 注意：这个函数会被自动调用，频率通常是每秒60次（60fps）
			 */
			function animate() {
				// ---------- 第一部分：更新背景旋转 ----------
				// 根据GUI设置，更新场景背景的旋转角度
				
				// 如果启用了X轴旋转
				if (params.backgroundRotationX) {
					// scene.backgroundRotation是Three.js场景对象的属性
					// 控制环境贴图的旋转
					// 每帧增加0.001弧度（约0.057度），实现缓慢旋转效果
					scene.backgroundRotation.x += 0.001;
				}
				
				// 如果启用了Y轴旋转
				if (params.backgroundRotationY) {
					// 同样每帧增加0.001弧度
					scene.backgroundRotation.y += 0.001;
				}
				
				// 如果启用了Z轴旋转
				if (params.backgroundRotationZ) {
					// 同样每帧增加0.001弧度
					scene.backgroundRotation.z += 0.001;
				}

				// ---------- 第二部分：同步材质旋转 ----------
				// 如果启用了同步功能，将材质的旋转与背景旋转保持一致
				if (params.syncMaterial) {
					// copy方法复制旋转值
					// 这样球体表面的环境贴图旋转会和背景环境旋转完全一致
					sphereMesh.material.envMapRotation.copy(scene.backgroundRotation);
				}

				// ---------- 第三部分：确保相机看向场景中心 ----------
				// 虽然轨道控制器通常会自动处理，但明确设置更安全
				// scene.position通常是(0,0,0)，即场景原点
				camera.lookAt(scene.position);
				
				// ---------- 第四部分：渲染场景 ----------
				// 这是最关键的一步：将3D场景绘制到2D画布上
				// 参数1：要渲染的场景对象
				// 参数2：使用的相机对象
				renderer.render(scene, camera);
				
				// 可选：更新控制器（如果控制器需要每帧更新）
				// controls.update(); // OrbitControls通常不需要手动调用update
				
				// 可选：性能监控（调试用）
				// 可以在这里添加帧率计算等性能监控代码
			}
			
			// ==================== 结束模块定义 ====================
			// 注意：模块最后不需要分号，但加上也无妨
		</script>
		
		<!-- 
			页面结束
			所有Three.js相关的代码都在上面的<script type="module">中
			这里可以添加其他HTML内容，但通常Three.js应用会占用整个页面
		-->
	</body>
</html>