带音频上下文的顶点位移（THREE.JS R76）

Question

我正在尝试从 Three.js 中的 AudioContext api 映射顶点。

现在，我已经成功地使用平面（非着色器）完成了此操作，但是运行在尝试将其应用于圆柱体时遇到了问题。由于圆柱顶点是完整向量，而不是平面的 0，我不知道如何将它们映射到频率数据。

我为未来寻找音频上下文的观众添加了一些额外的功能。

音频上下文

function audioLink(){
player = document.getElementById('musicPlayer'),
context = new (window.AudioContext || window.webkitAudioContext),
analyser = context.createAnalyser(),
source = context.createMediaElementSource(player);

source.connect(analyser);
analyser.connect(context.destination);
analyser.fftSize = 256;
frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteTimeDomainData(frequencyData);      
}

这是我的顶部和底部平面代码...

function updateVertWave(){
for (var i = 0, len = waveBottom.geometry.vertices.length; i < len; i++) {
    waveBottomVert[i].z = frequencyData[i]*6;   
    waveTopVert[i].z = frequencyData[i]*-6; 
}

waveBottom.geometry.verticesNeedUpdate = true;
waveTop.geometry.verticesNeedUpdate = true;
}

卡在这里

function updateVertCylinder(){
for (var i = 0, len = cylinder.geometry.vertices.length; i < len; i++) {
    (STUCK)
}
cylinder.geometry.verticesNeedUpdate = true;
cylinder.geometry.computeFaceNormals();
cylinder.geometry.computeVertexNormals(); 
scene.getObjectByName("cylinder").rotation.y += 0.004;
}

渲染

function render() {
renderFrame = requestAnimationFrame(render);
analyser.getByteFrequencyData(frequencyData);
if (planeViz) {
    updateVertWave();
} else { 
    updateVertCylinder();
}
renderer.render(scene, camera);
};

我知道用着色器做这个更有意义，但我还不够了解。我想你会把频率数据作为一个统一的传递，但我又回到了我原来的频率到矢量操作的问题。

Answer 1

在 three.js 示例中找到了一个着色器示例...

https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html

带音频上下文的顶点位移（THREE.JS R76）

Vertex Displacment with Audio Context (THREE.JS R76)

javascript

vertex

three.js

audiocontext