58 lines
2.7 KiB
Markdown
58 lines
2.7 KiB
Markdown
# Thrive
|
|
|
|
Sacred geometry, lifted into three dimensions with [three.js](https://threejs.org/).
|
|
|
|
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](https://vite.dev/) as a multi-page app.
|
|
|
|
```sh
|
|
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
|