<!-- 代码功能和技术点分析
一、代码功能概述
这是一个基于Three.js实现的水面折射效果的3D交互演示程序。主要功能包括：

1. 核心视觉功能
动态水面折射：创建一个具有物理真实感的水面，能够折射背后的场景物体

彩色房间环境：构建一个由五面彩色墙壁组成的立方体空间（缺少前面以便观察）

移动物体演示：一个在场景中按预定轨迹运动的二十面体小球，展示折射效果的变化

多光源照明：使用四个不同颜色的点光源，创建丰富的照明效果

2. 交互功能
相机控制：用户可以通过鼠标拖拽、滚轮缩放来控制观察视角

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

动画系统：所有动态效果（水面波动、小球运动）基于时间驱动，保持平滑

3. 场景组成
中心位置：90x90的折射平面（水面）

周围环境：红、绿、蓝、白四色的墙面构成封闭空间

动态元素：沿圆周运动并上下跳动的小球

光照系统：一个主光源+三个彩色辅助光源

二、主要技术点详解
1. 折射渲染技术
javascript
// 使用Three.js的Refractor类实现折射效果
import { Refractor } from 'three/addons/objects/Refractor.js';
import { WaterRefractionShader } from 'three/addons/shaders/WaterRefractionShader.js';
技术原理：

渲染到纹理（Render to Texture）：Refractor对象首先将背后的场景渲染到一个纹理中

着色器处理：使用WaterRefractionShader着色器对纹理进行折射计算

折射算法：基于斯涅尔定律（Snell's Law）模拟光线从空气进入水中的折射效应

2. DUDV贴图技术
javascript
// 加载和使用DUDV贴图
const dudvMap = await loader.loadAsync('textures/waterdudv.jpg');
dudvMap.wrapS = dudvMap.wrapT = THREE.RepeatWrapping;
refractor.material.uniforms.tDudv.value = dudvMap;
技术原理：

DUDV贴图：一种特殊的法线贴图变体，存储水平（Du）和垂直（Dv）方向的位移信息

动态扭曲：着色器根据时间偏移DUDV贴图的UV坐标，创建水面波动效果

重复包裹：使用THREE.RepeatWrapping让小纹理无缝覆盖大面积水面

3. 着色器系统
javascript
// 着色器uniform变量的时间同步
refractor.material.uniforms.time.value = time;
技术实现：

Uniform变量：着色器的全局变量，由JavaScript端传入

时间驱动：使用时钟对象提供的时间值驱动着色器中的动画

GLSL计算：在GPU端执行高效的折射和波动计算

4. 场景构建技术
javascript
// 创建封闭的房间空间
const planeGeo = new THREE.PlaneGeometry(100.1, 100.1);
技术要点：

平面几何体复用：所有墙面使用相同的几何体实例，提高性能

旋转定位：通过不同的旋转角度将平面放置到正确位置

颜色编码：不同墙面使用不同颜色，便于观察折射效果

5. 动画系统
javascript
// 小球运动轨迹计算
smallSphere.position.set(
    Math.cos(time) * 30,  // X轴：圆周运动
    Math.abs(Math.cos(time * 2)) * 20 + 5,  // Y轴：跳动运动
    Math.sin(time) * 30   // Z轴：圆周运动
);
数学原理：

三角函数动画：使用Math.sin()和Math.cos()创建周期性运动

组合运动：XZ平面的圆周运动 + Y轴的上下跳动

时间参数化：所有运动都基于时间变量，确保平滑连续

6. 光照系统
javascript
// 创建点光源
const mainLight = new THREE.PointLight(0xe7e7e7, 2.5, 250, 0);
光照配置：

主光源：白色点光源，提供主要照明

彩色辅助光源：红、绿、蓝三色光源从不同方向照射，增强视觉效果

衰减设置：使用物理正确的光衰减模型

7. 交互控制系统
javascript
// 轨道控制器配置
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 40, 0);
controls.maxDistance = 400;
controls.minDistance = 10;
交互功能：

鼠标控制：左键旋转、右键平移、滚轮缩放

限制范围：防止相机穿墙或距离过远

平滑过渡：内置的缓动效果提供自然的交互体验

8. 渲染优化
javascript
// 渲染器配置
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
优化措施：

抗锯齿：启用MSAA抗锯齿，消除边缘锯齿

高DPI适配：根据设备像素比设置渲染分辨率

动画循环：使用setAnimationLoop而非传统的requestAnimationFrame

