<!-- 代码功能和技术点详解
🎯 整体功能概述
这是一个基于Three.js的动态3D立方体阵列可视化系统，实现了10,000个立方体的高性能实时渲染。立方体以网格形式排列，呈现波浪起伏的动画效果，同时颜色随时间平滑过渡，相机围绕场景旋转，创造出沉浸式的3D视觉体验。

🌟 核心功能模块
1. 动态波浪动画
效果：10,000个立方体以不同频率和相位上下运动，形成类似水面的波浪效果

机制：每个立方体的高度通过正弦函数计算，使用随机种子实现差异化运动

视觉：产生连续的、有机的波动，远处和近处的立方体运动不同步

2. 颜色过渡系统
三种主题色：青色(cyan)、黄色(yellow)、洋红色(magenta)

波浪式过渡：颜色从中心向外围扩散过渡，形成涟漪效果

平滑动画：使用Tween.js库实现2秒的缓动过渡，避免生硬切换

3. 动态相机系统
环绕运动：相机沿椭圆轨道绕场景中心旋转

动态注视：相机注视点也在移动，产生更复杂的视角变化

轻微倾斜：相机有微小的滚动效果，增加动态感

4. 环境与光照
天空蓝背景：营造广阔的天空感觉

室内环境光：使用预计算的房间环境贴图，提供真实的全局光照

PBR材质：立方体使用标准材质，对光照有真实的反应

🔧 主要技术点详解
1. 实例化渲染技术 ⭐⭐⭐⭐⭐
javascript
// 关键技术实现
mesh = new THREE.InstancedMesh(geometry, material, 10000);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
技术原理：

传统渲染问题：渲染10,000个对象需要10,000次绘制调用，性能极差

实例化解决方案：所有实例共享同一几何体，通过GPU实例化一次性渲染

GPU数据传输：实例属性（变换矩阵、颜色）作为顶点属性传入GPU

性能优势：

绘制调用：从10,000次减少到1次

CPU开销：大幅减少CPU到GPU的数据传输

内存效率：共享几何体数据，减少内存占用

2. 高效动画更新系统
javascript
// 矩阵更新优化
for (let i = 0; i < mesh.count; i++) {
    mesh.getMatrixAt(i, dummy.matrix);
    // ... 更新位置计算
    mesh.setMatrixAt(i, dummy.matrix);
}
mesh.instanceMatrix.needsUpdate = true;
更新策略：

按需更新：只在数据变化时标记needsUpdate为true

批量处理：所有实例在同一循环中更新

重用对象：使用dummy对象避免频繁创建新对象

3. 智能颜色过渡算法
javascript
// 距离驱动的颜色过渡
const f = dummy.position.length() / maxDistance;
if (f <= animation.t) {
    color.set(baseColors[i]).multiply(nextColor);
}
算法特点：

基于距离的阈值：距离原点越近的立方体先改变颜色

波浪传播效果：颜色像涟漪一样从中心向外扩散

随机基础色：每个立方体有独特的基础色，与主题色混合

4. 相机运动与视觉引导
javascript
// 复杂的相机动画
camera.position.x = Math.sin(time / 4) * 10;
camera.position.y = 8 + Math.cos(time / 2) * 2;
cameraTarget.x = Math.sin(time / 4) * -8;
设计考虑：

多轴运动：X、Y、Z轴不同频率的正弦/余弦函数

目标跟踪：相机注视点也在运动，创造动态构图

视觉舒适度：运动速度适中，避免晕眩感

5. 响应式与自适应设计
javascript
// 窗口大小变化处理
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
适配特性：

宽高比保持：相机投影矩阵实时更新

全屏适配：渲染器尺寸匹配窗口大小

高清显示：支持高DPI设备（Retina屏幕）

6. 模块化与现代JavaScript
javascript
// ES6模块导入
import * as THREE from 'three';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
import TWEEN from 'three/addons/libs/tween.module.js';
现代特性：

ES6模块：清晰的依赖管理

Import Maps：浏览器原生模块解析

按需导入：只导入需要的功能，减少打包体积

📊 性能优化技术
1. GPU优化
动态绘制提示：DynamicDrawUsage通知GPU数据会频繁更新

实例属性缓冲区：矩阵和颜色数据存储在GPU缓冲区

