<!-- Three.js WebGPU 视频材质演示 - 功能与技术点分析
🎯 核心功能概述
这是一个基于Three.js和WebGPU的视频3D可视化演示，将视频内容动态分割并映射到200个旋转立方体表面，创造出一个交互式、动画化的视频墙效果。

🔧 主要技术点
1. WebGPU渲染技术
下一代图形API：使用WebGPU替代传统的WebGL

性能优势：更好的并行计算能力，更接近底层硬件

Three.js集成：通过THREE.WebGPURenderer实现

抗锯齿支持：启用MSAA抗锯齿，边缘更平滑

2. 视频纹理处理
动态视频纹理：THREE.VideoTexture(video)将HTML5视频转为实时纹理

多格式支持：提供OGG和MP4两种格式确保浏览器兼容性

色彩空间管理：使用sRGB色彩空间保证颜色准确性

跨域处理：crossOrigin="anonymous"解决纹理加载限制

3. 几何体与UV映射
javascript
// 关键算法：UV坐标动态重映射
function change_uvs(geometry, unitx, unity, offsetx, offsety) {
    // 将整个视频纹理分割成20×10网格
    // 每个立方体只显示视频的一小部分
}
网格分割：20列×10行，共200个立方体

UV坐标重计算：每个立方体显示视频的不同区域

几何体复用：使用相同的BoxGeometry但不同的UV映射

4. 动态材质系统
javascript
// HSL色彩模型动态变化
material.color.setHSL(
    (360 * (material.hue + time) % 360) / 360, // 随时间变化的色相
    material.saturation, // 基于位置的饱和度
    0.5 // 固定亮度
);
Phong材质：具有镜面高光效果

HSL色彩动画：每个立方体基于位置和时间动态改变颜色

位置相关属性：

色相(Hue)：从左到右渐变（0到1）

饱和度(Saturation)：从下到上递减（1到0）

5. 交互式相机控制
鼠标跟随：相机平滑跟随鼠标移动

阻尼效果：使用线性插值实现平滑移动

注视点固定：始终看向场景中心

响应式设计：自动适应窗口大小变化

6. 复杂动画系统
周期性运动模式
javascript
// 1000帧为一个完整周期
if (counter % 1000 > 200) {
    // 前200帧：静止
    // 后800帧：运动
}
节奏控制：每1000帧循环一次

方向反转：周期结束时所有立方体反向运动

随机速度：每个立方体有独特的运动速度

三重动画叠加
旋转动画：每个立方体绕X、Y轴自转

位移动画：在3D空间中分散运动

颜色动画：彩虹波浪式颜色变化

7. 现代JavaScript特性
ES6模块：使用type="module"的模块化JavaScript

导入映射：importmap配置模块路径解析

箭头函数：现代语法提高代码可读性

常量声明：使用const确保不变性

8. 用户体验优化
用户启动机制：避免浏览器自动播放限制

渐进式加载：先显示启动界面，点击后初始化复杂3D场景

移动端适配：playsinline保持内联播放，viewport优化触摸体验

性能考虑：只在需要时创建和运行动画

🎨 视觉效果特点
1. 视频分割效果
原始视频被分割成200个独立片段

每个片段映射到旋转立方体表面

形成动态的"视频马赛克"效果

2. 色彩渐变系统
水平渐变：色相从左到右变化（彩虹光谱）

垂直渐变：饱和度从下到上递减（底部鲜艳，顶部灰白）

时间动画：所有颜色随时间流动变化

3. 三维空间布局
居中对称：200个立方体均匀分布在中心区域

深度层次：Z轴运动创造前后空间感

网格秩序：保持原始网格结构但赋予动态变化

4. 动画节奏感
集体同步：所有立方体按相同周期运动

个体差异：每个立方体速度和方向不同

脉冲效果：周期性的膨胀和收缩

⚡ 性能优化策略
1. 渲染优化
实例化思想：虽然创建了200个独立Mesh，但共享相同的几何体类型

批处理渲染：Three.js内部会自动优化相似物体的渲染

按需渲染：只在激活状态下运行动画循环

