<!-- Three.js WebGPU 视差贴图演示代码功能与技术点详解
🎯 整体功能概述
这是一个基于 Three.js WebGPU 的3D视差贴图效果演示，展示了一个具有逼真冰面效果的立方体，通过视差贴图技术模拟表面的深度和凹凸感。页面加载后，用户可以看到一个自动旋转的冰面立方体，可以通过鼠标交互控制视角。

🔧 主要技术组件
1. Three.js WebGPU 渲染器
javascript
renderer = new THREE.WebGPURenderer({ antialias: true });
技术点：使用下一代图形API WebGPU替代传统的WebGL

优势：

更高的渲染性能

更好的并行计算能力

更低的CPU开销

支持更复杂的着色器效果

2. 视差贴图技术 (Parallax Mapping)
javascript
const parallaxUVOffset = parallaxUV(uv(), offsetUV);
核心原理：通过偏移纹理坐标模拟表面深度

与传统技术的对比：

法线贴图：仅改变光照计算，不产生视差

视差贴图：根据观察角度偏移纹理，产生真实的深度错觉

位移贴图：实际改变几何顶点，性能消耗大

3. PBR（基于物理的渲染）材质系统
javascript
const material = new THREE.MeshStandardNodeMaterial();
支持的PBR属性：

颜色贴图（Color Map）

粗糙度贴图（Roughness Map）

法线贴图（Normal Map）

环境反射（Environment Reflection）

4. TSL（Three.js Shader Language）着色器系统
javascript
import { texture, parallaxUV, blendOverlay, uv } from 'three/tsl';
特点：

声明式着色器编程

节点化材质系统

实时编译为WebGPU着色器

🏗️ 代码结构详解
第一部分：资源加载与准备
javascript
// 环境贴图加载
const environmentTexture = await new THREE.CubeTextureLoader()
    .setPath('./textures/cube/Park2/')
    .loadAsync(['posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg']);
技术栈：

立方体贴图（Skybox）：模拟360度环境

异步加载：避免阻塞主线程

色彩空间管理：SRGB用于颜色，Linear用于数据

第二部分：多层纹理混合系统
javascript
// 纹理分层结构
const iceNode = blendOverlay(texture(topTexture), parallaxResult);
纹理层次：

text
第1层（顶部）：Ice002 表面纹理（颜色+细节）
    ↓ blendOverlay混合
第2层（视差层）：Ice003 底层纹理 + 视差偏移
    ↓ 基于高度图偏移
第3层（高度图）：位移贴图控制偏移量
第三部分：着色器节点网络
视觉化流程：

text
原始UV坐标 → 读取位移贴图 → 计算偏移量 → 偏移UV坐标
    ↓
采样底层纹理 → 叠加混合 → 增强对比度 → 最终颜色
    ↓
应用粗糙度 → 应用法线 → 环境反射 → 屏幕显示
🚀 核心渲染流程
1. 初始化阶段
text
加载资源 → 创建场景 → 设置相机 → 创建材质 → 构建网格
2. 渲染循环（每帧）
text
用户输入处理 → 相机矩阵更新 → 着色器执行 → 像素绘制
    ↑                                    ↓
控制器更新 ← 动画循环 ← WebGPU命令提交
3. 视差效果计算流程
text
屏幕像素 → 获取UV坐标 → 读取高度值 → 计算观察向量
    ↓
计算偏移量 → 偏移UV坐标 → 采样底层纹理 → 混合计算
    ↓
光照计算 → 色调映射 → 输出颜色
💡 关键技术点详解
1. 视差偏移算法
javascript
// 核心计算逻辑（伪代码）
function calculateParallaxOffset(uv, height, viewDirection, scale) {
    // 1. 从高度图获取当前点的高度
    float height = texture2D(displacementMap, uv).r;
    
    // 2. 计算观察方向在切线空间的投影
    vec3 viewDir = normalize(viewDirection);
    
    // 3. 根据高度和观察方向计算UV偏移
    vec2 offset = viewDir.xy * (height * scale) / viewDir.z;
    
    // 4. 应用偏移并返回新的UV坐标
    return uv - offset;
}
2. 叠加混合模式 (Overlay Blend)
公式：

text
if (base < 0.5)
    result = 2 * base * overlay
else
    result = 1 - 2 * (1 - base) * (1 - overlay)
效果：保留亮部和暗部细节，增强对比度

3. 色调映射与曝光控制
javascript
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = 6;
Reinhard色调映射：将HDR值压缩到显示范围

