2.7 KiB
Thrive
Sacred geometry, lifted into three dimensions with three.js.
Most sacred-geometry figures are drawn flat. This project asks what they look like when they are built in real 3D space: the Fruit of Life as a rotated cubic sphere packing, the Platonic solids nested inside it with their vertices on the circle centres, the torus as a field of winding strands, and so on. Every page is an interactive scene with orbit controls and a control panel for playing with the parameters.
Pages
| Page | File | What it shows |
|---|---|---|
| Landing | src/index.js |
Overview of all explorations, with an animated seed-of-life backdrop |
| Metatron's Cube | src/metatron.js |
The 3D Fruit of Life circle grid with the five Platonic solids (fire, earth, air, water, aether) aligned to it, plus the Merkaba and the full Metatron web |
| Toroidal Field | src/torus.js |
A torus with field-line strands winding around the surface and particles flowing along them |
| Vector Equilibrium | src/matrix.js |
The cuboctahedron: radial spokes equal to the edges, and the 12-around-1 kissing-sphere packing |
| Golden Spiral | src/phyllotaxis.js |
Phyllotaxis at the golden angle: sunflower disc, pinecone and Fibonacci sphere, with a looping growth animation; nudge the angle to watch the pattern collapse |
| Flower of Life | src/flower.js |
A cubic grid of interlocking spheres |
| Seed of Life | src/seed.js |
The seven seed circles rotated through space |
Design
The landing page palette (deep warm gradient, orange #f44f04, cream #f5e9de)
is used 1:1 in the scenes: the canvases are transparent, so the CSS gradient is
the scenery background. The shadow wall is invisible; each shape projects a
light orange outline onto it. Dark/light theme toggle in the nav, persisted in
localStorage.
Page navigations fly the shapes out past the camera, crossfade documents via the View Transitions API (Chromium; graceful cut elsewhere), and fly the next page's shapes in from the distance.
Development
Built with Vite as a multi-page app.
npm install
npm start # dev server
npm run build # production build into build/
npm run preview # serve the production build
Each exploration is a src/<name>.html + src/<name>.js pair; register new
pages in the pages list in vite.config.js. Shared code lives in src/lib/:
stage.js (scene/camera/lights/wall/controls), theme.js (palette),
transit.js (fly in/out), chrome.js (nav, theme toggle, transitions),
edgeTubes.js (line-thickness helpers).
Debug flags (Metatron page)
?noaa- disable antialiasing?noshadow- disable shadow maps?only=<fire|fire2|air|earth|water|aether>- show a single solid