<!-- 代码功能详细描述
一、核心功能
这是一个用于展示和对比不同色彩空间效果的WebGL交互式演示应用。主要功能包括：

1. 色彩空间对比
左侧画面：显示标准的sRGB色彩空间图像

右侧画面：显示更宽色域的Display P3色彩空间图像

实时对比：用户可以直观看到两种色彩空间在颜色表现上的差异

2. 交互式分屏控制
可拖动滑块：位于屏幕中央，用户可以左右拖动

动态分屏：滑块位置决定左右画面的显示比例

视觉反馈：滑块处有垂直分割线和手柄，提供清晰的交互提示

3. 自适应色彩管理
自动检测：检测设备和浏览器是否支持Display P3色彩空间

智能切换：根据设备能力自动选择最佳的色彩空间配置

响应式适配：当设备色域支持状态改变时（如连接外接显示器），自动调整渲染设置

4. 响应式设计
窗口适应：随浏览器窗口大小变化自动调整布局和渲染

跨设备兼容：支持桌面和移动设备，适配不同的屏幕尺寸和分辨率

高DPI支持：在高分辨率屏幕（如Retina显示屏）上清晰显示

二、主要技术点
1. Three.js WebGL渲染引擎
3D场景管理：使用THREE.Scene管理渲染对象

透视相机：THREE.PerspectiveCamera提供3D视图

WebGL渲染器：THREE.WebGLRenderer进行高性能图形渲染

纹理加载：THREE.TextureLoader异步加载图像纹理

2. 色彩空间管理
色彩空间定义：通过THREE.ColorManagement.define()注册自定义色彩空间

线性色彩空间：使用LinearDisplayP3ColorSpace进行内部计算，避免伽马校正问题

输出色彩空间控制：根据设备支持情况动态设置renderer.outputColorSpace

纹理色彩空间：为不同纹理设置对应的色彩空间标识

3. WebGL高级特性
裁剪测试：renderer.setScissorTest(true)启用裁剪，实现分屏渲染

抗锯齿：启用antialias: true提高图像质量

设备像素比适配：renderer.setPixelRatio()适配高DPI设备

动画循环：使用renderer.setAnimationLoop()替代传统的requestAnimationFrame

4. 现代JavaScript特性
ES6模块化：使用import/export模块系统

异步加载：async/await处理纹理加载

解构赋值：{ matches }简化对象属性访问

模板字符串：动态生成纹理路径

导入映射：importmap简化模块导入路径

5. 交互与事件处理
Pointer Events API：统一处理鼠标、触摸和触控笔输入

事件委托：在window对象上监听移动和抬起事件，避免事件丢失

防误触处理：检查event.isPrimary确保只处理主指针

触摸行为控制：touch-action: none禁用默认的触摸滚动

6. 自适应布局与渲染
视口控制：viewportmeta标签控制移动端显示

媒体查询：window.matchMedia('(color-gamut: p3)')检测设备色域支持

纹理适配：THREE.TextureUtils.contain()保持纹理比例同时适应容器

响应式事件：监听resize事件和媒体查询变化事件

7. 性能优化技术
按需渲染：通过裁剪测试只渲染可见区域

纹理重用：纹理对象在场景间共享

事件监听器管理：动态添加/移除事件监听器，避免内存泄漏

条件渲染：根据设备能力选择性启用高级特性

三、技术架构特点
1. 分层架构
text
├── 表示层 (HTML/CSS)
│   ├── 容器布局
│   ├── 滑块UI
│   └── 文字标签
│
├── 逻辑层 (JavaScript)
│   ├── 初始化模块
│   ├── 交互控制模块
│   ├── 渲染循环模块
│   └── 事件处理模块
│
└── 渲染层 (Three.js)
    ├── 场景管理
    ├── 相机控制
    ├── 色彩空间处理
    └── WebGL渲染
2. 状态管理
滑块位置状态：sliderPos变量记录当前分屏位置

色彩空间状态：isP3Context和媒体查询结果决定渲染配置

纹理加载状态：异步加载确保纹理就绪后再渲染

3. 错误处理与兼容性
特性检测：通过WebGL.isColorSpaceAvailable()检测功能支持

优雅降级：不支持P3时自动降级到sRGB模式

