<!-- 描述一下代码功能，和主要技术点
代码功能概述
这是一个Three.js WebGPU摄像机系统对比演示，通过交互式3D场景直观展示透视摄像机和正交摄像机的区别和工作原理。

🎯 核心功能
双摄像机系统对比

左侧：活动摄像机视图（可在透视/正交摄像机间切换）

右侧：主摄像机视图（固定透视摄像机+摄像机辅助线可视化）

交互式摄像机切换

按 "O"键：切换到正交摄像机（Orthographic Camera）

按 "P"键：切换到透视摄像机（Perspective Camera）

动态场景演示

白色主球体沿复杂3D轨迹运动

绿色子球体在主球体上附加运动

蓝色小球体跟随摄像机支架移动

10,000个随机粒子作为背景填充

实时参数调整

摄像机视野角度（FOV）动态变化

摄像机远裁剪面根据物体距离自适应

摄像机自动跟踪运动球体

响应式设计

自动适应窗口大小变化

保持正确的宽高比和分屏比例

🔧 主要技术点
1. Three.js WebGPU渲染器
javascript
renderer = new THREE.WebGPURenderer( { antialias: true } );
使用下一代WebGPU API替代传统的WebGL

开启抗锯齿（antialiasing） 获得更平滑的边缘

设置设备像素比适配高DPI屏幕

2. 摄像机系统实现
透视摄像机（PerspectiveCamera）
javascript
new THREE.PerspectiveCamera(50, 0.5 * aspect, 150, 1000);
模拟人眼视觉效果：近大远小

参数：FOV视野角50°，近裁剪面150，远裁剪面1000

应用场景：3D游戏、仿真、虚拟现实

正交摄像机（OrthographicCamera）
javascript
new THREE.OrthographicCamera(left, right, top, bottom, 150, 1000);
无透视变形：物体大小不随距离变化

参数：通过left/right/top/bottom定义矩形视口

应用场景：CAD制图、2.5D游戏、UI界面

摄像机辅助线（CameraHelper）
javascript
cameraPerspectiveHelper = new THREE.CameraHelper(cameraPerspective);
可视化显示摄像机视锥体（可见范围）

帮助理解摄像机的工作原理和参数影响

3. 分屏渲染技术
javascript
// 启用裁剪测试
renderer.setScissorTest(true);

// 左侧视图
renderer.setScissor(0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT);
renderer.setViewport(0, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT);
renderer.render(scene, activeCamera);

// 右侧视图
renderer.setScissor(SCREEN_WIDTH/2, 0, SCREEN_WIDTH/2, SCREEN_HEIGHT);
renderer.render(scene, camera);
setScissorTest(true)：启用画布裁剪

setScissor() + setViewport()：定义渲染区域

单场景双摄像机渲染：同一场景用不同摄像机渲染两次

4. 场景对象层次结构
text
Scene
├── CameraRig (Group)
│   ├── CameraPerspective
│   ├── CameraOrtho
│   └── Mesh3 (蓝色小球体)
├── Mesh (白色主球体)
│   └── Mesh2 (绿色子球体)
├── Particles (粒子系统)
├── CameraPerspectiveHelper
└── CameraOrthoHelper
Group对象：将多个摄像机作为整体控制

父子关系：子球体随父球体一起运动

对象复用：同一场景供多个摄像机使用

5. 几何体与材质系统
球体几何体
javascript
new THREE.SphereGeometry(100, 16, 8)
参数：半径100，水平分段16，垂直分段8

分段数影响：值越高表面越光滑，性能消耗越大

线框材质
javascript
new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true })
MeshBasicMaterial：不受光照影响的基础材质

wireframe: true：只渲染网格线，不填充面

粒子系统
javascript
new THREE.Points(geometry, new THREE.PointsMaterial({ color: 0xffffff }))
BufferGeometry：高效存储大量顶点数据

PointsMaterial：专门用于渲染点云的材质

6. 动画与数学计算
基于时间的动画
javascript
const r = Date.now() * 0.0005;
mesh.position.x = 700 * Math.cos(r);
Date.now()：获取当前时间戳

三角函数：Math.sin()/Math.cos()创建周期性运动

参数调整：乘以系数控制动画速度

摄像机跟踪
javascript
cameraRig.lookAt(mesh.position);
lookAt()方法：自动计算朝向目标所需的旋转

自动更新：每帧重新计算，实现平滑跟踪

7. 事件处理与响应式
键盘事件
javascript
document.addEventListener('keydown', onKeyDown);
键码检测：event.keyCode（79='O', 80='P'）

即时切换：按键后立即更新活动摄像机

窗口大小调整
javascript
window.addEventListener('resize', onWindowResize);
实时更新：窗口变化时重新计算所有参数

投影矩阵更新：必须调用updateProjectionMatrix()

8. ES6模块系统
html
<script type="importmap">
<script type="module">
Import Maps：定义模块路径映射

ES6模块：支持import/export语法，避免全局污染

按需加载：只导入需要的Three.js模块

🚀 教育价值
这个演示代码是一个优秀的Three.js学习案例，涵盖了：

摄像机概念对比：直观展示透视vs正交的区别

3D编程基础：场景、摄像机、渲染器的基本架构

性能优化：分屏渲染、裁剪测试、缓冲几何体

交互设计：键盘控制、动态参数调整

数学应用：三角函数在动画中的应用