2. 内存管理
纹理共享：所有立方体共享同一个视频纹理

几何体重用：相同尺寸的BoxGeometry

及时清理：移除不需要的DOM元素

3. 动画性能
基于时间的动画：使用Date.now()保证动画一致性

计数器优化：整数运算替代复杂的时间计算

平滑插值：避免跳跃式变化

🔄 技术架构流程
text
用户点击按钮
    ↓
移除覆盖层 → 显示3D场景
    ↓
初始化Three.js组件
    ↓
加载并播放视频 → 创建视频纹理
    ↓
创建200个立方体网格 → 动态计算UV坐标
    ↓
设置动画参数 → 随机速度和方向
    ↓
启动渲染循环 → 60fps持续渲染
    ↓
[每帧更新] → 相机位置、材质颜色、网格变换
    ↓
[用户交互] → 鼠标移动影响相机视角
    ↓
[窗口调整] → 自适应重新布局
🚀 扩展可能性
这个演示展示了几个可以扩展的方向：

实时视频源：替换为摄像头输入，实现实时视频处理

交互增强：点击立方体触发特殊效果

音频可视化：将音频数据与动画关联

VR/AR集成：适配虚拟现实或增强现实设备

物理引擎：添加碰撞检测和重力效果

📊 技术栈总结
技术层	具体实现	作用
渲染引擎	Three.js WebGPU	3D图形渲染
图形API	WebGPU	底层图形接口
视频处理	HTML5 Video + VideoTexture	视频解码与纹理化
动画系统	自定义周期动画	运动控制
交互层	鼠标事件监听	用户输入处理
UI层	HTML + CSS	界面展示 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			页面标题 
			原英文标题已改为中文，更符合中文用户
		-->
		<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（禁止缩放）
			这是为了在移动设备上获得更好的3D渲染体验
		-->
		<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>
		<!-- 
			启动覆盖层
			作用：在页面加载时显示，覆盖整个3D场景，需要用户点击播放按钮才能开始
			设计原因：避免自动播放视频带来的用户体验问题和浏览器限制
		-->
		<div id="overlay">
			<!-- 
				启动按钮
				id="startButton": 为按钮指定唯一标识，用于JavaScript事件绑定
				按钮文本改为中文，更符合中文用户习惯
			-->
			<button id="startButton">开始播放</button>
		</div>

		<!-- 
			Three.js渲染容器
			id="container": 指定容器ID，JavaScript将把WebGL/WebGPU渲染器生成的canvas元素放入此容器
			这个div最初是空的，初始化时会被填充
		-->
		<div id="container"></div>

		<!-- 
			页面信息展示区域
			包含项目标识、标题、版权信息等
			已全部汉化为中文
		-->
		<div id="info">
			<!-- 
				Three.js logo链接
				- href: 指向Three.js官网
				- target="_blank": 在新标签页打开
				- rel="noopener": 安全设置，防止新页面访问window.opener
				- class="logo-link": CSS类名，通常用于设置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>
				<!-- 
					视频来源说明，已汉化
					"开源电影《辛特尔》"是Blender基金会制作的开源动画电影
				-->
				正在播放 <a href="http://durian.blender.org/" target="_blank" rel="noopener">开源电影《辛特尔》</a> 预告片。
				<br>
				<!-- 新增技术说明，帮助用户理解演示内容 -->
				本演示展示Three.js WebGPU渲染器的视频纹理功能，将视频分割到200个立方体表面。
			</small>
		</div>

		<!-- 
			视频元素
			注意：这个video元素在页面中是不可见的（style="display:none"）
			它的作用是作为Three.js纹理的数据源，而不是直接显示在页面上
			
			重要属性说明：
			- id="video": 视频元素的唯一标识
			- loop: 视频循环播放
			- crossOrigin="anonymous": 跨域设置，允许从其他域加载视频纹理
			- playsinline: 在移动设备上内联播放（不全屏）
			- style="display:none": 隐藏视频元素（我们只需要视频数据，不需要显示播放器）
		-->
		<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
			<!-- 
				多格式视频源支持
				目的：提供多种视频格式以确保在不同浏览器中的兼容性
				
				第一个source标签：Ogg Theora格式（.ogv文件）
				- src: 视频文件路径
				- type: 指定MIME类型和编解码器
				支持Firefox等浏览器
			-->
			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
			
			<!-- 
				第二个source标签：MP4 H.264格式（.mp4文件）
				这是目前最广泛支持的视频格式
				支持Chrome、Safari、Edge等现代浏览器
			-->
			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
			
			<!-- 
				注意：如果浏览器不支持video标签或所有视频格式，可以在这里添加后备内容
				但由于这是Three.js演示，通常不考虑太老的浏览器
			-->
		</video>

		<!-- 
			导入映射(Import Maps)
			作用：定义JavaScript模块的导入路径映射
			这是现代JavaScript模块系统的一部分，允许我们使用简洁的模块名称
			
			工作原理：
			当import * as THREE from 'three/webgpu'时，
			浏览器会根据这里的映射找到实际的文件路径
		-->
		<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对象
			import * as THREE from 'three/webgpu';

			// ==================== 全局变量声明 ====================
			
			// 容器变量 - 存储DOM元素引用
			let container;          // 3D渲染器容器的DOM元素

			// Three.js核心对象
			let camera;             // 相机 - 决定视图的观察角度和范围
			let scene;              // 场景 - 包含所有3D对象的容器
			let renderer;           // 渲染器 - 负责将3D场景渲染到2D画布

			// 视频和材质相关变量
			let video;              // HTML5 video元素的引用
			let texture;            // Three.js视频纹理对象
			let material;           // 临时材质变量（在循环中使用）
			let mesh;               // 临时网格变量（在循环中使用）

			// 鼠标交互相关变量
			let mouseX = 0;         // 鼠标X坐标（相对于窗口中心）
			let mouseY = 0;         // 鼠标Y坐标（相对于窗口中心）

			// 窗口中心坐标计算（每次resize时更新）
			let windowHalfX = window.innerWidth / 2;   // 窗口水平中心
			let windowHalfY = window.innerHeight / 2;  // 窗口垂直中心

			// 立方体相关变量
			let cube_count;         // 立方体总数计数器

			// 存储所有网格和材质的数组
			// meshes: 存储所有立方体网格对象
			// materials: 存储所有材质对象
			const meshes = [],
				materials = [],

				// 网格布局参数
				// 定义将视频分割成的网格数：20列×10行
				xgrid = 20,   // 水平方向网格数
				ygrid = 10;   // 垂直方向网格数

			// ==================== 事件监听器设置 ====================
			
			// 获取启动按钮的DOM元素
			const startButton = document.getElementById( 'startButton' );
			
			// 为启动按钮添加点击事件监听器
			// 当用户点击按钮时，执行初始化函数
			startButton.addEventListener( 'click', function () {
				init(); // 调用初始化函数，开始3D场景
			} );

			/**
			 * 初始化函数 - 整个3D应用程序的入口点
			 * 功能：设置Three.js场景的所有组件
			 * 调用时机：用户点击"开始播放"按钮后
			 */
			function init() {

				// ---------- 1. 移除启动覆盖层 ----------
				// 获取覆盖层DOM元素并移除，显示3D场景
				const overlay = document.getElementById( 'overlay' );
				overlay.remove(); // 从DOM树中删除覆盖层

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

				// ---------- 3. 创建相机 ----------
				// 使用透视相机(PerspectiveCamera)，模拟人眼视角
				// 参数说明：
				//   1. 视野角度(40度) - 角度越大，看到的范围越广
				//   2. 纵横比(窗口宽高比) - 保持画面不变形
				//   3. 近裁剪面(1) - 距离相机多近开始渲染
				//   4. 远裁剪面(10000) - 距离相机多远停止渲染
				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
				
				// 设置相机初始位置：沿Z轴向后500个单位
				// 在Three.js中，Z轴垂直于屏幕，正方向指向屏幕外
				camera.position.z = 500;

				// ---------- 4. 创建场景 ----------
				// Scene对象是Three.js中所有3D对象的容器
				// 类似于一个舞台，上面可以放置各种物体、灯光、相机等
				scene = new THREE.Scene();

				// ---------- 5. 添加灯光 ----------
				// 创建平行光(DirectionalLight)，模拟太阳光等平行光源
				// 参数说明：
				//   1. 光的颜色(0xffffff白色)
				//   2. 光的强度(7)
				const light = new THREE.DirectionalLight( 0xffffff, 7 );
				
				// 设置光源方向
				// set(0.5, 1, 1): 设置光源的向量方向
				// normalize(): 将向量转换为单位向量（长度为1）
				light.position.set( 0.5, 1, 1 ).normalize();
				
				// 将光源添加到场景中
				scene.add( light );

				// ---------- 6. 创建WebGPU渲染器 ----------
				// 创建WebGPURenderer实例，使用WebGPU API进行渲染
				// WebGPU是新一代图形API，比WebGL更高效
				// { antialias: true }: 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比
				// 在高DPI屏幕上（如Retina显示器），这会提高渲染质量
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环
				// 将render函数设置为每帧调用的回调函数
				// 这是Three.js的动画机制，类似于requestAnimationFrame
				renderer.setAnimationLoop( render );
				
				// 将渲染器的canvas元素添加到容器中
				// renderer.domElement是渲染器创建的<canvas>元素
				container.appendChild( renderer.domElement );

				// ---------- 7. 设置视频 ----------
				// 获取视频DOM元素
				video = document.getElementById( 'video' );
				
				// 播放视频
				// 注意：现代浏览器要求视频播放必须由用户手势触发
				// 这就是为什么我们要在用户点击按钮后才调用init()
				video.play();
				
				// 添加视频播放事件监听器
				// 当视频开始播放时，跳转到第3秒
				// 这样做的原因：可能视频开头有空白或不想从开头播放
				video.addEventListener( 'play', function () {
					this.currentTime = 3; // 设置当前播放时间为3秒
				} );

				// ---------- 8. 创建视频纹理 ----------
				// 将HTML5 video元素转换为Three.js纹理
				// VideoTexture会自动更新，显示视频的当前帧
				texture = new THREE.VideoTexture( video );
				
				// 设置纹理的色彩空间为SRGB
				// SRGB是标准的色彩空间，更符合人眼感知
				texture.colorSpace = THREE.SRGBColorSpace;

				// ---------- 9. 创建立方体网格 ----------
				
				// 临时变量声明，用于循环
				let i, j, ox, oy, geometry;

				// 计算纹理坐标的单位值
				// 将整个视频纹理分割成xgrid×ygrid个小块
				const ux = 1 / xgrid; // 每个立方体在纹理U方向（水平）上的占比
				const uy = 1 / ygrid; // 每个立方体在纹理V方向（垂直）上的占比

				// 计算立方体尺寸
				// 假设视频纹理尺寸为480×204，将其均分到每个立方体
				const xsize = 480 / xgrid; // 立方体宽度
				const ysize = 204 / ygrid;  // 立方体高度

				// 材质参数配置
				// 使用视频纹理作为材质的贴图
				const parameters = { 
					color: 0xffffff,  // 基础颜色（白色）
					map: texture      // 使用视频纹理
				};

				// 重置立方体计数器
				cube_count = 0;

				// 双层循环创建网格布局的立方体
				// 外层循环：水平方向（xgrid=20列）
				for ( i = 0; i < xgrid; i ++ ) {
					// 内层循环：垂直方向（ygrid=10行）
					for ( j = 0; j < ygrid; j ++ ) {

						// 计算当前立方体在纹理中的偏移
						ox = i; // 水平偏移（第i列）
						oy = j; // 垂直偏移（第j行）

						// 创建立方体几何体
						// BoxGeometry: 创建立方体/长方体的几何形状
						// 参数：宽度(xsize), 高度(ysize), 深度(xsize)
						geometry = new THREE.BoxGeometry( xsize, ysize, xsize );

						// 修改几何体的UV坐标
						// UV坐标决定纹理如何映射到几何体表面
						// 这里将整个视频纹理分割，每个立方体只显示其中一部分
						change_uvs( geometry, ux, uy, ox, oy );

						// 创建Phong材质并存储到数组中
						// MeshPhongMaterial: 一种具有镜面高光效果的材质
						// 适合表现塑料、金属等反光表面
						materials[ cube_count ] = new THREE.MeshPhongMaterial( parameters );
						
						// 获取当前创建的材质
						material = materials[ cube_count ];

						// 为每个材质设置唯一的色相和饱和度
						// 基于网格位置计算，形成渐变色效果
						material.hue = i / xgrid;               // 色相：从左到右渐变
						material.saturation = 1 - j / ygrid;    // 饱和度：从下到上渐变

						// 应用HSL颜色设置
						// HSL: 色相(Hue)、饱和度(Saturation)、亮度(Lightness)
						// 这里亮度固定为0.5
						material.color.setHSL( material.hue, material.saturation, 0.5 );

						// 创建网格(Mesh)对象
						// Mesh: Three.js中基本的渲染对象，结合了几何体和材质
						mesh = new THREE.Mesh( geometry, material );

						// 设置网格位置
						// 通过计算使所有立方体居中显示
						mesh.position.x = ( i - xgrid / 2 ) * xsize;  // X位置：居中布局
						mesh.position.y = ( j - ygrid / 2 ) * ysize;  // Y位置：居中布局
						mesh.position.z = 0;                          // Z位置：初始为0

						// 设置初始缩放比例
						// 所有轴向缩放为1（原始大小）
						mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;

						// 将网格添加到场景中
						scene.add( mesh );

						// 为每个立方体设置随机的运动速度
						// dx: X轴旋转和移动速度
						// dy: Y轴旋转和移动速度
						// Math.random(): 生成0-1的随机数
						// 0.5 - Math.random(): 生成-0.5到0.5的随机数
						// 乘以0.001: 缩小数值范围，使动画更平滑
						mesh.dx = 0.001 * ( 0.5 - Math.random() );
						mesh.dy = 0.001 * ( 0.5 - Math.random() );

						// 将网格对象存储到数组中
						meshes[ cube_count ] = mesh;

						// 立方体计数器加1
						// 最终cube_count = xgrid × ygrid = 20 × 10 = 200
						cube_count += 1;

					}
				}

				// ---------- 10. 添加鼠标事件监听 ----------
				// 监听文档的鼠标移动事件
				// 当鼠标移动时，调用onDocumentMouseMove函数
				document.addEventListener( 'mousemove', onDocumentMouseMove );

				// ---------- 11. 添加窗口大小调整事件监听 ----------
				// 当浏览器窗口大小改变时，调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 窗口大小调整处理函数
			 * 功能：当浏览器窗口大小改变时，重新调整Three.js渲染设置
			 * 调用时机：窗口大小改变时自动调用
			 */
			function onWindowResize() {

				// 更新窗口中心坐标
				// 需要重新计算，因为窗口大小已改变
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				// 更新相机纵横比
				// 相机纵横比必须与窗口宽高比一致，否则图像会被拉伸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 修改相机参数后必须调用此方法，使更改生效
				camera.updateProjectionMatrix();

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

			}

			/**
			 * 修改几何体UV坐标的函数
			 * UV坐标：决定纹理如何映射到几何体表面
			 * U: 水平方向（范围0-1）
			 * V: 垂直方向（范围0-1）
			 * 
			 * @param {THREE.BufferGeometry} geometry - 要修改的几何体对象
			 * @param {number} unitx - U坐标的单位值（纹理水平分割比例）
			 * @param {number} unity - V坐标的单位值（纹理垂直分割比例）
			 * @param {number} offsetx - U坐标的偏移量（水平方向第几个网格）
			 * @param {number} offsety - V坐标的偏移量（垂直方向第几个网格）
			 * 
			 * 示例：对于20×10的网格，第5列第3行的立方体
			 * unitx = 1/20 = 0.05, unity = 1/10 = 0.1
			 * offsetx = 5, offsety = 3
			 * 原始UV坐标[0,0]会变为[(0+5)*0.05, (0+3)*0.1] = [0.25, 0.3]
			 * 这意味着这个立方体只显示纹理的25%-30%水平区域和30%-40%垂直区域
			 */
			function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
				
				// 获取几何体的UV坐标数组
				// UV坐标以数组形式存储：[U1, V1, U2, V2, U3, V3, ...]
				// 每个顶点有一对UV坐标
				const uvs = geometry.attributes.uv.array;

				// 遍历UV数组，每次处理一个顶点（步长为2，因为每个顶点有U和V两个值）
				for ( let i = 0; i < uvs.length; i += 2 ) {
					
					// 修改U坐标
					// 公式：(原始U坐标 + 水平偏移) × 水平单位值
					// 效果：将整个纹理的U坐标范围(0-1)映射到当前立方体对应的水平片段
					uvs[ i ] = ( uvs[ i ] + offsetx ) * unitx;
					
					// 修改V坐标
					// 公式：(原始V坐标 + 垂直偏移) × 垂直单位值
					// 效果：将整个纹理的V坐标范围(0-1)映射到当前立方体对应的垂直片段
					uvs[ i + 1 ] = ( uvs[ i + 1 ] + offsety ) * unity;
					
					// 注意：立方体有6个面，每个面有2个三角形，每个三角形有3个顶点
					// 所以一个立方体总共有6×2×3=36个顶点，UV数组长度为36×2=72
				}
			}

			/**
			 * 鼠标移动事件处理函数
			 * 功能：记录鼠标位置，用于交互控制相机
			 * 调用时机：每次鼠标移动时触发
			 * 
			 * @param {MouseEvent} event - 浏览器提供的鼠标事件对象
			 * event.clientX: 鼠标相对于浏览器窗口左上角的X坐标
			 * event.clientY: 鼠标相对于浏览器窗口左上角的Y坐标
			 */
			function onDocumentMouseMove( event ) {
				
				// 计算鼠标X坐标相对于窗口中心的偏移
				// event.clientX: 鼠标当前X坐标
				// windowHalfX: 窗口中心X坐标
				// 结果：鼠标在窗口中心右侧时为正，左侧时为负
				mouseX = ( event.clientX - windowHalfX );
				
				// 计算鼠标Y坐标相对于窗口中心的偏移
				// 乘以0.3是为了减小垂直方向的敏感度，使动画更自然
				mouseY = ( event.clientY - windowHalfY ) * 0.3;
				
				// 注意：这里只是记录鼠标位置，实际的相机移动在render函数中实现
				// 这样的设计实现了"延迟跟随"效果，使动画更平滑
			}

			// ==================== 动画和渲染相关变量 ====================
			
			// 动画临时变量
			let h;          // 用于存储计算后的色相值
			let counter = 1; // 动画帧计数器，用于控制动画节奏
			
			// 注意：counter从1开始，不是从0开始
			// 这可能是因为在第一次render时，counter已经递增

			/**
			 * 渲染循环函数
			 * 功能：Three.js的主渲染循环，每一帧都会调用
			 * 包含：更新动画状态、计算变换、渲染场景
			 * 调用时机：由renderer.setAnimationLoop(render)设置，每帧自动调用
			 * 
			 * 渲染循环是3D应用的核心，通常包含以下步骤：
			 * 1. 更新逻辑（位置、旋转、动画状态等）
			 * 2. 渲染场景
			 */
			function render() {
				
				// ---------- 1. 计算时间相关参数 ----------
				// 获取当前时间并转换为秒，再乘以一个较小的系数
				// Date.now(): 返回自1970年1月1日以来的毫秒数
				// * 0.00005: 将毫秒转换为秒并缩小，使动画速度合适
				// 这个值会随时间线性增长，用于驱动周期性动画
				const time = Date.now() * 0.00005;

				// ---------- 2. 更新相机位置（平滑跟随鼠标） ----------
				// 使用线性插值(LERP)实现平滑跟随效果
				// 公式：新位置 = 当前位置 + (目标位置 - 当前位置) × 平滑系数
				
				// 更新相机X位置
				// mouseX: 鼠标目标位置（从onDocumentMouseMove获取）
				// camera.position.x: 相机当前位置
				// 0.05: 平滑系数，值越小跟随越平滑但延迟越大
				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
				
				// 更新相机Y位置
				// 注意：mouseY前面有负号，这是因为屏幕坐标和3D坐标的Y轴方向相反
				// 屏幕坐标：向下为正；3D坐标：向上为正
				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

				// 设置相机始终看向场景中心点(0,0,0)
				// 这样相机始终以场景中心为观察焦点
				camera.lookAt( scene.position );

				// ---------- 3. 更新所有材质的颜色（随时间变化） ----------
				// 遍历所有材质，基于时间更新其色相
				for ( let i = 0; i < cube_count; i ++ ) {
					
					// 获取当前材质
					material = materials[ i ];
					
					// 计算新的色相值
					// 公式：(360 × (基础色相 + 时间)) % 360
					// 360: 色相范围（0-360度）
					// material.hue: 材质的基础色相（初始化时设置）
					// time: 随时间增长的值
					// % 360: 取模运算，确保色相在0-360度范围内循环
					h = ( 360 * ( material.hue + time ) % 360 ) / 360;
					
					// 应用新的HSL颜色
					// h: 新的色相（0-1范围）
					// material.saturation: 保持原来的饱和度
					// 0.5: 亮度固定为中等亮度
					material.color.setHSL( h, material.saturation, 0.5 );
					
					// 效果：每个立方体的颜色会随时间周期性变化
					// 由于每个材质的基础色相不同，它们的变化会错开，形成彩虹波浪效果
				}

				// ---------- 4. 控制立方体的周期性动画 ----------
				// 使用计数器(counter)控制动画节奏
				// 每1000帧为一个周期：前200帧静止，后800帧运动
				
				// 判断是否在运动阶段（counter % 1000 > 200）
				// % 1000: 取模运算，获得当前周期内的帧数（0-999）
				// > 200: 只有周期内超过200帧时才运动
				if ( counter % 1000 > 200 ) {
					
					// 在运动阶段，更新所有立方体的位置和旋转
					for ( let i = 0; i < cube_count; i ++ ) {
						
						// 获取当前网格
						mesh = meshes[ i ];

						// 更新旋转
						// mesh.dx, mesh.dy: 每个立方体独有的旋转速度
						// 乘以10：放大旋转效果
						mesh.rotation.x += 10 * mesh.dx;  // 绕X轴旋转
						mesh.rotation.y += 10 * mesh.dy;  // 绕Y轴旋转

						// 更新位置
						// 使立方体在三维空间中分散移动
						mesh.position.x -= 150 * mesh.dx;  // X方向移动
						mesh.position.y += 150 * mesh.dy;  // Y方向移动（与dy同向）
						mesh.position.z += 300 * mesh.dx;  // Z方向移动（向屏幕外）
						
						// 注意：dx和dy是随机生成的，所以每个立方体的运动方向和速度都不同
					}
				}

				// ---------- 5. 每1000帧反转运动方向 ----------
				// 当计数器是1000的整数倍时（counter % 1000 === 0）
				// 反转所有立方体的运动方向
				if ( counter % 1000 === 0 ) {
					
					// 遍历所有立方体，反转其速度方向
					for ( let i = 0; i < cube_count; i ++ ) {
						
						// 获取当前网格
						mesh = meshes[ i ];
						
						// 反转X方向速度
						// 乘以-1：使速度方向相反
						mesh.dx *= - 1;
						
						// 反转Y方向速度
						mesh.dy *= - 1;
						
						// 效果：立方体会周期性地向相反方向运动
						// 形成"呼吸"或"脉冲"式的动画效果
					}
				}

				// ---------- 6. 增加帧计数器 ----------
				// 每次渲染都增加计数器
				// 计数器用于控制动画节奏和方向反转
				counter ++;

				// ---------- 7. 渲染场景 ----------
				// 调用渲染器的render方法，将3D场景绘制到2D画布上
				// 参数：
				//   scene: 要渲染的场景对象
				//   camera: 用于渲染的相机
				renderer.render( scene, camera );
				
				// 注意：这个函数会被反复调用，形成动画循环
				// 典型的刷新率是60fps（每秒60帧）
			}

		</script>

	</body>
</html>