如何使用Three.js创建3D音频可视化工具

关山月2024-12-20 10:52

在本文中，我们将结合现有的工具和技术（包括Perlin Noise）创建一个令人印象深刻的音频可视化工具。

在开始之前，需要注意，需要对Three.js，GLSL和着色器有基本的了解。

筹备工作

创建球体

首先，你需要有一个Three.js的项目。如果你没有，可以下载我的Three.js样板。

接下来，删除注释和背景颜色：

js 复制代码 
renderer.setClearColor(0xfefefe);

现在，使用IcosahedronGeometry而不是SphereGeometry创建一个球体。

关于材质，使用ShaderMaterial的实例并启用线框模式。

js 复制代码 
const mat = new THREE.ShaderMaterial({
  wireframe: true
});

const geo = new THREE.IcosahedronGeometry(4, 30);
const mesh = new THREE.Mesh(geo, mat);
scene.add(mesh);

🙆‍♂️变量和着色器

现在，将以下顶点和片段着色器的脚本添加到index.html页面。

js 复制代码 
<script id="vertexshader" type="vertex">
  void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
</script>

<script id="fragmentshader" type="fragment">
  void main() {
      gl_FragColor = vec4(1.0);
  }
</script>

接下来，我们需要将这些着色器链接到材质。

js 复制代码 
const mat = new THREE.ShaderMaterial({
  wireframe: true,
  vertexShader: document.getElementById('vertexshader').textContent,
  fragmentShader: document.getElementById('fragmentshader').textContent,
});

在本教程结束时，我们将使用六个统一变量。最初，我们只需要一个：时间。

js 复制代码 
const uniforms = {
  u_time: { value: 0.0 }
};

const mat = new THREE.ShaderMaterial({
  wireframe: true,
  uniforms,
  vertexShader: document.getElementById('vertexshader').textContent,
  fragmentShader: document.getElementById('fragmentshader').textContent,
});
js 复制代码 
const clock = new THREE.Clock();
function animate() {
  uniforms.u_time.value = clock.getElapsedTime();
  renderer.render(scene, camera);
}

以下是完整代码：

将球体转换为动画

在本节中，我们将设置动画。要做到这一点，我们需要结合时间，因为动画基本上依赖于它。

此外，我们还需要加入柏林噪声(Perlin Noise)。你可能会问，什么是柏林噪音？

Perlin Noise是一个梯度噪波函数，可以创建平滑、自然的随机性值。

GLSL缺少一个用于生成Perlin Noise值的内置函数。因此，我们要么需要自己创建一个，要么借用现有的实现。

对于本教程，没有必要重新发明轮子，所以我们可以使用Ashima的webgl-noise。

现在，我们将从vec3 mod289()函数复制所有内容到vec3 fade()函数，并将其粘贴到顶点着色器中。

js 复制代码 
<script id="vertexshader" type="vertex">
  vec3 mod289(vec3 x)
  {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
  }

  vec4 mod289(vec4 x)
  {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
  }

  vec4 permute(vec4 x)
  {
    return mod289(((x*34.0)+10.0)*x);
  }

  vec4 taylorInvSqrt(vec4 r)
  {
    return 1.79284291400159 - 0.85373472095314 * r;
  }

  vec3 fade(vec3 t) {
    return t*t*t*(t*(t*6.0-15.0)+10.0);
  }

  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
</script>

接下来，我们有两种噪声函数：cnoise()和pnoise()。

js 复制代码 
<script id="vertexshader" type="vertex">
  vec3 mod289(vec3 x)
  {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
  }

  vec4 mod289(vec4 x)
  {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
  }

  vec4 permute(vec4 x)
  {
    return mod289(((x*34.0)+10.0)*x);
  }

  vec4 taylorInvSqrt(vec4 r)
  {
    return 1.79284291400159 - 0.85373472095314 * r;
  }

  vec3 fade(vec3 t) {
    return t*t*t*(t*(t*6.0-15.0)+10.0);
  }

  float pnoise(vec3 P, vec3 rep)
  {
    vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
    vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
    Pi0 = mod289(Pi0);
    Pi1 = mod289(Pi1);
    vec3 Pf0 = fract(P); // Fractional part for interpolation
    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
    vec4 iy = vec4(Pi0.yy, Pi1.yy);
    vec4 iz0 = Pi0.zzzz;
    vec4 iz1 = Pi1.zzzz;

    vec4 ixy = permute(permute(ix) + iy);
    vec4 ixy0 = permute(ixy + iz0);
    vec4 ixy1 = permute(ixy + iz1);

    vec4 gx0 = ixy0 * (1.0 / 7.0);
    vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
    gx0 = fract(gx0);
    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
    vec4 sz0 = step(gz0, vec4(0.0));
    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
    gy0 -= sz0 * (step(0.0, gy0) - 0.5);

    vec4 gx1 = ixy1 * (1.0 / 7.0);
    vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
    gx1 = fract(gx1);
    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
    vec4 sz1 = step(gz1, vec4(0.0));
    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
    gy1 -= sz1 * (step(0.0, gy1) - 0.5);

    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);

    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
    g000 *= norm0.x;
    g010 *= norm0.y;
    g100 *= norm0.z;
    g110 *= norm0.w;
    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
    g001 *= norm1.x;
    g011 *= norm1.y;
    g101 *= norm1.z;
    g111 *= norm1.w;

    float n000 = dot(g000, Pf0);
    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
    float n111 = dot(g111, Pf1);

    vec3 fade_xyz = fade(Pf0);
    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
    return 2.2 * n_xyz;
  }

  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
