1

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

在此处输入图像描述

我已经尝试了这THREE.Projection门课，但没有帮助，即使我[0]使用.projectVector. 它计算出：

x: -0.1994540991160383
y: 0.17936202821347358
z: 0.9970982652556688

...这对我帮助不大。

4

2 回答 2

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

三.js r.53

于 2012-12-25T20:34:02.633 回答
0

我找到了解决方案。左上角确实是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 };
}

因此，一旦有了正确的坐标并应用了变换，您只需使用 3d 到 2d 的转换，这要归功于 WestLangley。

于 2012-12-26T17:42:24.433 回答