The Hopf Fibration from Topology

The Hopf Fibration was one of my favorite examples from undergrad studies, and when I came across a neat introduction with very specific computations, I wanted to visualize it myself.

This marks my first JavaScript program and hence my first journey into Three.js (or even 3D graphics, for that matter). You can try it out here, and the source code is on github as well.

One very interesting feature that deserves mention:
What basically happens is that points on the ordinary sphere in 3D correspond to circles on the hypersphere in 4D. When you project these back into 3D, these circles fill the entire space. That’s not interesting on it’s own, but what’s cool is that any two of all these infinitely many circles will be linked. You can see that when you fiddle around with the „base space parametrization“ or add even more objects (that’s what the „detach“ button does). Of course you can only really see finitely many circles at a given point, but it hopefully convey the idea.

There’s a whole lot more to unpack here, e.g. the connection to theoretical physics, but I think this showcase should be focused on where three.js comes into play :slight_smile: also, I appreciate the existence of the fat lines-module, which makes it a lot more appealing.




Link to demo is missing, only github link to source code.

It’s hosted on github pages- the bottom most link in my post. My post could’ve been clearer though, I’ve highlighted the link Now under „try it here“. It unfortunately doesn’t work on mobile though which I’m still trying to iron out.

1 Like

Those are some good fibrations :sunglasses:


There also are the Hopf tori. An Hopf torus corresponds to a spherical curve. See my app: Hopf torus “live”.

1 Like