Three.js 音频频谱可视化特效

🎯 提示词

PROMPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
使用 Three.js 实现音频频谱可视化特效，具体要求：

**核心特效**
- 64 频谱柱
- 镜像对称布局
- 颜色分段渐变
- 高度动态变化

**场景与光照**
- 正交相机
- 黑色背景
- BoxGeometry 条形

**交互与控制**
- 播放/暂停按钮
- 音频频谱分析
- 左右声道分离

**技术要求**
- Three.js 版本 (ES Module)
- Web Audio API
- AnalyserNode
- OrthographicCamera

📖 效果拆解

层次 视觉效果 技术实现
基础 64 频谱柱 BoxGeometry
镜像 左右对称 索引计算
颜色 6 色彩虹 高度分段
音频 FFT 分析 getByteFrequencyData

🔧 核心技术点

1. 音频频谱分析

为什么需要这个技术：用 Web Audio API 获取实时频谱数据。

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.fftSize = barCount * 2;
const dataArray = new Uint8Array(bufferLength);

function updateBars() {
    analyser.getByteFrequencyData(dataArray);
    const scale = dataArray[barCount - 1 - i] / 10;
    bars[i].scale.y = Math.max(1, scale);
}

2. 正交相机布局

为什么需要这个技术：2D 风格的频谱可视化。

JAVASCRIPT
1
2
3
4
5
6
const camera = new OrthographicCamera(
    -s, s, s * (h / w), -s * (h / w), 1, 10000
);
camera.position.set(0, 0, 100);
camera.up.set(0, 0, 1);
camera.lookAt(0, 0, 0);

3. 彩虹颜色渐变

为什么需要这个技术：根据高度从紫色渐变到红色。

GLSL
1
2
3
4
5
uniform vec3 colors[6];
float segment = intensity * 5.0;
int index = int(segment);
float t = fract(segment);
vec3 col = mix(colors[index], colors[index + 1], t);

4. 镜像对称布局

为什么需要这个技术：左右两边完全对称的视觉效果。

JAVASCRIPT
1
2
3
const mirror = new Mesh(geometry, material.clone());
mirror.position.set(-offset, -12.5, 0);
bars.push(mirror);

💡 调试与优化

问题类型 表现形式 解决方案
频谱不动 音频未播放 点击播放按钮
性能问题 帧率低 减少 barCount
颜色过暗 不够鲜艳 增大颜色值

🚀 扩展思路

变体效果 核心改动 难度
圆形频谱 环形布局 ⭐⭐
3D 柱状 添加 z 轴 ⭐
波形显示 时域数据 ⭐
响应式 自适应大小 ⭐
多音轨 多个音频 ⭐⭐

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。