Graphics Reference
In-Depth Information
Adding a simple collision detection
When you're creating games or interactive environments, a common requirement is
the option to detect collisions between objects. In the
Adding a physics engine
recipe,
we use an external library to handle collisions (and other physics). This, however, is a
rather heavy solution if all you require is the option to detect collisions. In this recipe,
we provide a simple approach that you can use if you want to detect collisions without
having to use an external library.
Getting ready
In this recipe, we use
THREE.Raycaster
to check for collisions. This object is
provided by the standard Three.js distribution, so you don't need any additional librar-
ies. We've provided a simple example that shows you how this recipe can be applied.
For this, open the
07.06-add-simple-detection-collision.html
example in
your browser, and you will see something similar to what is shown in the following
screenshot:
In this example, you can move the central cube around using the arrow keys and ro-
tate it around the
y
axis with the
a
and
b
keys. Whenever a collision occurs with one
of the other cubes, we change the opacity to indicate a collision.
How to do it…
To accomplish collision detection, we need to take a couple of steps:
