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

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

• javascript
• three.js

1 Answer 1

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 ) );

}