Animate a mesh across a sphere's surface

[surprisetalk]

https://garden.bradwoods.io/notes/javascript/three-js/animate-a-mesh-on-a-spheres-surface

[Animats]

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

[hoseja → Animats]

Well there is the whole Vegas Sphere. Haven't heard anything about it lately though...

[TuringNYC]

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

[riebschlager → TuringNYC]

I came here to say the same thing! I didn't realize how much I missed this level of detail and effort in web design.

[bhouston]

This is a little complex.

It really is just a simple interpolation between two quaternions on the sphere surface in sphere relative space. You can use the squad interpolation function with two quaternions and just reconstruct back into sphere space. It is like 15 lines of code in one function.

In more detail:

Given you want the same side of the mesh touching at the start and end, we can just convert the matrices to be relative to the sphere center using the sphere coordinate space, and then extract their relative quaternions and translations. The orientation towards the center should be the same for both relative to the quaternion orientation. Thus we really just need to interpolate the quaternion using squad interpolation (https://github.com/AcademySoftwareFoundation/Imath/blob/8456...) while reconstructing the sphere-coordinate matrix at each step and using the quaternion-relative orientation.

This is a lot simpler and faster than the proposed multi-step algorithm.

Source: I made it up.

[voxleone]

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

[Waterluvian]

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

[Malcolmlisk]

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

[Theodores]

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!!!

[talkingtab]

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]

[creata]

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);

Sorry if this was discussed in the article already.

[delta_p_delta_x]

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

[throwaway290]

Is GSAP still widely used today?

[geedix → throwaway290]

Yes it is! It was acquired by Webflow a few months ago. They made all its extra features free. I specialize in GSAP. It's common to see it used with three.js or SVG on high-profile sites.

[throwaway290 → geedix]

Didn't know, cool.