<!-- Three.js Web音频交互沙箱 - 功能描述与技术详解
🎯 项目概述
这是一个基于Three.js和Web Audio API构建的沉浸式3D音频可视化体验应用。用户可以在一个3D虚拟空间中探索三个不同音频源，每个音频源通过球体可视化并具有空间音频特性，创建出身临其境的音频交互环境。

🌟 核心功能
1. 3D音频空间探索
第一人称视角：用户可以在3D空间中自由移动，使用WASD键或方向键控制移动，鼠标控制视角

空间音频体验：三个音频球体分布在虚拟空间的不同位置，靠近时会听到更强的声音，远离时声音减弱

多音频源混合：同时播放四种不同类型的音频，包括预录音乐和实时生成的音频

2. 音频可视化系统
实时频率响应：三个球体的颜色会随音频频率变化而变化（蓝色发光效果）

音频分析：使用32频段的FFT分析器捕获音频频谱数据

动态材质更新：根据音频强度实时修改材质的自发光属性

3. 交互式控制面板
音量独立控制：可分别调节主音量、三个球体音量和背景音乐音量

音频生成器控制：实时调整振荡器的频率（50-5000Hz）和波形类型（正弦波、方波、锯齿波、三角波）

即时反馈：所有调节都会立即生效，无需刷新页面

4. 沉浸式环境
3D场景构建：包含地面网格、指数雾效果、定向光源

视觉反馈：音频激活时球体发光，创建强烈的视听关联

用户友好界面：简洁的启动界面和操作指南

🔧 主要技术点
1. Three.js核心功能
场景图架构：使用层级结构管理3D对象（场景→相机→物体）

相机系统：PerspectiveCamera实现透视投影，模拟人眼视角

几何体与材质：

SphereGeometry创建球体

MeshPhongMaterial实现平面着色效果

动态更新emissive属性实现发光效果

光源系统：DirectionalLight创建平行光源，模拟日光

渲染管线：WebGLRenderer使用硬件加速渲染

2. Web Audio API集成
音频上下文管理：通过AudioContext创建音频处理图

多种音频源：

MediaElementAudioSourceNode：从HTML5音频元素获取音频

OscillatorNode：实时生成合成音频

空间音频处理：

PannerNode：实现3D空间音频定位（Three.js的PositionalAudio封装）

距离衰减：基于参考距离的线性衰减模型

音频分析：

AnalyserNode：获取时域和频域数据

FFT分析：32点快速傅里叶变换

3. 音频可视化技术
javascript
// 核心可视化逻辑
material1.emissive.b = analyser1.getAverageFrequency() / 256;
频谱映射：将0-256Hz的频率范围映射到0-1的颜色值

实时更新：每帧（约60fps）更新材质属性

视觉编码：用蓝色分量表示音频强度

4. 用户交互系统
第一人称控制器：基于FirstPersonControls的自定义导航

事件处理：键盘事件（WASD）、鼠标事件（拖拽）、GUI事件

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

5. 模块化架构
ES6模块：使用import/export管理依赖

Import Maps：现代浏览器模块路径映射

代码组织：清晰的功能模块划分（初始化、音频、渲染、GUI）

6. 性能优化
设备像素比适配：renderer.setPixelRatio(window.devicePixelRatio)

动画循环优化：setAnimationLoop替代requestAnimationFrame

几何体复用：三个球体共享相同的SphereGeometry实例

内存管理：适当的对象销毁和事件清理

🎮 音频源详细说明
球体	位置	音频类型	可视化颜色	控制选项
1号球	左侧(-250,30,0)	预录歌曲(MP3/OGG)	橙色+蓝光	独立音量
2号球	右侧(250,30,0)	预录音乐(MP3/OGG)	红色+蓝光	独立音量
3号球	前方(0,30,-250)	Web Audio振荡器	紫色+蓝光	频率+波形+音量
背景音乐	全局	循环背景音乐	无可视化	独立音量
📊 技术架构图
text
用户交互层
├── 键盘/鼠标输入 → FirstPersonControls → 相机移动
├── GUI控制面板 → 音频参数调整
└── 音频播放 → Web Audio API

音频处理层
├── 位置性音频处理（PannerNode）
├── 音频分析（AnalyserNode）
├── 音频合成（OscillatorNode）
└── 混音控制（GainNode）

