<!-- 代码功能描述和主要技术点
一、核心功能描述
1. 主要功能
这是一个基于Three.js的选择性泛光（Bloom）特效演示。通过图层系统和后处理技术，实现了类似虚幻引擎的选择性发光效果。用户可以点击任意球体来切换其泛光状态，实时调整泛光参数。

2. 视觉表现
50个随机分布的金属质感球体

约25%的球体初始带有泛光效果

发光的球体会产生柔和的光晕效果

环境光照提供真实的金属反射

可实时调整泛光强度、范围、阈值等参数

3. 交互功能
点击交互：点击球体可切换其发光状态

相机控制：鼠标拖拽、滚轮缩放、右键平移

参数调节：右侧控制面板可调整所有视觉效果参数

响应式布局：自动适应窗口大小变化

二、技术架构与流程
1. 整体渲染流程（双通道渲染）
text
1. 用户交互/参数变化
   ↓
2. 准备渲染泛光通道
   ├── 遍历所有物体
   ├── 非泛光物体：临时替换为黑色材质
   └── 泛光物体：保持原始材质
   ↓
3. 渲染泛光通道
   ├── 只渲染泛光图层物体
   └── 应用UnrealBloomPass泛光效果
   ↓
4. 恢复所有原始材质
   ↓
5. 渲染最终场景
   ├── 渲染基础场景（所有物体）
   ├── 混合泛光效果（ShaderPass）
   └── 色调映射输出（OutputPass）
2. 核心技术点
(1) 图层系统（Layers）
javascript
const BLOOM_SCENE = 1;
const bloomLayer = new THREE.Layers();
bloomLayer.set(BLOOM_SCENE);
// 启用/禁用的方法
object.layers.enable(BLOOM_SCENE);  // 启用泛光
object.layers.disable(BLOOM_SCENE); // 禁用泛光
object.layers.toggle(BLOOM_SCENE);  // 切换状态
作用：

Three.js的32位图层系统（0-31）

将物体分组，实现选择性渲染

高效管理哪些物体参与泛光计算

(2) 材质替换技巧
javascript
// 渲染前：非泛光物体替换为黑色材质
if (obj.isMesh && bloomLayer.test(obj.layers) === false) {
    materials[obj.uuid] = obj.material;  // 缓存原始材质
    obj.material = darkMaterial;         // 替换为黑色
}

// 渲染后：恢复原始材质
obj.material = materials[obj.uuid];
优势：

避免重复创建渲染目标

只在泛光通道中隐藏非泛光物体

高效且不影响最终渲染结果

(3) 后处理合成器链
text
主渲染流程：
┌─────────────────────────────────────────────────┐
│                EffectComposer                    │
├─────────────────────────────────────────────────┤
│ 1. RenderPass      │ 渲染基础场景到纹理          │
│ 2. UnrealBloomPass │ 应用泛光效果（仅泛光物体）  │
└─────────────────────────────────────────────────┘

最终混合流程：
┌─────────────────────────────────────────────────┐
│                EffectComposer                    │
├─────────────────────────────────────────────────┤
│ 1. RenderPass      │ 渲染完整场景                │
│ 2. ShaderPass      │ 混合基础场景+泛光效果       │
│ 3. OutputPass      │ 色调映射+伽马校正          │
└─────────────────────────────────────────────────┘
(4) 自定义着色器混合
glsl
// 片段着色器核心逻辑
gl_FragColor = texture2D(baseTexture, vUv) 
               + texture2D(bloomTexture, vUv) * bloomStrength;
原理：加法混合，模拟光线散射效果

(5) UnrealBloomPass参数
threshold (阈值)：颜色亮度超过此值才产生泛光

strength (强度)：泛光的强度系数

radius (半径)：泛光扩散的范围

exposure (曝光)：整体画面亮度调整

3. 性能优化技术
(1) 按需渲染策略
不使用requestAnimationFrame循环

只在以下情况触发渲染：

javascript
1. 相机控制器变化时（用户交互）
2. GUI参数调整时
3. 点击物体切换泛光状态时
4. 窗口大小改变时
5. 场景初始化后
(2) 离屏渲染优化
javascript
// 使用HalfFloatType提高精度和性能
const bloomRenderTarget = new THREE.WebGLRenderTarget(
    width, height,
    { type: THREE.HalfFloatType }  // 半浮点数纹理
);

