javascript - 计算 Three.js 投影中的顶部、左侧、宽度、高度

Question

我正在解决一个问题:我需要将 DIV 放置在 WebGL 动画上。我旋转 mesh ，基于PlaneGeometry占据一个矩形大小，然后我想要DIV的顶部位置，所以我需要知道X，Y坐标和平面的渲染尺寸是多少。

我已经尝试过THREE.Projection类，但没有帮助，即使我预测 [0]垂直使用 .projectVector 。它计算出:

x: -0.1994540991160383
y: 0.17936202821347358
z: 0.9970982652556688

...这对我没什么帮助。

Answer 1

要将 3D 点位置投影到相对于渲染器 Canvas 的屏幕坐标，请执行以下操作:

var projector = new THREE.Projector();
var pos = projector.projectVector( position, camera );

var xcoord = Math.round( (  pos.x + 1 ) * canvas.width  / 2 );
var ycoord = Math.round( ( -pos.y + 1 ) * canvas.height / 2 );

在本例中，canvas 是 renderer.domElement。

可见世界左上角的一个点将投影到 ( 0, 0 )。

三.js r.53