<!-- 代码功能和技术点详解
一、整体功能描述
这是一个基于Three.js的WebGL立体视觉3D演示程序，创建一个交互式的虚拟3D空间，主要功能包括：

1. 核心功能
创建500个动态运动的折射球体，形成星空效果

实现立体视觉渲染（适合VR眼镜或红蓝3D观看）

支持鼠标交互控制视角

自动适应窗口大小变化

使用天空盒创建沉浸式环境

2. 用户体验
鼠标控制：移动鼠标控制相机视角，实现第一人称观察

动态场景：所有球体进行圆周运动，形成流动的星空效果

立体效果：为左右眼分别渲染，产生深度感和立体视觉

自动适配：响应式设计，适应不同尺寸的显示设备

3. 视觉效果
使用公园环境的天空盒，提供真实的环境背景

球体具有折射材质，反射周围环境

平滑的动画和相机移动

立体分屏显示，增强3D沉浸感

二、主要技术点详解
1. Three.js核心架构
组件	作用	技术细节
场景(Scene)	所有3D对象的容器	包含几何体、灯光、相机等
相机(Camera)	定义观察视角	透视相机(PerspectiveCamera)，模拟人眼视觉效果
渲染器(Renderer)	将3D场景绘制到2D画布	WebGLRenderer，使用WebGL API
几何体(Geometry)	定义物体形状	SphereGeometry，参数化球体几何
材质(Material)	定义物体外观	MeshBasicMaterial + 环境贴图
2. 立体渲染技术
javascript
// 立体渲染的核心实现
effect = new StereoEffect(renderer);
effect.render(scene, camera);
技术原理：

双目视差：为左右眼分别渲染，水平偏移约6.5cm（平均眼距）

分屏显示：左眼图像在左半屏，右眼图像在右半屏

适用设备：

VR眼镜（左右分屏）

红蓝3D眼镜（需相应材质）

偏振3D显示器

3. 环境映射与折射
javascript
// 环境贴图设置
textureCube.mapping = THREE.CubeRefractionMapping;
material.refractionRatio = 0.95;
技术要点：

立方体贴图(CubeMap)：使用6张图片创建360°环境

折射映射：CubeRefractionMapping模拟光线折射

折射率：0.95接近玻璃的折射效果

性能优化：所有球体共享同一环境贴图

4. 动画系统
javascript
// 球体圆周运动算法
sphere.position.x = 5 * Math.cos(timer + i);
sphere.position.y = 5 * Math.sin(timer + i * 1.1);
动画技术：

基于时间的动画：timer = 0.0001 * Date.now()确保帧率无关

三角函数运动：使用cos/sin创建平滑圆周运动

相位偏移：每个球体有不同相位，形成螺旋效果

线性插值(LERP)：相机平滑跟随鼠标位置

5. 交互系统
javascript
// 鼠标交互处理
mouseX = (event.clientX - windowHalfX) * 0.01;
camera.position.x += (mouseX - camera.position.x) * .05;
交互特点：

相对坐标计算：鼠标位置转换为相对于屏幕中心

灵敏度控制：0.01缩放因子调整控制精度

平滑过渡：0.05插值因子实现流畅相机移动

视角锁定：相机始终看向场景中心

6. 性能优化技术
优化策略：

实例化共享：500个球体共享几何体和材质

批量更新：通过数组统一管理所有球体

设备像素比适配：setPixelRatio()适配高DPI屏幕

高效的渲染循环：setAnimationLoop()替代传统requestAnimationFrame

7. 响应式设计
javascript
// 窗口大小变化处理
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize(window.innerWidth, window.innerHeight);
自适应机制：

实时更新相机宽高比

重新计算投影矩阵

调整渲染器尺寸

更新鼠标坐标计算基准

三、技术架构流程图
text
开始
  ↓
初始化(init)
  ├── 创建容器和场景
  ├── 设置透视相机
  ├── 加载天空盒(立方体贴图)
  ├── 创建球体几何和材质
  ├── 批量生成500个球体
  ├── 创建WebGL渲染器
  ├── 创建立体效果器
  └── 设置事件监听器
  ↓
