The three-body problem

  • Article

Using the WebGL-based Three.js library, learn how to model and visualize the dynamics of the three-body problem.

The three-body problem

In the three-body problem, our hypothetical universe is composed of only three point masses. We provide the masses with some initial conditions and then let the system naturally evolve. Stated another way, the three-body problem is:

Given initial mass, position and velocity values for the three masses, predict their motions as a function of time

There is no general closed-form solution to this problem, so we must numerically approximate its solution.

We look in more detail at the physics and mathematical details of the three-body problem, abstracted away in 3BodyWorker.js, in The physics and equations of the two- and three-body problem. Let's look now at the three-body problem code.

The code

The source code for the three-body problem is available through 3BodyProblem.html and 3BodyWorker.js (right-click to view source). 3BodyProblem.html is similar to 2BodyProblem.html. These are the only significant differences between the two:

  • A third (and final) planetary bitmap, images/moon.jpg, is added to the list of images to preload.
  • A third fieldset element is added to obtain m3's initial conditions.
  • The worker variable is made to refer to 3BodyWorker.js (instead of 2BodyWorker.js): worker = new Worker('3BodyWorker.js')
  • querySelectorAll, in handleSubmitButton, is used for a third time to set m3's initial conditions: var m3 = InitialCondition(document.getElementById('mass3').querySelectorAll('input')).
  • The init method in Simulation is passed all three mass objects: simulation.init([m1, m2, m3]).

The differences between 3BodyWorker.js and 2BodyWorker.js are syntactically trivial. That said, to fully understand 3BodyWorker.js, it may be necessary to:

  1. Read and understand The physics and equations of the two- and three-body problem and, as appropriate, review the resources in the Related topics section of this topic.
  2. Review each line of 3BodyWorker.js, including all code comments. Be aware that the code comments within 3BodyWorker.js refer to the equation numbers presented in The physics and equations of the two- and three-body problem.

Basic 3D graphics using Three.js

The one-body problem

The three-body problem

The physics and equations of the two- and three-body problem