<!-- Three.js CSS3D 正交投影示例 - 详细分析
一、代码整体功能概述
这是一个展示Three.js中CSS3D渲染器与正交投影相机结合使用的演示示例。代码实现了：

双渲染器混合系统：同时使用WebGL和CSS3D渲染器

正交投影显示：使用正交相机展示3D场景

交互式控制：提供鼠标交互和参数调节界面

响应式设计：自动适应不同屏幕尺寸

二、主要技术点详解
1. CSS3D渲染技术
javascript
import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
CSS3DRenderer：将HTML元素转换为3D对象的渲染器

CSS3DObject：包装HTML元素使其可以在3D场景中定位

优势：可以使用完整的HTML/CSS功能，包括文本渲染、CSS动画、SVG等

2. 正交投影相机（OrthographicCamera）
javascript
camera = new THREE.OrthographicCamera(
    frustumSize * aspect / -2,  // left
    frustumSize * aspect / 2,   // right
    frustumSize / 2,            // top
    frustumSize / -2,           // bottom
    1,                          // near
    1000                        // far
);
特点：

平行投影：物体大小不随距离变化

无透视变形：保持物体原始比例

应用场景：工程制图、2D游戏、UI界面、建筑平面图

3. 双场景架构
javascript
// WebGL场景 - 渲染线框网格
scene = new THREE.Scene();

// CSS3D场景 - 渲染HTML元素
scene2 = new THREE.Scene();
设计优势：

分离管理不同类型的对象

可以分别优化渲染策略

便于后期维护和扩展

4. 视口偏移技术（Viewport Offset）
javascript
camera.setViewOffset(fullWidth, fullHeight, offsetX, offsetY, width, height);
功能：

渲染场景的特定区域而不是整个画面

实现画中画效果

多视图渲染（如小地图、多视角显示）

5. 交互控制系统
OrbitControls：提供鼠标旋转、缩放、平移功能

lil-gui：创建参数调节面板

响应式布局：自动适应窗口大小变化

三、代码架构分析
核心模块结构：
text
1. 初始化阶段（init()）
   ├── 创建相机、场景、渲染器
   ├── 设置CSS3D和WebGL对象
   ├── 配置交互控制器
   └── 设置事件监听器

2. 动画循环（animate()）
   ├── WebGL场景渲染
   └── CSS3D场景渲染

3. 辅助功能
   ├── 窗口大小调整处理
   ├── GUI控制面板
   └── 视口偏移更新
平面创建流程：
javascript
function createPlane(width, height, cssColor, pos, rot) {
    // 1. 创建HTML元素
    // 2. 包装为CSS3DObject
    // 3. 添加到CSS3D场景
    // 4. 创建对应的WebGL线框
    // 5. 添加到WebGL场景
}
四、关键技术优势
1. CSS3D的优势
丰富的内容表现：支持HTML、CSS、SVG、Canvas等

GPU加速：利用浏览器CSS 3D变换硬件加速

样式灵活性：可以直接使用CSS样式和动画

SEO友好：HTML内容可以被搜索引擎抓取

2. 正交投影的优势
尺寸一致性：适合需要精确尺寸显示的场合

无透视变形：保持平行线始终平行

简单直观：更符合2D思维习惯

3. 混合渲染的优势
功能互补：CSS3D处理内容，WebGL处理效果

性能优化：根据不同需求选择合适的技术

开发灵活：前端开发者可以快速上手CSS3D部分

五、实际应用场景
1. 数据可视化
3D图表与数据面板结合

实时数据更新显示

交互式数据探索

2. 产品展示
3D产品配置器

多角度查看产品

参数实时调整

3. 教育应用
3D模型与文字说明结合

交互式教学工具

科学可视化

4. 建筑可视化
建筑平面图展示

室内设计预览

光照和材质模拟

六、性能考虑
1. CSS3D性能特点
优点：简单元素渲染性能好

限制：复杂3D变换性能低于WebGL

优化建议：减少DOM元素数量，避免频繁样式更新

2. 正交投影性能
相比透视投影，计算量较小

适合2D/2.5D场景

3. 混合渲染最佳实践
CSS3D：用于UI、文本、静态内容

