<!-- Three.js 像素化后期处理特效演示 - 详细功能和技术点分析
🌟 项目概述
这是一个基于 Three.js 的 WebGL 应用程序，展示了一个完整的像素化后期处理特效系统。项目通过正交相机、像素化渲染通道和像素对齐算法，创建了一个具有复古像素艺术风格的 3D 场景，同时保持了高质量的光影和交互体验。

🎯 主要功能
1. 像素化渲染核心功能
实时像素化处理：将 3D 场景实时转换为像素艺术风格

可调节像素大小：支持 1-16 像素大小的动态调整

边缘轮廓检测：基于法线和深度的智能边缘检测

像素对齐平移：消除相机移动时的像素抖动

2. 交互控制系统
轨道控制器：鼠标拖拽旋转、滚轮缩放、右键平移

实时参数调整：通过 GUI 面板即时调整各项效果参数

响应式设计：自动适应不同窗口尺寸

3. 场景构建
多层次 3D 场景：包含立方体、平面、水晶二十面体

完整光影系统：环境光 + 平行光 + 聚光灯的组合照明

阴影渲染：支持物体投射和接收阴影

动态动画：水晶物体的呼吸发光和旋转动画

🔧 核心技术点
1. 正交相机系统 (Orthographic Camera)
javascript
// 核心特点：
camera = new THREE.OrthographicCamera(
  -aspectRatio, aspectRatio, 1, -1, 0.1, 10
);
无透视变形：所有物体大小相同，适合像素艺术

固定视锥体：2个单位高度，2×宽高比宽度

30度俯角：camera.position.y = 2 * Math.tan(Math.PI/6)

2. 后期处理管线架构
text
EffectComposer (合成器)
    ↓
RenderPixelatedPass (像素化通道)
    ↓
OutputPass (输出通道)
    ↓
屏幕显示
3. RenderPixelatedPass 像素化技术
低分辨率渲染：先以较低分辨率渲染场景

最近邻放大：使用 THREE.NearestFilter 保持像素边缘锐利

边缘检测算法：

法线边缘检测：基于表面法线方向变化

深度边缘检测：基于深度值（距离）突变

可调节强度：分别控制两种边缘的明显程度

4. 像素对齐算法（关键技术）
javascript
function pixelAlignFrustum(camera, aspectRatio, pixelsX, pixelsY) {
  // 核心原理：通过调整相机视锥体，确保渲染位置与像素网格对齐
  // 防止亚像素渲染导致的视觉抖动
}
算法步骤：

计算像素单位：世界空间中的像素尺寸

投影相机位置：将相机位置映射到屏幕像素坐标

计算分数偏移：找到相机位置相对于像素网格的小数部分

调整视锥体：补偿分数偏移，实现像素对齐

5. 纹理像素化处理
javascript
function pixelTexture(texture) {
  texture.minFilter = THREE.NearestFilter;  // 缩小过滤
  texture.magFilter = THREE.NearestFilter;  // 放大过滤
  texture.generateMipmaps = false;          // 禁用Mipmaps
  texture.wrapS = THREE.RepeatWrapping;     // 重复包裹
}
保持像素锐利：禁用所有插值模糊

重复平铺：适合棋盘格等重复图案

6. 自定义动画系统
时间驱动动画：使用 THREE.Clock 实现与帧率无关的平滑动画

停走缓动函数：创建走走停停的旋转效果

周期性变化：正弦函数控制发光强度和位置浮动

7. 光影与材质技术
多重光源组合：

环境光：整体基础照明

平行光：模拟日光，产生清晰阴影

聚光灯：局部重点照明

材质配置：

冯氏材质：支持高光和反射

自发光材质：水晶的呼吸发光效果

棋盘格纹理：像素化纹理处理

8. 模块化架构设计
ES6 模块导入：使用现代 JavaScript 模块系统

Import Maps：简化模块路径管理

功能分离：初始化、动画、辅助函数清晰分离

🎨 视觉效果特色
1. 像素艺术美学
清晰像素边缘：无抗锯齿，保持复古风格

单像素轮廓线：增强物体识别度

颜色限制感：像素化带来的色彩简化

2. 动态光影交互
实时阴影：所有物体投射和接收阴影

高光反射：材质表面的镜面反射

自发光动画：水晶的周期性呼吸效果

3. 交互反馈
平滑相机控制：轨道控制器提供自然交互

实时参数反馈：GUI 调整立即反映在渲染中

像素对齐切换：可对比开启/关闭的效果差异

⚡ 性能优化技术
1. 渲染优化
固定像素比：renderer.setPixelRatio() 被注释，避免不必要的超采样

适中的阴影分辨率：2048×2048 平衡质量和性能

后期处理优化：只应用必要的处理通道

2. 算法优化
高效的像素对齐计算：避免每帧不必要的重计算

缓存计算结果：重用已计算的向量和数值

条件更新：仅在必要时更新相机投影矩阵

🔍 技术亮点总结
技术点	实现方式	效果/优势
像素对齐	调整相机视锥体边界	消除平移抖动，保持像素稳定
边缘检测	法线+深度双重检测	清晰的单像素轮廓线
正交投影	OrthographicCamera	无透视变形，适合像素艺术
后期处理	EffectComposer + 自定义Pass	可扩展的效果管线
动画系统	Clock + 缓动函数	平滑的时间驱动动画
交互控制	OrbitControls + GUI	直观的参数调整和视角控制
🚀 应用场景
这个演示项目展示了多项可用于实际开发的技术：

复古游戏开发：像素艺术风格的 3D 游戏

创意可视化：艺术化的数据或概念展示

技术演示：展示 Three.js 高级特性

教育工具：学习计算机图形学概念

原型设计：快速验证视觉效果创意