9. 模块化架构
javascript
// ES6模块导入
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
架构特点：

按需导入：只导入需要的模块，减少包体积

模块映射：使用importmap配置模块路径

异步加载：纹理加载使用async/await，避免阻塞

10. 响应式设计
javascript
// 窗口大小变化处理
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
响应式机制：

实时调整：监听resize事件，立即更新相机和渲染器

投影矩阵更新：相机参数变化后必须手动更新投影矩阵

像素精度：保持渲染分辨率与显示分辨率一致

三、关键技术亮点
1. 物理准确性
折射效果基于物理光学原理

光照衰减使用物理正确的模型

动画运动基于数学函数，保持自然流畅

2. 性能优化
几何体实例复用减少内存占用

GPU着色器计算提高渲染效率

适当的纹理分辨率平衡质量和性能

3. 用户体验
直观的鼠标交互控制

平滑的动画和过渡效果

自适应的响应式设计

4. 代码结构
清晰的模块化组织

适当的异步处理

完善的错误处理边界

四、潜在应用场景
游戏开发：水面、玻璃等透明材质的实现

产品展示：珠宝、玻璃器皿等产品的3D展示

建筑可视化：室内水池、玻璃幕墙等建筑元素的渲染

教育演示：光学折射原理的交互式教学

艺术创作：创建具有视觉冲击力的数字艺术作品 -->