跨浏览器兼容：使用标准的Web API和Three.js抽象层

四、应用场景与价值
1. 教育演示
帮助设计师和开发者理解不同色彩空间的差异

展示宽色域对视觉体验的提升效果

2. 设备测试
测试显示设备是否支持Display P3色彩空间

验证浏览器和操作系统对色彩管理的支持程度

3. 技术验证
验证Three.js色彩空间管理的正确性

测试WebGL高级特性在不同环境下的表现

4. 用户体验研究
研究用户对色彩差异的感知

探索交互式对比界面的最佳实践

五、创新点总结
可视化色彩空间对比：将抽象的色彩空间概念转化为直观的视觉对比

实时交互反馈：用户操作立即反映在视觉表现上

自适应技术栈：根据运行环境智能选择最佳技术方案

跨平台一致性：在多种设备和浏览器上提供一致的体验

教育与实用结合：既有教育意义又有实际测试价值 -->


<!DOCTYPE html>
<html lang="en">
	<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">
		
		<!-- 内联CSS样式：定义当前页面特有的样式规则 -->
		<style>
			/* 
			 * 容器样式类
			 * 用途：作为整个应用的视觉容器，包含所有可视化元素
			 * position: absolute - 绝对定位，相对于最近的定位祖先元素
			 * overflow: hidden - 隐藏超出容器边界的内容
			 * width: 100% - 宽度占满父元素
			 * height: 100% - 高度占满父元素
			 */
			.container {
				position: absolute;
				overflow: hidden;
				width: 100%;
				height: 100%;
			}

			/* 
			 * 滑块样式类（基于 https://github.com/Paul-Browne/image-comparison-slider 的实现）
			 * 用途：创建可拖动的分屏对比滑块
			 * position: absolute - 绝对定位
			 * width: 200px - 滑块的宽度，影响拖动的敏感区域
			 * height: 100% - 滑块高度占满容器
			 * top: 0 - 距顶部距离为0
			 * left: 0 - 初始距左侧距离为0
			 * z-index: 1 - 确保滑块显示在其他元素之上
			 */
			.slider {
				position: absolute;
				width: 200px;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 1;
			}

			/* 
			 * 滑块的伪元素样式（:before和:after）
			 * 用途：创建滑块的视觉表示（分割线和手柄）
			 * position: absolute - 绝对定位
			 * left: 50% - 水平居中
			 * content: "" - 必须设置内容，伪元素才能显示
			 * background: #fff - 白色背景
			 * cursor: grab - 鼠标悬停时显示可抓取的光标
			 */
			.slider:before,
			.slider:after {
				position: absolute;
				left: 50%;
				content: "";
				background: #fff;
				cursor: grab;
			}

			/* 
			 * 滑块:before伪元素 - 创建垂直分割线
			 * top: 0 - 从顶部开始
			 * transform: translateX(-50%) - 向左平移自身宽度的50%，实现真正的居中
			 * width: 1px - 分割线宽度为1像素
			 * height: 100% - 分割线高度占满容器
			 */
			.slider:before {
				top: 0;
				transform: translateX(-50%);
				width: 1px;
				height: 100%;
			}

			/* 
			 * 滑块:after伪元素 - 创建可拖动手柄
			 * top: 50% - 垂直居中
			 * transform: translate(-50%, -50%) - 水平和垂直都居中
			 * width: 5px - 手柄宽度
			 * height: 33% - 手柄高度为容器的三分之一
			 * border-radius: 5px - 圆角边框，使手柄呈圆形
			 */
			.slider:after {
				top: 50%;
				transform: translate(-50%, -50%);
				width: 5px;
				height: 33%;
				border-radius: 5px;
			}

			/* 
			 * 标签样式类
			 * 用途：显示sRGB和Display P3的文字标签
			 * position: fixed - 固定定位，相对于浏览器窗口
			 * top: calc(50% - 1em) - 垂直居中（50%位置减去1个字体高度）
			 * height: 2em - 标签高度为2个字体高度
			 * line-height: 2em - 行高等于高度，实现垂直居中文本
			 * background: rgba(0, 0, 0, 0.5) - 半透明黑色背景（透明度50%）
			 * margin: 0 - 无外边距
			 * padding: 0.2em 0.5em - 内边距：上下0.2em，左右0.5em
			 * border-radius: 4px - 圆角边框
			 * font-size: 14px - 字体大小
			 * user-select: none - 禁止用户选择文本
			 * -webkit-user-select: none - Safari浏览器的兼容写法
			 */
			.label {
				position: fixed;
				top: calc(50% - 1em);
				height: 2em;
				line-height: 2em;
				background: rgba(0, 0, 0, 0.5);
				margin: 0;
				padding: 0.2em 0.5em;
				border-radius: 4px;
				font-size: 14px;
				user-select: none;
				-webkit-user-select: none;
			}
		</style>
	</head>

	<body>

		<!-- 
		 * 信息显示区域
		 * id="info" - 用于CSS和JavaScript的标识符
		 * 内容：显示Three.js信息和本应用的功能说明
		 * a标签：指向Three.js官网的超链接
		 * target="_blank" - 在新标签页打开链接
		 * rel="noopener" - 安全属性，防止新页面访问原页面的window.opener属性
		 -->
		<div id="info">
			<a href="https://three.js.org" target="_blank" rel="noopener">Three.js</a> - 宽色域色彩空间对比测试<br />
			功能：对比显示sRGB和Display P3色彩空间的图像差异<br />
			操作：拖动中间的滑块可以调整左右分屏比例<br />
			说明：左侧为sRGB色域，右侧为Display P3宽色域
		</div>

		<!-- 
		 * 主容器：包含所有可视化元素
		 * 包含：滑块、左侧标签、右侧标签
		 * 三个元素都使用绝对或固定定位，相互叠加显示
		 -->
		<div class="container">
			<!-- 滑块元素：用户可拖动以调整左右分屏比例 -->
			<div class="slider"></div>
			<!-- 左侧标签：显示"sRGB"，固定位置在左侧 -->
			<p class="label" style="left: 1em;">sRGB</p>
			<!-- 右侧标签：显示"Display P3"，固定位置在右侧 -->
			<p class="label" style="right: 1em;">Display P3</p>
		</div>

		<!-- 
		 * 导入映射（Import Maps）
		 * 用途：定义JavaScript模块导入的别名
		 * type="importmap" - 指定脚本类型为导入映射
		 * 允许在导入模块时使用简短的别名而不是完整的URL
		 * 配置：
		 *   - "three": 指向Three.js主模块
		 *   - "three/addons/": 指向Three.js附加模块目录
		 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
		 * 主JavaScript模块
		 * type="module" - 指定脚本为ES6模块，支持模块化导入
		 * 模块内部代码在严格模式下运行，有自己的作用域
		 -->
		<script type="module">

			// 导入Three.js核心库的所有导出，并使用THREE作为命名空间
			import * as THREE from 'three';

			// 从Three.js附加模块导入Display P3色彩空间相关的类和实现
			// DisplayP3ColorSpace: Display P3色彩空间的标识符
			// DisplayP3ColorSpaceImpl: Display P3色彩空间的实现类
			// LinearDisplayP3ColorSpace: 线性Display P3色彩空间的标识符
			// LinearDisplayP3ColorSpaceImpl: 线性Display P3色彩空间的实现类
			import { DisplayP3ColorSpace, DisplayP3ColorSpaceImpl, LinearDisplayP3ColorSpace, LinearDisplayP3ColorSpaceImpl } from 'three/addons/math/ColorSpaces.js';

			// 导入WebGL能力检测模块，用于检测浏览器是否支持特定功能
			import WebGL from 'three/addons/capabilities/WebGL.js';

			// 声明全局变量
			// container: 页面中的容器DOM元素
			// camera: Three.js相机对象，用于定义视图
			// renderer: Three.js渲染器，负责将3D场景渲染到2D画布
			// loader: 纹理加载器，用于加载图像纹理
			// sceneL, sceneR: 左右两个Three.js场景对象
			// textureL, textureR: 左右两个纹理对象
			let container, camera, renderer, loader;
			let sceneL, sceneR, textureL, textureR;

			// 滑块位置变量：初始化为屏幕宽度的一半（居中位置）
			// 这个值会随着用户拖动滑块而改变
			let sliderPos = window.innerWidth / 2;

			// 获取滑块DOM元素
			// 使用querySelector通过类名选择第一个匹配的.slider元素
			const slider = document.querySelector( '.slider' );

			// 检测浏览器是否支持P3色彩空间上下文
			// WebGL.isColorSpaceAvailable(): 检测WebGL上下文是否支持指定的色彩空间
			// DisplayP3ColorSpace: 要检测的色彩空间标识符
			// 返回值：布尔值，true表示支持，false表示不支持
			const isP3Context = WebGL.isColorSpaceAvailable( DisplayP3ColorSpace );

			// 定义Three.js色彩空间管理
			// THREE.ColorManagement.define(): 用于注册自定义色彩空间
			// 参数：一个对象，键是色彩空间标识符，值是色彩空间实现类
			// 这里注册了两个色彩空间：
			//   1. DisplayP3ColorSpace: 标准的Display P3色彩空间
			//   2. LinearDisplayP3ColorSpace: 线性化的Display P3色彩空间（用于计算）
			THREE.ColorManagement.define( {
				[ DisplayP3ColorSpace ]: DisplayP3ColorSpaceImpl,
				[ LinearDisplayP3ColorSpace ]: LinearDisplayP3ColorSpaceImpl
			} );

			// 如果浏览器支持P3色彩空间上下文
			if ( isP3Context ) {
				// 设置Three.js的工作色彩空间为线性Display P3色彩空间
				// 工作色彩空间是Three.js内部进行颜色计算时使用的色彩空间
				// 使用线性空间可以避免伽马校正的影响，提高计算精度
				THREE.ColorManagement.workingColorSpace = LinearDisplayP3ColorSpace;
			}

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

			// 主初始化函数
			// 职责：设置Three.js环境，创建场景、相机、渲染器等核心对象
			function init() {

				// 获取页面中的容器元素
				// querySelector返回第一个匹配.container类的元素
				container = document.querySelector( '.container' );

				// 创建两个Three.js场景对象
				// sceneL: 左侧场景，用于显示sRGB图像
				// sceneR: 右侧场景，用于显示Display P3图像
				sceneL = new THREE.Scene();
				sceneR = new THREE.Scene();

				// 创建透视相机
				// THREE.PerspectiveCamera参数说明：
				//   1. fov (35): 垂直视野角度，单位是度
				//   2. aspect (window.innerWidth / window.innerHeight): 宽高比，使用窗口宽高比
				//   3. near (0.1): 近裁剪面距离，小于此距离的物体不会被渲染
				//   4. far (100): 远裁剪面距离，大于此距离的物体不会被渲染
				// camera.position.z = 6: 将相机沿Z轴向后移动6个单位，以便看到整个场景
				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 100 );
				camera.position.z = 6;

				// 创建Three.js纹理加载器
				// 纹理加载器用于从URL加载图像并创建Three.js纹理对象
				loader = new THREE.TextureLoader();

				// 初始化纹理（异步）
				initTextures();
				// 初始化滑块交互逻辑
				initSlider();

				// 创建WebGL渲染器
				// 参数：{ antialias: true } 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				// 设置设备像素比，确保在高DPI屏幕（如Retina显示屏）上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器大小为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数，类似于requestAnimationFrame
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				// 启用裁剪测试
				// 裁剪测试允许只渲染画布的特定区域，用于实现分屏效果
				renderer.setScissorTest( true );
				// 将渲染器的DOM元素（canvas元素）添加到容器中
				container.appendChild( renderer.domElement );

				// 检查是否应该使用Display P3色彩空间作为输出
				// 条件1：浏览器支持P3上下文 (isP3Context)
				// 条件2：CSS媒体查询匹配P3色域 (window.matchMedia('(color-gamut: p3)').matches)
				// window.matchMedia: 检测设备是否支持特定CSS媒体查询
				// '(color-gamut: p3)': CSS媒体查询，检测设备是否支持P3色域
				if ( isP3Context && window.matchMedia( '( color-gamut: p3 )' ).matches ) {
					// 设置渲染器输出色彩空间为Display P3
					// 这会影响渲染器如何将颜色值输出到屏幕
					renderer.outputColorSpace = DisplayP3ColorSpace;
				}

				// 添加窗口大小调整事件监听器
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );
				
				// 添加色域媒体查询变化事件监听器
				// 当设备色域支持状态改变时（如连接/断开外接显示器），调用onGamutChange函数
				// addEventListener可以监听媒体查询的变化
				window.matchMedia( '( color-gamut: p3 )' ).addEventListener( 'change', onGamutChange );

			}

			// 异步初始化纹理函数
			// async关键字：表示函数内部可以使用await进行异步操作
			// 职责：加载左右两侧的纹理图像并设置相关属性
			async function initTextures() {

				// 纹理路径模板
				// 使用占位符{colorSpace}，可以根据需要替换为'srgb'或'p3'
				const path = 'textures/wide_gamut/logo_{colorSpace}.png';

				// 异步加载左侧纹理（sRGB版本）
				// loader.loadAsync(): 异步加载纹理，返回Promise
				// path.replace('{colorSpace}', 'srgb'): 替换路径中的占位符，获取sRGB图像路径
				// await: 等待Promise完成，获取纹理对象
				textureL = await loader.loadAsync( path.replace( '{colorSpace}', 'srgb' ) );
				// 异步加载右侧纹理（P3版本）
				textureR = await loader.loadAsync( path.replace( '{colorSpace}', 'p3' ) );

				// 设置左侧纹理的色彩空间为SRGB
				// THREE.SRGBColorSpace: Three.js内置的sRGB色彩空间标识符
				textureL.colorSpace = THREE.SRGBColorSpace;
				// 设置右侧纹理的色彩空间为Display P3
				// DisplayP3ColorSpace: 之前导入的Display P3色彩空间标识符
				textureR.colorSpace = DisplayP3ColorSpace;

				// 将纹理设置为场景背景
				// THREE.TextureUtils.contain(): 工具函数，调整纹理使其适应指定的宽高比
				// 参数1：纹理对象
				// 参数2：目标宽高比 (window.innerWidth / window.innerHeight)
				// 返回：调整后的纹理，设置为场景背景
				sceneL.background = THREE.TextureUtils.contain( textureL, window.innerWidth / window.innerHeight );
				sceneR.background = THREE.TextureUtils.contain( textureR, window.innerWidth / window.innerHeight );

			}

			// 初始化滑块交互函数
			// 职责：设置滑块的鼠标/触摸交互逻辑
			function initSlider() {

				// 指针按下事件处理函数（鼠标按下或触摸开始）
				// 参数：event - 指针事件对象
				function onPointerDown( event ) {
					// 检查事件是否为主指针事件
					// 在多指针设备（如触摸屏）上，可能有多个同时的指针事件
					// isPrimary属性标识这是否是主指针（通常是第一个触摸点或鼠标）
					if ( event.isPrimary === false ) return;

					// 添加指针移动事件监听器
					// 当指针移动时，调用onPointerMove函数
					window.addEventListener( 'pointermove', onPointerMove );
					// 添加指针抬起事件监听器
					// 当指针抬起时，调用onPointerUp函数
					window.addEventListener( 'pointerup', onPointerUp );
				}

				// 指针抬起事件处理函数
				// 职责：清理指针移动和抬起事件监听器
				function onPointerUp( event ) {
					// 移除指针移动事件监听器
					window.removeEventListener( 'pointermove', onPointerMove );
					// 移除指针抬起事件监听器
					window.removeEventListener( 'pointerup', onPointerUp );
				}

				// 指针移动事件处理函数
				// 职责：根据指针位置更新滑块位置
				// 参数：e - 指针事件对象，包含当前指针位置等信息
				function onPointerMove( e ) {
					// 检查事件是否为主指针事件
					if ( event.isPrimary === false ) return;

					// 调用updateSlider函数，传入指针的X坐标
					// e.pageX: 指针相对于整个文档的水平坐标
					updateSlider( e.pageX );
				}

				// 初始化滑块位置
				// 使用当前滑块位置（初始为窗口宽度的一半）更新滑块
				updateSlider( sliderPos );

				// 设置滑块的触摸行为
				// style.touchAction = 'none': 禁用触摸滚动和缩放
				// 确保触摸滑块时不会意外触发页面滚动
				slider.style.touchAction = 'none';
				
				// 为滑块元素添加指针按下事件监听器
				// 当用户在滑块上按下鼠标或触摸时，调用onPointerDown函数
				slider.addEventListener( 'pointerdown', onPointerDown );

			}

			// 更新滑块位置函数
			// 职责：根据给定的偏移量更新滑块位置，并确保其在有效范围内
			// 参数：offset - 目标位置（X坐标）
			function updateSlider( offset ) {
				// 计算新的滑块位置，限制在10px到窗口宽度-10px之间
				// Math.max(10, ...): 确保位置不小于10px（避免滑块太靠近左边缘）
				// Math.min(window.innerWidth - 10, ...): 确保位置不大于窗口宽度-10px（避免滑块太靠近右边缘）
				// 这样的限制确保滑块始终在可视区域内
				sliderPos = Math.max( 10, Math.min( window.innerWidth - 10, offset ) );

				// 更新滑块DOM元素的位置
				// slider.style.left: 设置滑块的左偏移量
				// sliderPos - (slider.offsetWidth / 2): 使滑块的中央对齐目标位置
				// slider.offsetWidth: 滑块元素的宽度（包括边框和内边距，不包括外边距）
				slider.style.left = sliderPos - ( slider.offsetWidth / 2 ) + 'px';
			}

			// 窗口大小调整事件处理函数
			// 职责：当浏览器窗口大小改变时，更新Three.js和滑块的相关设置
			function onWindowResize() {
				// 更新相机的宽高比
				// camera.aspect: 相机的宽高比属性
				// window.innerWidth / window.innerHeight: 新的窗口宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵
				// 当相机参数改变后，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器大小
				// 使渲染器画布大小与窗口大小保持一致
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 重新调整场景背景纹理以适应新的窗口大小
				// 当窗口大小改变时，需要重新计算纹理的显示方式
				THREE.TextureUtils.contain( sceneL.background, window.innerWidth / window.innerHeight );
				THREE.TextureUtils.contain( sceneR.background, window.innerWidth / window.innerHeight );

				// 更新滑块位置，确保其相对于新窗口大小的正确性
				updateSlider( sliderPos );
			}

			// 色域媒体查询变化事件处理函数
			// 职责：当设备色域支持状态改变时，更新渲染器的输出色彩空间
			// 参数：一个对象，使用解构赋值获取matches属性
			// { matches }: 等价于 event.matches，表示媒体查询的当前匹配状态
			function onGamutChange( { matches } ) {
				// 根据条件设置渲染器的输出色彩空间
				// 条件：支持P3上下文且媒体查询匹配P3色域
				// ? DisplayP3ColorSpace : 使用Display P3色彩空间
				// : THREE.SRGBColorSpace : 否则使用标准的sRGB色彩空间
				renderer.outputColorSpace = isP3Context && matches ? DisplayP3ColorSpace : THREE.SRGBColorSpace;

				// 标记纹理需要更新
				// 当输出色彩空间改变时，纹理需要重新处理以适配新的色彩空间
				textureL.needsUpdate = true;
				textureR.needsUpdate = true;
			}

			// 动画循环函数
			// 职责：在每一帧渲染左右两个场景，实现分屏对比效果
			// 此函数由renderer.setAnimationLoop()调用，每秒约60次
			function animate() {
				// 设置裁剪区域为左侧部分（从左上角到滑块位置）
				// renderer.setScissor参数说明：
				//   1. x (0): 裁剪区域左上角的X坐标
				//   2. y (0): 裁剪区域左上角的Y坐标
				//   3. width (sliderPos): 裁剪区域宽度，等于滑块位置
				//   4. height (window.innerHeight): 裁剪区域高度，等于窗口高度
				renderer.setScissor( 0, 0, sliderPos, window.innerHeight );
				// 渲染左侧场景（sRGB）
				// renderer.render参数说明：
				//   1. scene (sceneL): 要渲染的场景对象
				//   2. camera (camera): 用于渲染的相机对象
				renderer.render( sceneL, camera );

				// 设置裁剪区域为右侧部分（从滑块位置到右下角）
				// x (sliderPos): 从滑块位置开始
				// width (window.innerWidth): 宽度为窗口宽度（实际上渲染从sliderPos到window.innerWidth的部分）
				renderer.setScissor( sliderPos, 0, window.innerWidth, window.innerHeight );
				// 渲染右侧场景（Display P3）
				renderer.render( sceneR, camera );
			}

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