Rozkład pionów z kontekstem audio (THREE.JS R76)

Question

Próbuję odwzorować wierzchołki z api AudioContext w pliku Three.js.

Teraz z powodzeniem wykonałem to z płaszczyznami (bez shadera), ale mam problemy z próbą zastosowania go do cylindra. Ponieważ wierzchołki cylindrów są pełnymi wektorami, zamiast zer w płaszczyźnie, nie wiem, jak je zmapować do częstotliwości.

Mam pewne dodatkowe funkcje dla przyszłych widzów szukających Kontekstu Audio.

audio Kontekst

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

Oto mój kod na górnej i dolnej płaszczyzny ...

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

zakleszczony tutaj

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

Rozumiem, że robienie tego za pomocą shaderów ma więcej sensu, ale jeszcze nie wiem wystarczająco dużo. Przypuszczam, że przekażesz dane o częstotliwości jako jednolitą, ale zaraz powróciłem do mojego pierwotnego problemu freq do manipulacji wektorowej.

Answer 1

Znaleziono przykład cieniowania głęboko w przykładach Three.js ...

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