Three.js: Get the Direction in which the Camera is Looking

Question

I'm creating game in using html5 and THREE.js, and I have a camera that rotates with the euler order of 'YXZ'.

This is so the camera rotation up, down, left and right like a head. As in first person view.

With this euler order, the z property in camera.rotation is not used (always 0). x is used to specify pitch or latitude in radians, and y is used depict the longitude.

I have a number of targets moving around the user in a spherical manner, with the camera constantly at the center of this sphere. Lets say the sphere has a radius of 1000.

My aim is calculate the angle between where the camera is LOOKING, and where the target is.

I wrote this code that calculates the angle between 2 vectors:

var A = new THREE.Vector3(1,0,0);
var B = new THREE.Vector3(0,1,0);

var theta = Math.acos( A.dot(B) / A.length() / B.length() );

// theta = PI/2;

I have the vector of the target (targets[0].position).

The thing is I cannot figure out a way to get the vector of where the camera is looking.

I've looked at Vector3.applyProjection and applyEuler methods, and played around but still cannot get any good results.

I believe that the euler order must first be changed back to 'XYZ' before any projections are made? I've tried, and I'm not sure how to do this, the documentation is pretty hard to understand.

Say if the camera is looking directly right, then I need to get a vector that is RADIUS distance away from the center in the direction of the current rotation.

So I will end up with 2 vectors, which I can do calculations on!

Revanche

Answer 1

The camera is looking down its internal negative z-axis. So create a vector pointing down the negative z-axis:

const vector = new THREE.Vector3( 0, 0, - 1 );

Now, apply the same rotation to the vector that is applied to the camera:

vector.applyQuaternion( camera.quaternion );

You can get the angle in radians to the target like so:

const angle = vector.angleTo( target.position );

---

EDIT: You can now get the direction in which the camera is looking like so:

const vector = new THREE.Vector3(); // create once and reuse it!
// ...
camera.getWorldDirection( vector );

Note: By passing in the vector in which to store the result, the method will not have to instantiate a new THREE.Vector3 every time the method is called.

Updated to three.js r.107

Attendance

how do i find out which direction the camera is facing in terms or north/south etc? or more simply: how much degrees the camera is rotated? I don't understand what target.position is – Thayer

camera now has getWorldDirection() to find which way it is facing in world space – Subspecies

Answer 2

I spent a long time trying to figure out captain obvious's question.

This is how it finally worked for me:

    vector = camera.getWorldDirection();
    theta = Math.atan2(vector.x,vector.z);

theta is in radians. This is how I orient my game's character to face the same way the camera is facing. The getWorldDirection() is a fairly new option on camera.

Rycca

This just saved me a huge headache, thanks! – Queridas

Answer 3

fluffybunny nailed it. With a small change to his awesome idea, you can get the rotation in degrees:

var vector = camera.getWorldDirection();
angle = THREE.Math.radToDeg( Math.atan2(vector.x,vector.z) );  

Paregmenon

Answer 4

try this one:

const { camera: { fov, position, quaternion } } = three;
const up = new Vector3(0, 1, 0).applyQuaternion(quaternion);
const lookAt = new Vector3(0, 0, -1).applyQuaternion(quaternion).add(position);

How to calculate the direction and up vector of a camera?

Corse