<!-- 代码功能和技术点详解
一、核心功能概述
这是一个基于Three.js的WebGL红蓝3D立体效果演示应用，主要功能包括：

1. 立体视觉效果
实现红蓝3D（Anaglyph）立体成像

佩戴红蓝眼镜可观看深度感知的3D场景

左右眼图像分离渲染，模拟人眼视差

2. 交互式3D场景
500个动态球体在三维空间做圆周运动

鼠标控制视角：移动鼠标可环顾3D场景

平滑相机跟随：视角移动有缓动效果

3. 环境渲染
立方体贴图天空盒：全景比萨图像作为背景

环境反射：球体表面反射天空盒内容

动态动画：球体随时间做螺旋状运动

二、主要技术点详解
1. Three.js核心架构
javascript
// 分层架构
场景(Scene) → 相机(Camera) → 渲染器(Renderer) → 效果器(Effect)
     ↑            ↑              ↑
   物体(Mesh)   视角控制         WebGL画布
     ↓            ↓              ↓
几何体+材质     投影矩阵       立体渲染
2. 立体渲染技术（核心）
AnaglyphEffect原理
javascript
// 伪代码说明立体渲染过程
function renderAnaglyph() {
    // 1. 为左眼渲染（红色通道）
    cameraLeft.position.copy(camera.position);
    cameraLeft.position.x -= eyeDistance; // 左眼偏移
    renderer.setClearColor(0x000000);
    renderer.clear();
    renderer.setViewport(0, 0, width, height);
    renderer.render(scene, cameraLeft);
    
    // 2. 为右眼渲染（青色通道）
    cameraRight.position.copy(camera.position);
    cameraRight.position.x += eyeDistance; // 右眼偏移
    renderer.setClearColor(0x000000);
    renderer.clear();
    renderer.setViewport(0, 0, width, height);
    renderer.render(scene, cameraRight);
    
    // 3. 颜色通道分离与合并
    // 左眼图像 → 红色通道
    // 右眼图像 → 青色（绿+蓝）通道
}
视差参数计算
眼间距离：左右眼虚拟相机的位置偏移

焦点距离：立体效果的焦点平面

会聚角度：控制立体效果的强度

3. 场景构建技术
立方体贴图（CubeMap）
javascript
// 6个方向的图像构成全景环境
const urls = [
    'px.png', // +X (右)
    'nx.png', // -X (左)
    'py.png', // +Y (上)
    'ny.png', // -Y (下)
    'pz.png', // +Z (前)
    'nz.png'  // -Z (后)
];
用途：

场景背景（天空盒）

环境反射贴图

特点：无缝连接，创建沉浸式环境

实例化渲染优化
javascript
// 500个球体使用相同几何体和材质
const geometry = new THREE.SphereGeometry(0.1, 32, 16);
const material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    envMap: textureCube  // 共享环境贴图
});

for (let i = 0; i < 500; i++) {
    const mesh = new THREE.Mesh(geometry, material);
    // 分别设置位置和缩放
    spheres.push(mesh);
}
优化点：共享几何体和材质，减少GPU内存占用

批处理：WebGL可批量渲染相同材质的物体

4. 动画系统
时间驱动动画
javascript
const timer = 0.0001 * Date.now(); // 基于时间而非帧率

// 圆周运动公式
sphere.position.x = 5 * Math.cos(timer + i);
sphere.position.y = 5 * Math.sin(timer + i * 1.1);
相位差：每个球体+ i产生不同的起始位置

多维运动：XY平面圆周 + Z轴随机位置 = 三维螺旋

平滑插值（Lerp）
javascript
camera.position.x += (targetX - camera.position.x) * 0.05;
阻尼系数：0.05控制跟随速度和平滑度

帧率无关：无论帧率高低，移动速度保持一致

5. 交互系统
鼠标控制映射
javascript
// 屏幕坐标 → 3D坐标映射
mouseX = (event.clientX - windowHalfX) / 100; // 归一化处理
mouseY = (event.clientY - windowHalfY) / 100;

// 坐标系转换
// 屏幕坐标：原点左上角，Y向下
// 3D坐标：原点中心，Y向上
// 因此mouseY需要取负：-mouseY
相机控制
透视相机：模拟人眼视角，有近大远小效果

注视点：camera.lookAt(scene.position)始终看向场景中心

投影矩阵更新：窗口大小变化时必须更新

