将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) spacevector.project( camera );// map to 2D screen spacevector.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;    }