<!-- Three.js WebGPU 次表面散射演示 - 功能描述与技术分析
🎯 总体功能概述
这是一个基于 Three.js WebGPU 的实时次表面散射（Subsurface Scattering，SSS）技术演示。该应用通过斯坦福兔子模型展示了光线穿透半透明材质的逼真视觉效果，并提供了交互式参数调整功能，允许用户实时探索不同材质参数的视觉效果。

✨ 核心功能
1. 实时次表面散射渲染
物理效果模拟：模拟光线进入半透明材质内部，经过多次散射后从不同位置射出的现象

材质类型：适用于皮肤、蜡、玉石、大理石、塑料等半透明/透光材质的渲染

视觉特性：产生柔和的边缘光照和颜色渗透效果，增强材质真实感

2. 交互式参数控制
实时调整：通过GUI面板可动态修改5个关键散射参数

即时反馈：所有参数调整立即反映在渲染结果中

探索学习：帮助理解每个参数对最终效果的具体影响

3. 多光源场景
环境光：提供均匀的基础照明

平行光：模拟太阳光的定向照明

点光源（2个）：提供局部高光和色彩变化

白色主光源（高强度）

黄色辅助光源（低强度，创造色彩对比）

4. 模型与动画
斯坦福兔子：经典的3D测试模型，几何结构复杂，适合展示散射效果

自动旋转：模型缓慢自转，便于全方位观察效果

轨道控制：用户可通过鼠标拖拽、滚轮缩放自由控制观察视角

5. 开发与调试支持
内置检查器：Three.js Inspector 提供场景结构浏览和对象属性查看

响应式设计：自动适应不同屏幕尺寸和设备像素密度

WebGPU检测：自动使用WebGPU API，支持最新的图形硬件功能

🛠️ 主要技术点详解
1. WebGPU 渲染技术
javascript
// 技术优势对比
- WebGL → WebGPU 的升级：
  - 更低的开销：减少CPU-GPU通信开销
  - 更好的多线程支持：充分利用多核CPU
  - 更现代的API：更接近Vulkan/Metal/DirectX12
  - 计算着色器支持：可用于更复杂的后处理效果
2. 次表面散射算法实现
核心原理
text
光线进入材质 → 内部多次散射 → 从不同位置射出
技术实现要素：
A. 厚度贴图（Thickness Map）

javascript
// 关键作用：定义材质的"物理厚度"
- 白色区域：材质较薄，光线容易穿透
- 灰色区域：中等厚度，部分光线散射
- 黑色区域：材质较厚，光线难以穿透
- 实现方式：预计算的纹理贴图，存储每个像素对应的厚度信息
B. 散射参数系统（5个核心控制参数）：

参数	技术作用	视觉影响
扭曲 (Distortion)	控制散射方向随机性	值越大，散射效果越"模糊"、"软化"
环境光 (Ambient)	控制无直接光照时的散射	影响阴影区域的可见性
衰减 (Attenuation)	光线在材质内部的能量损失	控制散射的"深度"和"范围"
指数 (Power)	散射分布的锐利程度	类似Phong反射的指数，控制高光形状
缩放 (Scale)	整体散射强度	全局调整散射效果的明显程度
C. 着色器实现：

javascript
// 使用Three.js TSL（Three.js Shader Language）
// 节点式着色器构建，更直观的视觉编程
material.thicknessColorNode = texture(thicknessTexture).mul(vec3(0.5, 0.3, 0.0));
3. Three.js TSL 节点系统
javascript
// 传统着色器 vs TSL节点系统
传统GLSL：
- 编写文本代码
- 难调试、难修改
- 需要编译链接

TSL节点系统：
- 可视化节点连接
- 实时编辑、即时预览
- 无需处理底层GLSL细节
4. 高性能渲染架构
渲染管线优化：

相机裁剪：合理的近/远裁剪面（1-5000单位）

设备适配：setPixelRatio(window.devicePixelRatio) 支持Retina屏幕