📊 性能考虑
像素大小 vs 性能：像素大小越大，渲染分辨率越低，性能越好

边缘检测开销：法线和深度计算增加 GPU 负担

实时调整：所有参数可实时调整，便于效果微调

响应式设计：自动适应不同设备和分辨率

这个项目是一个完整的技术展示，既体现了 Three.js 的强大功能，也展示了如何通过创意编程实现独特的视觉效果。 -->


<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<!-- 
		页面元数据设置
		- 设置页面标题为中文描述
		- 字符编码为UTF-8，支持中文显示
		- viewport设置确保在不同设备上正确显示
	-->
	<title>Three.js WebGL - 像素化后期处理特效演示</title>
	<meta charset="utf-8">
	<!-- 
		viewport配置说明：
		- width=device-width: 宽度等于设备宽度
		- user-scalable=no: 禁止用户缩放
		- minimum-scale=1.0: 最小缩放比例为1.0
		- maximum-scale=1.0: 最大缩放比例为1.0
		这些设置确保WebGL渲染不会因缩放而变形
	-->
	<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">
		<!-- Three.js官网链接 -->
		<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
		- 像素化后期处理特效演示，支持单像素轮廓线渲染
		<!-- 原作者链接 -->
		由 <a href="https://github.com/KodyJKing" target="_blank" rel="noopener">Kody King</a> 开发<br /><br />
		<!-- 使用说明提示 -->
		提示：使用鼠标拖拽旋转视角，滚轮缩放，通过右侧面板调整参数
	</div>

	<!-- 
		Three.js渲染容器
		渲染器的canvas元素将被插入到此div中
	-->
	<div id="container"></div>

	<!-- 
		模块导入映射配置 (Import Maps)
		现代浏览器支持的模块解析机制
		允许使用简短名称导入ES模块
		
		工作原理：
		1. 当代码中使用import语句时，浏览器会查找这里的映射
		2. 将简短的模块名解析为具体的文件路径
		3. 这样可以在代码中使用'three'而不是完整的相对路径
	-->
	<script type="importmap">
		{
			"imports": {
				"three": "../build/three.module.js",
				"three/addons/": "./jsm/"
			}
		}
	</script>

	<!-- 
		主JavaScript模块
		type="module"表示这是一个ES6模块，支持import/export语法
		模块会自动延迟执行，不会阻塞页面解析
	-->
	<script type="module">

		// =============================================
		// 模块导入部分
		// =============================================
		
		// 导入Three.js核心库的所有功能
		// 使用星号(*)导入所有导出内容，并用THREE作为命名空间
		import * as THREE from 'three';

		// 导入Three.js的附加组件
		// 1. 轨道控制器：允许用户用鼠标控制相机旋转和平移
		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
		// 2. 效果合成器：后期处理的核心组件，管理多个渲染通道
		import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
		// 3. 像素化渲染通道：实现像素化效果的关键组件
		import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';
		// 4. 输出通道：后期处理链的最后一个环节，将结果输出到屏幕
		import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
		// 5. GUI库：创建交互式控制面板
		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

		// =============================================
		// 全局变量声明
		// =============================================
		
		// Three.js核心对象
		let camera;      // 相机：决定3D场景的观察视角
		let scene;       // 场景：包含所有3D对象（网格、灯光、相机等）
		let renderer;    // 渲染器：将3D场景绘制到2D画布上
		let composer;    // 效果合成器：管理后期处理流程
		let crystalMesh; // 水晶网格对象：作为场景中的动画主角
		let clock;       // 时钟：用于控制动画的时间流逝

		// GUI相关变量
		let gui;         // GUI实例：交互控制面板
		let params;      // 参数对象：存储GUI控制的各项参数

		// =============================================
		// 初始化函数调用
		// =============================================
		
		// 页面加载完成后执行初始化
		init();

		/**
		 * 初始化函数
		 * 这是整个应用程序的入口点，负责设置所有Three.js组件
		 * 
		 * 主要任务：
		 * 1. 创建相机、场景、渲染器
		 * 2. 设置灯光和3D对象
		 * 3. 配置后期处理效果
		 * 4. 创建交互控制界面
		 * 5. 设置事件监听器
		 */
		function init() {

			// 计算当前窗口的宽高比
			// 宽高比 = 宽度 / 高度，用于设置相机和渲染器
			const aspectRatio = window.innerWidth / window.innerHeight;

			// =============================================
			// 1. 相机创建和配置
			// =============================================
			
			/**
			 * 创建正交投影相机 (Orthographic Camera)
			 * 
			 * 正交相机特点：
			 * - 没有透视变形（近大远小效果）
			 * - 所有物体无论距离远近，在屏幕上大小相同
			 * - 特别适合像素艺术、2.5D游戏、CAD等应用
			 * 
			 * 参数详解：
			 * left: -aspectRatio    // 视锥体左边界
			 * right: aspectRatio     // 视锥体右边界
			 * top: 1                // 视锥体上边界
			 * bottom: -1            // 视锥体下边界
			 * near: 0.1             // 近裁剪面，比这个近的物体不渲染
			 * far: 10               // 远裁剪面，比这个远的物体不渲染
			 * 
			 * 这种设置使得视锥体总是保持2个单位高度和2*aspectRatio个单位宽度
			 */
			camera = new THREE.OrthographicCamera( 
				- aspectRatio,  // 左边界
				aspectRatio,    // 右边界  
				1,              // 上边界
				-1,             // 下边界
				0.1,            // 近裁剪面
				10              // 远裁剪面
			);
			
			/**
			 * 设置相机初始位置
			 * 
			 * 相机位置计算：
			 * y = 2 * tan(30°) = 2 * tan(π/6)
			 *    = 2 * (√3/3) ≈ 1.155
			 * 这样设置使得相机俯视场景，形成30度的俯角
			 * 
			 * 位置坐标解释：
			 * x: 0      // 水平中心
			 * y: 1.155  // 俯视高度
			 * z: 2      // 向前（屏幕内）2个单位
			 */
			camera.position.y = 2 * Math.tan( Math.PI / 6 );
			camera.position.z = 2;

			// =============================================
			// 2. 场景创建和配置
			// =============================================
			
			/**
			 * 创建场景对象
			 * 场景是所有3D对象的容器，包括：
			 * - 网格（3D模型）
			 * - 灯光
			 * - 相机
			 * - 其他辅助对象
			 */
			scene = new THREE.Scene();
			
			/**
			 * 设置场景背景颜色
			 * 使用十六进制颜色值：0x151729
			 * 这是一个深蓝色，接近夜晚的天空颜色
			 * 适合作为像素化效果的背景
			 */
			scene.background = new THREE.Color( 0x151729 );

			// =============================================
			// 3. 时钟对象创建
			// =============================================
			
			/**
			 * 创建时钟对象
			 * 用途：
			 * - 获取自创建以来经过的时间（秒）
			 * - 用于控制动画的时间流逝
			 * - 实现与帧率无关的平滑动画
			 */
			clock = new THREE.Clock();

			// =============================================
			// 4. 渲染器创建和配置
			// =============================================
			
			/**
			 * 创建WebGL渲染器
			 * WebGL是基于OpenGL ES的JavaScript API
			 * 用于在浏览器中渲染3D图形
			 */
			renderer = new THREE.WebGLRenderer();
			
			/**
			 * 启用阴影映射
			 * Three.js使用阴影贴图技术实现阴影效果：
			 * 1. 从灯光视角渲染场景深度
			 * 2. 在主渲染中比较深度值判断是否在阴影中
			 * 3. 需要网格的castShadow和receiveShadow属性配合
			 */
			renderer.shadowMap.enabled = true;
			
			/**
			 * 设置渲染器尺寸
			 * 使其填充整个浏览器窗口
			 * 
			 * 注意：这里注释掉了setPixelRatio调用
			 * 默认情况下Three.js会根据设备像素比调整
			 * 但对于像素化效果，通常希望固定像素比
			 */
			// renderer.setPixelRatio( window.devicePixelRatio ); // 注释掉以保持像素清晰度
			renderer.setSize( window.innerWidth, window.innerHeight );
			
			/**
			 * 设置动画循环
			 * setAnimationLoop替代了传统的requestAnimationFrame
			 * 优势：
			 * - 自动处理帧率同步
			 * - 在VR/AR应用中表现更好
			 * - 返回一个可用于停止循环的id
			 */
			renderer.setAnimationLoop( animate );
			
			/**
			 * 将渲染器的canvas元素添加到页面
			 * renderer.domElement是一个<canvas>元素
			 * 所有的3D图形都绘制在这个canvas上
			 */
			document.body.appendChild( renderer.domElement );

			// =============================================
			// 5. 后期处理效果配置
			// =============================================
			
			/**
			 * 创建效果合成器 (EffectComposer)
			 * 后期处理的工作流程管理器
			 * 
			 * 工作原理：
			 * 1. 使用多个渲染通道(Render Pass)处理场景
			 * 2. 每个通道执行特定的图像处理操作
			 * 3. 通道按添加顺序依次执行
			 * 4. 最终结果输出到屏幕
			 */
			composer = new EffectComposer( renderer );
			
			/**
			 * 创建像素化渲染通道 (RenderPixelatedPass)
			 * 这是实现像素化效果的核心组件
			 * 
			 * 参数说明：
			 * 参数1: 6 - 像素大小，决定像素化程度
			 * 参数2: scene - 要渲染的场景
			 * 参数3: camera - 渲染使用的相机
			 * 
			 * 实现原理：
			 * 1. 以较低分辨率渲染场景
			 * 2. 将低分辨率图像放大到屏幕尺寸
			 * 3. 使用最近邻过滤保持像素边缘锐利
			 * 4. 可选地添加单像素轮廓线
			 */
			const renderPixelatedPass = new RenderPixelatedPass( 6, scene, camera );
			composer.addPass( renderPixelatedPass );

			/**
			 * 创建输出通道 (OutputPass)
			 * 后期处理链的最后一个环节
			 * 负责将处理结果输出到屏幕
			 * 
			 * 如果没有输出通道，渲染结果不会显示
			 */
			const outputPass = new OutputPass();
			composer.addPass( outputPass );

			// =============================================
			// 6. 事件监听器设置
			// =============================================
			
			/**
			 * 监听窗口大小变化事件
			 * 当用户调整浏览器窗口大小时
			 * 需要重新调整相机和渲染器
			 */
			window.addEventListener( 'resize', onWindowResize );

			// =============================================
			// 7. 交互控制器设置
			// =============================================
			
			/**
			 * 创建轨道控制器 (OrbitControls)
			 * 提供直观的3D场景交互：
			 * - 左键拖拽：旋转相机
			 * - 右键拖拽：平移相机  
			 * - 滚轮：缩放视图
			 * 
			 * 参数：
			 * 参数1: camera - 要控制的相机
			 * 参数2: renderer.domElement - 监听事件的DOM元素
			 */
			const controls = new OrbitControls( camera, renderer.domElement );
			controls.maxZoom = 2; // 设置最大缩放限制为2倍

			// =============================================
			// 8. 图形用户界面(GUI)配置
			// =============================================
			
			// 创建GUI实例
			gui = new GUI();
			
			/**
			 * 创建参数对象
			 * 存储所有可以通过GUI控制的参数
			 * 
			 * 参数说明：
			 * pixelSize: 6             - 像素大小，值越大像素越明显
			 * normalEdgeStrength: 0.3  - 法线边缘强度，基于表面法线检测边缘
			 * depthEdgeStrength: 0.4   - 深度边缘强度，基于深度变化检测边缘
			 * pixelAlignedPanning: true - 是否启用像素对齐平移
			 */
			params = { 
				pixelSize: 6,              // 像素大小 (1-16)
				normalEdgeStrength: .3,    // 法线边缘强度 (0-2)
				depthEdgeStrength: .4,     // 深度边缘强度 (0-1)
				pixelAlignedPanning: true  // 像素对齐平移开关
			};
			
			/**
			 * 添加像素大小控制滑块
			 * 
			 * 配置选项：
			 * .min(1)   - 最小值1
			 * .max(16)  - 最大值16
			 * .step(1)  - 步长1（整数变化）
			 * .onChange - 值改变时的回调函数
			 */
			gui.add( params, 'pixelSize' ).min( 1 ).max( 16 ).step( 1 )
				.onChange( () => {
					// 当滑块值改变时，更新像素化通道的像素大小
					renderPixelatedPass.setPixelSize( params.pixelSize );
				} )
				.name('像素大小'); // 设置中文显示名称
			
			/**
			 * 添加法线边缘强度控制滑块
			 * 法线边缘检测原理：
			 * 比较相邻像素的表面法线方向
			 * 法线差异大的地方被认为是边缘
			 */
			gui.add( renderPixelatedPass, 'normalEdgeStrength' )
				.min( 0 ).max( 2 ).step( .05 )
				.name('法线边缘强度');
			
			/**
			 * 添加深度边缘强度控制滑块
			 * 深度边缘检测原理：
			 * 比较相邻像素的深度值（距离相机的距离）
			 * 深度突变的地方被认为是边缘
			 */
			gui.add( renderPixelatedPass, 'depthEdgeStrength' )
				.min( 0 ).max( 1 ).step( .05 )
				.name('深度边缘强度');
			
			/**
			 * 添加像素对齐平移复选框
			 * 启用时，相机移动会与像素网格对齐
			 * 防止平移时出现亚像素渲染导致的抖动
			 */
			gui.add( params, 'pixelAlignedPanning' )
				.name('像素对齐平移');

			// =============================================
			// 9. 纹理加载和处理
			// =============================================
			
			/**
			 * 创建纹理加载器
			 * 用于异步加载图像文件并转换为Three.js纹理
			 */
			const loader = new THREE.TextureLoader();
			
			/**
			 * 加载棋盘格纹理并应用像素化处理
			 * 
			 * 加载流程：
			 * 1. loader.load()异步加载图像
			 * 2. pixelTexture()函数处理纹理使其像素化
			 * 3. 返回处理后的纹理对象
			 * 
			 * 创建两个相同的纹理但设置不同的重复模式
			 */
			const texChecker = pixelTexture( loader.load( 'textures/checker.png' ) );
			const texChecker2 = pixelTexture( loader.load( 'textures/checker.png' ) );
			
			/**
			 * 设置纹理重复模式
			 * 
			 * repeat.set(u, v)方法：
			 * u: 水平方向重复次数
			 * v: 垂直方向重复次数
			 * 
			 * 这会在材质表面平铺纹理
			 */
			texChecker.repeat.set( 3, 3 );   // 地面纹理重复3x3次
			texChecker2.repeat.set( 1.5, 1.5 ); // 盒子纹理重复1.5x1.5次

			// =============================================
			// 10. 3D网格对象创建
			// =============================================
			
			/**
			 * 创建盒子材质
			 * 使用MeshPhongMaterial（冯氏材质）
			 * 
			 * 冯氏材质特点：
			 * - 支持镜面高光
			 * - 支持环境光和漫反射
			 * - 性能较好，适合实时渲染
			 * 
			 * 参数：map指定使用的纹理
			 */
			const boxMaterial = new THREE.MeshPhongMaterial( { map: texChecker2 } );

			/**
			 * 添加盒子到场景的辅助函数
			 * 创建并配置一个立方体网格
			 * 
			 * @param {number} boxSideLength - 立方体边长
			 * @param {number} x - X轴位置（水平方向）
			 * @param {number} z - Z轴位置（深度方向）
			 * @param {number} rotation - 绕Y轴旋转角度（弧度）
			 * @returns {THREE.Mesh} 创建的立方体网格对象
			 */
			function addBox( boxSideLength, x, z, rotation ) {

				// 创建立方体几何体
				const mesh = new THREE.Mesh( 
					// BoxGeometry参数：宽度，高度，深度
					new THREE.BoxGeometry( boxSideLength, boxSideLength, boxSideLength ), 
					boxMaterial // 使用之前创建的材质
				);
				
				// 设置阴影属性
				mesh.castShadow = true;     // 网格可以投射阴影
				mesh.receiveShadow = true;  // 网格可以接收阴影
				
				// 设置网格旋转
				mesh.rotation.y = rotation; // 绕Y轴旋转指定角度
				
				/**
				 * 设置网格位置
				 * 注意Y坐标的计算：
				 * boxSideLength / 2 + 0.0001
				 * 
				 * 解释：
				 * - boxSideLength / 2：使立方体底部接触地面
				 * - + 0.0001：添加微小偏移，防止Z-fighting
				 *   （当两个表面完全重合时产生的渲染闪烁）
				 */
				mesh.position.y = boxSideLength / 2;
				mesh.position.set( x, boxSideLength / 2 + .0001, z );
				
				// 将网格添加到场景中
				scene.add( mesh );
				return mesh; // 返回创建的网格，以便后续引用
			}

			// 使用辅助函数添加两个立方体到场景
			// 立方体1：较小，位于场景中心
			addBox( .4, 0, 0, Math.PI / 4 );      // 边长0.4，中心位置，旋转45度（π/4）
			
			// 立方体2：较大，位于左后方
			addBox( .5, - .5, - .5, Math.PI / 4 ); // 边长0.5，位置(-0.5, -0.5)，旋转45度

			/**
			 * 创建地面平面
			 * 作为场景的基础地面，其他物体放置在上面
			 */
			const planeSideLength = 2; // 平面边长为2个单位
			const planeMesh = new THREE.Mesh(
				// 创建平面几何体：宽度，高度
				new THREE.PlaneGeometry( planeSideLength, planeSideLength ),
				// 使用棋盘格纹理的冯氏材质
				new THREE.MeshPhongMaterial( { map: texChecker } )
			);
			planeMesh.receiveShadow = true; // 地面接收阴影
			planeMesh.rotation.x = - Math.PI / 2; // 旋转-90度，使平面水平（默认垂直）
			scene.add( planeMesh ); // 添加到场景

			/**
			 * 创建水晶（二十面体）网格
			 * 作为场景中的主要动画对象，吸引用户注意
			 */
			const radius = .2; // 二十面体半径为0.2个单位
			
			/**
			 * 创建二十面体几何体
			 * IcosahedronGeometry参数：
			 * 参数1: radius - 半径
			 * （还可以有参数2: detail - 细分级别，默认0）
			 */
			const geometry = new THREE.IcosahedronGeometry( radius );
			
			/**
			 * 创建水晶材质
			 * 使用特殊的参数使其看起来像发光的水晶
			 */
			crystalMesh = new THREE.Mesh(
				geometry, // 使用二十面体几何体
				new THREE.MeshPhongMaterial( {
					color: 0x68b7e9,       // 基础颜色：浅蓝色 (#68b7e9)
					emissive: 0x4f7e8b,    // 自发光颜色：深蓝绿色 (#4f7e8b)
					shininess: 10,         // 高光强度：值越大高光越小越亮
					specular: 0xffffff     // 高光颜色：白色
				} )
			);
			
			// 设置阴影属性
			crystalMesh.receiveShadow = true; // 水晶可以接收阴影
			crystalMesh.castShadow = true;    // 水晶可以投射阴影
			scene.add( crystalMesh ); // 将水晶添加到场景

			// =============================================
			// 11. 灯光设置
			// =============================================
			
			/**
			 * 添加环境光 (AmbientLight)
			 * 
			 * 环境光特点：
			 * - 均匀照射所有物体所有面
			 * - 没有方向，不产生阴影
			 * - 用于模拟间接光照，防止完全黑暗的区域
			 * 
			 * 参数：
			 * 参数1: 0x757f8e - 颜色（蓝灰色）
			 * 参数2: 3        - 强度，值越大越亮
			 */
			scene.add( new THREE.AmbientLight( 0x757f8e, 3 ) );

			/**
			 * 添加平行光 (DirectionalLight)
			 * 
			 * 平行光特点：
			 * - 模拟太阳光，所有光线平行
			 * - 有方向，可以产生清晰的阴影
			 * - 强度不随距离衰减
			 * 
			 * 参数：
			 * 参数1: 0xfffecd - 颜色（淡黄色，模拟阳光）
			 * 参数2: 1.5      - 强度
			 */
			const directionalLight = new THREE.DirectionalLight( 0xfffecd, 1.5 );
			directionalLight.position.set( 100, 100, 100 ); // 设置光源位置（右上方远处）
			directionalLight.castShadow = true; // 启用阴影投射
			
			/**
			 * 设置阴影贴图大小
			 * 更大的贴图尺寸 = 更清晰的阴影边缘
			 * 但也会消耗更多内存和性能
			 * 
			 * 2048x2048是高质量阴影的常用设置
			 */
			directionalLight.shadow.mapSize.set( 2048, 2048 );
			scene.add( directionalLight );

			/**
			 * 添加聚光灯 (SpotLight)
			 * 
			 * 聚光灯特点：
			 * - 锥形光线，有明确的照射范围
			 * - 强度随距离衰减
			 * - 可以产生柔和的阴影
			 * 
			 * 参数：
			 * 参数1: 0xffc100 - 颜色（金黄色）
			 * 参数2: 10       - 强度
			 * 参数3: 10       - 照射距离
			 * 参数4: Math.PI / 16 - 光束角度（11.25度）
			 * 参数5: .02      - 聚光锥衰减
			 * 参数6: 2        - 衰减指数
			 */
			const spotLight = new THREE.SpotLight( 0xffc100, 10, 10, Math.PI / 16, .02, 2 );
			spotLight.position.set( 2, 2, 0 ); // 设置光源位置（右上前方）
			
			/**
			 * 聚光灯目标点设置
			 * 聚光灯始终照射其目标点
			 * 需要将目标点添加到场景并设置位置
			 */
			const target = spotLight.target;   // 获取聚光灯的目标点
			scene.add( target );               // 将目标点添加到场景
			target.position.set( 0, 0, 0 );    // 设置目标点位置（场景中心）
			
			spotLight.castShadow = true; // 启用阴影投射
			scene.add( spotLight ); // 将聚光灯添加到场景
			
			/**
			 * 初始化完成
			 * 此时所有Three.js组件已创建并配置完成
			 * 动画循环(animate函数)将开始运行
			 */
		}

		/**
		 * 窗口大小变化处理函数
		 * 当浏览器窗口大小改变时自动调用
		 * 确保3D场景正确适应新的窗口尺寸
		 */
		function onWindowResize() {

			// 重新计算窗口的宽高比
			// 窗口大小变化后，宽高比可能改变
			const aspectRatio = window.innerWidth / window.innerHeight;
			
			/**
			 * 更新正交相机的左右边界
			 * 保持相机视锥体的比例与窗口一致
			 * 防止场景拉伸变形
			 */
			camera.left = - aspectRatio;  // 左边界 = -宽高比
			camera.right = aspectRatio;   // 右边界 = 宽高比
			
			/**
			 * 更新相机投影矩阵
			 * 修改相机参数后必须调用此方法
			 * 使更改生效
			 */
			camera.updateProjectionMatrix();

			/**
			 * 更新渲染器尺寸
			 * 使canvas元素填满新的窗口尺寸
			 */
			renderer.setSize( window.innerWidth, window.innerHeight );
			
			/**
			 * 更新后期处理合成器尺寸
			 * 确保后期处理效果正确应用于新的渲染尺寸
			 */
			composer.setSize( window.innerWidth, window.innerHeight );
		}

		/**
		 * 动画循环函数
		 * 这是Three.js应用的核心，每帧调用一次
		 * 通常以60FPS运行（取决于浏览器和设备性能）
		 * 
		 * 主要任务：
		 * 1. 更新场景中对象的动画状态
		 * 2. 处理相机和渲染设置
		 * 3. 渲染场景
		 */
		function animate() {

			/**
			 * 获取自时钟启动以来经过的时间（秒）
			 * 使用时钟而不是帧数计算动画
			 * 优点：动画速度与帧率无关，更加平滑
			 */
			const t = clock.getElapsedTime();

			/**
			 * 更新水晶动画效果
			 * 1. 自发光强度呼吸效果
			 * 2. 上下浮动效果
			 * 3. 旋转动画
			 */
			
			// 1. 自发光强度动画
			// 使用正弦函数创建周期性变化：Math.sin(t * 3)
			// * 0.5 + 0.5：将范围从[-1, 1]映射到[0, 1]
			crystalMesh.material.emissiveIntensity = Math.sin( t * 3 ) * .5 + .5;
			
			// 2. 上下浮动动画
			// 0.7是基础高度，加上正弦波动的幅度0.05
			// t * 2：控制浮动速度
			crystalMesh.position.y = .7 + Math.sin( t * 2 ) * .05;
			
			// 3. 旋转动画
			// 使用自定义的停走缓动函数，创建走走停停的旋转效果
			// 乘以2π将周期数转换为弧度
			crystalMesh.rotation.y = stopGoEased( t, 2, 4 ) * 2 * Math.PI;

			/**
			 * 像素对齐平移处理
			 * 根据GUI设置决定是否启用像素对齐
			 */
			
			// 获取渲染器的当前尺寸（像素）
			const rendererSize = renderer.getSize( new THREE.Vector2() );
			
			// 重新计算渲染器的宽高比
			// 注意：这里使用的是渲染器尺寸，不是窗口尺寸
			// 如果canvas有内边距或边框，两者可能不同
			const aspectRatio = rendererSize.x / rendererSize.y;
			
			// 检查是否启用了像素对齐平移
			if ( params[ 'pixelAlignedPanning' ] ) {
				/**
				 * 计算并应用像素对齐
				 * 
				 * 参数说明：
				 * 参数1: camera - 要调整的相机
				 * 参数2: aspectRatio - 渲染器宽高比
				 * 参数3: 屏幕宽度像素数（渲染后）
				 * 参数4: 屏幕高度像素数（渲染后）
				 * 
				 * Math.floor确保像素数为整数
				 * rendererSize.x / params['pixelSize']：计算像素化后的宽度像素数
				 */
				pixelAlignFrustum( 
					camera, 
					aspectRatio, 
					Math.floor( rendererSize.x / params[ 'pixelSize' ] ), // 水平像素数
					Math.floor( rendererSize.y / params[ 'pixelSize' ] )  // 垂直像素数
				);
			} else if ( camera.left != - aspectRatio || camera.top != 1.0 ) {
				/**
				 * 如果未启用像素对齐且相机已被修改过
				 * 则重置相机视锥体到默认状态
				 * 
				 * 这种情况发生在：
				 * 1. 之前启用了像素对齐
				 * 2. 用户关闭了像素对齐选项
				 * 3. 需要恢复默认的相机设置
				 */
				camera.left = - aspectRatio;
				camera.right = aspectRatio;
				camera.top = 1.0;
				camera.bottom = - 1.0;
				camera.updateProjectionMatrix(); // 应用更改
			}

			/**
			 * 使用后期处理合成器渲染场景
			 * composer.render()会：
			 * 1. 按顺序执行所有添加的渲染通道
			 * 2. 最终将结果输出到屏幕
			 * 
			 * 与直接使用renderer.render()的区别：
			 * - renderer.render()：直接渲染场景到屏幕
			 * - composer.render()：应用后期处理效果后渲染
			 */
			composer.render();
		}

		// =============================================
		// 辅助函数区域
		// =============================================

		/**
		 * 像素纹理处理函数
		 * 将普通纹理转换为像素艺术风格的纹理
		 * 
		 * 像素艺术的关键设置：
		 * 1. 使用最近邻过滤（NearestFilter）保持像素边缘锐利
		 * 2. 禁用Mipmaps防止纹理模糊
		 * 3. 设置重复包裹模式
		 * 
		 * @param {THREE.Texture} texture - Three.js纹理对象
		 * @returns {THREE.Texture} 处理后的像素化纹理
		 */
		function pixelTexture( texture ) {

			/**
			 * 设置纹理缩小过滤器
			 * THREE.NearestFilter：最近邻过滤
			 * 当纹理被缩小时，使用最近的纹素颜色
			 * 保持像素边缘清晰，不进行插值模糊
			 */
			texture.minFilter = THREE.NearestFilter;
			
			/**
			 * 设置纹理放大过滤器
			 * 同样使用最近邻过滤
			 * 当纹理被放大时，像素保持方形不模糊
			 */
			texture.magFilter = THREE.NearestFilter;
			
			/**
			 * 禁用Mipmaps生成
			 * Mipmaps是预先生成的缩小版纹理链
			 * 用于提高渲染性能和减少远处纹理闪烁
			 * 但对于像素艺术，Mipmaps会导致模糊
			 */
			texture.generateMipmaps = false;
			
			/**
			 * 设置纹理包裹模式
			 * THREE.RepeatWrapping：重复包裹
			 * 当纹理坐标超出[0,1]范围时，重复纹理
			 * 适合棋盘格、瓷砖等需要平铺的纹理
			 */
			texture.wrapS = THREE.RepeatWrapping; // 水平方向重复
			texture.wrapT = THREE.RepeatWrapping; // 垂直方向重复
			
			/**
			 * 设置纹理颜色空间
			 * THREE.SRGBColorSpace：sRGB颜色空间
			 * sRGB是标准的显示颜色空间
			 * 确保纹理颜色在屏幕上正确显示
			 * 与线性颜色空间相比，sRGB更符合人眼感知
			 */
			texture.colorSpace = THREE.SRGBColorSpace;
			
			return texture; // 返回处理后的纹理
		}

		/**
		 * 缓入缓出立方函数
		 * 创建平滑的S形缓动曲线，用于动画过渡
		 * 
		 * 数学公式：f(x) = 3x² - 2x³
		 * 这个函数满足：
		 * f(0) = 0, f(1) = 1
		 * f'(0) = 0, f'(1) = 0（起点和终点速度为0）
		 * 在中间部分变化较快
		 * 
		 * 用途：创建自然的加速和减速动画
		 * 
		 * @param {number} x - 输入值，范围[0, 1]
		 * @returns {number} 缓动后的值，范围[0, 1]
		 */
		function easeInOutCubic( x ) {
			// 公式：3x² - 2x³
			// x² * 3：二次项，创建加速
			// x³ * 2：三次项，创建减速
			// 两者结合形成S形曲线
			return x ** 2 * 3 - x ** 3 * 2;
		}

		/**
		 * 线性步进函数
		 * 将输入值线性映射到0-1范围
		 * 
		 * 数学原理：
		 * 1. 计算从edge0到edge1的宽度w
		 * 2. 计算斜率m = 1/w
		 * 3. 计算y轴截距y0 = -m * edge0
		 * 4. 线性方程：y = y0 + m * x
		 * 5. 限制结果在[0, 1]范围内
		 * 
		 * @param {number} x - 输入值
		 * @param {number} edge0 - 映射范围的起始值
		 * @param {number} edge1 - 映射范围的结束值
		 * @returns {number} 映射到[0,1]范围的值
		 */
		function linearStep( x, edge0, edge1 ) {
			const w = edge1 - edge0;      // 计算范围宽度
			const m = 1 / w;              // 计算斜率（变化率）
			const y0 = - m * edge0;       // 计算y轴截距
			
			/**
			 * THREE.MathUtils.clamp函数：
			 * 将值限制在指定范围内
			 * 
			 * 参数：
			 * 参数1: y0 + m * x - 线性映射结果
			 * 参数2: 0 - 最小值
			 * 参数3: 1 - 最大值
			 * 
			 * 如果x < edge0，结果<0，被限制为0
			 * 如果x > edge1，结果>1，被限制为1
			 */
			return THREE.MathUtils.clamp( y0 + m * x, 0, 1 );
		}

		/**
		 * 停走缓动函数
		 * 创建周期性的动画，每个周期包含停止时间和运动时间
		 * 
		 * 工作原理：
		 * 1. 将时间划分为固定长度的周期
		 * 2. 每个周期内，前downtime秒保持静止
		 * 3. 后(period-downtime)秒执行缓动运动
		 * 4. 运动部分使用缓入缓出曲线
		 * 
		 * 应用：创建走走停停的动画效果
		 * 例如：水晶旋转几圈后暂停，再继续旋转
		 * 
		 * @param {number} x - 当前时间（秒）
		 * @param {number} downtime - 每个周期中的停止时间（秒）
		 * @param {number} period - 总周期时间（秒）
		 * @returns {number} 缓动后的值
		 */
		function stopGoEased( x, downtime, period ) {
			/**
			 * 计算当前周期数
			 * (x / period) | 0 是位运算取整技巧
			 * 相当于Math.floor(x / period)
			 * 但性能更好（对于正数）
			 * 
			 * 示例：如果period=4，x=5.3
			 * 5.3/4=1.325，取整后cycle=1
			 */
			const cycle = ( x / period ) | 0;
			
			/**
			 * 计算当前周期内的时间
			 * 总时间减去已完成的周期数×周期长度
			 * 
			 * 示例：x=5.3, period=4, cycle=1
			 * tween = 5.3 - 1×4 = 1.3
			 * 表示当前处于第2个周期的1.3秒处
			 */
			const tween = x - cycle * period;
			
			/**
			 * 计算缓动值：
			 * 1. 使用linearStep将当前时间映射到[0,1]范围
			 *    从downtime开始，到period结束
			 *    如果tween<downtime，linearStep返回0
			 *    如果tween>period，linearStep返回1（但不会发生，因为tween<period）
			 * 2. 使用easeInOutCubic对线性值进行缓动
			 *    创建平滑的加速减速效果
			 */
			const linStep = easeInOutCubic( linearStep( tween, downtime, period ) );
			
			/**
			 * 返回最终值：
			 * cycle：已完成的完整周期数
			 * + linStep：当前周期内的进度（0-1）
			 * 
			 * 结果是一个连续递增的值
			 * 但增长过程中有停顿（当tween<downtime时linStep=0）
			 */
			return cycle + linStep;
		}

		/**
		 * 像素对齐视锥体函数
		 * 调整相机视锥体使渲染的像素对齐网格，防止相机移动时的像素抖动
		 * 
		 * 问题描述：
		 * 在像素化渲染中，如果相机移动不是整数像素的倍数
		 * 物体边缘会在像素之间移动，导致亚像素渲染
		 * 这会造成视觉上的闪烁或抖动
		 * 
		 * 解决方案：
		 * 计算相机位置相对于像素网格的偏移
		 * 调整相机视锥体边界来补偿这个偏移
		 * 确保相机移动时，场景始终与像素网格对齐
		 * 
		 * @param {THREE.OrthographicCamera} camera - 正交相机对象
		 * @param {number} aspectRatio - 屏幕宽高比（宽度/高度）
		 * @param {number} pixelsPerScreenWidth - 屏幕宽度像素数（渲染后）
		 * @param {number} pixelsPerScreenHeight - 屏幕高度像素数（渲染后）
		 */
		function pixelAlignFrustum( camera, aspectRatio, pixelsPerScreenWidth, pixelsPerScreenHeight ) {

			/**
			 * 0. 计算像素网格单位（世界单位）
			 * 目的：找出每个像素在世界坐标系中的大小
			 * 
			 * 计算步骤：
			 * 1. 计算世界空间中的屏幕宽度和高度
			 * 2. 除以像素数得到每个像素的世界单位大小
			 */
			
			// 计算世界空间中的屏幕宽度
			// (camera.right - camera.left) / camera.zoom
			// camera.right - camera.left：视锥体宽度
			// 除以camera.zoom：考虑相机缩放
			const worldScreenWidth = ( ( camera.right - camera.left ) / camera.zoom );
			
			// 计算世界空间中的屏幕高度
			const worldScreenHeight = ( ( camera.top - camera.bottom ) / camera.zoom );
			
			// 计算每个像素的宽度（世界单位）
			// 世界屏幕宽度 ÷ 水平像素数
			const pixelWidth = worldScreenWidth / pixelsPerScreenWidth;
			
			// 计算每个像素的高度（世界单位）
			const pixelHeight = worldScreenHeight / pixelsPerScreenHeight;

			/**
			 * 1. 投影当前相机位置到其局部旋转基向量
			 * 目的：找出相机位置在屏幕像素网格中的坐标
			 * 
			 * 需要获取：
			 * - 相机在世界空间中的位置
			 * - 相机的旋转方向
			 * - 相机的右方向（X轴）和上方向（Y轴）
			 */
			
			// 获取相机在世界空间中的位置
			const camPos = new THREE.Vector3(); 
			camera.getWorldPosition( camPos );
			
			// 获取相机在世界空间中的旋转（四元数表示）
			const camRot = new THREE.Quaternion(); 
			camera.getWorldQuaternion( camRot );
			
			// 计算相机局部坐标系的右方向（X轴）
			// 局部X轴(1,0,0)应用相机旋转得到世界空间中的右方向
			const camRight = new THREE.Vector3( 1.0, 0.0, 0.0 ).applyQuaternion( camRot );
			
			// 计算相机局部坐标系的上方向（Y轴）
			const camUp = new THREE.Vector3( 0.0, 1.0, 0.0 ).applyQuaternion( camRot );
			
			// 计算相机位置在右方向上的投影（点积）
			// 这表示相机位置在屏幕X轴方向上的分量
			const camPosRight = camPos.dot( camRight );
			
			// 计算相机位置在上方向上的投影
			const camPosUp = camPos.dot( camUp );

			/**
			 * 2. 将相机位置转换为像素单位
			 * 目的：找出相机位置相当于多少个像素
			 * 
			 * 将世界单位的位置除以每个像素的世界单位大小
			 */
			const camPosRightPx = camPosRight / pixelWidth;  // X方向像素坐标
			const camPosUpPx = camPosUp / pixelHeight;       // Y方向像素坐标

			/**
			 * 3. 计算分数像素单位并转换为世界单位
			 * 目的：找出相机位置相对于像素网格的小数部分
			 * 
			 * 计算：
			 * 1. 将像素坐标四舍五入到最近的整数
			 * 2. 计算与整数像素的差值（小数部分）
			 * 3. 将小数部分转换回世界单位
			 */
			
			// 计算X方向的小数像素偏移
			// Math.round()：四舍五入到最近的整数像素
			// 差值表示相机位置相对于像素网格的偏移
			const fractX = camPosRightPx - Math.round( camPosRightPx );
			
			// 计算Y方向的小数像素偏移
			const fractY = camPosUpPx - Math.round( camPosUpPx );

			/**
			 * 4. 将分数世界单位添加到视锥体边界
			 * 目的：调整相机视锥体，补偿像素偏移
			 * 
			 * 调整原理：
			 * 通过移动相机的视锥体边界
			 * 使场景渲染位置偏移整数像素
			 * 从而消除亚像素渲染导致的抖动
			 */
			
			// 调整左右边界：减去X方向的分数偏移
			// 注意：这里调整的是视锥体边界，不是相机位置
			camera.left = - aspectRatio - ( fractX * pixelWidth );
			camera.right = aspectRatio - ( fractX * pixelWidth );
			
			// 调整上下边界：减去Y方向的分数偏移
			camera.top = 1.0 - ( fractY * pixelHeight );
			camera.bottom = - 1.0 - ( fractY * pixelHeight );
			
			/**
			 * 更新相机投影矩阵
			 * 修改相机参数后必须调用此方法
			 * 重新计算相机的投影变换矩阵
			 */
			camera.updateProjectionMatrix();
		}

	</script>
</body>

</html>