现代Web技术：WebGPU、ES6模块、响应式设计 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的文字
			three.js WebGPU版本 - 摄像机演示
		-->
		<title>three.js WebGPU - 摄像机演示</title>
		<!-- 
			字符编码设置：UTF-8确保支持中文等多语言字符
		-->
		<meta charset="utf-8">
		<!-- 
			视口设置（Viewport）：
			- 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样式表链接：
			- type="text/css": 指定MIME类型为CSS
			- rel="stylesheet": 定义当前文档与被链接文档之间的关系为样式表
			- href="example.css": 外部样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息展示区域：包含logo、标题和操作说明
			id="info": 为这个div元素设置唯一的标识符，方便CSS和JavaScript选择
		-->
		<div id="info">
			<!-- 
				three.js logo链接：
				- href: 链接到three.js官方网站
				- target="_blank": 在新标签页中打开链接
				- rel="noopener": 安全特性，防止新页面访问window.opener属性
				- class="logo-link": CSS类名，用于样式设置
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装器：包含主标题和副标题 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接：
					- 点击可跳转到three.js官网
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 副标题：显示当前演示的主题 -->
				<span>摄像机系统演示</span>
			</div>

			<!-- 
				操作说明：使用<small>标签表示次要信息
				说明如何切换摄像机类型：
				- 按"O"键：切换到正交摄像机（Orthographic Camera）
				- 按"P"键：切换到透视摄像机（Perspective Camera）
			-->
			<small>操作说明：按 "O" 键切换为正交摄像机，按 "P" 键切换为透视摄像机</small>
			<br>
			<!-- 额外说明：解释分屏显示的含义 -->
			<small style="margin-top: 20px;">左侧：当前活动摄像机视图 | 右侧：主摄像机视图（显示摄像机辅助线）</small>
		</div>

		<!-- 
			导入映射（Import Map）：
			- 现代JavaScript模块系统的配置
			- 定义模块标识符到实际文件路径的映射
			- 浏览器根据这个映射来解析模块导入语句
		-->
		<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>

		<!-- 
			主JavaScript模块：
			type="module": 表示这是一个ES6模块，支持import/export语法
			模块具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">

			// ==================== 模块导入区域 ====================
			// 导入three.js的WebGPU模块
			// * as THREE: 将模块的所有导出内容作为一个名为THREE的对象导入
			import * as THREE from 'three/webgpu';

			// ==================== 全局变量定义 ====================
			// 屏幕尺寸相关变量
			let SCREEN_WIDTH = window.innerWidth;     // 获取当前窗口的内部宽度（不包括工具栏和滚动条）
			let SCREEN_HEIGHT = window.innerHeight;   // 获取当前窗口的内部高度
			let aspect = SCREEN_WIDTH / SCREEN_HEIGHT; // 计算屏幕的宽高比（用于摄像机投影矩阵）

			// Three.js核心对象变量
			let container;           // 渲染器DOM元素的容器
			let camera, scene, renderer, mesh;  // 基础Three.js对象：
												// camera: 主摄像机（右侧视图使用）
												// scene: 3D场景，包含所有对象
												// renderer: WebGPU渲染器
												// mesh: 主要的球体网格对象

			// 摄像机系统变量
			let cameraRig;           // 摄像机支架：一个Group对象，可以同时控制多个摄像机
			let activeCamera;        // 当前活动的摄像机（左侧视图使用）
			let activeHelper;        // 当前活动摄像机的辅助线对象
			
			let cameraPerspective;   // 透视摄像机实例
			let cameraOrtho;         // 正交摄像机实例
			let cameraPerspectiveHelper; // 透视摄像机辅助线（显示视锥体）
			let cameraOrthoHelper;       // 正交摄像机辅助线（显示视锥体）
			
			const frustumSize = 600;  // 正交摄像机的视锥体尺寸（影响可见范围）

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

			/**
			 * 初始化函数 - Three.js应用的主要设置函数
			 * 功能：
			 * 1. 创建DOM容器
			 * 2. 创建3D场景和摄像机
			 * 3. 创建几何体和材质
			 * 4. 设置渲染器
			 * 5. 绑定事件监听器
			 */
			function init() {

				// ---------- 1. 创建DOM容器 ----------
				// 创建一个div元素作为Three.js渲染器的容器
				container = document.createElement( 'div' );
				// 将容器添加到body元素的末尾
				document.body.appendChild( container );

				// ---------- 2. 创建3D场景 ----------
				// Scene对象是Three.js中所有3D对象的容器
				// 类似于一个舞台，所有要渲染的对象都需要添加到scene中
				scene = new THREE.Scene();

				// ---------- 3. 创建摄像机系统 ----------

				// 3.1 创建主摄像机（用于右侧视图）
				// PerspectiveCamera参数说明：
				// 参数1: fov - 视野角度（Field of View），单位是度，这里设为50度
				// 参数2: aspect - 宽高比，0.5*aspect表示使用屏幕一半的宽度
				// 参数3: near - 近裁剪面，距离摄像机多近的物体开始被渲染
				// 参数4: far - 远裁剪面，距离摄像机多远的物体不再被渲染
				camera = new THREE.PerspectiveCamera( 50, 0.5 * aspect, 1, 10000 );
				// 设置摄像机位置：沿Z轴正方向移动2500个单位
				camera.position.z = 2500;

				// 3.2 创建透视摄像机（用于左侧视图，可以切换）
				// 这个摄像机的近裁剪面和远裁剪面不同，用于演示不同的可见范围
				cameraPerspective = new THREE.PerspectiveCamera( 50, 0.5 * aspect, 150, 1000 );

				// 3.3 创建透视摄像机辅助线
				// CameraHelper可以可视化显示摄像机的视锥体（可见范围）
				cameraPerspectiveHelper = new THREE.CameraHelper( cameraPerspective );
				// 将辅助线添加到场景中，这样它就会被渲染出来
				scene.add( cameraPerspectiveHelper );

				// 3.4 创建正交摄像机（用于左侧视图，可以切换）
				// OrthographicCamera参数说明：
				// 参数1-4: left, right, top, bottom - 定义摄像机可见的矩形区域
				// 参数5-6: near, far - 近裁剪面和远裁剪面
				cameraOrtho = new THREE.OrthographicCamera(
					0.5 * frustumSize * aspect / - 2,  // 左边界：负值表示向左延伸
					0.5 * frustumSize * aspect / 2,    // 右边界：正值表示向右延伸
					frustumSize / 2,                   // 上边界：正值表示向上延伸
					frustumSize / - 2,                 // 下边界：负值表示向下延伸
					150,                               // 近裁剪面
					1000                               // 远裁剪面
				);

				// 3.5 创建正交摄像机辅助线
				cameraOrthoHelper = new THREE.CameraHelper( cameraOrtho );
				scene.add( cameraOrthoHelper );

				// 3.6 设置默认活动摄像机
				// 程序启动时，左侧视图默认使用透视摄像机
				activeCamera = cameraPerspective;
				activeHelper = cameraPerspectiveHelper;

				// 3.7 调整摄像机方向
				// 旋转摄像机180度（π弧度），使其朝向与摄像机支架一致
				// 这是为了解决摄像机默认朝向与Group朝向不一致的问题
				cameraOrtho.rotation.y = Math.PI;         // 绕Y轴旋转180度
				cameraPerspective.rotation.y = Math.PI;   // 绕Y轴旋转180度

				// 3.8 创建摄像机支架
				// Group对象可以将多个对象作为一个整体来控制
				// 这里将两个摄像机放在同一个Group中，方便统一控制它们的位置和旋转
				cameraRig = new THREE.Group();  // 创建一个空的组对象
				cameraRig.add( cameraPerspective );  // 将透视摄像机添加到组
				cameraRig.add( cameraOrtho );        // 将正交摄像机添加到组
				scene.add( cameraRig );              // 将整个摄像机支架添加到场景

				// ---------- 4. 创建3D物体 ----------

				// 4.1 创建主球体（白色线框球体）
				// SphereGeometry参数说明：
				// 参数1: radius - 球体半径，这里为100个单位
				// 参数2: widthSegments - 水平分段数（经线数量），影响球体光滑度
				// 参数3: heightSegments - 垂直分段数（纬线数量），影响球体光滑度
				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 );  // 将球体添加到场景

				// 4.2 创建子球体（绿色线框球体）
				// 这个球体将作为主球体的子对象，随主球体一起运动
				const mesh2 = new THREE.Mesh(
					new THREE.SphereGeometry( 50, 16, 8 ),  // 半径50，比主球体小
					new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } )  // 绿色
				);
				mesh2.position.y = 150;  // 沿Y轴向上偏移150个单位
				mesh.add( mesh2 );       // 将子球体添加到主球体（不是scene），建立父子关系

				// 4.3 创建蓝色小球体（附加到摄像机支架）
				// 这个球体将跟随摄像机一起运动，帮助观察摄像机位置
				const mesh3 = new THREE.Mesh(
					new THREE.SphereGeometry( 5, 16, 8 ),   // 半径5，很小的球体
					new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } )  // 蓝色
				);
				mesh3.position.z = 150;  // 沿Z轴向前偏移150个单位
				cameraRig.add( mesh3 );  // 添加到摄像机支架，随摄像机一起运动

				// 4.4 创建随机粒子系统
				// 用于填充场景，增加视觉效果
				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参数：
				// 参数1: vertices - 顶点数据数组
				// 参数2: 3 - 每个顶点由3个值组成（x, y, z）
				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

				// 创建点云对象（粒子系统）
				const particles = new THREE.Points(
					geometry,  // 几何体
					// PointsMaterial参数：点云材质
					new THREE.PointsMaterial( { color: 0xffffff } )  // 白色粒子
				);
				scene.add( particles );  // 将粒子系统添加到场景

				// ---------- 5. 创建渲染器 ----------

				// 5.1 创建WebGPU渲染器实例
				// WebGPURenderer参数：
				// antialias: true - 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 5.2 设置渲染器参数
				renderer.setPixelRatio( window.devicePixelRatio );  // 设置设备像素比，适配高DPI屏幕
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );    // 设置渲染尺寸为全屏
				renderer.setAnimationLoop( animate );               // 设置动画循环回调函数
				
				// 5.3 将渲染器的DOM元素（canvas）添加到容器
				container.appendChild( renderer.domElement );

				// 5.4 启用裁剪测试
				// setScissorTest(true)启用裁剪，配合setScissor可以只渲染画布的特定区域
				// 这是实现分屏渲染的关键
				renderer.setScissorTest( true );
				// 设置清除颜色：黑色，完全不透明
				renderer.setClearColor( 0x000000, 1 );

				// ---------- 6. 绑定事件监听器 ----------

				// 6.1 窗口大小调整事件
				// 当浏览器窗口大小改变时，重新计算屏幕尺寸并更新摄像机
				window.addEventListener( 'resize', onWindowResize );

				// 6.2 键盘按下事件
				// 监听键盘按键，用于切换摄像机
				document.addEventListener( 'keydown', onKeyDown );

			}

			/**
			 * 键盘按下事件处理函数
			 * 功能：根据按键切换活动摄像机
			 * @param {KeyboardEvent} event - 键盘事件对象，包含按键信息
			 */
			function onKeyDown( event ) {
				// event.keyCode: 按键的键码
				// 79: 字母'O'的键码（正交摄像机 Orthographic）
				// 80: 字母'P'的键码（透视摄像机 Perspective）
				switch ( event.keyCode ) {
					case 79: // 'O'键
						// 切换为正交摄像机
						activeCamera = cameraOrtho;
						activeHelper = cameraOrthoHelper;
						break;

					case 80: // 'P'键
						// 切换为透视摄像机
						activeCamera = cameraPerspective;
						activeHelper = cameraPerspectiveHelper;
						break;
				}
			}

			/**
			 * 窗口大小调整处理函数
			 * 功能：响应窗口大小变化，重新计算和更新渲染参数
			 */
			function onWindowResize() {
				// 1. 更新屏幕尺寸变量
				SCREEN_WIDTH = window.innerWidth;
				SCREEN_HEIGHT = window.innerHeight;
				aspect = SCREEN_WIDTH / SCREEN_HEIGHT;  // 重新计算宽高比

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

				// 3. 更新主摄像机（右侧视图使用）
				camera.aspect = 0.5 * aspect;  // 宽高比设为屏幕一半（因为分屏）
				camera.updateProjectionMatrix();  // 必须调用此方法来应用新的投影矩阵

				// 4. 更新透视摄像机（左侧视图使用）
				cameraPerspective.aspect = 0.5 * aspect;
				cameraPerspective.updateProjectionMatrix();

				// 5. 更新正交摄像机（左侧视图使用）
				// 正交摄像机的左右上下边界需要根据新的宽高比重新计算
				cameraOrtho.left = - 0.5 * frustumSize * aspect / 2;   // 左边界
				cameraOrtho.right = 0.5 * frustumSize * aspect / 2;    // 右边界
				cameraOrtho.top = frustumSize / 2;                     // 上边界
				cameraOrtho.bottom = - frustumSize / 2;                // 下边界
				cameraOrtho.updateProjectionMatrix();  // 应用新的投影矩阵
			}

			/**
			 * 动画循环函数
			 * 功能：被渲染器的动画循环调用，通常每秒60次
			 * 注意：这里直接调用render()，没有使用requestAnimationFrame
			 * 因为Three.js的setAnimationLoop已经处理了动画循环
			 */
			function animate() {
				render();  // 调用渲染函数
			}

			/**
			 * 主渲染函数
			 * 功能：
			 * 1. 更新场景中物体的位置和状态
			 * 2. 更新摄像机参数
			 * 3. 执行分屏渲染
			 */
			function render() {
				// 计算基于时间的旋转参数
				// Date.now()返回当前时间戳（毫秒）
				// *0.0005使变化速度适中，可用于平滑动画
				const r = Date.now() * 0.0005;

				// ---------- 1. 更新物体位置 ----------

				// 1.1 更新主球体位置
				// 使用三角函数创建圆形运动轨迹
				// Math.cos(r)和Math.sin(r)产生-1到1之间的周期性变化
				mesh.position.x = 700 * Math.cos( r );  // X轴：700*cos(r)
				mesh.position.z = 700 * Math.sin( r );  // Z轴：700*sin(r) - 水平面圆形运动
				mesh.position.y = 700 * Math.sin( r );  // Y轴：700*sin(r) - 垂直方向正弦运动

				// 1.2 更新子球体位置（相对于主球体）
				// 2*r: 使子球体运动速度是主球体的两倍
				mesh.children[ 0 ].position.x = 70 * Math.cos( 2 * r );  // X轴
				mesh.children[ 0 ].position.z = 70 * Math.sin( r );      // Z轴

				// ---------- 2. 更新摄像机参数 ----------

				// 检查当前活动摄像机类型
				if ( activeCamera === cameraPerspective ) {
					// 当前是透视摄像机
					
					// 2.1 动态更新视野角度（FOV）
					// 35 + 30*sin(0.5*r)：FOV在5到65度之间周期性变化
					cameraPerspective.fov = 35 + 30 * Math.sin( 0.5 * r );
					
					// 2.2 更新远裁剪面
					// mesh.position.length(): 计算球体到原点的距离
					// 这样远裁剪面会随着球体距离变化，优化渲染性能
					cameraPerspective.far = mesh.position.length();
					
					// 2.3 更新投影矩阵（必须调用）
					cameraPerspective.updateProjectionMatrix();
					
					// 2.4 更新透视摄像机辅助线
					cameraPerspectiveHelper.update();
					cameraPerspectiveHelper.visible = true;  // 显示透视摄像机辅助线
					cameraOrthoHelper.visible = false;       // 隐藏正交摄像机辅助线

				} else {
					// 当前是正交摄像机
					
					// 2.5 更新正交摄像机远裁剪面
					cameraOrtho.far = mesh.position.length();
					cameraOrtho.updateProjectionMatrix();
					
					// 2.6 更新正交摄像机辅助线
					cameraOrthoHelper.update();
					cameraOrthoHelper.visible = true;        // 显示正交摄像机辅助线
					cameraPerspectiveHelper.visible = false; // 隐藏透视摄像机辅助线
				}

				// 2.7 摄像机支架看向球体
				// lookAt()方法使摄像机支架（包含两个摄像机）始终朝向球体
				// 实现摄像机跟踪效果
				cameraRig.lookAt( mesh.position );

				// ---------- 3. 分屏渲染 ----------

				// 3.1 渲染左侧视图（当前活动摄像机视图）
				activeHelper.visible = false;  // 隐藏摄像机辅助线（左侧视图不显示）
				
				// 设置清除颜色为黑色
				renderer.setClearColor( 0x000000, 1 );
				
				// 设置裁剪区域：左半屏
				// setScissor(x, y, width, height):
				// x: 0（从左侧开始）
				// y: 0（从顶部开始）
				// width: SCREEN_WIDTH/2（屏幕一半宽度）
				// height: SCREEN_HEIGHT（全高）
				renderer.setScissor( 0, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT );
				
				// 设置视口：与裁剪区域一致
				renderer.setViewport( 0, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT );
				
				// 使用活动摄像机渲染场景
				renderer.render( scene, activeCamera );

				// 3.2 渲染右侧视图（主摄像机视图 + 摄像机辅助线）
				activeHelper.visible = true;  // 显示摄像机辅助线（右侧视图显示）
				
				// 设置清除颜色为深灰色（与左侧区分）
				renderer.setClearColor( 0x111111, 1 );
				
				// 设置裁剪区域：右半屏
				// x: SCREEN_WIDTH/2（从屏幕中间开始）
				renderer.setScissor( SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT );
				
				// 设置视口：右半屏
				renderer.setViewport( SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT );
				
				// 使用主摄像机渲染场景
				renderer.render( scene, camera );
			}

		</script>

	</body>
</html>