抗锯齿：WebGPU原生抗锯齿支持

动画循环：setAnimationLoop() 替代传统的requestAnimationFrame()

资源管理：

纹理：sRGB颜色空间处理，更准确的颜色表现

模型：FBX格式加载，包含几何和UV信息

灯光：衰减距离设置，优化性能

5. 交互与用户体验技术
A. 轨道控制器 (OrbitControls)

javascript
// 提供三种交互模式：
1. 旋转：左键拖拽 - 围绕目标点旋转相机
2. 平移：中键/右键拖拽 - 平行移动相机
3. 缩放：滚轮滑动 - 改变相机距离
B. 响应式系统

javascript
// 窗口大小变化处理流程：
窗口resize事件 → 更新相机宽高比 → 更新投影矩阵 → 调整渲染器尺寸
C. GUI参数绑定

javascript
// 数据绑定机制：
GUI滑块值变化 → 更新control对象 → onChange回调 → 更新材质uniform值
6. 材质与光照协同
多层次光照计算：

text
最终颜色 = 
  环境光贡献 * 环境散射 +
  平行光贡献 * 直接散射 +
  点光源1贡献 * 局部散射 +
  点光源2贡献 * 色彩散射
材质-光照交互：

每个光源独立计算对散射的贡献

厚度贴图影响各光源的穿透能力

不同颜色光源产生不同的散射色彩

🔧 技术架构图
text
┌─────────────────────────────────────────────────────────┐
│                   浏览器环境 (Browser)                    │
├─────────────────────────────────────────────────────────┤
│  ┌─────────────────┐  ┌─────────────────┐               │
│  │    WebGPU API   │  │   ES6 Modules   │               │
│  └─────────────────┘  └─────────────────┘               │
├─────────────────────────────────────────────────────────┤
│                 Three.js WebGPU 引擎                      │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐    │
│  │   Scene图   │  │  TSL节点    │  │  渲染管线    │    │
│  │   (图管理)  │  │  (着色器)   │  │  (WebGPU)    │    │
│  └─────────────┘  └─────────────┘  └─────────────┘    │
├─────────────────────────────────────────────────────────┤
│                  应用逻辑层 (Application)                  │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐    │
│  │  SSS材质    │  │   模型加载   │  │    GUI      │    │
│  │   (核心)    │  │   (FBX)     │  │  (控制)     │    │
│  └─────────────┘  └─────────────┘  └─────────────┘    │
└─────────────────────────────────────────────────────────┘
🎨 视觉表现层次
第一层：基础照明
环境光提供整体可见性

平行光定义主要明暗关系

第二层：局部高光
白色点光源创造明亮区域

黄色点光源添加暖色调

第三层：次表面散射
边缘透光效果（薄区域发光）

颜色渗透（红色向内部扩散）

柔和的阴影过渡

第四层：材质质感
粗糙度控制表面反射特性

厚度变化产生的视觉深度

📊 性能特性
优点：
硬件加速：WebGPU充分利用现代GPU

实时性能：60FPS流畅交互

内存效率：合理的纹理和几何复杂度

可扩展性：模块化架构便于功能扩展

技术限制：
浏览器支持：需要支持WebGPU的浏览器

硬件要求：需要较新的GPU硬件

移动端限制：移动设备性能可能受限

学习曲线：需要理解SSS物理原理

🔍 应用场景
学术研究：
实时渲染算法教学

材质物理属性可视化

图形学技术演示

创意开发：
游戏角色皮肤渲染

产品可视化（塑料、玉石等材质）

影视特效预研

技术评估：
WebGPU性能测试

实时渲染质量评估

跨平台图形能力比较

🚀 技术亮点总结
前沿技术栈：Three.js + WebGPU + TSL节点系统

物理准确性：基于厚度的次表面散射模拟

完全交互：从模型旋转到参数调整的全面交互

