Third Body Problems (a 3D project in React)
When I started learning web development, I followed Paul Henschel. After almost 2 years of not having a slightest idea of what he’s talking about (fiber? shader?), I’ve finally decided to give 3D graphics a try myself.
Meet Third Body Problems.
You’ve seen it on the homepage of the website if you don’t have reduced motion preferred in your system.
The three orbs are placed with some randomness each time you see the page, so each simulation is unique.
Well, it’s not a real simulation though. I’ll get to that later.
What did I make it for
You’d probably guess that it was inspired by The Three Body Problem book .
As I was thinking about what simple project I should do, I thought about some abstract art.
So I remembered a scene where there were 3 spheres orbiting each other in unpredictable patterns, sort of an art object (though if I remember it right, these spheres turned out to be bombs). And as I have some interest in space and celestial mechanics, that seemed exactly what I wanted to make.
Three body problem is a pretty cool problem actually. A simple way to start a simulation that has unpredictable pattern is one where you’ve got 3 bodies with no initial velocity, placed on vertices of a scalene triangle.
My first react-three project, and the power of AI
It’s my first project using react-three/fiber and 3D graphics in general. But if you plan to use it, I’d suggest to first try some three.js to get familiar with some key concepts. Then move to react-three/fiber and cool helper hooks you can find in “drei” or “use-cannon”. I have to point out that poimandres are amazing.
I also have to point out that thinking in terms of vectors is hard initially. I had lots of practice with linear algebra in grad school but it still required a lot of effort to wrap my head around vectors 10 years later.
While making Third Body Problems, for the first time in my coding experience I relied on AI for a few tasks. I think it shaved off a few days of struggle for me. I used OpenAI playground and GitHub Copilot.
For example:
- I couldn’t quickly find how to get an object position for current frame. So I asked OpenAI and it just told me.
- OpenAI playground also helped me with a formula to calculate center of mass for three objects.
- GitHub Copilot was extremely helpful in writing simple but hard functions like the one to generate a random number out of a given range, clamp it and round to 2 decimal points. Don’t you just hate writing those?
The code for Third Body Problem is open source. Play around with it here in Codesandbox .
Trying to get it more real
Now, back to the “simulation” part. Third Body is pretty close to what you would actually do — like an actual engineer — to approximate a solution to a given three-body problem. On each frame forces of attraction between orbs are calculated and applied to them. This shapes paths they fly along.
So initially I tried to actually calculate real Newtonian gravity forces between three “planets”. But they would collide and do weird stuff like flying away together. Part of it was how cannon.js works. Other part was, well, how gravity works. It’s really strong when objects are close to one another, and getting much weaker the farther they get. Here’s what I was getting while trying to get more realistic:
Here you can play with Newtonian version sandbox and maybe even fix it to make it cool.
Eventually, to make Third Body more artsy, and not to become an expert in cannon.js source code just now, I’ve normalized all forces to 1. Basically, it has nothing to do with real gravity strength except for having the right direction of attraction.
They also bounce, but with each bounce they lose some energy, so eventually they come to rest at their common center of mass.
Making Third Body Problems was super fun, and I really like watching it work. Hope you will find it as mesmerizing as I do.