Vertex Displacment with Audio Context (THREE.JS R76)

Question

I am trying to map vertices from the AudioContext api in Three.js.

Now, I have successfully done this with planes(non shader) but am running into problems trying to apply it to a cylinder. Since the cylinder vertices are full vectors, instead of 0's for a plane, I don't know how I would map them to the frequencyData.

I am including some extra functions for future viewers looking for Audio Context.

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

Here is my code for a top and bottom plane...

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 HERE

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

Render

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

I understand doing this with shaders makes more sense but I don't know enough for that yet. I suppose you would pass in the frequency data as a uniform but then I am right back to my original problem of freq to vector manipulation.

Answer 1

Found a shader example deep in the three.js examples...

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