生产就绪：包含调试工具和响应式设计的完整应用

教育价值：可视化展示了复杂的图形学概念 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的文字
			本示例演示Three.js WebGPU版本的次表面散射效果
		-->
		<title>Three.js WebGPU次表面散射演示</title>
		<!-- 
			字符编码设置：UTF-8编码支持多语言字符
		-->
		<meta charset="utf-8">
		<!-- 
			视口设置（移动端适配）：
			- width=device-width：宽度等于设备宽度
			- user-scalable=no：禁止用户手动缩放页面
			- minimum-scale=1.0：最小缩放比例为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样式表链接：
			- type="text/css"：指定样式表类型为CSS
			- rel="stylesheet"：定义链接为样式表关系
			- href="example.css"：样式表文件路径
			用于引入页面布局和样式的定义文件
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			主容器div：
			- id="container"：唯一的DOM元素标识符
			- 这个容器将承载Three.js渲染器生成的WebGL/WebGPU画布
			- Three.js渲染器会将canvas元素动态添加到这个容器内
		-->
		<div id="container"></div>

		<!-- 
			信息显示区域：
			- id="info"：信息区域的唯一标识
			- 用于展示Three.js品牌信息、示例标题和说明文字
			- 通常显示在页面的顶部或角落位置
		-->
		<div id="info">
			<!-- 
				Three.js Logo链接：
				- href：指向Three.js官方网站
				- target="_blank"：在新标签页中打开链接
				- 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>标签：表示次要的小号文本
				- 用于详细说明当前示例的功能和致谢信息
			-->
			<small>
				<!-- 主要功能描述：快速次表面散射技术 -->
				基于WebGPU的快速次表面散射技术实现<br/>
				<!-- 致谢信息：感谢艺术家的支持 -->
				[特别感谢艺术家 <a href="https://github.com/shaochun" target="_blank" rel="noopener">Shaochun Lin</a> 提供的艺术支持]
			</small>
		</div>

		<!-- 
			导入映射(Import Maps)配置：
			- type="importmap"：定义模块导入的映射关系
			- 允许浏览器将模块标识符映射到实际文件路径
			- 这是在浏览器原生ES模块系统中使用的配置
			
			映射关系说明：
			1. "three" -> "../build/three.webgpu.js"
			   将'three'模块名映射到WebGPU版本的Three.js
			2. "three/webgpu" -> "../build/three.webgpu.js"
			   提供完整的导入路径支持
			3. "three/tsl" -> "../build/three.tsl.js"
			   映射Three.js着色器语言模块
			4. "three/addons/" -> "./jsm/"
			   将three/addons/路径映射到本地jsm目录，加载扩展插件
		-->
		<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语法
			- 这是整个Three.js应用的核心逻辑代码
		-->
		<script type="module">

			// ==================== 模块导入区域 ====================
			// 导入Three.js核心库的WebGPU版本
			// 注意：WebGPU是下一代图形API，比WebGL性能更高，功能更强大
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js着色器语言（TSL）工具函数：
			// - texture: 创建纹理采样节点
			// - uniform: 创建uniform变量节点
			// - vec3: 创建三维向量节点
			// 这些用于在节点材质系统中构建着色器图
			import { texture, uniform, vec3 } from 'three/tsl';

			// 导入调试检查器工具：用于实时查看和修改场景中的对象属性
			// 在开发过程中非常有用，可以动态调整参数查看效果
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器：允许用户用鼠标拖拽旋转、缩放和平移相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入FBX加载器：用于加载FBX格式的3D模型文件
			// FBX是Autodesk开发的一种流行的3D模型交换格式
			import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';

			// ==================== 全局变量声明 ====================
			// container: 页面中承载Three.js渲染器的DOM容器
			let container;
			
			// Three.js核心对象：
			// camera: 相机，定义观察3D场景的视角
			// scene: 场景，包含所有的3D对象、灯光等
			// renderer: 渲染器，负责将3D场景渲染到2D画布上
			let camera, scene, renderer;
			
			// model: 存储加载的3D模型对象的引用
			// 用于在渲染循环中操作模型（如旋转、缩放等）
			let model;

			// ==================== 应用程序初始化 ====================
			// 调用初始化函数，启动整个Three.js应用
			init();

			/**
			 * 初始化函数 - Three.js应用的主入口点
			 * 负责创建场景、相机、渲染器、灯光、控制器等所有基础组件
			 * 这个函数只会在页面加载时执行一次
			 */
			function init() {

				// ---------- 创建页面容器 ----------
				// 创建一个新的div元素作为Three.js渲染器的容器
				container = document.createElement( 'div' );
				// 将容器添加到页面的body元素中
				document.body.appendChild( container );

				// ---------- 创建透视相机 ----------
				// 透视相机参数说明：
				// 参数1 (40): 视野角度(FOV) - 垂直方向的可视角度，单位是度
				// 参数2 (window.innerWidth / window.innerHeight): 宽高比 - 渲染区域宽高比
				// 参数3 (1): 近裁剪面 - 相机能看到的最近距离，小于此距离的对象不显示
				// 参数4 (5000): 远裁剪面 - 相机能看到的最远距离，大于此距离的对象不显示
				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
				
				// 设置相机的初始位置：
				// x=0: 水平中心位置
				// y=300: 垂直方向向上偏移300单位
				// z=400*4=1600: 沿着z轴向屏幕内方向移动1600单位（负z方向朝向观察者）
				camera.position.set( 0.0, 300, 400 * 4 );

				// ---------- 创建场景 ----------
				// 场景是所有3D对象的容器，包括模型、灯光、相机等
				// 场景还管理着背景色、雾效、环境光等全局设置
				scene = new THREE.Scene();

				// ========== 灯光系统设置 ==========
				// 良好的灯光设置对于展示3D效果至关重要，特别是次表面散射效果

				// 环境光：为整个场景提供均匀的基础照明
				// 参数 (0xc1c1c1): 光的颜色，这里是浅灰色
				// 环境光没有方向，所有面都被均匀照亮，有助于减少完全黑暗的区域
				scene.add( new THREE.AmbientLight( 0xc1c1c1 ) );

				// 平行光：模拟太阳光等无限远光源
				// 参数1 (0xffffff): 光的颜色，白色
				// 参数2 (0.03): 光的强度，这里设置得比较微弱
				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.03 );
				// 设置光的方向向量并标准化（转换为单位向量）
				// (0.0, 0.5, 0.5) 表示光从斜上方照射
				directionalLight.position.set( 0.0, 0.5, 0.5 ).normalize();
				scene.add( directionalLight );

				// 点光源1：在特定位置发光的点状光源
				// 首先创建一个可见的球体网格作为光源的可视化表示
				const pointLight1 = new THREE.Mesh( 
					// 球体几何体：半径4，宽度分段数8，高度分段数8
					// 分段数越高球体越光滑，但性能消耗也越大
					new THREE.SphereGeometry( 4, 8, 8 ),
					// 基础材质：不受灯光影响的材质，始终显示指定颜色
					new THREE.MeshBasicMaterial( { color: 0xc1c1c1 } )
				);
				// 将实际的点光源添加到球体网格中
				// 点光源参数：颜色、强度、衰减距离、衰减指数
				pointLight1.add( new THREE.PointLight( 0xc1c1c1, 4.0, 300, 0 ) );
				scene.add( pointLight1 );
				// 设置点光源1的精确位置
				pointLight1.position.x = 0;
				pointLight1.position.y = -50;    // 在模型下方
				pointLight1.position.z = 350;    // 在模型前方

				// 点光源2：第二个点光源，使用黄色调
				const pointLight2 = new THREE.Mesh( 
					new THREE.SphereGeometry( 4, 8, 8 ),
					new THREE.MeshBasicMaterial( { color: 0xc1c100 } ) // 黄色
				);
				// 这个光源强度较低（0.75），但衰减距离更远（500）
				pointLight2.add( new THREE.PointLight( 0xc1c100, 0.75, 500, 0 ) );
				scene.add( pointLight2 );
				// 设置点光源2的位置：在模型左前方
				pointLight2.position.x = -100;
				pointLight2.position.y = 20;
				pointLight2.position.z = -260;

				// ---------- 创建WebGPU渲染器 ----------
				// WebGPURenderer是Three.js对WebGPU API的封装
				// WebGPU是下一代图形API，相比WebGL有更好的性能和更现代的API设计
				// { antialias: true }: 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比：根据设备屏幕的物理像素和逻辑像素比例进行调整
				// 在高DPI屏幕（如Retina屏幕）上，这可以确保渲染更清晰
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数：替代传统的requestAnimationFrame
				// setAnimationLoop会自动以显示器的刷新率（通常60fps）调用render函数
				renderer.setAnimationLoop( render );
				
				// 将渲染器的canvas元素添加到容器中
				// renderer.domElement是渲染器创建的<canvas>元素
				container.appendChild( renderer.domElement );

				// ========== 调试工具设置 ==========
				// 将Inspector实例附加到渲染器上，便于访问
				renderer.inspector = new Inspector();
				// 将检查器的DOM元素添加到页面body中
				// 检查器通常以浮动窗口的形式显示，可以折叠/展开
				document.body.appendChild( renderer.inspector.domElement );

				// ========== 用户交互控制器 ==========
				// 创建轨道控制器：提供鼠标/触摸交互功能
				// 参数1 (camera): 要控制的相机对象
				// 参数2 (container): 接收用户输入事件的DOM元素
				const controls = new OrbitControls( camera, container );
				// 设置相机与目标点的最小距离（缩放限制）
				controls.minDistance = 500;
				// 设置相机与目标点的最大距离（缩放限制）
				controls.maxDistance = 3000;
				// 注意：控制器还需要在渲染循环中调用update()方法，但OrbitControls会自动处理

				// ========== 事件监听器 ==========
				// 监听浏览器窗口的resize事件
				// 当窗口大小改变时，调用onWindowResize函数调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

				// 初始化材质和模型：加载3D模型并应用次表面散射材质
				initMaterial();

			}

			/**
			 * 初始化材质和加载模型
			 * 这个函数创建次表面散射材质，加载纹理贴图，然后加载3D模型并应用材质
			 * @description 次表面散射（SSS）模拟光线穿透半透明物体的效果
			 * 常见应用：皮肤、蜡、玉石、大理石等材质的表现
			 */
			function initMaterial() {

				// ---------- 纹理加载 ----------
				// 创建纹理加载器实例：用于加载图片文件作为纹理
				const loader = new THREE.TextureLoader();
				
				// 加载基础颜色纹理：通常用于模型的表面颜色
				// 'models/fbx/white.jpg' 是纹理文件的相对路径
				const imgTexture = loader.load( 'models/fbx/white.jpg' );
				// 设置纹理的颜色空间为sRGB
				// sRGB颜色空间更符合人眼感知，使颜色更自然
				imgTexture.colorSpace = THREE.SRGBColorSpace;

				// 加载厚度贴图：次表面散射的关键纹理
				// 厚度贴图用灰度值表示模型不同部位的厚度
				// 较亮的区域表示较薄（光线更容易穿透），较暗的区域表示较厚
				const thicknessTexture = loader.load( 'models/fbx/bunny_thickness.jpg' );
				// 设置纹理的包裹方式：在UV坐标超出[0,1]范围时重复纹理
				// wrapS: 水平方向包裹方式，wrapT: 垂直方向包裹方式
				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;

				// ---------- 创建次表面散射材质 ----------
				// MeshSSSNodeMaterial: Three.js专门用于次表面散射的节点材质
				// 节点材质使用基于节点的编辑方式构建着色器，更灵活直观
				const material = new THREE.MeshSSSNodeMaterial();
				
				// 设置材质的基础颜色：红色调 (R=1.0, G=0.2, B=0.2)
				material.color = new THREE.Color( 1.0, 0.2, 0.2 );
				
				// 设置粗糙度：控制表面的光滑程度
				// 0.0表示完全镜面反射，1.0表示完全漫反射
				// 对于次表面散射材质，通常设置较低的粗糙度
				material.roughness = 0.3;
				
				// ========== 次表面散射参数设置（使用TSL节点） ==========
				// TSL（Three.js Shader Language）节点系统允许可视化构建着色器
				
				// 厚度颜色节点：控制散射光线的颜色
				// texture(thicknessTexture): 采样厚度贴图
				// .mul(vec3(0.5, 0.3, 0.0)): 与RGB向量相乘，调整颜色
				// 这里将厚度信息与偏红的颜色混合
				material.thicknessColorNode = texture( thicknessTexture ).mul( vec3( 0.5, 0.3, 0.0 ) );
				
				// 厚度扭曲节点：控制散射方向的变化程度
				// uniform(0.1): 创建值为0.1的uniform变量
				// 值越大，散射效果越扭曲、不规则
				material.thicknessDistortionNode = uniform( 0.1 );
				
				// 厚度环境光节点：环境光对散射效果的贡献
				// 控制即使在无直接光照时，材质是否仍有散射效果
				material.thicknessAmbientNode = uniform( 0.4 );
				
				// 厚度衰减节点：光线在材质内部传播时的衰减率
				// 控制光线穿透材质后的强度损失
				material.thicknessAttenuationNode = uniform( 0.8 );
				
				// 厚度指数节点：散射效果的幂指数
				// 控制散射效果的强度和分布
				// 类似Phong反射模型中的高光指数，影响散射的"锐利度"
				material.thicknessPowerNode = uniform( 2.0 );
				
				// 厚度缩放节点：散射效果的整体缩放因子
				// 值越大，散射效果越明显，散射范围越广
				material.thicknessScaleNode = uniform( 16.0 );

				// ========== 3D模型加载 ==========
				// 创建FBX加载器实例：专门用于加载FBX格式的3D模型
				const loaderFBX = new FBXLoader();
				
				// 异步加载FBX模型文件
				// 第一个参数：模型文件路径
				// 第二个参数：加载成功后的回调函数
				loaderFBX.load( 'models/fbx/stanford-bunny.fbx', function ( object ) {
					
					// object是加载的整个场景或模型组
					// object.children[0] 获取第一个子对象（通常是实际的网格模型）
					model = object.children[ 0 ];
					
					// 设置模型位置：在场景中的坐标
					// 这里将兔子模型放置在原点附近，z轴稍微向前
					model.position.set( 0, 0, 10 );
					
					// 统一缩放模型：setScalar(1)表示在x、y、z三个方向都缩放1倍
					// 这通常用于标准化导入模型的尺寸，确保大小合适
					model.scale.setScalar( 1 );
					
					// 将创建的次表面散射材质应用到模型上
					model.material = material;
					
					// 将模型添加到场景中，此时模型才会被渲染出来
					scene.add( model );

				} );

				// 初始化GUI控制面板：创建用户界面控件，用于实时调整材质参数
				initGUI( material );

			}

			/**
			 * 初始化图形用户界面（GUI）
			 * 创建交互式控件，允许用户实时调整次表面散射参数
			 * 这对于调试和演示非常有用，可以直观地看到参数变化的效果
			 * @param {THREE.MeshSSSNodeMaterial} material - 要控制的次表面散射材质
			 */
			function initGUI( material ) {

				// 使用Three.js Inspector创建参数面板
				// 'Parameters' 是面板的标题
				const gui = renderer.inspector.createParameters( '参数控制面板' );

				/**
				 * 厚度控制参数构造函数
				 * 这个构造函数创建的对象将存储材质参数的当前值
				 * 这些值会绑定到GUI控件上，实现双向数据绑定
				 * @constructor
				 */
				const ThicknessControls = function () {
					// 从材质节点中获取当前参数值并存储
					// 这样GUI控件就能显示和修改这些值
					this.distortion = material.thicknessDistortionNode.value; // 扭曲强度：0.01-1
					this.ambient = material.thicknessAmbientNode.value;      // 环境光强度：0.01-5.0
					this.attenuation = material.thicknessAttenuationNode.value; // 衰减强度：0.01-5.0
					this.power = material.thicknessPowerNode.value;          // 指数强度：0.01-16.0
					this.scale = material.thicknessScaleNode.value;          // 缩放强度：0.01-50.0
				};

				// 创建控制对象实例
				// 这个对象将作为GUI控件的数据模型
				const thicknessControls = new ThicknessControls();

				// ========== 创建GUI控件 ==========
				// Three.js Inspector的add方法创建滑块控件
				// 参数说明：
				// 参数1: 对象（数据源）
				// 参数2: 属性名（要控制的属性）
				// 参数3: 最小值
				// 参数4: 最大值
				// 参数5: 步长（每次调整的变化量）
				// onChange: 值变化时的回调函数

				// 扭曲参数滑块控件
				gui.add( thicknessControls, 'distortion', 0.01, 1, 0.01 )
				   .name('散射扭曲强度') // 控件显示名称
				   .onChange( function () {
					   // 当滑块值改变时，更新材质节点的值
					   material.thicknessDistortionNode.value = thicknessControls.distortion;
				   } );

				// 环境光参数滑块控件
				gui.add( thicknessControls, 'ambient', 0.01, 5.0, 0.05 )
				   .name('环境光散射强度')
				   .onChange( function () {
					   material.thicknessAmbientNode.value = thicknessControls.ambient;
				   } );

				// 衰减参数滑块控件
				gui.add( thicknessControls, 'attenuation', 0.01, 5.0, 0.05 )
				   .name('散射衰减强度')
				   .onChange( function () {
					   material.thicknessAttenuationNode.value = thicknessControls.attenuation;
				   } );

				// 指数参数滑块控件
				gui.add( thicknessControls, 'power', 0.01, 16.0, 0.1 )
				   .name('散射指数强度')
				   .onChange( function () {
					   material.thicknessPowerNode.value = thicknessControls.power;
				   } );

				// 缩放参数滑块控件
				gui.add( thicknessControls, 'scale', 0.01, 50.0, 0.1 )
				   .name('散射全局缩放')
				   .onChange( function () {
					   material.thicknessScaleNode.value = thicknessControls.scale;
				   } );

			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，需要调整相机和渲染器以确保正确显示
			 * 这是响应式WebGL应用的必要处理
			 */
			function onWindowResize() {

				// 更新相机的宽高比：使用新的窗口宽高比
				// 如果不更新，渲染的图像会被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 当相机参数改变后，必须调用此方法来重新计算内部投影矩阵
				camera.updateProjectionMatrix();

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

			}

			/**
			 * 渲染循环函数 - 动画和渲染的核心
			 * 这个函数会被requestAnimationFrame（通过setAnimationLoop）以每秒60次的速度调用
			 * 这是所有动画、交互和渲染发生的地方
			 */
			function render() {

				// 如果模型已成功加载，让它缓慢旋转
				// 这样可以多角度观察次表面散射效果
				if ( model ) {
					// 基于时间计算旋转角度，实现平滑动画
					// performance.now()返回页面加载以来的毫秒数
					// 除以5000控制旋转速度（约12.5秒完成一圈）
					model.rotation.y = performance.now() / 5000;
				}

				// 执行渲染：将3D场景通过相机视角渲染到2D画布上
				// 这是整个Three.js应用的核心渲染调用
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>