[HN Gopher] Animate a mesh across a sphere's surface
       ___________________________________________________________________
        
       Animate a mesh across a sphere's surface
        
       Author : surprisetalk
       Score  : 128 points
       Date   : 2025-06-06 21:47 UTC (4 days ago)
        
 (HTM) web link (garden.bradwoods.io)
 (TXT) w3m dump (garden.bradwoods.io)
        
       | Animats wrote:
       | 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 wrote:
         | Well there is the whole Vegas Sphere. Haven't heard anything
         | about it lately though...
        
       | Malcolmlisk wrote:
       | Wow, the whole website is amazing. Nice job, and very aesthetic.
        
       | Theodores wrote:
       | 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!!!
        
       | creata wrote:
       | 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.
        
       | voxleone wrote:
       | 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 wrote:
       | Homework challenge: adjust this so that it works for an oblate
       | spheroid, such as when rendering the Earth and small circle
       | paths.
        
       | TuringNYC wrote:
       | This is the most beautiful page and site i've seen in years!
        
         | riebschlager wrote:
         | 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.
        
       | delta_p_delta_x wrote:
       | I remember this was the second assignment in my introductory
       | computer graphics class. Lots of old-school fixed-function
       | glRotated and glTranslated.
        
       | throwaway290 wrote:
       | Is GSAP still widely used today?
        
         | geedix wrote:
         | 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 wrote:
           | Didn't know, cool.
        
       | talkingtab wrote:
       | 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]
        
       ___________________________________________________________________
       (page generated 2025-06-10 23:01 UTC)