Three.js - a billboard effect that supports orientation after a pan camera

Question

I have flat geometry that is always installed in the camera:

plane.lookAt(camera.position); 

in the update cycle. I use OrbitControls to control the camera. As you rotate or scale the scene, the aircraft continues to look at the camera as expected.

However, after panning the scene, when the plane continues to collide with the camera, rotating the camera also rotates the plane, so that, for example, if the text contained on the plane, the text might appear to be rotated or even up to the viewer.

How to make the plane aligned with the camera?

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

Answer 1

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

 plane.quaternion.copy( camera.quaternion ); 

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

Alternatively you can use THREE.Sprite

EDIT: Updated to three. js r.67

Answer 2

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

A better solution (for a more reliable billboard) is as follows:

 plane.rotation.setFromRotationMatrix( camera.matrix ); 

The jsFiddle link in the question has been updated accordingly; however, there are now some “shudders” of the camera / plane when the camera rotates after panning, so I suspect that this solution is still not perfect, and I would gladly appreciate and accept the answer, which will improve after that.