Question

我需要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

Answer 1

您可以使用如下图案将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 2

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

＆＃13;

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

＆＃13;

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

2 个答案: