Dislocazione vertice con contesto audio (THREE.JS R76)

Sto provando a mappare i vertici dall'audio AudioContext in Three.js.Dislocazione vertice con contesto audio (THREE.JS R76)

Ora, l'ho fatto con successo con gli aerei (non shader) ma sto incontrando problemi nel tentativo di applicarlo a un cilindro. Poiché i vertici del cilindro sono vettori pieni, invece di 0 per un piano, non so come li mapperei ai dati di frequenza.

Sono incluse alcune funzioni extra per i futuri utenti che cercano il contesto audio.

Audio Contesto

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

Ecco il mio codice per un aereo superiore e inferiore ...

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

bloccati qui

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

Capisco che farlo con gli shader abbia più senso ma non ne so ancora abbastanza. Suppongo che tu inserirai i dati di frequenza come un'uniforme, ma poi sono tornato al mio problema originale di freq per la manipolazione del vettore.

fonte

2016-04-29 Michael Paccione

interessante. Quindi si muta la z di ciascun vertice in base ai dati di frequenza. Invece di dipendere dall'ordine del piano (che potresti calcolare per il cilindro) perché non dipendere solo dalla posizione x, y per cercare i dati di frequenza? qualcosa come Math.floor (cylinderVerts [i] .x/cylinderLengthInX * numOfFrequencyDatums) – user01

Non capisco davvero cosa stai proponendo ma cambiando qualsiasi vert.x, vert.y, o vert.z basta che il cilindro scompaia ecco perché ho bisogno di cambiare l'intero vettore3. Avevo giocato con il moltiplicarsi per uno scalare e aggiungendo uno scalare, ma non funzionava nel modo in cui mi serviva. –

Scusate se non sono stato chiaro. Intendevo che lasciavi x, y come sono e aggiorna la z per ogni vert. Ciò distorcerà il cilindro in qualche modo, ma forse non in un modo utile o desiderato. Potrebbe pubblicare una scena demo su blo.ocks.org o da qualche parte? – user01

Dislocazione vertice con contesto audio (THREE.JS R76)

risposta

Problemi correlati