<!-- Three.js 阴影网格演示 - 功能描述与技术分析
🎯 项目功能概述
这是一个基于Three.js的WebGL交互式3D演示，展示了一个动态阴影系统。项目通过手动计算几何投影的方式，在指定的平面上实时渲染多个3D对象的阴影，并允许用户在平行光和点光源之间切换，观察不同类型光源下的阴影效果。

核心功能模块：
动态场景

5种不同几何体（立方体、圆柱体、圆环体、球体、金字塔）在3D空间中运动

每个几何体都有旋转和周期性上下/左右运动

所有几何体实时投射阴影到地面

灯光系统

平行光模式：模拟太阳光，光线平行照射，阴影边缘清晰

点光源模式：模拟灯泡，光线从一点发散，阴影边缘模糊且随距离变化

一键切换两种灯光模式，场景视觉风格随之变化

阴影渲染

使用ShadowMesh类计算每个对象的阴影投影

阴影根据对象位置、光源位置和地面平面实时更新

支持不同光源类型的阴影效果

视觉反馈

平行光模式下显示方向指示箭头

点光源模式下显示灯泡和灯座模型

背景色和地面颜色随灯光模式变化

🔧 主要技术点分析
1. 阴影实现技术 - ShadowMesh
技术原理：
javascript
// ShadowMesh的工作原理
class ShadowMesh extends THREE.Mesh {
  constructor(mesh) {
    // 复制原始网格的几何体和材质
    // 创建一个用于显示阴影的网格副本
  }
  
  update(plane, lightPosition4D) {
    // 核心算法：将3D对象投影到指定平面
    // 使用4x4投影矩阵计算阴影变形
    // 参数：
    // - plane: 投影平面（地面）
    // - lightPosition4D: 光源位置+发散参数
  }
}
数学原理：
投影矩阵计算：将3D空间点投影到2D平面

齐次坐标：使用4D向量表示光源位置，其中w分量控制投影发散程度

平面方程：ax + by + cz + d = 0 定义投影平面

2. 4D光源系统
javascript
// 4D光源向量的意义
const lightPosition4D = new THREE.Vector4(x, y, z, w);

// w分量的作用：
// w = 0.001 → 平行光（无限远光源，光线平行）
// w = 0.9   → 点光源（有限距离光源，光线发散）
// w ∈ (0, 1] → 控制阴影的透视变形程度
技术优势：

用一个参数统一表示两种光源类型

平滑过渡不同光源效果

数学上统一处理投影计算

3. 动画系统设计
时间驱动动画：
javascript
// 使用Clock获取时间增量，实现帧率无关动画
frameTime = clock.getDelta(); // 获取上一帧的时间差（秒）

// 所有动画基于时间增量计算
cube.rotation.x += 1.0 * frameTime; // 每秒旋转1弧度
周期性运动：
javascript
// 使用三角函数创建平滑周期运动
horizontalAngle += 0.5 * frameTime;
cube.position.x = Math.sin(horizontalAngle) * 4; // 正弦波水平运动

// 多对象相位偏移：
cube.position.y = Math.sin(verticalAngle) * 2 + 2.9;
cylinder.position.y = Math.sin(verticalAngle) * 2 + 3.1; // 不同基准高度
torus.position.y = Math.cos(verticalAngle) * 2 + 3.3;    // 使用余弦，90度相位差
4. 性能优化技术
单次投影计算：每帧只计算一次投影矩阵，所有阴影共享

几何体复用：ShadowMesh复用原始网格的几何体，节省内存

批量更新：所有阴影在每帧统一更新，减少函数调用开销

5. 渲染管线集成
text
渲染流程：
1. 更新所有几何体的位置和旋转
2. 计算当前帧的时间增量
3. 更新水平/垂直角度参数
4. 为每个ShadowMesh调用update()方法
5. 使用WebGLRenderer渲染整个场景
6. 响应式设计
javascript
function onWindowResize() {
  SCREEN_WIDTH = window.innerWidth;
  SCREEN_HEIGHT = window.innerHeight;
  
  // 更新渲染器尺寸
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  
  // 更新相机参数
  camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  camera.updateProjectionMatrix(); // 必须调用以应用更改
}
7. 视觉效果控制
材质系统：
MeshLambertMaterial：漫反射材质（立方体、地面）

