<!-- Three.js 对数深度缓冲区对比演示 - 代码功能与技术点详解
🎯 核心功能概述
这是一个交互式可视化对比演示，展示传统深度缓冲区与对数深度缓冲区在极端尺度范围下的表现差异。通过并排显示两个完全相同的3D场景（左侧使用传统深度缓冲区，右侧使用对数深度缓冲区），用户可以直观观察到：

从微观到宇宙尺度的完整范围：场景包含从1微米到1000光年的15个不同尺度物体

深度精度对比：展示传统线性深度缓冲区在极端尺度下的精度不足问题

交互式探索：用户可以自由缩放、旋转视角，观察不同距离下的渲染效果

📊 功能模块详解
1. 双视图对比系统
左侧视图：使用传统的线性深度缓冲区

右侧视图：启用对数深度缓冲区 (logarithmicDepthBuffer: true)

可调分隔线：用户可以拖拽中间分隔线调整左右视图的比例

2. 多尺度场景构建
javascript
const labeldata = [
    { size: .01, scale: 0.0001, label: '微观尺度 (1微米)' },
    { size: 1, scale: 1.0, label: '人体尺度 (1米)' },
    { size: 1e19, scale: 1.0, label: '极大尺度 (1000光年)' }
    // ... 共15个尺度级别
];
尺度范围：跨越36个数量级（1e-6到1e30）

视觉表示：每个尺度包含一个3D文本标签和一个对应大小的球体

空间排列：物体沿Z轴排列，越大越远

3. 交互控制系统
轨道控制：鼠标移动控制相机环绕场景

指数缩放：鼠标滚轮控制缩放，使用指数函数实现平滑缩放

阻尼效果：缩放速度自动衰减，提供自然的交互感受

4. 性能监控
集成Stats.js显示实时帧率(FPS)

监测渲染性能，确保流畅体验

🔧 主要技术点分析
1. 深度缓冲区技术对比
传统线性深度缓冲区 (左侧)
javascript
// 线性深度计算
depth_linear = (z - near) / (far - near)
问题：在极端near/far比例下，深度值分布极不均匀

现象：远处物体出现Z-fighting（深度冲突）

精度分布：近处物体精度高，远处物体精度极低

对数深度缓冲区 (右侧)
javascript
// 对数深度计算
depth_log = log(z) / log(far) * 2.0 - 1.0
优势：在整个深度范围内提供更均匀的精度分布

原理：使用对数函数压缩深度值的动态范围

适用场景：天文模拟、大规模地形、GIS系统等需要极大视距的应用

2. 相机与渲染器配置
相机参数
javascript
const camera = new THREE.PerspectiveCamera(50, aspect, 1e-6, 1e27);
视野：50度（适中的视角）

近平面：1e-6米（1微米）

远平面：1e27米（约1000亿光年）

极端比例：far/near = 10³³，远超传统深度缓冲区的处理能力

渲染器配置
javascript
// 传统深度缓冲区
const rendererNormal = new THREE.WebGLRenderer({ 
    antialias: true, 
    logarithmicDepthBuffer: false 
});

// 对数深度缓冲区  
const rendererLog = new THREE.WebGLRenderer({ 
    antialias: true, 
    logarithmicDepthBuffer: true  // 关键区别！
});
3. 分屏渲染技术
单相机双视口方案
javascript
// 左侧相机渲染左半屏
cameraNormal.setViewOffset(
    SCREEN_WIDTH, SCREEN_HEIGHT,    // 全屏尺寸
    0, 0,                           // 视口起点
    SCREEN_WIDTH * split, SCREEN_HEIGHT  // 视口大小
);

// 右侧相机渲染右半屏
cameraLog.setViewOffset(
    SCREEN_WIDTH, SCREEN_HEIGHT,
    SCREEN_WIDTH * split, 0,        // 从分隔线开始
    SCREEN_WIDTH * (1-split), SCREEN_HEIGHT
);
技术优势
性能优化：只需渲染一次场景，两个相机共享相同的场景数据

同步保证：两个视图完全同步，确保对比的公平性

内存效率：复用几何体和材质，减少GPU内存占用

4. 数学与物理模拟
指数缩放系统
javascript
// 使用自然指数函数实现平滑缩放
const zoom = Math.pow(Math.E, zoompos);
zoompos = Math.log(zoom);
对数尺度：缩放位置zoompos使用对数尺度存储

指数映射：通过指数函数转换为线性缩放值

物理对应：模拟人眼对距离的感知（韦伯-费希纳定律）

球面相机控制
javascript
// 将2D鼠标坐标映射到3D球面
position.x = Math.sin(horizontalAngle) * radius;
position.y = Math.sin(verticalAngle) * radius;  
position.z = Math.cos(horizontalAngle) * radius;
经度控制：鼠标X坐标控制水平旋转

纬度控制：鼠标Y坐标控制垂直旋转

半径控制：缩放值控制相机距离

5. 性能优化技术
几何体复用
javascript
// 所有球体共享同一个基础几何体
const baseSphere = new THREE.SphereGeometry(0.5, 24, 12);
// 通过缩放创建不同大小的球体
sphere.scale.multiplyScalar(scale);
实例化渲染准备
虽然未使用InstancedMesh，但代码结构便于扩展

分组管理：每个尺度的文本和球体放在同一Group中

响应式设计
javascript
// 自动适应窗口大小变化
function onWindowResize() {
    updateRendererSizes();
}
6. 视觉设计要点
颜色编码
javascript
// 使用HSL颜色模式，随机色相，固定饱和度和亮度
material.color.setHSL(Math.random(), 0.5, 0.5);
区分性：不同尺度使用不同颜色，便于视觉区分

一致性：相同尺度的文本和球体使用相同颜色

