将 3D 位置转换为 2d 屏幕位置 [r69!]

Question

我需要 Three.js 代码将 3D 对象坐标转换为 'div' 元素中的 2d 坐标，以便我可以将文本标签放置在需要的位置（这些标签不会随着 3D 移动而缩放/移动/旋转） .不幸的是，到目前为止我看到和尝试过的所有例子似乎都在使用过时的功能/技术。就我而言，我相信我使用的是 Three.js 的 r69。

这是一个“旧”技术的示例，它只会为我产生错误：

Three.js: converting 3d position to 2d screen position

这是一些较新的代码 (?) 的 sn-p，它没有提供足够的上下文让我开始工作，但看起来更干净：

https://github.com/mrdoob/three.js/issues/5533

Answer 1

我为我的项目编写了以下函数；它接收THREE.Object3D 实例和相机作为参数，并返回屏幕上的位置。

function toScreenPosition(obj, camera)
{
    var vector = new THREE.Vector3();

    var widthHalf = 0.5*renderer.context.canvas.width;
    var heightHalf = 0.5*renderer.context.canvas.height;

    obj.updateMatrixWorld();
    vector.setFromMatrixPosition(obj.matrixWorld);
    vector.project(camera);

    vector.x = ( vector.x * widthHalf ) + widthHalf;
    vector.y = - ( vector.y * heightHalf ) + heightHalf;

    return { 
        x: vector.x,
        y: vector.y
    };

};

然后我创建了一个 THREE.Object3D 只是为了保持 div 的位置（它附加到场景中的网格），并且在需要时可以使用 toScreenPosition 函数轻松转换为屏幕位置，它会更新 div 的坐标元素。

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';

Here a fiddle with a demo.

Answer 2

您可以使用如下模式将 3D 位置转换为屏幕坐标：

var vector = new THREE.Vector3();
var canvas = renderer.domElement;

vector.set( 1, 2, 3 );

// map to normalized device coordinate (NDC) space
vector.project( camera );

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

three.js r.69

Answer 3

对我来说这个功能有效（Three.js 版本 69）：

function createVector(x, y, z, camera, width, height) {
        var p = new THREE.Vector3(x, y, z);
        var vector = p.project(camera);

        vector.x = (vector.x + 1) / 2 * width;
        vector.y = -(vector.y - 1) / 2 * height;

        return vector;
    }