6. 性能优化技术
渲染优化
javascript
// 1. 设备像素比适配
renderer.setPixelRatio(window.devicePixelRatio);
// Retina屏：pixelRatio = 2，渲染分辨率加倍

// 2. 动画循环优化
renderer.setAnimationLoop(animate); // 替代requestAnimationFrame
// 自动处理帧率同步和暂停

// 3. 循环性能优化
for (let i = 0, il = spheres.length; i < il; i++) {
    // 缓存数组长度，避免每帧读取
}
内存管理
纹理复用：天空盒同时用于背景和环境反射

几何体共享：500个球体共享同一个几何体定义

材质共享：所有球体使用相同的材质实例

7. 响应式设计
javascript
function onWindowResize() {
    // 1. 更新相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix(); // 必须调用！
    
    // 2. 更新渲染器和效果器尺寸
    effect.setSize(window.innerWidth, window.innerHeight);
    
    // 3. 更新鼠标计算基准
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
}
三、技术架构亮点
1. 模块化设计
javascript
// ES6模块化导入
import * as THREE from 'three';
import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';

// ImportMap配置（现代浏览器支持）
<script type="importmap">
{
    "imports": {
        "three": "../build/three.module.js",
        "three/addons/": "./jsm/"
    }
}
</script>
2. 渲染管线
text
1. 初始化阶段
   ↓
2. 资源加载（纹理、几何体）
   ↓
3. 场景构建（天空盒、球体）
   ↓
4. 渲染器设置（WebGL上下文）
   ↓
5. 效果器初始化（Anaglyph）
   ↓
6. 动画循环开始
   ↓
7. 每帧更新：相机位置 + 球体位置
   ↓
8. 立体渲染：左眼 → 右眼 → 合并
   ↓
9. 绘制到Canvas
3. 立体效果参数调节
在实际应用中，可以调整以下参数优化立体效果：

javascript
// 可调节的立体效果参数
const effectParams = {
    eyeDistance: 0.064,    // 眼间距（米），模拟真人眼距
    focusDistance: 3.0,    // 焦点距离，立体感最强的平面
    saturation: 1.2,       // 颜色饱和度，增强3D效果
    colorMatrix: [        // 红青颜色过滤矩阵
        0.299, 0.587, 0.114, 0, 0,
        0, 0, 0, 0, 0,
        0, 0, 0, 0, 0,
        0, 0, 0, 1, 0
    ]
};
四、应用场景扩展
此技术框架可应用于：

教育演示：3D几何、物理现象可视化

产品展示：红蓝3D产品模型查看

艺术创作：立体艺术装置

游戏开发：简易立体游戏原型

虚拟现实：低成本VR体验方案

五、性能指标
渲染对象：500个球体 + 天空盒

目标帧率：60 FPS（与显示器刷新率同步）

内存占用：约50-100MB（取决于纹理分辨率）

