Project world position to screen coordinate system

coordinate-system

#1

I want to project the world position to screen. And i found Vector3.project(camera). But I got Infinity.

var geom = new THREE.SphereGeometry(0.1,30,30);
var mat = new THREE.MeshBasicMaterial({color: 0xffffff});
var mesh = new THREE.Mesh(geom, mat);
mesh.position.set(1,2,0);
scene.add(mesh);

var position = mesh.position.clone();
position.project(camera);
console.log(position)


So how to project world position to screen coordinate system correctly?


#2

You have to call camera.updateMatrixWorld(); before you use Vector3.project().

https://jsfiddle.net/f2Lommf5/5772/


Mesh disapears on vector.project
#3

thank you very much.it wworks!:grin:


#4

There is not a lot of documentation on the reason. If could tell briefly why one does need to do that before projecting a Vector please, that’d be helpful. Thanks.


#5

Because Vector3.project() uses camera.matrixWorldInverse which is calculated by calling Camera.updateMatrixWorld().


#6

I should have read the codebase, my bad. Thanks much tho.