Marker position in Screen format (using AR.js)

Question

I was able to get the marker position using the following code

this.marker.object3D.getWorldPosition(vector);

I would like to know if it is possible to convert this position (x,y,z) in the equivalent screen position (width, height).

Could you please give me some ideas to solve this issue?

Answer 1

You can do this with two steps:

• Convert the position in world space to NDC space via Vector3.project().
• Use the width and height of your canvas for the screen space conversion.

const vector = new THREE.Vector3();
vector.project( camera ); 

vector.x = ( vector.x + 1) * width / 2;
vector.y = - ( vector.y - 1) * height / 2;
vector.z = 0;