<!-- Three.js WebGPU 镜面反射演示 - 功能和技术详解
🎯 核心功能概述
这是一个基于Three.js WebGPU渲染器的实时镜面反射效果演示，展示了一个包含动态物体的室内3D场景，其中地板和后墙具有高质量的反射效果。

主要功能：
实时镜面反射 - 地板和后墙能反射场景中的物体

动态场景 - 包含旋转的半球体和运动的小球

交互式视角 - 用户可通过鼠标控制相机

程序化材质 - 使用代码生成复杂材质效果

多光源照明 - 营造丰富的视觉效果

🏗️ 场景构成
几何物体：
半球体组合：静态的装饰性物体，缓慢旋转

二十面体小球：在场景中做复杂运动（圆周+弹跳）

房间结构：六面墙组成的立方体空间（100x100x100单位）

地板：带反射效果

后墙：带反射效果

其他墙面：纯色材质

反射表面：
地板反射器

使用贴花纹理（decal-diffuse.png）

法线贴图提供表面细节

反射与白色背景混合

垂直反射器

使用棋盘格法线贴图

淡蓝色背景上的反射效果

纹理重复5次创造平铺效果

🔧 关键技术点
1. WebGPU渲染技术
javascript
// 使用Three.js的下一代渲染器
renderer = new THREE.WebGPURenderer({ antialias: true });
优势：相比WebGL，WebGPU提供：

更好的多线程支持

更高效的GPU资源管理

更现代的API设计

更好的性能表现

2. TSL着色器语言
javascript
// 使用Three.js Shader Language创建程序化材质
import { reflector, uv, texture, color } from 'three/tsl';

// 创建复杂的着色器节点链
const groundUVOffset = texture(decalNormal).xy.mul(2).sub(1).mul(groundNormalScale);
节点式编程：通过连接节点创建复杂效果

实时编译：在运行时生成GLSL/WebGPU着色器代码

可调试性：可在Inspector中实时调整参数

3. 程序化反射算法
javascript
const groundReflector = reflector().toInspector('地面反射器');
反射向量计算：基于表面法线和观察方向

UV偏移：用法线贴图扰动反射方向

多重纹理采样：结合漫反射、法线贴图

4. 法线贴图技术
javascript
// 法线贴图将RGB值转换为法线向量
const verticalUVOffset = texture(floorNormal, uv().mul(5)).xy.mul(2).sub(1).mul(verticalNormalScale);
原理：将RGB值（0-1）映射到法线向量（-1到1）

作用：在不增加几何复杂度的情况下模拟表面细节

应用：用于两个反射表面，创造不同的视觉效果

5. 动态动画系统
javascript
// 基于时间的复杂运动
smallSphere.position.set(
    Math.cos(timer * 0.1) * 30,      // X轴圆周运动
    Math.abs(Math.cos(timer * 0.2)) * 20 + 5, // Y轴弹跳运动
    Math.sin(timer * 0.1) * 30       // Z轴圆周运动
);
三角函数运动：创造流畅的周期性动画

复合运动：结合圆周运动和弹跳运动

时间驱动：基于Date.now()实现与时间相关的动画

6. 交互控制系统
javascript
cameraControls = new OrbitControls(camera, renderer.domElement);
三轴控制：旋转、缩放、平移

约束限制：最小/最大距离限制

平滑过渡：惯性效果提升用户体验

7. 调试与优化
javascript
renderer.inspector = new Inspector();
实时参数调整：可在运行时修改反射参数

性能监控：查看帧率、绘制调用等

场景检查：可视化查看场景结构

🎨 视觉效果特性
光照系统：
主光源：白色点光源，照亮整个场景

环境光源：红、绿、蓝三色辅助光源，创造彩色氛围

材质响应：Phong材质对光照敏感，创造真实感

材质系统：
混合材质：地板反射与白色背景的透明度混合

自发光属性：几何体具有轻微自发光，增强视觉效果

平面着色：小球使用flatShading，创造硬边效果

纹理处理：
纹理重复：THREE.RepeatWrapping实现平铺效果

颜色空间：正确设置sRGBColorSpace确保颜色准确

UV坐标变换：通过数学运算创造变形效果

