<!-- 代码功能和技术点详细解析
一、核心功能概述
1. 三维可视化场景
迪士尼头部模型：加载并显示一个经典的3D测试模型（迪士尼头部）

动态点光源：两个彩色点光源在场景中按圆形轨迹移动

实时变形效果：模型表面随时间和光源位置动态起伏变形

交互式控制：用户可以通过鼠标旋转、平移和缩放视角

2. 视觉特效
表面脉动：模型表面像呼吸一样有节奏地起伏

光源影响：表面变形程度受点光源距离影响（越近变形越大）

彩色光影：红蓝双色光源在模型表面产生动态光影效果

几何细分：原始模型被细分增强，使变形效果更细腻

二、主要技术点详解
1. WebGPU渲染引擎
下一代图形API：使用WebGPU替代传统的WebGL

性能优势：

更低的CPU开销

更好的多线程支持

更高效的GPU资源管理

支持更复杂的着色器

Three.js适配层：通过Three.js的WebGPU后端简化开发

2. TSL着色器语言（Three.js Shading Language）
JavaScript内嵌着色器：在JavaScript代码中直接编写着色器逻辑

类型安全：提供浮点数、向量、矩阵等类型

内置函数：包含数学运算、光照计算、矩阵操作等

节点式编程：通过连接节点构建着色器流程

javascript
// TSL着色器代码示例
const s = abs( 
  sin( 
    localTime.mul( 2 ).add( seedAttribute ) 
  ).mul( 0.5 ) 
).add( invDistance1 ).add( invDistance2 );
3. 几何处理与细分算法
三角形到四面体转换
javascript
// 每个原始三角形细分为4个新三角形
原始三角形：v0, v1, v2
新顶点：v3 = (v0+v1+v2)/3 - normal（向内偏移）
生成的四面体包含4个面：
1. v0, v1, v2（底面）
2. v3, v1, v0（侧面1）
3. v3, v2, v1（侧面2）
4. v3, v0, v2（侧面3）
自定义顶点属性
时间偏移（time）：每个顶点组有不同的起始时间

随机种子（seed）：创建多样化的波动效果

位移法线（displaceNormal）：控制顶点变形方向

4. 动态变形算法
变形公式
text
位移量 = 时间波动 + 光源影响1 + 光源影响2
最终位置 = 原始位置 + 法线方向 × 位移量
三个影响因子
时间波动

text
正弦波 × 0.5 → 绝对值 → 始终向外位移
每个顶点有相位偏移（seedAttribute）
光源影响

text
影响强度 = max(0, 20 - 距离) / 2
距离光源越近，影响越大
超过20个单位距离则无影响
变形方向

text
沿顶点法线方向位移
保持表面连续性
5. 光照系统
点光源特性
位置性光源：有明确的空间位置

全向发光：向所有方向均匀辐射

距离衰减：光照强度随距离平方反比衰减

彩色光源：红色(0xff0040)和蓝色(0x0040ff)

光源动画
javascript
// 光源1：正弦-余弦-余弦组合
light1.position.x = Math.sin(time) * 20;
light1.position.y = Math.cos(time * 0.75) * -30;
light1.position.z = Math.cos(time * 0.5) * 20;

// 光源2：余弦-正弦-正弦组合（不同相位）
6. 相机与交互系统
透视相机配置
javascript
new THREE.PerspectiveCamera(50, width/height, 1, 1000)
// 参数：视野角度、宽高比、近裁剪面、远裁剪面
轨道控制器
鼠标左键拖拽：旋转视角

鼠标右键拖拽：平移场景

鼠标滚轮：缩放视图

阻尼效果：惯性运动，操作更平滑

7. 性能优化技术
缓冲区属性（BufferAttribute）
javascript
// 高效存储顶点数据
new THREE.Float32BufferAttribute(vertices, 3)
// 参数：数据数组、每个顶点分量数
几何复用
点光源可视化球体共享相同的几何体

减少GPU内存占用

提高渲染效率

矩阵运算优化
javascript
// 世界空间到模型空间的转换
modelWorldMatrixInverse.mul(effector1)
// 在着色器中高效计算光源相对位置
三、技术架构图
text
用户交互（鼠标/触摸）
        ↓
   轨道控制器（OrbitControls）
        ↓
       相机（Camera）
        ↓
    渲染循环（animate）
        ↓
