Graphics Reference
In-Depth Information
Converting world coordinates to screen
coordinates
If you are creating a game that provides a 2D interface on top of a 3D world, for in-
stance, 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 of the box will be shown.
How to do it...
To convert world coordinates to screen coordinates, we use a couple of internal
Three.js objects:
1. The first object we need is
THREE.Projector
:
