three.js音樂可視化
我們直接參考這篇文章就可以了：
基於Web Audio API實現音頻可視化效果
基本概念
要從你的音頻源獲取數據，你需要一個 AnalyserNode節點，它可以用 AudioContext.createAnalyser() 方法創建，比如：
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
然後把這個節點（node）連接到你的聲源：
source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);
// etc.
注意： 分析器節點(Analyser Node) 不一定輸出到另一個節點，不輸出時也可以正常使用。但前提是它必須與一個聲源相連（直接或者通過其他節點間接相連都可以）。
分析器節點(Analyser Node) 將在一個特定的頻率域裏使用快速傅立葉變換(Fast Fourier Transform (FFT) )來捕獲音頻數據，這取決於你給 AnalyserNode.fftSize 屬性賦的值（如果沒有賦值，默認值爲2048）。
注意： 你也可以爲FFT數據縮放範圍指定一個最小值和最大值，使用AnalyserNode.minDecibels 和AnalyserNode.maxDecibels進行設置，要獲得不同數據的平均常量，使用 AnalyserNode.smoothingTimeConstant。閱讀這些頁面以獲得更多如何使用它們的信息。
要捕獲數據，你需要使用 AnalyserNode.getFloatFrequencyData() 或 AnalyserNode.getByteFrequencyData() 方法來獲取頻率數據，用 AnalyserNode.getByteTimeDomainData() 或 AnalyserNode.getFloatTimeDomainData() 來獲取波形數據。
這些方法把數據複製進了一個特定的數組當中，所以你在調用它們之前要先創建一個新數組。第一個方法會產生一個32位浮點數組，第二個和第三個方法會產生8位無符號整型數組，因此一個標準的JavaScript數組就不能使用 —— 你需要用一個 Float32Array 或者 Uint8Array 數組，具體需要哪個視情況而定。
那麼讓我們來看看例子，比如我們正在處理一個2048尺寸的FFT。我們返回 AnalyserNode.frequencyBinCount 值，它是FFT的一半，然後調用Uint8Array()，把frequencyBinCount作爲它的長度參數 —— 這代表我們將對這個尺寸的FFT收集多少數據點。
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
要正確檢索數據並把它複製到我們的數組裏，就要調用我們想要的數據收集方法，把數組作爲參數傳遞給它，例如：
analyser.getByteTimeDomainData(dataArray);
現在我們就獲取了那時的音頻數據，並存到了我們的數組裏，而且可以把它做成我們喜歡的可視化效果了，比如把它畫在一個HTML5 畫布上。
在canvas上能繪製出效果，同樣我們可以直接移植到three.js上面來，這樣就可以製作出3D的可視化效果了。
比如這樣子的：……