How can I get the point on screen that an 3d object is in?

Hi! I’m making a clicker game with three js. I have these different “businesses” represented buy buildings. When you click on them I’m going to open up a little menu that will give you options for upgrading them.

I would love it if I could have this menu float next to the building, when it is clicked. I’m just having difficulty figuring out how to find the point on screen that the business is at.

If anyone has a good solution for this let me know!

Something like this could help:

Maybe you could add one invisible Box Geometry to contain all objects from a single selection and attach the menu callout to that.


There’s a nice article Three.js Aligning HTML Elements to 3D that’ll show you how to keep an HTML label in front of an Object3D — you can generalize that to a menu or any other HTML content.

1 Like

Maybe this article can help you