高曝光值：增强冰面的高光效果，使其更耀眼

🎮 交互功能设计
1. OrbitControls 轨道控制器
旋转：鼠标左键拖拽

缩放：鼠标滚轮

平移：鼠标右键拖拽

自动旋转：场景缓慢自转展示

2. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
自适应：窗口大小变化时自动调整

像素比适配：支持高DPI显示屏

📊 性能优化策略
1. WebGPU特性利用
并行计算：同时处理多个像素

管道状态缓存：减少状态切换开销

计算着色器：可选的性能优化路径

2. 纹理优化
Mipmap生成：避免远处纹理闪烁

纹理压缩：减少内存占用

色彩空间优化：只对颜色纹理使用SRGB

3. 渲染优化
抗锯齿：MSAA或后期处理抗锯齿

裁剪剔除：只渲染可见部分

实例化渲染：适合重复对象的渲染

🔍 视觉效果分析
1. 冰面材质特点
高反射率：环境贴图强烈反射

表面粗糙度变化：混合了光滑和粗糙区域

透明度效果：通过视差模拟冰的透明感

内部细节：底层的纹理可见性

2. 视差效果表现
角度依赖：观察角度不同，偏移效果不同

深度连续性：不会有明显的"层"分离

性能平衡：比位移贴图性能好，比法线贴图效果好

🚀 扩展可能性
1. 技术扩展
视差遮蔽贴图：更精确的遮挡关系

动态高度图：实时修改表面高度

多层混合：更多层次的纹理混合

2. 应用场景
游戏开发：地面、墙面等表面的细节增强

产品展示：高质量材质预览

教育演示：图形学技术教学

3. 性能提升
计算着色器：复杂效果预计算

LOD系统：根据距离调整细节

异步编译：着色器预编译

总结
这个演示展示了Three.js WebGPU在现代图形技术方面的强大能力，特别是：

先进的渲染技术：WebGPU + PBR + 视差贴图

灵活的着色器系统：TSL节点化编程

高质量视觉效果：逼真的冰面材质表现

