音频可视化几何变形效果

🎯 提示词

PROMPT
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 实时获取音频频谱数据,计算平均强度并映射到几何变形幅度。

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
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 函数,实现时间相关的自然波动效果。

GLSL
1
2
3
4
5
6
7
8
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 同时修改主材质和深度材质,确保阴影正确响应变形。

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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. 法线可视化着色

修改片元着色器直接输出法线颜色,便于观察变形效果。

GLSL
1
2
3
4
shader.fragmentShader = shader.fragmentShader.replace(
  "#include <opaque_fragment>",
  "gl_FragColor = vec4(vNormal, 1.);"
);

💡 调试与优化

问题类型 表现形式 解决方案
音频加载失败 控制台报错,无响应 检查音频文件路径,确保 CORS 配置正确
变形效果不明显 模型几乎不动 调整 uStrength 的放大系数,检查音频分析数据范围
性能下降 帧率低于 30fps 降低几何体细分程度,减少噪声迭代次数
阴影异常 阴影与模型不同步 确保 customDepthMaterial 同步更新着色器

🚀 扩展思路

变体效果 核心改动 难度
多频段响应 将频谱分成低频/中频/高频,分别控制不同轴向变形 ⭐⭐
颜色随音频变化 根据强度动态调整基础颜色或发光效果
粒子模式 将几何体替换为粒子系统,实现更丰富的视觉效果 ⭐⭐⭐
多模型联动 多个几何体按不同频段响应,形成和声效果 ⭐⭐

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