Converting a Vector3 point to screen space (Vector2) using Three.js [73]

Question

I have initialised a perspective camera at a position looking at the origin (0,0,0). Reading around the most common solution to this I've found is the one described here https://stackoverflow.com/a/27412386/1330719.

From my understanding of the project method is, I should get a vector where the x,y coordinates are between -1 and 1. This doesn't seem to be the case at all and I end up getting coordinates that are completely out of bounds.

Furthermore, if the original vector point is at (0,0,0) I seem to get (NaN, NaN) back. If my camera is looking at position (0,0,0) I expect the Vector3 (0,0,0) to return (width/2, height/2).

In case it is needed, this is how I'm initialising my camera:

this.camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 10E5);

this.camera.position.set(0, 500, -500);
this.camera.lookAt(new THREE.Vector3(0,0,0));

this.camera.updateProjectionMatrix();

Does anyone have a reason why this might not be working? Or alternatively a recommended way of mapping a Vector3 point to the screen space given a camera?

A jsfiddle of what I mean: https://jsfiddle.net/m78wjLyc/

could you please post a jsfiddle of what you have right now? That would really help us to actually see the situation that you have trouble with. — SalmonKiller
your cameras' far plane (i.e. 10E5) is huge. Use something like 1000 — gaitat
@gaitat, my understanding is this is just a clipping plane and doesn't really matter (apart from regarding performance concerns) — rbhalla
it is a clipping plane but based on that value perspective computations are performed. The greater the value the bigger loss of accuracy on those computations. — gaitat

Vasily Liaskovsky Vasily Liaskovsky · Accepted Answer · 2016-01-11T19:17:30

You should also use camera.updateMatrixWorld(true) before projecting.

Usually this is done automatically by renderer, but you don't use any, so the camera.matrixWorld stays untouched after you change the position, and makes the camera project things as if it was at the world origin.

Converting a Vector3 point to screen space (Vector2) using Three.js [73]

1 Answers