// 最终渲染使用4倍多重采样抗锯齿
const finalRenderTarget = new THREE.WebGLRenderTarget(
    width, height,
    { type: THREE.HalfFloatType, samples: 4 }
);
(3) 资源管理
javascript
// 材质缓存避免重复创建
const materials = {};

// 正确释放资源
function disposeMaterial(obj) {
    if (obj.material) {
        obj.material.dispose();  // 释放GPU内存
    }
}
4. 交互技术实现
(1) 3D拾取（光线投射）
javascript
// 屏幕坐标转换为标准化设备坐标（NDC）
mouse.x = (clientX / width) * 2 - 1;    // X: -1到1
mouse.y = -(clientY / height) * 2 + 1;  // Y: -1到1

// 从相机发射射线
raycaster.setFromCamera(mouse, camera);

// 检测与物体的交点
const intersects = raycaster.intersectObjects(scene.children, false);
(2) GUI参数控制
使用lil-gui库创建控制面板

实时同步参数到渲染管线的多个位置

指数函数调整曝光响应曲线

5. 视觉效果技术
(1) 物理正确的材质
javascript
new THREE.MeshStandardMaterial({
    color: color,      // 基础颜色
    roughness: 1,      // 完全粗糙（无镜面高光）
    metalness: 1       // 完全金属质感
});
(2) 环境照明
javascript
// 使用PMREM生成预过滤环境贴图
const pmremGenerator = new THREE.PMREMGenerator(renderer);
scene.environment = pmremGenerator.fromScene(
    new RoomEnvironment(),  // 预设室内环境
    0.04                    // 环境强度
).texture;
(3) 色调映射
javascript
renderer.toneMapping = THREE.NeutralToneMapping;  // 中性色调映射
renderer.toneMappingExposure = Math.pow(value, 4.0);  // 指数响应
三、技术亮点总结
1. 创新的选择性泛光实现
不是全局泛光，而是对象级别的选择性发光

通过图层系统高效管理发光物体

实时切换，无需重新编译着色器

2. 高效的双通道渲染架构
分离渲染逻辑：泛光通道 + 混合通道

材质临时替换避免额外渲染开销

离屏渲染不影响主渲染性能

3. 完整的交互体验
3D拾取精准识别点击物体

实时参数反馈，所见即所得

流畅的相机控制和响应式设计

4. 生产级的代码质量
完善的资源管理（材质释放）

错误处理（边界检查）

性能优化（按需渲染、缓存机制）

四、应用场景
1. 游戏开发
角色/武器的发光特效

技能特效的视觉增强

场景中的可交互发光物体

2. 数据可视化
突出显示重要数据点

交互式图表元素

3D地理信息系统的亮点标记

3. 产品展示
突出产品特定部分

交互式产品配置器

虚拟展厅的焦点引导

4. 艺术创作
动态光影艺术作品

交互式媒体装置

视觉特效实验

五、扩展可能性
多层级泛光：不同物体使用不同强度的泛光

颜色化泛光：为泛光效果添加颜色 tint

动态参数：基于距离/角度自动调整泛光参数

性能分级：根据设备性能自动调整渲染质量

