The three-body problem
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 obtainm3
'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 setm3
's initial conditions:var m3 = InitialCondition(document.getElementById('mass3').querySelectorAll('input'))
. - The
init
method inSimulation
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:
- 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.
- 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.
Related topics
Basic 3D graphics using Three.js
The physics and equations of the two- and three-body problem