Pointing an object to another object

A common requirement for many games is that cameras and other objects follow each other or be aligned to one another. Three.js has standard support for this using the lookAt function. In this recipe, you'll learn how you can use the lookAt function to point an object to look at another object.

Getting ready

The example for this recipe can be found in the sources for this book. If you open 02.07-point-object-to-another.html in your browser, you see something similar to the following screenshot:

With the menu, you can point the large blue rectangle to look at any of the other meshes in the scene.

How to do it...

Creating the lookAt functionality is actually very simple. When you add THREE.Mesh to the scene, you can just call its lookAt function and point it to the position it should turn to. For the example provided for this recipe, this is done as follows:

  control = new function() {
    this.lookAtCube = function() {
      cube.lookAt(boxMesh.position);
 ...