Vector project THREE.ArrayCamera

I’m trying to get the position of the sphere on the screen and display annotation near it. I’ve tried several approaches, but none of them give correct coordinates. The camera is THREE.ArrayCamera, and I think it’s the main problem, I’ve also tried to vector.project(camera.cameras[3]), still doesn’t work.

const canvas = renderer.domElement; // `renderer` is a THREE.WebGLRenderer
var sphere = spheres_array[0];
var camera_for_label = camera;
var vector = sphere.getWorldPosition().clone();
// map to normalized device coordinate (NDC) space
vector.project( camera_for_label );
// map to 2D screen space
vector.x = Math.round( (   vector.x + 1 ) * canvas.width  / 2 ),
vector.y = Math.round( ( - vector.y + 1 ) * canvas.height / 2 );
vector.z = 0;

    var annotation = document.querySelector('.annotation'); = `${vector.y}px`; = `${vector.x}px`;
1 Like

Can you please demonstrate the issue with a live example?

Did you have a chance to take a look?

Yes but I could not figure out a solution so far.

Is there any other way that allows using HTML/CSS annotations?

Have you already tried CSS2DRenderer?

same result

Can you please show with a live example how you have used CSS2DRenderer?