</script>

完成后，在顶点着色器中，我们将调用pnoise()来生成一个随机值。然后我们将使用这个值来计算当前顶点的位移量。

js 复制代码 
void main() {
  float noise = pnoise(position, vec3(10.));
  float displacement = noise / 10.;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

此外，我们将在gl_Position计算公式中使用新的位置值。

js 复制代码 
void main() {
  float noise = pnoise(position, vec3(10.));
  float displacement = noise / 10.;
  vec3 newPosition = position + normal * displacement;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

现在你应该会看到你的球体是这样:

为了使其运动，我将向噪声函数的第一个参数添加时间。

js 复制代码 
uniform float u_time;

void main() {
  float noise = pnoise(position + u_time, vec3(10.));

  float displacement = noise / 10.;
  vec3 newPosition = position + normal * displacement;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

若要增加粗糙度，请将生成的值乘以附加因子。

js 复制代码 
float noise = 5. * pnoise(position + u_time, vec3(10.));

使用音频为设置动画

首先，将音频文件放在项目目录的公用文件夹中。

接下来，我们将加载该文件，单击播放它。

js 复制代码 
const listener = new THREE.AudioListener();
camera.add(listener);

const sound = new THREE.Audio(listener);

const audioLoader = new THREE.AudioLoader();
audioLoader.load('/track.mp3', function (buffer) {
  sound.setBuffer(buffer);
  window.addEventListener('click', function () {
    sound.play();
  });
});

完成后，我们现在将使用Three.js中的AudioAnalyser功能将动画与节拍同步，该功能获取来自音频输入的实时频率数据。

我们将创建一个AudioAnalyser实例：

js 复制代码 
const analyser = new THREE.AudioAnalyser(sound, 32);

由于我们想使用分析器返回的值来设置顶点的位置，我们需要创建一个uniform来将这些值传递给顶点着色器。

js 复制代码 
const uniforms = {
  u_time: { value: 0.0 },
  u_frequency: { value: 0.0 },
};

接下来，在animate()函数中，我们将使用getAverageFrequency()方法返回的频率更新此属性。

js 复制代码 
function animate() {
  uniforms.u_frequency.value = analyser.getAverageFrequency();
  
  uniforms.u_time.value = clock.getElapsedTime();
  renderer.render(scene, camera);
}

现在，我们将在顶点着色器中创建统一变量，并将其合并到位移计算中。

js 复制代码 
uniform float u_frequency;

uniform float u_time;
void main() {
  float noise = 5. * pnoise(position + u_time, vec3(10.));

  float displacement = (u_frequency / 30.) * (noise / 10.);

  vec3 newPosition = position + normal * displacement;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

如果搅拌水平太高，请尝试在噪音生成方程中使用小于5.0的值来降低搅拌水平。

js 复制代码 
float noise = 3. * pnoise(position + u_time, vec3(10.));

是时候进行一些后期处理了

现在是时候使用Unreal Bloom添加一些光了，我已经在一篇专门的文章中详细介绍了这一点，该文章解释了我们将在这里遵循的步骤。因此，如果你不熟悉Three.js中的处理，那篇文章绝对是必读的。

首先，我们需要导入必要的模块。

js 复制代码 
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass';

接下来，我们需要完成以下步骤：

  1. 设置输出颜色空间;
  2. 创建passes
  3. 创建composer
  4. 添加passes
  5. 使用requestAnimationFrame()而不是setAnimationLoop()。

Step 1:

js 复制代码 
renderer.outputColorSpace = THREE.SRGBColorSpace;

Step 2:

js 复制代码 
const renderScene = new RenderPass(scene, camera);

const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight)
);
bloomPass.threshold = 0.5;
bloomPass.strength = 0.4;
bloomPass.radius = 0.8;

const outputPass = new OutputPass();

Step 3:

js 复制代码 
const bloomComposer = new EffectComposer(renderer);

Step 4:

js 复制代码 
bloomComposer.addPass(renderScene);
bloomComposer.addPass(bloomPass);
bloomComposer.addPass(outputPass);

Step 5:

js 复制代码 
function animate() {
  uniforms.u_time.value = clock.getElapsedTime();
  uniforms.u_frequency.value = analyser.getAverageFrequency();
  bloomComposer.render();
  requestAnimationFrame(animate);
}
animate();

window.addEventListener('resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  bloomComposer.setSize(window.innerWidth, window.innerHeight);
});

效果如下：

控制颜色和光晕属性

对于这个任务，我们将使用lil-gui，在我的Three.js基础教程中有一个专门的介绍。

安装库并执行以下步骤：

  1. 导入库;
  2. 创建参数对象;
  3. 将参数链接到要更改的属性;
  4. 创建UI元素。

Step 1:

js 复制代码 
import { GUI } from 'lil-gui';

Step 2:

js 复制代码 
const params = {
  red: 1.0,
  green: 1.0,
  blue: 1.0,
  threshold: 0.5,
  strength: 0.4,
  radius: 0.8,
};

Step 3:

js 复制代码 
bloomPass.threshold = params.threshold;
bloomPass.strength = params.strength;
bloomPass.radius = params.radius;

const uniforms = {
  u_time: { value: 0.0 },
  u_frequency: { value: 0.0 },
  u_red: { value: params.red },
  u_green: { value: params.green },
  u_blue: { value: params.blue },
};

Step 4:

js 复制代码 
const gui = new GUI();

const colorsFolder = gui.addFolder('Colors');
colorsFolder.add(params, 'red', 0, 1).onChange(function (value) {
  uniforms.u_red.value = Number(value);
});
colorsFolder.add(params, 'green', 0, 1).onChange(function (value) {
  uniforms.u_green.value = Number(value);
});
colorsFolder.add(params, 'blue', 0, 1).onChange(function (value) {
  uniforms.u_blue.value = Number(value);
});

const bloomFolder = gui.addFolder('Bloom');
bloomFolder.add(params, 'threshold', 0, 1).onChange(function (value) {
  bloomPass.threshold = Number(value);
});
bloomFolder.add(params, 'strength', 0, 3).onChange(function (value) {
  bloomPass.strength = Number(value);
});
bloomFolder.add(params, 'radius', 0, 1).onChange(function (value) {
  bloomPass.radius = Number(value);
});

完成这些步骤后，您应该能够控制绽放，但不能控制颜色。

js 复制代码 
<script id="fragmentshader" type="fragment">
  uniform float u_red;
  uniform float u_blue;
  uniform float u_green;
  void main() {
      gl_FragColor = vec4(vec3(u_red, u_green, u_blue), 1. );
  }
</script>

效果如下：

用一个很酷的相机效果结束

你猜怎么着？在另一篇文章中有解释。

请确保在继续之前删除OrbitControls。

js 复制代码 
let mouseX = 0;
let mouseY = 0;
document.addEventListener('mousemove', function (e) {
  let windowHalfX = window.innerWidth / 2;
  let windowHalfY = window.innerHeight / 2;
  mouseX = (e.clientX - windowHalfX) / 100;
  mouseY = (e.clientY - windowHalfY) / 100;
});

在animate()函数中，我们使用第二个代码块来更新相机的位置和方向。

js 复制代码 
function animate() {
  camera.position.x += (mouseX - camera.position.x) * 0.05;
  camera.position.y += (-mouseY - camera.position.y) * 0.5;
  camera.lookAt(scene.position);

  uniforms.u_time.value = clock.getElapsedTime();
  uniforms.u_frequency.value = analyser.getAverageFrequency();
  bloomComposer.render();
  requestAnimationFrame(animate);
}

完整代码

原文： waelyasmina.net/articles/ho...

相关推荐
ling0814081429 分钟前
Vue3全局挂载Dialog组件
前端·javascript·vue
Catherinemin31 分钟前
CSS|12 display属性
前端·css
Amo 672931 分钟前
css filter: drop-shadow() 高级阴影效果
前端·css
天天进步201535 分钟前
CSS中的深度选择器 deep 详解
前端·css
95岁IT民工37 分钟前
大屏项目使用css混合实现光源扫描高亮效果
前端·css·vue.js
匹马夕阳1 小时前
一篇梳理清楚JavaScript ES6中的Promise
前端·javascript·es6
2401_857026231 小时前
SSM 框架结合 Vue 实现电脑测评系统：助力用户明智选择
前端·javascript·vue.js
连胜优佳2 小时前
1.zabbix概述
前端·zabbix
夜雨翦春韭2 小时前
Firefox 基本设置备忘
前端·firefox
m0_748233882 小时前
【Java Web】Axios实现前后端数据异步交互
java·开发语言·前端
热门推荐
01解决：使用WileyNJDv5_Template模板时，无法生成pdf文件。02玄机平台应急响应—webshell查杀03(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明04机密计算--基于可信执行环境（TEE）的隐私计算技术05文心一言最新重磅发布！06Docker 夺命连环 15 问07数据可视化揭示人口趋势：从数字到图像的转变08硬件知识积累 USB 接口 type - A type - B type - C 的介绍与功能说明 （简单介绍）0904 - matlab m_map地学绘图工具基础函数 - 设置网格10如何使用ChatGPT创作一个小说式的虚构的世界