GPU负载：中等（批处理优化后） -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			title标签：定义网页标题，显示在浏览器标签页上
			更新为中文标题：Three.js WebGL 红蓝3D立体效果演示
		-->
		<title>Three.js WebGL 红蓝3D立体效果演示</title>
		
		<!-- 
			meta charset：指定文档字符编码为UTF-8
			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">
		
		<!-- 
			link标签：链接外部CSS样式表
			type="text/css"：指定链接文件类型为CSS
			rel="stylesheet"：定义当前文档与链接文件的关系为样式表
			href="main.css"：样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			id="info"的div：信息显示区域
			显示Three.js框架信息和作者信息
			更新为中文内容，包含：
			1. 技术框架信息
			2. 天空盒资源作者信息
			3. 使用说明
		-->
		<div id="info">
			<!-- 
				a标签：超链接
				target="_blank"：在新标签页打开链接
				rel="noopener"：安全特性，防止新页面通过window.opener访问原页面
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			- WebGL 3D图形库 - 红蓝3D立体效果演示<br/>
			使用说明：请佩戴红蓝3D眼镜观看立体效果<br/>
			鼠标移动控制视角，500个球体会做圆周运动<br/>
			天空盒资源由 <a href="https://www.pauldebevec.com/" target="_blank" rel="noopener">Paul Debevec</a> 提供<br/>
			技术支持：Three.js + AnaglyphEffect 立体渲染
		</div>

		<!-- 
			script type="importmap"：导入映射表
			这是ES模块的特性，用于定义模块标识符到实际文件路径的映射
			让浏览器知道如何解析import语句中的模块名称
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			type="module"：声明这是一个ES6模块
			模块具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">

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

			// 导入红蓝3D效果（立体效果）模块
			// AnaglyphEffect是一种立体渲染技术，通过不同颜色的滤镜为左右眼提供不同图像
			// 需要佩戴红蓝眼镜观看3D效果
			import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';

			// ==================== 全局变量声明 ====================
			
			// Three.js核心对象变量（稍后会在init函数中初始化）
			let container;   // DOM容器元素，用于存放Three.js的canvas
			let camera;      // 3D相机，决定观察3D场景的视角
			let scene;       // 3D场景，包含所有要渲染的3D对象
			let renderer;    // WebGL渲染器，负责将3D场景绘制到canvas上
			let effect;      // 红蓝3D效果处理器，用于生成立体视觉效果

			// 球体对象数组：用于存储场景中所有球体对象的引用
			// 方便后续对球体进行统一管理和动画控制
			const spheres = [];

			// 鼠标位置变量：记录鼠标在屏幕上的坐标
			// 用于实现鼠标控制相机视角的功能
			let mouseX = 0;  // 鼠标X坐标（水平方向）
			let mouseY = 0;  // 鼠标Y坐标（垂直方向）

			// 窗口中心点坐标：用于计算鼠标相对屏幕中心的位置
			// 这些值会在窗口大小变化时更新
			let windowHalfX = window.innerWidth / 2;   // 窗口宽度的一半
			let windowHalfY = window.innerHeight / 2;  // 窗口高度的一半

			// ==================== 事件监听器设置 ====================
			
			// 监听文档的鼠标移动事件
			// 当用户在页面上移动鼠标时，会触发onDocumentMouseMove函数
			// 注意：这里使用'addEventListener'而不是'onmousemove'，这是更现代的写法
			document.addEventListener( 'mousemove', onDocumentMouseMove );

			// ==================== 初始化调用 ====================
			
			// 调用初始化函数，启动Three.js应用
			// 这个函数会创建所有必要的3D对象并设置渲染循环
			init();

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

			/**
			 * 初始化函数 - 整个Three.js应用的入口点
			 * 功能：创建所有必要的3D对象、设置场景、加载资源、启动渲染
			 * 调用时机：页面加载完成后立即执行
			 */
			function init() {

				// ---------- 第一步：创建DOM容器 ----------
				
				// 创建一个div元素作为Three.js的容器
				// 这个容器将包含WebGL的canvas元素
				container = document.createElement( 'div' );
				
				// 将容器添加到页面的body元素中
				// 这样Three.js渲染的内容就会显示在网页上
				document.body.appendChild( container );

				// ---------- 第二步：创建3D相机 ----------
				
				// 创建透视投影相机（Perspective Camera）
				// 参数说明：
				// 1. fov (Field of View): 60度，视野角度，类似人眼的视角范围
				// 2. aspect: 宽高比，使用窗口的宽高比，确保图像不变形
				// 3. near: 0.01，近裁剪平面，离相机这个距离以内的物体不会被渲染
				// 4. far: 100，远裁剪平面，离相机这个距离以外的物体不会被渲染
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
				
				// 设置相机在Z轴上的位置（沿Z轴向屏幕内移动3个单位）
				// 这个位置决定了我们观察3D场景的起始点
				camera.position.z = 3;

				// ---------- 第三步：加载立方体贴图（天空盒） ----------
				
				// 定义立方体贴图的文件路径和格式
				// 立方体贴图由6张图片组成，对应3D空间的6个方向
				const path = 'textures/cube/pisa/';  // 贴图目录路径
				const format = '.png';               // 图片格式
				
				// 定义6个方向贴图的URL数组，顺序为：
				// 右(+X), 左(-X), 上(+Y), 下(-Y), 前(+Z), 后(-Z)
				const urls = [
					path + 'px' + format,  // 右面（正X方向）
					path + 'nx' + format,  // 左面（负X方向）
					path + 'py' + format,  // 上面（正Y方向）
					path + 'ny' + format,  // 下面（负Y方向）
					path + 'pz' + format,  // 前面（正Z方向，观察方向）
					path + 'nz' + format   // 后面（负Z方向）
				];

				// 创建CubeTextureLoader实例并加载立方体贴图
				// 立方体贴图用作天空盒和环境反射贴图
				const textureCube = new THREE.CubeTextureLoader().load( urls );

				// ---------- 第四步：创建3D场景 ----------
				
				// 创建Three.js场景对象
				// 场景是3D对象的容器，所有要渲染的物体都需要添加到场景中
				scene = new THREE.Scene();
				
				// 设置场景的背景为立方体贴图
				// 这样整个3D空间就有了天空盒背景
				scene.background = textureCube;

				// ---------- 第五步：创建球体几何体和材质 ----------
				
				// 创建球体几何体（Geometry）
				// 参数说明：
				// 1. radius: 0.1，球体半径
				// 2. widthSegments: 32，水平分段数（经线数），值越高球体越圆滑
				// 3. heightSegments: 16，垂直分段数（纬线数），值越高球体越圆滑
				const geometry = new THREE.SphereGeometry( 0.1, 32, 16 );
				
				// 创建基础网格材质（MeshBasicMaterial）
				// 这种材质不受光照影响，使用纯色或贴图直接显示
				// 参数对象说明：
				// - color: 0xffffff，材质颜色（白色）
				// - envMap: textureCube，环境贴图，球体会反射天空盒的内容
				const material = new THREE.MeshBasicMaterial( { 
					color: 0xffffff,      // 十六进制颜色值，白色
					envMap: textureCube   // 环境反射贴图，使用刚才加载的天空盒
				} );

				// ---------- 第六步：批量创建并添加500个球体 ----------
				
				// 使用for循环创建500个球体
				for ( let i = 0; i < 500; i ++ ) {

					// 使用相同的几何体和材质创建网格对象
					// 网格（Mesh）是Three.js中几何体和材质的组合
					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;

					// 将球体添加到场景中
					// 只有添加到场景中的对象才会被渲染
					scene.add( mesh );

					// 将球体对象添加到spheres数组中
					// 这样我们可以在动画循环中统一控制所有球体
					spheres.push( mesh );

				}

				// ---------- 第七步：创建WebGL渲染器 ----------
				
				// 创建WebGL渲染器实例
				// WebGLRenderer使用WebGL API在canvas上绘制3D图形
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比
				// window.devicePixelRatio获取设备的物理像素与CSS像素的比值
				// 在高DPI屏幕（如Retina屏幕）上，这个值可能是2或更高
				// 设置这个值可以确保在高分辨率设备上获得清晰的渲染效果
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置动画循环函数
				// setAnimationLoop是Three.js提供的渲染循环方法
				// 它会持续调用animate函数，通常每秒60次（与屏幕刷新率同步）
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的canvas元素（domElement）添加到容器中
				// 这样canvas就会显示在网页上
				container.appendChild( renderer.domElement );

				// ---------- 第八步：创建红蓝3D效果器 ----------
				
				// 获取窗口尺寸，兼容性处理
				// 如果window.innerWidth未定义，则使用默认值2
				const width = window.innerWidth || 2;
				const height = window.innerHeight || 2;

				// 创建AnaglyphEffect实例
				// 参数：WebGL渲染器
				// AnaglyphEffect会处理立体渲染，为左右眼生成不同的图像
				effect = new AnaglyphEffect( renderer );
				
				// 设置效果器的渲染尺寸
				// 这个尺寸应该与canvas的显示尺寸一致
				effect.setSize( width, height );

				// ---------- 第九步：设置窗口大小变化监听 ----------
				
				// 监听窗口的resize事件
				// 当用户调整浏览器窗口大小时，会触发onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 窗口大小变化处理函数
			 * 功能：当浏览器窗口大小改变时，调整相机和渲染器的设置
			 * 触发时机：用户调整浏览器窗口大小时自动调用
			 */
			function onWindowResize() {

				// 更新窗口半宽高值
				// 这些值用于鼠标位置计算
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				// 更新相机的宽高比
				// 窗口大小改变后，需要更新相机的宽高比以匹配新的窗口尺寸
				// 如果不更新，渲染的图像会被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 修改相机参数后，必须调用此方法更新内部投影矩阵
				// 否则更改不会生效
				camera.updateProjectionMatrix();

				// 更新效果器的渲染尺寸
				// 确保红蓝3D效果器使用新的窗口尺寸进行渲染
				effect.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 鼠标移动事件处理函数
			 * 功能：捕获鼠标位置并转换为相机控制参数
			 * @param {MouseEvent} event - 鼠标事件对象，包含鼠标位置等信息
			 * 触发时机：用户在页面上移动鼠标时
			 */
			function onDocumentMouseMove( event ) {

				// 计算鼠标相对于屏幕中心的位置
				// event.clientX: 鼠标相对于浏览器窗口的X坐标
				// event.clientY: 鼠标相对于浏览器窗口的Y坐标
				// 除以100是为了减小移动灵敏度，使相机移动更平滑
				mouseX = ( event.clientX - windowHalfX ) / 100;
				mouseY = ( event.clientY - windowHalfY ) / 100;

			}

			/**
			 * 动画循环函数
			 * 功能：Three.js的主渲染循环，每帧调用一次
			 * 触发时机：由renderer.setAnimationLoop设置，通常每秒60次
			 * 注意：这个函数本身只调用render函数，但提供了扩展的灵活性
			 */
			function animate() {

				// 调用渲染函数
				// 所有场景更新和渲染逻辑都在render函数中
				render();

			}

			/**
			 * 渲染函数 - Three.js应用的核心循环
			 * 功能：更新场景状态并渲染当前帧
			 * 每帧执行：更新相机位置、更新球体位置、执行渲染
			 */
			function render() {

				// ---------- 第一步：创建基于时间的动画计时器 ----------
				
				// 获取当前时间戳（毫秒），乘以0.0001转换为较小的值
				// Date.now()返回自1970年1月1日至今的毫秒数
				// 使用时间作为动画参数可以使动画与时间相关，而不是与帧率相关
				// 这样无论帧率如何变化，动画速度都保持一致
				const timer = 0.0001 * Date.now();

				// ---------- 第二步：更新相机位置（平滑跟随鼠标） ----------
				
				// 使用线性插值（Lerp）平滑移动相机到目标位置
				// 公式：当前位置 += (目标位置 - 当前位置) * 插值系数
				// 插值系数0.05控制移动速度，值越小移动越平滑但响应越慢
				// 这种技术称为"缓动"或"平滑跟随"
				camera.position.x += ( mouseX - camera.position.x ) * .05;
				
				// 注意：mouseY前面有负号，这是因为屏幕坐标系和3D坐标系的Y轴方向相反
				// 屏幕坐标系：原点在左上角，Y轴向下为正
				// 3D坐标系：原点在中心，Y轴向上为正
				camera.position.y += ( - mouseY - camera.position.y ) * .05;

				// 让相机始终看向场景原点(0,0,0)
				// lookAt方法设置相机的观察目标点
				// scene.position默认是(0,0,0)
				camera.lookAt( scene.position );

				// ---------- 第三步：更新所有球体的位置（圆周运动） ----------
				
				// 遍历spheres数组中的所有球体
				// 使用for循环而不是forEach，因为这里有大量对象，for循环性能更好
				// il变量缓存数组长度，避免每帧都读取length属性
				for ( let i = 0, il = spheres.length; i < il; i ++ ) {

					// 获取当前球体对象的引用
					const sphere = spheres[ i ];

					// 使用三角函数（cos和sin）计算圆周运动
					// 公式说明：
					// 1. timer + i：每个球体有不同的相位（i值不同）
					//    这使球体在圆周上错开位置，形成波浪效果
					// 2. Math.cos(timer + i)：计算X坐标，余弦函数
					// 3. Math.sin(timer + i * 1.1)：计算Y坐标，正弦函数
					//    i * 1.1：增加一点差异，使波浪效果更自然
					// 4. 乘以5：圆周运动的半径
					sphere.position.x = 5 * Math.cos( timer + i );
					sphere.position.y = 5 * Math.sin( timer + i * 1.1 );
					
					// 注意：这里没有更新Z坐标，所以球体在Z轴上保持原来的随机位置
					// 这形成了三维空间中的螺旋效果，而不是平面圆周

				}

				// ---------- 第四步：执行红蓝3D渲染 ----------
				
				// 使用AnaglyphEffect渲染场景
				// 参数：
				// 1. scene：要渲染的3D场景
				// 2. camera：观察场景的相机
				// effect.render内部会：
				// 1. 为左右眼分别渲染场景（从略微不同的视角）
				// 2. 将两个图像分别用红色和青色（红蓝3D）处理
				// 3. 合并成一个图像，通过红蓝眼镜观看时产生立体效果
				effect.render( scene, camera );

			}

		</script>

	</body>
</html>