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() {
        console.log("rendering");
        requestAnimationFrame(render);
        renderer.render(scene, camera);

        // billboard effect goes here.
        scene.traverse(function (node)
        {
            if(node instanceof THREE.Mesh)
            {
                node.quaternion.copy(camera.quaternion);
            }
        });
    }

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.