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

我需要Three.js代码将3D对象坐标转换为“div”元素中的2d对象,以便我可以在需要的位置放置文本标签(没有那些标签与3D移动一起缩放/移动/旋转).不幸的是,我迄今为止看过和尝试的所有例子似乎都在使用过时的功能/技术.在我的情况下,我相信我正在使用Three.js的r69.

这是一个“老”技术的例子,只是为我产生错误:

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

以下是一些较新的代码(?)的代码段,它不能为我提供足够的上下文来工作,但是看起来更清洁:

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

我为我的项目写了以下功能;它接收一个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.

相关文章
相关标签/搜索