用Three.js和AudioContext实现音乐频谱的3D可视化

代码地址在这里：https://github.com/QuarkGluonPlasma/threejs-exercize

这个效果的实现能学到两方面的内容：

AudioContext对音频解码和各种处理

Three.js的3d场景绘制

那还等什么，我们开始吧。

要做音乐频谱可视化，首先要获取频谱数据，这个用AudioContext的api。

AudioContext的api可以对音频解码并对它做一系列处理，每一个处理步骤叫做一个Node。

我们这里需要解码之后用analyser来拿到频谱数据，然后传递给audioContext做播放。所以有三个处理节点：Source、Analyser、Destination

先对音频解码，创建BufferSource的节点来保存解码后的数据，然后传入Analyser获取频谱数据，最后传递给Destination来播放。

调用source.start()开始传递音频数据，这样analyser就能够拿到音乐频谱的数据了，Destination也能正常的播放。

analyser拿到音频频谱数据的api是这样的：

每一次能拿到的frequencyData有1024个元素，可以按50个分为一份，算下平均值，这样只会有1024/50=21个频谱单元数据。

之后就可以用Three.js把这些频谱数据画出来了。

21个数值，可以绘制成21个立方体BoxGeometry，材质的话，用MeshPhongMaterial（因为这个反光的计算方式是一个姓冯的人提出来的，所以叫Phong），它的特点是表面可以反光，如果用MeshBasicMaterial，是不反光的。

之后加入花瓣雨效果，这个我们之前实现过，就是用Sprite（永远面向相机的一个平面）做贴图，然后一帧帧做位置的改变。

通过“漫天花雨”来入门Three.js

之后分别设置灯光、相机就可以了：

灯光我们用点光源PointLight，从一个位置去照射，配合Phong的材质可以做到反光的效果。

相机用透视相机PerspectiveCamera，它的特点是从一个点去看，会有近大远小的效果，比较有空间感。而正交相机OrthographicCamera因为是平行投影，就没有近大远小的效果，不管距离多远的物体都是一样大。

之后通过Renderer渲染出来，然后用requestAnimationFrame来一帧帧的刷新就可以了。

接下来我们具体写下代码：

我们先通过fetch拿到服务器上的音频文件，转成ArrayBuffer。

ArrayBuffer是JS语言提供的用于存储二进制数据的api，和它类似的还有Blob和Buffer，区别如下：

ArrayBuffer是JS语言本身提供的用于存储二进制数据的通用API

Blob是浏览器提供的API，用于文件处理

Buffer是Node.js提供的API，用于IO操作

这里，我们毫无疑问要用ArrayBuffer来存储音频的二进制数据。

然后用AudioContext的api做解码和后续处理，分为Source、Analyser、Destination3个处理节点：

获取音频，用AudioContext处理之后，并不能直接播放，因为浏览器做了*。必须得用户主动做了一些操作之后，才能播放音频。

为了绕过这个*，我们监听mousedown事件，用户点击之后，就可以播放了。

之后可以创建3D场景中的各种物体：

创建立方体：

因为频谱为1024个数据，我们50个分为一组，就只需要渲染21个立方体：

立方体的物体Mesh，分别设置几何体是BoxGeometry，长宽高都是10，材质是MeshPhongMaterial，颜色是黄绿色。

每个立方体要做下x轴的位移，最后整体的分组再做下位移，移动整体宽度的一半，达到居中的目的。

频谱就可以通过这些立方体来做可视化。

之后是花瓣，用Sprite创建，因为Sprite是永远面向相机的平面。贴上随机的纹理贴图，设置随机的位置。

分别把频谱的立方体和一堆花瓣加到场景中之后，就完成了物体的创建。

然后设置下相机，我们是使用透视相机，要分别指定视角的角度，最近和最远的距离，还有视区的宽高比。