可视化层
├── Three.js渲染管线
├── 材质系统（动态emissive属性）
├── 几何体系统（SphereGeometry）
└── 光照与雾效

核心引擎
├── 动画循环（requestAnimationFrame）
├── 时间管理（THREE.Clock）
└── 资源管理（预加载音频）
🚀 创新亮点
跨技术集成：将Three.js的3D渲染能力与Web Audio API的音频处理能力深度融合

实时交互：所有音频参数都可实时调整，即时看到/听到效果变化

空间音频教学：直观展示3D音频的距离衰减和定位效果

低多边形美学：flatShading材质创建现代简约的视觉风格

教育价值：完美展示音频可视化、3D图形编程和Web音频API的基础概念 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js Web音频交互沙箱 -->
		<title>Three.js Web音频交互沙箱</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">
		
		<!-- 外部样式表链接：用于页面样式 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<!-- 
			==================== 音频元素区域 ====================
			以下三个<audio>元素用于加载音频文件
			设置了preload="auto"让浏览器预加载音频文件
			style="display: none"让音频元素不可见但功能正常
		-->
		
		<!-- 第一个音频元素：歌曲文件，有两个格式源确保浏览器兼容性 -->
		<audio id="song" preload="auto" style="display: none">
			<!-- OGG格式：开源格式，Chrome、Firefox等支持 -->
			<source src="sounds/358232_j_s_song.ogg" type="audio/ogg">
			<!-- MP3格式：广泛支持的格式 -->
			<source src="sounds/358232_j_s_song.mp3" type="audio/mpeg">
		</audio>
		
		<!-- 第二个音频元素：Skullbeatz音乐 -->
		<audio id="skullbeatz" preload="auto" style="display: none">
			<source src="sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg" type="audio/ogg">
			<source src="sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3" type="audio/mpeg">
		</audio>
		
		<!-- 第三个音频元素：背景音乐，设置了loop属性实现循环播放 -->
		<audio id="utopia" loop preload="auto" style="display: none">
			<source src="sounds/Project_Utopia.ogg" type="audio/ogg">
			<source src="sounds/Project_Utopia.mp3" type="audio/mpeg">
		</audio>
		
		<!-- 
			==================== 开始界面覆盖层 ====================
			这是一个半透明覆盖层，显示在页面初始加载时
			包含一个开始按钮，点击后进入主场景
		-->
		<div id="overlay">
			<!-- 开始按钮：用户点击后初始化3D场景和音频 -->
			<button id="startButton">开始体验</button>
		</div>
		
		<!-- 
			==================== 信息面板 ====================
			显示在页面右上角的固定位置
			包含项目信息、音乐版权声明和操作指南
		-->
		<div id="info">
			<!-- 项目标题和框架信息 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> Web音频交互沙箱<br/>
			<!-- 音乐版权信息：列出所有使用的音乐作者 -->
			使用音乐来自：
			<a href="http://www.newgrounds.com/audio/listen/358232" target="_blank" rel="noopener">larrylarrybb</a>、
			<a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a> 和
			<a href="http://opengameart.org/content/project-utopia-seamless-loop" target="_blank" rel="noopener">congusbongus</a><br/><br/>
			<!-- 操作指南：详细说明如何控制场景 -->
			操作指南：<br/>
			• 移动控制：WASD键 / 方向键<br/>
			• 视角控制：鼠标拖拽<br/>
			• 音量调节：右上角控制面板<br/>
			• 靠近球体体验3D音效<br/>
			• 点击右上角"×"展开/折叠控制面板
		</div>

		<!-- 
			==================== 导入映射表（Import Maps） ====================
			现代JavaScript模块系统特性
			允许为模块指定别名，简化导入语句
			注意：需要浏览器支持importmaps特性
		-->
		<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对象将包含所有Three.js的核心功能
			import * as THREE from 'three';
			
			// 导入GUI库：用于创建交互式控制面板
			// GUI是一个轻量级的JavaScript控制面板库
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			// 导入第一人称控制器：实现类似FPS游戏的视角控制
			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';

			// ==================== 全局变量声明 ====================
			
			// Three.js核心对象
			let camera;      // 3D相机：决定如何查看场景
			let controls;    // 用户控制：处理键盘鼠标输入
			let scene;       // 3D场景：所有3D对象的容器
			let renderer;    // 渲染器：将3D场景绘制到2D屏幕上
			let light;       // 光源：照亮场景中的物体
			
			// 材质变量：存储三个球体的材质对象
			// 材质决定物体的外观（颜色、反光度等）
			let material1, material2, material3;
			
			// 音频分析器：用于分析音频数据，实现可视化效果
			// 分析器可以获取音频的频率数据、波形数据等
			let analyser1, analyser2, analyser3;
			
			// 创建Three.js时钟对象
			// 用于跟踪时间流逝，实现平滑的动画和物理模拟
			// 比直接使用Date.now()或performance.now()更精确
			const clock = new THREE.Clock();
			
			// ==================== DOM元素获取和事件绑定 ====================
			
			// 获取开始按钮DOM元素
			// document.getElementById通过ID查找DOM元素
			const startButton = document.getElementById('startButton');
			
			// 为开始按钮添加点击事件监听器
			// 当用户点击按钮时，执行init函数初始化场景
			startButton.addEventListener('click', init);

			// ==================== 初始化函数 ====================
			/**
			 * init - 主初始化函数
			 * 此函数在用户点击开始按钮时调用
			 * 负责创建所有3D对象、设置音频系统、初始化GUI等
			 */
			function init() {
				// 1. 移除开始覆盖层
				// 获取覆盖层元素并从DOM中移除
				const overlay = document.getElementById('overlay');
				overlay.remove();  // 将元素从DOM树中删除

				// 2. 创建透视相机（PerspectiveCamera）
				// 透视相机模拟人眼视角，有近大远小的透视效果
				camera = new THREE.PerspectiveCamera(
					50,                          // 视野角度（Field of View）
					                               // 50度模拟标准人眼视野
					window.innerWidth / window.innerHeight,  // 宽高比
					                                       // 根据窗口尺寸动态计算
					1,                           // 近裁剪面（near clipping plane）
					                               // 距离相机1单位以内的物体不显示
					10000                        // 远裁剪面（far clipping plane）
					                               // 距离相机10000单位以外的物体不显示
				);
				// 设置相机初始位置：x=0, y=25（高度）, z=0
				camera.position.set(0, 25, 0);

				// 3. 创建音频监听器（AudioListener）
				// 音频监听器代表用户耳朵的位置和方向
				// 在3D音效中，监听器的位置决定了听到声音的立体效果
				const listener = new THREE.AudioListener();
				// 将监听器添加到相机上，这样音频位置会随相机移动而变化
				// 实现第一人称音频体验
				camera.add(listener);

				// 4. 创建3D场景（Scene）
				// 场景是所有3D对象的容器，包括物体、灯光、相机等
				scene = new THREE.Scene();
				
				// 为场景添加指数雾（FogExp2）
				// 指数雾：雾的密度随距离指数增长
				// 参数1：雾的颜色（黑色）
				// 参数2：雾的密度（0.0025）
				scene.fog = new THREE.FogExp2(0x000000, 0.0025);

				// 5. 创建定向光源（DirectionalLight）
				// 定向光源模拟太阳光，所有光线平行且强度一致
				light = new THREE.DirectionalLight(0xffffff, 3);
				// 设置光源方向并标准化向量
				// 标准化确保向量长度为1，只表示方向不表示强度
				light.position.set(0, 0.5, 1).normalize();
				// 将光源添加到场景中
				scene.add(light);

				// 6. 创建球体几何体（SphereGeometry）
				// 这个几何体将被三个球体共享
				// 参数1：半径（20单位）
				// 参数2：经度分段数（32，影响球体的平滑度）
				// 参数3：纬度分段数（16，影响球体的平滑度）
				const sphere = new THREE.SphereGeometry(20, 32, 16);

				// 7. 创建材质（Material）
				// 材质定义物体的表面属性：颜色、反光度、纹理等
				
				// 材质1：橙色球体材质
				material1 = new THREE.MeshPhongMaterial({ 
					color: 0xffaa00,      // 十六进制颜色值（橙色）
					flatShading: true,    // 平面着色：每个面使用单一颜色
					                       // 创建低多边形风格效果
					shininess: 0          // 光泽度：0表示无光泽，完全漫反射
				});
				
				// 材质2：红色球体材质
				material2 = new THREE.MeshPhongMaterial({ 
					color: 0xff2200,      // 深红色
					flatShading: true,
					shininess: 0
				});
				
				// 材质3：紫色球体材质
				material3 = new THREE.MeshPhongMaterial({ 
					color: 0x6622aa,      // 蓝紫色
					flatShading: true,
					shininess: 0
				});

				// ==================== 第一个声音球体 ====================
				
				// 创建网格（Mesh）：几何体 + 材质
				const mesh1 = new THREE.Mesh(sphere, material1);
				// 设置球体位置：x=-250（左侧），y=30（高度），z=0
				mesh1.position.set(-250, 30, 0);
				// 将球体添加到场景中
				scene.add(mesh1);

				// 创建位置性音频（PositionalAudio）
				// 位置性音频会根据与监听器的距离和方向改变音量
				const sound1 = new THREE.PositionalAudio(listener);
				
				// 获取音频DOM元素
				const songElement = document.getElementById('song');
				
				// 将HTML5 Audio元素设置为音频源
				sound1.setMediaElementSource(songElement);
				
				// 设置参考距离：音量开始衰减的距离
				// 当监听器距离音频源20单位时，音量开始减小
				sound1.setRefDistance(20);
				
				// 播放音频
				songElement.play();
				
				// 将音频对象添加到球体上
				// 这样音频源的位置就与球体位置绑定
				mesh1.add(sound1);

				// ==================== 第二个声音球体 ====================
				
				const mesh2 = new THREE.Mesh(sphere, material2);
				mesh2.position.set(250, 30, 0);  // 右侧
				scene.add(mesh2);

				const sound2 = new THREE.PositionalAudio(listener);
				const skullbeatzElement = document.getElementById('skullbeatz');
				sound2.setMediaElementSource(skullbeatzElement);
				sound2.setRefDistance(20);
				skullbeatzElement.play();
				mesh2.add(sound2);

				// ==================== 第三个声音球体（使用Web Audio API振荡器） ====================
				
				// 这个球体使用Web Audio API的振荡器（Oscillator）作为音频源
				// 振荡器可以实时生成各种波形的声音
				
				const mesh3 = new THREE.Mesh(sphere, material3);
				mesh3.position.set(0, 30, -250);  // 前方
				scene.add(mesh3);

				const sound3 = new THREE.PositionalAudio(listener);
				
				// 创建Web Audio API振荡器节点
				// listener.context 是AudioContext对象，Web Audio API的核心
				const oscillator = listener.context.createOscillator();
				
				// 设置振荡器类型：正弦波
				// 其他可选类型：square（方波）、sawtooth（锯齿波）、triangle（三角波）
				oscillator.type = 'sine';
				
				// 设置振荡器频率：144Hz（低音频率）
				// setValueAtTime可以精确控制参数变化的时间
				oscillator.frequency.setValueAtTime(144, sound3.context.currentTime);
				
				// 启动振荡器
				// 参数0表示立即开始（0秒延迟）
				oscillator.start(0);
				
				// 将振荡器节点设置为音频源
				sound3.setNodeSource(oscillator);
				
				sound3.setRefDistance(20);
				sound3.setVolume(0.5);  // 设置初始音量（0-1范围）
				mesh3.add(sound3);

				// ==================== 创建音频分析器 ====================
				// 音频分析器用于获取音频的频率数据，实现可视化效果
				// 参数1：音频对象
				// 参数2：FFT大小（快速傅里叶变换大小），决定频率数据的精度
				//       32表示将音频频谱分为32个频段
				analyser1 = new THREE.AudioAnalyser(sound1, 32);
				analyser2 = new THREE.AudioAnalyser(sound2, 32);
				analyser3 = new THREE.AudioAnalyser(sound3, 32);

				// ==================== 全局背景音乐（非位置性） ====================
				// 背景音乐不会随位置变化，始终保持相同音量
				
				const sound4 = new THREE.Audio(listener);  // 非位置性音频
				const utopiaElement = document.getElementById('utopia');
				sound4.setMediaElementSource(utopiaElement);
				sound4.setVolume(0.5);  // 设置音量
				utopiaElement.play();

				// ==================== 创建网格地面 ====================
				// GridHelper创建一个二维网格，用于辅助定位和参考
				
				const helper = new THREE.GridHelper(
					1000,        // 网格大小（1000单位×1000单位）
					10,          // 网格划分数量（10×10的网格）
					0x444444,    // 中心线颜色（深灰色）
					0x444444     // 网格线颜色（深灰色）
				);
				helper.position.y = 0.1;  // 稍微抬升，避免与地面z-fighting（深度冲突）
				scene.add(helper);

				// ==================== GUI控制面板 ====================
				
				// 音量控制类定义
				// 这个类的实例将作为GUI的数据源
				const SoundControls = function() {
					// 主音量：控制所有音频的总音量
					this.master = listener.getMasterVolume();
					
					// 各个球体的音量：独立控制
					this.firstSphere = sound1.getVolume();
					this.secondSphere = sound2.getVolume();
					this.thirdSphere = sound3.getVolume();
					
					// 背景音乐音量
					this.Ambient = sound4.getVolume();
				};

				// 振荡器控制类定义
				const GeneratorControls = function() {
					// 振荡器频率：控制生成声音的音高
					this.frequency = oscillator.frequency.value;
					
					// 波形类型：控制生成声音的音色
					this.wavetype = oscillator.type;
				};

				// 创建GUI实例
				const gui = new GUI();
				
				// 创建控制对象实例
				const soundControls = new SoundControls();
				const generatorControls = new GeneratorControls();
				
				// 创建控制面板文件夹（分组）
				const volumeFolder = gui.addFolder('音量控制');
				const generatorFolder = gui.addFolder('声音发生器设置');

				// ========== 主音量控制滑块 ==========
				volumeFolder.add(soundControls, 'master')
					.min(0.0)      // 最小值
					.max(1.0)      // 最大值
					.step(0.01)    // 步进值（每次增减0.01）
					.onChange(function() {
						// 当滑块值改变时，更新主音量
						listener.setMasterVolume(soundControls.master);
					});
				
				// ========== 第一个球体音量控制滑块 ==========
				volumeFolder.add(soundControls, 'firstSphere')
					.min(0.0).max(1.0).step(0.01)
					.onChange(function() {
						sound1.setVolume(soundControls.firstSphere);
					});
				
				// ========== 第二个球体音量控制滑块 ==========
				volumeFolder.add(soundControls, 'secondSphere')
					.min(0.0).max(1.0).step(0.01)
					.onChange(function() {
						sound2.setVolume(soundControls.secondSphere);
					});
				
				// ========== 第三个球体音量控制滑块 ==========
				volumeFolder.add(soundControls, 'thirdSphere')
					.min(0.0).max(1.0).step(0.01)
					.onChange(function() {
						sound3.setVolume(soundControls.thirdSphere);
					});
				
				// ========== 背景音乐音量控制滑块 ==========
				volumeFolder.add(soundControls, 'Ambient')
					.min(0.0).max(1.0).step(0.01)
					.onChange(function() {
						sound4.setVolume(soundControls.Ambient);
					});
				
				// 默认展开音量控制面板
				volumeFolder.open();

				// ========== 振荡器频率控制滑块 ==========
				generatorFolder.add(generatorControls, 'frequency')
					.min(50.0)     // 最小频率：50Hz（低音）
					.max(5000.0)   // 最大频率：5000Hz（高音）
					.step(1.0)     // 步进值：1Hz
					.onChange(function() {
						// 设置振荡器频率
						// setValueAtTime确保频率变化的精确时间
						oscillator.frequency.setValueAtTime(
							generatorControls.frequency,  // 新的频率值
							listener.context.currentTime  // 立即生效
						);
					});
				
				// ========== 波形类型选择器 ==========
				generatorFolder.add(generatorControls, 'wavetype', 
					['sine', 'square', 'sawtooth', 'triangle'])
					.onChange(function() {
						// 当选择新的波形类型时，更新振荡器
						oscillator.type = generatorControls.wavetype;
					});
				
				// 默认展开振荡器控制面板
				generatorFolder.open();

				// ==================== 创建WebGL渲染器 ====================
				// WebGLRenderer使用WebGL API进行硬件加速的3D渲染
				
				renderer = new THREE.WebGLRenderer({ 
					antialias: true  // 开启抗锯齿，使边缘更平滑
				});
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina屏幕）上，使用更高的像素比提高清晰度
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数
				// setAnimationLoop替代了旧的requestAnimationFrame方法
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop(animate);
				
				// 将渲染器的canvas元素添加到DOM中
				// renderer.domElement是<canvas>元素
				document.body.appendChild(renderer.domElement);

				// ==================== 初始化第一人称控制器 ====================
				
				controls = new FirstPersonControls(camera, renderer.domElement);
				
				// 设置移动速度：每秒移动70单位
				controls.movementSpeed = 70;
				
				// 设置视角旋转速度
				controls.lookSpeed = 0.05;
				
				// 禁止垂直视角旋转（只允许水平旋转）
				// 设为false避免用户感到晕眩
				controls.lookVertical = false;

				// ==================== 窗口大小变化事件监听 ====================
				
				window.addEventListener('resize', onWindowResize);
			}

			// ==================== 窗口大小变化处理函数 ====================
			/**
			 * onWindowResize - 窗口大小变化时的响应函数
			 * 确保3D场景正确适应新的窗口尺寸
			 */
			function onWindowResize() {
				// 1. 更新相机宽高比
				// 相机需要知道新的窗口宽高比来正确计算透视投影
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机的投影矩阵
				// 修改相机参数后必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();
				
				// 3. 更新渲染器尺寸
				// 确保渲染器输出的canvas与窗口大小一致
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 4. 更新控制器尺寸
				// 控制器需要知道新的窗口尺寸来处理输入事件
				controls.handleResize();
			}

			// ==================== 动画循环函数 ====================
			/**
			 * animate - 每一帧执行的函数
			 * 这是Three.js应用的核心循环
			 * 负责更新场景状态和重新渲染
			 */
			function animate() {
				// 1. 获取时间增量（delta time）
				// clock.getDelta()返回自上次调用以来的时间（秒）
				// 用于实现与帧率无关的平滑动画
				const delta = clock.getDelta();
				
				// 2. 更新控制器状态
				// 处理用户输入，更新相机位置和方向
				controls.update(delta);
				
				// 3. 音频可视化：根据音频频率更新材质自发光
				// analyser.getAverageFrequency()返回平均频率值（0-256范围）
				// 除以256归一化到0-1范围，赋值给材质的emissive.b（蓝色分量）
				
				// 第一个球体：橙色材质 + 蓝色自发光 = 橙色变亮/变白效果
				material1.emissive.b = analyser1.getAverageFrequency() / 256;
				
				// 第二个球体：红色材质 + 蓝色自发光 = 紫色变亮效果
				material2.emissive.b = analyser2.getAverageFrequency() / 256;
				
				// 第三个球体：紫色材质 + 蓝色自发光 = 蓝紫色变亮效果
				material3.emissive.b = analyser3.getAverageFrequency() / 256;
				
				// 注意：emissive（自发光）属性使材质看起来像在发光
				// 这里只修改蓝色分量，所以随着音频频率变化，球体会呈现蓝色发光效果
				
				// 4. 渲染场景
				// 将3D场景通过相机视角渲染到2D画布上
				renderer.render(scene, camera);
				
				// 5. 动画循环将继续
				// setAnimationLoop会自动在下一帧再次调用此函数
			}
			
			// ==================== 额外的功能说明 ====================
			// 本代码实现的核心特性：
			// 1. 3D空间音频：使用Three.js的PositionalAudio实现3D音效
			// 2. 音频可视化：通过AudioAnalyser将音频数据转换为视觉效果
			// 3. Web Audio API集成：直接使用振荡器生成音频
			// 4. 交互式GUI：使用lil-gui创建用户友好的控制面板
			// 5. 第一人称导航：实现沉浸式的3D探索体验
			// 6. 响应式设计：自动适应窗口大小变化
			
			// 潜在的性能优化点：
			// 1. 可以考虑合并材质以减少WebGL状态切换
			// 2. 对于静态几何体，可以使用BufferGeometry提高性能
			// 3. 可以添加LOD（Level of Detail）系统，根据距离切换不同精度的模型
			// 4. 可以考虑使用Web Audio API的AnalyserNode替代Three.js的AudioAnalyser
			
			// 扩展功能建议：
			// 1. 添加更多音频可视化效果（粒子系统、波形图等）
			// 2. 实现音频录制和播放功能
			// 3. 添加更多交互元素（可点击的按钮、可移动的物体等）
			// 4. 实现VR/AR兼容性
			// 5. 添加加载进度条和错误处理
			
		</script>
	</body>
</html>