<!-- Three.js WebGL海洋场景 - 代码功能和技术点详解
🌊 一、总体功能概述
这是一个基于Three.js的交互式海洋3D场景，实现了：

逼真的动态海洋表面（波浪、反射、折射效果）

物理真实的天空系统（大气散射、太阳光晕）

可交互的3D环境（鼠标控制视角、参数实时调节）

性能优化的WebGL渲染

🎯 二、核心功能模块
1. 海洋水面系统
javascript
// 主要特性：
const water = new Water(waterGeometry, {
    textureWidth: 512,          // 高分辨率水纹理
    waterNormals: texture,      // 法线贴图模拟波浪细节
    sunDirection: sun,          // 动态太阳光照
    waterColor: 0x001e0f,       // 深蓝绿色调
    distortionScale: 3.7,       // 波浪扭曲程度
    fog: true                   // 支持雾效
});
实时波浪动画：通过着色器时间参数驱动

反射/折射效果：基于物理的光照计算

法线贴图：低成本实现水面细节

2. 物理天空系统
javascript
const sky = new Sky();
skyUniforms['turbidity'].value = 10;     // 大气浑浊度
skyUniforms['rayleigh'].value = 2;       // 瑞利散射（蓝天效果）
skyUniforms['mieCoefficient'].value = 0.005; // 米氏散射（光晕）
大气散射模拟：瑞利散射（蓝天）+ 米氏散射（光晕）

动态太阳位置：可实时调整高度角和方位角

环境光生成：自动创建环境贴图用于反射

3. 交互控制系统
javascript
// 轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.maxPolarAngle = Math.PI * 0.495; // 限制视角范围
controls.minDistance = 40.0;              // 最近缩放距离

// GUI参数面板
const gui = new GUI();
gui.add(parameters, 'elevation', 0, 90, 0.1).name('太阳高度');
gui.add(waterUniforms.distortionScale, 'value', 0, 8, 0.1).name('波浪强度');
⚙️ 三、关键技术点
1. WebGL渲染优化
javascript
// 渲染器配置
renderer.toneMapping = THREE.ACESFilmicToneMapping;  // 电影级色调映射
renderer.toneMappingExposure = 0.5;                  // 曝光控制
renderer.setPixelRatio(window.devicePixelRatio);     // 高DPI适配

// 性能监控
const stats = new Stats();  // 实时显示FPS、渲染时间
2. 着色器技术
水面着色器：

使用Gersten波叠加算法生成波浪

法线贴图 + 菲涅尔效应

反射/折射纹理混合

天空着色器：

Preetham大气散射模型

太阳光晕效果

物理正确的颜色混合

3. 环境光照系统
javascript
// PMREM环境贴图生成
const pmremGenerator = new THREE.PMREMGenerator(renderer);
const renderTarget = pmremGenerator.fromScene(sceneEnv);
scene.environment = renderTarget.texture;  // 应用于所有PBR材质
实时环境贴图：根据太阳位置动态生成

全局光照：为水面和物体提供统一的环境反射

基于物理的渲染(PBR)：使用MeshStandardMaterial

4. 动画与性能
javascript
// 基于时间的动画（帧率无关）
const time = performance.now() * 0.001;
mesh.position.y = Math.sin(time) * 20 + 5;  // 正弦波动画
water.material.uniforms['time'].value += 1.0 / 60.0;  // 固定时间步长

// 优化的事件处理
window.addEventListener('resize', onWindowResize);  // 响应式布局
📊 四、技术架构图
text
┌─────────────────────────────────────────────────┐
│                 用户交互层                        │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐     │
│  │ 鼠标控制  │  │ GUI调节  │  │ 窗口调整  │     │
│  └──────────┘  └──────────┘  └──────────┘     │
└─────────────────────────┬───────────────────────┘
                          ↓
┌─────────────────────────────────────────────────┐
│               Three.js核心层                     │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐     │
│  │  场景图   │←→│ 渲染循环  │←→│  着色器   │     │
│  └──────────┘  └──────────┘  └──────────┘     │
└─────────────────────────┬───────────────────────┘
                          ↓
