Converting world coordinates to screen coordinates

If you are creating a game that provides a 2D interface on top of a 3D world, for instance, as shown in the Creating a 2D overlay recipe, you might want to know how the 3D coordinates map to your 2D overlay. If you know the 2D coordinates, you can add all kinds of visual effects to the 2D overlay, such as tracking the code or letting the 2D overlay interact with the objects in the 3D scene.

Getting ready

You don't need to perform any steps to get ready for this recipe. In this recipe, we can use the THREE.Projector object available in Three.js to determine the correct coordinates. You can view the result from this recipe in action by opening 03.07-convert-world-coordintate-to-screen-coordinates.html in your browser as shown in the following screenshot:

The box appears at random positions when you open this example. When you click on the calculateScreenCoordinate button in the menu in the top-right section, the x and y coordinates of the center...