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];
sphere.material.color.setHex("0x0000FF")
var camera_for_label = camera;
camera_for_label.updateMatrixWorld();
camera_for_label.updateProjectionMatrix();
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');
annotation.style.top = `${vector.y}px`;
annotation.style.left = `${vector.x}px`;