美观性：固定饱和度和亮度确保颜色和谐

层级排列
Z轴排列：物体按大小沿Z轴负方向排列

标签定位：文本位于球体上方，避免遮挡

大小对应：球体大小精确对应标签描述的尺度

🚀 技术难点与解决方案
难点1：极端尺度下的数值精度问题
问题：JavaScript的浮点数精度限制（双精度约15位有效数字）

解决方案：使用对数深度缓冲区，减少深度值的动态范围

难点2：文本几何体在极小尺寸下的三角化失败
问题：Three.js的TextGeometry在尺寸<0.01时可能生成无效几何体

解决方案：使用scale参数放大生成，再缩小显示

javascript
{ size: .01, scale: 0.0001, label: '微观尺度 (1微米)' }
// 实际：按0.01大小生成，再缩小10000倍显示
难点3：平滑的指数缩放控制
问题：线性缩放无法覆盖36个数量级的范围

解决方案：指数缩放 + 阻尼系统，实现自然的速度衰减

📈 实际应用场景
1. 科学可视化
天文模拟：从行星到星系尺度

微观科学：从原子到细胞尺度

地理信息系统：从街道到全球尺度

2. 游戏开发
太空探索游戏：无缝缩放从飞船到星系

大型开放世界：无加载屏的远距离渲染

3. 工程仿真
CAD/CAM系统：从零件细节到整体装配

建筑可视化：从建筑材料到城市全景

🎨 用户体验设计
直观的对比界面
明确标识：清晰的标题说明左右视图的区别

实时反馈：相机移动和缩放立即反映在两个视图中

可控比例：用户可以自由调整对比视图的大小

自然的交互模式
熟悉的控制：鼠标拖拽旋转、滚轮缩放，符合用户习惯

渐进式学习：简单操作即可看到明显的对比效果

探索激励：鼓励用户探索不同尺度下的深度精度差异

🔍 观察要点
使用本演示时，建议关注：

缩放过程中的深度精度变化

远处物体的渲染稳定性（是否有闪烁或Z-fighting）

近处物体的细节保持（是否因深度压缩而丢失细节）

