Вершина Displacment с аудиоконтекстом (THREE.JS R76)

Question

Я пытаюсь отобразить вершины из AudioContext api в Three.js.

Теперь я успешно сделал это с самолетами (без шейдеров), но у меня проблемы с попыткой применить его к цилиндру. Поскольку вершины цилиндра являются полными векторами, а не 0 для плоскости, я не знаю, как я буду сопоставлять их с frequencyData.

Я включаю некоторые дополнительные функции для будущих зрителей, которые ищут аудиоконтекст.

Аудио Context

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; 
} 

STUCK ЗДЕСЬ

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