MeshPhongMaterial：高光材质（圆柱体、圆环体等）

MeshBasicMaterial：基础材质（灯泡、灯座）

自发光设置：
javascript
emissive: 0x200000 // 微弱的自发光，增强颜色鲜艳度
// 十六进制颜色值：0xRRGGBB
8. 交互设计
javascript
// 灯光切换逻辑
function lightButtonHandler() {
  useDirectionalLight = !useDirectionalLight;
  
  if (useDirectionalLight) {
    // 平行光：蓝色背景、绿色地面、显示箭头
    scene.background.setHex(0x0096ff);
    lightPosition4D.w = 0.001;
  } else {
    // 点光源：黑色背景、灰色地面、显示灯泡
    scene.background.setHex(0x000000);
    lightPosition4D.w = 0.9;
  }
}
🏆 技术亮点总结
创新的阴影实现：不使用传统的阴影映射，而是通过几何投影实时计算阴影形状

统一的光源模型：用4D向量同时表示光源位置和类型，数学上优雅且高效

物理正确的投影：

平行光：阴影保持原形状，仅平移

点光源：阴影产生透视变形，符合物理规律

性能与质量平衡：

牺牲了一些真实感（软阴影、阴影模糊）

获得更好的性能和可控性

适合需要大量动态阴影的场景

教育价值：

清晰演示了投影几何原理

展示了计算机图形学中齐次坐标的应用

帮助理解3D图形渲染的基本概念

📊 与传统阴影技术的对比
特性	ShadowMesh（本项目）	Three.js ShadowMap
实现原理	几何投影计算	深度缓冲区比较
阴影质量	硬阴影，无模糊	支持软阴影，更真实
性能开销	较低，CPU计算	较高，GPU渲染
灵活性	完全可控	依赖渲染管线
适用场景	简单场景，教育演示	复杂场景，游戏开发
🚀 应用场景
教育演示：理解3D图形学中的投影原理

原型开发：快速实现基础阴影效果

低性能设备：在不支持高级阴影的设备上提供阴影效果

