<!-- 代码功能描述
总体功能概述
这是一个基于Three.js的WebGL 3D交互演示应用，展示了视差屏障(Parallax Barrier)裸眼3D效果。应用创建了一个包含500个动态运动球体的3D场景，使用Pisa（比萨）天空盒作为环境背景，通过特殊的渲染技术实现裸眼3D视觉效果。

核心功能模块
1. 3D场景构建
场景组成：创建了一个包含500个随机分布球体的3D宇宙场景

环境背景：使用Paul Debevec提供的高质量Pisa天空盒纹理

视觉效果：所有球体具有金属质感反射效果，与环境天空盒融合

2. 视差屏障3D效果
裸眼3D技术：实现无需佩戴3D眼镜的立体视觉效果

双视图渲染：同时渲染左右眼两个视角的图像

屏障光栅：通过算法模拟物理视差屏障，产生深度感知

3. 交互控制系统
鼠标控制：通过鼠标移动控制相机视角

平滑跟随：使用阻尼系数实现相机平滑移动

实时响应：鼠标位置实时映射到3D空间视角

4. 动态动画系统
球体动画：500个球体各自进行独立的圆周运动

时间驱动：动画基于时间戳，确保不同设备上动画速度一致

相位偏移：每个球体有独特的运动路径，避免重复模式

5. 响应式布局
自适应屏幕：自动适应不同尺寸的显示设备

高DPI支持：正确处理Retina等高分辨率屏幕

窗口调整：实时响应窗口大小变化

主要技术点
1. Three.js核心架构
javascript
// 核心组件初始化
const scene = new THREE.Scene();      // 3D场景容器
const camera = new THREE.PerspectiveCamera();  // 透视相机
const renderer = new THREE.WebGLRenderer();    // WebGL渲染器
场景图(Scene Graph)：层级化组织3D对象

透视相机(PerspectiveCamera)：模拟人眼视角的3D投影

WebGL渲染器：硬件加速的图形渲染

2. 视差屏障渲染技术
javascript
const effect = new ParallaxBarrierEffect(renderer);
双通道渲染：同时计算左右眼视图

视差计算：根据深度信息计算像素偏移

屏障模拟：模拟物理光栅的光学效果

3. 环境映射(Environment Mapping)
javascript
const textureCube = new THREE.CubeTextureLoader().load(urls);
const material = new THREE.MeshBasicMaterial({ 
    envMap: textureCube  // 立方体贴图作为环境反射
});
立方体贴图(CubeMap)：6个方向的环境纹理

反射效果：球体表面反射周围环境

天空盒(Skybox)：无限远的背景环境

4. 动画与物理模拟
javascript
// 圆周运动公式
sphere.position.x = 5 * Math.cos(timer + i);
sphere.position.y = 5 * Math.sin(timer + i * 1.1);
三角函数动画：使用sin/cos实现规律运动

时间驱动：timer = 0.0001 * Date.now()

相位多样性：i和i * 1.1实现不同运动轨迹

5. 交互控制算法
javascript
// 平滑插值算法
camera.position.x += (mouseX - camera.position.x) * 0.05;
线性插值(LERP)：实现平滑过渡

阻尼系数：0.05控制响应速度和平滑度

坐标系转换：屏幕坐标到3D世界坐标映射

6. 性能优化技术
javascript
// 性能优化措施
renderer.setPixelRatio(window.devicePixelRatio);  // 高DPI适配
for (let i = 0, il = spheres.length; i < il; i++) // 缓存数组长度
批处理渲染：500个相同几何体的高效渲染

内存管理：重用几何体和材质对象

动画循环优化：使用setAnimationLoop替代requestAnimationFrame

7. 现代JavaScript特性
javascript
// ES6+特性使用
import * as THREE from 'three';  // ES6模块导入
const spheres = [];              // const声明
let windowHalfX = window.innerWidth / 2;  // let声明
ES6模块系统：模块化代码组织

Import Maps：浏览器原生模块路径映射

箭头函数：简化回调函数语法

8. 响应式设计实现
javascript
// 响应式处理
window.addEventListener('resize', onWindowResize);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
视口适配：自动调整相机宽高比

投影矩阵更新：保持正确的透视效果

实时重渲染：窗口变化时立即更新

9. 资源加载与管理
javascript
// 异步资源加载
const textureCube = new THREE.CubeTextureLoader().load(urls);
异步加载：纹理资源的并行加载

错误处理：内置加载错误处理机制

