<!-- Three.js 劳力士手表3D展示应用 - 功能描述与技术详解
🎯 核心功能概述
这是一个基于Three.js的高级3D手表展示应用，实现了劳力士手表的逼真在线展示和交互体验。应用模拟了真实手表的机械运作，提供了高质量的可视化效果和丰富的交互功能。

📋 主要功能模块
1. 3D场景展示功能
高精度模型渲染：加载并显示细节丰富的劳力士手表3D模型

实时时间显示：手表指针根据系统时间实时转动，模拟真实手表功能

多表盘显示：包含主表盘和三个功能小表盘（日期、月份、毫秒）

2. 交互控制功能
相机控制：用户可通过鼠标拖拽、滚轮缩放、右键平移来多角度查看手表

参数实时调整：通过控制面板可调整材质属性、后期处理效果等参数

自动演示模式：加载时自动播放相机环绕动画，展示产品最佳视角

3. 视觉效果功能
真实材质系统：PBR（基于物理的渲染）材质，支持金属、玻璃等复杂材质

动态环境光照：HDR环境贴图提供真实的环境反射和光照

高级阴影系统：VSM阴影映射实现柔和的阴影效果

后期处理特效：可选的抗锯齿和辉光效果增强视觉质量

4. 用户体验功能
响应式设计：自适应不同屏幕尺寸和设备

加载状态管理：异步资源加载，确保模型完全加载后再启用交互

性能优化：平衡视觉效果和运行性能，确保流畅体验

🔧 核心技术点详解
1. Three.js核心架构
模块化导入：使用ES6模块系统导入Three.js核心和插件

场景图结构：基于父子关系的对象层级管理

动画循环：requestAnimationFrame封装的渲染循环

2. 模型与资源加载
GLTF/GLB格式：使用行业标准的3D模型格式

DRACO压缩：Google的几何压缩技术，减少模型文件大小70-90%

异步加载：HDR环境贴图和3D模型按需异步加载

资源管理：按名称存储网格和材质，便于后续访问和控制

3. 光照与阴影系统
多重光源配置

方向光（主光源）：模拟太阳光，产生主阴影

点光源（补光）：增强局部细节和氛围

VSM阴影映射：方差阴影映射技术，提供柔和阴影边缘

HDR环境照明：基于图像的光照（IBL），实现真实的环境反射

4. 材质与着色系统
PBR工作流：基于物理的金属度/粗糙度材质模型

特殊材质处理

金属材质：可调的金属度和粗糙度参数

玻璃材质：透明度、虹彩效果、清漆涂层的物理模拟

实时材质更新：GUI控制的材质参数实时反馈

5. 后期处理效果
TAA（时间性抗锯齿）：多帧采样混合，消除锯齿和闪烁

Unreal Bloom（虚幻辉光）：模拟高光溢出和光晕效果

效果开关控制：可按需启用/禁用后期处理以平衡性能

6. 交互与动画系统
OrbitControls：成熟的相机轨道控制器

Tween.js动画：补间动画库实现平滑相机移动

实时指针动画：基于JavaScript Date对象的精确时间计算

7. GUI控制系统
lil-gui库：轻量级控制面板实现

参数分组：材质参数和后期处理参数分组织

实时绑定：参数改变即时更新3D场景

8. 性能优化技术
半浮点数缓冲：减少显存占用

按需渲染：只在必要时更新

合适的LOD：平衡视觉质量和渲染性能

阴影优化：合理的阴影分辨率和相机范围

9. 响应式与兼容性
设备像素比适配：支持Retina等高DPI显示屏

视口设置：移动设备友好的缩放控制

窗口大小监听：实时调整渲染尺寸和相机参数

🚀 技术亮点
逼真的材质表现
通过PBR材质实现真实的金属光泽

自定义玻璃材质模拟真实玻璃的透明度和反射特性

HDR环境贴图提供准确的环境反射

真实的动态效果
基于系统时间的精确指针运动

三个功能表盘分别显示不同时间单位

毫秒级精度的动画更新

专业的阴影处理
VSM阴影提供电影级的柔和阴影

精确的阴影偏移避免"阴影痤疮"

可配置的阴影质量和性能平衡

灵活的效果控制
可实时调整的材质参数

可开关的后期处理效果

详细的效果参数微调

优雅的用户体验
加载时的自动演示动画

平滑的交互阻尼效果

直观的GUI控制界面

