Geometries and Meshes - Three.js - page 89

cube.lookAt(boxMesh.position);

};
this.lookAtSphere = function() {
cube.lookAt(sphereMesh.position);

};
this.lookAtTetra = function() {
cube.lookAt(tetraMesh.position);

};

};

So when you push the lookAtSphere button, the rectangle's lookAt function will
be called with the sphere's position.

How it works...

Using this code, it is very easy to line up one object with another. With the lookAt
function, Three.js hides the complexity that is needed to accomplish this. Internally,
Three.js uses matrix calculations to determine the rotation it needs to apply to the
object to align it correctly with the object you're looking at. The required rotations are
then set on the object (to the rotation property) and shown in the next render loop.

There's more…

In this example, we showed you how to align one object to another. With Three.js,
you can use the same approach for other types of objects. You can point the camera
to center on a specific object using camera.lookAt(object.position) , and
you can also direct a light to point to a specific object using
light.lookAt(object.position) .

You can also use lookAt to follow a moving object. Just add the lookAt code in
the render loop, and the object will follow the moving object around.