Three.js - billboard effect, maintain orientation after camera pans

Question

I have a plane geometry that is always set to face the camera via:

plane.lookAt(camera.position);

in the update loop. I am using OrbitControls to control the camera. When rotating or zooming the scene, the plane continues to face the camera as expected.

However, after panning the scene, while the plane continues to face the camera, rotating the camera appears to rotate the plane as well, so that for example if the plane were to contain text, the text could appear rotated or even upside down to the viewer.

How can the plane be forced to stay aligned with the camera?

Example at jsFiddle: http://jsfiddle.net/Stemkoski/ptVLD/

Answer 1

The easiest solution is to simply add this to your animation loop:

plane.quaternion.copy( camera.quaternion );

Updated fiddle: http://jsfiddle.net/ptVLD/15/

Alternatively, you could use a THREE.Sprite

EDIT: Updated to three.js r.67

Answer 2

Somehow, just posting at StackOverflow seems to organize and clarify my thoughts :)

A better solution (for more robust billboarding) seems to be:

plane.rotation.setFromRotationMatrix( camera.matrix );

The jsFiddle code link in the question has been updated accordingly; however, now there is some "shuddering" of the camera/plane when rotating the camera after panning, so I suspect this solution is still not ideal and I would gladly appreciate and accept an answer which improves upon this one.

Answer 3

The "shuddering" is caused by the fact that you don't use the camera position for this new frame. You update the plane based on the previous camera position and then you update the camera based on the controls.

function animate() {
    // plane.lookAt( camera.position ); // rotation messed up after camera pan
    plane.rotation.setFromRotationMatrix( camera.matrix );

    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

If you swap the two operations you have no "shudder" at all

function animate() {
    controls.update();

    // plane.lookAt( camera.position ); // rotation messed up after camera pan
    plane.rotation.setFromRotationMatrix( camera.matrix );

    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}