音频可视化几何变形效果
🎯 提示词
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
使用 Three.js 实现音频响应几何变形效果,具体要求:
【核心特效】
- 基于音频频谱数据驱动的顶点位移
- 4D Simplex 噪声实现自然波动
- 实时音频分析与强度映射
【场景与光照】
- 环境光 + 方向光组合
- 深灰色背景增强视觉效果
- 支持阴影投射
【交互与控制】
- OrbitControls 视角控制
- 播放/暂停按钮控制音频
- 自动响应音频强度变化
【技术要求】
- Three.js 最新版本
- AudioListener 和 AudioAnalyser 音频处理
- MeshStandardMaterial + onBeforeCompile 着色器扩展
📖 效果拆解
| 层次 |
视觉效果 |
技术实现 |
| 基础 |
二十面体几何模型 |
IcosahedronGeometry(2.5, 50) |
| 核心特效 |
音频驱动的表面波动 |
4D Simplex Noise + 顶点位移 |
| 增强细节 |
动态法线着色 |
fragmentShader 输出法线颜色 |
| 交互层 |
播放/暂停控制 |
HTML 按钮 + Audio API |
🔧 核心技术点
1. 音频分析集成
通过 THREE.AudioAnalyser 实时获取音频频谱数据,计算平均强度并映射到几何变形幅度。
const updateOffsetData = () => {
if (analyser?.getFrequencyData) {
analyser.getFrequencyData();
const analyserData = analyser?.data;
let sum = 0;
for (let i = 0; i < analyserData.length; i++) {
sum += analyserData[i];
}
sum /= analyserData.length * 25.5;
uniform.uStrength.value = sum;
}
};
2. 4D Simplex 噪声实现
在顶点着色器中集成完整的 4D Simplex Noise 函数,实现时间相关的自然波动效果。
float simplexNoise4d(vec4 v) {
const vec2 C = vec2(0.138196601125010504, 0.309016994374947451);
vec4 i = floor(v + dot(v, C.yyyy));
vec4 x0 = v - i + dot(i, C.xxxx);
return 49.0 * (dot(m0*m0, vec3(dot(p0,x0), dot(p1,x1), dot(p2,x2)))
+ dot(m1*m1, vec2(dot(p3,x3), dot(p4,x4))));
}
3. 顶点位移与深度材质同步
使用 onBeforeCompile 同时修改主材质和深度材质,确保阴影正确响应变形。
material.onBeforeCompile = (shader) => {
shader.uniforms.uTime = uniform.uTime;
shader.uniforms.uStrength = uniform.uStrength;
shader.vertexShader = shader.vertexShader.replace(
"#include <fog_vertex>",
`#include <fog_vertex>
vec3 newPos = position;
float strength = uStrength;
newPos += normal * simplexNoise4d(vec4(position, uTime)) * strength;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);`
);
};
mesh.customDepthMaterial = depthMaterial;
4. 法线可视化着色
修改片元着色器直接输出法线颜色,便于观察变形效果。
shader.fragmentShader = shader.fragmentShader.replace(
"#include <opaque_fragment>",
"gl_FragColor = vec4(vNormal, 1.);"
);
💡 调试与优化
| 问题类型 |
表现形式 |
解决方案 |
| 音频加载失败 |
控制台报错,无响应 |
检查音频文件路径,确保 CORS 配置正确 |
| 变形效果不明显 |
模型几乎不动 |
调整 uStrength 的放大系数,检查音频分析数据范围 |
| 性能下降 |
帧率低于 30fps |
降低几何体细分程度,减少噪声迭代次数 |
| 阴影异常 |
阴影与模型不同步 |
确保 customDepthMaterial 同步更新着色器 |
🚀 扩展思路
| 变体效果 |
核心改动 |
难度 |
| 多频段响应 |
将频谱分成低频/中频/高频,分别控制不同轴向变形 |
⭐⭐ |
| 颜色随音频变化 |
根据强度动态调整基础颜色或发光效果 |
⭐ |
| 粒子模式 |
将几何体替换为粒子系统,实现更丰富的视觉效果 |
⭐⭐⭐ |
| 多模型联动 |
多个几何体按不同频段响应,形成和声效果 |
⭐⭐ |
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。
💬 评论区
评论功能即将上线,敬请期待!