<!-- 代码功能详细描述
🎯 核心功能概述
这是一个Three.js相机系统对比演示程序，直观展示透视相机与正交相机的视觉差异和参数特性。程序采用分屏对比方式，左侧显示可切换的相机视图，右侧显示固定的参考视图，让用户能够实时观察两种相机类型的渲染效果差异。

📊 主要技术点详解
1. 双相机系统与分屏渲染技术
javascript
// 关键技术实现：
// 创建两种不同类型的相机
cameraPerspective = new THREE.PerspectiveCamera(...);  // 透视相机
cameraOrtho = new THREE.OrthographicCamera(...);       // 正交相机

// 分屏渲染核心代码
renderer.setScissorTest(true);  // 启用裁剪测试
renderer.setScissor(0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT);  // 设置左半屏裁剪区
renderer.render(scene, activeCamera);  // 渲染左侧视图
技术要点：

透视相机(PerspectiveCamera)：模拟人眼视觉效果，具有近大远小的透视关系

正交相机(OrthographicCamera)：保持物体大小不变，常用于工程制图

裁剪测试(Scissor Test)：WebGL功能，用于限制渲染区域

多视口渲染：在同一canvas上渲染多个不同视角的场景

2. 相机参数动态调节系统
javascript
// 实时调整相机参数
if (activeCamera === cameraPerspective) {
    cameraPerspective.fov = 35 + 30 * Math.sin(0.5 * r);  // 动态视野角度
    cameraPerspective.far = mesh.position.length();       // 动态远裁剪面
    cameraPerspective.updateProjectionMatrix();           // 更新投影矩阵
}
技术特点：

基于时间的动画参数：使用Date.now()创建平滑的时间动画

投影矩阵更新机制：修改相机参数后必须调用updateProjectionMatrix()

自适应远裁剪面：根据物体距离动态调整，优化渲染性能

3. 3D场景构建与物体层级管理
javascript
// 创建物体层级结构
scene.add(mesh);                    // 主球体添加到场景
mesh.add(mesh2);                    // 子球体添加到主球体
cameraRig.add(cameraPerspective);   // 相机添加到相机组
层级结构：

text
场景(Scene)
├── 相机组(CameraRig)
│   ├── 透视相机
│   ├── 正交相机
│   └── 蓝色小球(相机位置标记)
├── 主球体(Mesh)
│   └── 绿色子球体
├── 粒子系统(Points)
├── 透视相机辅助线
└── 正交相机辅助线
4. 相机辅助可视化系统
javascript
// 创建相机辅助对象
cameraPerspectiveHelper = new THREE.CameraHelper(cameraPerspective);
cameraOrthoHelper = new THREE.CameraHelper(cameraOrtho);

// 辅助线显示/隐藏控制
activeHelper.visible = false;  // 渲染时隐藏左侧视图的辅助线
activeHelper.visible = true;   // 渲染右侧视图时显示辅助线
可视化功能：

视锥体显示：展示相机的可视范围边界

坐标轴指示：显示相机的X/Y/Z方向

动态更新：辅助线随相机参数变化实时更新

5. 动画与交互系统
javascript
// 动画循环机制
renderer.setAnimationLoop(animate);  // 设置渲染循环

// 键盘交互控制
document.addEventListener('keydown', onKeyDown);
function onKeyDown(event) {
    switch(event.keyCode) {
        case 79: activeCamera = cameraOrtho; break;        // O键
        case 80: activeCamera = cameraPerspective; break;  // P键
    }
}
动画效果：

球体复合运动：主球体螺旋运动 + 子球体椭圆运动

相机跟随系统：cameraRig.lookAt(mesh.position)实现自动跟随

参数动画：FOV、裁剪面等参数周期性变化

6. 粒子系统与性能优化
javascript
// 高效粒子系统实现
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
const particles = new THREE.Points(geometry, new THREE.PointsMaterial(...));
技术特点：

BufferGeometry优化：使用缓冲区几何体提高大量顶点的性能

随机分布算法：THREE.MathUtils.randFloatSpread()生成均匀分布

点云渲染：使用PointsMaterial渲染大量粒子

7. 响应式设计与性能监控
javascript
// 窗口大小变化响应
window.addEventListener('resize', onWindowResize);
function onWindowResize() {
    // 更新所有相机参数
    camera.aspect = 0.5 * aspect;
    cameraOrtho.left = -0.5 * frustumSize * aspect / 2;
    // ... 更新其他参数
}

// 性能监控集成
import Stats from 'three/addons/libs/stats.module.js';
stats = new Stats();
container.appendChild(stats.dom);
响应式特性：

