Three.js Series - Music and three.js

Music and three.js

We had a simple primer on three.js here, and one on manipulating vertices in three.js here.

Now, let’s do something fancier. There is a reason for the term audiovisual, so let’s create something that is not only visually appealing, but moves with music.

The code here is very similar to the last one on manipulating vertices. However, we focus on just one sphere here.

Let’s load the media (music) element, and add an Analyser instance to extract numerical data out of the music.

var fftSize = 128;
var listener = new THREE.AudioListener();
var audio = new THREE.Audio( listener );
var mediaElement = new Audio( 'music/Jester_IanPost.mp3' );
mediaElement.loop = true;
                
mediaElement.play();
audio.setMediaElementSource( mediaElement );
analyser = new THREE.AudioAnalyser( audio, fftSize );

With the Analyser instance, we can compute the average of the numbers with a simple reduce function.

var sum = analyser.data.reduce(function(a,b){return a+b;});
var avg = sum/analyser.data.length;

We can then use the average value to change the speed of change of the positions of each of the vertices, and the rotation of the sphere.

sphere_one.geometry.vertices.forEach(function(i){
var noisy = noise.simplex3(i.x,i.y,i.z)*0.0002;
                        i.x+=noisy*avg;
                        i.y+=noisy*avg;
                        i.z+=noisy*avg;
                    });

group.rotation.x += 0.0005*avg;
group.rotation.y += 0.0005*avg;
group.rotation.z += 0.0005*avg;

We need to update the Analyser during each frame.

analyser.getFrequencyData();

And that’s it. Enjoy!

The full code is here.

Music and three.js

Articles