<!-- Three.js WebGPU 立体视觉效果演示 - 代码功能与技术点详解
一、整体功能概述
这是一个基于Three.js和WebGPU的立体视觉效果演示应用，展示了三种不同的3D立体显示技术。用户可以在浏览器中实时体验不同的立体视觉效果，并通过交互界面调整参数。

二、核心功能模块
1. 立体视觉效果切换
立体声效果（Stereo）：模拟人眼左右视图的分离渲染

红蓝3D效果（Anaglyph）：经典的红蓝（红青）3D效果，使用颜色过滤

视差屏障效果（Parallax Barrier）：用于裸眼3D显示器的技术

2. 交互功能
鼠标/触摸控制：使用OrbitControls实现场景旋转、平移、缩放

实时参数调整：通过GUI面板切换效果、调整眼间距

响应式设计：自动适应窗口大小变化

3. 动态场景
500个动画球体：所有球体按照圆形轨迹运动

环境映射：球体反射周围环境，创建金属质感效果

天空盒背景：使用立方体贴图创建沉浸式环境

三、主要技术点详解
1. WebGPU渲染技术
javascript
// 使用下一代图形API WebGPU
const renderer = new THREE.WebGPURenderer();
性能优势：相比WebGL，WebGPU提供更低的CPU开销和更好的多线程支持

现代特性：支持计算着色器、更好的内存管理等新特性

向后兼容：Three.js提供兼容层，在支持WebGPU的浏览器中使用

2. 实例化渲染（Instanced Rendering）
javascript
const mesh = new THREE.InstancedMesh(geometry, material, 500);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
性能优化：500个相同几何体只使用一个绘制调用（Draw Call）

动态更新：标记为DynamicDrawUsage，优化频繁更新的数据

内存效率：共享几何体和材质，只存储不同的变换矩阵

3. 后处理管道（Post-processing Pipeline）
javascript
postProcessing = new THREE.PostProcessing(renderer);
postProcessing.outputNode = stereo;
模块化效果：每个效果作为独立节点，可灵活组合

TSL节点系统：使用Three.js Shading Language编写效果

实时切换：无需重新编译整个着色器程序

4. 立体视觉算法实现
a) 眼间距模拟
javascript
// 模拟两眼之间的距离，默认0.064（成人平均）
stereo.stereo.eyeSep = value;
b) 立体渲染原理
左右眼视图分离：从两个稍微不同的视角渲染场景

深度感知：通过视差（parallax）创建深度感

图像融合：不同技术使用不同方式融合左右眼图像

5. 动画系统
javascript
// 基于时间的动画，保证帧率无关
const elapsedTime = timer.getElapsed() * 0.1;
position.x = 5 * Math.cos(elapsedTime + i);
时间驱动：使用THREE.Timer确保动画速度在不同设备上一致

三角函数轨迹：使用正弦和余弦函数创建平滑的圆形运动

相位偏移：每个实例有不同相位，创建波浪效果

6. 资源管理
javascript
// 立方体贴图加载
scene.background = new THREE.CubeTextureLoader()
    .setPath('textures/cube/Park3Med/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
异步加载：纹理资源异步加载，不阻塞主线程

Mipmap生成：自动生成多级纹理，优化不同距离的显示

环境映射：同时用于背景和物体反射

四、技术架构特点
1. 模块化设计
javascript
// ES6模块导入
import * as THREE from 'three/webgpu';
import { stereoPass } from 'three/addons/tsl/display/StereoPassNode.js';
清晰分离：功能模块化，便于维护和扩展

按需导入：只导入需要的模块，减小打包体积

依赖管理：使用importmap管理模块路径

2. 性能优化策略
GPU友好设计：批量处理数据，减少CPU-GPU通信

内存复用：重用临时对象，避免垃圾回收压力

懒更新机制：needsUpdate标记，只在必要时更新GPU数据

3. 用户体验考虑
实时反馈：所有参数调整立即生效

平滑过渡：动画插值和效果切换平滑

错误处理：内置兼容性检查和降级策略

五、立体视觉效果技术对比
效果类型	技术原理	观看设备	优势	缺点
立体声	左右眼图像分离	VR头显/3D显示器	沉浸感强，效果好	需要专用设备
红蓝3D	颜色过滤分离	红蓝3D眼镜	成本低，兼容性好	颜色失真，易疲劳
视差屏障	光学屏障分离	裸眼3D显示器	无需眼镜	视角受限，分辨率降低
六、代码结构优势
1. 初始化流程清晰
text
1. 创建相机 → 2. 创建场景 → 3. 创建几何体 → 4. 创建渲染器
5. 设置后处理 → 6. 创建GUI → 7. 设置控制器 → 8. 开始动画
2. 分离关注点
数据层：params对象管理所有可调参数

视图层：renderer和postProcessing负责渲染

控制层：OrbitControls和GUI处理用户交互

3. 可扩展性
添加新效果：只需创建新的TSL节点并添加到GUI

参数扩展：在params中添加新参数，GUI自动适配

场景扩展：可轻松替换几何体或添加新对象

七、现代Web图形技术栈
这个演示展示了现代Web 3D应用的完整技术栈：

ES6+模块系统：现代JavaScript模块管理

WebGPU API：下一代图形渲染接口

Three.js框架：成熟的3D图形抽象层

TSL着色语言：高级着色器编程

响应式设计：适配各种设备和屏幕

八、教育价值
这个代码示例是学习以下技术的优秀教材：

WebGPU和Three.js的基础使用

立体视觉原理和实现

高性能Web图形优化

交互式3D应用的架构设计

现代JavaScript模块化开发

九、实际应用场景
产品展示：3D产品的立体展示

教育应用：立体解剖、分子结构等可视化

游戏开发：立体游戏效果原型

虚拟现实：VR应用的前端预览

艺术创作：交互式3D艺术装置 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元数据开始 -->
		<!-- 页面标题：显示在浏览器标签页上 -->
		<title>Three.js WebGPU - 立体视觉效果演示</title>
		<!-- 字符编码：指定文档使用UTF-8编码，支持中文和国际字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动设备，禁用用户缩放，固定缩放比例 -->
		<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="example.css">
		<!-- 页面元数据结束 -->
	</head>

	<body>
		<!-- 页面信息区域：展示Three.js信息和效果说明 -->
		<div id="info">
			<!-- Three.js官方Logo链接：点击跳转到Three.js官网 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
				<!-- 此处通常会有CSS背景图片显示Three.js logo -->
			</a>

			<!-- 标题包装容器 -->
			<div class="title-wrapper">
				<!-- Three.js官网主链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 页面副标题：当前演示的功能 -->
				<span>立体视觉效果演示</span>
			</div>

			<!-- 效果描述区域 -->
			<small>
				<!-- 效果说明：列出本页面展示的三种立体视觉效果 -->
				本演示展示三种立体视觉效果：立体声（Stereo）、红蓝3D（Anaglyph）和视差屏障（Parallax Barrier）。
				<br>
				<!-- 使用说明 -->
				使用右侧控制面板切换效果类型，调整眼间距参数，使用鼠标拖拽旋转视角。
			</small>
		</div>
		<!-- 信息区域结束 -->

		<!-- 导入映射（Import Map）：现代JavaScript模块系统的路径配置 -->
		<!-- 作用：告诉浏览器如何将导入语句中的模块标识符解析为实际文件路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：使用ES6模块语法 -->
		<script type="module">

			// ========================= 模块导入部分 =========================
			// 导入Three.js核心库（WebGPU版本）
			// WebGPU是新一代图形API，相比WebGL提供更好的性能和功能
			import * as THREE from 'three/webgpu';

			// 导入各种立体视觉后处理效果节点（TSL节点）
			// 这些节点使用Three.js Shading Language编写，用于后处理管道
			import { stereoPass } from 'three/addons/tsl/display/StereoPassNode.js';        // 立体声效果节点
			import { anaglyphPass } from 'three/addons/tsl/display/AnaglyphPassNode.js';    // 红蓝3D效果节点
			import { parallaxBarrierPass } from 'three/addons/tsl/display/ParallaxBarrierPassNode.js'; // 视差屏障效果节点
			
			// 导入轨道控制器：允许用户通过鼠标/触摸控制相机旋转、平移和缩放
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入调试器/检查器：提供GUI界面用于调整参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========================= 全局变量声明部分 =========================
			// 核心Three.js对象
			let camera;          // 相机：定义观察场景的视角和投影方式
			let scene;           // 场景：包含所有3D对象的容器
			let renderer;        // 渲染器：负责将3D场景绘制到2D画布
			let postProcessing;  // 后处理管道：管理各种视觉效果的处理流程

			// 立体效果对象：每种效果都是一个后处理节点
			let stereo;          // 立体声效果：模拟左右眼视图
			let anaglyph;        // 红蓝3D效果：使用颜色过滤创建3D效果
			let parallaxBarrier; // 视差屏障效果：用于裸眼3D显示

			// 场景对象和工具
			let mesh;            // 实例化网格：高效渲染大量相同几何体
			let dummy;           // 虚拟网格对象：用于计算变换矩阵的临时对象
			let timer;           // 计时器：提供精确的时间计算，用于动画

			// 临时向量：用于存储和操作3D位置，避免频繁创建新对象
			const position = new THREE.Vector3();

			// ========================= 参数配置对象 =========================
			// 存储当前效果设置，可通过GUI修改
			const params = {
				effect: 'stereo',        // 当前选中的效果类型，默认为立体声效果
				                         // 可选值：'stereo'、'anaglyph'、'parallaxBarrier'
				eyeSep: 0.064,           // 眼间距（单位：世界单位），用于模拟两眼之间的距离
				                         // 默认值0.064大约是成年人平均眼间距
			};

			// 效果类型映射表：用于GUI下拉菜单的选项显示
			// 键：显示在GUI中的文本
			// 值：对应的内部标识符
			const effects = { 
				'立体声效果': 'stereo',           // Stereo：标准左右眼立体效果
				'红蓝3D效果': 'anaglyph',        // Anaglyph：使用红蓝眼镜观看的3D效果
				'视差屏障效果': 'parallaxBarrier' // Parallax Barrier：用于裸眼3D显示的技术
			};

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

			/**
			 * 初始化函数
			 * 这是整个应用的主初始化函数，负责创建所有必要的Three.js对象和设置场景
			 * 调用顺序：创建相机 -> 创建场景 -> 创建几何体和材质 -> 创建渲染器 -> 设置后处理
			 */
			function init() {
				// ================= 1. 相机设置 =================
				// 创建透视相机（Perspective Camera）
				// 参数说明：
				//   - 60: 视野角度（Field of View），单位度，越大看到的范围越广
				//   - window.innerWidth / window.innerHeight: 宽高比，根据窗口尺寸计算
				//   - 0.1: 近裁剪面，距离相机多近开始渲染
				//   - 100: 远裁剪面，距离相机多远停止渲染
				camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
				camera.position.z = 3; // 将相机沿Z轴向后移动3个单位，以便看到场景

				// ================= 2. 场景设置 =================
				// 创建场景对象：所有3D对象的容器
				scene = new THREE.Scene();
				
				// 设置场景背景为立方体贴图（天空盒）
				// 立方体贴图由6张图片组成，模拟无限远的背景
				scene.background = new THREE.CubeTextureLoader()
					.setPath('textures/cube/Park3Med/') // 设置纹理图片路径
					.load([
						'px.jpg', // 正X面（右）
						'nx.jpg', // 负X面（左）
						'py.jpg', // 正Y面（上）
						'ny.jpg', // 负Y面（下）
						'pz.jpg', // 正Z面（前）
						'nz.jpg'  // 负Z面（后）
					]);

				// ================= 3. 计时器设置 =================
				// 创建计时器对象：用于精确的动画时间控制
				timer = new THREE.Timer();
				timer.connect(document); // 连接到文档，开始内部时钟

				// ================= 4. 几何体和材质创建 =================
				// 创建球体几何体：作为实例化对象的基础形状
				// 参数说明：
				//   - 0.1: 球体半径
				//   - 32: 水平分段数（经线），影响球体平滑度
				//   - 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']);

				// 创建基础网格材质
				// MeshBasicMaterial特点：不受光照影响，颜色均匀，性能高
				const material = new THREE.MeshBasicMaterial({
					color: 0xffffff,     // 白色（RGB: 255,255,255）
					envMap: textureCube  // 环境贴图：使球体反射周围环境
				});

				// ================= 5. 实例化网格创建 =================
				// 创建实例化网格：高效渲染大量相同几何体的技术
				// 参数说明：
				//   - geometry: 基础几何体
				//   - material: 材质
				//   - 500: 实例数量
				mesh = new THREE.InstancedMesh(geometry, material, 500);
				
				// 设置实例矩阵使用动态绘制模式
				// DynamicDrawUsage: 表示数据会频繁更新，优化GPU内存使用
				mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
			
				// 创建虚拟网格对象：作为计算变换矩阵的临时容器
				dummy = new THREE.Mesh();

				// ================= 6. 初始化实例位置和变换 =================
				// 为500个实例设置随机的位置和缩放
				for (let i = 0; i < 500; i++) {
					// 设置随机位置：每个坐标在-5到5之间
					dummy.position.x = Math.random() * 10 - 5; // X轴：-5到5
					dummy.position.y = Math.random() * 10 - 5; // Y轴：-5到5
					dummy.position.z = Math.random() * 10 - 5; // Z轴：-5到5
					
					// 设置随机缩放：所有轴相同，范围1到4
					dummy.scale.x = dummy.scale.y = dummy.scale.z = Math.random() * 3 + 1;
			
					// 更新虚拟对象的变换矩阵
					// 将位置、旋转、缩放组合成一个4x4变换矩阵
					dummy.updateMatrix();

					// 将计算好的矩阵设置到实例化网格的第i个实例
					mesh.setMatrixAt(i, dummy.matrix);
				}

				// 将实例化网格添加到场景中
				scene.add(mesh);

				// ================= 7. 渲染器设置 =================
				// 创建WebGPU渲染器
				// WebGPU是下一代图形API，相比WebGL提供更低的CPU开销和更好的多线程支持
				renderer = new THREE.WebGPURenderer();
				
				// 设置设备像素比：适应高DPI屏幕（如Retina显示屏）
				// devicePixelRatio表示物理像素与CSS像素的比值
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器大小为整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// animate函数将在每次屏幕刷新时被调用（通常是60fps）
				renderer.setAnimationLoop(animate);
				
				// 附加调试器/检查器到渲染器
				// Inspector提供GUI界面，用于调整场景参数
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到页面body中
				// renderer.domElement是HTMLCanvasElement对象
				document.body.appendChild(renderer.domElement);

				// ================= 8. 后处理管道设置 =================
				// 创建后处理管道：管理渲染后的图像处理效果
				postProcessing = new THREE.PostProcessing(renderer);
				
				// 创建三种立体视觉效果节点
				// 每个效果节点接收场景和相机作为参数
				stereo = stereoPass(scene, camera);                 // 立体声效果
				anaglyph = anaglyphPass(scene, camera);             // 红蓝3D效果
				parallaxBarrier = parallaxBarrierPass(scene, camera); // 视差屏障效果

				// 设置默认输出效果为立体声效果
				postProcessing.outputNode = stereo;

				// ================= 9. GUI控件创建 =================
				// 创建名为"Stereo Settings"的参数面板
				const gui = renderer.inspector.createParameters('立体视觉设置');
				
				// 添加效果类型下拉选择控件
				gui.add(params, 'effect', effects).onChange(update);
				// 参数说明：
				//   - params.effect: 绑定的参数对象和属性
				//   - effects: 下拉选项
				//   - .onChange(update): 值改变时调用的回调函数
				
				// 添加眼间距滑块控件
				gui.add(params, 'eyeSep', 0.001, 0.15, 0.001).onChange(function(value) {
					// 当滑块值改变时，更新所有效果的眼间距参数
					stereo.stereo.eyeSep = value;          // 更新立体声效果
					anaglyph.stereo.eyeSep = value;        // 更新红蓝3D效果
					parallaxBarrier.stereo.eyeSep = value; // 更新视差屏障效果
					
					// 注意：三个效果共享相同的眼间距参数，确保切换效果时参数一致
				});
				// 参数说明：
				//   - 0.001: 最小值（最小眼间距）
				//   - 0.15: 最大值（最大眼间距）
				//   - 0.001: 步进值（每次滑动的变化量）

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

				// ================= 11. 轨道控制器设置 =================
				// 创建轨道控制器：实现鼠标/触摸交互
				const controls = new OrbitControls(camera, renderer.domElement);
				// 参数说明：
				//   - camera: 要控制的相机
				//   - renderer.domElement: 事件监听的DOM元素
				
				// 设置相机距离限制
				controls.minDistance = 1;   // 最小缩放距离：相机不能比这更接近目标
				controls.maxDistance = 25;  // 最大缩放距离：相机不能比这更远离目标
				
				// OrbitControls自动启用以下交互：
				//   - 左键拖拽：旋转相机
				//   - 右键拖拽：平移相机
				//   - 鼠标滚轮：缩放相机
				//   - 触摸手势：移动设备上的相应操作
			}

			/**
			 * 更新效果函数
			 * 当用户在GUI中切换效果类型时调用
			 * 
			 * @param {string} value - 用户选择的效果类型标识符
			 *                        'stereo'、'anaglyph' 或 'parallaxBarrier'
			 */
			function update(value) {
				// 根据选择的效果类型切换后处理输出节点
				if (value === 'stereo') {
					// 切换到立体声效果
					postProcessing.outputNode = stereo;
					console.log('已切换到立体声效果');
				} else if (value === 'anaglyph') {
					// 切换到红蓝3D效果（需要红蓝3D眼镜观看最佳效果）
					postProcessing.outputNode = anaglyph;
					console.log('已切换到红蓝3D效果');
				} else if (value === 'parallaxBarrier') {
					// 切换到视差屏障效果（用于裸眼3D显示器）
					postProcessing.outputNode = parallaxBarrier;
					console.log('已切换到视差屏障效果');
				} else {
					// 理论上不会执行，因为GUI只提供预设选项
					console.warn('未知的效果类型:', value);
				}

				// 标记后处理管道需要更新
				// 这确保Three.js重新编译着色器和更新内部状态
				postProcessing.needsUpdate = true;
			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时调用，确保3D场景正确适配新窗口尺寸
			 */
			function onWindowResize() {
				// 更新相机宽高比：根据新的窗口尺寸计算
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 必须调用此方法使新的宽高比生效
				camera.updateProjectionMatrix();

				// 更新渲染器大小：使画布填充整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 注意：不需要手动更新后处理管道，Three.js会自动处理
				console.log('窗口大小已更新:', window.innerWidth, 'x', window.innerHeight);
			}

			/**
			 * 从变换矩阵中提取位置信息
			 * 这是一个辅助函数，从4x4变换矩阵中提取平移分量
			 * 
			 * @param {THREE.Matrix4} matrix - 4x4变换矩阵
			 * @param {THREE.Vector3} position - 用于存储提取位置的Vector3对象
			 * 
			 * 矩阵结构说明：
			 * 4x4变换矩阵的elements数组布局：
			 * [
			 *   m11, m12, m13, m14,  // 第一行：X轴变换
			 *   m21, m22, m23, m24,  // 第二行：Y轴变换
			 *   m31, m32, m33, m34,  // 第三行：Z轴变换
			 *   m41, m42, m43, m44   // 第四行：平移和透视
			 * ]
			 * 平移分量存储在：m41(X), m42(Y), m43(Z)
			 */
			function extractPosition(matrix, position) {
				// 从矩阵中提取平移分量
				// elements[12], elements[13], elements[14]对应矩阵的第四行前三个元素
				// 这是平移向量的存储位置
				position.x = matrix.elements[12];  // X坐标
				position.y = matrix.elements[13];  // Y坐标
				position.z = matrix.elements[14];  // Z坐标
				
				// 注意：这里直接操作矩阵数组元素，因为Three.js内部使用列主序存储
				// 在数学上，这些是矩阵的m41, m42, m43元素
			}

			/**
			 * 动画循环函数
			 * 这是整个应用的核心循环，每帧调用一次（通常60次/秒）
			 * 负责更新动画状态和渲染场景
			 */
			function animate() {
				// ================= 1. 更新时间 =================
				// 更新计时器状态
				// 这通常会更新内部时钟和计算自上次调用以来的时间差
				timer.update();

				// 获取经过的总时间（秒），乘以0.1使动画变慢
				// timer.getElapsed()返回自计时器启动以来的秒数
				const elapsedTime = timer.getElapsed() * 0.1;

				// ================= 2. 更新实例位置 =================
				// 遍历所有500个实例，更新它们的位置
				// 使用三角函数创建圆形运动轨迹
				for (let i = 0; i < mesh.count; i++) {
					// 获取当前实例的变换矩阵到虚拟对象
					mesh.getMatrixAt(i, dummy.matrix);

					// 从矩阵中提取当前位置
					extractPosition(dummy.matrix, position);

					// 使用三角函数计算新的位置，创建圆形运动
					// 公式解释：
					//   x = 半径 * cos(时间 + 相位偏移)
					//   y = 半径 * sin(时间 + 相位偏移 * 1.1)
					//   乘以1.1使Y轴运动与X轴略有不同，创造椭圆轨迹
					position.x = 5 * Math.cos(elapsedTime + i);      // X坐标：基于余弦函数
					position.y = 5 * Math.sin(elapsedTime + i * 1.1); // Y坐标：基于正弦函数
					// Z坐标保持不变，使用原来的Z值

					// 更新矩阵中的位置分量
					// setPosition方法只修改矩阵的平移部分，保持旋转和缩放不变
					dummy.matrix.setPosition(position);

					// 将更新后的矩阵设置回实例
					mesh.setMatrixAt(i, dummy.matrix);

					// 标记实例矩阵需要更新到GPU
					// 这是必要的，因为Three.js使用延迟更新机制优化性能
					mesh.instanceMatrix.needsUpdate = true;
				}

				// ================= 3. 渲染场景 =================
				// 执行后处理渲染
				// 这会依次执行：渲染原始场景 -> 应用选定的立体效果 -> 输出到屏幕
				postProcessing.render();
				
				// 注意：我们使用后处理管道而不是直接调用renderer.render()
				// 这是因为立体效果是后处理效果，需要在原始渲染完成后应用
			}

		</script>
		<!-- JavaScript模块结束 -->

	</body>
</html>