<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="en">
	<head>
		<!-- 文档头部开始 -->
		<!-- 页面标题，已替换为中文 -->
		<title>Three.js 水面折射效果演示</title>
		<!-- 字符编码设置为UTF-8，支持多语言字符 -->
		<meta charset="utf-8">
		<!-- 响应式视口设置 -->
		<!-- 
			width=device-width: 视口宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放页面
			minimum-scale=1.0: 最小缩放比例为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样式表 -->
		<link type="text/css" rel="stylesheet" href="main.css">
		<!-- 内联CSS样式 -->
		<style>
			/* 
				为body元素设置样式：
				color: #444 设置文字颜色为深灰色（十六进制颜色代码#444）
				确保文字在3D场景背景下清晰可见
			*/
			body {
				color: #444;
			}
			/* 
				为所有a元素（链接）设置样式：
				color: #08f 设置链接颜色为亮蓝色
				提供良好的视觉反馈，表明这是可点击的元素
			*/
			a {
				color: #08f;
			}
		</style>
	</head>
	<!-- 文档主体开始 -->
	<body>
		<!-- 
			3D场景容器div
			id="container": 为这个div元素指定唯一标识符"container"
			这个容器将用于承载由three.js创建的canvas元素
			所有3D渲染的内容都会显示在这个容器内
		-->
		<div id="container"></div>
		
		<!-- 
			信息显示区域div
			id="info": 为这个div元素指定唯一标识符"info"
			这里显示项目信息和版权链接
			已替换为中文内容
		-->
		<div id="info">
			<!-- 
				指向three.js官网的链接
				href="https://threejs.org": 链接的目标地址
				target="_blank": 在新标签页中打开链接
				rel="noopener noreferrer": 安全设置，防止新页面访问原页面的window对象
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">Three.js</a> - 水面折射效果演示
		</div>

		<!-- 
			ES模块导入映射配置
			type="importmap": 告诉浏览器这是一个导入映射配置
			导入映射是现代JavaScript模块系统的一部分，用于定义模块的导入路径
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			type="module": 告诉浏览器这是一个ECMAScript模块
			模块中的代码可以使用import/export语法，有独立的作用域
		-->
		<script type="module">
			/*
				导入three.js核心库
				import * as THREE from 'three': 
				将three模块的所有导出内容作为一个名为THREE的对象导入
				这样可以通过THREE.xxx的方式访问three.js的所有功能
			*/
			import * as THREE from 'three';

			/*
				从three.js附加组件中导入所需模块
				这些不是three.js核心库的一部分，但提供了有用的扩展功能
			*/
			
			// 轨道控制器：允许用户用鼠标拖拽、缩放来操控相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 折射器对象：专门用于创建折射效果的Three.js对象
			import { Refractor } from 'three/addons/objects/Refractor.js';
			
			// 水折射着色器：包含实现水折射效果的GLSL着色器代码
			import { WaterRefractionShader } from 'three/addons/shaders/WaterRefractionShader.js';

			/*
				全局变量声明
				这些变量将在多个函数中使用，所以声明在函数外部
			*/
			
			// camera: 用于观察3D场景的虚拟摄像机
			// scene: 包含所有3D对象的容器
			// renderer: 负责将3D场景渲染到2D屏幕的渲染器
			// clock: 时钟对象，用于跟踪时间，实现动画效果
			let camera, scene, renderer, clock;

			// refractor: 折射器对象，实现水面折射效果
			// smallSphere: 在场景中移动的小球，用于展示折射效果
			let refractor, smallSphere;

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

			/*
				异步初始化函数
				async关键字表示这个函数内部可以使用await关键字
				用于处理异步操作，比如加载纹理文件
			*/
			async function init() {
				/*
					获取DOM容器元素
					document.getElementById('container'): 
					通过元素的id属性获取对container div的引用
					这是Three.js渲染器将要附加canvas元素的地方
				*/
				const container = document.getElementById('container');

				/*
					创建Three.js时钟对象
					Clock对象用于跟踪时间流逝
					可以获取从创建时钟开始经过的时间，用于动画和效果
				*/
				clock = new THREE.Clock();

				/*
					创建Three.js场景对象
					场景是所有3D对象的容器
					可以包含网格、灯光、相机等所有要渲染的对象
				*/
				scene = new THREE.Scene();

				/*
					创建透视相机
					PerspectiveCamera(视野角度, 宽高比, 近裁剪面, 远裁剪面)
					参数说明:
					- 45: 视野角度(FOV)，单位是度，决定了相机能看到多大范围
					- window.innerWidth / window.innerHeight: 相机的宽高比，设置为窗口的宽高比
					- 1: 近裁剪面距离，距离相机小于1单位的物体不会被渲染
					- 500: 远裁剪面距离，距离相机大于500单位的物体不会被渲染
				*/
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
				
				/*
					设置相机初始位置
					camera.position.set(x, y, z):
					- x: 0，在X轴（左右方向）中心位置
					- y: 75，在Y轴（上下方向）75单位高度
					- z: 160，在Z轴（前后方向）160单位距离
					这样相机位于场景的斜上方，可以俯瞰整个场景
				*/
				camera.position.set(0, 75, 160);

				// ========== 创建折射器（水面）部分 ==========

				/*
					创建平面几何体作为折射表面
					PlaneGeometry(宽度, 高度):
					- 90: 平面的宽度
					- 90: 平面的高度
					这个平面将作为水面，显示折射效果
				*/
				const refractorGeometry = new THREE.PlaneGeometry(90, 90);

				/*
					创建折射器对象
					Refractor是Three.js的一个特殊对象，专门用于创建折射效果
					参数说明:
					- refractorGeometry: 上面创建的平面几何体
					- 配置对象:
						- color: 0xcbcbcb: 折射器的颜色，十六进制表示，浅灰色
						- textureWidth: 1024: 折射纹理的宽度（像素）
						- textureHeight: 1024: 折射纹理的高度（像素）
						- shader: WaterRefractionShader: 使用水折射着色器
					折射器的工作原理是创建一个渲染目标纹理，渲染它背后的场景，
					然后将这个纹理应用到平面上，并应用折射着色器
				*/
				refractor = new Refractor(refractorGeometry, {
					color: 0xcbcbcb,
					textureWidth: 1024,
					textureHeight: 1024,
					shader: WaterRefractionShader
				});

				/*
					设置折射器的位置
					refractor.position.set(x, y, z):
					- x: 0，在X轴中心
					- y: 50，在Y轴50单位高度（半空中）
					- z: 0，在Z轴中心
					这个位置将作为水面的位置
				*/
				refractor.position.set(0, 50, 0);

				// 将折射器添加到场景中
				scene.add(refractor);

				// ========== 加载DUDV贴图（水面扭曲效果） ==========

				/*
					创建纹理加载器
					TextureLoader是Three.js中用于加载图像文件并创建纹理的工具
				*/
				const loader = new THREE.TextureLoader();
				
				/*
					异步加载DUDV贴图
					DUDV贴图是一种特殊纹理，包含两个通道:
					- Du通道（红色）：水平方向位移
					- Dv通道（绿色）：垂直方向位移
					这个贴图用于模拟水面的波浪和扭曲效果
					await关键字：等待纹理加载完成再继续执行后续代码
				*/
				const dudvMap = await loader.loadAsync('textures/waterdudv.jpg');

				/*
					设置DUDV贴图的环绕方式
					wrapS: 纹理在S方向（U方向，水平）的环绕方式
					wrapT: 纹理在T方向（V方向，垂直）的环绕方式
					THREE.RepeatWrapping: 重复环绕，当纹理坐标超过1.0时，纹理会重复
					这种设置使得小纹理可以覆盖大面积的水面而不显得重复
				*/
				dudvMap.wrapS = dudvMap.wrapT = THREE.RepeatWrapping;
				
				/*
					将DUDV贴图传递给折射材质的着色器uniform变量
					refractor.material.uniforms: 折射材质的uniform变量集合
					tDudv: 着色器中接收DUDV贴图的uniform变量名
					.value: 设置uniform变量的值
				*/
				refractor.material.uniforms.tDudv.value = dudvMap;

				// ========== 创建移动的小球 ==========

				/*
					创建二十面体几何体
					IcosahedronGeometry(半径, 细分次数):
					- 5: 球的半径
					- 0: 细分次数，0表示不细分，保持二十面体的原始形状
					二十面体是由20个等边三角形组成的多面体，近似球形
				*/
				const geometry = new THREE.IcosahedronGeometry(5, 0);
				
				/*
					创建Phong材质
					MeshPhongMaterial是一种具有镜面高光的光照材质
					参数说明:
					- color: 0xffffff: 材质的漫反射颜色，白色
					- emissive: 0x333333: 材质的自发光颜色，深灰色
					  自发光使物体即使在暗处也可见
					- flatShading: true: 平面着色模式
					  平面着色使每个面显示为平面，而不是平滑过渡，增强了几何感
				*/
				const material = new THREE.MeshPhongMaterial({
					color: 0xffffff,
					emissive: 0x333333,
					flatShading: true
				});
				
				/*
					创建小球网格对象
					Mesh是Three.js中基本的3D对象，结合了几何体和材质
					- geometry: 上面创建的二十面体几何体
					- material: 上面创建的Phong材质
				*/
				smallSphere = new THREE.Mesh(geometry, material);
				
				// 将小球添加到场景中
				scene.add(smallSphere);

				// ========== 创建房间的墙面（构成一个立方体空间） ==========

				/*
					创建墙面几何体
					PlaneGeometry(宽度, 高度):
					- 100.1: 宽度，比100稍大一点，避免接缝处出现闪烁（Z-fighting）
					- 100.1: 高度，同样比100稍大一点
					这个几何体将被重复使用创建各个墙面
				*/
				const planeGeo = new THREE.PlaneGeometry(100.1, 100.1);

				/*
					创建顶部墙面（天花板）
					1. 创建网格对象：平面几何体 + 白色Phong材质
					2. 设置位置：y=100，在场景上方100单位
					3. 旋转：绕X轴旋转90度（Math.PI/2弧度），使其水平
					4. 添加到场景
				*/
				const planeTop = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0xffffff }));
				planeTop.position.y = 100;
				planeTop.rotateX(Math.PI / 2);
				scene.add(planeTop);

				/*
					创建底部墙面（地板）
					1. 创建网格对象：平面几何体 + 白色Phong材质
					2. 旋转：绕X轴旋转-90度，使其水平朝上
					3. 添加到场景
					注意：没有设置位置，默认在原点(0,0,0)
				*/
				const planeBottom = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0xffffff }));
				planeBottom.rotateX(-Math.PI / 2);
				scene.add(planeBottom);

				/*
					创建背面墙面（蓝色墙）
					1. 创建网格对象：平面几何体 + 蓝色Phong材质（0x7f7fff是浅蓝色）
					2. 设置位置：z=-50（向后50单位），y=50（向上50单位，使墙面居中）
					3. 添加到场景
					注意：这个墙面没有旋转，默认朝向Z轴正方向
				*/
				const planeBack = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0x7f7fff }));
				planeBack.position.z = -50;
				planeBack.position.y = 50;
				scene.add(planeBack);

				/*
					创建右侧墙面（绿色墙）
					1. 创建网格对象：平面几何体 + 绿色Phong材质（0x00ff00是纯绿色）
					2. 设置位置：x=50（向右50单位），y=50（向上50单位）
					3. 旋转：绕Y轴旋转-90度，使其朝向X轴负方向
					4. 添加到场景
				*/
				const planeRight = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0x00ff00 }));
				planeRight.position.x = 50;
				planeRight.position.y = 50;
				planeRight.rotateY(-Math.PI / 2);
				scene.add(planeRight);

				/*
					创建左侧墙面（红色墙）
					1. 创建网格对象：平面几何体 + 红色Phong材质（0xff0000是纯红色）
					2. 设置位置：x=-50（向左50单位），y=50（向上50单位）
					3. 旋转：绕Y轴旋转90度，使其朝向X轴正方向
					4. 添加到场景
				*/
				const planeLeft = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0xff0000 }));
				planeLeft.position.x = -50;
				planeLeft.position.y = 50;
				planeLeft.rotateY(Math.PI / 2);
				scene.add(planeLeft);

				// ========== 创建光源系统 ==========

				/*
					创建主光源（白色点光源）
					PointLight(颜色, 强度, 距离, 衰减):
					- 0xe7e7e7: 浅白色，接近白色但略带暖色调
					- 2.5: 光源强度，值越大越亮
					- 250: 光源影响的最大距离，超过这个距离的物体不受此光源影响
					- 0: 衰减系数，0表示使用物理正确的衰减
				*/
				const mainLight = new THREE.PointLight(0xe7e7e7, 2.5, 250, 0);
				mainLight.position.y = 60;  // 设置光源在Y轴60单位高度
				scene.add(mainLight);

				/*
					创建绿色点光源（从右侧照射）
					PointLight(颜色, 强度, 距离, 衰减):
					- 0x00ff00: 纯绿色
					- 0.5: 中等强度
					- 1000: 很远的照射距离
					- 0: 物理正确的衰减
				*/
				const greenLight = new THREE.PointLight(0x00ff00, 0.5, 1000, 0);
				greenLight.position.set(550, 50, 0);  // 设置在场景右侧远处
				scene.add(greenLight);

				/*
					创建红色点光源（从左侧照射）
					PointLight(颜色, 强度, 距离, 衰减):
					- 0xff0000: 纯红色
					- 0.5: 中等强度
					- 1000: 很远的照射距离
					- 0: 物理正确的衰减
				*/
				const redLight = new THREE.PointLight(0xff0000, 0.5, 1000, 0);
				redLight.position.set(-550, 50, 0);  // 设置在场景左侧远处
				scene.add(redLight);

				/*
					创建蓝色点光源（从后面照射）
					PointLight(颜色, 强度, 距离, 衰减):
					- 0xbbbbfe: 淡蓝色
					- 0.5: 中等强度
					- 1000: 很远的照射距离
					- 0: 物理正确的衰减
				*/
				const blueLight = new THREE.PointLight(0xbbbbfe, 0.5, 1000, 0);
				blueLight.position.set(0, 50, 550);  // 设置在场景后方远处
				scene.add(blueLight);

				// ========== 创建WebGL渲染器 ==========

				/*
					创建WebGL渲染器
					WebGLRenderer(配置对象):
					- antialias: true: 开启抗锯齿，使边缘更平滑
				*/
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				/*
					设置设备像素比
					window.devicePixelRatio: 获取设备的物理像素与CSS像素的比率
					高分辨率屏幕（如Retina显示屏）这个值可能为2或更高
					设置这个值可以确保在高分辨率设备上渲染更清晰
				*/
				renderer.setPixelRatio(window.devicePixelRatio);
				
				/*
					设置渲染器大小
					window.innerWidth: 浏览器窗口的内部宽度
					window.innerHeight: 浏览器窗口的内部高度
					设置渲染器大小使其填满整个窗口
				*/
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				/*
					设置动画循环
					setAnimationLoop(animate):
					请求浏览器在每一帧调用animate函数
					这是Three.js推荐的动画循环方式，替代了之前的requestAnimationFrame
				*/
				renderer.setAnimationLoop(animate);
				
				/*
					将渲染器的DOM元素（canvas）添加到容器中
					renderer.domElement: 渲染器创建的canvas元素
					container.appendChild(): 将canvas添加到container div中
				*/
				container.appendChild(renderer.domElement);

				// ========== 创建轨道控制器 ==========

				/*
					创建轨道控制器
					OrbitControls(相机, DOM元素):
					- camera: 要控制的相机对象
					- renderer.domElement: 监听事件的DOM元素（canvas）
					轨道控制器允许用户:
					- 左键拖拽：旋转相机
					- 右键拖拽：平移相机
					- 滚轮：缩放相机
				*/
				const controls = new OrbitControls(camera, renderer.domElement);
				
				/*
					设置控制器的目标点
					controls.target.set(x, y, z):
					- 0: X轴中心
					- 40: Y轴40单位高度（大致是折射器的位置）
					- 0: Z轴中心
					这是相机围绕旋转的中心点
				*/
				controls.target.set(0, 40, 0);
				
				/*
					设置控制器参数
					controls.maxDistance: 相机可以离目标点的最大距离
					controls.minDistance: 相机可以离目标点的最小距离
					这些限制防止相机过于接近或远离场景
				*/
				controls.maxDistance = 400;
				controls.minDistance = 10;
				
				/*
					更新控制器
					controls.update():
					必须在相机变化后调用，确保控制器状态正确
				*/
				controls.update();

				/*
					监听窗口大小变化事件
					window.addEventListener('resize', onWindowResize):
					当浏览器窗口大小改变时，调用onWindowResize函数
					确保3D场景总是填满窗口，并保持正确的比例
				*/
				window.addEventListener('resize', onWindowResize);
			}

			/*
				窗口大小变化事件处理函数
				当用户调整浏览器窗口大小时，这个函数被调用
			*/
			function onWindowResize() {
				/*
					更新相机的宽高比
					窗口大小改变后，宽高比可能发生变化
					需要更新相机以确保渲染的正确比例
				*/
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/*
					更新相机投影矩阵
					camera.updateProjectionMatrix():
					当相机参数（如宽高比）改变后，必须调用此函数
					重新计算相机的投影矩阵，否则渲染会出错
				*/
				camera.updateProjectionMatrix();
				
				/*
					更新渲染器大小
					使渲染器的canvas元素大小与窗口大小保持一致
				*/
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			/*
				动画循环函数
				这个函数在每一帧被调用（通常每秒60次）
				负责更新场景状态并重新渲染
			*/
			function animate() {
				/*
					获取经过的时间
					clock.getElapsedTime():
					返回自时钟创建以来经过的时间（秒）
					用于创建基于时间的动画效果
				*/
				const time = clock.getElapsedTime();

				/*
					将时间传递给折射材质的着色器uniform变量
					refractor.material.uniforms.time.value = time:
					着色器使用时间变量来创建动态的波浪效果
					DUDV贴图的偏移会随时间变化，模拟水面波动
				*/
				refractor.material.uniforms.time.value = time;

				/*
					更新小球的位置
					小球在场景中按特定轨迹运动，展示折射效果
					smallSphere.position.set(x, y, z):
					
					X坐标: Math.cos(time) * 30
					- Math.cos(time): 余弦函数，返回值在-1到1之间波动
					- * 30: 乘以30，使小球在X轴上在-30到30之间移动
					- 效果: 小球在X轴上做简谐运动（正弦/余弦运动）
					
					Y坐标: Math.abs(Math.cos(time * 2)) * 20 + 5
					- Math.cos(time * 2): 余弦函数，但频率加倍（time*2）
					- Math.abs(): 取绝对值，使函数值始终为正
					- * 20: 乘以20，放大振幅
					- + 5: 加上5，确保小球不会碰到地面（Y坐标至少为5）
					- 效果: 小球在Y轴上做跳动运动，每次跳到最高点然后落回
					
					Z坐标: Math.sin(time) * 30
					- Math.sin(time): 正弦函数，与余弦函数相位差90度
					- * 30: 乘以30，使小球在Z轴上在-30到30之间移动
					- 效果: 小球在Z轴上做简谐运动
					
					综合效果: 小球在XZ平面上做圆周运动，同时在Y轴上上下跳动
				*/
				smallSphere.position.set(
					Math.cos(time) * 30,
					Math.abs(Math.cos(time * 2)) * 20 + 5,
					Math.sin(time) * 30
				);
				
				/*
					更新小球的旋转
					使小球在移动的同时也自身旋转
					
					smallSphere.rotation.y = (Math.PI / 2) - time:
					- Y轴旋转随时间线性变化
					- Math.PI / 2: 初始角度为90度
					- - time: 随时间递减，使小球持续旋转
					
					smallSphere.rotation.z = time * 8:
					- Z轴旋转随时间快速变化
					- time * 8: 乘以8使旋转更快
					- 小球绕Z轴快速旋转
					
					效果: 小球同时绕Y轴和Z轴旋转，创建复杂的运动效果
				*/
				smallSphere.rotation.y = (Math.PI / 2) - time;
				smallSphere.rotation.z = time * 8;

				/*
					渲染场景
					renderer.render(场景, 相机):
					这是Three.js的核心渲染函数
					将3D场景通过指定的相机视角渲染到2D屏幕上
					每一帧都调用此函数，创建平滑的动画效果
				*/
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>