Three.js Armada Music Video - Musings of a Fondue

I wanted to recreate this music video in Three.js. The effects in the video are straightforward, yet mesmerizing. And the simple shapes used seemed like something I could duplicate.

Check out the end result!
Speakers / headphones are a must!

Disclaimer
On my computer, the demo works and is in-synch with the original music video. However, there seems to be variance depending on the machine it’s run on. Also, it has only been tested for Chrome (desktop) and Firefox (desktop). So I hope it works when you view it…

—Workflow—

Armada Logo

I used Inkscape to create a 2D version of the Armada logo. Much like in a previous post, I extracted the shape’s path data from the generated SVG and converted the draw instructions from SVG to HTML Canvas style. I then turned the 2D shape into 3D via extrusion as per the code in this Three.js example. See armadaLogo.js for the final code.

Scene Layout

I used Blender to roughly layout the scene before trying to do so in Three.js so I could get a feel of things.

Camera Movement

Figuring out how to move the camera was the trickiest part of this project. My first impression was that I would need to use complex splines or bezier curves to get the desired movement. Which I had no idea how to use.

I used manual key frames instead. And simple linear equations. For example there’s a scene where the camera starts located at the bottom of the sphere facing up. The camera then moves upwards until it reaches the top of the sphere. Then falls back down. The code for this was something as follows, 1) face upwards 2) increase z-position gradually over time until reach top 3) decrease z-position really quickly until reach bottom.


// Scene 3 ------------------------------------------------
/*
    move camera slowly to top
*/
else if ( elapsedTime > 94 && elapsedTime <= 150 ) {

    targetPosition.set( 0, 0, 900 );
    
    // move to top ( 0, 0, 250 )

    var rateOfChange = 0.314 ;

    if ( cameraPosition.z < 250 ){

        cameraPosition.z += rateOfChange;
    }
}
// Scene 4 ------------------------------------------------
/*
    move camera quickly to bottom
*/
else if ( elapsedTime > 150 && elapsedTime <= 153 ) {
    
    // move to bottom ( 0, 0, -425 )

    var rateOfChange = 13.2 ;

    if ( cameraPosition.z > -425 ){

        cameraPosition.z -= rateOfChange;
    }
}

I thought getting the camera to move along the sphere surface would be hard to code, but it turned out to be pretty straightforward. The path was essentially along a circular plane i.e. around the perimeter of a circle.

To revisit, maybe

The lights! Wasn’t sure, and still not sure which combinations create a setup that is closer to the video. I think it’s one of those things you learn by experience.

The materials. I used the settings in this Three.js example for all the objects, changing only the colors. I need to learn more about materials and which looks their various settings create.

I also got suggestions to add the following to make it closer to the video,