宽高比自动调整：所有相机参数随屏幕比例自适应

像素密度适配：setPixelRatio(window.devicePixelRatio)支持高DPI屏幕

实时性能监控：集成Stats.js显示FPS、内存使用等

🚀 技术亮点总结
教育性设计：通过对比展示直观解释计算机图形学概念

实时交互性：用户可即时看到参数调整的效果

模块化架构：清晰的代码结构和分离的关注点

性能优化：使用高效的数据结构和渲染技术

可视化辅助：复杂的3D概念通过可视化工具变得易懂

生产级代码实践：包含错误处理、性能监控、响应式设计等最佳实践

📈 应用场景
计算机图形学教学：演示相机投影原理

3D开发学习：Three.js相机系统的实践案例

可视化工具开发：展示不同投影方式的适用场景

交互式演示：用于技术展示或产品演示 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js相机对比演示 -->
		<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">
		<style>
			/* 
			  内联CSS样式：
			  将<b>标签（粗体）的文字颜色设置为浅绿色
			  用于在信息提示中高亮显示快捷键字母
			*/
			b {
				color: lightgreen;
			}
		</style>
	</head>
	<body>
		<!-- 
			页面信息提示区域：
			- id="info": 用于CSS样式和JavaScript操作的标识
			- 包含Three.js官网链接和操作说明
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 相机类型对比演示<br/>
			<!-- 使用<b>标签高亮快捷键字母 -->
			<b>O</b>键切换正交相机 <b>P</b>键切换透视相机<br/>
			<!-- 添加额外的操作说明 -->
			左侧：当前激活相机视图 | 右侧：固定透视相机视图
		</div>

		<!-- 
			导入映射配置（Import Map）：
			这是现代JavaScript模块系统的配置，用于定义模块别名
			- type="importmap": 指定脚本类型为导入映射
			- 将"three"映射到Three.js模块文件路径
			- 将"three/addons/"映射到Three.js附加组件的目录
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			- type="module": 指定为ES6模块，支持import/export语法
			- 这里包含所有的Three.js代码和业务逻辑
		-->
		<script type="module">
			// ========== 导入模块 ==========
			// 导入Three.js核心库的所有功能，命名为THREE
			import * as THREE from 'three';
			// 导入性能监控器（Stats.js），用于显示FPS等性能指标
			import Stats from 'three/addons/libs/stats.module.js';

			// ========== 全局变量声明 ==========
			// 屏幕尺寸相关变量
			let SCREEN_WIDTH = window.innerWidth;   // 获取浏览器窗口的当前宽度（像素）
			let SCREEN_HEIGHT = window.innerHeight; // 获取浏览器窗口的当前高度（像素）
			let aspect = SCREEN_WIDTH / SCREEN_HEIGHT; // 计算屏幕宽高比（重要：用于相机投影矩阵）
			
			// Three.js核心对象变量
			let container;      // 页面容器div元素，用于承载Three.js渲染的canvas
			let stats;         // 性能监控器实例
			let camera;        // 主相机（用于右侧固定视图）
			let scene;         // 3D场景对象，包含所有要渲染的3D元素
			let renderer;      // WebGL渲染器，负责将3D场景渲染到canvas上
			let mesh;          // 主要的3D网格对象（白色球体）
			
			// 相机系统相关变量
			let cameraRig;        // 相机组（Group），用于同时控制多个相机
			let activeCamera;     // 当前激活的相机（用于左侧视图）
			let activeHelper;     // 当前激活相机的辅助对象
			let cameraPerspective; // 透视相机实例
			let cameraOrtho;       // 正交相机实例
			let cameraPerspectiveHelper; // 透视相机的辅助线对象
			let cameraOrthoHelper;       // 正交相机的辅助线对象
			const frustumSize = 600;     // 正交相机的视锥体大小（单位：Three.js单位）

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

			// ========== 初始化函数定义 ==========
			function init() {
				// 创建容器元素
				container = document.createElement('div');
				// 将容器添加到body元素的末尾
				document.body.appendChild(container);

				// 创建3D场景
				// Scene是Three.js中所有3D对象的容器，类似于舞台
				scene = new THREE.Scene();

				// ========== 第一部分：创建相机系统 ==========
				// 1.1 创建主相机（用于右侧固定视图）
				// PerspectiveCamera参数：
				// - 50: 视野角度（Field of View），单位是度
				// - 0.5 * aspect: 宽高比（因为右侧视图只占屏幕一半宽度）
				// - 1: 近裁剪面，距离相机1个单位以内的物体不显示
				// - 10000: 远裁剪面，距离相机10000个单位以外的物体不显示
				camera = new THREE.PerspectiveCamera(50, 0.5 * aspect, 1, 10000);
				// 设置相机位置：沿Z轴正方向移动2500个单位
				camera.position.z = 2500;

				// 1.2 创建透视相机（用于左侧切换视图）
				// 参数与主相机类似，但近远裁剪面不同
				cameraPerspective = new THREE.PerspectiveCamera(50, 0.5 * aspect, 150, 1000);
				// 创建透视相机的辅助对象
				// CameraHelper会显示相机的视锥体（可视范围）和坐标轴
				cameraPerspectiveHelper = new THREE.CameraHelper(cameraPerspective);
				// 将辅助对象添加到场景中
				scene.add(cameraPerspectiveHelper);

				// 1.3 创建正交相机（用于左侧切换视图）
				// OrthographicCamera参数：
				// - left: 左裁剪面位置（屏幕左侧边界）
				// - right: 右裁剪面位置（屏幕右侧边界）
				// - top: 上裁剪面位置（屏幕上边界）
				// - bottom: 下裁剪面位置（屏幕下边界）
				// - near: 近裁剪面
				// - far: 远裁剪面
				// 注意：正交相机没有透视效果，物体大小不随距离变化
				cameraOrtho = new THREE.OrthographicCamera(
					0.5 * frustumSize * aspect / -2,  // left: 负值表示向左延伸
					0.5 * frustumSize * aspect / 2,   // right: 正值表示向右延伸
					frustumSize / 2,                  // top: 正值表示向上延伸
					frustumSize / -2,                 // bottom: 负值表示向下延伸
					150,                              // near: 近裁剪面
					1000                              // far: 远裁剪面
				);
				// 创建正交相机的辅助对象
				cameraOrthoHelper = new THREE.CameraHelper(cameraOrtho);
				scene.add(cameraOrthoHelper);

				// 1.4 设置默认激活相机
				// 初始状态下，左侧视图使用透视相机
				activeCamera = cameraPerspective;
				activeHelper = cameraPerspectiveHelper;

				// 1.5 调整相机方向
				// 将两个相机旋转180度，使其朝向与相机组的默认朝向一致
				cameraOrtho.rotation.y = Math.PI;         // Math.PI = 180度
				cameraPerspective.rotation.y = Math.PI;

				// 1.6 创建相机组（Camera Rig）
				// Group是Three.js中的容器对象，可以包含多个其他对象
				// 将两个相机添加到同一个组中，便于统一控制
				cameraRig = new THREE.Group();
				cameraRig.add(cameraPerspective);  // 将透视相机添加到组中
				cameraRig.add(cameraOrtho);        // 将正交相机添加到组中
				scene.add(cameraRig);              // 将相机组添加到场景中

				// ========== 第二部分：创建3D物体 ==========
				// 2.1 创建主球体（白色线框球体）
				// SphereGeometry参数：
				// - 100: 球体半径
				// - 16: 宽度分段数（经线数量），影响球体平滑度
				// - 8: 高度分段数（纬线数量），影响球体平滑度
				mesh = new THREE.Mesh(
					new THREE.SphereGeometry(100, 16, 8),
					// MeshBasicMaterial：基础材质，不受光照影响
					// - color: 0xffffff 白色（十六进制RGB颜色）
					// - wireframe: true 显示为线框模式
					new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true })
				);
				scene.add(mesh);  // 将球体添加到场景

				// 2.2 创建子球体1（绿色线框球体）
				// 这个球体将作为主球体的子对象，会跟随主球体运动
				const mesh2 = new THREE.Mesh(
					new THREE.SphereGeometry(50, 16, 8),  // 半径50，比主球体小
					new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }) // 绿色
				);
				mesh2.position.y = 150;  // 在主球体上方150个单位
				mesh.add(mesh2);         // 添加到主球体作为子对象

				// 2.3 创建子球体2（蓝色线框球体）
				// 这个球体添加到相机组上，用于可视化相机位置
				const mesh3 = new THREE.Mesh(
					new THREE.SphereGeometry(5, 16, 8),  // 半径5，非常小的球体
					new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true }) // 蓝色
				);
				mesh3.position.z = 150;  // 在相机组前方150个单位
				cameraRig.add(mesh3);    // 添加到相机组

				// ========== 第三部分：创建粒子系统 ==========
				// 粒子系统用于创建大量小点，作为场景的背景星空效果
				const geometry = new THREE.BufferGeometry();  // 缓冲区几何体
				const vertices = [];  // 顶点数组，存储每个粒子的位置
				
				// 生成10000个随机位置的粒子
				for (let i = 0; i < 10000; i++) {
					// THREE.MathUtils.randFloatSpread(2000):
					// 生成-1000到1000之间的随机浮点数
					vertices.push(THREE.MathUtils.randFloatSpread(2000)); // x坐标
					vertices.push(THREE.MathUtils.randFloatSpread(2000)); // y坐标
					vertices.push(THREE.MathUtils.randFloatSpread(2000)); // z坐标
				}
				
				// 设置几何体的位置属性
				// Float32BufferAttribute: 32位浮点数缓冲区属性
				// - vertices: 顶点数据数组
				// - 3: 每个顶点有3个分量（x, y, z）
				geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
				
				// 创建点云对象
				// Points: Three.js中的点云对象
				// PointsMaterial: 点云材质
				// - color: 0x888888 灰色
				const particles = new THREE.Points(geometry, new THREE.PointsMaterial({ color: 0x888888 }));
				scene.add(particles);  // 将粒子系统添加到场景

				// ========== 第四部分：创建渲染器 ==========
				// 4.1 创建WebGL渲染器
				// WebGLRenderer参数：
				// - antialias: true 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer({ antialias: true });
				
				// 4.2 设置渲染器参数
				renderer.setPixelRatio(window.devicePixelRatio);  // 适配高DPI屏幕
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);    // 设置渲染器尺寸为全屏
				renderer.setAnimationLoop(animate);               // 设置动画循环回调函数
				container.appendChild(renderer.domElement);       // 将canvas添加到容器
				
				// 4.3 开启裁剪测试
				// 用于实现分屏渲染效果
				renderer.setScissorTest(true);

				// ========== 第五部分：性能监控器 ==========
				// 创建Stats.js实例，用于监控FPS、渲染时间等性能指标
				stats = new Stats();
				container.appendChild(stats.dom);  // 将监控器UI添加到容器

				// ========== 第六部分：事件监听器 ==========
				// 6.1 窗口大小变化事件
				// 当浏览器窗口大小改变时，重新调整Three.js渲染器
				window.addEventListener('resize', onWindowResize);
				
				// 6.2 键盘按下事件
				// 监听键盘按键，用于切换相机类型
				document.addEventListener('keydown', onKeyDown);
			}

			// ========== 键盘事件处理函数 ==========
			function onKeyDown(event) {
				// event.keyCode: 按键的ASCII码
				switch (event.keyCode) {
					case 79: // 'O'键的ASCII码（大写O）
						// 切换到正交相机
						activeCamera = cameraOrtho;        // 设置激活相机为正交相机
						activeHelper = cameraOrthoHelper;  // 设置激活辅助对象为正交相机辅助对象
						break;

					case 80: // 'P'键的ASCII码（大写P）
						// 切换到透视相机
						activeCamera = cameraPerspective;        // 设置激活相机为透视相机
						activeHelper = cameraPerspectiveHelper;  // 设置激活辅助对象为透视相机辅助对象
						break;
				}
			}

			// ========== 窗口大小变化处理函数 ==========
			function onWindowResize() {
				// 更新屏幕尺寸变量
				SCREEN_WIDTH = window.innerWidth;
				SCREEN_HEIGHT = window.innerHeight;
				aspect = SCREEN_WIDTH / SCREEN_HEIGHT;

				// 更新渲染器尺寸
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

				// 更新主相机（右侧视图）的宽高比
				camera.aspect = 0.5 * aspect;  // 0.5是因为右侧视图只占一半宽度
				camera.updateProjectionMatrix();  // 必须调用此方法使更改生效

				// 更新透视相机（左侧视图）的宽高比
				cameraPerspective.aspect = 0.5 * aspect;
				cameraPerspective.updateProjectionMatrix();

				// 更新正交相机的参数
				// 当屏幕宽高比变化时，需要调整正交相机的左右边界
				cameraOrtho.left = -0.5 * frustumSize * aspect / 2;
				cameraOrtho.right = 0.5 * frustumSize * aspect / 2;
				cameraOrtho.top = frustumSize / 2;
				cameraOrtho.bottom = -frustumSize / 2;
				cameraOrtho.updateProjectionMatrix();
			}

			// ========== 动画循环函数 ==========
			function animate() {
				render();       // 渲染一帧画面
				stats.update(); // 更新性能监控器显示
			}

			// ========== 渲染函数 ==========
			function render() {
				// 基于时间的动画参数
				// Date.now(): 返回当前时间戳（毫秒）
				// 0.0005: 控制动画速度的系数
				const r = Date.now() * 0.0005;

				// ========== 动画更新部分 ==========
				// 1. 更新主球体位置
				// 使球体在3D空间中沿圆形/螺旋路径运动
				mesh.position.x = 700 * Math.cos(r);   // X轴：余弦运动
				mesh.position.z = 700 * Math.sin(r);   // Z轴：正弦运动
				mesh.position.y = 700 * Math.sin(r);   // Y轴：正弦运动，形成上下起伏

				// 2. 更新子球体1位置
				// mesh.children[0] 指的是mesh的第一个子对象（绿色球体）
				// 使用不同的参数创建更复杂的运动路径
				mesh.children[0].position.x = 70 * Math.cos(2 * r);  // 频率加倍
				mesh.children[0].position.z = 70 * Math.sin(r);      // 频率不变

				// ========== 相机参数更新部分 ==========
				if (activeCamera === cameraPerspective) {
					// 当前激活的是透视相机
					// 动态调整透视相机的参数
					
					// 视野角度动画：在35°到65°之间正弦变化
					// Math.sin(0.5 * r): 正弦波，0.5控制变化频率
					// 35 + 30 * ...: 在35°基础上加减30°
					cameraPerspective.fov = 35 + 30 * Math.sin(0.5 * r);
					
					// 远裁剪面动画：等于球体到原点的距离
					// mesh.position.length(): 计算球体位置向量的长度（距离）
					cameraPerspective.far = mesh.position.length();
					
					// 更新投影矩阵（必须调用）
					cameraPerspective.updateProjectionMatrix();

					// 更新并显示透视相机的辅助对象
					cameraPerspectiveHelper.update();       // 更新辅助线
					cameraPerspectiveHelper.visible = true; // 显示透视相机辅助线
					cameraOrthoHelper.visible = false;      // 隐藏正交相机辅助线

				} else {
					// 当前激活的是正交相机
					
					// 正交相机只更新远裁剪面
					cameraOrtho.far = mesh.position.length();
					cameraOrtho.updateProjectionMatrix();

					// 更新并显示正交相机的辅助对象
					cameraOrthoHelper.update();       // 更新辅助线
					cameraOrthoHelper.visible = true; // 显示正交相机辅助线
					cameraPerspectiveHelper.visible = false; // 隐藏透视相机辅助线
				}

				// ========== 相机组控制部分 ==========
				// 使相机组始终看向主球体的位置
				// lookAt(): Three.js中使对象朝向指定点的方法
				cameraRig.lookAt(mesh.position);

				// ========== 渲染左侧视图（激活相机视图） ==========
				// 左侧视图：显示当前激活的相机看到的内容
				
				// 步骤1：隐藏相机辅助线（左侧视图不显示辅助线）
				activeHelper.visible = false;
				
				// 步骤2：设置清除颜色为纯黑色
				// setClearColor(颜色, 透明度)
				renderer.setClearColor(0x000000, 1);
				
				// 步骤3：设置裁剪区域（Scissor）
				// setScissor(x, y, width, height)
				// - x: 裁剪区域左上角X坐标（0表示最左侧）
				// - y: 裁剪区域左上角Y坐标（0表示最顶部）
				// - width: 裁剪区域宽度（屏幕宽度的一半）
				// - height: 裁剪区域高度（屏幕高度）
				renderer.setScissor(0, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT);
				
				// 步骤4：设置视口（Viewport）
				// setViewport(x, y, width, height)
				// 参数含义与setScissor相同
				// 注意：视口和裁剪区域通常设置相同的值
				renderer.setViewport(0, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT);
				
				// 步骤5：渲染场景
				// render(场景, 相机)
				renderer.render(scene, activeCamera);

				// ========== 渲染右侧视图（固定相机视图） ==========
				// 右侧视图：显示固定的透视相机看到的内容
				// 用于与左侧视图对比
				
				// 步骤1：显示相机辅助线
				activeHelper.visible = true;
				
				// 步骤2：设置清除颜色为深灰色
				// 0x111111 是比纯黑色稍亮的灰色，便于区分左右视图
				renderer.setClearColor(0x111111, 1);
				
				// 步骤3：设置裁剪区域（屏幕右半部分）
				// x坐标从屏幕宽度的一半开始
				renderer.setScissor(SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT);
				
				// 步骤4：设置视口（屏幕右半部分）
				renderer.setViewport(SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT);
				
				// 步骤5：渲染场景（使用固定的主相机）
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>