最小化状态切换：一次绘制调用完成所有实例渲染

2. CPU优化
重用计算对象：避免在动画循环中创建新对象

高效循环结构：单次遍历更新所有实例

条件更新：只在必要时更新颜色数据

3. 内存优化
共享几何体：所有实例共享同一几何体数据

预分配数组：基础颜色和种子数组预先分配

纹理复用：所有实例使用同一纹理

🎨 视觉设计特色
1. 色彩系统
主题色对比：青色vs黄色vs洋红色，高对比度

随机化基础色：每个立方体有微妙的颜色差异

渐变过渡：缓动函数确保颜色变化平滑

2. 动画设计
多频率叠加：不同轴使用不同频率的正弦函数

随机相位偏移：每个立方体有独特的运动相位

自然波动：数学函数模拟自然波浪效果

3. 构图与视角
鸟瞰视角：相机从上方观察，展现整体图案

动态构图：相机运动创造不断变化的视觉焦点

深度层次：波浪效果创造明显的空间深度感

🚀 技术架构总结
核心技术栈：
Three.js：3D渲染引擎

WebGL：底层图形API

Tween.js：动画过渡库

ES6+：现代JavaScript特性

渲染管线：
text
几何体数据 → 实例属性 → 顶点着色器 → 片段着色器 → 屏幕
动画管线：
text
时间更新 → 相机计算 → 实例位置更新 → 颜色计算 → 渲染
💡 应用场景
数据可视化：展示大规模数据点的动态变化

艺术装置：交互式数字艺术展示

游戏背景：动态的3D环境背景

性能演示：展示WebGL和Three.js的性能能力