┌─────────────────────┐
│   TSL着色器系统      │
│  ├─ 时间波动计算     │
│  ├─ 光源影响计算     │
│  └─ 顶点位置更新     │
└─────────────────────┘
        ↓
   几何变形处理
        ↓
WebGPU渲染管线
        ↓
   画布输出（Canvas）
四、关键技术亮点
1. 实时GPU计算
顶点变形在GPU中实时计算

充分利用GPU并行计算能力

每帧更新数百万个顶点位置

2. 多因素混合变形
时间因素：周期性波动

空间因素：光源距离影响

随机因素：顶点个体差异

法线因素：变形方向控制

3. 现代Web图形技术栈
text
Three.js（3D库）
    ↓
WebGPU（图形API）
    ↓
TSL（着色器语言）
    ↓
BufferGeometry（几何数据）
4. 响应式设计
自适应窗口大小变化

适应不同DPI设备

保持渲染质量

五、教育价值
学习要点：
WebGPU基础知识：现代Web图形API的使用

着色器编程：TSL语言的语法和应用

几何处理：BufferGeometry的操作和优化

实时图形：动画循环和性能考虑

交互设计：3D场景的用户交互实现

适用场景：
3D数据可视化

游戏开发学习

创意编程艺术

Web图形技术研究 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题 - 描述页面内容
			three.js: 使用的JavaScript 3D库
			WebGPU: 新一代图形API，替代WebGL，提供更好的性能和更低的CPU开销
			Point Lights: 点光源效果演示
		-->
		<title>Three.js WebGPU 点光源效果演示</title>
		
		<!-- 
			字符编码设置
			UTF-8: 支持多语言字符集，包括中文
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)设置，用于移动端适配
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户缩放页面
			minimum-scale=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样式表
			example.css: 可能包含页面布局、字体、颜色等样式定义
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			页面信息面板
			id="info": 用于CSS样式选择器和JavaScript操作
			这个div包含页面标题、版权信息和相关链接
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接
				class="logo-link": 可能通过CSS设置Three.js的logo背景图
				target="_blank": 在新标签页打开链接
				rel="noopener": 安全设置，防止新页面通过window.opener访问原页面
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接到Three.js官网
					点击可以访问Three.js官方文档和示例
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 
					副标题 - 当前演示的特定功能
					点光源是3D图形学中的一种光源类型，它从一点向所有方向均匀发射光线
				-->
				<span> - 点光源动态变形效果演示</span>
			</div>

			<!-- 
				版权和资源来源声明
				<small>标签表示小号字体，用于次要信息
			-->
			<small>
				<!-- 
					迪士尼头模型来源说明
					这是一个著名的3D测试模型，常用于图形学演示
				-->
				迪士尼头模型由 <a href="http://web.archive.org/web/20120903131400/http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a> 提供<br />
				<!-- 
					变形效果技术来源
					参考了斯坦福兔子模型的位移效果实现
				-->
				位移变形效果实现参考自 <a href="https://oosmoxiecode.com/archive/js_webgl/stanford_bunny/" target="_blank" rel="noopener">oosmoxiecode</a>
			</small>
			
			
		</div>

		<!-- 
			importmap: JavaScript模块导入映射
			这是现代浏览器支持的模块导入配置，类似于package.json的作用
			允许使用简短的模块名称代替完整的相对路径
		-->
		<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.PerspectiveCamera、THREE.Scene等
			import * as THREE from 'three/webgpu';

			// 从附加组件中导入OBJLoader
			// OBJ格式是一种简单的3D模型格式，包含顶点、法线、纹理坐标等信息
			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
			
			// 导入轨道控制器
			// 允许用户通过鼠标拖拽来旋转、平移和缩放相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入TSL着色器语言函数
			// 这些函数用于在JavaScript中构建着色器代码
			// abs: 绝对值 | attribute: 顶点属性 | distance: 距离计算
			// float: 浮点数 | max: 最大值 | modelWorldMatrixInverse: 模型世界矩阵的逆矩阵
			// positionLocal: 局部空间中的顶点位置 | sin: 正弦函数 | time: 时间变量
			// uniform: 统一变量（在所有顶点/片元中保持不变）
			import { 
				abs, 
				attribute, 
				distance, 
				float, 
				max, 
				modelWorldMatrixInverse, 
				positionLocal, 
				sin, 
				time, 
				uniform 
			} from 'three/tsl';

			// ============================================
			// 全局变量声明
			// ============================================
			
			// 场景相关变量
			let camera;      // 相机：决定观察3D场景的视角
			let scene;       // 场景：包含所有3D对象的容器
			let timer;       // 计时器：用于动画的时间控制
			let renderer;    // 渲染器：负责将3D场景绘制到2D画布
			let controls;    // 控制器：用户交互控制

			// 光源变量
			let light1;      // 第一个点光源（红色）
			let light2;      // 第二个点光源（蓝色）

			// ============================================
			// 初始化函数 - 程序入口点
			// ============================================
			init();

			function init() {
				// ============================================
				// 1. 相机设置
				// ============================================
				// 创建透视相机（模拟人眼视角）
				// 参数说明：
				// 50: 垂直视角（视野范围），单位度，值越大看到的内容越多
				// window.innerWidth / window.innerHeight: 宽高比（根据窗口尺寸自动调整）
				// 1: 近裁剪平面，距离相机1个单位以内的物体不渲染
				// 1000: 远裁剪平面，距离相机1000个单位以外的物体不渲染
				camera = new THREE.PerspectiveCamera( 
					50, 
					window.innerWidth / window.innerHeight, 
					1, 
					1000 
				);
				// 设置相机初始位置：沿z轴向后移动100个单位
				camera.position.z = 100;

				// ============================================
				// 2. 场景创建
				// ============================================
				// 创建场景对象，所有3D对象（网格、光源、相机）都将添加到场景中
				scene = new THREE.Scene();

				// ============================================
				// 3. 计时器初始化
				// ============================================
				// 创建Three.js计时器，用于精确的动画时间控制
				timer = new THREE.Timer();
				// 连接到文档，开始计时
				timer.connect( document );

				// ============================================
				// 4. 3D模型加载与处理
				// ============================================
				// 创建OBJ加载器实例
				const loader = new OBJLoader();
				
				// 异步加载OBJ模型文件
				// 第一个参数：模型文件路径
				// 第二个参数：加载完成后的回调函数
				loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {
					// obj.children[0] 获取模型中的第一个网格对象
					// OBJ文件可能包含多个网格，这里我们取第一个
					const mesh = obj.children[ 0 ];
					
					// 重新创建几何体：将原始几何体转换为四面体细分结构
					// 这个过程会为每个三角形生成一个四面体，增加几何细节
					mesh.geometry = createGeometry( mesh.geometry );
					
					// 创建自定义材质：使用TSL着色器实现动态变形效果
					mesh.material = createMaterial();

					// 调整模型尺寸：缩小到原始大小的80%
					mesh.scale.multiplyScalar( 0.8 );
					// 调整模型位置：沿y轴向下移动30个单位
					mesh.position.y = - 30;
					
					// 将处理后的模型添加到场景中
					scene.add( mesh );
				} );

				// 创建球体几何体（用于表示点光源的可视化）
				// 参数说明：
				// 0.5: 球体半径
				// 16: 水平分段数（经线），值越高球体越光滑
				// 8: 垂直分段数（纬线），值越高球体越光滑
				const sphere = new THREE.SphereGeometry( 0.5, 16, 8 );

				// ============================================
				// 5. 光源设置
				// ============================================
				
				// 创建第一个点光源（红色）
				// 参数说明：
				// 0xff0040: RGB颜色值（红色）
				// 2000: 光源强度
				light1 = new THREE.PointLight( 0xff0040, 2000 );
				// 为光源添加可视化球体：使用相同的球体几何体和红色基础材质
				light1.add( new THREE.Mesh( 
					sphere, 
					new THREE.MeshBasicMaterial( { color: 0xff0040 } ) 
				) );
				// 将光源添加到场景
				scene.add( light1 );

				// 创建第二个点光源（蓝色）
				light2 = new THREE.PointLight( 0x0040ff, 2000 );
				light2.add( new THREE.Mesh( 
					sphere, 
					new THREE.MeshBasicMaterial( { color: 0x0040ff } ) 
				) );
				scene.add( light2 );

				// 添加环境光：提供基础照明，避免纯黑阴影
				// 参数说明：
				// 0xaaaaaa: 浅灰色
				// 0.1: 较低强度，作为补充光源
				scene.add( new THREE.AmbientLight( 0xaaaaaa, 0.1 ) );

				// ============================================
				// 6. 渲染器设置
				// ============================================
				
				// 创建WebGPU渲染器实例
				// { antialias: true }: 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比：适配高DPI屏幕（如Retina显示屏）
				// window.devicePixelRatio: 物理像素与CSS像素的比例
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环：将animate函数注册为每帧调用的回调
				// 类似于 requestAnimationFrame，但由Three.js管理
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				document.body.appendChild( renderer.domElement );

				// ============================================
				// 7. 控制器设置
				// ============================================
				
				// 创建轨道控制器
				// 参数1: 要控制的相机
				// 参数2: 事件监听的DOM元素
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 启用阻尼效果：使相机移动有惯性感，操作更平滑
				controls.enableDamping = true;

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

			}

			// ============================================
			// 窗口大小变化处理函数
			// ============================================
			function onWindowResize() {
				// 更新相机宽高比：根据新的窗口尺寸计算
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵：必须调用此方法使宽高比更改生效
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸：使画布大小与窗口大小匹配
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// ============================================
			// 动画循环函数 - 每帧调用一次
			// ============================================
			function animate() {
				// 更新计时器：计算自上一帧以来的时间增量
				timer.update();

				// 获取经过的时间（秒），并乘以0.5使动画速度减半
				const time = timer.getElapsed() * 0.5;

				// 更新轨道控制器：处理用户输入，更新相机位置
				controls.update();

				// 更新第一个点光源位置：使其在三维空间中做圆周运动
				// 使用三角函数（sin, cos）创建周期性运动
				// Math.sin(time) * 20: x轴上的正弦波运动，振幅20
				// Math.cos(time * 0.75) * -30: y轴上的余弦波运动，频率较慢，振幅-30
				// Math.cos(time * 0.5) * 20: z轴上的余弦波运动，频率最慢，振幅20
				light1.position.x = Math.sin( time ) * 20;
				light1.position.y = Math.cos( time * 0.75 ) * - 30;
				light1.position.z = Math.cos( time * 0.5 ) * 20;

				// 更新第二个点光源位置：使用不同的参数创建不同的运动轨迹
				light2.position.x = Math.cos( time * 0.5 ) * 20;
				light2.position.y = Math.sin( time * 0.75 ) * - 30;
				light2.position.z = Math.sin( time ) * 20;

				// 渲染场景：将3D场景绘制到2D画布
				// 参数1: 要渲染的场景
				// 参数2: 使用的相机
				renderer.render( scene, camera );
			}

			// ============================================
			// 辅助函数：创建自定义材质
			// ============================================
			function createMaterial() {
				// 创建Phong节点材质：支持TSL着色器编程的Phong光照模型材质
				// Phong光照模型包含环境光、漫反射和高光反射分量
				const material = new THREE.MeshPhongNodeMaterial();

				// ============================================
				// TSL着色器代码构建
				// ============================================
				
				// 定义顶点属性（从几何体中读取）
				const seedAttribute = attribute( 'seed' );  // 随机种子：用于创建多样化的波动效果
				const displaceNormalAttribute = attribute( 'displaceNormal' );  // 位移法线：控制顶点位移方向

				// 计算每个顶点的时间：基础时间 + 顶点时间偏移
				// attribute('time'): 每个顶点的时间偏移（由几何体创建时生成）
				// time: 全局时间变量（由Three.js提供）
				// add(): 将两个值相加
				const localTime = attribute( 'time' ).add( time );

				// 将光源位置转换为TSL变量
				// uniform(): 声明一个uniform变量（所有顶点共享相同值）
				// light1.position: 光源的世界坐标
				// .toVar(): 转换为变量，可以在着色器表达式中使用
				const effector1 = uniform( light1.position ).toVar();
				const effector2 = uniform( light2.position ).toVar();

				// 计算顶点到每个光源的距离
				// 需要将光源位置从世界空间转换到模型局部空间
				// 原因：positionLocal是模型局部空间中的顶点位置
				// modelWorldMatrixInverse: 模型世界矩阵的逆矩阵，用于将世界坐标转换回模型局部坐标
				// .mul(): 矩阵乘法
				const distance1 = distance( 
					positionLocal,  // 顶点在模型局部空间中的位置
					modelWorldMatrixInverse.mul( effector1 )  // 光源在模型局部空间中的位置
				);
				const distance2 = distance( 
					positionLocal, 
					modelWorldMatrixInverse.mul( effector2 ) 
				);

				// 计算距离的倒数：距离越近，影响越大
				// float(20.0).sub(distance1): 20.0 - 距离，限制最大影响范围
				// max(0.0, ...): 确保结果不为负数（当距离>20时，结果为0）
				// .div(2.0): 除以2，减小影响强度
				const invDistance1 = max( 
					0.0, 
					float( 20.0 ).sub( distance1 ) 
				).div( 2.0 );
				
				const invDistance2 = max( 
					0.0, 
					float( 20.0 ).sub( distance2 ) 
				).div( 2.0 );

				// 计算总位移量（s = 时间波动 + 光源影响）
				// 1. sin(localTime.mul(2).add(seedAttribute)): 基于时间的正弦波动
				//    - localTime.mul(2): 时间乘以2，加快波动频率
				//    - .add(seedAttribute): 加上随机种子，使每个顶点波动相位不同
				// 2. .mul(0.5): 乘以0.5，减小波动幅度
				// 3. abs(): 取绝对值，使波动始终为正（始终向外位移）
				// 4. .add(invDistance1).add(invDistance2): 加上两个光源的影响
				const s = abs( 
					sin( 
						localTime.mul( 2 ).add( seedAttribute ) 
					).mul( 0.5 ) 
				).add( invDistance1 ).add( invDistance2 );

				// 设置最终的顶点位置：原始位置 + 沿法线方向的位移
				// positionLocal: 原始顶点位置
				// displaceNormalAttribute: 位移方向（法线方向）
				// .mul(s): 乘以位移量
				// .add(): 将位移加到原始位置上
				material.positionNode = positionLocal.add( 
					displaceNormalAttribute.mul( s ) 
				);

				return material;
			}

			// ============================================
			// 辅助函数：创建自定义几何体
			// ============================================
			function createGeometry( geometry ) {
				// 获取原始几何体的位置属性（顶点坐标）
				const positionAttribute = geometry.getAttribute( 'position' );

				// 创建临时向量对象，用于几何计算
				const v0 = new THREE.Vector3();  // 三角形顶点0
				const v1 = new THREE.Vector3();  // 三角形顶点1
				const v2 = new THREE.Vector3();  // 三角形顶点2
				const v3 = new THREE.Vector3();  // 四面体顶点（三角形中心向内位移生成）
				const n = new THREE.Vector3();   // 法线向量临时存储

				// 创建平面对象，用于计算三角形法线
				// THREE.Plane: 由法线和常数定义的无限平面
				const plane = new THREE.Plane();

				// 存储新几何体数据的数组
				const vertices = [];        // 顶点坐标数组 [x1,y1,z1, x2,y2,z2, ...]
				const times = [];           // 时间偏移数组（每个顶点一个值）
				const seeds = [];           // 随机种子数组（每个顶点一个值）
				const displaceNormal = [];  // 位移法线数组 [nx1,ny1,nz1, nx2,ny2,nz2, ...]

				// ============================================
				// 遍历原始几何体的每个三角形
				// ============================================
				// positionAttribute.count: 顶点总数
				// 每3个顶点构成一个三角形，所以步长为3
				for ( let i = 0; i < positionAttribute.count; i += 3 ) {
					// 从缓冲区属性中读取三角形的三个顶点
					v0.fromBufferAttribute( positionAttribute, i );      // 第i个顶点
					v1.fromBufferAttribute( positionAttribute, i + 1 );  // 第i+1个顶点
					v2.fromBufferAttribute( positionAttribute, i + 2 );  // 第i+2个顶点

					// 根据三个共面点计算平面方程
					// 这会自动计算平面的法线向量
					plane.setFromCoplanarPoints( v0, v1, v2 );

					// 计算三角形中心点（重心）
					// 方法：三个顶点坐标相加后除以3
					v3.copy( v0 ).add( v1 ).add( v2 ).divideScalar( 3 );
					
					// 将中心点沿法线反方向移动，生成四面体的第四个顶点
					// 这样每个三角形就变成了一个四面体（四个三角形）
					v3.add( n.copy( plane.normal ).multiplyScalar( - 1 ) );

					// ============================================
					// 生成四面体的四个三角形（12个顶点）
					// ============================================
					
					// 三角形1：原始三角形 (v0, v1, v2)
					vertices.push( 
						v0.x, v0.y, v0.z, 
						v1.x, v1.y, v1.z, 
						v2.x, v2.y, v2.z 
					);
					
					// 三角形2：侧面三角形1 (v3, v1, v0)
					vertices.push( 
						v3.x, v3.y, v3.z, 
						v1.x, v1.y, v1.z, 
						v0.x, v0.y, v0.z 
					);
					
					// 三角形3：侧面三角形2 (v3, v2, v1)
					vertices.push( 
						v3.x, v3.y, v3.z, 
						v2.x, v2.y, v2.z, 
						v1.x, v1.y, v1.z 
					);
					
					// 三角形4：侧面三角形3 (v3, v0, v2)
					vertices.push( 
						v3.x, v3.y, v3.z, 
						v0.x, v0.y, v0.z, 
						v2.x, v2.y, v2.z 
					);

					// ============================================
					// 为12个顶点生成属性数据
					// ============================================
					
					// 生成随机值：这个四面体所有顶点共享相同的随机值
					const t = Math.random();  // 时间偏移：0到1之间的随机数
					const s = Math.random();  // 随机种子：0到1之间的随机数
					n.copy( plane.normal );   // 获取平面的法线向量

					// 为三角形1的3个顶点添加时间偏移
					times.push( t, t, t );
					// 为三角形2的3个顶点添加时间偏移
					times.push( t, t, t );
					// 为三角形3的3个顶点添加时间偏移
					times.push( t, t, t );
					// 为三角形4的3个顶点添加时间偏移
					times.push( t, t, t );

					// 为所有12个顶点添加随机种子
					seeds.push( s, s, s );
					seeds.push( s, s, s );
					seeds.push( s, s, s );
					seeds.push( s, s, s );

					// 为所有12个顶点添加相同的位移法线
					// 位移法线决定了顶点在变形时的移动方向
					displaceNormal.push( 
						n.x, n.y, n.z, 
						n.x, n.y, n.z, 
						n.x, n.y, n.z 
					);
					displaceNormal.push( 
						n.x, n.y, n.z, 
						n.x, n.y, n.z, 
						n.x, n.y, n.z 
					);
					displaceNormal.push( 
						n.x, n.y, n.z, 
						n.x, n.y, n.z, 
						n.x, n.y, n.z 
					);
					displaceNormal.push( 
						n.x, n.y, n.z, 
						n.x, n.y, n.z, 
						n.x, n.y, n.z 
					);
				}

				// ============================================
				// 创建新的BufferGeometry并设置属性
				// ============================================
				
				// 创建新的缓冲区几何体
				const newGeometry = new THREE.BufferGeometry();
				
				// 设置顶点位置属性
				// Float32BufferAttribute: 32位浮点数缓冲区属性
				// 参数1: 数据数组
				// 参数2: 每个顶点的分量数（3表示x,y,z）
				newGeometry.setAttribute( 
					'position', 
					new THREE.Float32BufferAttribute( vertices, 3 ) 
				);
				
				// 设置时间偏移属性（每个顶点1个值）
				newGeometry.setAttribute( 
					'time', 
					new THREE.Float32BufferAttribute( times, 1 ) 
				);
				
				// 设置随机种子属性（每个顶点1个值）
				newGeometry.setAttribute( 
					'seed', 
					new THREE.Float32BufferAttribute( seeds, 1 ) 
				);
				
				// 设置位移法线属性（每个顶点3个值：nx, ny, nz）
				newGeometry.setAttribute( 
					'displaceNormal', 
					new THREE.Float32BufferAttribute( displaceNormal, 3 ) 
				);

				// 重新计算顶点法线
				// 必须调用此方法，因为：
				// 1. 我们创建了新的几何体
				// 2. 我们修改了顶点位置（通过着色器）
				// 3. 光照计算需要正确的法线信息
				newGeometry.computeVertexNormals();

				return newGeometry;
			}

		</script>
	</body>
</html>