Animate a mesh across a sphere's surface

Use this to drive a spherical display.[1] Yes, there really are spherical displays. Mostly for marketing. Not sure what transform they use.

[1] https://www.youtube.com/shorts/CpaXi9ije2k

Neat approach! For this kind of mesh animation on a sphere’s surface, another path worth exploring is quaternion-based orientation traversal. I’ve been experimenting with this in SpinStep[0] — a Python library that uses quaternions to step through spatial structures based on orientation rather than position.

It’s particularly helpful when you want smooth, rotation-aware transitions (like gliding across a sphere’s surface) without relying solely on angles or coordinate systems. Could be interesting to try a similar traversal heuristic in a Three.js context using Quaternion.slerp().

[0]https://github.com/VoxLeone/SpinStep/blob/main/README.md

This is the most beautiful page and site i've seen in years!

Wow, the whole website is amazing. Nice job, and very aesthetic.

You can rotate the sphere and zoom in and out as well. Works for me on an iPhone.

Now why is it again we are not using threejs pervasively?

[edit to remove two "wells" in one sentence]

Homework challenge: adjust this so that it works for an oblate spheroid, such as when rendering the Earth and small circle paths.

I think calcPathPoints can be made more efficient by calculating the slerp only once (for t = 1/segments), and then maintaining stepQuat like:

    // before the loop
    let stepQuat = new THREE.Quaternion();
    // at end of loop body
    stepQuat.multiply(slerp);

I remember this was the second assignment in my introductory computer graphics class. Lots of old-school fixed-function glRotated and glTranslated.

Awesome website with so much clearly explained. I never quite understood how to do perspective in CSS and now I can see what was holding me back.

This is a website I will be stealing ideas from!!!

Is GSAP still widely used today?