three.js billboard effect

If you want a certain node in three.js to always face the camera - you are looking for the billboard effect. Having a node constantly face the camera even after rotation is a problem solved with Quaternions. Quaternions are a number system that extend the complex numbers first described by the mathematician William Rowan Hamilton in 1843.

The paper is worth a read - but luckily you don't have to know all of that to create the billboard effect in three.js. In your render loop, you can update a mesh' quaternion data with the quaternion data of the camera.

    function render() {
        renderer.render(scene, camera);

        // billboard effect goes here.
        scene.traverse(function (node)
            if(node instanceof THREE.Mesh)

And that's it! You loop over every mesh in your scene and change the quaternion!

If you want to see it in action, you can generate a pyramid. and move around with the WASD (ZQSD) and arrow keys.