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

Question

我需要Three.js代码在'div'元素中将3D对象坐标转换为2d对象，以便我可以将文本标签放置在需要的位置（这些标签无需随3D运动缩放/移动/旋转）。不幸的是，到目前为止，我已经看到并尝试过的所有示例似乎都在使用过时的功能/技术。就我而言，我相信我正在使用Three.js的r69。这是一个“较旧”的技术示例，它只会为我带来错误：three.js：将3d位置转换为2d屏幕位置以下是一些较新的代码（？）的片段，这些代码没有为我提供足够的上下文来开始工作，但看上去却更加干净：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）：

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;

    }