PRO

Photo Sphere Orb

A hundred photographs distributed over the surface of a sphere, each turned to face the middle. Positions come from a Fibonacci spiral rather than a lat/long grid, so the tiles space evenly instead of bunching at the poles. Each plane is built at the real aspect ratio of the texture it received, so nothing is stretched, and the ball is dragged with damped orbit controls that allow rotation and zoom but no panning.

Component

[ Archive beyond reality ]

Install
npx shadcn@latest add https://ui.aryank.space/r/photo-sphere-orb.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
images / totalItemsstring[] / number30 stills / 100 tilesEach of the totalItems planes draws a random image from the pool, so tiles repeat across the sphere.
sphereRadius / backgroundColornumber / string5 / #000000Ball radius in scene units and the clear color.
Customize
imagestext

Pool the sphere's tiles are drawn from at random.

totalItems / sphereRadiustext

How many tiles and how large the ball is.

Dependencies
three