I’ve been playing with the fantastic three.js library lately, and for a project I needed a way to determine where an object in 3D space was on the page in 2D. I’ve gotten something working after reading through articles, documentation and commentary on three.js’ github issues page.
In the example below I have a div (the red circle) that’s being absolutely positioned on top of where I’ve determined the sphere to be.
This works with both Orthographic and Perspective cameras. You can take a look at the full code, but I’ve copied the relevant 3d-to-2d code here. First, here’s tracking with an Orthographic camera:
Here is the same idea with the Perspective camera:
I hope this proves useful to someone. Let me know if you have a better technique or if I missed anything.