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

Question

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

这是一个“较旧”的技术示例，它只会为我带来错误:

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

以下是一些较新的代码(？)的片段，这些代码没有为我提供足够的上下文来开始工作，但看上去却更加干净:

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 。