Three.js Interactive Builder

Build production-ready Three.js visualizations with algorithmic art principles.

Core Architecture

Every project follows modular synthesis philosophy: components as oscillators, connections as patches.

project/ ├── index.html # Entry point with canvas ├── src/ │ ├── main.js # Scene orchestrator │ ├── geometry/ # Shape generators │ ├── animation/ # Temporal controllers │ ├── shaders/ # GLSL programs │ └── utils/ # Math helpers └── assets/ # Textures, fonts

Quick Start

• Copy boilerplate from assets/threejs-boilerplate/

• Initialize scene with preferred renderer settings

• Add geometry generators from scripts/

• Wire animation loops

Geometry Patterns

Sacred Geometry Primitives

Use scripts/sacred_geometry.py to generate vertex data for:

• Flower of Life: Overlapping circles, customizable depth

• Metatron's Cube: 13-circle formation with connecting lines

• Sri Yantra: 9 interlocking triangles

• Seed of Life: 7-circle genesis pattern

• Vesica Piscis: Intersection geometry

Spiral Systems

For gravitational/golden spirals:

function goldenSpiral(loops, pointsPerLoop, scale) { const phi = (1 + Math.sqrt(5)) / 2; const points = []; for (let i = 0; i < loops * pointsPerLoop; i++) { const theta = i * 0.1; const r = scale * Math.pow(phi, theta / (2 * Math.PI)); points.push(new THREE.Vector3(r * Math.cos(theta), r * Math.sin(theta), 0)); } return points; }

Lane Systems

For multi-lane visualizations (soul lanes, data streams):

function createLaneSystem(laneCount, radius, spacing) { const lanes = []; for (let i = 0; i < laneCount; i++) { lanes.push({ radius: radius + (i * spacing), objects: [], speed: 1 / (i + 1) }); } return lanes; }

Animation Patterns

Temporal Perspective

For simultaneous time visualization (all moments visible at once):

class TemporalController { constructor(timeline) { this.moments = timeline; this.currentView = 'linear'; } setSimultaneous() { this.moments.forEach((m, i) => { m.mesh.visible = true; m.mesh.material.opacity = 0.3 + (0.7 * (i / this.moments.length)); }); } }

Breath-Based Animation

Organic pulsing using sine waves:

function breathe(object, speed = 1, amplitude = 0.1) { const scale = 1 + Math.sin(Date.now() * 0.001 * speed) * amplitude; object.scale.setScalar(scale); }

Shader Patterns

See references/glsl-patterns.md for glow effects, noise functions, color gradients, and symbol rendering.

Project Types

Algorithmic Art: Define rules → Generate geometry → Add temporal dimension → Apply aesthetic layer

Interactive Visualization: OrbitControls → Raycasting → UI overlay → State management

Narrative Experience: Story beats as states → Transitions → Audio cues → Navigation

Performance

• BufferGeometry for >1000 vertices

• InstancedMesh for repeated objects

• LOD for complex scenes

• Merge geometries to reduce draw calls

References

• references/glsl-patterns.md

• Shader code library

• references/sacred-geometry-math.md

• Mathematical foundations