教育工具：学习实例化渲染和3D动画的绝佳示例 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面元信息：
			- title: 页面标题，显示在浏览器标签页上
			- charset: 字符编码设置为UTF-8，支持中文显示
			- viewport: 视口设置，适配移动设备，禁止用户缩放
		-->
		<title>Three.js WebGL 实例化动态立方体阵列</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			引入外部CSS样式表：
			- type="text/css": 指定MIME类型为CSS
			- rel="stylesheet": 定义当前文档与链接资源的关系为样式表
			- href="main.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			信息展示区域：
			- id="info": 用于CSS样式和JavaScript选择器
			- 展示项目信息、技术说明和版权声明
		-->
		<div id="info">
			<!-- 
				项目标题和链接：
				- target="_blank": 在新标签页打开链接
				- rel="noopener": 安全特性，防止新页面访问原页面的window对象
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebGL - 动态实例化渲染演示<br/>
			技术实现：基于实例化网格(InstancedMesh)的高性能渲染<br/>
			灵感来源：<a href="https://oosmoxiecode.com/archive/js_webgl/cubescape/" target="_blank" rel="noopener">Cubescape 立方体空间</a>
			原作者：<a href="https://github.com/oosmoxiecode" target="_blank" rel="noopener">oosmoxiecode</a><br/>
		</div>

		<!-- 
			导入映射(Import Map)配置：
			- 现代JavaScript模块化特性，定义模块路径别名
			- 允许在import语句中使用简化的路径名称
			- 提高代码的可维护性和可移植性
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			- type="module": 标识为ES6模块，支持import/export语法
			- 模块化代码，避免全局变量污染
		-->
		<script type="module">

			// ============================================
			// 模块导入区域
			// ============================================

			// 导入Three.js核心库的所有功能
			// Three.js是一个用于创建3D图形的JavaScript库
			import * as THREE from 'three';

			// 从Three.js附加组件中导入特定的模块
			// RoomEnvironment: 预定义的3D房间环境，用于环境光照
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			// TWEEN: 补间动画库，用于创建平滑的过渡动画
			import TWEEN from 'three/addons/libs/tween.module.js';

			// ============================================
			// 全局变量声明区域
			// ============================================

			// Three.js核心对象变量声明
			let camera;      // 相机：定义观察者的视角和投影方式
			let scene;       // 场景：包含所有3D对象的容器
			let renderer;    // 渲染器：负责将3D场景绘制到2D画布上
			let timer;       // 计时器：用于时间管理和动画同步
			let mesh;        // 网格：包含所有立方体实例的实例化网格对象

			// 场景配置常量
			const amount = 100;  // 网格每边的实例数量，创建100x100的网格阵列

			// 计算总实例数量：100的平方 = 10,000个立方体
			const count = Math.pow( amount, 2 );
			// 创建虚拟对象：用于临时存储和计算单个实例的变换信息
			const dummy = new THREE.Object3D();

			// 数据存储数组
			const seeds = [];      // 随机种子数组：为每个实例存储一个随机值，用于差异化动画
			const baseColors = []; // 基础颜色数组：存储每个实例的原始颜色值

			// 颜色和动画相关变量
			const color = new THREE.Color();  // 临时颜色对象：用于颜色计算和转换
			// 定义三种过渡颜色数组：青色、黄色、洋红色
			const colors = [
				new THREE.Color( 0x00ffff ),  // 青色 (RGB: 0,255,255)
				new THREE.Color( 0xffff00 ),  // 黄色 (RGB: 255,255,0)
				new THREE.Color( 0xff00ff )   // 洋红色 (RGB: 255,0,255)
			];
			// 动画状态对象：t属性表示动画进度，范围从0到1
			const animation = { t: 0 };
			let currentColorIndex = 0;  // 当前颜色索引：指向colors数组中的当前颜色
			let nextColorIndex = 1;     // 下一个颜色索引：指向colors数组中的下一个颜色

			// 相机和距离相关变量
			const maxDistance = 75;  // 最大距离阈值：用于计算颜色过渡的范围
			const cameraTarget = new THREE.Vector3();  // 相机注视目标点：相机看向的位置

			// ============================================
			// 主函数调用
			// ============================================

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

			// ============================================
			// 函数定义区域
			// ============================================

			/**
			 * 初始化函数 - 整个应用的入口点
			 * 职责：
			 * 1. 创建WebGL渲染器和设置渲染参数
			 * 2. 创建相机和设置初始视角
			 * 3. 创建场景和设置环境光照
			 * 4. 创建实例化网格和初始化所有实例
			 * 5. 设置事件监听器和定时器
			 * 
			 * 工作流程：
			 * 渲染器 → 相机 → 场景 → 几何体/材质 → 实例化网格 → 事件绑定
			 */
			function init() {

				// ----------------------------------------
				// 第一部分：创建和配置WebGL渲染器
				// ----------------------------------------

				// 创建WebGL渲染器实例
				// { antialias: true } 开启抗锯齿，平滑图形边缘
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				
				// 设置设备像素比，适配高DPI屏幕（如Retina显示屏）
				// window.devicePixelRatio获取设备的物理像素与CSS像素的比例
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为浏览器窗口大小
				// 使3D场景填满整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置色调映射方式为NeutralToneMapping
				// 色调映射将HDR（高动态范围）颜色转换到LDR（低动态范围）显示设备
				renderer.toneMapping = THREE.NeutralToneMapping;
				
				// 设置动画循环回调函数
				// animate函数将在每次浏览器重绘时被调用（通常每秒60次）
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的canvas元素添加到网页body中
				// renderer.domElement是渲染器创建的<canvas>元素
				document.body.appendChild( renderer.domElement );

				// ----------------------------------------
				// 第二部分：创建和配置相机
				// ----------------------------------------

				// 创建透视相机(PerspectiveCamera)
				// 参数说明：
				// 1. 视野角度(FOV): 60度 - 垂直视角范围
				// 2. 宽高比: 窗口宽度/高度 - 保持正确的比例
				// 3. 近平面: 0.1 - 相机能看到的最小距离
				// 4. 远平面: 100 - 相机能看到的最大距离
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
				
				// 设置相机初始位置：x=10, y=10, z=10
				// 在3D空间中，默认坐标系为：
				// x轴：水平向右，y轴：垂直向上，z轴：垂直屏幕向外
				camera.position.set( 10, 10, 10 );
				
				// 设置相机初始注视点：世界坐标系原点(0,0,0)
				// 使相机看向场景中心
				camera.lookAt( 0, 0, 0 );

				// ----------------------------------------
				// 第三部分：创建场景和环境光照
				// ----------------------------------------

				// 创建PMREM（预计算辐射环境贴图）生成器
				// PMREM用于快速生成高质量的环境贴图，支持基于图像的照明(IBL)
				const pmremGenerator = new THREE.PMREMGenerator( renderer );

				// 创建场景对象
				// 场景是所有3D对象的容器，包括模型、灯光、相机等
				scene = new THREE.Scene();
				
				// 设置场景背景色为浅蓝色
				// 0xadd8e6是十六进制颜色值，对应RGB(173, 216, 230)
				scene.background = new THREE.Color( 0xadd8e6 );
				
				// 设置场景环境贴图
				// 从RoomEnvironment生成HDR环境贴图，0.04是曝光强度的缩放因子
				// 环境贴图提供了全局照明，使物体表面有更真实的光照效果
				scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

				// 创建计时器
				// Three.js的Timer类提供精确的时间管理功能
				timer = new THREE.Timer();
				
				// 连接计时器到文档
				// 这使得计时器能够响应页面可见性变化（如标签页切换）
				timer.connect( document );

				// ----------------------------------------
				// 第四部分：创建几何体、材质和纹理
				// ----------------------------------------

				// 创建纹理加载器
				// 用于异步加载图像文件作为纹理贴图
				const loader = new THREE.TextureLoader();
				
				// 加载纹理图片
				// 'textures/edge3.jpg'是纹理文件路径
				// 纹理将应用于立方体的表面
				const texture = loader.load( 'textures/edge3.jpg' );
				
				// 设置纹理的颜色空间为sRGB
				// sRGB是标准的颜色空间，确保颜色在不同设备上显示一致
				texture.colorSpace = THREE.SRGBColorSpace;

				// 创建立方体几何体
				// BoxGeometry默认创建1x1x1的立方体，包含6个面、8个顶点、12个三角形
				const geometry = new THREE.BoxGeometry();
				
				// 创建标准材质(MeshStandardMaterial)
				// 标准材质是基于物理的渲染(PBR)材质，支持金属度、粗糙度等物理属性
				// { map: texture } 将加载的纹理设置为漫反射贴图
				const material = new THREE.MeshStandardMaterial( { map: texture } );

				// ----------------------------------------
				// 第五部分：创建实例化网格
				// ----------------------------------------

				// 创建实例化网格(InstancedMesh)
				// 参数说明：
				// 1. geometry: 几何体 - 所有实例共享同一几何体数据
				// 2. material: 材质 - 所有实例共享同一材质
				// 3. count: 实例数量 - 10,000个实例
				// 实例化渲染是一种优化技术，通过一次绘制调用渲染多个相同几何体的实例
				mesh = new THREE.InstancedMesh( geometry, material, count );
				
				// 设置实例矩阵的使用方式为动态绘制
				// DynamicDrawUsage告诉渲染器这些矩阵数据会频繁更新（每帧）
				// 这允许GPU优化内存管理和数据传输
				mesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage );
				
				// 将实例化网格添加到场景中
				scene.add( mesh );

				// ----------------------------------------
				// 第六部分：初始化所有实例的位置和颜色
				// ----------------------------------------

				// 初始化变量
				let i = 0;  // 当前实例的索引，从0到9999
				
				// 计算偏移量，使网格在x-z平面上居中
				// (amount - 1) / 2 确保网格中心在原点(0,0,0)
				const offset = ( amount - 1 ) / 2;

				// 双层循环：遍历所有实例位置
				// 外层循环：x轴方向（从0到99）
				// 内层循环：z轴方向（从0到99）
				// 总共100x100=10,000次迭代
				for ( let x = 0; x < amount; x ++ ) {
					for ( let z = 0; z < amount; z ++ ) {

						// 设置虚拟对象的位置
						// offset - x：使x坐标从正到负对称分布
						// 0：初始y坐标为0（地面高度）
						// offset - z：使z坐标从正到负对称分布
						dummy.position.set( offset - x, 0, offset - z );
						
						// 设置虚拟对象的缩放
						// x和z方向缩放为1（默认大小），y方向缩放为2（高度加倍）
						dummy.scale.set( 1, 2, 1 );

						// 更新虚拟对象的变换矩阵
						// 将位置、旋转、缩放信息组合成4x4变换矩阵
						dummy.updateMatrix();

						// 生成随机的基础颜色（使用HSL色彩空间）
						// HSL参数：
						// 1. 色相(H): 固定为1（红色系），但后续会乘以其他颜色
						// 2. 饱和度(S): 0.5到1.0之间的随机值
						// 3. 亮度(L): 0.5到1.0之间的随机值
						color.setHSL( 1, 0.5 + ( Math.random() * 0.5 ), 0.5 + ( Math.random() * 0.5 ) );
						
						// 保存基础颜色到数组（转换为十六进制值）
						baseColors.push( color.getHex() );

						// 将虚拟对象的变换矩阵设置到实例化网格中
						// i是实例索引，dummy.matrix是4x4变换矩阵
						mesh.setMatrixAt( i, dummy.matrix );
						
						// 设置实例的颜色
						// 将基础颜色与colors数组中的第一个颜色（青色）相乘
						// 颜色相乘是混合颜色的方式
						mesh.setColorAt( i, color.multiply( colors[ 0 ] ) );

						i ++;  // 递增实例索引

						// 为每个实例生成并保存一个随机种子
						// 这个种子值将用于后续的差异化动画
						seeds.push( Math.random() );

					} // 结束内层循环（z轴）
				} // 结束外层循环（x轴）

				// ----------------------------------------
				// 第七部分：设置事件监听器和定时器
				// ----------------------------------------

				// 添加窗口大小变化事件监听器
				// 当浏览器窗口大小改变时，调用onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );

				// 设置定时器：每3000毫秒（3秒）触发一次颜色过渡动画
				// setInterval是JavaScript内置的定时函数
				// 第一个参数是要执行的函数，第二个参数是间隔时间（毫秒）
				setInterval( startTween, 3000 );

			} // 结束init函数

			/**
			 * 启动补间动画函数
			 * 功能：创建和管理颜色过渡的补间动画
			 * 
			 * 动画原理：
			 * 1. 使用TWEEN.js库创建补间动画
			 * 2. 动画对象是animation，目标是将animation.t从0过渡到1
			 * 3. 动画持续2秒，使用正弦缓入函数
			 * 4. 动画完成后更新颜色索引，为下一次动画做准备
			 * 
			 * 颜色过渡逻辑：
			 * 在动画过程中，根据每个立方体与中心点的距离决定何时切换颜色
			 * 距离较近的立方体先切换颜色，距离较远的后切换，形成波浪效果
			 */
			function startTween() {

				// 创建新的补间动画对象
				// TWEEN.Tween创建补间实例，参数animation是要动画的对象
				new TWEEN.Tween( animation )
					// 设置动画目标值：将animation.t属性从当前值过渡到1
					// 这意味着动画进度从0%到100%
					.to( {
						t: 1  // 目标值：1表示动画完成
					}, 2000 )  // 动画持续时间：2000毫秒（2秒）
					
					// 设置缓动函数：Sinusoidal.In（正弦缓入）
					// 缓动函数控制动画的速度变化：
					// - Sinusoidal: 正弦曲线运动，平滑开始和结束
					// - .In: 缓入效果，动画开始时较慢，然后加速
					.easing( TWEEN.Easing.Sinusoidal.In )
					
					// 设置动画完成时的回调函数
					// 当动画到达100%时执行
					.onComplete( () => {

						// 重置动画进度为0，为下一次动画做准备
						animation.t = 0;

						// 更新颜色索引
						// 当前颜色索引变为下一个颜色索引
						currentColorIndex = nextColorIndex;
						
						// 下一个颜色索引递增
						nextColorIndex ++;

						// 循环检查：如果下一个颜色索引超出数组范围
						// 重置为0（数组第一个颜色）
						if ( nextColorIndex >= colors.length ) nextColorIndex = 0;

					} )
					
					// 启动动画
					// 动画将在下一帧开始执行
					.start();

			} // 结束startTween函数

			/**
			 * 窗口大小变化处理函数
			 * 响应浏览器窗口大小变化事件
			 * 
			 * 功能：
			 * 1. 更新相机的宽高比，防止图像拉伸变形
			 * 2. 更新渲染器尺寸，使3D场景填满新的窗口大小
			 * 
			 * 调用时机：
			 * 用户调整浏览器窗口大小时自动触发
			 * 设备旋转（移动设备横屏/竖屏切换）时自动触发
			 */
			function onWindowResize() {

				// 更新相机的宽高比
				// window.innerWidth / window.innerHeight 计算新的窗口宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 当相机参数（如宽高比）改变后，必须调用此方法重新计算投影矩阵
				// 投影矩阵定义了3D空间如何映射到2D屏幕
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 将WebGL画布的大小调整为新的窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );

			} // 结束onWindowResize函数

			/**
			 * 动画循环函数 - 每帧调用一次
			 * 这是整个应用的核心动画引擎，通常每秒调用60次
			 * 
			 * 主要任务：
			 * 1. 更新时间管理
			 * 2. 更新补间动画
			 * 3. 动画相机位置和朝向
			 * 4. 更新所有立方体实例的位置和颜色
			 * 5. 标记需要更新的GPU数据
			 * 6. 渲染整个场景
			 * 
			 * 性能优化：
			 * 使用实例化渲染，一次绘制调用渲染10,000个立方体
			 * 只更新需要变化的GPU数据（变换矩阵和颜色）
			 */
			function animate() {

				// 更新计时器
				// 计算自计时器启动以来经过的时间
				timer.update();

				// 获取经过的总时间（秒）
				// 这个时间值用于所有与时间相关的动画计算
				const time = timer.getElapsed();

				// 更新所有活动的补间动画
				// TWEEN.update()根据当前时间更新所有补间动画的状态
				TWEEN.update();

				// ----------------------------------------
				// 第一部分：动画相机位置和朝向
				// ----------------------------------------

				// 动画相机x轴位置：正弦运动
				// Math.sin(time/4)：基于时间的正弦函数，产生周期性运动
				// *10：振幅，控制运动范围的大小
				// 整体效果：相机在x轴上做周期性左右运动
				camera.position.x = Math.sin( time / 4 ) * 10;
				
				// 动画相机z轴位置：余弦运动
				// Math.cos(time/4)：基于时间的余弦函数
				// 与x轴的正弦运动配合，产生圆周运动效果
				camera.position.z = Math.cos( time / 4 ) * 10;
				
				// 动画相机y轴位置：余弦运动叠加固定高度
				// 8 + Math.cos(time/2) * 2：在8的基准高度上做上下浮动
				// time/2：与x/z轴不同频率，产生更复杂的运动轨迹
				camera.position.y = 8 + Math.cos( time / 2 ) * 2;

				// 动画相机注视目标点
				// 使相机不仅自身运动，还看向一个移动的目标点
				// 这创造了更动态和有趣的视角
				cameraTarget.x = Math.sin( time / 4 ) * - 8;  // x轴反向运动
				cameraTarget.z = Math.cos( time / 2 ) * - 8;  // z轴不同频率的运动

				// 更新相机的注视方向
				// 使相机始终看向cameraTarget点
				camera.lookAt( cameraTarget );

				// 轻微动画相机的上方向向量
				// camera.up定义相机的哪个方向是"上"
				// 通过动画x分量，使相机产生轻微的倾斜/滚动效果
				camera.up.x = Math.sin( time / 400 );  // 非常慢的周期（400秒周期）

				// ----------------------------------------
				// 第二部分：更新所有立方体实例的位置和颜色
				// ----------------------------------------

				// 遍历所有实例（10,000个）
				// mesh.count是实例总数，这里是10,000
				for ( let i = 0; i < mesh.count; i ++ ) {

					// 步骤1：获取当前实例的变换矩阵
					// 从实例化网格中获取第i个实例的变换矩阵，存储到dummy.matrix
					mesh.getMatrixAt( i, dummy.matrix );
					
					// 步骤2：分解变换矩阵
					// 将4x4矩阵分解为位置(position)、旋转(quaternion)、缩放(scale)三个分量
					// 这样可以单独修改位置而不影响旋转和缩放
					dummy.matrix.decompose( dummy.position, dummy.quaternion, dummy.scale );

					// 步骤3：计算新的y轴位置（波浪动画）
					// 动画公式：Math.abs( Math.sin( (time + seed) * 2 + seed ) )
					// - Math.sin(): 正弦函数产生平滑的周期性运动
					// - time + seeds[i]: 为每个实例添加不同的相位偏移
					// - *2: 控制波浪的频率，值越大波浪越密集
					// - + seeds[i]: 额外的相位偏移，增加随机性
					// - Math.abs(): 取绝对值，使y值始终为正（从0到1）
					// 整体效果：每个立方体以不同频率和相位上下运动，形成波浪效果
					dummy.position.y = Math.abs( Math.sin( ( time + seeds[ i ] ) * 2 + seeds[ i ] ) );

					// 步骤4：重新组合变换矩阵
					// 将修改后的位置与原有的旋转、缩放重新组合成4x4矩阵
					dummy.updateMatrix();

					// 步骤5：更新实例的变换矩阵
					// 将计算出的新矩阵设置回实例化网格
					mesh.setMatrixAt( i, dummy.matrix );

					// ----------------------------------------
					// 颜色过渡动画部分
					// ----------------------------------------

					// 检查是否有活动的颜色过渡动画
					// animation.t > 0 表示有颜色动画在进行中
					if ( animation.t > 0 ) {

						// 获取当前颜色和下一个颜色
						const currentColor = colors[ currentColorIndex ];  // 当前正在被替换的颜色
						const nextColor = colors[ nextColorIndex ];        // 将要过渡到的颜色
			
						// 计算距离因子：当前实例位置的长度与最大距离的比例
						// dummy.position.length(): 计算从原点到实例位置的欧几里得距离
						// / maxDistance: 将距离归一化到0-1范围
						// 距离越大的实例，f值越接近1
						const f = dummy.position.length() / maxDistance;

						// 根据动画进度和距离因子决定颜色
						// 这是一个波浪式的颜色过渡效果：
						// - 距离较近的立方体先切换颜色（f值小）
						// - 距离较远的立方体后切换颜色（f值大）
						// - animation.t从0到1逐渐增加，颜色切换的"边界"逐渐向外扩展
						if ( f <= animation.t ) {
							// 如果距离因子小于等于动画进度，使用下一个颜色
							// 这表示这个立方体已经"到达"了颜色切换的边界
							color.set( baseColors[ i ] ).multiply( nextColor );
						} else {
							// 否则，仍然使用当前颜色
							color.set( baseColors[ i ] ).multiply( currentColor );
						}

						// 更新实例的颜色
						mesh.setColorAt( i, color );

					} // 结束颜色动画检查

				} // 结束实例遍历循环

				// ----------------------------------------
				// 第三部分：标记GPU数据需要更新
				// ----------------------------------------

				// 标记实例变换矩阵需要更新到GPU
				// instanceMatrix存储所有实例的变换矩阵
				// needsUpdate = true 告诉Three.js这些数据已经改变，需要重新上传到GPU
				mesh.instanceMatrix.needsUpdate = true;
				
				// 如果有颜色动画，标记实例颜色需要更新到GPU
				// instanceColor存储所有实例的颜色数据
				// 只有在颜色实际改变时才需要更新
				if ( animation.t > 0 ) mesh.instanceColor.needsUpdate = true;
			
				// 重新计算网格的包围球
				// 包围球是包含所有顶点的最小球体，用于：
				// 1. 视锥剔除：当包围球完全在相机视野外时，跳过整个网格的渲染
				// 2. 碰撞检测：快速判断对象是否相交
				// 由于实例位置在变化，包围球也需要重新计算
				mesh.computeBoundingSphere();

				// ----------------------------------------
				// 第四部分：渲染场景
				// ----------------------------------------

				// 执行WebGL渲染命令
				// 将3D场景通过相机视角渲染到2D画布上
				// 参数：
				// 1. scene: 要渲染的场景对象
				// 2. camera: 用于渲染的相机视角
				renderer.render( scene, camera );

			} // 结束animate函数

			// ============================================
			// 代码执行流程总结：
			// ============================================
			// 1. 页面加载 → 执行<script type="module">中的代码
			// 2. 导入依赖模块 → 声明全局变量 → 调用init()
			// 3. init()初始化所有Three.js对象和场景
			// 4. setAnimationLoop(animate)启动动画循环
			// 5. 浏览器每帧调用animate()函数
			// 6. animate()更新动画状态并渲染场景
			// 7. 用户交互或定时器触发额外动画（如颜色过渡）
			// 8. 持续循环，直到页面关闭或刷新

		</script>

	</body>
</html>