I am currently working on mapping vertices from the AudioContext api in Three.js.
So far, I have been able to map these vertices successfully with planes (non-shader), but I am facing challenges when trying to apply it to a cylinder. The vertex values for cylinders are full vectors, unlike planes that have 0s. I'm unsure about how to properly map these vectors to the frequencyData.
For those interested in Audio Context, here are some additional functions:
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);
}
Below 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;
}
Currently stuck at this point...
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 realize using shaders would be more logical, but I don't have enough knowledge in that area yet. It seems passing the frequency data as a uniform might be the solution, but then again I run into the issue of manipulating freq to vector values.