Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ThreeJS: rotate on y axis to face camera

I want my object to rotate on the Y axis to always face the camera (as if a human was turning around in circles), as the camera moves.

This is what I have tried so far:

var render = function() {
    animationFrameId = window.requestAnimationFrame( render);

    obj.lookAt(camera.position);

    obj.rotation.set(0, obj.rotation.y, 0);
}

But i am missing some simple math or trig function, because when i rotate, it eventually 'jumps' and the object appears to face the wrong direction

like image 361
wildwilly Avatar asked Mar 24 '16 13:03

wildwilly


1 Answers

If you use a .lookAt the object look to the camera in all directions, you have to calculate the angle on Y plane between camera and mesh like this.

var render = function() {

    animationFrameId = window.requestAnimationFrame( render);    

    obj.rotation.y = Math.atan2( ( camera.position.x - obj.position.x ), ( camera.position.z - obj.position.z ) );

}
like image 144
Davide Necchi Avatar answered Sep 19 '22 22:09

Davide Necchi