Converting 3D position to 2d screen position [r69!]

Question

I need Three.js code to convert 3D object coordinates to 2d ones in a 'div' element so that I can place text labels where they need to be (without those labels scaling/moving/rotating along with the 3D movement). Unfortunately, all of the examples that I have seen and tried so far seem to be using obsolete functions/techniques. In my case, I believe that I am using r69 of Three.js.

Here is an example of an 'older' technique that just produces errors for me:

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

Here is a snippet of some newer code (?) that doesn't provide sufficient context for me to get working, but looks a lot cleaner:

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

Answer 1

I've written for my project the following function; it receives an THREE.Object3D instance and a camera as a parameters and returns the position on the screen.

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

Then I created a THREE.Object3D just to hold the div position (it's attached to a mesh in the scene) and when needed it can easily converted to screen position using the toScreenPosition function and it updates the coordinates of the div element.

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

Here a fiddle with a demo.