WebGL：用于复杂几何体、粒子效果、后期处理 -->


<!DOCTYPE html>
<html>
	<head>
		<!-- 
			页面标题：显示在浏览器标签页上的文字
			CSS3D正交投影示例：展示了使用CSS3D渲染器与正交相机的结合
		-->
		<title>Three.js - CSS3D正交投影示例</title>
		
		<!-- 
			字符编码设置：指定文档使用的字符编码为UTF-8
			UTF-8支持包括中文在内的多种语言文字，确保页面能正确显示中文
		-->
		<meta charset="utf-8">
		
		<!-- 
			移动端视口配置：控制移动设备上的显示和缩放行为
			width=device-width：视口宽度等于设备宽度
			user-scalable=no：禁止用户手动缩放页面
			minimum-scale=1.0, maximum-scale=1.0：固定缩放比例为1.0
			这样的设置适合需要精确控制布局的3D应用
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			引入外部样式表：从main.css文件加载额外的样式
			type="text/css"：指定链接类型为CSS样式表
			rel="stylesheet"：定义当前文档与被链接文档的关系为样式表
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
		
		<!-- 
			内部样式：直接在HTML文档中定义的CSS样式
			这些样式会覆盖外部样式表中相同的选择器
		-->
		<style>
			/* 
				设置body元素的样式
				background-color: #f0f0f0; 设置页面背景为浅灰色
				这个颜色与Three.js场景背景色保持一致，创建无缝的视觉体验
			*/
			body {
				background-color: #f0f0f0;
			}
			
			/* 
				设置所有a标签（超链接）的样式
				color: #f00; 将链接文字颜色设置为红色
				使用十六进制颜色代码#f00，等同于rgb(255,0,0)
			*/
			a {
				color: #f00;
			}
			
			/* 
				设置ID为info的div元素的样式
				color: #000000; 将文字颜色设置为纯黑色
				确保信息文字在浅灰色背景上有良好的可读性
			*/
			#info {
				color: #000000;
			}
		</style>
	</head>
	<body>
		<!-- 
			信息显示区域：用于展示页面信息和链接
			id="info"：为这个div元素分配唯一的标识符，便于CSS和JavaScript操作
			
			内容说明：
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			创建一个指向Three.js官网的超链接
			- href属性：指定链接目标地址
			- target="_blank"：在新标签页中打开链接
			- rel="noopener"：安全特性，防止新打开的页面通过window.opener访问原页面
			
			CSS3D正交投影演示：说明当前页面功能的中文描述
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			CSS3D正交投影演示 - 展示CSS3D渲染器与正交相机的结合应用
		</div>

		<!-- 
			导入映射表（Import Map）：用于控制JavaScript模块的导入路径
			这是一个现代JavaScript特性，允许开发者自定义模块说明符到实际URL的映射
			在支持ES模块的浏览器中工作
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：包含所有Three.js应用逻辑
			type="module"：指定这是一个ES6模块，支持模块化导入导出
			模块化的代码有更好的组织和封装性
		-->
		<script type="module">

			// ============================
			// 模块导入部分
			// ============================
			
			// 导入Three.js核心库的所有功能
			// * as THREE：将three模块的所有导出内容作为一个名为THREE的对象导入
			// 这样可以通过THREE.xxx的方式访问Three.js的所有类和方法
			import * as THREE from 'three';

			// 从three.js附加组件中导入轨道控制器
			// OrbitControls：提供鼠标/触摸交互控制相机旋转、缩放和平移的功能
			// 通过鼠标拖拽可以旋转场景，滚轮可以缩放
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 从three.js附加组件中导入CSS3D相关功能
			// CSS3DRenderer：用于渲染CSS3D对象的渲染器
			// CSS3DObject：将HTML元素包装为可以在3D场景中放置的对象
			// 这些功能允许在3D场景中使用HTML/CSS元素，而不是传统的WebGL几何体
			import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
			
			// 导入lil-gui库，这是一个轻量级的图形用户界面库
			// GUI：用于创建控制面板，方便调试和参数调整
			// 本示例中用于控制相机的视口偏移参数
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// ============================
			// 全局变量声明
			// ============================
			
			// WebGL渲染相关变量
			let camera;     // 相机对象：决定场景的观察视角和投影方式
			let scene;      // 场景对象：包含所有需要渲染的3D对象（WebGL部分）
			let renderer;   // 渲染器对象：负责将3D场景渲染到2D画布上（WebGL渲染器）

			// CSS3D渲染相关变量
			let scene2;     // 第二个场景对象：专门用于CSS3D对象的场景
			let renderer2;  // CSS3D渲染器对象：负责渲染CSS3D对象

			// 正交相机视锥体大小
			// frustumSize：定义正交相机视锥体的大小，影响相机能看到多大范围的内容
			// 值越大，相机能看到的范围就越广
			const frustumSize = 500;

			// ============================
			// 主程序流程
			// ============================
			
			// 调用初始化函数：设置场景、相机、渲染器、对象等
			// 这是整个程序的起点，所有一次性设置都在这里完成
			init();
			
			// 调用动画循环函数：启动渲染循环
			// 这个函数会持续运行，不断更新和渲染场景
			animate();

			// ============================
			// 初始化函数
			// ============================
			/**
			 * 初始化Three.js应用
			 * 这个函数负责所有一次性设置工作：
			 * 1. 创建相机、场景、渲染器
			 * 2. 创建3D对象并添加到场景
			 * 3. 设置事件监听器
			 * 4. 创建控制面板
			 */
			function init() {

				// 计算窗口的宽高比
				// 宽高比是正交相机设置的重要参数，确保渲染内容不会变形
				// 公式：宽度 ÷ 高度
				const aspect = window.innerWidth / window.innerHeight;
				
				// 创建正交投影相机（OrthographicCamera）
				// 正交相机特点：物体大小不会随距离变化，保持平行投影
				// 参数说明（按顺序）：
				// 1. left: 视锥体左平面位置（以相机位置为原点）
				// 2. right: 视锥体右平面位置
				// 3. top: 视锥体上平面位置
				// 4. bottom: 视锥体下平面位置
				// 5. near: 近裁剪平面距离（比这个近的物体不渲染）
				// 6. far: 远裁剪平面距离（比这个远的物体不渲染）
				camera = new THREE.OrthographicCamera(
					frustumSize * aspect / -2,  // left: 根据宽高比和视锥体大小计算左边界
					frustumSize * aspect / 2,   // right: 右边界，与左边界对称
					frustumSize / 2,            // top: 上边界，固定值
					frustumSize / -2,           // bottom: 下边界，与上边界对称
					1,                          // near: 近平面设为1单位
					1000                        // far: 远平面设为1000单位
				);

				// 设置相机初始位置
				// 三个参数分别代表X、Y、Z坐标
				// (-200, 200, 200)将相机放在场景的斜上方，便于观察整个场景
				camera.position.set(-200, 200, 200);

				// 创建WebGL场景对象
				// 场景是所有3D对象的容器，相当于一个虚拟的3D世界
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// 使用浅灰色（#f0f0f0）与页面背景色保持一致
				scene.background = new THREE.Color(0xf0f0f0);

				// 创建CSS3D场景对象
				// 这是一个独立的场景，专门用来存放CSS3D对象
				scene2 = new THREE.Scene();

				// 创建材质对象
				// 材质决定了3D对象的外观（颜色、纹理、光照反应等）
				// MeshBasicMaterial是基础材质，不受光照影响
				const material = new THREE.MeshBasicMaterial({
					color: 0x000000,          // 颜色：黑色（十六进制表示）
					wireframe: true,          // 线框模式：只显示几何体的边，不填充面
					wireframeLinewidth: 1,    // 线框线宽：1像素
					side: THREE.DoubleSide    // 渲染面：双面都渲染（确保从任何角度都能看到）
				});

				// ============================
				// 创建四个CSS3D平面
				// ============================
				
				// 左侧平面
				// 位置：场景中心向左偏移50单位
				// 旋转：绕Y轴旋转-90度（面向右侧）
				createPlane(
					100, 100,                           // 宽度和高度：100×100单位
					'chocolate',                        // CSS颜色名称：巧克力色
					new THREE.Vector3(-50, 0, 0),       // 位置：X轴负方向50单位
					new THREE.Euler(0, -90 * THREE.MathUtils.DEG2RAD, 0) // 旋转：绕Y轴旋转-90度
				);
				
				// 前方平面（代码注释为right，实际是前方平面）
				// 位置：场景中心向前偏移50单位
				// 旋转：默认朝向（面向相机）
				createPlane(
					100, 100,                           // 宽度和高度：100×100单位
					'saddlebrown',                      // CSS颜色名称：鞍棕色
					new THREE.Vector3(0, 0, 50),        // 位置：Z轴正方向50单位
					new THREE.Euler(0, 0, 0)            // 旋转：无旋转
				);
				
				// 顶部平面
				// 位置：场景中心向上偏移50单位
				// 旋转：绕X轴旋转-90度（平放状态）
				createPlane(
					100, 100,                           // 宽度和高度：100×100单位
					'yellowgreen',                      // CSS颜色名称：黄绿色
					new THREE.Vector3(0, 50, 0),        // 位置：Y轴正方向50单位
					new THREE.Euler(-90 * THREE.MathUtils.DEG2RAD, 0, 0) // 旋转：绕X轴旋转-90度
				);
				
				// 底部平面
				// 与其他平面不同，这个平面更大（300×300单位）
				// 位置：场景中心向下偏移50单位
				// 旋转：绕X轴旋转-90度（平放状态）
				createPlane(
					300, 300,                           // 宽度和高度：300×300单位（更大）
					'seagreen',                         // CSS颜色名称：海绿色
					new THREE.Vector3(0, -50, 0),       // 位置：Y轴负方向50单位
					new THREE.Euler(-90 * THREE.MathUtils.DEG2RAD, 0, 0) // 旋转：绕X轴旋转-90度
				);

				// ============================
				// 创建WebGL渲染器
				// ============================
				
				// 创建WebGL渲染器实例
				// WebGL渲染器使用硬件加速的WebGL API来渲染3D图形
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比
				// devicePixelRatio：设备物理像素与CSS像素的比率
				// 在高DPI屏幕上（如Retina显示），这个值可能是2或3
				// 设置这个值可以确保渲染的清晰度
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个窗口大小
				// 使3D场景充满整个浏览器窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 将渲染器的canvas元素添加到页面body中
				// renderer.domElement：渲染器关联的HTMLCanvasElement
				document.body.appendChild(renderer.domElement);

				// ============================
				// 创建CSS3D渲染器
				// ============================
				
				// 创建CSS3D渲染器实例
				// CSS3D渲染器使用CSS 3D变换来渲染HTML元素
				// 与WebGL渲染器不同，它可以渲染普通的HTML/DOM元素
				renderer2 = new CSS3DRenderer();
				
				// 设置CSS3D渲染器尺寸为整个窗口大小
				renderer2.setSize(window.innerWidth, window.innerHeight);
				
				// 设置CSS3D渲染器的DOM元素样式
				// position: 'absolute'：使用绝对定位
				// top: 0：距离顶部0像素
				// 这样CSS3D渲染器会覆盖在WebGL渲染器上方
				renderer2.domElement.style.position = 'absolute';
				renderer2.domElement.style.top = 0;
				
				// 将CSS3D渲染器的DOM元素添加到页面body中
				// CSS3D渲染器的DOM元素是一个div容器，包含所有CSS3D对象
				document.body.appendChild(renderer2.domElement);

				// ============================
				// 创建交互控制器
				// ============================
				
				// 创建轨道控制器（OrbitControls）
				// 参数1：要控制的相机对象
				// 参数2：事件监听的DOM元素（这里使用CSS3D渲染器的元素）
				const controls = new OrbitControls(camera, renderer2.domElement);
				
				// 设置控制器的最小缩放限制
				// 值0.5表示最小可以缩小到原始大小的50%
				controls.minZoom = 0.5;
				
				// 设置控制器的最大缩放限制
				// 值2表示最大可以放大到原始大小的200%
				controls.maxZoom = 2;

				// ============================
				// 辅助函数定义：createPlane
				// ============================
				/**
				 * 创建平面的辅助函数
				 * 同时创建CSS3D平面和对应的WebGL线框平面
				 * 
				 * @param {number} width - 平面的宽度（单位：像素）
				 * @param {number} height - 平面的高度（单位：像素）
				 * @param {string} cssColor - CSS颜色值（名称、十六进制、RGB等）
				 * @param {THREE.Vector3} pos - 平面的3D位置坐标
				 * @param {THREE.Euler} rot - 平面的3D旋转角度
				 */
				function createPlane(width, height, cssColor, pos, rot) {

					// 第一步：创建HTML元素作为CSS3D对象的内容
					// 创建一个div元素，这个div会被转换为3D对象
					const element = document.createElement('div');
					
					// 设置div的宽度和高度
					// 注意：这里的单位是CSS像素，对应3D世界中的单位
					element.style.width = width + 'px';
					element.style.height = height + 'px';
					
					// 设置透明度为0.75（75%不透明）
					// 这样可以透过平面看到后面的内容
					element.style.opacity = 0.75;
					
					// 设置背景颜色
					// 使用传入的CSS颜色值
					element.style.background = cssColor;

					// 第二步：创建CSS3D对象
					// 将HTML元素包装为CSS3DObject，使其可以在3D场景中定位
					const object = new CSS3DObject(element);
					
					// 设置CSS3D对象的位置
					// copy()方法将pos向量的值复制到对象的位置属性
					object.position.copy(pos);
					
					// 设置CSS3D对象的旋转
					// copy()方法将rot欧拉角的值复制到对象的旋转属性
					object.rotation.copy(rot);
					
					// 将CSS3D对象添加到CSS3D场景中
					scene2.add(object);

					// 第三步：创建对应的WebGL线框平面（用于视觉参考）
					// 创建平面几何体，指定宽度和高度
					const geometry = new THREE.PlaneGeometry(width, height);
					
					// 创建网格对象，将几何体和材质结合
					// 网格（Mesh）是Three.js中最基本的3D对象类型
					const mesh = new THREE.Mesh(geometry, material);
					
					// 设置WebGL网格的位置与CSS3D对象相同
					// 确保两者在3D空间中完全重合
					mesh.position.copy(object.position);
					
					// 设置WebGL网格的旋转与CSS3D对象相同
					mesh.rotation.copy(object.rotation);
					
					// 将WebGL网格添加到WebGL场景中
					scene.add(mesh);

				}

				// ============================
				// 设置事件监听器
				// ============================
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);
				
				// 创建控制面板
				// 调用createPanel函数创建GUI控制界面
				createPanel();

			}

			// ============================
			// 窗口大小变化处理函数
			// ============================
			/**
			 * 处理浏览器窗口大小变化
			 * 当窗口大小改变时，需要重新调整相机和渲染器设置
			 * 确保3D场景正确适配新的窗口尺寸
			 */
			function onWindowResize() {

				// 重新计算窗口的宽高比
				// 窗口大小变化后，宽高比可能改变，需要重新计算
				const aspect = window.innerWidth / window.innerHeight;

				// 更新正交相机的投影参数
				// 必须根据新的宽高比重新计算视锥体的左右边界
				// 上下边界保持不变（由frustumSize决定）
				camera.left = -frustumSize * aspect / 2;    // 重新计算左边界
				camera.right = frustumSize * aspect / 2;    // 重新计算右边界
				camera.top = frustumSize / 2;               // 上边界保持不变
				camera.bottom = -frustumSize / 2;           // 下边界保持不变
				
				// 更新相机的投影矩阵
				// 修改相机参数后，必须调用此方法使更改生效
				// 投影矩阵定义了3D空间如何映射到2D屏幕
				camera.updateProjectionMatrix();

				// 更新WebGL渲染器的尺寸
				// 使渲染器canvas的大小与窗口大小一致
				renderer.setSize(window.innerWidth, window.innerHeight);

				// 更新CSS3D渲染器的尺寸
				// 使CSS3D渲染器容器的大小与窗口大小一致
				renderer2.setSize(window.innerWidth, window.innerHeight);

			}

			// ============================
			// 动画循环函数
			// ============================
			/**
			 * 主动画循环函数
			 * 这个函数会被反复调用，实现动画效果
			 * 使用requestAnimationFrame实现与浏览器刷新率同步的动画
			 * 大多数显示器刷新率为60Hz，因此这个函数每秒大约调用60次
			 */
			function animate() {

				// 请求浏览器在下次重绘之前调用animate函数
				// requestAnimationFrame是浏览器提供的高效动画API
				// 它会自动匹配显示器的刷新率，提供流畅的动画效果
				requestAnimationFrame(animate);

				// 使用WebGL渲染器渲染WebGL场景
				// 参数1：要渲染的场景对象
				// 参数2：用于渲染的相机对象
				renderer.render(scene, camera);
				
				// 使用CSS3D渲染器渲染CSS3D场景
				// 两个渲染器使用同一个相机，确保视角一致
				renderer2.render(scene2, camera);

			}

			// ============================
			// 控制面板创建函数
			// ============================
			/**
			 * 创建图形用户界面（GUI）控制面板
			 * 使用lil-gui库创建交互式控制面板
			 * 允许用户调整相机视口偏移参数
			 */
			function createPanel() {

				// 创建GUI实例
				// GUI库会创建一个可折叠的控制面板
				const panel = new GUI();
				
				// 在面板中添加一个文件夹
				// 文件夹可以组织相关控件，使界面更整洁
				// 参数'camera setViewOffset'：文件夹的显示名称
				// close()：初始状态为关闭（折叠）
				const folder1 = panel.addFolder('相机视口偏移设置').close();

				// 创建设置对象
				// 这个对象包含所有可以通过GUI控制的属性
				const settings = {
					/**
					 * 设置视口偏移
					 * 这个函数会启用所有相关控件并设置默认值
					 */
					'setViewOffset'() {
						// 启用并设置fullWidth控件
						// folder1.children[1]对应第一个添加的控件（fullWidth）
						// enable()：启用控件（从禁用状态变为可用）
						// setValue(window.innerWidth)：设置值为当前窗口宽度
						folder1.children[1].enable().setValue(window.innerWidth);
						
						// 启用并设置fullHeight控件
						folder1.children[2].enable().setValue(window.innerHeight);
						
						// 启用并设置offsetX控件
						folder1.children[3].enable().setValue(0);
						
						// 启用并设置offsetY控件
						folder1.children[4].enable().setValue(0);
						
						// 启用并设置width控件
						folder1.children[5].enable().setValue(window.innerWidth);
						
						// 启用并设置height控件
						folder1.children[6].enable().setValue(window.innerHeight);
					},
					
					// 视口设置参数
					'fullWidth': 0,      // 完整视口的宽度
					'fullHeight': 0,     // 完整视口的高度
					'offsetX': 0,        // 视口在X轴上的偏移量
					'offsetY': 0,        // 视口在Y轴上的偏移量
					'width': 0,          // 实际渲染视口的宽度
					'height': 0,         // 实际渲染视口的高度
					
					/**
					 * 清除视口偏移
					 * 这个函数会禁用所有相关控件并清除相机的视口偏移
					 */
					'clearViewOffset'() {
						// 禁用并重置fullWidth控件
						folder1.children[1].setValue(0).disable();
						
						// 禁用并重置fullHeight控件
						folder1.children[2].setValue(0).disable();
						
						// 禁用并重置offsetX控件
						folder1.children[3].setValue(0).disable();
						
						// 禁用并重置offsetY控件
						folder1.children[4].setValue(0).disable();
						
						// 禁用并重置width控件
						folder1.children[5].setValue(0).disable();
						
						// 禁用并重置height控件
						folder1.children[6].setValue(0).disable();
						
						// 清除相机的视口偏移设置
						// 恢复为默认的全屏渲染
						camera.clearViewOffset();
					}
				};

				// ============================
				// 添加GUI控件
				// ============================
				
				// 添加"设置视口偏移"按钮
				// 点击这个按钮会调用settings.setViewOffset函数
				folder1.add(settings, 'setViewOffset');
				
				// 添加"完整宽度"滑块控件
				// 参数说明：
				// 1. settings: 目标对象
				// 2. 'fullWidth': 要控制的属性名
				// 3. window.screen.width / 4: 最小值（屏幕宽度的1/4）
				// 4. window.screen.width * 2: 最大值（屏幕宽度的2倍）
				// 5. 1: 步进值（每次调整增减1）
				folder1.add(settings, 'fullWidth', window.screen.width / 4, window.screen.width * 2, 1)
					.onChange((val) => updateCameraViewOffset({ fullWidth: val }))  // 值变化时的回调函数
					.disable();  // 初始状态：禁用
				
				// 添加"完整高度"滑块控件
				folder1.add(settings, 'fullHeight', window.screen.height / 4, window.screen.height * 2, 1)
					.onChange((val) => updateCameraViewOffset({ fullHeight: val }))
					.disable();
				
				// 添加"X偏移"滑块控件
				// 范围：0到256像素
				folder1.add(settings, 'offsetX', 0, 256, 1)
					.onChange((val) => updateCameraViewOffset({ x: val }))
					.disable();
				
				// 添加"Y偏移"滑块控件
				folder1.add(settings, 'offsetY', 0, 256, 1)
					.onChange((val) => updateCameraViewOffset({ y: val }))
					.disable();
				
				// 添加"宽度"滑块控件
				folder1.add(settings, 'width', window.screen.width / 4, window.screen.width * 2, 1)
					.onChange((val) => updateCameraViewOffset({ width: val }))
					.disable();
				
				// 添加"高度"滑块控件
				folder1.add(settings, 'height', window.screen.height / 4, window.screen.height * 2, 1)
					.onChange((val) => updateCameraViewOffset({ height: val }))
					.disable();
				
				// 添加"清除视口偏移"按钮
				folder1.add(settings, 'clearViewOffset');

			}

			// ============================
			// 相机视口偏移更新函数
			// ============================
			/**
			 * 更新相机的视口偏移设置
			 * 视口偏移允许渲染场景的一部分，而不是整个场景
			 * 常用于多视图渲染、画中画等效果
			 * 
			 * @param {Object} params - 包含视口参数的对象
			 * @param {number} [params.fullWidth] - 完整视口宽度
			 * @param {number} [params.fullHeight] - 完整视口高度
			 * @param {number} [params.x] - 视口X偏移
			 * @param {number} [params.y] - 视口Y偏移
			 * @param {number} [params.width] - 视口宽度
			 * @param {number} [params.height] - 视口高度
			 */
			function updateCameraViewOffset({ fullWidth, fullHeight, x, y, width, height }) {

				// 检查相机是否已经有视口偏移设置
				// camera.view属性存储当前的视口偏移信息
				if (!camera.view) {
					// 情况1：相机还没有设置视口偏移
					// 调用setViewOffset方法创建新的视口偏移
					
					// 使用逻辑或运算符提供默认值：
					// 如果参数未提供，使用默认值
					camera.setViewOffset(
						fullWidth || window.innerWidth,      // 完整宽度：参数值或窗口宽度
						fullHeight || window.innerHeight,    // 完整高度：参数值或窗口高度
						x || 0,                             // X偏移：参数值或0
						y || 0,                             // Y偏移：参数值或0
						width || window.innerWidth,         // 视口宽度：参数值或窗口宽度
						height || window.innerHeight        // 视口高度：参数值或窗口高度
					);
				} else {
					// 情况2：相机已经有视口偏移设置
					// 更新现有的视口偏移设置
					
					// 保持原有值或使用新值：
					// 如果参数未提供，保持原有的值不变
					camera.setViewOffset(
						fullWidth || camera.view.fullWidth,      // 完整宽度：新值或原有值
						fullHeight || camera.view.fullHeight,    // 完整高度：新值或原有值
						x || camera.view.offsetX,               // X偏移：新值或原有值
						y || camera.view.offsetY,               // Y偏移：新值或原有值
						width || camera.view.width,             // 视口宽度：新值或原有值
						height || camera.view.height            // 视口高度：新值或原有值
					);
				}

			}

		</script>
	</body>
</html>