three.js - 矢量项目 THREE.ArrayCamera

Question

我正在尝试获取球体在屏幕上的位置并在其附近显示注释。我尝试了几种方法，但都没有给出正确的坐标。相机是THREE.ArrayCamera，我觉得是主要问题，我也试过vector.project(camera.cameras[3])，还是不行。CSS2DRenderer 也不适用于 arrayCamera。JSFIDDLE：https ://jsfiddle.net/cjuL4qx7/

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`;

标签： three.js