在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点position投影到相对于渲染器画布的屏幕坐标，请执行以下操作：

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）。

three.js r.53

Answer 2

我找到了解决方案。左上角确实是plane顶点的0索引，但您还必须考虑已执行的转换。

function calculateLayer()
{
    // multiplyVector3 applies the performed transformations to the object's coordinates.
    var topLeft = tubeCard.matrixWorld.multiplyVector3( tubeCard.geometry.vertices[0].clone() );
    // index 24 is the bottom right, because the plane has 4x4 faces
    var bottomRight = tubeCard.matrixWorld.multiplyVector3( tubeCard.geometry.vertices[24].clone() );
    return {
            topLeft: convert3Dto2D( topLeft ),
            bottomRight: convert3Dto2D( bottomRight )
        }
}

function convert3Dto2D( positionVector )
{
    var projector = new THREE.Projector();
    var pos = projector.projectVector( positionVector, camera );

    var xcoord = Math.round( (  pos.x + 1 ) * window.innerWidth  / 2 );
    var ycoord = Math.round( ( -pos.y + 1 ) * window.innerHeight / 2 );

    return { x: xcoord, y: ycoord };
}

因此，一旦你有正确的坐标，应用了转换，你只需要使用WestLangley进行3d到2d的转换。