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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With