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.
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 libraries. 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...