📊 技术栈总结
类别	技术/库	用途
3D引擎	Three.js r128+	核心3D渲染框架
模型格式	GLB + DRACO	压缩的3D模型
光照	HDR + IBL	基于图像的光照
阴影	VSM Shadow Mapping	高质量柔化阴影
动画	Tween.js	补间动画
交互	OrbitControls	相机控制
UI	lil-gui	参数控制面板
后期处理	TAA + Unreal Bloom	抗锯齿和辉光效果
模型加载	GLTFLoader + DRACOLoader	模型导入和解码
🎨 视觉特性实现
金属质感：通过金属度/粗糙度PBR参数控制

玻璃效果：透明度+虹彩+清漆的复合材质

环境反射：HDR等距圆柱投影贴图

辉光效果：基于亮度的选择性光晕

抗锯齿：时间性多重采样消除锯齿

⚡ 性能考量
显存优化：使用半浮点数帧缓冲区

加载优化：DRACO压缩减少传输数据

渲染优化：按需启用后期处理

阴影优化：合适的阴影贴图分辨率

动画优化：高效的补间动画更新 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示网站内容和功能 -->
		<title>Three.js WebGL - 3D劳力士手表展示</title>
		<!-- 字符编码设置：UTF-8支持中文字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：响应式设计，控制移动端缩放行为 -->
		<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渲染容器：所有3D内容将在这个div内部渲染 -->
		<div id="container"></div>
		<!-- 页面信息展示区域：显示技术信息和版权声明 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 劳力士手表3D模型展示 - 包含环境光遮蔽贴图 - 模型大小610KB
		</div>

		<!-- 导入映射配置：现代JavaScript模块系统的路径别名配置 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/",
					"tween": "./jsm/libs/tween.module.js"
				}
			}
		</script>

		<!-- 主JavaScript模块：type="module"表示这是ES6模块 -->
		<script type="module">
			// ==================== 模块导入区域 ====================
			// 导入Three.js核心库的所有功能
			import * as THREE from 'three';
			// 导入Tween.js动画库的所有功能
			import * as TWEEN from 'tween';

			// 导入Three.js的控制器模块：实现鼠标/触摸交互的轨道控制
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入GLTF模型加载器：用于加载.glb/.gltf格式的3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			// 导入HDR环境贴图加载器：用于加载高动态范围图像作为环境光
			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
			// 导入DRACO解码器：用于解压缩经过DRACO压缩的GLTF模型
			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
			
			// 导入轻量级GUI库：用于创建参数控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入后期处理效果模块
			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; // 虚幻引擎风格辉光效果
			import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';     // 时间性抗锯齿效果

			// ==================== 全局变量声明区域 ====================
			let camera;     // 相机对象：定义观察3D场景的视角
			let scene;      // 场景对象：包含所有3D对象的容器
			let renderer;   // 渲染器对象：负责将3D场景渲染到2D画布上
			
			let gui;        // GUI控制面板对象
			let dirLight;   // 方向光源：模拟太阳光等平行光源
			let pointLight; // 点光源：模拟灯泡等点状光源
			let controls;   // 轨道控制器对象
			let bloomPass;  // 辉光后期处理效果对象
			let taaPass;    // 时间性抗锯齿后期处理对象
			
			let ready = false; // 模型加载状态标志：true表示模型已加载完成可以交互

			// 存储模型中的网格对象：以名称作为键，便于后续访问
			const meshes = {};
			// 存储模型中的材质对象：以名称作为键，便于后续修改
			const materials = {};
			
			// 角度转弧度常数：Math.PI/180 ≈ 0.0174533，用于将角度值转换为弧度值
			const torad = Math.PI / 180;

			// ==================== GUI参数配置对象 ====================
			const setting = {
				roughness: 0.09,      // 材质粗糙度：0表示完全光滑，1表示完全粗糙
				metalness: 1.0,       // 材质金属度：0表示非金属，1表示金属
				opacity: 0.4,         // 玻璃透明度：0表示完全透明，1表示完全不透明
				threshold: 0,         // 辉光阈值：低于此亮度的像素不会产生辉光效果
				strength: 0.007,      // 辉光强度：控制辉光效果的明亮程度
				radius: 0.0,          // 辉光半径：控制辉光效果的扩散范围
				postProcess: false    // 后期处理开关：是否启用辉光和抗锯齿效果
			};

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

			/**
			 * 初始化函数 - Three.js应用的主入口函数
			 * 功能：创建场景、相机、渲染器，加载资源，设置光照和控制器
			 * 执行顺序：从上到下依次初始化各个组件
			 */
			function init() {
				// 获取DOM容器元素：Three.js将在其中创建canvas元素
				const container = document.getElementById('container');

				// ==================== 相机初始化 ====================
				// 创建透视相机：模拟人眼视角，近大远小的效果
				camera = new THREE.PerspectiveCamera(
					55,                                     // 视野角度(FOV)：55度，接近人眼自然视角
					window.innerWidth / window.innerHeight,  // 纵横比：根据窗口宽高比自动计算
					0.1,                                    // 近裁剪平面：距离相机0.1单位内的物体不显示
					20                                      // 远裁剪平面：距离相机20单位外的物体不显示
				);
				// 设置相机初始位置：(x, y, z)坐标系
				camera.position.set(0.8, 0.5, -1.5); // 稍微偏右、偏上、向后

				// ==================== 场景初始化 ====================
				// 创建场景对象：所有3D物体、光源、相机都添加到场景中
				scene = new THREE.Scene();

				// ==================== 渲染器初始化 ====================
				// 创建WebGL渲染器：使用WebGL 1.0或2.0进行硬件加速渲染
				renderer = new THREE.WebGLRenderer({
					antialias: true,              // 启用抗锯齿：平滑边缘锯齿
					outputBufferType: THREE.HalfFloatType // 输出缓冲区类型：半浮点数，节省内存
				});
				// 设置设备像素比：适应高分辨率屏幕（Retina显示屏等）
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸：充满整个浏览器窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环函数：requestAnimationFrame的封装，每帧调用animate函数
				renderer.setAnimationLoop(animate);
				// 设置色调映射：ACESFilmic Tone Mapping，电影级色调映射算法
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				// 设置曝光值：控制整体亮度，0.7表示略微降低曝光
				renderer.toneMappingExposure = 0.7;
				// 启用阴影映射：允许物体投射和接收阴影
				renderer.shadowMap.enabled = true;
				// 设置阴影映射类型：VSM（方差阴影映射），提供柔和的阴影边缘
				renderer.shadowMap.type = THREE.VSMShadowMap;
				// 将渲染器的canvas元素添加到DOM容器中
				container.appendChild(renderer.domElement);

				// ==================== 后期处理效果初始化 ====================
				// 创建时间性抗锯齿(TAA)渲染通道：通过多帧混合减少锯齿
				taaPass = new TAARenderPass(scene, camera);
				taaPass.sampleLevel = 2; // 采样级别：2表示中等质量

				// 创建虚幻引擎风格辉光效果
				bloomPass = new UnrealBloomPass(
					new THREE.Vector2(window.innerWidth, window.innerHeight), // 渲染尺寸
					1.5,  // 辉光强度系数
					0.4,  // 辉光半径系数
					0.85  // 辉光阈值系数
				);
				// 根据GUI设置初始化辉光参数
				bloomPass.threshold = setting.threshold;
				bloomPass.strength = setting.strength;
				bloomPass.radius = setting.radius;

				// ==================== 资源加载（异步操作） ====================
				// 创建HDR加载器并设置纹理路径
				new HDRLoader()
					.setPath('textures/equirectangular/') // 设置HDR纹理文件路径
					.load('lobe.hdr', function (texture) {
						// HDR加载完成后的回调函数
						
						// 设置纹理映射方式：等距圆柱投影，将2D图像映射到球面
						texture.mapping = THREE.EquirectangularReflectionMapping;
						
						// 将HDR贴图设置为场景背景
						scene.background = texture;
						// 将HDR贴图设置为环境贴图：影响所有物体的反射和漫反射
						scene.environment = texture;
						// 设置背景模糊度：0表示清晰，1表示完全模糊
						scene.backgroundBlurriness = 0.5;
						// 设置背景强度：1.0表示原始亮度
						scene.backgroundIntensity = 1.0;
						// 设置环境光强度：1.5表示比原始亮度更亮
						scene.environmentIntensity = 1.5;

						// ==================== 3D模型加载 ====================
						// 创建GLTF加载器并设置模型路径
						const loader = new GLTFLoader().setPath('models/gltf/');
						// 设置DRACO解码器：用于解压缩Google的DRACO压缩格式
						loader.setDRACOLoader(new DRACOLoader().setDecoderPath('jsm/libs/draco/gltf/'));
						
						// 加载劳力士手表GLB模型文件
						loader.load('rolex.glb', function (gltf) {
							// GLTF模型加载完成后的回调函数
							
							// 设置模型的初始旋转：绕X轴旋转45度（π * 0.25）
							gltf.scene.rotation.x = Math.PI * 0.25;

							// 遍历模型的所有子对象（递归遍历）
							gltf.scene.traverse((child) => {
								// 检查子对象是否为网格或组
								if (child.isMesh || child.isGroup) {
									if (child.isMesh) {
										// 如果是网格对象
										
										// 禁用顶点颜色：使用材质颜色而非顶点颜色
										child.material.vertexColors = false;
										// 将材质按名称存储到materials对象中
										materials[child.material.name] = child.material;
										
										// 为除玻璃外的所有网格启用阴影
										if (child.name !== 'glass') {
											// 允许网格接收其他物体投射的阴影
											child.receiveShadow = true;
											// 允许网格向其他物体投射阴影
											child.castShadow = true;
										}
									}
									// 将网格或组按名称存储到meshes对象中
									meshes[child.name] = child;
								}
							});

							// 将整个模型添加到场景中
							scene.add(gltf.scene);

							// ==================== 特殊材质处理 ====================
							// 为玻璃部分创建自定义的物理材质
							meshes.glass.material = new THREE.MeshPhysicalMaterial({
								color: 0x020205,          // 玻璃颜色：深蓝色（十六进制RGB）
								transparent: true,         // 启用透明度
								opacity: setting.opacity,  // 透明度值（从GUI设置获取）
								metalness: 0,              // 金属度：0表示非金属材质
								roughness: 0,              // 粗糙度：0表示完全光滑
								iridescence: 0.3,          // 虹彩效果：0.3表示轻微虹彩
								clearcoat: 1.0,            // 清漆涂层：1.0表示完全涂层
								blending: THREE.AdditiveBlending // 混合模式：叠加混合，增强反光效果
							});

							// 标记模型加载完成
							ready = true;
							// 创建GUI控制面板
							createGUI();
						});
					});

				// ==================== 交互控制器初始化 ====================
				// 创建轨道控制器：允许用户用鼠标旋转、缩放、平移场景
				controls = new OrbitControls(camera, renderer.domElement);
				controls.minDistance = 0.3;     // 最小缩放距离：相机不能比这更接近目标
				controls.maxDistance = 10;      // 最大缩放距离：相机不能比这更远离目标
				controls.target.set(0, -0.1, 0); // 控制目标点：相机始终围绕此点旋转
				controls.enableDamping = true;  // 启用阻尼效果：惯性滑动，更自然的交互体验
				controls.dampingFactor = 0.05;  // 阻尼系数：值越小，惯性滑动越长
				controls.update();              // 强制更新控制器状态

				// ==================== 光照系统初始化 ====================
				// 创建方向光源（模拟太阳光）
				dirLight = new THREE.DirectionalLight(
					0xFFFFFF, // 光源颜色：白色（十六进制RGB）
					6         // 光源强度：6，相对较强的光照
				);
				dirLight.position.set(-0.1, 0.6, 0.4); // 光源位置：左上方
				dirLight.castShadow = true; // 启用阴影投射
				scene.add(dirLight); // 将光源添加到场景
				
				// 配置光源阴影属性
				const shadow = dirLight.shadow;
				shadow.mapSize.width = shadow.mapSize.height = 1024; // 阴影贴图分辨率：1024x1024像素
				shadow.radius = 8;      // 阴影模糊半径：8像素，产生柔和阴影边缘
				shadow.bias = -0.0005;  // 阴影偏移：解决自阴影问题（阴影痤疮）
				
				// 配置阴影相机（光源的视角）
				const shadowCam = shadow.camera;
				const s = 0.5; // 阴影相机范围的一半
				shadowCam.near = 0.1;   // 近裁剪面：0.1单位内的物体不投射阴影
				shadowCam.far = 2;      // 远裁剪面：2单位外的物体不投射阴影
				shadowCam.right = shadowCam.top = s;     // 右边界和上边界：+0.5单位
				shadowCam.left = shadowCam.bottom = -s;  // 左边界和下边界：-0.5单位
				
				// 阴影调试：取消注释可显示阴影相机的可视范围（帮助调试阴影问题）
				// scene.add(new THREE.CameraHelper(shadowCam));

				// 创建点光源（模拟局部照明，如灯泡）
				pointLight = new THREE.PointLight(
					0x7b8cad, // 光源颜色：蓝灰色（十六进制RGB）
					1,        // 光源强度：1，较弱的环境光
					0,        // 光源衰减距离：0表示无衰减
					2         // 光源衰减系数：二次衰减
				);
				pointLight.position.set(0.3, -0.2, -0.2); // 光源位置：右下方稍后
				scene.add(pointLight); // 将点光源添加到场景

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

				// 执行初始相机动画：从初始位置平滑移动到展示位置
				moveCamera();
			}

			/**
			 * 相机移动动画函数
			 * 功能：创建从初始相机位置到目标位置的平滑过渡动画
			 * 技术：使用Tween.js实现补间动画
			 */
			function moveCamera() {
				// 暂时禁用控制器：防止用户交互干扰动画
				controls.enabled = false;
				controls.enableDamping = false;

				// 创建球坐标对象：用于表示相机在球坐标系中的位置
				const sph = new THREE.Spherical();
				// 获取当前控制器的目标点
				const target = controls.target;
				
				// 创建临时对象存储当前相机状态（动画起始状态）
				const tmp = {
					distance: controls.getDistance(),           // 当前相机到目标点的距离
					phi: controls.getPolarAngle(),             // 当前极角（垂直角度，0到π）
					theta: controls.getAzimuthalAngle()        // 当前方位角（水平角度，0到2π）
				};

				// 使用Tween.js创建补间动画
				new TWEEN.Tween(tmp) // 从tmp对象开始动画
					.to({ // 动画结束状态
						distance: 1,                    // 目标距离：1单位
						theta: -Math.PI * 0.2          // 目标水平角度：-36度（逆时针方向）
					}, 6000) // 动画持续时间：6000毫秒（6秒）
					.easing(TWEEN.Easing.Quadratic.Out) // 缓动函数：二次缓出（开始快，结束慢）
					.onUpdate(function (n) {
						// 每帧更新时调用（动画进行中）
						// 设置球坐标参数
						sph.set(n.distance, n.phi, n.theta);
						// 将球坐标转换为直角坐标系位置
						camera.position.setFromSpherical(sph).add(target);
						// 让相机始终看向目标点
						camera.lookAt(target);
					})
					.onComplete(function () {
						// 动画完成时调用
						// 重新启用控制器，允许用户交互
						controls.enabled = true;
						controls.enableDamping = true;
					})
					.start(); // 开始执行动画
			}

			/**
			 * 后期处理效果切换函数
			 * @param {boolean} b - 是否启用后期处理效果
			 * 功能：启用或禁用TAA抗锯齿和辉光效果
			 */
			function postProcess(b) {
				if (b) {
					// 启用后期处理：添加TAA和辉光效果通道
					renderer.setEffects([taaPass, bloomPass]);
				} else {
					// 禁用后期处理：移除所有效果通道
					renderer.setEffects(null);
				}
			}

			/**
			 * 创建GUI控制面板函数
			 * 功能：生成交互式控制面板，允许用户实时调整材质和后期处理参数
			 */
			function createGUI() {
				// 创建GUI实例
				gui = new GUI();
				
				// ==================== 材质控制组 ====================
				// 添加粗糙度滑块控件
				gui.add(setting, 'roughness', 0, 1, 0.01)
				   .name('粗糙度') // 控件显示名称
				   .onChange(upMaterial); // 值改变时调用upMaterial函数
				
				// 添加金属度滑块控件
				gui.add(setting, 'metalness', 0, 1, 0.01)
				   .name('金属度')
				   .onChange(upMaterial);
				
				// 添加透明度滑块控件
				gui.add(setting, 'opacity', 0, 1, 0.01)
				   .name('玻璃透明度')
				   .onChange(upMaterial);

				// ==================== 后期处理控制组 ====================
				// 添加后期处理开关控件
				gui.add(setting, 'postProcess')
				   .name('后期处理开关')
				   .onChange(postProcess);
				
				// 添加辉光阈值滑块控件
				gui.add(setting, 'threshold', 0, 1, 0.01)
				   .name('辉光阈值')
				   .onChange(upBloom);
				
				// 添加辉光强度滑块控件
				gui.add(setting, 'strength', 0, 0.1, 0.001)
				   .name('辉光强度')
				   .onChange(upBloom);
				
				// 添加辉光半径滑块控件
				gui.add(setting, 'radius', 0, 1, 0.01)
				   .name('辉光半径')
				   .onChange(upBloom);
			}

			/**
			 * 更新材质参数函数
			 * 功能：当GUI中的材质参数改变时，更新所有相关材质的属性
			 */
			function upMaterial() {
				// 更新金属材质的金属度：同时更新黄金和白银材质
				materials.Gold.metalness = materials.Silver.metalness = setting.metalness;
				// 更新金属材质的粗糙度：同时更新黄金和白银材质
				materials.Gold.roughness = materials.Silver.roughness = setting.roughness;
				// 更新玻璃材质的透明度
				meshes.glass.material.opacity = setting.opacity;
			}

			/**
			 * 更新辉光效果参数函数
			 * 功能：当GUI中的辉光参数改变时，更新bloomPass对象的属性
			 */
			function upBloom() {
				// 安全检查：确保bloomPass对象已初始化
				if (!bloomPass) return;
				// 更新辉光阈值
				bloomPass.threshold = setting.threshold;
				// 更新辉光强度
				bloomPass.strength = setting.strength;
				// 更新辉光半径
				bloomPass.radius = setting.radius;
			}

			/**
			 * 获取当前时间并更新手表指针函数
			 * 功能：读取系统时间，计算手表各指针的角度并更新3D模型
			 * 说明：模拟真实手表的机械运动，包括时针、分针、秒针和三个小表盘
			 */
			function getTime() {
				// 获取当前日期时间对象
				const currentDate = new Date();
				
				// 从日期对象中提取时间信息
				let hour = currentDate.getHours();      // 小时（0-23）
				const minute = currentDate.getMinutes(); // 分钟（0-59）
				const second = currentDate.getSeconds(); // 秒（0-59）
				let day = currentDate.getDay();          // 星期几（0-6，0=周日）
				const month = currentDate.getMonth();    // 月份（0-11，0=一月）
				const milli = currentDate.getMilliseconds(); // 毫秒（0-999）
				
				// 时间单位转换：24小时制转换为12小时制
				if (hour >= 12) hour -= 12;
				// 限制日期显示范围：防止超出表盘刻度
				if (day > 30) day = 30;

				// ==================== 更新手表指针角度 ====================
				// 计算原理：角度 = 时间单位 × 每单位角度 × 弧度转换系数
				
				// 时针：每小时30度（360度 ÷ 12小时 = 30度/小时）
				// 负号表示顺时针旋转（Three.js中正角度是逆时针）
				meshes.hour.rotation.y = -hour * 30 * torad;
				
				// 分针：每分钟6度（360度 ÷ 60分钟 = 6度/分钟）
				meshes.minute.rotation.y = -minute * 6 * torad;
				
				// 秒针：每秒6度（360度 ÷ 60秒 = 6度/秒）
				meshes.second.rotation.y = -second * 6 * torad;
				
				// 小表盘1（日期显示）：每天12度（360度 ÷ 30天 = 12度/天）
				meshes.mini_03.rotation.y = -day * 12 * torad;
				
				// 小表盘2（月份显示）：每月30度（360度 ÷ 12月 = 30度/月）
				meshes.mini_02.rotation.y = -month * 30 * torad;
				
				// 小表盘3（毫秒显示）：每毫秒0.36度（360度 ÷ 1000毫秒 = 0.36度/毫秒）
				meshes.mini_01.rotation.y = -milli * 0.36 * torad;
			}

			/**
			 * 窗口大小变化响应函数
			 * 功能：当浏览器窗口大小改变时，调整相机和渲染器的参数
			 * 触发：浏览器窗口大小改变、设备旋转、开发者工具打开等
			 */
			function onWindowResize() {
				// 获取当前窗口的内部宽度和高度
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机纵横比：保持正确的显示比例
				camera.aspect = width / height;
				// 更新相机投影矩阵：必须调用此方法使纵横比改变生效
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸：使canvas元素适应新窗口尺寸
				renderer.setSize(width, height);
			}

			/**
			 * 动画循环函数 - Three.js渲染循环的核心
			 * 功能：每帧调用，更新场景状态并重新渲染
			 * 调用频率：通常60次/秒（取决于浏览器和显示器刷新率）
			 */
			function animate() {
				// 更新轨道控制器：处理阻尼、惯性等效果
				controls.update();

				// 更新Tween.js动画：推进所有正在运行的补间动画
				TWEEN.update();

				// 渲染场景：将3D场景绘制到2D画布上
				renderer.render(scene, camera);

				// 如果模型已加载完成，更新时间显示
				if (ready) getTime();
			}
		</script>
	</body>
</html>