纹理缓存：自动管理纹理资源

技术难点与解决方案
1. 性能挑战
挑战：同时渲染500个球体并保持60FPS

解决方案：

使用相同的几何体和材质实例

启用WebGL硬件加速

优化动画计算复杂度

2. 3D效果准确性
挑战：实现真实的裸眼3D效果

解决方案：

精确的视差计算算法

适当的眼间距设置

深度信息的准确传递

3. 跨平台兼容性
挑战：不同设备和浏览器的兼容性

解决方案：

使用标准WebGL API

设备像素比适配

渐进增强策略

4. 用户体验优化
挑战：平衡视觉效果和交互流畅度

解决方案：

平滑的相机移动过渡

适当的鼠标灵敏度

响应式性能调节

应用场景与价值
适用场景
裸眼3D展示：产品展示、科技演示

教育领域：3D概念可视化、物理模拟

艺术创作：互动数字艺术、新媒体艺术

游戏开发：3D游戏原型、效果测试

虚拟现实：VR/AR应用的前端展示

技术价值
前沿技术演示：展示WebGL和裸眼3D的最新可能性

学习参考：Three.js高级用法的完整示例

性能基准：大规模3D对象渲染的性能参考

交互设计范例：3D交互控制的最佳实践 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：描述页面主要内容
			中文标题：three.js WebGL - 视觉效果 - 视差屏障3D效果演示
		-->
		<title>three.js WebGL - 视差屏障3D效果演示</title>
		
		<!-- 
			字符编码设置：
			utf-8 支持中文等多国语言字符显示
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)元标签：
			- width=device-width: 宽度设置为设备宽度
			- user-scalable=no: 禁止用户手动缩放页面
			- minimum-scale=1.0: 最小缩放比例为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": 指定文件类型为CSS
			- rel="stylesheet": 定义文件与HTML文档的关系为样式表
			- href="main.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>

	<body>
		<!-- 
			信息展示区域：
			- id="info": 为这个div元素分配唯一标识符"info"，便于CSS或JavaScript操作
			内容已替换为中文：
			- 第一行：显示技术来源（three.js）和效果名称（视差屏障）
			- 第二行：显示使用的天空盒资源作者信息
			- target="_blank": 在新标签页中打开链接
			- rel="noopener": 安全设置，防止新页面访问原页面的window对象
		-->
		<div id="info">
			<!-- 
				第一行：技术来源链接和效果描述
				<br/> 是换行标签，结束标签可写为<br>或<br/>
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - 视差屏障3D效果演示<br/>
			<!-- 
				第二行：天空盒资源作者信息
				使用Paul Debevec制作的Pisa（比萨）天空盒纹理
			-->
			天空盒纹理来自 <a href="https://www.pauldebevec.com/" target="_blank" rel="noopener">Paul Debevec</a>
		</div>

		<!-- 
			导入映射(Import Maps)：
			这是现代JavaScript模块系统的一部分，用于定义模块导入的路径映射
			允许在import语句中使用简短的模块名称而不是完整的URL路径
			
			<script type="importmap">: 指定脚本类型为导入映射
			{
				"imports": {  // imports字段定义模块映射关系
					"three": "../build/three.module.js",  // 将"three"映射到three.js主库文件
					"three/addons/": "./jsm/"  // 将"three/addons/"路径前缀映射到本地jsm目录
				}
			}
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块：
			- type="module": 表示这是一个ES6模块，支持模块化导入导出
			- 模块代码会延迟执行，直到HTML文档解析完成
		-->
		<script type="module">

			// ========== 模块导入部分 ==========
			
			// 导入Three.js核心库的所有内容，命名为THREE
			// THREE对象将包含所有Three.js的核心类和方法
			import * as THREE from 'three';

			// 从Three.js附加组件中导入视差屏障效果器
			// ParallaxBarrierEffect是一个专门用于创建裸眼3D效果的特殊渲染器
			import { ParallaxBarrierEffect } from 'three/addons/effects/ParallaxBarrierEffect.js';

			// ========== 全局变量声明 ==========
			
			// Three.js核心对象变量声明（稍后在init函数中初始化）
			let container;  // 用于存放Three.js渲染器canvas的DOM容器元素
			let camera;    // 3D场景的相机，决定用户看到的内容
			let scene;     // 3D场景对象，包含所有3D物体、灯光等
			let renderer;  // WebGL渲染器，负责将3D场景渲染到2D屏幕上
			let effect;    // 视差屏障效果器，用于实现特殊的3D视觉效果

			// 存储所有球体对象的数组
			// 数组是引用类型，const声明表示数组引用不变，但数组内容可以变化
			const spheres = [];

			// 鼠标位置变量
			// 用于记录鼠标在屏幕上的位置，控制相机移动
			let mouseX = 0;  // 鼠标在X轴方向的位置（水平方向）
			let mouseY = 0;  // 鼠标在Y轴方向的位置（垂直方向）

			// 窗口中心点坐标
			// 用于计算鼠标相对于窗口中心的位置，实现居中控制
			let windowHalfX = window.innerWidth / 2;   // 窗口水平中心点
			let windowHalfY = window.innerHeight / 2;  // 窗口垂直中心点

			// ========== 事件监听器设置 ==========
			
			// 为document对象添加鼠标移动事件监听器
			// 当鼠标在文档上移动时，触发onDocumentMouseMove函数
			// 'mousemove'是鼠标移动事件类型
			document.addEventListener( 'mousemove', onDocumentMouseMove );

			// ========== 初始化调用 ==========
			
			// 调用初始化函数，启动Three.js应用
			// 这个函数会创建场景、相机、渲染器、物体等所有必要元素
			init();

			// ========== 函数定义部分 ==========

			/**
			 * 初始化函数
			 * 这是整个应用的入口函数，负责初始化所有Three.js组件
			 * 包括：场景、相机、渲染器、几何体、材质、灯光等
			 * 不接收参数，不返回值
			 */
			function init() {

				// 1. 创建DOM容器
				// document.createElement('div')：创建一个div元素
				// 这个div将作为Three.js渲染器canvas的父容器
				container = document.createElement( 'div' );
				// 将创建的div添加到body元素的末尾
				// appendChild()是DOM操作方法，将元素添加到指定父元素的子元素列表末尾
				document.body.appendChild( container );

				// 2. 创建透视相机(PerspectiveCamera)
				// 参数说明：
				// - 60：视野角度(Field of View)，单位是度，类似人眼的视野范围
				// - window.innerWidth / window.innerHeight：宽高比，确保渲染内容不变形
				// - 0.01：近裁剪面，距离相机小于0.01单位的物体不会被渲染
				// - 100：远裁剪面，距离相机大于100单位的物体不会被渲染
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
				// 设置相机位置：z轴正方向是屏幕向外的方向
				// 将相机沿z轴正方向移动3个单位，即向屏幕外移动，确保能看到场景内容
				camera.position.z = 3;

				// 3. 加载立方体贴图(CubeTexture)作为天空盒
				// 立方体贴图由6张图片组成，分别对应立方体的6个面
				// 这里使用的是比萨(Pisa)天空盒纹理
				const path = 'textures/cube/pisa/';  // 纹理图片存放的基础路径
				const format = '.png';  // 图片格式
				// 定义6个面的图片URL数组，顺序为：右左上下前后
				// px: positive x (右面), nx: negative x (左面)
				// py: positive y (上面), ny: negative y (下面)
				// pz: positive z (前面), nz: negative z (后面)
				const urls = [
					path + 'px' + format, path + 'nx' + format,  // 右、左面
					path + 'py' + format, path + 'ny' + format,  // 上、下面
					path + 'pz' + format, path + 'nz' + format   // 前、后面
				];

				// 创建CubeTextureLoader实例并加载纹理
				// CubeTextureLoader是Three.js提供的立方体贴图加载器
				// .load(urls)方法异步加载6张图片并创建立方体贴图
				const textureCube = new THREE.CubeTextureLoader().load( urls );

				// 4. 创建3D场景
				// Scene是Three.js中的场景对象，是所有3D物体、灯光、相机的容器
				scene = new THREE.Scene();
				// 将立方体贴图设置为场景的背景
				// 这样场景就有了一个环绕的天空盒背景
				scene.background = textureCube;

				// 5. 创建几何体和材质
				// 创建球体几何体(SphereGeometry)
				// 参数说明：
				// - 0.1：球体半径
				// - 32：宽度分段数（经度分段），值越高球体越圆滑
				// - 16：高度分段数（纬度分段），值越高球体越圆滑
				const geometry = new THREE.SphereGeometry( 0.1, 32, 16 );
				
				// 创建基础网格材质(MeshBasicMaterial)
				// MeshBasicMaterial不受灯光影响，自身会发光
				// 参数说明：
				// - color: 0xffffff：材质颜色，白色（十六进制RGB表示）
				// - envMap: textureCube：环境贴图，使用立方体贴图作为反射/环境贴图
				const material = new THREE.MeshBasicMaterial( { 
					color: 0xffffff,      // 白色
					envMap: textureCube    // 环境贴图
				} );

				// 6. 创建500个球体并添加到场景中
				// 使用for循环创建500个球体网格
				for ( let i = 0; i < 500; i ++ ) {

					// 创建网格(Mesh)对象
					// Mesh是Three.js中几何体和材质的结合体，代表一个可渲染的3D物体
					const mesh = new THREE.Mesh( geometry, material );

					// 为每个球体设置随机位置
					// Math.random()返回0到1之间的随机数
					// Math.random() * 10 - 5 生成-5到5之间的随机数
					mesh.position.x = Math.random() * 10 - 5;  // X轴位置：-5到5之间
					mesh.position.y = Math.random() * 10 - 5;  // Y轴位置：-5到5之间
					mesh.position.z = Math.random() * 10 - 5;  // Z轴位置：-5到5之间

					// 为每个球体设置随机缩放
					// Math.random() * 3 + 1 生成1到4之间的随机数
					// 将球体在三个轴上均匀缩放（等比例缩放）
					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;

					// 将球体网格添加到场景中
					// add()方法将物体添加到场景的对象层级中
					scene.add( mesh );

					// 将球体对象添加到spheres数组中，便于后续动画控制
					// push()方法将元素添加到数组末尾
					spheres.push( mesh );

				}

				// 7. 创建WebGL渲染器
				// WebGLRenderer是Three.js的主要渲染器，使用WebGL API进行硬件加速渲染
				renderer = new THREE.WebGLRenderer();
				// 设置设备像素比，确保在高DPI屏幕（如Retina屏）上清晰显示
				// window.devicePixelRatio获取设备像素比（物理像素与CSS像素的比例）
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置动画循环回调函数
				// setAnimationLoop()替代了原来的requestAnimationFrame，用于持续渲染动画
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				// 将渲染器的canvas元素添加到之前创建的container中
				// renderer.domElement是渲染器创建的canvas元素
				container.appendChild( renderer.domElement );

				// 8. 获取窗口尺寸
				// 使用逻辑或(||)操作符提供默认值，确保尺寸不为0
				// window.innerWidth：窗口内部宽度（不包括浏览器边框和工具栏）
				// window.innerHeight：窗口内部高度
				const width = window.innerWidth || 2;   // 如果width为0，则使用2作为默认值
				const height = window.innerHeight || 2; // 如果height为0，则使用2作为默认值

				// 9. 创建视差屏障效果器
				// ParallaxBarrierEffect是一种特殊的渲染效果
				// 它通过渲染两个略有不同的视角来创建3D效果，通常用于裸眼3D屏幕
				// 需要传入基础的WebGL渲染器作为参数
				effect = new ParallaxBarrierEffect( renderer );
				// 设置效果器的尺寸，与窗口尺寸一致
				effect.setSize( width, height );

				// 10. 添加窗口大小改变事件监听器
				// 当用户改变浏览器窗口大小时，调用onWindowResize函数
				// 确保渲染内容始终适应窗口尺寸
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 窗口大小改变事件处理函数
			 * 当浏览器窗口大小改变时，此函数被调用
			 * 重新计算相机参数和渲染器尺寸，确保3D场景正确适配新窗口尺寸
			 * 不接收参数，不返回值
			 */
			function onWindowResize() {

				// 1. 重新计算窗口中心点
				// 因为窗口大小改变了，中心点位置需要更新
				windowHalfX = window.innerWidth / 2;   // 新的水平中心点
				windowHalfY = window.innerHeight / 2;  // 新的垂直中心点

				// 2. 更新相机参数
				// 相机的宽高比需要与新的窗口宽高比保持一致
				// 否则渲染的内容会被拉伸或压缩变形
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵
				// updateProjectionMatrix()方法重新计算相机的投影变换矩阵
				// 这个矩阵定义了3D空间如何映射到2D屏幕
				camera.updateProjectionMatrix();

				// 3. 更新效果器尺寸
				// 将视差屏障效果器的渲染尺寸更新为新窗口尺寸
				effect.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 鼠标移动事件处理函数
			 * 当鼠标在文档上移动时，此函数被调用
			 * 计算鼠标相对于窗口中心的位置，用于控制相机移动
			 * 
			 * @param {MouseEvent} event - 鼠标事件对象，包含鼠标位置等信息
			 * event.clientX: 鼠标相对于浏览器窗口左上角的水平位置
			 * event.clientY: 鼠标相对于浏览器窗口左上角的垂直位置
			 */
			function onDocumentMouseMove( event ) {

				// 计算鼠标相对于窗口中心的偏移量
				// (event.clientX - windowHalfX)：鼠标位置与窗口中心点的水平差值
				// (event.clientY - windowHalfY)：鼠标位置与窗口中心点的垂直差值
				// 除以100是为了减小鼠标移动对相机的影响程度，使相机移动更平滑
				mouseX = ( event.clientX - windowHalfX ) / 100;
				mouseY = ( event.clientY - windowHalfY ) / 100;

				// 注意：这里的mouseY没有取负值，在animate函数中会取负
				// 这是因为屏幕坐标系（Y轴向下为正）与3D坐标系（Y轴向上为正）方向相反

			}

			/**
			 * 动画循环函数
			 * 这是Three.js应用的核心动画循环，每帧都会被调用（通常每秒60次）
			 * 负责更新场景状态和重新渲染画面
			 * 不接收参数，不返回值
			 */
			function animate() {

				// 1. 获取基于时间的时间戳
				// Date.now()返回自1970年1月1日以来的毫秒数
				// 乘以0.0001（即除以10000）将毫秒转换为秒，并缩小数值范围
				// timer变量随时间线性增长，可用于创建与时间相关的动画
				const timer = 0.0001 * Date.now();

				// 2. 更新相机位置（平滑跟随鼠标）
				// 使用线性插值(Lerp)实现平滑的相机移动
				// 公式：当前位置 += (目标位置 - 当前位置) * 插值因子
				// 插值因子0.05控制平滑程度：值越小越平滑，值越大响应越快
				
				// 水平方向：相机X位置平滑移动到mouseX
				// 使用+=运算符实现累积效果
				camera.position.x += ( mouseX - camera.position.x ) * .05;
				
				// 垂直方向：相机Y位置平滑移动到-mouseY
				// 注意：mouseY取负值，因为屏幕坐标系与3D坐标系Y轴方向相反
				// 屏幕坐标系：原点在左上角，Y轴向下为正
				// 3D坐标系：原点在中心，Y轴向上为正
				camera.position.y += ( - mouseY - camera.position.y ) * .05;

				// 3. 让相机始终看向场景中心点
				// lookAt()方法设置相机的朝向，使其看向指定坐标
				// scene.position是场景的位置，默认为(0, 0, 0)
				// 这样相机始终朝向场景原点，但位置会随鼠标移动而变化
				camera.lookAt( scene.position );

				// 4. 更新所有球体的位置（创建圆周运动动画）
				// 遍历spheres数组中的所有球体
				// spheres.length获取数组长度，避免在循环中重复计算
				for ( let i = 0, il = spheres.length; i < il; i ++ ) {

					// 获取当前球体对象
					// spheres[i]访问数组中第i个元素
					const sphere = spheres[ i ];

					// 使用三角函数计算球体在圆周上的位置
					// 圆周运动公式：
					// x = 半径 * cos(角度 + 相位偏移)
					// y = 半径 * sin(角度 + 相位偏移)
					
					// 球体在X轴上的位置：5 * cos(timer + i)
					// - 5：圆周半径
					// - timer：随时间变化的角度（随时间递增）
					// - i：每个球体的相位偏移，确保球体不在同一位置
					sphere.position.x = 5 * Math.cos( timer + i );
					
					// 球体在Y轴上的位置：5 * sin(timer + i * 1.1)
					// - i * 1.1：使用不同的相位偏移系数(1.1)，使球体运动轨迹略有不同
					// 这样每个球体都有独特的运动路径
					sphere.position.y = 5 * Math.sin( timer + i * 1.1 );
					
					// 注意：Z轴位置保持不变，使用初始化时设置的随机值
					// 这样球体在三维空间中形成立体分布

				}

				// 5. 使用视差屏障效果器渲染场景
				// effect.render()替代了原来的renderer.render()
				// 它会使用视差屏障算法渲染场景，产生裸眼3D效果
				// 参数：
				// - scene：要渲染的3D场景
				// - camera：使用的相机视角
				effect.render( scene, camera );

			}

		</script>

	</body>
</html>