优秀的用户体验：流畅的交互和动画 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的名称
			"three.js webgpu - 视差贴图效果演示"：
			    - three.js：使用的3D图形库
			    - webgpu：使用的渲染API（下一代图形API，替代WebGL）
			    - 视差贴图：一种模拟表面深度和凹凸感的纹理技术
			    - 效果演示：表明这是一个技术展示页面
		-->
		<title>three.js webgpu - 视差贴图效果演示</title>
		
		<!-- 
			字符编码设置：utf-8确保中文字符正确显示
			UTF-8是通用的多字节编码，支持几乎所有语言的字符
		-->
		<meta charset="utf-8">
		
		<!-- 
			响应式视口设置，用于移动设备适配：
			- width=device-width：视口宽度等于设备宽度
			- user-scalable=no：禁止用户手动缩放页面
			- minimum-scale=1.0：最小缩放比例为1（100%）
			- maximum-scale=1.0：最大缩放比例为1（100%）
			这个设置确保了在移动设备上页面以固定比例显示
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			外部样式表链接：
			- type="text/css"：指定链接文件的MIME类型
			- rel="stylesheet"：定义当前文档与链接资源的关系为样式表
			- href="example.css"：样式表文件的相对路径
			这个CSS文件包含了页面的布局、颜色、字体等样式定义
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			页面信息展示区域（id="info"）：
			这个div用于展示页面标题、logo和相关信息
			通常固定在页面的某个位置（如左上角或顶部）
		-->
		<div id="info">
			<!-- 
				Three.js 官网链接：
				- href：链接到Three.js官方网站
				- target="_blank"：在新标签页中打开链接
				- rel="noopener"：安全属性，防止新页面通过window.opener访问原页面
				- class="logo-link"：CSS类名，通常用于添加Three.js的logo背景图片
				这个链接通常显示为Three.js的logo图标
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
			</a>

			<!-- 标题包装容器，用于统一管理标题元素的样式和布局 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接：仍然链接到Three.js官网
					这里显示文字"three.js"而不是logo
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">
					three.js WebGPU 引擎
				</a>
				<!-- 
					副标题：显示当前演示的具体技术名称
					"视差UV贴图"：
					- 视差：Parallax，一种产生深度错觉的技术
					- UV：纹理坐标系统，U代表水平方向，V代表垂直方向
					- 贴图：Texture Mapping，将2D图像映射到3D表面的技术
				-->
				<span> - 视差UV贴图效果</span>
			</div>

			<!-- 
				版权和来源信息区域：
				<small>标签表示小号字体，通常用于免责声明、版权信息等次要内容
			-->
			<small>
				<!-- 纹理资源来源声明 -->
				纹理资源由 <a href="https://ambientcg.com/view?id=Ice002" target="_blank" rel="noopener">
					ambientCG
				</a> 提供。
				<!-- 
					ambientCG：一个提供免费高质量3D纹理的网站
					Ice002：具体使用的纹理包名称（冰面纹理）
				-->
			</small>
			
			<!-- 
				技术说明区域：添加关于视差贴图的简要说明
			-->
			<div class="tech-description" style="margin-top: 50px;">
				<strong>技术说明：</strong>
				视差贴图是一种通过偏移纹理坐标来模拟表面深度的技术。
				与法线贴图相比，它能产生更真实的凹凸感和深度错觉。
				本示例使用WebGPU渲染，展示了多层纹理的视差混合效果。
			</div>
			
			<!-- 
				交互说明区域：告诉用户如何操作
			-->
			<div class="interaction-hint">
				<strong>操作提示：</strong>
				使用鼠标拖拽旋转视角 · 滚动鼠标滚轮缩放 · 自动旋转已启用
			</div>
		</div>

		<!-- 
			Import Maps（导入映射表）：
			这是ES模块的标准功能，允许在导入模块时重写URL
			type="importmap"：指定脚本类型为导入映射
			
			作用：
			1. 定义模块标识符与实际URL的映射关系
			2. 允许在不修改代码的情况下更换库版本
			3. 提供更简洁的导入语法
			
			在这个配置中：
			- 将"three"映射到WebGPU版本的three.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语法
			延迟执行，在HTML解析完成后才执行
		-->
		<script type="module">

			// ==================== 模块导入区域 ====================
			
			// 导入Three.js WebGPU核心库的所有功能
			// THREE现在是一个包含所有Three.js WebGPU API的对象
			import * as THREE from 'three/webgpu';
			
			// 从TSL模块导入特定的着色器函数：
			// - texture: 纹理采样函数，用于在着色器中读取纹理
			// - parallaxUV: 视差UV计算函数，根据高度图偏移UV坐标
			// - blendOverlay: 叠加混合模式函数，用于混合两个颜色/纹理
			// - uv: 获取当前片元的UV坐标
			import { texture, parallaxUV, blendOverlay, uv } from 'three/tsl';
			
			// 导入轨道控制器，用于实现鼠标/触摸屏的相机控制
			// 支持旋转、缩放、平移等交互操作
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ==================== 全局变量声明 ====================
			
			// Three.js核心对象：
			let camera;     // 相机：决定3D场景的观察视角和投影方式
			let scene;      // 场景：所有3D对象的容器，包含网格、灯光等
			let renderer;   // 渲染器：负责将3D场景绘制到2D画布上
			
			// 交互控制对象：
			let controls;   // 轨道控制器实例，用于用户交互

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

			// ==================== 主初始化函数 ====================
			
			/**
			 * 异步初始化函数
			 * 负责设置整个3D场景的所有组件：
			 * 1. 创建场景和相机
			 * 2. 加载纹理和资源
			 * 3. 创建几何体和材质
			 * 4. 设置渲染器和控制器
			 * 5. 绑定事件监听器
			 */
			async function init() {

				// --- 1. 场景初始化 ---
				
				// 创建场景对象
				// 场景是Three.js中所有可见对象的根容器
				// 包括网格、灯光、相机等
				scene = new THREE.Scene();
				
				// 场景可以设置环境光、雾效、背景等属性
				// 这里稍后会设置环境贴图和背景

				// --- 2. 相机初始化 ---
				
				/**
				 * 创建透视相机
				 * 参数说明：
				 * @param {number} 45 - 视野角度（Field of View），单位度
				 *    决定了相机能看到多宽的范围，类似人眼的视野
				 * @param {number} window.innerWidth / window.innerHeight - 宽高比
				 *    确保渲染的画面不被拉伸变形
				 * @param {number} 0.1 - 近裁剪面距离
				 *    距离相机小于0.1单位的物体不会被渲染
				 * @param {number} 50 - 远裁剪面距离
				 *    距离相机大于50单位的物体不会被渲染
				 */
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 50);
				
				/**
				 * 设置相机初始位置
				 * 参数说明：
				 * @param {number} 10 - X轴坐标（左右方向）
				 * @param {number} 14 - Y轴坐标（上下方向）
				 * @param {number} 10 - Z轴坐标（前后方向）
				 * 这个位置提供了一个俯视场景的角度
				 */
				camera.position.set(10, 14, 10);
				
				// 注意：此时相机还没有指向场景中心
				// 轨道控制器会在初始化后设置目标点

				// --- 3. 环境贴图加载 ---
				
				/**
				 * 创建立方体贴图加载器
				 * 立方体贴图由6张图片组成，形成一个包围盒
				 * 用于模拟环境反射和背景
				 */
				const environmentTexture = await new THREE.CubeTextureLoader()
					// 设置纹理文件所在的目录路径
					.setPath('./textures/cube/Park2/')
					/**
					 * 异步加载6个面的纹理图片
					 * 参数顺序：右、左、上、下、前、后
					 * 对应立方体的6个面
					 */
					.loadAsync([
						'posx.jpg',  // 右面（+X方向）
						'negx.jpg',  // 左面（-X方向）
						'posy.jpg',  // 上面（+Y方向）
						'negy.jpg',  // 下面（-Y方向）
						'posz.jpg',  // 前面（+Z方向）
						'negz.jpg'   // 后面（-Z方向）
					]);

				/**
				 * 设置场景的环境贴图
				 * 环境贴图会影响所有物体的环境反射
				 * 金属和光滑的表面会反射环境贴图
				 */
				scene.environment = environmentTexture;
				
				/**
				 * 设置场景的背景
				 * 背景贴图会显示在场景中所有物体的后面
				 * 这里使用与环境贴图相同的立方体贴图
				 */
				scene.background = environmentTexture;

				// --- 4. 纹理加载 ---
				
				// 创建纹理加载器实例
				// TextureLoader是Three.js内置的图片加载工具
				// 支持JPG、PNG等多种格式
				const loader = new THREE.TextureLoader();

				/**
				 * 加载顶部冰面颜色纹理
				 * 这是一个冰面的表面纹理，显示冰的细节和颜色变化
				 */
				const topTexture = await loader.loadAsync(
					'textures/ambientcg/Ice002_1K-JPG_Color.jpg'
				);
				// 颜色纹理通常使用SRGB色彩空间
				// SRGB更符合人眼感知，能提供更自然的颜色过渡
				topTexture.colorSpace = THREE.SRGBColorSpace;

				/**
				 * 加载粗糙度纹理
				 * 粗糙度贴图控制表面的粗糙程度
				 * 白色表示粗糙（漫反射），黑色表示光滑（镜面反射）
				 */
				const roughnessTexture = await loader.loadAsync(
					'textures/ambientcg/Ice002_1K-JPG_Roughness.jpg'
				);
				// 粗糙度贴图是灰度图，不需要色彩空间转换
				roughnessTexture.colorSpace = THREE.NoColorSpace;

				/**
				 * 加载法线纹理
				 * 法线贴图通过改变表面法线方向来模拟凹凸细节
				 * 不会实际改变几何形状，但能产生逼真的光影效果
				 */
				const normalTexture = await loader.loadAsync(
					'textures/ambientcg/Ice002_1K-JPG_NormalGL.jpg'
				);
				// 法线贴图存储的是方向信息，不需要色彩空间
				normalTexture.colorSpace = THREE.NoColorSpace;

				/**
				 * 加载位移纹理（高度图）
				 * 位移贴图存储表面的高度信息
				 * 用于视差贴图计算，产生真实的深度错觉
				 * 白色区域表示"高"，黑色区域表示"低"
				 */
				const displaceTexture = await loader.loadAsync(
					'textures/ambientcg/Ice002_1K-JPG_Displacement.jpg'
				);
				// 位移贴图也是灰度图
				displaceTexture.colorSpace = THREE.NoColorSpace;

				/**
				 * 加载底部冰面纹理
				 * 这个纹理会被视差效果偏移，模拟冰层下面的纹理
				 */
				const bottomTexture = await loader.loadAsync(
					'textures/ambientcg/Ice003_1K-JPG_Color.jpg'
				);
				// 作为颜色纹理使用SRGB色彩空间
				bottomTexture.colorSpace = THREE.SRGBColorSpace;
				/**
				 * 设置纹理包裹模式为重复
				 * 当UV坐标超出[0,1]范围时，纹理会重复平铺
				 * 这可以避免纹理边缘出现不自然的拉伸
				 */
				bottomTexture.wrapS = THREE.RepeatWrapping;  // 水平方向重复
				bottomTexture.wrapT = THREE.RepeatWrapping;  // 垂直方向重复

				// --- 5. 视差UV效果创建 ---
				
				/**
				 * 视差缩放系数
				 * 控制视差效果的强度
				 * 值越大，深度错觉越明显
				 * 0.3是一个适中的值，能产生明显效果但不过度夸张
				 */
				const parallaxScale = 0.3;
				
				/**
				 * 创建位移纹理节点并应用缩放
				 * texture(displaceTexture): 将位移纹理转换为着色器节点
				 * .mul(parallaxScale): 乘以缩放系数
				 * 结果是一个表示UV偏移量的节点
				 */
				const offsetUV = texture(displaceTexture).mul(parallaxScale);
				
				/**
				 * 计算视差偏移后的UV坐标
				 * parallaxUV(uv(), offsetUV):
				 *   - uv(): 获取当前片元的原始UV坐标
				 *   - offsetUV: 根据高度图计算的偏移量
				 * 函数原理：根据观察角度和高度信息偏移UV坐标
				 */
				const parallaxUVOffset = parallaxUV(uv(), offsetUV);
				
				/**
				 * 使用偏移后的UV坐标采样底部纹理
				 * 这样底部纹理就会根据表面高度产生偏移
				 * 产生类似"透过表面裂缝看到下面纹理"的效果
				 */
				const parallaxResult = texture(bottomTexture, parallaxUVOffset);

				/**
				 * 混合顶部纹理和视差处理后的底部纹理
				 * blendOverlay: 叠加混合模式
				 *   - 顶部纹理作为基色
				 *   - 视差结果作为叠加层
				 * 叠加模式会保留亮部和暗部细节，产生自然的混合效果
				 */
				const iceNode = blendOverlay(texture(topTexture), parallaxResult);

				// --- 6. 材质创建 ---
				
				/**
				 * 创建标准网格节点材质
				 * MeshStandardNodeMaterial是基于物理渲染(PBR)的材质
				 * 支持金属度、粗糙度、法线等PBR属性
				 * NodeMaterial允许使用着色器节点系统定义材质
				 */
				const material = new THREE.MeshStandardNodeMaterial();
				
				// 设置颜色节点：将混合后的纹理颜色乘以5增强对比度
				// .mul(5): 提高颜色强度，使冰面看起来更亮、更鲜明
				material.colorNode = iceNode.mul(5);
				
				// 设置粗糙度节点：使用粗糙度贴图控制表面光滑度
				material.roughnessNode = texture(roughnessTexture);
				
				// 设置法线贴图：增加表面微观细节
				material.normalMap = normalTexture;
				
				// 设置金属度为0：这是一个非金属材质（冰）
				// 金属材质会有强烈的镜面反射，非金属则是漫反射为主
				material.metalness = 0;

				// --- 7. 几何体创建 ---
				
				/**
				 * 创建立方体几何体
				 * 参数：宽度、高度、深度（单位：Three.js单位）
				 * 10x10x10的立方体，将作为"地面"使用
				 */
				const geometry = new THREE.BoxGeometry(10, 10, 10);

				// --- 8. 网格创建并添加到场景 ---
				
				/**
				 * 创建网格对象
				 * 网格 = 几何体 + 材质
				 * 是Three.js中最基本的可见对象
				 */
				const ground = new THREE.Mesh(geometry, material);
				
				/**
				 * 旋转网格使其顶部朝前
				 * rotateX(-Math.PI / 2):
				 *   - rotateX: 绕X轴旋转
				 *   - -Math.PI / 2: 旋转-90度（顺时针90度）
				 * 原本立方体的顶部是+Y方向，旋转后顶部朝向-Z方向
				 * 这样立方体的一个面就变成了"地面"
				 */
				ground.rotateX(-Math.PI / 2);
				
				// 将网格添加到场景中
				scene.add(ground);

				// --- 9. 渲染器初始化 ---
				
				/**
				 * 创建WebGPU渲染器
				 * WebGPURenderer是Three.js的WebGPU后端
				 * 相比WebGL，WebGPU提供更好的性能和更多功能
				 * 参数：{ antialias: true } 启用抗锯齿，平滑边缘锯齿
				 */
				renderer = new THREE.WebGPURenderer({ antialias: true });
				
				/**
				 * 设置设备像素比
				 * 高DPI屏幕（如Retina显示屏）需要更高的分辨率渲染
				 * 避免在高分辨率屏幕上出现模糊
				 */
				renderer.setPixelRatio(window.devicePixelRatio);
				
				/**
				 * 设置渲染器尺寸为窗口大小
				 * 使3D场景填满整个浏览器窗口
				 */
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				/**
				 * 设置动画循环回调
				 * 浏览器会在每一帧渲染前调用animate函数
				 * 实现平滑的动画效果
				 */
				renderer.setAnimationLoop(animate);
				
				/**
				 * 设置色调映射
				 * 色调映射将HDR（高动态范围）颜色转换为LDR（低动态范围）显示
				 * ReinhardToneMapping是一种常用的色调映射算法
				 * 能保持高光和阴影的细节
				 */
				renderer.toneMapping = THREE.ReinhardToneMapping;
				
				/**
				 * 设置色调映射曝光值
				 * 控制场景的整体亮度
				 * 6是一个较高的值，使冰面看起来更亮、更耀眼
				 */
				renderer.toneMappingExposure = 6;
				
				/**
				 * 将渲染器的canvas元素添加到页面body中
				 * renderer.domElement是渲染器创建的<canvas>元素
				 * 所有3D内容都将绘制在这个canvas上
				 */
				document.body.appendChild(renderer.domElement);

				// --- 10. 轨道控制器初始化 ---
				
				/**
				 * 创建轨道控制器
				 * 参数：
				 *   - camera: 要控制的相机
				 *   - renderer.domElement: 监听事件的DOM元素
				 * 控制器会监听这个元素上的鼠标、触摸事件
				 */
				controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置控制器的目标点（相机围绕旋转的中心点）
				controls.target.set(0, 0, 0);
				
				// 设置相机最大距离：限制缩放远距离
				controls.maxDistance = 40;
				
				// 设置相机最小距离：限制缩放近距离
				controls.minDistance = 10;
				
				// 启用自动旋转：场景会自动缓慢旋转，方便观察
				controls.autoRotate = true;
				
				// 设置自动旋转速度：负值表示逆时针旋转
				controls.autoRotateSpeed = -1;
				
				// 更新控制器状态，应用所有设置
				controls.update();

				// --- 11. 事件监听器设置 ---
				
				/**
				 * 监听窗口大小变化事件
				 * 当用户调整浏览器窗口大小时
				 * 调用onWindowResize函数重新调整相机和渲染器
				 */
				window.addEventListener('resize', onWindowResize);

			} // init函数结束

			// ==================== 窗口大小变化处理函数 ====================
			
			/**
			 * 处理浏览器窗口大小变化
			 * 确保3D场景始终正确适应窗口尺寸
			 * 避免画面拉伸或变形
			 */
			function onWindowResize() {
				
				/**
				 * 更新相机的宽高比
				 * 使用新的窗口尺寸计算宽高比
				 * 宽高比 = 窗口宽度 / 窗口高度
				 */
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/**
				 * 更新相机的投影矩阵
				 * 投影矩阵决定了3D空间如何投影到2D屏幕
				 * 当相机参数改变后必须调用此方法
				 */
				camera.updateProjectionMatrix();
				
				/**
				 * 更新渲染器尺寸
				 * 使渲染的canvas大小与窗口大小匹配
				 */
				renderer.setSize(window.innerWidth, window.innerHeight);
				
			} // onWindowResize函数结束

			// ==================== 动画循环函数 ====================
			
			/**
			 * 动画循环函数
			 * 由渲染器的setAnimationLoop注册
			 * 在每一帧渲染前被浏览器调用
			 * 通常每秒调用60次（60fps）
			 */
			function animate() {
				
				/**
				 * 更新控制器状态
				 * 处理用户输入（鼠标拖拽、滚轮）
				 * 如果启用了自动旋转，也会在这里更新相机位置
				 */
				controls.update();
				
				/**
				 * 渲染场景
				 * 将3D场景从相机视角渲染到canvas上
				 * 参数：
				 *   - scene: 要渲染的场景对象
				 *   - camera: 使用的相机对象
				 */
				renderer.render(scene, camera);
				
			} // animate函数结束

		</script>
		<!-- 
			脚本结束：
			整个Three.js应用程序已设置完成
			页面加载后会自动初始化并开始动画循环
		-->
	</body>
</html>