动画循环(animate) [每帧执行]
  ├── 更新计时器
  ├── 更新相机位置(鼠标跟随)
  ├── 更新所有球体位置(圆周运动)
  └── 立体渲染场景
  ↓
事件处理
  ├── onDocumentMouseMove: 处理鼠标移动
  └── onWindowResize: 处理窗口大小变化
四、关键技术亮点
1. 模块化设计
使用ES6模块导入

Import Map配置模块路径

清晰的函数职责分离

2. 现代Web API应用
WebGL 2.0/3.0渲染

ES6+ JavaScript特性

响应式设计模式

3. 视觉效果创新
实时环境折射

立体视觉模拟

动态粒子系统

4. 用户体验优化
平滑的交互反馈

自适应的显示方案

直观的控制方式

五、应用场景
教育演示：3D图形学、立体视觉原理教学

VR预览：虚拟现实场景预览

技术展示：WebGL和Three.js能力展示

艺术创作：交互式数字艺术装置 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题 - 描述了页面的主要功能和使用的技术
			修改为中文，明确说明这是Three.js的WebGL立体效果演示
		-->
		<title>Three.js WebGL立体效果演示 - 3D立体视觉体验</title>
		
		<!-- 
			字符编码设置
			utf-8确保中文字符正常显示
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口(viewport)元标签 - 响应式网页设计的关键
			width=device-width: 宽度设置为设备宽度
			user-scalable=no: 禁止用户手动缩放（在3D应用中常见，防止缩放影响交互）
			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">
		
		<!-- 
			外部CSS样式表链接
			用于页面的基本样式设计，如字体、颜色、布局等
			这个文件可能包含信息栏的样式、页面背景等
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>

	<body>
		<!-- 
			信息展示区域
			用于显示项目信息、技术说明和版权信息
			修改为中文，提供更友好的用户提示
		-->
		<div id="info">
			<!-- 
				技术框架链接和说明
				这里展示了项目使用的核心技术框架
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			- WebGL立体视觉效果演示
			<!-- 
				场景资源来源说明
				这里注明了天空盒纹理的作者信息
			-->
			<br>天空盒纹理由 <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a> 提供
			<br>使用说明：移动鼠标控制视角，体验3D立体效果
			<br>提示：本演示适合使用VR眼镜或红蓝3D眼镜观看
		</div>

		<!-- 
			导入映射(Import Map)配置
			这是ES6模块导入的路径映射配置，现代JavaScript模块化的关键
			允许我们为模块指定别名，简化导入路径
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主程序模块 - 使用type="module"声明为ES6模块
			这是页面的核心JavaScript代码，负责3D场景的创建和交互
		-->
		<script type="module">

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

			// 从Three.js附加组件中导入立体渲染效果器
			// StereoEffect是实现左右眼分屏渲染的关键组件
			// 这种效果常用于VR应用或3D立体显示
			import { StereoEffect } from 'three/addons/effects/StereoEffect.js';

			// ========== 全局变量声明 ==========
			
			// 场景核心变量 - 这些是构建3D应用的基础组件
			let container,     // 容器DOM元素：用于挂载Three.js的canvas元素
				camera,       // 摄像机：定义观察者的视角和视野
				scene,        // 场景：所有3D对象的容器，包含网格、灯光等
				renderer,     // 渲染器：负责将3D场景绘制到2D画布上
				effect;       // 立体效果器：处理左右眼分屏渲染的特殊效果器

			// 球体数组：存储场景中所有球体对象的引用
			// 便于批量更新和控制
			const spheres = [];

			// 鼠标位置跟踪变量
			// 记录当前鼠标在屏幕上的位置
			let mouseX = 0,   // 鼠标X坐标（水平方向）
				mouseY = 0;   // 鼠标Y坐标（垂直方向）
			
			// 窗口中心点坐标计算
			// 这些值用于将鼠标坐标转换为相对于屏幕中心的值
			let windowHalfX = window.innerWidth / 2;   // 屏幕水平中心点
			let windowHalfY = window.innerHeight / 2;  // 屏幕垂直中心点

			// ========== 事件监听器设置 ==========
			
			// 监听文档的鼠标移动事件
			// 当用户在页面上移动鼠标时，会触发onDocumentMouseMove函数
			// 这是实现鼠标交互控制的基础
			document.addEventListener( 'mousemove', onDocumentMouseMove );

			// ========== 初始化函数调用 ==========
			
			// 立即调用初始化函数，开始构建3D场景
			// 这个函数会设置好所有Three.js组件并启动动画循环
			init();

			/**
			 * 初始化函数 - 整个3D应用的入口点
			 * 职责：创建并配置所有必要的Three.js组件
			 * 包括：场景、相机、几何体、材质、渲染器等
			 * 
			 * 技术流程：
			 * 1. 创建容器和场景
			 * 2. 设置相机参数
			 * 3. 创建几何体和材质
			 * 4. 配置渲染器
			 * 5. 设置事件监听
			 */
			function init() {
				// ---------- 第1步：创建容器 ----------
				// 创建一个div元素作为Three.js的容器
				// 这个容器将包含canvas元素（WebGL渲染目标）
				container = document.createElement( 'div' );
				// 将容器添加到body中
				document.body.appendChild( container );

				// ---------- 第2步：创建相机 ----------
				// 创建透视投影相机(PerspectiveCamera)
				// 透视相机模拟人眼的视觉效果，物体距离越远看起来越小
				// 参数说明：
				// 参数1: 60 - 视野角度(Field of View, FOV)，单位是度
				//        控制相机的视野宽度，值越大看到的范围越广
				// 参数2: window.innerWidth / window.innerHeight - 宽高比
				//        确保渲染图像不会变形
				// 参数3: 0.1 - 近裁面(Near Clipping Plane)
				//        距离相机小于此值的物体不会被渲染
				// 参数4: 100 - 远裁面(Far Clipping Plane)
				//        距离相机大于此值的物体不会被渲染
				camera = new THREE.PerspectiveCamera( 
					60, 
					window.innerWidth / window.innerHeight, 
					0.1, 
					100 
				);
				// 设置相机初始位置：沿Z轴向后移动3个单位
				// 这样相机就位于场景前方，可以观察到场景内容
				camera.position.z = 3;

				// ---------- 第3步：创建场景 ----------
				// Scene是所有3D对象的容器
				// 它可以包含网格(Mesh)、灯光(Light)、相机(Camera)等
				scene = new THREE.Scene();
				
				// 设置场景背景为立方体贴图（天空盒）
				// 立方体贴图使用6张图片创建一个无缝的环境背景
				// 这极大地增强了3D场景的真实感和沉浸感
				scene.background = new THREE.CubeTextureLoader()
					// 设置纹理图片的路径
					// Park3Med是纹理集的名称，包含6个方向的图片
					.setPath( 'textures/cube/Park3Med/' )
					// 加载6张纹理图片，对应立方体的6个面：
					// px: 正X面（右面）, nx: 负X面（左面）
					// py: 正Y面（上面）, ny: 负Y面（下面）
					// pz: 正Z面（前面）, nz: 负Z面（后面）
					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );

				// ---------- 第4步：创建几何体和材质 ----------
				
				// 创建球体几何体(SphereGeometry)
				// 参数说明：
				// 参数1: 0.1 - 球体半径
				// 参数2: 32 - 水平分段数(经线分段)，值越大球体越平滑
				// 参数3: 16 - 垂直分段数(纬线分段)，值越大球体越平滑
				const geometry = new THREE.SphereGeometry( 0.1, 32, 16 );

				// 创建另一个立方体贴图用于环境映射
				// 这个贴图将用于球体材质的反射/折射效果
				const textureCube = new THREE.CubeTextureLoader()
					.setPath( 'textures/cube/Park3Med/' )
					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
				
				// 设置纹理映射类型为立方体折射映射
				// 这种映射方式会使物体看起来像有折射效果的玻璃或水晶
				// CubeRefractionMapping模拟光线通过透明材质的折射效果
				textureCube.mapping = THREE.CubeRefractionMapping;

				// 创建材质(Material)
				// MeshBasicMaterial是基础材质，不受灯光影响
				// 参数说明：
				// color: 0xffffff - 材质颜色（白色，16进制RGB表示）
				// envMap: textureCube - 环境贴图，用于反射/折射效果
				// refractionRatio: 0.95 - 折射率，模拟光线从空气进入材质的折射程度
				//        值越接近1，折射效果越不明显
				const material = new THREE.MeshBasicMaterial( { 
					color: 0xffffff,           // 白色
					envMap: textureCube,       // 环境贴图（用于折射效果）
					refractionRatio: 0.95      // 折射率
				} );

				// ---------- 第5步：创建大量球体并随机分布 ----------
				
				// 创建500个球体，形成星空效果
				for ( let i = 0; i < 500; i ++ ) {
					// 创建网格(Mesh)对象
					// Mesh是几何体和材质的组合，是实际可渲染的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;
					
					// 将球体添加到场景中
					// 只有添加到场景中的对象才会被渲染
					scene.add( mesh );
					
					// 将球体引用保存到数组中
					// 便于在动画循环中批量更新所有球体的位置
					spheres.push( mesh );
				}

				// ---------- 第6步：创建渲染器 ----------
				
				// 创建WebGL渲染器
				// WebGLRenderer使用WebGL API在canvas元素上绘制3D图形
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比
				// devicePixelRatio表示物理像素和CSS像素的比例
				// 在高DPI屏幕（如Retina屏）上，这个值可能是2或更高
				// 设置这个值可以确保在高分辨率设备上获得清晰的图像
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置动画循环
				// setAnimationLoop替代了旧的requestAnimationFrame方法
				// animate函数会被每一帧调用（通常是每秒60次）
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的canvas元素（DOM元素）添加到容器中
				// renderer.domElement就是Three.js创建的canvas元素
				container.appendChild( renderer.domElement );

				// ---------- 第7步：创建立体效果器 ----------
				
				// StereoEffect是实现立体渲染的关键
				// 它通过渲染两次场景（左右眼各一次）创建立体视觉效果
				// 这对于VR应用或需要3D立体显示的场景非常有用
				effect = new StereoEffect( renderer );
				
				// 设置效果器的渲染尺寸
				// 这个尺寸应该与窗口尺寸一致
				effect.setSize( window.innerWidth, window.innerHeight );

				// ---------- 第8步：设置窗口大小变化监听 ----------
				
				// 监听窗口的resize事件
				// 当用户改变浏览器窗口大小时，需要重新调整渲染尺寸和相机参数
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时自动调用
			 * 职责：更新相机和渲染器的参数，确保3D场景正确适配新窗口尺寸
			 * 
			 * @description
			 * 如果不处理resize事件，当窗口大小改变时：
			 * 1. 渲染内容可能被拉伸或压缩
			 * 2. 鼠标坐标计算会出错
			 * 3. 立体效果可能无法正确显示
			 */
			function onWindowResize() {
				// 重新计算窗口中心点坐标
				// 因为窗口大小改变了，中心点位置也改变了
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				// 更新相机的宽高比
				// 相机需要知道新的窗口宽高比，否则渲染的图像会变形
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 这是必要的步骤，告诉Three.js相机参数已改变
				// 如果不调用这个方法，相机的变化不会生效
				camera.updateProjectionMatrix();

				// 更新立体效果器的尺寸
				// 确保立体渲染也适应新的窗口尺寸
				effect.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 鼠标移动事件处理函数
			 * 每次鼠标移动时被调用
			 * 职责：计算鼠标相对于屏幕中心的位置，并转换为相机可用的值
			 * 
			 * @param {MouseEvent} event - 鼠标事件对象
			 * 包含clientX和clientY属性，表示鼠标在视口中的位置
			 * 
			 * @description
			 * 计算原理：
			 * 1. event.clientX - windowHalfX：得到鼠标相对于屏幕中心的偏移量
			 * 2. * 0.01：将偏移量缩小100倍，使相机移动更平滑
			 * 3. 这样处理使鼠标在屏幕边缘时相机移动幅度最大
			 */
			function onDocumentMouseMove( event ) {
				// 计算鼠标水平位置（X坐标）
				// event.clientX：鼠标距离浏览器视口左侧的像素距离
				// 减去windowHalfX：得到相对于屏幕中心的偏移（左负右正）
				// 乘以0.01：缩放因子，控制鼠标移动对相机影响的灵敏度
				mouseX = ( event.clientX - windowHalfX ) * 0.01;
				
				// 计算鼠标垂直位置（Y坐标）
				// 注意：这里使用减法，因为Three.js的Y轴正方向是向上的
				// 而浏览器的Y轴正方向是向下的，所以需要取反
				mouseY = ( event.clientY - windowHalfY ) * 0.01;
			}

			// ========== 动画循环部分 ==========

			/**
			 * 动画循环函数（每帧调用）
			 * 这是Three.js应用的核心，负责更新场景状态并重新渲染
			 * 通常每秒调用60次（与屏幕刷新率同步）
			 * 
			 * @description
			 * 主要任务：
			 * 1. 更新相机位置（跟随鼠标）
			 * 2. 更新所有球体的位置（创建动画效果）
			 * 3. 渲染场景（通过立体效果器）
			 * 
			 * 技术原理：
			 * 使用时间为基础的动画，确保在不同帧率下动画速度一致
			 */
			function animate() {
				// 获取基于时间的计时器
				// Date.now()返回自1970年1月1日以来的毫秒数
				// 乘以0.0001将其转换为秒，并缩小10000倍
				// 这样timer会随时间缓慢增加，用于创建平滑的周期性动画
				const timer = 0.0001 * Date.now();

				// ---------- 第1步：更新相机位置（鼠标跟随） ----------
				
				// 平滑移动相机到鼠标指示的位置
				// 使用线性插值(LERP)实现平滑跟随效果
				// 公式：当前位置 + (目标位置 - 当前位置) * 插值因子
				// 插值因子0.05控制跟随速度：值越小跟随越平滑但响应越慢
				
				// 水平方向（X轴）跟随
				// mouseX是目标位置，camera.position.x是当前位置
				camera.position.x += ( mouseX - camera.position.x ) * .05;
				
				// 垂直方向（Y轴）跟随，注意取反
				// 因为Three.js的Y轴正方向向上，而鼠标Y坐标向下为正
				// 所以需要使用 -mouseY 作为目标位置
				camera.position.y += ( - mouseY - camera.position.y ) * .05;
				
				// 让相机始终看向场景的中心点(0,0,0)
				// 这是创建"轨道摄像机"效果的常用技巧
				camera.lookAt( scene.position );

				// ---------- 第2步：更新所有球体的位置 ----------
				
				// 遍历球体数组，为每个球体设置新的位置
				// 使用三角函数创建圆周运动效果
				for ( let i = 0, il = spheres.length; i < il; i ++ ) {
					// 获取当前球体的引用
					const sphere = spheres[ i ];
					
					// 使用三角函数计算球体的新位置
					// 这创建了圆周运动：
					// - Math.cos和Math.sin分别控制X和Y坐标
					// - 5是圆周运动的半径
					// - timer + i：每个球体有不同的相位，形成螺旋效果
					// - i * 1.1：Y轴使用略有不同的频率，创建更复杂的运动轨迹
					sphere.position.x = 5 * Math.cos( timer + i );
					sphere.position.y = 5 * Math.sin( timer + i * 1.1 );
					// Z坐标保持不变，使用初始化时的随机值
				}

				// ---------- 第3步：渲染场景 ----------
				
				// 使用立体效果器渲染场景
				// 与普通的renderer.render()不同，StereoEffect会：
				// 1. 为左眼渲染一次场景（相机稍微向左偏移）
				// 2. 为右眼渲染一次场景（相机稍微向右偏移）
				// 3. 将两个渲染结果并排显示在屏幕上
				// 当使用VR眼镜或红蓝3D眼镜观看时，会产生立体视觉效果
				effect.render( scene, camera );
			}

		</script>

	</body>
</html>