3 ms·
Animate a mesh across a sphere's surface
- Animats 1y agoUse 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 https://www.youtube.com/shorts/CpaXi9ije2k
- hoseja 1y agoWell there is the whole Vegas Sphere. Haven't heard anything about it lately though...
- Malcolmlisk 1y agoWow, the whole website is amazing. Nice job, and very aesthetic.
- Theodores 1y agoAwesome 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 1y agoI 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 1y agoNeat 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 https://github.com/VoxLeone/SpinStep/blob/main/README.md
- Waterluvian 1y agoHomework challenge: adjust this so that it works for an oblate spheroid, such as when rendering the Earth and small circle paths.
- TuringNYC 1y agoThis is the most beautiful page and site i've seen in years!
- riebschlager 1y agoI 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 1y agoI remember this was the second assignment in my introductory computer graphics class. Lots of old-school fixed-function glRotated and glTranslated.
- throwaway290 1y agoIs GSAP still widely used today?
- geedix 1y agoYes 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 1y agoDidn't know, cool.
- talkingtab 1y agoYou 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]
- bhouston 1y agoThis 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/8456f72e76764a045f07930f4f85a39abadbdff0/src/Imath/ImathQuat.h#L644 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.