特殊效果：需要非真实感渲染或风格化阴影的应用 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGL阴影网格示例 -->
		<title>Three.js WebGL - 阴影网格演示</title>
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			width=device-width - 宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放页面
			minimum-scale=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">
		<!-- 引入外部CSS样式表，用于页面布局和基本样式 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			信息显示区域：
			显示项目信息和交互控制按钮
			id="info" 用于CSS样式选择和JavaScript操作
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接：
				target="_blank" - 在新标签页打开链接
				rel="noopener" - 安全设置，防止新页面访问原页面的window.opener属性
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 阴影网格演示<br />
			<!-- 
				灯光切换按钮：
				id="lightButton" - 用于JavaScript事件监听
				type="button" - 定义按钮类型
				value="切换到点光源" - 按钮显示的初始文本
			-->
			<input id="lightButton" type="button" value="切换到点光源">
			<!-- 额外说明：展示当前灯光类型和阴影效果 -->
			<div style="font-size: 12px; margin-top: 5px; color: #666;">
				当前: 平行光 | 点击按钮切换灯光类型
			</div>
		</div>

		<!-- 
			渲染容器：
			Three.js WebGL渲染器将把canvas元素添加到这里
			id="container" 用于JavaScript获取DOM元素
		-->
		<div id="container"></div>

		<!-- 
			导入映射(Import Map)：
			现代JavaScript模块系统功能，用于定义模块的导入路径
			允许浏览器正确解析ES6模块导入语句
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			type="module" 表示这是一个ES6模块，支持import/export语法
			模块中的代码有自己独立的作用域
		-->
		<script type="module">
			// ==================== 模块导入部分 ====================
			// 导入Three.js核心库的所有功能，使用* as THREE将整个库绑定到THREE对象
			import * as THREE from 'three';
			
			// 导入ShadowMesh类（来自Three.js的附加组件）
			// ShadowMesh是一个特殊网格对象，用于在平面上渲染其他对象的阴影
			// 它通过计算对象在平面上的投影来创建阴影效果
			import { ShadowMesh } from 'three/addons/objects/ShadowMesh.js';

			// ==================== 全局变量声明部分 ====================
			// 屏幕尺寸变量 - 初始设置为当前窗口的宽高
			let SCREEN_WIDTH = window.innerWidth;
			let SCREEN_HEIGHT = window.innerHeight;

			// 核心Three.js对象
			// 场景(Scene)：所有3D对象的容器，包括网格、灯光、相机等
			const scene = new THREE.Scene();
			// 透视相机(PerspectiveCamera)：模拟人眼视角的相机
			// 参数说明：55(视野角度), SCREEN_WIDTH/SCREEN_HEIGHT(宽高比), 1(近裁剪面), 3000(远裁剪面)
			const camera = new THREE.PerspectiveCamera(55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000);
			// 时钟(Clock)：用于测量时间间隔，实现与帧率无关的动画
			const clock = new THREE.Clock();
			// WebGL渲染器：将3D场景渲染到2D画布上
			// stencil: true - 启用模板缓冲区，某些高级效果需要（如阴影、反射）
			const renderer = new THREE.WebGLRenderer({ stencil: true });

			// 光源系统
			// 创建平行光(DirectionalLight)：模拟太阳光，所有光线平行照射
			// 参数：颜色('rgb(255,255,255)')，强度(3)
			const sunLight = new THREE.DirectionalLight('rgb(255,255,255)', 3);
			// 灯光类型标志：true表示当前使用平行光，false表示使用点光源
			let useDirectionalLight = true;

			// 方向指示箭头相关变量
			// 箭头助手(ArrowHelper)：可视化向量方向的Three.js对象
			let arrowHelper1, arrowHelper2, arrowHelper3;
			// 临时向量对象，用于计算和存储方向、位置信息
			const arrowDirection = new THREE.Vector3();
			const arrowPosition1 = new THREE.Vector3();
			const arrowPosition2 = new THREE.Vector3();
			const arrowPosition3 = new THREE.Vector3();

			// 地面网格对象
			let groundMesh;

			// 灯光可视化对象（点光源模式下显示）
			let lightSphere;   // 灯泡（球体）
			let lightHolder;   // 灯座（圆柱体）

			// 各种几何体及其对应的阴影网格
			let pyramid, pyramidShadow;     // 金字塔
			let sphere, sphereShadow;       // 球体
			let cube, cubeShadow;           // 立方体
			let cylinder, cylinderShadow;   // 圆柱体
			let torus, torusShadow;         // 圆环体

			// 阴影投影相关
			// 投影平面法线：垂直向上(0,1,0)，表示地面是水平的
			const normalVector = new THREE.Vector3(0, 1, 0);
			// 平面常数：略高于地面的y位置(0.0)
			// 这个微小的偏移确保阴影渲染在地面之上，防止z-fighting（深度冲突）
			const planeConstant = 0.01;
			// 创建投影平面：阴影将被投影到这个平面上
			const groundPlane = new THREE.Plane(normalVector, planeConstant);
			
			// 4D光源位置向量：
			// x,y,z - 光源的3D空间位置
			// w - 光线发散程度控制参数：
			//   0.001 = 平行光（最小发散，类似太阳光）
			//   0.9   = 点光源（最大发散，类似灯泡）
			// 注意：w不能为0，否则会导致矩阵求逆错误
			const lightPosition4D = new THREE.Vector4();
			
			// 动画控制变量
			let verticalAngle = 0;    // 垂直角度，用于控制物体的上下运动
			let horizontalAngle = 0;  // 水平角度，用于控制物体的左右运动
			let frameTime = 0;        // 每帧的时间差（秒），用于实现平滑动画
			const TWO_PI = Math.PI * 2; // 2π常量，用于角度计算和归一化

			// ==================== 初始化函数调用 ====================
			// 调用初始化函数，设置场景、对象和事件监听器
			init();

			// ==================== 函数定义部分 ====================
			
			/**
			 * 初始化函数
			 * 设置整个Three.js场景，包括：
			 * 1. 渲染器配置
			 * 2. 场景背景和相机
			 * 3. 灯光系统
			 * 4. 所有3D对象和阴影
			 * 5. 事件监听器
			 */
			function init() {
				// ---------- 渲染器配置 ----------
				// 设置场景背景色为天空蓝
				scene.background = new THREE.Color(0x0096ff);
				
				// 设置设备像素比例，确保在高DPI屏幕上清晰显示
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
				// 设置动画循环回调函数，替代传统的requestAnimationFrame
				renderer.setAnimationLoop(animate);
				// 将渲染器的DOM元素（canvas）添加到页面容器中
				document.getElementById('container').appendChild(renderer.domElement);
				
				// 添加窗口大小变化事件监听器
				window.addEventListener('resize', onWindowResize);

				// ---------- 相机设置 ----------
				// 设置相机初始位置：(x=0, y=2.5, z=10)
				// 这个位置提供了良好的俯视视角
				camera.position.set(0, 2.5, 10);
				// 将相机添加到场景中（某些效果需要相机在场景中）
				scene.add(camera);
				// 初始调用窗口大小调整函数，确保相机参数正确
				onWindowResize();

				// ---------- 平行光设置 ----------
				// 设置平行光位置
				sunLight.position.set(5, 7, -1);
				// 让光线指向场景中心点(0,0,0)
				sunLight.lookAt(scene.position);
				// 将光源添加到场景
				scene.add(sunLight);

				// 初始化4D光源位置向量
				// 复制平行光的3D位置到4D向量的前三个分量
				lightPosition4D.x = sunLight.position.x;
				lightPosition4D.y = sunLight.position.y;
				lightPosition4D.z = sunLight.position.z;
				// 设置w分量为0.001（平行光模式，光线几乎不发散）
				lightPosition4D.w = 0.001;

				// ---------- 方向指示箭头 ----------
				// 计算从光源指向场景中心的方向向量，并归一化（长度为1）
				arrowDirection.subVectors(scene.position, sunLight.position).normalize();
				
				// 创建第一个箭头（中心）
				arrowPosition1.copy(sunLight.position);
				// ArrowHelper参数：方向，起点，长度，颜色，箭头头部长度，头部宽度
				arrowHelper1 = new THREE.ArrowHelper(arrowDirection, arrowPosition1, 0.9, 0xffff00, 0.25, 0.08);
				scene.add(arrowHelper1);
				
				// 创建第二个箭头（向上偏移0.2单位）
				arrowPosition2.copy(sunLight.position).add(new THREE.Vector3(0, 0.2, 0));
				arrowHelper2 = new THREE.ArrowHelper(arrowDirection, arrowPosition2, 0.9, 0xffff00, 0.25, 0.08);
				scene.add(arrowHelper2);
				
				// 创建第三个箭头（向下偏移0.2单位）
				arrowPosition3.copy(sunLight.position).add(new THREE.Vector3(0, -0.2, 0));
				arrowHelper3 = new THREE.ArrowHelper(arrowDirection, arrowPosition3, 0.9, 0xffff00, 0.25, 0.08);
				scene.add(arrowHelper3);

				// ---------- 点光源可视化对象 ----------
				// 创建灯泡（球体）
				const lightSphereGeometry = new THREE.SphereGeometry(0.09); // 半径0.09
				const lightSphereMaterial = new THREE.MeshBasicMaterial({ color: 'rgb(255,255,255)' });
				lightSphere = new THREE.Mesh(lightSphereGeometry, lightSphereMaterial);
				scene.add(lightSphere);
				lightSphere.visible = false; // 初始隐藏（当前是平行光模式）
				
				// 创建灯座（圆柱体）
				const lightHolderGeometry = new THREE.CylinderGeometry(0.05, 0.05, 0.13); // 半径0.05，高度0.13
				const lightHolderMaterial = new THREE.MeshBasicMaterial({ color: 'rgb(75,75,75)' });
				lightHolder = new THREE.Mesh(lightHolderGeometry, lightHolderMaterial);
				scene.add(lightHolder);
				lightHolder.visible = false; // 初始隐藏

				// ---------- 地面 ----------
				const groundGeometry = new THREE.BoxGeometry(30, 0.01, 40); // 宽30，高0.01，深40
				const groundMaterial = new THREE.MeshLambertMaterial({ color: 'rgb(0,130,0)' });
				groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
				groundMesh.position.y = 0.0; // y位置为0，但略低于投影平面的planeConstant(0.01)
				scene.add(groundMesh);

				// ---------- 红色立方体 ----------
				const cubeGeometry = new THREE.BoxGeometry(1, 1, 1); // 1x1x1的立方体
				const cubeMaterial = new THREE.MeshLambertMaterial({ 
					color: 'rgb(255,0,0)',  // 红色
					emissive: 0x200000      // 微弱的自发光红色，使颜色更鲜艳
				});
				cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
				cube.position.z = -1; // 沿Z轴负方向移动1个单位
				scene.add(cube);
				
				// 为立方体创建阴影网格
				// ShadowMesh构造函数接收一个网格对象，创建该对象的阴影版本
				cubeShadow = new ShadowMesh(cube);
				scene.add(cubeShadow);

				// ---------- 蓝色圆柱体 ----------
				const cylinderGeometry = new THREE.CylinderGeometry(0.3, 0.3, 2); // 半径0.3，高度2
				const cylinderMaterial = new THREE.MeshPhongMaterial({ 
					color: 'rgb(0,0,255)',  // 蓝色
					emissive: 0x000020      // 微弱的自发光蓝色
				});
				cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
				cylinder.position.z = -2.5; // 沿Z轴负方向移动2.5个单位
				scene.add(cylinder);
				
				cylinderShadow = new ShadowMesh(cylinder);
				scene.add(cylinderShadow);

				// ---------- 品红色圆环体 ----------
				const torusGeometry = new THREE.TorusGeometry(1, 0.2, 10, 16, TWO_PI);
				// 参数：圆环半径1，管道半径0.2，径向分段数10， tubular分段数16，弧度TWO_PI（完整圆环）
				const torusMaterial = new THREE.MeshPhongMaterial({ 
					color: 'rgb(255,0,255)',  // 品红色
					emissive: 0x200020        // 微弱的自发光品红色
				});
				torus = new THREE.Mesh(torusGeometry, torusMaterial);
				torus.position.z = -6; // 沿Z轴负方向移动6个单位
				scene.add(torus);
				
				torusShadow = new ShadowMesh(torus);
				scene.add(torusShadow);

				// ---------- 白色球体 ----------
				const sphereGeometry = new THREE.SphereGeometry(0.5, 20, 10); // 半径0.5，宽度分段20，高度分段10
				const sphereMaterial = new THREE.MeshPhongMaterial({ 
					color: 'rgb(255,255,255)',  // 白色
					emissive: 0x222222          // 灰色的自发光，使球体看起来更亮
				});
				sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
				sphere.position.set(4, 0.5, 2); // 设置位置(x=4, y=0.5, z=2)
				scene.add(sphere);
				
				sphereShadow = new ShadowMesh(sphere);
				scene.add(sphereShadow);

				// ---------- 黄色金字塔 ----------
				// 使用圆锥几何体创建金字塔：顶部半径为0，底部半径0.5，高度2，4个侧面
				const pyramidGeometry = new THREE.CylinderGeometry(0, 0.5, 2, 4);
				const pyramidMaterial = new THREE.MeshPhongMaterial({ 
					color: 'rgb(255,255,0)',  // 黄色
					emissive: 0x440000,       // 微弱的自发光红色
					flatShading: true,        // 平面着色模式，创建棱角分明的外观
					shininess: 0              // 无光泽，完全漫反射
				});
				pyramid = new THREE.Mesh(pyramidGeometry, pyramidMaterial);
				pyramid.position.set(-4, 1, 2); // 设置位置(x=-4, y=1, z=2)
				scene.add(pyramid);
				
				pyramidShadow = new ShadowMesh(pyramid);
				scene.add(pyramidShadow);

				// ---------- 事件监听器 ----------
				// 为灯光切换按钮添加点击事件监听器
				document.getElementById('lightButton').addEventListener('click', lightButtonHandler);
			}

			/**
			 * 动画循环函数
			 * 每一帧都会被调用，用于更新场景状态和渲染
			 * 这是Three.js应用程序的核心循环
			 */
			function animate() {
				// 获取上一帧到当前帧的时间差（秒）
				// 使用时间差而不是固定值，确保动画速度在不同帧率下保持一致
				frameTime = clock.getDelta();

				// ---------- 物体旋转动画 ----------
				// 立方体：绕X轴和Y轴旋转
				cube.rotation.x += 1.0 * frameTime; // 每秒旋转1弧度
				cube.rotation.y += 1.0 * frameTime;
				
				// 圆柱体：绕Y轴和Z轴旋转
				cylinder.rotation.y += 1.0 * frameTime;
				cylinder.rotation.z -= 1.0 * frameTime; // 负值表示反向旋转
				
				// 圆环体：绕X轴和Y轴旋转
				torus.rotation.x -= 1.0 * frameTime;
				torus.rotation.y -= 1.0 * frameTime;
				
				// 金字塔：绕Y轴旋转（较慢）
				pyramid.rotation.y += 0.5 * frameTime;

				// ---------- 物体水平移动动画 ----------
				// 增加水平角度
				horizontalAngle += 0.5 * frameTime; // 每秒增加0.5弧度
				// 角度归一化：如果超过2π，减去2π，防止角度无限增大
				if (horizontalAngle > TWO_PI) horizontalAngle -= TWO_PI;
				
				// 使用正弦和余弦函数创建周期性水平运动
				// Math.sin(horizontalAngle)产生-1到1之间的波动
				cube.position.x = Math.sin(horizontalAngle) * 4;      // 振幅4
				cylinder.position.x = Math.sin(horizontalAngle) * -4; // 反向运动
				torus.position.x = Math.cos(horizontalAngle) * 4;     // 使用余弦，相位偏移90度

				// ---------- 物体垂直移动动画 ----------
				// 增加垂直角度（比水平角度变化更快）
				verticalAngle += 1.5 * frameTime; // 每秒增加1.5弧度
				if (verticalAngle > TWO_PI) verticalAngle -= TWO_PI; // 角度归一化
				
				// 创建周期性垂直运动
				// 公式：振幅 * sin(角度) + 基准高度
				cube.position.y = Math.sin(verticalAngle) * 2 + 2.9;     // 振幅2，基准高度2.9
				cylinder.position.y = Math.sin(verticalAngle) * 2 + 3.1; // 振幅2，基准高度3.1
				torus.position.y = Math.cos(verticalAngle) * 2 + 3.3;    // 使用余弦，相位偏移

				// ---------- 阴影更新 ----------
				// 更新所有阴影网格，使它们跟随对应的物体
				// ShadowMesh.update()方法接收两个参数：
				// 1. 投影平面（地面平面）
				// 2. 4D光源位置（包含发散参数w）
				// 该方法根据物体的当前位置、光源位置和投影平面计算阴影形状和位置
				cubeShadow.update(groundPlane, lightPosition4D);
				cylinderShadow.update(groundPlane, lightPosition4D);
				torusShadow.update(groundPlane, lightPosition4D);
				sphereShadow.update(groundPlane, lightPosition4D);
				pyramidShadow.update(groundPlane, lightPosition4D);

				// ---------- 场景渲染 ----------
				// 使用相机渲染整个场景到画布
				renderer.render(scene, camera);
			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时调用，确保渲染正确适配新尺寸
			 */
			function onWindowResize() {
				// 更新屏幕尺寸变量为当前窗口大小
				SCREEN_WIDTH = window.innerWidth;
				SCREEN_HEIGHT = window.innerHeight;

				// 更新渲染器尺寸，填充整个窗口
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

				// 更新相机纵横比
				// 纵横比 = 宽度 / 高度，影响3D场景的透视变形
				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
				// 更新相机的投影矩阵
				// 当相机参数改变后，必须调用此方法使更改生效
				camera.updateProjectionMatrix();
			}

			/**
			 * 灯光切换按钮处理函数
			 * 在平行光和点光源之间切换
			 * 同时更新场景视觉效果以匹配当前灯光类型
			 */
			function lightButtonHandler() {
				// 切换灯光类型标志
				useDirectionalLight = !useDirectionalLight;

				// 根据当前灯光类型执行不同的设置
				if (useDirectionalLight) {
					// 切换到平行光模式（模拟白天太阳）
					
					// 1. 更新场景背景为天空蓝色
					scene.background.setHex(0x0096ff);
					
					// 2. 更新地面颜色为绿色（草地）
					groundMesh.material.color.setHex(0x008200);
					
					// 3. 重新定位平行光
					sunLight.position.set(5, 7, -1);
					sunLight.lookAt(scene.position);
					
					// 4. 更新4D光源位置
					lightPosition4D.x = sunLight.position.x;
					lightPosition4D.y = sunLight.position.y;
					lightPosition4D.z = sunLight.position.z;
					lightPosition4D.w = 0.001; // 小w值表示平行光（光线几乎不发散）
					
					// 5. 显示方向指示箭头
					arrowHelper1.visible = true;
					arrowHelper2.visible = true;
					arrowHelper3.visible = true;
					
					// 6. 隐藏点光源可视化对象
					lightSphere.visible = false;
					lightHolder.visible = false;
					
					// 7. 更新按钮文本
					document.getElementById('lightButton').value = '切换到点光源';

				} else {
					// 切换到点光源模式（模拟夜晚灯泡）
					
					// 1. 更新场景背景为黑色（夜空）
					scene.background.setHex(0x000000);
					
					// 2. 更新地面颜色为灰色（月光下的地面）
					groundMesh.material.color.setHex(0x969696);
					
					// 3. 重新定位光源（现在是点光源）
					sunLight.position.set(0, 6, -2);
					sunLight.lookAt(scene.position);
					
					// 4. 更新灯泡和灯座位置
					lightSphere.position.copy(sunLight.position);
					lightHolder.position.copy(lightSphere.position);
					lightHolder.position.y += 0.12; // 灯座在灯泡下方
					
					// 5. 更新4D光源位置
					lightPosition4D.x = sunLight.position.x;
					lightPosition4D.y = sunLight.position.y;
					lightPosition4D.z = sunLight.position.z;
					lightPosition4D.w = 0.9; // 大w值表示点光源（光线高度发散）
					
					// 6. 隐藏方向指示箭头（点光源没有单一方向）
					arrowHelper1.visible = false;
					arrowHelper2.visible = false;
					arrowHelper3.visible = false;
					
					// 7. 显示点光源可视化对象
					lightSphere.visible = true;
					lightHolder.visible = true;
					
					// 8. 更新按钮文本
					document.getElementById('lightButton').value = '切换到平行光';
				}
				
				// 注意：切换灯光类型后，阴影会自动更新
				// 因为animate()函数中每帧都会调用ShadowMesh.update()
				// 而update()方法会使用新的lightPosition4D值（包括w分量）
			}
		</script>
	</body>
</html>