<!-- 代码功能概述
这是一个Three.js原始着色器（RawShaderMaterial）演示应用，展示了如何使用自定义GLSL着色器代码在浏览器中创建动态3D视觉效果。应用生成一个由200个随机三角形组成的抽象几何体，每个顶点具有随机颜色，并通过着色器代码实现基于时间的颜色波动动画。

核心视觉体验：
抽象几何体：600个随机位置的顶点形成类似粒子云的3D结构

多彩外观：每个顶点具有随机RGBA颜色，产生丰富多彩的视觉效果

动态着色：红色通道根据顶点X坐标和时间正弦波动，产生脉动效果

旋转动画：整个几何体绕Y轴缓慢旋转，增强三维空间感

透明效果：顶点具有随机透明度，创建半透明重叠效果

深色背景：深灰色背景突出显示彩色几何体

主要技术点详解
1. Three.js核心架构
场景图系统：使用THREE.Scene作为所有3D对象的容器

透视相机：THREE.PerspectiveCamera模拟人眼视角，支持近大远小效果

WebGL渲染器：THREE.WebGLRenderer利用WebGL API进行硬件加速渲染

动画循环：通过setAnimationLoop实现60FPS的平滑动画

2. 高性能几何体（BufferGeometry）
缓冲区属性：使用Float32BufferAttribute和Uint8BufferAttribute存储顶点数据

内存优化：

位置数据：32位浮点数（精度足够且性能良好）

颜色数据：8位无符号整数（节省75%内存，通过归一化转换）

数据归一化：颜色值（0-255）自动映射到GPU期望的0.0-1.0范围

3. 自定义着色器系统（核心特性）
原始着色器材质：RawShaderMaterial提供完全自定义的着色器控制

GLSL代码内嵌：直接在HTML中定义顶点和片元着色器

Uniform变量传递：JavaScript与着色器间的实时数据通信

着色器管道流程：
text
JavaScript数据 → 顶点缓冲区 → 顶点着色器 → 光栅化 → 片元着色器 → 屏幕像素
4. GLSL着色器技术细节
顶点着色器（Vertex Shader）：
glsl
// 输入：每个顶点的位置和颜色
// 处理：应用模型-视图-投影变换矩阵
// 输出：裁剪空间位置 + 传递给片元着色器的插值数据
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
片元着色器（Fragment Shader）：
glsl
// 动态颜色计算：
color.r += sin(vPosition.x * 10.0 + time) * 0.5;
// 基于顶点X坐标和时间产生正弦波动
// 仅修改红色通道，创建脉动效果
5. WebGL渲染管线定制
属性（Attributes）：每个顶点特有的数据（位置、颜色）

Uniforms：所有顶点/片元共享的常量（时间、变换矩阵）

Varyings：顶点到片元着色器的插值数据传递

精度控制：mediump在移动设备和桌面设备间的平衡选择

6. 性能优化技术
设备像素比适配：自动适应高DPI显示设备（Retina屏幕）

响应式设计：窗口大小变化时自动调整渲染尺寸和相机参数

性能监控：集成Stats.js实时显示FPS和渲染耗时

高效动画：使用performance.now()获取高精度时间戳

7. 现代JavaScript特性
ES6模块：使用import/export语法导入Three.js库

Import Maps：浏览器原生模块路径映射，无需构建工具

类型化数组：Float32Array和Uint8Array高效数据处理

8. 交互与响应式特性
窗口大小监听：resize事件处理确保画布正确缩放

自动旋转：基于时间的恒定速度旋转，无需用户交互

跨设备兼容：视口设置确保移动设备上的正确显示

技术栈总结
技术层级	使用的技术	作用
HTML结构	HTML5, Script标签	页面骨架和着色器代码存储
CSS样式	外部CSS文件	页面布局和样式控制
JavaScript	ES6模块, Three.js API	应用逻辑和3D场景管理
着色语言	GLSL ES 2.0	GPU执行的图形计算程序
图形API	WebGL 1.0/2.0	底层图形硬件接口
浏览器特性	Import Maps, requestAnimationFrame	模块加载和动画调度
教育价值
这个示例演示了：

