O'Reilly logo

Three.js Essentials by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Setting up collision detection

Now that we've got our animation up and running for our cube, we can look at how we can detect collisions. For this, we're going to use the THREE.Raycaster object. With this object, we can send out a ray from a specific point along a certain direction and get a list of all objects that were intersected by the ray. This is often used to select objects using the mouse. If you open the example 03.03-collision-detection.html file, you can see both the object selection and collision detection in action. Have a look at the following screenshot:

Setting up collision detection

With the controls in the menu on the top-right corner, you can move the red cube ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required