┌─────────────────────────────────────────────────┐
│              WebGL图形管线层                     │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐     │
│  │ 顶点处理  │→│ 片元处理  │→│ 帧缓冲    │     │
│  └──────────┘  └──────────┘  └──────────┘     │
└─────────────────────────────────────────────────┘
🔧 五、主要配置参数
天空参数：
太阳高度：0-90度，控制太阳在天空中的位置

太阳方向：-180到180度，控制太阳的方位

浑浊度：大气颗粒浓度，影响天空颜色

瑞利散射：控制蓝天效果强度

水面参数：
波浪强度：0-8，控制水面扭曲程度

波浪尺寸：0.1-10，控制波纹大小

水颜色：深蓝绿色调（#001e0f）

太阳颜色：白色光照（#ffffff）

🚀 六、性能特点
GPU加速：所有渲染在WebGL中执行

增量更新：只更新变化的uniforms和几何体

资源管理：自动释放不需要的纹理和几何体

响应式设计：自适应不同屏幕尺寸和DPI

帧率稳定：使用固定时间步长的动画

🎨 七、视觉效果实现
效果	实现技术	性能影响
波浪动画	着色器时间变量 + 法线贴图	低
水面反射	环境贴图 + 菲涅尔方程	中
大气散射	预计算天空纹理 + 实时混合	低
太阳光晕	米氏散射模拟	低
物体反射	PBR材质 + 环境贴图	中
📱 八、跨平台兼容性
桌面浏览器：Chrome、Firefox、Safari

移动设备：iOS Safari、Android Chrome

性能适配：自动调整渲染质量

触摸支持：轨道控制器支持触摸操作

🔍 九、学习价值
这个项目展示了：

Three.js完整工作流：从初始化到渲染的全过程

高级着色器应用：自定义水面和天空效果

物理渲染实践：PBR材质和环境光照

性能优化技巧：帧率监控和资源管理