缩放平滑性（指数缩放是否提供自然的距离感） -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js WebGL相机示例 - 对数深度缓冲区对比演示 -->
		<title>Three.js WebGL相机 - 对数深度缓冲区对比演示</title>
		<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样式文件（main.css可能包含一些基础样式） -->
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			/* 
				禁止页面默认的触摸操作（如滚动、缩放）
				这是为了确保鼠标滚轮缩放功能不受干扰
			*/
			body{
				touch-action: none;
			}
			
			/* 
				渲染器标签样式：用于显示"普通深度缓冲区"和"对数深度缓冲区"的文本标签
				position: absolute - 绝对定位，相对于父容器
				bottom: 1em - 距离底部1个字体高度
				width: 100% - 宽度占满父容器
				color: white - 白色文字
				z-index: 10 - 确保标签显示在3D场景之上
				display: block - 块级元素
				text-align: center - 文字居中
			*/
			.renderer_label {
				position: absolute;
				bottom: 1em;
				width: 100%;
				color: white;
				z-index: 10;
				display: block;
				text-align: center;
			}

			/* 
				主容器样式：使用Flexbox布局
				display: flex - 启用Flex布局，子元素并排显示
				两个渲染器视图将水平排列
			*/
			#container {
				display: flex;
			}

			/* 
				左侧容器（普通深度缓冲区渲染器）样式：
				width: 50% - 初始宽度为50%
				display: inline-block - 行内块元素，允许并排显示
				position: relative - 相对定位，为内部绝对定位元素提供参考
			*/
			#container_normal {
				width: 50%;
				display: inline-block;
				position: relative;
			}

			/* 
				右侧容器（对数深度缓冲区渲染器）样式：
				与左侧容器相同，但会显示对数深度缓冲区的效果
			*/
			#container_logzbuf {
				width: 50%;
				display: inline-block;
				position: relative;
			}

			/* 
				可拖拽分隔线样式：
				position: absolute - 绝对定位，相对于#container
				top: 0 - 顶部对齐
				left: 25% - 初始位置在25%处（左侧占25%，右侧占75%）
				bottom: 0 - 底部对齐
				width: 2px - 分隔线宽度2像素
				z-index: 10 - 确保分隔线显示在3D场景之上
				opacity: .8 - 80%不透明度，半透明效果
				background: #ccc - 背景色为浅灰色
				border: 1px inset #ccc - 内嵌边框样式，增强立体感
				cursor: col-resize - 鼠标悬停时显示列调整大小的光标
			*/
			#renderer_border {
				position: absolute;
				top: 0;
				left: 25%;
				bottom: 0;
				width: 2px;
				z-index: 10;
				opacity: .8;
				background: #ccc;
				border: 1px inset #ccc;
				cursor: col-resize;
			}
		</style>
	</head>
	<body>
		<!-- 
			主容器：包含两个渲染器视图和分隔线
			这个div是页面布局的核心结构
		-->
		<div id="container">
			<!-- 左侧容器：普通深度缓冲区渲染器视图 -->
			<div id="container_normal">
				<!-- 渲染器标签：描述当前渲染器类型 -->
				<h2 class="renderer_label">普通深度缓冲区</h2>
			</div>
			<!-- 右侧容器：对数深度缓冲区渲染器视图 -->
			<div id="container_logzbuf">
				<!-- 渲染器标签：描述当前渲染器类型 -->
				<h2 class="renderer_label">对数深度缓冲区</h2>
			</div>
			<!-- 可拖拽的分隔线：用于调整两个渲染器视图的大小比例 -->
			<div id="renderer_border"></div>
		</div>

		<!-- 
			页面信息栏：显示Three.js链接和操作说明
			id="info" - 用于CSS样式选择和JavaScript操作
		-->
		<div id="info">
			<!-- Three.js官方链接，target="_blank"在新标签页打开，rel="noopener"增强安全性 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 相机系统 - 对数深度缓冲区对比演示<br/>
			<!-- 用户操作提示 -->
			鼠标拖拽旋转视角，滚轮缩放，拖动中间分隔线调整视图比例
		</div>

		<!-- 
			导入映射表 (Import Map)：
			现代JavaScript模块系统的配置，告诉浏览器如何解析模块导入
			type="importmap" - 指定这是一个导入映射表
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript代码：使用ES6模块语法
			type="module" - 表示这是一个JavaScript模块
		-->
		<script type="module">
			// ==================== 模块导入区域 ====================
			// 导入Three.js核心模块的所有功能
			// * as THREE - 将所有导出内容作为一个名为THREE的对象导入
			import * as THREE from 'three';

			// 从Three.js附加组件中导入字体加载器
			// FontLoader: 用于加载和解析字体文件
			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
			
			// 从Three.js附加组件中导入文本几何体生成器
			// TextGeometry: 用于将文本转换为3D几何体
			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';

			// 导入性能监视器
			// Stats: 显示帧率、渲染时间等性能指标的小工具
			import Stats from 'three/addons/libs/stats.module.js';

			// ==================== 全局变量定义 ====================
			/*
			   场景范围常量：定义相机的近平面和远平面距离
			   
			   NEAR: 近平面距离，设置为1e-6（0.000001米，即1微米）
			   表示相机能看到的最小距离，任何比这个近的物体都不会被渲染
			   
			   FAR: 远平面距离，设置为1e27（1,000,000,000,000,000,000,000,000米，约1000亿光年）
			   表示相机能看到的最近距离，任何比这个远的物体都不会被渲染
			   
			   这种极端范围是为了演示传统深度缓冲区的精度问题
			   和对数深度缓冲区的解决方案
			*/
			const NEAR = 1e-6, FAR = 1e27;
			
			/*
			   屏幕尺寸变量：
			   初始设置为当前浏览器窗口的尺寸
			   这些值会在窗口大小改变时更新
			*/
			let SCREEN_WIDTH = window.innerWidth;   // 屏幕宽度（像素）
			let SCREEN_HEIGHT = window.innerHeight; // 屏幕高度（像素）
			
			/*
			   屏幕分割比例变量：
			   screensplit: 左侧渲染器占用的宽度比例（0.0到1.0之间）
			   screensplit_right: 右侧渲染器占用的宽度比例（自动计算为1-screensplit）
			   
			   初始设置为0.25，表示左侧占25%，右侧占75%
			   这个比例可以通过拖拽分隔线来改变
			*/
			let screensplit = .25, screensplit_right = 0;
			
			/*
			   鼠标位置跟踪数组：
			   使用归一化坐标系统（0.0到1.0之间）
			   mouse[0]: X轴位置，0.0表示最左侧，1.0表示最右侧
			   mouse[1]: Y轴位置，0.0表示最顶部，1.0表示最底部
			   
			   初始设置为[0.5, 0.5]，即屏幕中心位置
			*/
			const mouse = [ .5, .5 ];
			
			/*
			   相机缩放相关变量：
			   zoompos: 缩放位置的指数值（对数尺度）
			            用于实现指数缩放效果，值越小相机越近，值越大相机越远
			            
			   minzoomspeed: 最小缩放速度，初始为0.015
			                 用户开始缩放后会变得更小，提供更精细的控制
			                 
			   zoomspeed: 当前缩放速度，初始等于minzoomspeed
			              正值表示放大（远离），负值表示缩小（靠近）
			              每帧会应用阻尼效果逐渐减慢
			*/
			let zoompos = - 100;           // 缩放位置（指数值）
			let minzoomspeed = .015;       // 最小缩放速度
			let zoomspeed = minzoomspeed;  // 当前缩放速度

			/*
			   全局对象引用：
			   container: 主容器DOM元素的引用
			   border: 可拖拽分隔线DOM元素的引用
			   stats: 性能监视器实例的引用
			   
			   objects: 对象容器，用于存储两个渲染视图的相关对象
			            包含normal和logzbuf两个属性，分别对应普通和对数深度缓冲区视图
			*/
			let container, border, stats;
			const objects = {};  // 存储渲染器、相机、场景等对象的容器

			/*
			   标签数据数组：定义不同尺度的物体及其视觉表示
			   每个对象包含以下属性：
			   - size: 物体的实际大小（单位：米）
			   - scale: 显示缩放比例（用于调整文本大小）
			   - label: 描述性标签文本
			   
			   这个数组涵盖了从微观尺度（1微米）到宇宙尺度（1000光年）的范围
			   用于演示深度缓冲区在不同尺度下的表现
			*/
			const labeldata = [
				// 微观尺度：1微米（百万分之一米）
				// scale设置为0.0001是因为文本几何体在极小的尺寸下三角化会失败
				{ size: .01, scale: 0.0001, label: '微观尺度 (1微米)' },
				
				// 微小尺度：1毫米（千分之一米）
				{ size: .01, scale: 0.1, label: '微小尺度 (1毫米)' },
				
				// 小尺度：1厘米（百分之一米）
				{ size: .01, scale: 1.0, label: '小尺度 (1厘米)' },
				
				// 人类尺度：1米（标准长度单位）
				{ size: 1, scale: 1.0, label: '人体尺度 (1米)' },
				
				// 树木尺度：10米（典型树木高度）
				{ size: 10, scale: 1.0, label: '树木尺度 (10米)' },
				
				// 建筑尺度：100米（高层建筑高度）
				{ size: 100, scale: 1.0, label: '建筑尺度 (100米)' },
				
				// 中等尺度：1公里（千米）
				{ size: 1000, scale: 1.0, label: '中等尺度 (1公里)' },
				
				// 城市尺度：10公里（典型城市直径）
				{ size: 10000, scale: 1.0, label: '城市尺度 (10公里)' },
				
				// 月球尺度：3,400公里（月球直径）
				{ size: 3400000, scale: 1.0, label: '月球尺度 (3,400公里)' },
				
				// 行星尺度：12,000公里（地球直径）
				{ size: 12000000, scale: 1.0, label: '行星尺度 (12,000公里)' },
				
				// 恒星尺度：1,400,000公里（太阳直径）
				{ size: 1400000000, scale: 1.0, label: '太阳尺度 (1,400,000公里)' },
				
				// 太阳系尺度：50天文单位（冥王星轨道半径）
				// 1天文单位≈1.5亿公里，50AU≈75亿公里
				{ size: 7.47e12, scale: 1.0, label: '太阳系尺度 (50天文单位)' },
				
				// 巨大尺度：1光年（光在真空中一年行走的距离）
				// 1光年≈9.46万亿公里
				{ size: 9.4605284e15, scale: 1.0, label: '巨大尺度 (1光年)' },
				
				// 超大尺度：1秒差距（天文学距离单位）
				// 1秒差距≈3.26光年≈30.86万亿公里
				{ size: 3.08567758e16, scale: 1.0, label: '超大尺度 (1秒差距)' },
				
				// 极大尺度：1000光年（银河系局部区域的尺度）
				{ size: 1e19, scale: 1.0, label: '极大尺度 (1000光年)' }
			];

			// ==================== 初始化函数调用 ====================
			// 调用初始化函数，启动整个应用
			init();

			/**
			 * 主初始化函数 - 整个应用的入口点
			 * 负责设置DOM元素、加载资源、创建场景和渲染器
			 */
			function init() {
				// 获取主容器DOM元素
				// 这个容器包含了两个渲染视图和分隔线
				container = document.getElementById( 'container' );

				// 创建字体加载器实例
				// FontLoader是Three.js提供的用于加载字体文件的工具
				const loader = new FontLoader();
				
				// 加载字体文件
				// 参数：字体文件的URL路径
				// 回调函数：字体加载完成后的处理函数
				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
					// 字体加载成功后，使用该字体初始化场景
					// initScene函数创建包含所有尺度标签的3D场景
					const scene = initScene( font );

					// 初始化两个渲染视图进行对比：
					// 1. 普通深度缓冲区视图 (logarithmicDepthBuffer: false)
					// 2. 对数深度缓冲区视图 (logarithmicDepthBuffer: true)
					objects.normal = initView( scene, 'normal', false );
					objects.logzbuf = initView( scene, 'logzbuf', true );

					// 启动动画循环
					// animate函数会递归调用requestAnimationFrame，实现平滑动画
					animate();
				} );

				// 创建性能监视器实例
				// Stats用于显示帧率(FPS)、渲染时间等性能指标
				stats = new Stats();
				
				// 将性能监视器的DOM元素添加到主容器中
				// stats.dom是性能监视器的HTML元素
				container.appendChild( stats.dom );

				// 获取可拖拽分隔线DOM元素
				border = document.getElementById( 'renderer_border' );
				
				// 为分隔线添加鼠标按下事件监听器
				// 当用户点击分隔线时，开始拖拽调整操作
				border.addEventListener( 'pointerdown', onBorderPointerDown );

				// 添加全局事件监听器：

				// 1. 鼠标移动事件 - 用于控制相机旋转
				// 鼠标在屏幕上移动时，更新相机视角
				window.addEventListener( 'mousemove', onMouseMove );
				
				// 2. 窗口大小改变事件 - 用于响应式布局
				// 浏览器窗口大小改变时，重新调整渲染器尺寸
				window.addEventListener( 'resize', onWindowResize );
				
				// 3. 鼠标滚轮事件 - 用于控制相机缩放
				// 用户滚动鼠标滚轮时，放大或缩小视图
				window.addEventListener( 'wheel', onMouseWheel );
			}

			/**
			 * 初始化单个渲染视图
			 * 创建相机、渲染器，并将它们组织在一起
			 * 
			 * @param {THREE.Scene} scene - 要渲染的3D场景
			 * @param {string} name - 视图标识名称 ('normal' 或 'logzbuf')
			 * @param {boolean} logDepthBuf - 是否启用对数深度缓冲区
			 * @returns {Object} 包含该视图所有相关对象的集合
			 */
			function initView( scene, name, logDepthBuf ) {
				// 获取该视图对应的容器DOM元素
				// 根据name参数拼接ID，如'container_normal'或'container_logzbuf'
				const framecontainer = document.getElementById( 'container_' + name );

				/**
				 * 创建透视相机 (PerspectiveCamera)
				 * 参数说明：
				 * 1. fov (视野角度): 50度 - 垂直视角，影响场景的"广角"程度
				 * 2. aspect (宽高比): screensplit * SCREEN_WIDTH / SCREEN_HEIGHT
				 *    - 根据屏幕分割比例和屏幕尺寸计算
				 *    - 确保图像不会拉伸变形
				 * 3. near (近平面距离): NEAR (1e-6)
				 *    - 相机能看到的最小距离
				 * 4. far (远平面距离): FAR (1e27)
				 *    - 相机能看到的最大距离
				 *    
				 * 注意：这种极端的near/far范围会暴露传统深度缓冲区的精度问题
				 */
				const camera = new THREE.PerspectiveCamera( 
					50,  // 视野角度 (degrees)
					screensplit * SCREEN_WIDTH / SCREEN_HEIGHT,  // 宽高比
					NEAR,  // 近平面距离
					FAR    // 远平面距离
				);
				
				// 将相机添加到场景中
				// 虽然相机本身不是可见物体，但添加到场景中可以方便统一管理
				scene.add( camera );

				/**
				 * 创建WebGL渲染器 (WebGLRenderer)
				 * 配置对象说明：
				 * 1. antialias: true - 开启抗锯齿，使边缘更平滑
				 * 2. logarithmicDepthBuffer: logDepthBuf - 关键参数！
				 *    - true: 启用对数深度缓冲区
				 *    - false: 使用传统深度缓冲区
				 *    
				 * 对数深度缓冲区使用对数函数来分布深度值，
				 * 在极端near/far比例下提供更好的深度精度
				 */
				const renderer = new THREE.WebGLRenderer( { 
					antialias: true,                // 开启抗锯齿
					logarithmicDepthBuffer: logDepthBuf  // 是否启用对数深度缓冲区
				} );
				
				// 设置渲染器的像素比例
				// window.devicePixelRatio获取设备的物理像素与CSS像素比例
				// 在高DPI设备（如Retina屏幕）上提供更清晰的渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器画布尺寸
				// 初始设置为屏幕宽度的一半和全高
				renderer.setSize( SCREEN_WIDTH / 2, SCREEN_HEIGHT );
				
				// 设置渲染器画布的CSS样式
				// position: 'relative' - 相对定位，便于布局
				renderer.domElement.style.position = 'relative';
				
				// 为渲染器画布设置ID，便于CSS选择器或JavaScript操作
				// 如'renderer_normal'或'renderer_logzbuf'
				renderer.domElement.id = 'renderer_' + name;
				
				// 将渲染器画布添加到对应的容器中
				// 这样3D场景就会显示在页面的指定位置
				framecontainer.appendChild( renderer.domElement );

				// 返回该视图的所有相关对象
				// 这些对象将在动画循环中被使用
				return { 
					container: framecontainer,  // DOM容器元素
					renderer: renderer,         // WebGL渲染器实例
					scene: scene,               // 3D场景
					camera: camera              // 相机
				};
			}

			/**
			 * 初始化3D场景内容
			 * 创建不同尺度的标签和球体，展示深度缓冲区效果
			 * 
			 * @param {THREE.Font} font - 加载的字体对象，用于创建3D文本
			 * @returns {THREE.Scene} 初始化完成的3D场景
			 */
			function initScene( font ) {
				// 创建新的3D场景对象
				// Scene是Three.js中所有3D对象的容器
				const scene = new THREE.Scene();

				// 添加环境光 (AmbientLight)
				// 环境光均匀照亮场景中的所有物体
				// 参数：光的颜色（十六进制），0x777777是中灰色
				scene.add( new THREE.AmbientLight( 0x777777 ) );

				// 添加定向光 (DirectionalLight)
				// 定向光模拟远处光源（如太阳），所有光线平行
				// 参数1：光的颜色（白色）
				// 参数2：光的强度（3.0，比默认1.0更亮）
				const light = new THREE.DirectionalLight( 0xffffff, 3 );
				
				// 设置定向光的位置
				// 位置在(100, 100, 100)，从场景的右上方前方照射
				light.position.set( 100, 100, 100 );
				
				// 将定向光添加到场景中
				scene.add( light );

				// 定义材质参数对象
				// 这些参数将用于创建球体和文本的材质
				const materialargs = {
					color: 0xffffff,      // 基础颜色（白色）
					specular: 0x050505,   // 高光颜色（深灰色）
					shininess: 50,        // 高光强度（0-100）
					emissive: 0x000000    // 自发光颜色（黑色，不自发光）
				};

				// 创建基础球体几何体
				// 参数说明：
				// 1. radius: 0.5 - 半径0.5米（这是基础大小，后续会缩放）
				// 2. widthSegments: 24 - 水平分段数（经线）
				// 3. heightSegments: 12 - 垂直分段数（纬线）
				// 更高的分段数使球体更光滑，但计算量更大
				const geometry = new THREE.SphereGeometry( 0.5, 24, 12 );

				// 遍历标签数据数组，为每个尺度创建视觉表示
				// 每个尺度包含一个文本标签和一个对应大小的球体
				for ( let i = 0; i < labeldata.length; i ++ ) {
					// 获取当前尺度的缩放比例
					// 如果labeldata[i].scale未定义，则默认为1.0
					const scale = labeldata[ i ].scale || 1;

					/**
					 * 创建文本几何体 (TextGeometry)
					 * 将2D文本转换为3D几何体
					 * 参数说明：
					 * 1. text: labeldata[i].label - 要显示的文本
					 * 2. parameters: 配置对象
					 *    - font: 使用的字体对象
					 *    - size: 字体大小（基于实际尺度）
					 *    - depth: 文本挤出深度（厚度）
					 */
					const labelgeo = new TextGeometry( labeldata[ i ].label, {
						font: font,                     // 使用的字体
						size: labeldata[ i ].size,      // 字体大小（与尺度相关）
						depth: labeldata[ i ].size / 2  // 挤出深度（文本厚度）
					} );

					// 计算文本几何体的包围球 (BoundingSphere)
					// 包围球是包含整个几何体的最小球体
					// 用于快速计算几何体的尺寸和中心位置
					labelgeo.computeBoundingSphere();

					// 将文本几何体水平居中
					// 通过向左移动包围球半径的距离，使文本左边缘对齐原点
					// 这样文本就会以其左边缘为中心显示
					labelgeo.translate( - labelgeo.boundingSphere.radius, 0, 0 );

					// 为每个对象生成随机颜色
					// 使用HSL颜色模式，随机色相，固定饱和度和亮度
					// 这样不同尺度的物体会显示为不同的颜色，便于区分
					materialargs.color = new THREE.Color().setHSL( Math.random(), 0.5, 0.5 );

					// 创建Phong材质 (MeshPhongMaterial)
					// Phong材质支持高光反射，对光照反应良好
					// 参数：材质配置对象
					const material = new THREE.MeshPhongMaterial( materialargs );

					// 创建组对象 (Group)
					// Group是Three.js中的容器对象，可以包含多个子对象
					// 这里将文本和球体放在同一个组中，便于统一控制
					const group = new THREE.Group();
					
					// 设置组在Z轴上的位置
					// Z值为负表示向屏幕内部（远离相机）
					// 位置根据尺度大小计算，更大的尺度离相机更远
					group.position.z = - labeldata[ i ].size * scale;
					
					// 将组添加到场景中
					scene.add( group );

					// 创建文本网格 (Mesh)
					// Mesh是Three.js中几何体+材质的组合，代表一个可渲染的物体
					const textmesh = new THREE.Mesh( labelgeo, material );
					
					// 设置文本的缩放
					// 根据当前尺度的缩放比例统一缩放XYZ轴
					textmesh.scale.set( scale, scale, scale );
					
					// 设置文本在Z轴上的位置（与组位置相同）
					textmesh.position.z = - labeldata[ i ].size * scale;
					
					// 设置文本在Y轴上的位置
					// 将文本放置在球体上方，避免重叠
					textmesh.position.y = labeldata[ i ].size / 4 * scale;
					
					// 将文本网格添加到组中
					group.add( textmesh );

					// 创建球体网格
					// 使用之前创建的基础球体几何体和相同的材质
					const dotmesh = new THREE.Mesh( geometry, material );
					
					// 设置球体在Y轴上的位置
					// 将球体放置在文本下方
					dotmesh.position.y = - labeldata[ i ].size / 4 * scale;
					
					// 缩放球体以匹配当前尺度
					// multiplyScalar将球体的原始缩放乘以尺度值
					dotmesh.scale.multiplyScalar( labeldata[ i ].size * scale );
					
					// 将球体网格添加到组中
					group.add( dotmesh );
				}

				// 返回初始化完成的场景
				return scene;
			}

			/**
			 * 更新渲染器尺寸
			 * 当窗口大小改变或分隔线位置改变时调用
			 * 重新计算并设置两个渲染器的尺寸和相机参数
			 */
			function updateRendererSizes() {
				// 更新屏幕尺寸变量为当前窗口大小
				SCREEN_WIDTH = window.innerWidth;
				SCREEN_HEIGHT = window.innerHeight;

				// 计算右侧渲染器的分割比例
				// 左侧占screensplit，右侧占1-screensplit
				screensplit_right = 1 - screensplit;

				// ===== 更新普通深度缓冲区渲染器 =====
				
				// 设置渲染器画布尺寸
				// 宽度：屏幕宽度 × 左侧分割比例
				// 高度：屏幕高度
				objects.normal.renderer.setSize( screensplit * SCREEN_WIDTH, SCREEN_HEIGHT );
				
				// 更新相机的宽高比
				// 宽高比 = 渲染器宽度 / 渲染器高度
				objects.normal.camera.aspect = screensplit * SCREEN_WIDTH / SCREEN_HEIGHT;
				
				// 更新相机的投影矩阵
				// 当相机参数（如aspect）改变后，必须调用此方法
				objects.normal.camera.updateProjectionMatrix();
				
				/**
				 * 设置相机视口偏移 (setViewOffset)
				 * 这是实现分屏渲染的关键技术
				 * 参数说明：
				 * 1. fullWidth: 全屏宽度 (1920)
				 * 2. fullHeight: 全屏高度 (1080)
				 * 3. x: 视口起始X坐标 (0)
				 * 4. y: 视口起始Y坐标 (0)
				 * 5. width: 视口宽度 (1920 × screensplit)
				 * 6. height: 视口高度 (1080)
				 * 
				 * 效果：相机只渲染全屏的左半部分
				 */
				objects.normal.camera.setViewOffset( 
					SCREEN_WIDTH, SCREEN_HEIGHT,        // 全屏尺寸
					0, 0,                               // 视口起点(左上角)
					SCREEN_WIDTH * screensplit, SCREEN_HEIGHT  // 视口大小
				);
				
				// 更新左侧容器的CSS宽度
				// 使用百分比单位，确保响应式布局
				objects.normal.container.style.width = ( screensplit * 100 ) + '%';

				// ===== 更新对数深度缓冲区渲染器 =====
				// 原理与左侧渲染器相同，但使用右侧的分割比例
				
				objects.logzbuf.renderer.setSize( screensplit_right * SCREEN_WIDTH, SCREEN_HEIGHT );
				objects.logzbuf.camera.aspect = screensplit_right * SCREEN_WIDTH / SCREEN_HEIGHT;
				objects.logzbuf.camera.updateProjectionMatrix();
				
				/**
				 * 设置右侧相机视口偏移
				 * 与左侧相机的主要区别：
				 * x参数：SCREEN_WIDTH * screensplit
				 * 视口从分隔线位置开始，而不是从0开始
				 */
				objects.logzbuf.camera.setViewOffset( 
					SCREEN_WIDTH, SCREEN_HEIGHT,                      // 全屏尺寸
					SCREEN_WIDTH * screensplit, 0,                    // 视口起点(分隔线处)
					SCREEN_WIDTH * screensplit_right, SCREEN_HEIGHT   // 视口大小
				);
				
				objects.logzbuf.container.style.width = ( screensplit_right * 100 ) + '%';

				// 更新可拖拽分隔线的CSS位置
				// 分隔线始终位于两个渲染器之间
				border.style.left = ( screensplit * 100 ) + '%';
			}

			/**
			 * 动画循环函数
			 * 使用requestAnimationFrame实现平滑的动画效果
			 * 这个函数会递归调用自身，形成动画循环
			 */
			function animate() {
				// requestAnimationFrame是浏览器提供的API
				// 它会在下一帧重绘前调用指定的回调函数
				// 通常每秒调用60次（60fps），但会匹配显示器的刷新率
				requestAnimationFrame( animate );
				
				// 调用渲染函数，更新并绘制当前帧
				render();
			}

			/**
			 * 渲染函数 - 每帧执行
			 * 更新相机位置、处理缩放、渲染两个场景
			 */
			function render() {
				// ===== 计算缩放限制和阻尼 =====
				
				// 计算最小缩放值：第一个尺度的实际大小
				const minzoom = labeldata[ 0 ].size * labeldata[ 0 ].scale * 1;
				
				// 计算最大缩放值：最后一个尺度的实际大小 × 100
				// ×100是为了让用户可以放大到比最大物体更近的距离
				const maxzoom = labeldata[ labeldata.length - 1 ].size * 
							   labeldata[ labeldata.length - 1 ].scale * 100;
				
				/**
				 * 计算阻尼系数
				 * 阻尼用于使缩放速度逐渐减慢，提供更自然的交互感受
				 * 当缩放速度大于最小速度时，应用0.95的阻尼（减少5%）
				 * 否则使用1.0（无阻尼）
				 */
				let damping = ( Math.abs( zoomspeed ) > minzoomspeed ? .95 : 1.0 );

				/**
				 * 计算当前缩放值
				 * 1. Math.pow(Math.E, zoompos): 将指数值zoompos转换为实际缩放值
				 *    - 使用自然指数函数，实现指数缩放效果
				 *    - zoompos越小，缩放值越小（相机越近）
				 *    - zoompos越大，缩放值越大（相机越远）
				 *    
				 * 2. THREE.MathUtils.clamp(): 将缩放值限制在minzoom和maxzoom之间
				 *    - 防止相机缩放超出预定范围
				 */
				const zoom = THREE.MathUtils.clamp( Math.pow( Math.E, zoompos ), minzoom, maxzoom );
				
				/**
				 * 更新zoompos为当前缩放的对数值
				 * 这是反向计算，用于保持zoompos与zoom的同步
				 * Math.log()是自然对数函数，Math.pow(Math.E, x)的反函数
				 */
				zoompos = Math.log( zoom );

				// 当达到缩放极限时，应用更强的阻尼
				// 这会使相机在边界处"反弹"效果更明显
				if ( ( zoom == minzoom && zoomspeed < 0 ) || ( zoom == maxzoom && zoomspeed > 0 ) ) {
					damping = .85;  // 更强的阻尼（减少15%）
				}

				// 应用缩放速度和阻尼
				zoompos += zoomspeed;    // 更新缩放位置
				zoomspeed *= damping;    // 应用阻尼，逐渐减慢速度

				// ===== 更新普通深度缓冲区相机的轨道控制 =====
				
				/**
				 * 根据鼠标位置计算相机在球坐标系中的位置
				 * 原理：将鼠标的2D坐标映射到3D球面坐标
				 * 
				 * 鼠标X坐标控制水平旋转（经度）：
				 * - mouse[0]从0到1，对应-π/2到π/2
				 * - 使用正弦和余弦函数计算X和Z坐标
				 * 
				 * 鼠标Y坐标控制垂直旋转（纬度）：
				 * - mouse[1]从0到1，对应-π/4到π/4
				 * - 使用正弦函数计算Y坐标
				 * 
				 * 缩放值zoom控制相机距离原点的半径
				 */
				objects.normal.camera.position.x = Math.sin( .5 * Math.PI * ( mouse[ 0 ] - .5 ) ) * zoom;
				objects.normal.camera.position.y = Math.sin( .25 * Math.PI * ( mouse[ 1 ] - .5 ) ) * zoom;
				objects.normal.camera.position.z = Math.cos( .5 * Math.PI * ( mouse[ 0 ] - .5 ) ) * zoom;
				
				/**
				 * 让相机始终看向场景中心点(0, 0, 0)
				 * lookAt方法会自动计算相机的旋转，使其Z轴指向目标点
				 */
				objects.normal.camera.lookAt( objects.normal.scene.position );

				// ===== 同步对数深度缓冲区相机 =====
				
				/**
				 * 将对数深度缓冲区相机与普通相机完全同步
				 * 确保两个视图显示完全相同的内容，只有深度缓冲区算法不同
				 * 
				 * 复制位置：
				 * 使两个相机在3D空间中的位置完全相同
				 */
				objects.logzbuf.camera.position.copy( objects.normal.camera.position );
				
				/**
				 * 复制旋转：
				 * 四元数(quaternion)是表示3D旋转的数学工具
				 * 比欧拉角更稳定，没有万向节锁问题
				 */
				objects.logzbuf.camera.quaternion.copy( objects.normal.camera.quaternion );

				// ===== 检查并更新渲染器尺寸（如果分割比例发生变化） =====
				
				/**
				 * 检查分割比例是否发生变化
				 * screensplit_right是之前计算的值
				 * 1 - screensplit是当前应该的值
				 * 如果两者不等，说明用户拖拽了分隔线
				 */
				if ( screensplit_right != 1 - screensplit ) {
					// 调用更新函数，重新计算和设置渲染器尺寸
					updateRendererSizes();
				}

				// ===== 渲染两个场景 =====
				
				/**
				 * 渲染普通深度缓冲区场景
				 * 参数1：要渲染的场景对象
				 * 参数2：用于渲染的相机
				 * 
				 * 这个渲染器使用传统深度缓冲区算法
				 * 在极端尺度范围下可能会出现Z-fighting（深度冲突）问题
				 */
				objects.normal.renderer.render( objects.normal.scene, objects.normal.camera );
				
				/**
				 * 渲染对数深度缓冲区场景
				 * 参数和左侧相同，但渲染器启用了logarithmicDepthBuffer
				 * 
				 * 对数深度缓冲区使用对数函数分布深度值
				 * 在极端near/far比例下提供更均匀的深度精度
				 * 减少或消除Z-fighting问题
				 */
				objects.logzbuf.renderer.render( objects.logzbuf.scene, objects.logzbuf.camera );

				// 更新性能监视器
				// 这会刷新FPS计数器、渲染时间等显示
				stats.update();
			}

			// ==================== 事件处理函数 ====================

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时调用
			 * 
			 * 注意：这里没有使用事件对象参数，因为直接使用window.innerWidth/Height
			 */
			function onWindowResize() {
				// 调用更新函数，重新调整渲染器尺寸
				updateRendererSizes();
			}

			/**
			 * 分隔线鼠标按下事件处理函数
			 * 当用户在分隔线上按下鼠标时调用
			 * 开始拖拽调整操作
			 */
			function onBorderPointerDown() {
				// 激活拖拽功能
				// 添加指针移动和释放事件监听器
				
				// pointermove: 当指针（鼠标、触摸）移动时触发
				// 用于实时更新分隔线位置
				window.addEventListener( 'pointermove', onBorderPointerMove );
				
				// pointerup: 当指针释放时触发
				// 用于结束拖拽操作
				window.addEventListener( 'pointerup', onBorderPointerUp );
			}

			/**
			 * 分隔线拖拽移动事件处理函数
			 * 当用户拖拽分隔线时持续调用
			 * 
			 * @param {PointerEvent} ev - 指针事件对象
			 */
			function onBorderPointerMove( ev ) {
				/**
				 * 根据鼠标X坐标计算新的分割比例
				 * ev.clientX: 鼠标指针相对于浏览器窗口的X坐标
				 * window.innerWidth: 浏览器窗口内部宽度
				 * 
				 * ev.clientX / window.innerWidth: 将像素坐标转换为比例（0.0到1.0之间）
				 * 
				 * Math.max(0, Math.min(1, ...)): 将比例限制在0到1之间
				 * - 防止分隔线拖出窗口边界
				 */
				screensplit = Math.max( 0, Math.min( 1, ev.clientX / window.innerWidth ) );
			}

			/**
			 * 分隔线释放事件处理函数
			 * 当用户释放分隔线（松开鼠标）时调用
			 * 结束拖拽操作
			 */
			function onBorderPointerUp() {
				// 移除拖拽事件监听器
				// 停止监听指针移动和释放事件
				window.removeEventListener( 'pointermove', onBorderPointerMove );
				window.removeEventListener( 'pointerup', onBorderPointerUp );
			}

			/**
			 * 鼠标移动事件处理函数
			 * 当鼠标在窗口内移动时持续调用
			 * 用于控制相机旋转
			 * 
			 * @param {MouseEvent} ev - 鼠标事件对象
			 */
			function onMouseMove( ev ) {
				/**
				 * 将鼠标坐标转换为归一化值[0, 1]
				 * 这是标准化的坐标系统，不依赖于具体屏幕分辨率
				 * 
				 * mouse[0]: X轴位置
				 * 0.0 = 窗口最左侧
				 * 1.0 = 窗口最右侧
				 * 0.5 = 窗口水平中心
				 */
				mouse[ 0 ] = ev.clientX / window.innerWidth;
				
				/**
				 * mouse[1]: Y轴位置
				 * 0.0 = 窗口最顶部
				 * 1.0 = 窗口最底部
				 * 0.5 = 窗口垂直中心
				 */
				mouse[ 1 ] = ev.clientY / window.innerHeight;
			}

			/**
			 * 鼠标滚轮事件处理函数
			 * 当用户滚动鼠标滚轮时调用
			 * 用于控制相机缩放
			 * 
			 * @param {WheelEvent} ev - 滚轮事件对象
			 */
			function onMouseWheel( ev ) {
				// 获取滚轮变化量
				// deltaY: 垂直滚动量（正值向下滚动，负值向上滚动）
				const amount = ev.deltaY;
				
				// 如果没有变化，直接返回（避免不必要的计算）
				if ( amount === 0 ) return;
				
				/**
				 * 确定缩放方向
				 * amount / Math.abs(amount): 获取符号
				 * - 如果amount为正，返回1
				 * - 如果amount为负，返回-1
				 * 这表示缩放的方向：1=放大（远离），-1=缩小（靠近）
				 */
				const dir = amount / Math.abs( amount );
				
				/**
				 * 设置缩放速度
				 * dir / 10: 将方向转换为速度值
				 * 例如：dir=1 -> zoomspeed=0.1（放大）
				 *        dir=-1 -> zoomspeed=-0.1（缩小）
				 * 绝对值0.1是一个适中的速度，用户可以通过快速滚动获得更快缩放
				 */
				zoomspeed = dir / 10;

				/**
				 * 用户开始缩放后，降低最小缩放速度
				 * 初始minzoomspeed=0.015，现在设为0.001
				 * 
				 * 原因：初始较快的速度让用户快速进入场景
				 * 用户主动缩放后，提供更精细的控制，让用户能慢慢调整到理想视角
				 */
				minzoomspeed = 0.001;
			}
		</script>
	</body>
</html>