Rotating an object around a point in space

When you rotate an object using its rotate property, the object is rotated around its own center. In some scenarios, though, you might want to rotate an object around a different object. For instance, when modeling the solar system, you want to rotate the moon around the earth. In this recipe, we'll explain how you can set up Three.js objects in such a way that you can rotate them around one another or any point in space.

Getting ready

For this recipe, we've also provided an example you can experiment with. To load this example, just open 02.02-rotate-around-point-in-space.html in a browser. When you open this file, you'll see something similar to the following screenshot:

With the controls on the right-hand side, you can rotate various objects around. By changing the rotationSpeedX, rotationSpeedY, and rotationSpeedZ properties, you can rotate the red box around the center of the sphere.

Tip

To best demonstrate the rotation of an object...