交互设计模式：GUI集成和用户控制 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 修改标题为中文 -->
		<title>Three.js WebGL - 着色器 - 海洋场景演示</title>
		<!-- 字符编码设置为UTF-8，支持中文字符 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			width=device-width：宽度等于设备宽度
			user-scalable=no：禁止用户缩放（为获得更好的3D体验）
			minimum-scale=1.0：最小缩放比例为1
			maximum-scale=1.0：最大缩放比例为1
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 引入外部CSS样式表 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			Three.js渲染器会将其canvas元素添加到此容器中
			这个div是3D场景的视觉容器
		-->
		<div id="container"></div>
		<!-- 修改信息区域为中文 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - WebGL海洋场景演示
			<br>
			<small>使用鼠标拖拽旋转视角 | 使用滚轮缩放 | 右侧面板调整参数</small>
		</div>

		<!-- 
			导入映射(Import Map)：
			现代浏览器支持的模块导入映射功能
			允许我们定义模块标识符到实际文件路径的映射
			类似于Node.js的package.json中的依赖映射
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module"表示这是一个ES6模块
			模块具有自己的作用域，不会污染全局命名空间
			支持静态导入导出，代码更易维护
		-->
		<script type="module">
			// ========== 模块导入部分 ==========
			// 导入Three.js核心库的所有导出，命名为THREE
			// Three.js是一个强大的3D图形库，基于WebGL API封装
			import * as THREE from 'three';

			// 导入性能统计模块
			// Stats.js用于显示FPS（帧率）、MS（渲染时间）等性能指标
			import Stats from 'three/addons/libs/stats.module.js';

			// 导入图形用户界面库
			// lil-gui是一个轻量级的GUI库，用于创建参数调节面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入轨道控制器
			// OrbitControls允许用户通过鼠标拖拽、滚轮缩放来交互式控制相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入水效果对象
			// Water类实现了基于着色器(Shader)的水面渲染效果，包括波浪、反射、折射等
			import { Water } from 'three/addons/objects/Water.js';
			
			// 导入天空盒对象
			// Sky类实现了基于物理的天空渲染，包括大气散射、太阳光晕等效果
			import { Sky } from 'three/addons/objects/Sky.js';

			// ========== 全局变量声明 ==========
			// 这些变量将在多个函数中共享使用
			let container;    // 存储对DOM容器的引用
			let stats;        // 存储性能统计对象
			let camera;       // 存储相机对象（3D场景的观察点）
			let scene;        // 存储场景对象（所有3D对象的容器）
			let renderer;     // 存储渲染器对象（负责将3D场景绘制到2D画布）
			let controls;     // 存储轨道控制对象
			let water;        // 存储水效果对象
			let sun;          // 存储太阳方向向量（用于光照计算）
			let mesh;         // 存储测试用的网格对象（浮动立方体）

			// ========== 程序入口 ==========
			// 页面加载完成后立即调用初始化函数
			init();

			/**
			 * 初始化函数 - 整个应用程序的启动点
			 * 职责：创建并配置所有Three.js核心组件
			 * 执行顺序：渲染器 → 场景 → 相机 → 光源 → 几何体 → 控制器 → GUI
			 */
			function init() {
				// 获取HTML中的容器元素
				// document.getElementById通过ID获取DOM元素，这是Web API的标准方法
				container = document.getElementById('container');

				// ========== 渲染器创建与配置 ==========
				// 创建WebGL渲染器实例
				// WebGLRenderer是Three.js的主要渲染器，使用WebGL 1.0/2.0 API进行硬件加速渲染
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比
				// window.devicePixelRatio获取设备物理像素与CSS像素的比率
				// 设置这个值可以确保在高DPI设备（如Retina显示器）上获得清晰的渲染
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为全窗口大小
				// window.innerWidth/innerHeight获取浏览器窗口的内部尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// setAnimationLoop替代了原来的requestAnimationFrame，提供更稳定的动画循环
				// animate函数将在每一帧被调用（通常60FPS）
				renderer.setAnimationLoop(animate);
				
				// 设置色调映射类型
				// 色调映射将HDR（高动态范围）颜色转换为LDR（低动态范围）显示
				// ACESFilmicToneMapping是一种电影级的色调映射算法，提供更自然的颜色过渡
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 设置色调映射曝光值
				// 曝光值控制场景的整体亮度，0.5表示中等亮度
				renderer.toneMappingExposure = 0.5;
				
				// 将渲染器的DOM元素（canvas标签）添加到容器中
				// renderer.domElement是渲染器创建的canvas元素
				container.appendChild(renderer.domElement);

				// ========== 场景创建 ==========
				// Scene是Three.js中的顶级容器对象，所有3D对象（网格、光源、相机）都添加到场景中
				// Scene管理对象层次结构和渲染状态
				scene = new THREE.Scene();

				// ========== 相机创建与配置 ==========
				// 创建透视相机（PerspectiveCamera）
				// 参数说明：
				// 1. 视野角度(FOV) - 55度，类似人眼的视野范围
				// 2. 宽高比 - 窗口宽度除以高度
				// 3. 近裁剪面 - 1个单位，距离相机1单位以内的物体不被渲染
				// 4. 远裁剪面 - 20000个单位，距离相机20000单位以外的物体不被渲染
				camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 20000);
				
				// 设置相机初始位置
				// Vector3(30, 30, 100)表示：
				// x=30（水平方向），y=30（垂直方向），z=100（深度方向）
				// 这个位置提供了一个良好的俯视海洋的角度
				camera.position.set(30, 30, 100);

				// ========== 太阳方向向量初始化 ==========
				// Vector3表示三维空间中的向量或点
				// 这里用于表示太阳的方向，将被用于计算光照和阴影
				sun = new THREE.Vector3();

				// ========== 水效果创建与配置 ==========
				// 创建水面的几何体
				// PlaneGeometry创建一个平面几何体
				// 参数：宽度=10000，高度=10000（创建一个非常大的水面）
				const waterGeometry = new THREE.PlaneGeometry(10000, 10000);

				// 创建水效果对象
				// Water类封装了复杂的水着色器效果
				water = new Water(
					waterGeometry,  // 水面几何体
					{
						// 纹理尺寸配置
						textureWidth: 512,   // 内部渲染纹理的宽度（影响水波细节）
						textureHeight: 512,  // 内部渲染纹理的高度
						
						// 水法线贴图
						// 法线贴图用于模拟水面微小的凹凸细节，无需增加几何复杂度
						waterNormals: new THREE.TextureLoader().load(
							'textures/waternormals.jpg',  // 法线贴图文件路径
							function (texture) {
								// 纹理加载完成后的回调函数
								// 设置纹理包裹模式为重复
								// RepeatWrapping允许纹理在表面上重复平铺
								texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
								
								// 注意：这里还可以设置其他纹理属性，如：
								// texture.repeat.set(4, 4) - 设置重复次数
								// texture.offset.set(0.5, 0) - 设置纹理偏移
							}
						),
						
						// 太阳方向（初始为零向量，将在updateSun函数中更新）
						sunDirection: new THREE.Vector3(),
						
						// 太阳颜色（白色光照）
						// 0xffffff是十六进制颜色表示，相当于RGB(255,255,255)
						sunColor: 0xffffff,
						
						// 水颜色（深蓝绿色）
						// 0x001e0f是十六进制颜色表示，深蓝绿色调
						waterColor: 0x001e0f,
						
						// 扭曲缩放因子
						// 控制水波变形程度，值越大波浪越明显
						distortionScale: 3.7,
						
						// 雾效支持
						// 如果场景启用了雾效，水面材质也会响应
						fog: scene.fog !== undefined
					}
				);

				// 旋转水面使其水平放置
				// PlaneGeometry默认创建的是垂直平面（面向Z轴）
				// 旋转-90度（-π/2弧度）使其水平（面向Y轴正方向）
				water.rotation.x = -Math.PI / 2;
				
				// 将水对象添加到场景中
				// scene.add将对象添加到场景图(Scene Graph)中，使其可被渲染
				scene.add(water);

				// ========== 天空盒创建与配置 ==========
				// 创建天空盒对象
				const sky = new Sky();
				
				// 设置天空盒的缩放
				// setScalar(10000)将三个轴(x,y,z)都设置为10000
				// 天空盒需要足够大以包围整个场景
				sky.scale.setScalar(10000);
				
				// 将天空盒添加到场景
				scene.add(sky);

				// 获取天空盒材质的uniforms
				// uniforms是着色器(Shader)中的全局变量，可以在JavaScript中设置
				// 通过material.uniforms可以访问和修改着色器参数
				const skyUniforms = sky.material.uniforms;

				// 配置天空盒的物理参数
				// 这些参数模拟真实大气的光学特性
				skyUniforms['turbidity'].value = 10;        // 浑浊度：大气中悬浮颗粒的浓度，影响天空颜色
				skyUniforms['rayleigh'].value = 2;          // 瑞利散射系数：影响天空蓝色程度
				skyUniforms['mieCoefficient'].value = 0.005; // 米氏散射系数：影响太阳光晕和雾效
				skyUniforms['mieDirectionalG'].value = 0.8;  // 米氏方向性参数：影响光晕的形状

				// ========== 太阳位置参数对象 ==========
				// 这些参数将通过GUI面板暴露给用户调整
				const parameters = {
					elevation: 2,   // 仰角：太阳相对于地平线的高度（0-90度）
					azimuth: 180    // 方位角：太阳相对于北方向的角度（-180到180度）
				};

				// 创建PMREM（预过滤反射环境贴图）生成器
				// PMREMGenerator用于生成高质量的环境贴图，用于物理基于渲染(PBR)
				const pmremGenerator = new THREE.PMREMGenerator(renderer);
				
				// 创建临时场景用于生成环境贴图
				// 这个场景只包含天空盒，用于计算环境光照
				const sceneEnv = new THREE.Scene();

				// 声明渲染目标变量
				// WebGLRenderTarget是离屏渲染缓冲区，用于存储渲染结果
				let renderTarget;

				/**
				 * 更新太阳位置函数
				 * 职责：根据参数计算太阳位置，并更新相关对象
				 * 调用时机：1.初始化时 2.GUI参数改变时
				 */
				function updateSun() {
					// 将角度转换为弧度
					// Three.js中大部分角度计算使用弧度制
					// 90 - elevation：将仰角转换为天顶角
					const phi = THREE.MathUtils.degToRad(90 - parameters.elevation);
					const theta = THREE.MathUtils.degToRad(parameters.azimuth);

					// 根据球面坐标设置太阳位置
					// setFromSphericalCoords参数：
					// 1. 半径：距离原点的距离（这里设为1，只关心方向）
					// 2. phi：天顶角（从Y轴正方向开始的角度）
					// 3. theta：方位角（在XZ平面内从X轴正方向开始的角度）
					sun.setFromSphericalCoords(1, phi, theta);

					// 更新天空盒的太阳位置uniform
					// copy方法复制向量值
					sky.material.uniforms['sunPosition'].value.copy(sun);
					
					// 更新水面的太阳方向uniform
					// normalize将向量转换为单位向量（长度为1），只保留方向信息
					water.material.uniforms['sunDirection'].value.copy(sun).normalize();

					// 清理旧的渲染目标（如果存在）
					// 每次更新太阳位置都需要重新生成环境贴图
					// dispose释放WebGL资源，防止内存泄漏
					if (renderTarget !== undefined) renderTarget.dispose();

					// 生成新的环境贴图
					// 步骤：
					// 1. 将天空盒添加到临时场景
					// 2. 使用PMREMGenerator从临时场景生成环境贴图
					// 3. 将天空盒重新添加到主场景
					sceneEnv.add(sky);
					renderTarget = pmremGenerator.fromScene(sceneEnv);
					scene.add(sky);

					// 将生成的环境贴图设置为场景的环境贴图
					// 环境贴图用于计算物体表面的环境反射
					scene.environment = renderTarget.texture;
				}

				// 初始调用更新太阳位置
				// 确保场景有正确的初始光照
				updateSun();

				// ========== 测试立方体创建 ==========
				// 创建立方体几何体
				// BoxGeometry参数：宽度=30，高度=30，深度=30
				const geometry = new THREE.BoxGeometry(30, 30, 30);
				
				// 创建标准网格材质
				// MeshStandardMaterial是基于物理的渲染(PBR)材质
				// roughness: 0 表示完全光滑的表面（类似镜子）
				const material = new THREE.MeshStandardMaterial({ roughness: 0 });

				// 创建网格对象
				// Mesh是Three.js中最基本的3D对象，包含几何体和材质
				mesh = new THREE.Mesh(geometry, material);
				
				// 将立方体添加到场景
				// 这个立方体将作为场景中的参考物体，展示水面的反射效果
				scene.add(mesh);

				// ========== 轨道控制器配置 ==========
				// 创建轨道控制器
				// 参数：要控制的相机，以及用于接收输入的DOM元素
				controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置最大极角（垂直旋转限制）
				// Math.PI * 0.495 ≈ 89.1度，防止相机翻转到水平面以下
				controls.maxPolarAngle = Math.PI * 0.495;
				
				// 设置控制目标点（相机围绕此点旋转）
				// Vector3(0, 10, 0)表示场景中心点上方10个单位
				controls.target.set(0, 10, 0);
				
				// 设置最小缩放距离
				// 防止相机过于靠近物体（40个单位）
				controls.minDistance = 40.0;
				
				// 设置最大缩放距离
				// 防止相机过于远离场景（200个单位）
				controls.maxDistance = 200.0;
				
				// 更新控制器内部状态
				// 必须在所有配置完成后调用一次
				controls.update();

				// ========== 性能统计显示 ==========
				// 创建Stats对象
				stats = new Stats();
				
				// 将Stats的DOM元素添加到容器
				// stats.dom是一个div元素，包含FPS、MS等计数器
				container.appendChild(stats.dom);

				// ========== GUI控制面板创建 ==========
				// 创建GUI实例
				// GUI将在屏幕右上角创建可折叠的控制面板
				const gui = new GUI();

				// 创建天空控制面板文件夹
				const folderSky = gui.addFolder('天空设置');
				
				// 添加仰角滑块控制
				// 参数：目标对象，属性名，最小值，最大值，步长
				// onChange：值改变时的回调函数
				folderSky.add(parameters, 'elevation', 0, 90, 0.1)
					.name('太阳高度')  // 显示名称
					.onChange(updateSun);  // 值改变时更新太阳位置
				
				// 添加方位角滑块控制
				folderSky.add(parameters, 'azimuth', -180, 180, 0.1)
					.name('太阳方向')
					.onChange(updateSun);
				
				// 默认展开天空设置面板
				folderSky.open();

				// 获取水材质的uniforms引用
				// 这样可以直接修改着色器参数
				const waterUniforms = water.material.uniforms;

				// 创建水效果控制面板文件夹
				const folderWater = gui.addFolder('水面设置');
				
				// 添加水面扭曲程度控制
				folderWater.add(waterUniforms.distortionScale, 'value', 0, 8, 0.1)
					.name('波浪强度');
				
				// 添加水面波浪大小控制
				folderWater.add(waterUniforms.size, 'value', 0.1, 10, 0.1)
					.name('波浪尺寸');
				
				// 默认展开水面设置面板
				folderWater.open();

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

			/**
			 * 窗口大小变化事件处理函数
			 * 职责：响应浏览器窗口大小变化，更新渲染相关参数
			 * 调用时机：用户调整浏览器窗口大小时
			 */
			function onWindowResize() {
				// 更新相机的宽高比
				// 确保渲染画面不会拉伸变形
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 当相机参数改变后，必须调用此方法重新计算投影矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 使3D画面填充整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 注意：这里没有更新controls，因为OrbitControls会自动处理窗口大小变化
			}

			/**
			 * 动画循环函数
			 * 职责：驱动整个场景的动画和渲染循环
			 * 调用时机：由renderer.setAnimationLoop自动调用，每帧一次（通常60FPS）
			 */
			function animate() {
				// 调用渲染函数，绘制当前帧
				render();
				
				// 更新性能统计显示
				// 更新FPS、帧时间等计数器
				stats.update();
				
				// 注意：这里不需要返回任何值
				// setAnimationLoop会自动处理循环逻辑
			}

			/**
			 * 渲染函数
			 * 职责：更新场景状态并执行渲染
			 * 这是每一帧执行的核心逻辑
			 */
			function render() {
				// 获取当前时间（以秒为单位）
				// performance.now()返回从页面加载开始的高精度时间戳（毫秒）
				// 乘以0.001转换为秒，便于在动画计算中使用
				const time = performance.now() * 0.001;

				// 更新立方体的位置（创建上下浮动动画）
				// Math.sin(time)生成-1到1之间的周期性值
				// 乘以20：控制浮动幅度（20个单位）
				// 加上5：将浮动中心点提升到y=5的位置
				mesh.position.y = Math.sin(time) * 20 + 5;
				
				// 更新立方体的旋转（创建自转动画）
				// 随时间逐渐增加旋转角度
				mesh.rotation.x = time * 0.5;  // X轴旋转速度：0.5弧度/秒
				mesh.rotation.z = time * 0.51; // Z轴旋转速度：0.51弧度/秒（与X轴略有不同，产生更复杂的旋转）

				// 更新水面的时间uniform
				// 水面着色器使用时间值来驱动波浪动画
				// 每帧增加1/60秒（假设60FPS），确保动画速度与帧率无关
				water.material.uniforms['time'].value += 1.0 / 60.0;

				// 执行实际渲染
				// renderer.render将3D场景通过相机视角渲染到画布上
				// 参数：要渲染的场景，使用的相机
				renderer.render(scene, camera);
				
				// 注意：在WebGL中，渲染是异步的，但此调用会立即开始渲染过程
			}
		</script>
	</body>
</html>