🚀 性能特性
渲染优化：
几何体分段优化：24分段平衡视觉效果和性能

纹理大小适当：使用合适分辨率的纹理

裁剪剔除：相机近/远裁剪面设置合理

内存管理：
纹理重用：多个表面共享纹理资源

几何体实例化：相同几何体重复使用

适时更新：只更新需要变化的属性

🔍 调试功能
按F9键可以打开调试检查器，提供：

场景结构树状视图

材质参数实时调整

性能统计数据

着色器代码查看

🌐 浏览器兼容性
要求：支持WebGPU的现代浏览器

推荐：Chrome 113+ / Edge 113+ / Firefox Nightly

回退：如需兼容旧浏览器，可改用WebGLRenderer

📱 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
自动适应窗口大小变化

保持正确的宽高比

更新相机投影矩阵 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			文档类型声明：告诉浏览器这是HTML5文档
			语言属性：设为中文，有助于屏幕阅读器和搜索引擎
		-->
		<title>Three.js WebGPU 演示 - 镜面反射效果</title> <!-- 页面标题（显示在浏览器标签页） -->
		<meta charset="utf-8"> <!-- 字符编码设为UTF-8，支持中文字符 -->
		<!-- 
			视口元标签：控制移动端显示
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户缩放（保持固定比例）
			minimum-scale=1.0: 最小缩放比例为1.0
			maximum-scale=1.0: 最大缩放比例为1.0
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			外部样式表链接
			type="text/css": 指定MIME类型为CSS
			rel="stylesheet": 定义与当前文档的关系为样式表
			href="example.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 
			信息展示区域
			id="info": 用于CSS和JavaScript定位的唯一标识符
		-->
		<div id="info">
			<!-- 
				Three.js官网链接
				target="_blank": 在新标签页打开链接
				rel="noopener": 安全属性，防止新页面访问原页面的window对象
				class="logo-link": CSS类名，通常用于设置背景图片（Three.js徽标）
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器 -->
			<div class="title-wrapper">
				<!-- 主标题链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题文本 -->
				<span>镜面反射效果演示</span>
			</div>

			<!-- 简短描述文本 -->
			<small>使用程序化着色器技术实现的实时镜面反射效果。</small>
			
			<!-- 添加额外的使用说明 -->
			<div class="instructions" style="margin-top: 50px;">
				<small>操作指南：鼠标拖拽旋转视角，滚轮缩放，右键拖拽平移。</small>
			</div>
		</div>

		<!-- 
			导入映射（Import Map）
			现代JavaScript模块系统特性，用于定义模块路径别名
			允许在import语句中使用简短的模块名称
		-->
		<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>

		<!-- 
			type="module": 声明此script为ES6模块
			模块具有自己的作用域，支持import/export语法
		-->
		<script type="module">
			/**
			 * Three.js WebGPU 镜面反射演示
			 * 主要功能：
			 * 1. 展示使用WebGPU渲染器的Three.js应用
			 * 2. 演示程序化镜面反射效果
			 * 3. 展示TSL（Three.js着色器语言）的使用
			 * 4. 包含交互式相机控制和实时动画
			 */

			// ========== 模块导入区域 ==========
			
			// 导入Three.js核心库的WebGPU版本
			// * 表示导入所有导出，命名为THREE对象
			import * as THREE from 'three/webgpu';
			
			// 从TSL模块导入着色器节点功能
			// reflector: 反射节点生成器，用于创建镜面反射效果
			// uv: UV坐标节点，表示纹理坐标
			// texture: 纹理采样节点，用于读取纹理数据
			// color: 颜色节点，表示颜色值
			import { reflector, uv, texture, color } from 'three/tsl';

			// 导入轨道控制器（OrbitControls）
			// 允许用户通过鼠标/触摸与3D场景交互
			// 功能：旋转、缩放、平移视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入调试检查器（Inspector）
			// 用于调试和调整Three.js场景参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局变量声明 ==========
			
			// Three.js核心对象
			let camera;      // 相机：定义观察者的视角
			let scene;       // 场景：包含所有3D对象的容器
			let renderer;    // 渲染器：负责将3D场景绘制到2D画布上
			
			// 交互控制对象
			let cameraControls; // 相机控制器：处理用户输入
			
			// 场景中的几何体对象
			let sphereGroup;  // 球体组：包含半球体的容器对象
			let smallSphere;  // 小球：场景中移动的二十面体

			// ========== 初始化调用 ==========
			// 页面加载完成后立即执行初始化
			init();

			/**
			 * 主初始化函数
			 * 职责：创建并配置所有Three.js对象，设置场景和交互
			 * 调用时机：页面加载完成后立即执行
			 */
			function init() {
				// ----- 1. 创建场景 -----
				// Scene是Three.js中所有对象的容器，包含光照、相机、网格等
				scene = new THREE.Scene();
				// 注意：WebGLRenderer会自动为Scene创建默认光照，但WebGPURenderer可能不会

				// ----- 2. 创建相机 -----
				// 透视相机（PerspectiveCamera）模拟人眼视角
				// 参数说明：
				// 45: 视野角度（Field of View），单位度，垂直视角范围
				// window.innerWidth / window.innerHeight: 宽高比，匹配浏览器窗口
				// 1: 近裁剪面（Near Clipping Plane），比此距离近的对象不渲染
				// 500: 远裁剪面（Far Clipping Plane），比此距离远的对象不渲染
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
				// 设置相机初始位置 (x, y, z)
				// (0, 75, 160): 位于场景上方偏后，便于观察整个场景
				camera.position.set(0, 75, 160);

				// ----- 3. 创建几何体和材质 -----
				// 局部变量声明，用于临时存储几何体和材质
				let geometry, material;

				// 3.1 创建半球体组合
				sphereGroup = new THREE.Object3D(); // Object3D是Three.js中所有3D对象的基类
				scene.add(sphereGroup); // 将球体组添加到场景中

				// 创建半球体的"帽檐"部分（一个扁平的圆柱体）
				// CylinderGeometry参数：顶部半径，底部半径，高度，径向分段，高度分段
				geometry = new THREE.CylinderGeometry(
					0.1, // 顶部半径：非常小，形成尖锐边缘
					15 * Math.cos(Math.PI / 180 * 30), // 底部半径：基于30度角计算，约12.99
					0.1, // 高度：非常薄
					24,  // 径向分段：圆周方向分段数，影响平滑度
					1    // 高度分段：高度方向分段数
				);
				material = new THREE.MeshPhongMaterial({
					color: 0xffffff,    // 漫反射颜色：白色（RGB: 0xFFFFFF）
					emissive: 0x8d8d8d  // 自发光颜色：浅灰色，使对象看起来轻微发光
				});
				const sphereCap = new THREE.Mesh(geometry, material); // 创建网格对象
				// 设置帽檐位置：基于三角函数计算，确保与半球体完美对接
				sphereCap.position.y = -15 * Math.sin(Math.PI / 180 * 30) - 0.05;
				sphereCap.rotateX(-Math.PI); // 旋转180度，使平面朝下

				// 创建半球体主体
				// SphereGeometry参数：半径，宽度分段，高度分段，水平起始角，水平扫描角，垂直起始角，垂直扫描角
				geometry = new THREE.SphereGeometry(
					15,                // 半径：15单位
					24,                // 宽度分段数：水平方向细节
					24,                // 高度分段数：垂直方向细节
					Math.PI / 2,       // φStart（水平起始角）：90度（从正前方开始）
					Math.PI * 2,       // φLength（水平扫描角）：360度（完整水平圆）
					0,                 // θStart（垂直起始角）：0度（从顶部开始）
					Math.PI / 180 * 120 // θLength（垂直扫描角）：120度（创建部分球体）
				);
				const halfSphere = new THREE.Mesh(geometry, material);
				halfSphere.add(sphereCap); // 将帽檐添加为半球体的子对象
				// 旋转半球体到正确方向
				halfSphere.rotateX(-Math.PI / 180 * 135); // X轴旋转-135度
				halfSphere.rotateZ(-Math.PI / 180 * 20);  // Z轴旋转-20度
				// 设置半球体位置：使其底部接触地面
				halfSphere.position.y = 7.5 + 15 * Math.sin(Math.PI / 180 * 30);
				sphereGroup.add(halfSphere); // 将半球体添加到球体组

				// 3.2 创建动态小球（二十面体）
				// IcosahedronGeometry参数：半径，细节级别（细分次数）
				geometry = new THREE.IcosahedronGeometry(5, 0); // 半径5，无细分
				material = new THREE.MeshPhongMaterial({
					color: 0xffffff,      // 白色
					emissive: 0x7b7b7b,   // 自发光：中灰色
					flatShading: true     // 平面着色：每个面是平的（无平滑过渡）
				});
				smallSphere = new THREE.Mesh(geometry, material);
				scene.add(smallSphere); // 直接添加到场景（不是球体组的子对象）

				// ----- 4. 加载纹理 -----
				const textureLoader = new THREE.TextureLoader(); // 创建纹理加载器实例

				// 4.1 加载地板法线贴图
				// 法线贴图：存储表面法线信息的特殊纹理，用于模拟细节而不增加几何复杂度
				const floorNormal = textureLoader.load('textures/floors/FloorsCheckerboard_S_Normal.jpg');
				floorNormal.wrapS = THREE.RepeatWrapping; // S方向（U/水平）重复包裹
				floorNormal.wrapT = THREE.RepeatWrapping; // T方向（V/垂直）重复包裹

				// 4.2 加载贴花漫反射贴图
				const decalDiffuse = textureLoader.load('textures/decal/decal-diffuse.png');
				// 设置颜色空间为sRGB，这是颜色纹理的标准颜色空间
				decalDiffuse.colorSpace = THREE.SRGBColorSpace;

				// 4.3 加载贴花法线贴图
				const decalNormal = textureLoader.load('textures/decal/decal-normal.jpg');

				// ----- 5. 创建反射效果 -----
				// 使用TSL（Three.js着色器语言）创建程序化反射效果
				
				// 5.1 创建反射器节点
				// reflector()函数返回一个反射节点，可以计算反射颜色
				// toInspector()方法将节点添加到调试检查器，便于实时调整参数
				const groundReflector = reflector().toInspector('地面反射器');
				const verticalReflector = reflector().toInspector('垂直反射器');

				// 5.2 设置法线贴图影响强度
				// 负值会使反射方向反转，创造不同的视觉效果
				const groundNormalScale = -0.08;  // 地面法线影响强度
				const verticalNormalScale = 0.1;  // 垂直面法线影响强度

				// 5.3 创建UV偏移节点（地面）
				// TSL节点链式调用：创建程序化着色器效果
				// 过程：
				// 1. texture(decalNormal): 采样贴花法线贴图
				// 2. .xy: 取RGB通道的前两个（R和G），包含法线向量的X和Y分量
				// 3. .mul(2): 乘以2（将范围从[0,1]变为[0,2]）
				// 4. .sub(1): 减去1（将范围从[0,2]变为[-1,1]，得到方向向量）
				// 5. .mul(groundNormalScale): 乘以缩放系数，控制影响强度
				const groundUVOffset = texture(decalNormal).xy.mul(2).sub(1).mul(groundNormalScale);
				
				// 5.4 创建UV偏移节点（垂直面）
				// 过程：
				// 1. uv(): 获取当前UV坐标节点
				// 2. .mul(5): 将UV坐标乘以5，使纹理重复5次（平铺效果）
				// 3. texture(floorNormal, uv().mul(5)): 使用缩放后的UV坐标采样地板法线贴图
				const verticalUVOffset = texture(floorNormal, uv().mul(5)).xy.mul(2).sub(1).mul(verticalNormalScale);

				// 5.5 将UV偏移应用到反射器
				// 反射器默认有UV节点，我们在此基础上添加偏移量
				groundReflector.uvNode = groundReflector.uvNode.add(groundUVOffset);
				verticalReflector.uvNode = verticalReflector.uvNode.add(verticalUVOffset);

				// 5.6 创建最终着色节点
				// 地面节点：混合白色和反射颜色，基于贴花纹理的alpha通道
				// 过程：texture(decalDiffuse).a获取alpha值，作为混合因子
				const groundNode = texture(decalDiffuse).a.mix(color(0xffffff), groundReflector);
				
				// 垂直面节点：淡蓝色背景加上反射效果
				// 过程：创建蓝色(0x0000ff)，乘以0.1使其变暗，然后加上反射
				const verticalNode = color(0x0000ff).mul(.1).add(verticalReflector);

				// ----- 6. 创建房间墙壁和地板 -----
				// 创建平面几何体，尺寸略大于100，避免接缝处出现裂缝
				const planeGeo = new THREE.PlaneGeometry(100.1, 100.1);

				// 6.1 地板（带反射效果）
				// MeshPhongNodeMaterial: 支持TSL节点的Phong材质
				const planeBottom = new THREE.Mesh(planeGeo, new THREE.MeshPhongNodeMaterial({
					colorNode: groundNode // 使用我们创建的groundNode作为颜色
				}));
				planeBottom.rotateX(-Math.PI / 2); // 旋转-90度，使平面朝上作为地板
				planeBottom.add(groundReflector.target); // 添加反射器目标，反射器将从此位置计算反射
				scene.add(planeBottom);

				// 6.2 后墙（带反射效果）
				const planeBack = new THREE.Mesh(planeGeo, new THREE.MeshPhongNodeMaterial({
					colorNode: verticalNode // 使用我们创建的verticalNode作为颜色
				}));
				planeBack.position.z = -50; // Z轴负方向移动50单位
				planeBack.position.y = 50;  // Y轴正方向移动50单位（墙壁中点高度）
				planeBack.add(verticalReflector.target); // 添加垂直反射器目标
				scene.add(planeBack);

				// 6.3 其他墙面（无反射效果，使用纯色材质）
				
				// 天花板（白色）
				const planeTop = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0xffffff }));
				planeTop.position.y = 100; // 放置在Y=100的位置
				planeTop.rotateX(Math.PI / 2); // 旋转90度，使平面朝下作为天花板
				scene.add(planeTop);

				// 前墙（浅蓝色）
				const planeFront = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0x7f7fff }));
				planeFront.position.z = 50; // Z轴正方向
				planeFront.position.y = 50;
				planeFront.rotateY(Math.PI); // 旋转180度，使平面朝内
				scene.add(planeFront);

				// 右墙（绿色）
				const planeRight = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0x00ff00 }));
				planeRight.position.x = 50; // X轴正方向
				planeRight.position.y = 50;
				planeRight.rotateY(-Math.PI / 2); // 旋转-90度，使平面朝内
				scene.add(planeRight);

				// 左墙（红色）
				const planeLeft = new THREE.Mesh(planeGeo, new THREE.MeshPhongMaterial({ color: 0xff0000 }));
				planeLeft.position.x = -50; // X轴负方向
				planeLeft.position.y = 50;
				planeLeft.rotateY(Math.PI / 2); // 旋转90度，使平面朝内
				scene.add(planeLeft);

				// ----- 7. 创建光源 -----
				// 光源对于Phong材质是必需的，它使用光照模型计算颜色
				
				// 7.1 主光源（白色点光源）
				// PointLight参数：颜色，强度，衰减距离，衰减指数
				const mainLight = new THREE.PointLight(0xe7e7e7, 2.5, 250, 0);
				mainLight.position.y = 60; // 放置在场景上方
				scene.add(mainLight);

				// 7.2 辅助彩色光源（营造氛围）
				const greenLight = new THREE.PointLight(0x00ff00, 0.5, 1000, 0); // 绿色
				greenLight.position.set(550, 50, 0); // 放置在场景右侧远处
				scene.add(greenLight);

				const redLight = new THREE.PointLight(0xff0000, 0.5, 1000, 0); // 红色
				redLight.position.set(-550, 50, 0); // 放置在场景左侧远处
				scene.add(redLight);

				const blueLight = new THREE.PointLight(0xbbbbfe, 0.5, 1000, 0); // 蓝色
				blueLight.position.set(0, 50, 550); // 放置在场景后方远处
				scene.add(blueLight);

				// ----- 8. 创建渲染器 -----
				// WebGPURenderer是Three.js的下一代渲染器，使用WebGPU API
				// 相比WebGLRenderer，WebGPU提供更好的性能和更现代的API
				renderer = new THREE.WebGPURenderer({ 
					antialias: true // 开启抗锯齿，平滑边缘
				});
				
				// 设置设备像素比，确保在高DPI屏幕上清晰显示
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染尺寸为浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数，每帧调用animate函数
				renderer.setAnimationLoop(animate);
				
				// 附加调试检查器，按F9可以打开调试面板
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				document.body.appendChild(renderer.domElement);

				// ----- 9. 创建交互控制器 -----
				// OrbitControls允许用户通过鼠标控制相机
				// 参数：要控制的相机，事件监听的DOM元素
				cameraControls = new OrbitControls(camera, renderer.domElement);
				
				// 设置控制中心点（相机围绕此点旋转）
				cameraControls.target.set(0, 40, 0);
				
				// 设置相机距离限制
				cameraControls.maxDistance = 400; // 最大拉远距离
				cameraControls.minDistance = 10;   // 最大拉近距离
				
				// 更新控制器内部状态
				cameraControls.update();

				// ----- 10. 设置事件监听器 -----
				// 监听窗口大小改变事件，确保场景适应新窗口尺寸
				window.addEventListener('resize', onWindowResize);
				
				// 初始化完成，控制台输出提示
				console.log('Three.js WebGPU 镜面反射演示已初始化完成');
				console.log('按F9键打开调试检查器');
				console.log('使用鼠标左键拖拽旋转视角，滚轮缩放，右键拖拽平移');
			}

			/**
			 * 窗口大小改变事件处理函数
			 * 职责：当浏览器窗口大小改变时，调整相机和渲染器
			 */
			function onWindowResize() {
				// 更新相机宽高比，匹配新窗口尺寸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 注意：更改相机参数后必须调用此方法
				camera.updateProjectionMatrix();
				
				// 更新渲染器大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 可选：输出窗口大小信息到控制台（调试用）
				console.log(`窗口大小已更新: ${window.innerWidth} x ${window.innerHeight}`);
			}

			/**
			 * 动画循环函数
			 * 职责：每帧执行，更新场景动画状态并渲染
			 * 调用时机：由renderer.setAnimationLoop()设置，每帧调用
			 * 典型帧率：60fps（每秒60次）
			 */
			function animate() {
				// 获取基于时间的计时器，单位：秒（除以100）
				// Date.now()返回毫秒数，乘以0.01得到以秒为单位的时间
				const timer = Date.now() * 0.01;
				
				// ----- 更新球体组旋转 -----
				// 缓慢旋转球体组，创造连续运动效果
				sphereGroup.rotation.y -= 0.002; // 每帧旋转-0.002弧度
				
				// ----- 更新小球运动 -----
				// 小球在场景中做复杂运动，结合圆周运动和上下弹跳
				smallSphere.position.set(
					// X轴：圆周运动
					// Math.cos(timer * 0.1): 基于时间的余弦波，周期约62.8秒
					// * 30: 振幅30单位，控制圆周半径
					Math.cos(timer * 0.1) * 30,
					
					// Y轴：上下弹跳运动
					// Math.abs(Math.cos(timer * 0.2)): 取余弦波的绝对值，创造弹跳效果
					// * 20: 弹跳高度20单位
					// + 5: 基准高度5单位，确保小球不会降到地面以下
					Math.abs(Math.cos(timer * 0.2)) * 20 + 5,
					
					// Z轴：圆周运动（与X轴同步但相位差90度）
					// Math.sin(timer * 0.1): 正弦波，与X轴余弦波形成90度相位差
					Math.sin(timer * 0.1) * 30
				);
				
				// 更新小球旋转
				// Y轴旋转：基于时间变化，创造自转效果
				smallSphere.rotation.y = (Math.PI / 2) - timer * 0.1;
				// Z轴旋转：更快的旋转速度，创造翻滚效果
				smallSphere.rotation.z = timer * 0.8;
				
				// ----- 更新相机控制器 -----
				// 如果需要相机自动动画，可以在这里添加
				// 但OrbitControls通常由用户输入驱动，不需要每帧更新
				
				// ----- 渲染场景 -----
				// 将3D场景和相机传入渲染器，绘制到canvas上
				renderer.render(scene, camera);
				
				// 注意：WebGPU/WebGL渲染是异步的
				// 此函数结束后，浏览器会在下一帧前调用渲染命令
			}
		</script>
	</body>
</html>