从零开始构建3D渲染管线：理解从数据到像素的完整流程

原始着色器编程：脱离高级材质系统，直接控制GPU

性能优化实践：缓冲区使用、数据类型选择、内存管理

动画原理：基于时间的连续状态更新

响应式3D图形：适应不同屏幕尺寸和设备能力 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			页面标题标签：显示在浏览器标签页上的标题
			这里是Three.js原始着色器演示页面
		-->
		<title>Three.js原始着色器演示 - 自定义GLSL着色器效果</title>
		<!-- 
			元字符集声明：指定文档使用的字符编码为UTF-8
			UTF-8支持多语言字符，包括中文
		-->
		<meta charset="utf-8">
		<!-- 
			视口(viewport)元标签：用于响应式网页设计
			width=device-width: 视口宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放页面（为了保持Three.js画布的固定比例）
			minimum-scale=1.0: 最小缩放比例为1.0（100%）
			maximum-scale=1.0: 最大缩放比例为1.0（100%）
			这些设置确保Three.js渲染的画布在不同设备上保持一致的视觉体验
		-->
		<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": 外部样式表文件的路径
			注意：此处引用的main.css文件需存在于同一目录下
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			Three.js渲染的画布容器：
			id="container": 用于在JavaScript中通过getElementById获取此DOM元素
			Three.js会将WebGL画布渲染到此div元素内部
		-->
		<div id="container"></div>
		<!-- 
			页面信息展示区域：
			id="info": 用于CSS样式定位和JavaScript操作
			这里展示页面信息和Three.js官网链接
		-->
		<div id="info">
			<!-- 
				外部链接标签：
				href="https://threejs.org": 链接目标地址（Three.js官方网站）
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全特性，防止新页面通过window.opener访问原页面
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js官网</a> 
			- 原始着色器演示 - 使用自定义GLSL着色器创建动态视觉效果
		</div>

		<!-- 
			顶点着色器脚本：
			id="vertexShader": 用于在JavaScript中通过getElementById获取此脚本内容
			type="x-shader/x-vertex": 自定义MIME类型，表示这是顶点着色器代码
			浏览器不会执行此脚本，仅将其作为文本内容存储
		-->
		<script id="vertexShader" type="x-shader/x-vertex">

			// 设置浮点数精度为中等精度（medium precision）
			// 中等精度通常在速度和精度之间取得平衡，适合移动设备
			// 可选值：highp（高精度）、mediump（中等精度）、lowp（低精度）
			precision mediump float;
			
			// 设置整数精度为中等精度
			// 在WebGL中，整数精度设置也很重要，特别是进行位运算时
			precision mediump int;

			// uniform变量声明：从JavaScript传递到着色器的常量数据
			// uniform变量在所有顶点/片元中保持不变（除非由JavaScript更新）
			// mat4: 4x4矩阵数据类型，用于表示变换矩阵
			
			// modelViewMatrix（模型视图矩阵，可选）：
			// 组合了模型变换和视图变换的矩阵
			// 作用：将顶点从模型局部坐标系转换到相机坐标系（视图空间）
			// 模型变换：将顶点从模型空间转换到世界空间
			// 视图变换：将顶点从世界空间转换到相机空间（以相机为原点的坐标系）
			uniform mat4 modelViewMatrix; // optional
			
			// projectionMatrix（投影矩阵，可选）：
			// 将相机空间中的3D坐标转换为标准化设备坐标（NDC，范围-1到1）
			// 作用：实现3D到2D的投影变换，创建透视效果
			uniform mat4 projectionMatrix; // optional

			// attribute变量声明：每个顶点特有的输入数据
			// attribute变量在顶点着色器中定义，从缓冲区中读取每个顶点的数据
			// 在片元着色器中不可用（需要通过varying变量传递）
			
			// position（顶点位置）：
			// vec3: 三维向量数据类型，包含x、y、z三个分量
			// 表示顶点在模型局部坐标系中的位置
			attribute vec3 position;
			
			// color（顶点颜色）：
			// vec4: 四维向量数据类型，包含r、g、b、a四个分量
			// 表示顶点的颜色值（红、绿、蓝、透明度）
			attribute vec4 color;

			// varying变量声明：从顶点着色器传递到片元着色器的插值数据
			// varying变量在顶点着色器中赋值，经过光栅化插值后传递给片元着色器
			// 同一图元内不同片元会获得不同的插值结果
			
			// vPosition（顶点位置传递变量）：
			// 将原始顶点位置（未经过变换的）传递到片元着色器
			// 在片元着色器中可用于基于位置的特效
			varying vec3 vPosition;
			
			// vColor（顶点颜色传递变量）：
			// 将顶点颜色传递到片元着色器
			// 在片元着色器中会进行插值，产生平滑的颜色渐变
			varying vec4 vColor;

			// 顶点着色器主函数：每个顶点执行一次
			// 主要任务：计算顶点的最终位置（gl_Position）
			void main()	{
				// 将原始顶点位置赋值给varying变量
				// 这样片元着色器可以访问每个顶点的原始位置
				vPosition = position;
				
				// 将顶点颜色赋值给varying变量
				// 颜色值会从顶点着色器传递到片元着色器
				vColor = color;

				// 计算顶点在裁剪空间中的最终位置：
				// 1. 将position从vec3转换为vec4（齐次坐标），w分量设为1.0
				//    vec4(position, 1.0): 将三维坐标转换为四维齐次坐标
				// 2. 应用模型视图变换：modelViewMatrix * vec4(position, 1.0)
				//    将顶点从模型空间转换到相机空间
				// 3. 应用投影变换：projectionMatrix * (上一步的结果)
				//    将顶点从相机空间转换到裁剪空间（标准化设备坐标）
				// 4. 将结果赋值给内置变量gl_Position
				//    gl_Position是WebGL内置变量，表示顶点在裁剪空间中的位置
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}

		</script>

		<!-- 
			片元着色器脚本：
			id="fragmentShader": 用于在JavaScript中获取片元着色器代码
			type="x-shader/x-fragment": 自定义MIME类型，表示这是片元着色器代码
			片元着色器对每个像素（更准确说是每个片元）执行一次
		-->
		<script id="fragmentShader" type="x-shader/x-fragment">

			// 精度声明（必须与顶点着色器一致）
			precision mediump float;
			precision mediump int;

			// uniform变量：时间变量，由JavaScript传递
			// float: 单精度浮点数
			// 用于创建基于时间的动画效果（如颜色变化、运动效果）
			uniform float time;

			// varying变量：从顶点着色器传递过来的插值数据
			// 这些变量在顶点着色器中定义，经过光栅化插值后传递到片元着色器
			
			// vPosition：插值后的位置数据
			// 每个片元（像素）会获得根据其位置在三角形中插值得到的位置值
			varying vec3 vPosition;
			
			// vColor：插值后的颜色数据
			// 每个片元会获得根据其位置在三角形中插值得到的颜色值
			// 这种插值会产生平滑的颜色渐变效果
			varying vec4 vColor;

			// 片元着色器主函数：每个片元（像素）执行一次
			// 主要任务：计算最终像素颜色（gl_FragColor）
			void main()	{
				// 创建颜色变量并初始化为插值后的顶点颜色
				// vec4(vColor): 确保颜色是四维向量（包含透明度）
				vec4 color = vec4( vColor );
				
				// 动态修改颜色：基于位置和时间创建波动效果
				// 1. vPosition.x * 10.0: 
				//    - 使用顶点的x坐标作为基础
				//    - 乘以10.0增加波动频率（使颜色变化更密集）
				// 2. + time: 添加时间因子，使波动随时间变化（动画效果）
				// 3. sin(...): 计算正弦值，产生-1到1之间的周期性波动
				// 4. * 0.5: 将波动幅度缩放到-0.5到0.5之间
				// 5. color.r += ...: 将结果加到红色通道上
				//    这会使红色分量在原始值基础上波动，创建脉动效果
				color.r += sin( vPosition.x * 10.0 + time ) * 0.5;

				// 将最终计算的颜色赋值给内置输出变量
				// gl_FragColor: WebGL内置变量，表示片元的最终颜色
				// 这个颜色将被写入颜色缓冲区，最终显示在屏幕上
				gl_FragColor = color;
			}

		</script>

		<!-- 
			导入映射表（Import Maps）：
			type="importmap": 定义模块导入的映射关系
			允许浏览器将模块标识符映射到实际URL
			这是ES模块系统的一部分，用于解决模块路径问题
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module": 表示这是一个ES6模块
			模块代码具有自己的作用域，支持import/export语法
			这是Three.js推荐的使用方式
		-->
		<script type="module">

			// 导入Three.js核心库
			// import * as THREE: 导入Three.js的所有导出内容，命名为THREE对象
			// 这样可以通过THREE.XXX访问Three.js的所有类和函数
			import * as THREE from 'three';

			// 导入性能统计器模块
			// Stats是一个显示FPS（帧率）、MS（每帧耗时）等性能指标的小工具
			// 通常显示在页面左上角，用于性能监控和调试
			import Stats from 'three/addons/libs/stats.module.js';

			// 全局变量声明
			// 这些变量将在多个函数中访问，因此声明在模块作用域内
			let container, stats;      // DOM容器和性能统计器对象
			let camera, scene, renderer; // Three.js核心对象：相机、场景、渲染器

			// 初始化函数调用：页面加载后立即执行
			// 这是整个Three.js应用的入口点
			init();

			/**
			 * 初始化函数：Three.js应用的主要设置和配置
			 * 负责创建场景、相机、渲染器、几何体、材质和网格对象
			 * 这是应用启动时执行的一次性设置
			 */
			function init() {
				// 获取DOM容器元素
				// document.getElementById('container'): 通过ID获取页面中的div元素
				// Three.js渲染的画布将被添加到此元素内部
				container = document.getElementById( 'container' );

				// 创建透视相机（PerspectiveCamera）
				// 透视相机模拟人眼视角，具有近大远小的透视效果
				// 参数详解：
				//   1. fov（视野角度）：50度，角度越大看到的场景越广
				//   2. aspect（宽高比）：窗口宽度除以高度，确保渲染不拉伸
				//   3. near（近平面距离）：1，距离相机小于1的物体不渲染
				//   4. far（远平面距离）：10，距离相机大于10的物体不渲染
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
				
				// 设置相机位置：沿Z轴向后移动2个单位
				// 默认情况下，相机位于原点(0,0,0)，朝向负Z轴方向
				// 将相机向后移动可以让我们看到位于原点附近的对象
				camera.position.z = 2;

				// 创建场景（Scene）
				// 场景是Three.js中所有对象的容器，包含网格、灯光、相机等
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// THREE.Color(0x101010): 创建颜色对象，十六进制颜色值
				// 0x101010是深灰色（RGB: 16,16,16），接近黑色但略有区别
				// 深色背景可以更好地突出彩色几何体
				scene.background = new THREE.Color( 0x101010 );

				// ========== 几何体创建部分 ==========
				// 创建缓冲区几何体（BufferGeometry），这是Three.js的高性能几何体类型
				
				// 计算顶点总数：
				// 创建200个三角形，每个三角形有3个顶点
				// 因此总顶点数 = 200 * 3 = 600个顶点
				const vertexCount = 200 * 3;

				// 创建缓冲区几何体对象
				// BufferGeometry使用ArrayBuffer高效存储顶点数据
				// 相比传统的Geometry，BufferGeometry性能更好，内存使用更高效
				const geometry = new THREE.BufferGeometry();

				// 创建数组用于临时存储顶点数据
				// positions数组：存储所有顶点的x,y,z坐标（浮点数）
				// colors数组：存储所有顶点的r,g,b,a颜色值（0-255整数）
				const positions = [];
				const colors = [];

				// 循环生成随机顶点数据
				// 为每个顶点生成随机位置和随机颜色
				for ( let i = 0; i < vertexCount; i ++ ) {
					// 为当前顶点添加随机位置（x, y, z坐标）
					// Math.random(): 返回0到1之间的随机数（包含0，不包含1）
					// Math.random() - 0.5: 返回-0.5到0.5之间的随机数
					// 这样所有顶点都集中在原点附近的小范围内
					positions.push( Math.random() - 0.5 ); // x坐标
					positions.push( Math.random() - 0.5 ); // y坐标
					positions.push( Math.random() - 0.5 ); // z坐标

					// 为当前顶点添加随机颜色（r, g, b, a分量）
					// Math.random() * 255: 生成0到255之间的随机整数（转换为整数时）
					// 颜色值以0-255整数形式存储，在着色器中会被归一化为0.0-1.0
					colors.push( Math.random() * 255 ); // 红色分量（0-255）
					colors.push( Math.random() * 255 ); // 绿色分量（0-255）
					colors.push( Math.random() * 255 ); // 蓝色分量（0-255）
					colors.push( Math.random() * 255 ); // 透明度分量（0-255）
				}

				// 创建位置属性缓冲区（Position Attribute Buffer）
				// THREE.Float32BufferAttribute: 创建32位浮点数缓冲区属性
				// 参数：
				//   positions: 包含所有顶点位置数据的数组
				//   3: 每个顶点由3个值组成（x, y, z）
				// Float32Array在内存中以32位浮点数存储，精度足够且性能良好
				const positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
				
				// 创建颜色属性缓冲区（Color Attribute Buffer）
				// THREE.Uint8BufferAttribute: 创建8位无符号整数缓冲区属性
				// 参数：
				//   colors: 包含所有顶点颜色数据的数组
				//   4: 每个顶点颜色由4个值组成（r, g, b, a）
				// Uint8Array在内存中只占1字节每分量，非常节省内存
				const colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
				
				// 启用颜色属性归一化（Normalization）
				// 当normalized设为true时，GPU在读取颜色数据时会：
				// 将0-255的整数值自动映射到0.0-1.0的浮点范围
				// 这是必要的，因为着色器期望颜色值是0.0到1.0的浮点数
				colorAttribute.normalized = true;

				// 将缓冲区属性设置到几何体上
				// geometry.setAttribute: 将属性与几何体关联
				// 参数1: 属性名称（字符串），在着色器中通过此名称访问属性
				// 参数2: 属性缓冲区对象
				geometry.setAttribute( 'position', positionAttribute ); // 位置属性
				geometry.setAttribute( 'color', colorAttribute );       // 颜色属性

				// ========== 材质创建部分 ==========
				// 创建原始着色器材质（RawShaderMaterial）
				// RawShaderMaterial允许完全自定义着色器代码
				// 与ShaderMaterial不同，RawShaderMaterial不包含Three.js的预定义uniform和attribute
				const material = new THREE.RawShaderMaterial( {
					// uniforms对象：定义从JavaScript传递到着色器的全局变量
					// 这些变量在着色器中是只读的，所有顶点/片元共享相同值
					uniforms: {
						// time变量：用于动画效果
						// value: 1.0 - 初始值，将在动画循环中更新
						time: { value: 1.0 }
					},
					
					// 顶点着色器代码
					// document.getElementById('vertexShader').textContent:
					//   获取<script id="vertexShader">元素中的文本内容
					//   这是之前定义的GLSL顶点着色器代码
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					
					// 片元着色器代码
					// 获取之前定义的GLSL片元着色器代码
					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
					
					// side属性：定义多边形哪一面被渲染
					// THREE.DoubleSide: 两面都渲染（正面和背面）
					// 其他选项：THREE.FrontSide（仅正面），THREE.BackSide（仅背面）
					// 对于透明或可穿透的物体，通常需要双面渲染
					side: THREE.DoubleSide,
					
					// transparent属性：启用透明度
					// true: 启用透明度混合，考虑颜色的alpha通道
					// false: 禁用透明度，alpha通道被忽略
					transparent: true
				} );

				// 创建网格对象（Mesh）
				// Mesh是Three.js中几何体和材质的组合，表示一个可渲染的3D对象
				// 参数：
				//   geometry: 之前创建的缓冲区几何体
				//   material: 之前创建的原始着色器材质
				const mesh = new THREE.Mesh( geometry, material );
				
				// 将网格添加到场景中
				// scene.add(): 将对象添加到场景图中
				// 只有添加到场景中的对象才会被渲染
				scene.add( mesh );

				// ========== 渲染器创建部分 ==========
				// 创建WebGL渲染器（WebGLRenderer）
				// WebGLRenderer使用WebGL API在canvas元素上绘制3D图形
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比（Device Pixel Ratio）
				// window.devicePixelRatio: 设备物理像素与CSS像素的比率
				// 高DPI屏幕（如Retina显示屏）的devicePixelRatio大于1
				// 设置这个值可以确保在高DPI屏幕上渲染更清晰的图像
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口尺寸
				// 使Three.js画布填满整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// setAnimationLoop是requestAnimationFrame的Three.js封装
				// 参数animate是回调函数，会在每一帧渲染前调用
				// 这是Three.js应用的主循环
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的DOM元素（canvas画布）添加到页面容器中
				// renderer.domElement: 渲染器创建的<canvas>元素
				// container.appendChild(): 将canvas作为子元素添加到container div中
				container.appendChild( renderer.domElement );

				// ========== 性能统计器设置 ==========
				// 创建Stats性能统计器对象
				stats = new Stats();
				
				// 将统计器的DOM元素添加到页面容器中
				// stats.dom: 统计器创建的显示FPS/MS的div元素
				// 通常显示在页面左上角，可以通过CSS调整位置
				container.appendChild( stats.dom );

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

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时，此函数被调用
			 * 确保Three.js渲染适应新的窗口尺寸
			 */
			function onWindowResize() {
				// 更新相机宽高比（Aspect Ratio）
				// 宽高比 = 窗口宽度 / 窗口高度
				// 必须更新，否则渲染的图像会被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 当相机参数（如宽高比）改变后，必须调用此方法重新计算投影矩阵
				// 否则相机将继续使用旧的投影矩阵，导致渲染错误
				camera.updateProjectionMatrix();

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

			/**
			 * 动画循环函数（Animation Loop）
			 * 每帧渲染前调用，负责更新场景状态和渲染
			 * 这是Three.js应用的核心循环，通常每秒调用60次（60FPS）
			 */
			function animate() {
				// 获取当前时间（自页面加载以来的毫秒数）
				// performance.now()比Date.now()精度更高，更适合动画计时
				const time = performance.now();

				// 获取场景中的第一个对象（我们添加的网格）
				// scene.children[0]: 场景子对象数组的第一个元素
				// 在这个示例中，我们只添加了一个网格对象
				const object = scene.children[ 0 ];

				// 更新对象旋转：基于时间绕Y轴旋转
				// object.rotation.y: 对象绕Y轴的旋转角度（弧度）
				// time * 0.0005: 将时间（毫秒）转换为缓慢增加的角度
				// 这样对象会以恒定速度旋转（每秒约0.03弧度）
				object.rotation.y = time * 0.0005;
				
				// 更新材质的时间uniform变量
				// object.material.uniforms.time.value: 访问材质的time uniform
				// time * 0.005: 比旋转速度快10倍的时间因子
				// 这个值会传递给着色器，用于颜色波动动画
				object.material.uniforms.time.value = time * 0.005;

				// 渲染场景
				// renderer.render(): 执行WebGL渲染命令
				// 参数1: scene - 要渲染的场景
				// 参数2: camera - 用于渲染的相机视角
				// 这个调用会触发GPU执行顶点和片元着色器
				renderer.render( scene, camera );

				// 更新性能统计器显示
				// stats.update(): 重新计算并显示FPS（帧率）和MS（每帧耗时）
				// 帮助开发者监控应用性能
				stats.update();
			}

		</script>

	</body>
</html>