VR/AR适配：支持VR控制器交互和立体渲染 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示示例名称和功能 -->
		<title>Three.js WebGL后处理示例 - 虚幻引擎风格选择性泛光效果</title>
		<!-- 字符编码：使用UTF-8支持中文 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动设备，禁止用户缩放以保证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> 
			点击球体可以切换泛光效果<br>
			作者：<a href="http://github.com/Temdog007" target="_blank" rel="noopener">Temdog007</a><br>
			<br>
			<strong>操作说明：</strong><br>
			1. 鼠标左键拖动：旋转视角<br>
			2. 鼠标滚轮：缩放视角<br>
			3. 右键拖动：平移视角<br>
			4. 点击任意球体：开启/关闭该球体的泛光特效<br>
			5. 右侧控制面板：调整泛光参数和画面曝光
		</div>

		<!-- 自定义着色器：顶点着色器 - 用于后处理效果的顶点变换 -->
		<script type="x-shader/x-vertex" id="vertexshader">
			// varying关键字声明变量，用于从顶点着色器向片段着色器传递数据
			varying vec2 vUv; // vUv变量将传递纹理坐标(UV坐标)到片段着色器

			void main() {
				// 将当前顶点的UV坐标赋值给vUv，供片段着色器使用
				// uv是Three.js内置的纹理坐标属性，范围从0.0到1.0
				vUv = uv;

				// 标准的三维图形渲染管线顶点变换：
				// 1. modelViewMatrix：将顶点从模型空间变换到视图空间（相机空间）
				// 2. projectionMatrix：将顶点从视图空间变换到裁剪空间
				// 3. position：当前顶点的原始位置坐标（模型空间）
				// 4. vec4(position, 1.0)：将三维坐标转换为四维齐次坐标，w分量设为1.0
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}
		</script>

		<!-- 自定义着色器：片段着色器 - 用于混合基础场景和泛光效果 -->
		<script type="x-shader/x-fragment" id="fragmentshader">
			// uniform关键字声明统一变量，这些变量由JavaScript代码传入，在着色器执行期间保持不变
			uniform sampler2D baseTexture;    // 基础场景纹理：包含原始渲染结果
			uniform sampler2D bloomTexture;   // 泛光效果纹理：包含泛光通道的渲染结果
			uniform float bloomStrength;      // 泛光强度系数：控制泛光效果的强弱

			// 从顶点着色器接收的纹理坐标
			varying vec2 vUv;

			void main() {
				// 核心混合算法：最终颜色 = 基础场景颜色 + 泛光颜色 × 泛光强度
				// 1. texture2D(baseTexture, vUv)：从基础纹理中采样对应UV坐标的颜色
				// 2. texture2D(bloomTexture, vUv)：从泛光纹理中采样对应UV坐标的颜色
				// 3. bloomStrength：控制泛光效果的混合强度，值越大泛光越明显
				// 这种加法混合会产生光晕效果，模拟真实世界中的光线散射
				gl_FragColor = ( texture2D( baseTexture, vUv ) + texture2D( bloomTexture, vUv ) * bloomStrength );
			}
		</script>

		<!-- ES模块导入映射配置：告诉浏览器如何解析模块导入路径 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：包含所有3D渲染和交互逻辑 -->
		<script type="module">

			// 导入Three.js核心库的所有功能
			// Three.js是一个用于创建3D图形的JavaScript库
			import * as THREE from 'three';

			// 导入GUI库：用于创建可交互的参数控制面板
			// lil-gui是一个轻量级的GUI库，常用于Three.js示例中
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入轨道控制器：提供鼠标控制相机旋转、平移、缩放的功能
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入后处理相关模块：
			// EffectComposer：后处理合成器，管理多个后处理通道
			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
			// RenderPass：渲染通道，将场景渲染到纹理
			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
			// ShaderPass：着色器通道，允许使用自定义着色器进行后处理
			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
			// UnrealBloomPass：虚幻引擎风格的泛光效果通道
			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
			// OutputPass：输出通道，执行色调映射和伽马校正
			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
			
			// 导入环境贴图：提供预设的HDR环境照明
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

			// ========== 常量定义 ==========
			
			// 定义泛光场景的图层编号
			// Three.js使用32位图层系统（0-31），这里使用第1层作为泛光图层
			const BLOOM_SCENE = 1;

			// ========== 图层管理 ==========
			
			// 创建图层对象，用于管理哪些3D物体应该应用泛光效果
			// 图层系统允许我们将物体分组，并对不同组应用不同的渲染处理
			const bloomLayer = new THREE.Layers();
			// 将创建的图层对象设置为第1层（BLOOM_SCENE）
			bloomLayer.set( BLOOM_SCENE );

			// ========== 参数配置 ==========
			
			// 泛光效果和渲染参数对象
			// 这些参数可以通过GUI面板实时调整
			const params = {
				threshold: 0,   // 阈值：颜色亮度超过此值才会产生泛光，范围0.0-1.0
				strength: 1,    // 强度：泛光效果的强度系数，值越大光晕越强
				radius: 0.5,    // 半径：泛光扩散的范围，影响光晕的大小
				exposure: 1     // 曝光：色调映射的曝光度，控制整体画面亮度
			};

			// ========== 材质管理 ==========
			
			// 创建纯黑色材质，用于临时替换非泛光物体
			// 在渲染泛光通道时，我们只希望泛光物体发光，其他物体应为黑色
			const darkMaterial = new THREE.MeshBasicMaterial( { color: 'black' } );
			
			// 材质缓存对象：用于存储被临时替换的原始材质
			// 键为物体UUID，值为原始材质对象
			const materials = {};

			// ========== 渲染器设置 ==========
			
			// 创建WebGL渲染器，禁用抗锯齿（因为后处理会处理抗锯齿）
			const renderer = new THREE.WebGLRenderer( { antialias: false } );
			
			// 设置设备像素比：匹配屏幕的物理像素密度
			// 这可以确保在高DPI屏幕（如Retina屏）上获得清晰渲染
			renderer.setPixelRatio( window.devicePixelRatio );
			
			// 设置渲染器尺寸为浏览器窗口大小
			renderer.setSize( window.innerWidth, window.innerHeight );
			
			// 设置色调映射类型为"中性色调映射"
			// 色调映射将HDR（高动态范围）颜色转换为LDR（低动态范围）显示
			renderer.toneMapping = THREE.NeutralToneMapping;
			
			// 将渲染器的canvas元素添加到网页body中
			document.body.appendChild( renderer.domElement );

			// ========== 场景设置 ==========
			
			// 创建主场景对象，所有3D物体都将添加到这个场景中
			const scene = new THREE.Scene();
			
			// 创建PMREM（预过滤环境贴图）生成器
			// PMREM是一种优化技术，用于实时渲染中的环境照明
			const pmremGenerator = new THREE.PMREMGenerator( renderer );
			
			// 设置场景的环境贴图
			// 1. 创建RoomEnvironment实例（一个预设的室内HDR环境）
			// 2. 使用PMREMGenerator转换为预过滤的环境贴图
			// 3. 0.04是环境强度系数
			scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;

			// ========== 相机设置 ==========
			
			// 创建透视相机：模拟人眼视角，物体近大远小
			// 参数：视野角度40度, 宽高比, 近裁剪面1单位, 远裁剪面200单位
			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
			
			// 设置相机初始位置：在Z轴上向后移动20个单位
			camera.position.set( 0, 0, 20 );
			
			// 设置相机朝向：看向场景中心点(0,0,0)
			camera.lookAt( 0, 0, 0 );

			// ========== 相机控制器 ==========
			
			// 创建轨道控制器，将相机和渲染器DOM元素关联
			// 轨道控制器允许用户用鼠标控制相机
			const controls = new OrbitControls( camera, renderer.domElement );
			
			// 限制垂直旋转角度：最大90度（防止相机翻转）
			controls.maxPolarAngle = Math.PI * 0.5;
			
			// 设置相机最小距离：不能比1单位更近
			controls.minDistance = 1;
			
			// 设置相机最大距离：不能比100单位更远
			controls.maxDistance = 100;
			
			// 监听控制器的变化事件，变化时调用render函数重新渲染
			controls.addEventListener( 'change', render );

			// ========== 后处理通道 - 基础渲染 ==========
			
			// 创建渲染通道：将整个场景渲染到纹理
			// 这是所有后处理的基础，后续效果都基于这个渲染结果
			const renderScene = new RenderPass( scene, camera );

			// ========== 后处理通道 - 泛光效果 ==========
			
			// 创建虚幻引擎风格的泛光通道
			// 参数：渲染尺寸, 强度, 半径, 阈值
			const bloomPass = new UnrealBloomPass( 
				new THREE.Vector2( window.innerWidth, window.innerHeight ), // 渲染尺寸
				1.5,    // 强度（初始值，会被params覆盖）
				0.4,    // 半径（初始值，会被params覆盖）
				0.85    // 阈值（初始值，会被params覆盖）
			);
			
			// 从params对象同步初始参数值到泛光通道
			bloomPass.threshold = params.threshold;  // 亮度阈值
			bloomPass.strength = params.strength;    // 泛光强度
			bloomPass.radius = params.radius;        // 泛光半径

			// ========== 渲染目标 - 泛光通道 ==========
			
			// 创建离屏渲染目标：用于存储泛光通道的渲染结果
			// 离屏渲染允许我们在不显示到屏幕的情况下进行渲染
			const bloomRenderTarget = new THREE.WebGLRenderTarget( 
				window.innerWidth,                    // 宽度
				window.innerHeight,                   // 高度
				{ 
					type: THREE.HalfFloatType         // 使用半浮点数纹理，提高精度和性能
				}
			);
			
			// 创建泛光效果合成器
			// 合成器管理多个后处理通道的执行顺序
			const bloomComposer = new EffectComposer( renderer, bloomRenderTarget );
			
			// 设置不直接渲染到屏幕（渲染到纹理供后续使用）
			bloomComposer.renderToScreen = false;
			
			// 向合成器添加处理通道：
			// 1. 先添加渲染通道：将场景渲染到纹理
			bloomComposer.addPass( renderScene );
			// 2. 再添加泛光通道：对渲染结果应用泛光效果
			bloomComposer.addPass( bloomPass );

			// ========== 后处理通道 - 混合着色器 ==========
			
			// 创建自定义着色器通道，用于混合基础场景和泛光效果
			const mixPass = new ShaderPass(
				// 创建着色器材质，使用之前定义的自定义着色器
				new THREE.ShaderMaterial( {
					// 统一变量：由JavaScript代码传入到着色器
					uniforms: {
						baseTexture: { value: null },  // 基础场景纹理（稍后设置）
						bloomTexture: { value: bloomComposer.renderTarget2.texture }, // 泛光纹理
						bloomStrength: { value: params.strength } // 泛光强度
					},
					// 顶点着色器代码：从页面script标签获取
					vertexShader: document.getElementById( 'vertexshader' ).textContent,
					// 片段着色器代码：从页面script标签获取
					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
					// 着色器宏定义（本例中为空）
					defines: {}
				} ), 
				'baseTexture' // 要渲染的纹理名称
			);
			
			// 设置需要交换缓冲区：每帧渲染后交换前后缓冲区
			mixPass.needsSwap = true;

			// ========== 后处理通道 - 输出通道 ==========
			
			// 创建输出通道：执行色调映射和伽马校正
			// 这是后处理管线的最后一步，准备将图像输出到屏幕
			const outputPass = new OutputPass();

			// ========== 渲染目标 - 最终输出 ==========
			
			// 创建最终渲染目标：支持多重采样抗锯齿（MSAA）
			const finalRenderTarget = new THREE.WebGLRenderTarget( 
				window.innerWidth,                    // 宽度
				window.innerHeight,                   // 高度
				{ 
					type: THREE.HalfFloatType,        // 半浮点数纹理
					samples: 4                        // 4倍多重采样抗锯齿
				}
			);
			
			// 创建最终效果合成器：管理完整的后处理管线
			const finalComposer = new EffectComposer( renderer, finalRenderTarget );
			
			// 向最终合成器添加处理通道（按顺序执行）：
			// 1. 渲染通道：渲染基础场景
			finalComposer.addPass( renderScene );
			// 2. 混合通道：将基础场景和泛光效果混合
			finalComposer.addPass( mixPass );
			// 3. 输出通道：色调映射和伽马校正
			finalComposer.addPass( outputPass );

			// ========== 交互功能 ==========
			
			// 创建光线投射器：用于3D场景中的鼠标点击检测
			// 光线投射计算从相机通过鼠标位置发射的射线与3D物体的交点
			const raycaster = new THREE.Raycaster();
			
			// 创建鼠标坐标向量：存储标准化设备坐标（NDC）
			const mouse = new THREE.Vector2();

			// 添加鼠标点击事件监听器
			window.addEventListener( 'pointerdown', onPointerDown );

			// ========== GUI控制面板 ==========
			
			// 创建GUI控制面板实例
			const gui = new GUI();

			// 创建"泛光效果"参数文件夹
			const bloomFolder = gui.addFolder( '泛光参数' );

			// 添加阈值控制滑块
			bloomFolder.add( params, 'threshold', 0.0, 1.0 )
				.name('亮度阈值')  // 显示名称
				.onChange( function ( value ) {
					// 当滑块值改变时，更新泛光通道的阈值
					bloomPass.threshold = Number( value );
					// 重新渲染场景
					render();
				} );

			// 添加强度控制滑块
			bloomFolder.add( params, 'strength', 0.0, 3 )
				.name('泛光强度')
				.onChange( function ( value ) {
					// 更新泛光通道的强度
					bloomPass.strength = Number( value );
					// 同时更新混合着色器中的强度值，保持两者同步
					mixPass.material.uniforms.bloomStrength.value = bloomPass.strength;
					// 重新渲染
					render();
				} );

			// 添加半径控制滑块
			bloomFolder.add( params, 'radius', 0.0, 1.0 )
				.step( 0.01 )  // 设置步长为0.01，提供更精确的控制
				.name('泛光半径')
				.onChange( function ( value ) {
					// 更新泛光通道的半径
					bloomPass.radius = Number( value );
					// 重新渲染
					render();
				} );

			// 创建"色调映射"参数文件夹
			const toneMappingFolder = gui.addFolder( '画面调整' );

			// 添加曝光控制滑块
			toneMappingFolder.add( params, 'exposure', 0.1, 2 )
				.name('曝光度')
				.onChange( function ( value ) {
					// 更新渲染器的曝光度
					// 使用Math.pow(value, 4.0)使滑块响应更符合人眼感知
					// 指数函数在小值范围内变化平缓，大值范围内变化剧烈
					renderer.toneMappingExposure = Math.pow( value, 4.0 );
					// 重新渲染
					render();
				} );

			// 打开所有GUI文件夹（默认展开状态）
			bloomFolder.open();
			toneMappingFolder.open();

			// ========== 初始化场景 ==========
			
			// 调用场景初始化函数
			setupScene();

			// ========== 函数定义 ==========

			/**
			 * 鼠标点击事件处理函数
			 * @param {PointerEvent} event - 鼠标事件对象
			 */
			function onPointerDown( event ) {
				// 将屏幕像素坐标转换为标准化设备坐标（NDC）
				// NDC范围：X轴从-1（左）到1（右），Y轴从-1（下）到1（上）
				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

				// 从相机位置通过鼠标NDC坐标发射光线
				raycaster.setFromCamera( mouse, camera );
				
				// 检测射线与场景中所有物体的交点
				// 参数：要检测的物体数组，是否检测后代物体（false表示只检测直接子物体）
				const intersects = raycaster.intersectObjects( scene.children, false );
				
				// 如果有交点（即点击到了物体）
				if ( intersects.length > 0 ) {
					// 获取第一个被击中的物体（最靠近相机的物体）
					const object = intersects[ 0 ].object;
					
					// 切换物体的泛光图层状态
					// toggle方法：如果图层已启用则禁用，如果已禁用则启用
					object.layers.toggle( BLOOM_SCENE );
					
					// 重新渲染场景以反映图层变化
					render();
				}
			}

			/**
			 * 窗口大小调整事件处理函数
			 * 当浏览器窗口大小改变时自动调用
			 */
			window.onresize = function () {
				// 获取新的窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机的宽高比
				camera.aspect = width / height;
				// 必须调用updateProjectionMatrix使宽高比改变生效
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				renderer.setSize( width, height );

				// 更新所有合成器的尺寸，确保后处理效果正确渲染
				bloomComposer.setSize( width, height );
				finalComposer.setSize( width, height );

				// 重新渲染场景
				render();
			};

			/**
			 * 场景初始化函数
			 * 创建和布置所有3D物体
			 */
			function setupScene() {
				// 1. 清理旧场景：遍历所有物体并释放材质资源
				scene.traverse( disposeMaterial );
				
				// 2. 清空场景：移除所有子物体
				// 直接设置children数组长度为0比逐个移除更高效
				scene.children.length = 0;

				// 3. 创建几何体：使用二十面体作为基础形状
				// 参数：半径1单位，细分级别15（细分越多球体越平滑）
				const geometry = new THREE.IcosahedronGeometry( 1, 15 );

				// 4. 创建50个随机球体
				for ( let i = 0; i < 50; i ++ ) {
					// 创建随机颜色
					const color = new THREE.Color();
					// 使用HSL色彩空间创建颜色，获得更自然的外观
					// HSL参数：色相（随机）、饱和度（0.7）、亮度（0.05到0.25之间随机）
					color.setHSL( Math.random(), 0.7, Math.random() * 0.2 + 0.05 );

					// 创建金属质感材质
					// MeshStandardMaterial支持物理正确的光照模型
					const material = new THREE.MeshStandardMaterial( { 
						color: color,     // 基础颜色
						roughness: 1,     // 粗糙度：1表示完全粗糙（无镜面反射）
						metalness: 1      // 金属度：1表示完全金属质感
					} );
					
					// 创建网格对象：将几何体和材质组合
					const sphere = new THREE.Mesh( geometry, material );
					
					// 设置随机位置：
					// 1. 先在立方体范围内随机生成位置（-5到5之间）
					sphere.position.x = Math.random() * 10 - 5;
					sphere.position.y = Math.random() * 10 - 5;
					sphere.position.z = Math.random() * 10 - 5;
					
					// 2. 将位置向量标准化（长度为1），然后乘以随机半径
					// 这样所有球体都在球形范围内分布，而不是立方体范围内
					sphere.position.normalize().multiplyScalar( Math.random() * 4.0 + 2.0 );
					
					// 设置随机缩放：使用Math.random() * Math.random()使小尺寸球体更多
					// 结果范围：0.5到1.5之间
					sphere.scale.setScalar( Math.random() * Math.random() + 0.5 );
					
					// 将球体添加到场景
					scene.add( sphere );

					// 随机决定是否启用泛光效果
					// 25%的概率初始启用泛光（大约12-13个球体会发光）
					if ( Math.random() < 0.25 ) {
						sphere.layers.enable( BLOOM_SCENE );
					}
				}

				// 5. 执行初始渲染
				render();
			}

			/**
			 * 材质清理函数
			 * 释放材质占用的GPU内存
			 * @param {THREE.Object3D} obj - 要清理的3D对象
			 */
			function disposeMaterial( obj ) {
				// 检查对象是否有材质属性
				if ( obj.material ) {
					// 释放材质资源
					obj.material.dispose();
				}
			}

			/**
			 * 主渲染函数
			 * 执行完整的渲染管线：
			 * 1. 渲染泛光通道（只对泛光物体）
			 * 2. 渲染最终场景（混合基础场景和泛光效果）
			 */
			function render() {
				// 第一步：准备渲染泛光通道
				// 遍历场景中所有物体，将非泛光物体的材质临时替换为黑色材质
				// 这样在泛光通道中，只有泛光物体会被渲染，其他物体不可见
				scene.traverse( darkenNonBloomed );
				
				// 第二步：执行泛光通道渲染
				// 使用泛光合成器渲染，结果存储在bloomRenderTarget中
				bloomComposer.render();
				
				// 第三步：恢复所有物体的原始材质
				// 遍历场景，将临时替换的黑色材质恢复为原始材质
				scene.traverse( restoreMaterial );

				// 第四步：执行最终渲染
				// 使用最终合成器渲染完整效果：
				// 1. renderScene通道渲染基础场景
				// 2. mixPass通道将基础场景和泛光效果混合
				// 3. outputPass通道执行色调映射和伽马校正
				finalComposer.render();
			}

			/**
			 * 临时替换非泛光物体的材质为黑色
			 * 用于泛光通道渲染，确保只有泛光物体产生光晕
			 * @param {THREE.Object3D} obj - 要处理的3D对象
			 */
			function darkenNonBloomed( obj ) {
				// 检查条件：
				// 1. 对象是网格类型（isMesh属性为true）
				// 2. 对象不在泛光图层中（bloomLayer.test返回false）
				if ( obj.isMesh && bloomLayer.test( obj.layers ) === false ) {
					// 保存对象的原始材质到缓存中
					// 使用对象的UUID作为键，确保唯一性
					materials[ obj.uuid ] = obj.material;
					
					// 将对象的材质临时替换为黑色材质
					// 在泛光通道渲染中，黑色材质不会产生任何光晕
					obj.material = darkMaterial;
				}
			}

			/**
			 * 恢复对象的原始材质
			 * 在泛光通道渲染后调用，恢复所有物体的原始外观
			 * @param {THREE.Object3D} obj - 要处理的3D对象
			 */
			function restoreMaterial( obj ) {
				// 检查该对象的材质是否被缓存（即之前被临时替换过）
				if ( materials[ obj.uuid ] ) {
					// 从缓存中获取原始材质并恢复
					obj.material = materials[ obj.uuid ];
					
					// 从缓存中删除该条目，避免内存泄漏
					delete materials[ obj.uuid ];
				}
			}

			// ========== 渲染循环说明 ==========
			// 注意：此示例没有使用requestAnimationFrame循环
			// 而是采用按需渲染策略：只在场景变化时渲染
			// 这种策略在交互式应用中更高效，避免了不必要的渲染调用
			// 渲染触发时机：
			// 1. 相机控制器变化时（change事件）
			// 2. GUI参数调整时（onChange回调）
			// 3. 鼠标点击物体时（onPointerDown）
			// 4. 窗口大小改变时（onresize）
			// 5. 场景初始化后（setupScene中）

		</script>

	</body>

</html>