Graphics Reference
In-Depth Information
Creating a 2D overlay
In most recipes, we only focus on the 3D aspect of Three.js. We show recipes that
explain how 3D objects and scenes are rendered, how they can be viewed with dif-
ferent cameras, and how you can change how they look through materials. When you
are creating games, you usually also have a 2D layer on top of your 3D scene. You
can use this to show health bars, 2D maps, inventory, and much more. In this recipe,
we'll show you how to create a 2D overlay using
THREE.OrthogonalCamera
and
THREE.PerspectiveCamera
together.
Getting ready
For this recipe, we require an image that we will use as an overlay. To demonstrate
this recipe, we create a simple image that looks like this:
