Conversión de posición 3D a posición de pantalla 2d

Necesito el código Three.js para convertir las coordenadas del objeto 3D en 2d en un elemento ‘div’ para que pueda colocar las tags de texto donde deben estar (sin esas tags escalar / mover / rotar junto con el movimiento 3D). Desafortunadamente, todos los ejemplos que he visto y probado hasta ahora parecen estar usando funciones / técnicas obsoletas. En mi caso, creo que estoy usando r69 de Three.js.

Aquí hay un ejemplo de una técnica ‘más antigua’ que solo produce errores para mí:

Three.js: conversión de la posición 3d a la posición de pantalla 2d

Aquí hay un fragmento de un código más reciente (?) Que no proporciona el contexto suficiente para que pueda trabajar, pero se ve mucho más limpio:

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

He escrito para mi proyecto la siguiente función; recibe una instancia THREE.Object3D y una cámara como parámetros y devuelve la posición en la pantalla.

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

Luego creé un THREE.Object3D solo para mantener la posición div (está conectado a una malla en la escena) y cuando es necesario puede convertirse fácilmente a la posición de pantalla usando la función toScreenPosition y actualiza las coordenadas del elemento div.

 var proj = toScreenPosition(divObj, camera); divElem.style.left = proj.x + 'px'; divElem.style.top = proj.y + 'px'; 

Aquí un violín con una demostración .

Puede convertir una posición 3D en coordenadas de pantalla usando un patrón como ese:

 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

Para mí, esta función funciona (Three.js versión 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; }