three-js-interactive-builder

Included with Lifetime

$97 forever

Scaffold and build interactive 3D visualizations using Three.js with emphasis on algorithmic art, sacred geometry, temporal animations, and modular architecture. Use when creating WebGL visualizations, generative art pieces, interactive 3D experiences, particle systems, flow fields, or projects like gravitational spirals, temporal perspective pieces, or illuminated visual narratives. Triggers on requests for Three.js projects, 3D web graphics, algorithmic visualizations, or sacred geometry renders.

Generalscriptsassets

What this skill does


# 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

1. Copy boilerplate from `assets/threejs-boilerplate/`
2. Initialize scene with preferred renderer settings
3. Add geometry generators from `scripts/`
4. 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:

```javascript
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):

```javascript
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):

```javascript
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:

```javascript
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

Files: 6

Size: 26.4 KB

Complexity: 76/100

Category: General

Source: https://github.com/4444j99/a-i--skills/tree/main/distributions/claude/skills/three-js-interactive-builder

Related in General

modeling-omnistudio-epc-catalog

Included

Salesforce Industries CME EPC product-modeling skill for Product2-based catalog creation. Use when creating EPC products, configuring product attributes, building offer bundles with Product Child Items, or reviewing EPC DataPack JSON metadata for product catalog changes. TRIGGER when: user creates or updates Product2 EPC records, AttributeAssignment payloads, AttributeMetadata/AttributeDefaultValues, Offer bundles, or ProductChildItem relationships. DO NOT TRIGGER when: designing OmniScripts/FlexCards/Integration Procedures (use building-omnistudio-omniscript, building-omnistudio-flexcard, or building-omnistudio-integration-procedure), implementing Apex business logic (use generating-apex), or troubleshooting deployment pipelines (use deploying-metadata).

Generalscripts

relationship-science-coach

Included

Use this skill for direct, practical adult relationship coaching: couples conflict, repair, trust, marriage, dating, flirting, attachment patterns, emotional connection, sex, desire differences, eroticism, kink negotiation, affection, love languages, breakups, and long-term passion. Draw on Gottman, EFT and Hold Me Tight, attachment science, modern sex research, Perel, Nagoski, Kerner, Schnarch, Love and Stosny, and flexible love-language tools. Be concrete and low-hedge. Redirect only for imminent danger, abuse, coercive control, minors, non-consent, self-harm, stalking, or medical/legal/psychiatric decisions.

Generalscripts

building-sf-integrations

Included

Salesforce integration architecture and runtime plumbing with 120-point scoring. Use this skill to set up Named Credentials, External Credentials, External Services, REST/SOAP callout patterns, Platform Events, and Change Data Capture. TRIGGER when: user sets up Named Credentials, External Services, REST/SOAP callouts, Platform Events, CDC, or touches .namedCredential-meta.xml files. DO NOT TRIGGER when: Connected App/OAuth config (use configuring-connected-apps), Apex-only logic (use generating-apex), or data import/export (use handling-sf-data).

Generalscripts

venue-templates

Included

Access comprehensive LaTeX templates, formatting requirements, and submission guidelines for major scientific publication venues (Nature, Science, PLOS, IEEE, ACM), academic conferences (NeurIPS, ICML, CVPR, CHI), research posters, and grant proposals (NSF, NIH, DOE, DARPA). This skill should be used when preparing manuscripts for journal submission, conference papers, research posters, or grant proposals and need venue-specific formatting requirements and templates.

Generalscripts

let-fate-decide

Included

Draws the 12 Houses of the Zodiac Tarot spread to inject entropy into planning when prompts are vague, ambiguous, or casually delegated. Interprets the spread to guide next steps. Use when the user says 'let fate decide', 'YOLO', 'whatever', 'idk', or other nonchalant phrases, makes Yu-Gi-Oh references, or when you are about to arbitrarily pick between multiple reasonable approaches. Prefer over ask-questions-if-underspecified when the user's tone is casual or playful rather than precision-seeking.

Generalscripts

net-ops

Included

Cross-platform network troubleshooting (Windows, macOS, Linux) via local or remote shell. Use for: DNS broken, can't resolve hostnames, nslookup/dig works but apps fail, NRPT, WFP, scutil, /etc/resolver, systemd-resolved, /etc/resolv.conf, NetworkManager, VPN DNS leak residue (ProtonVPN/Mullvad/WireGuard/AnyConnect), AV/firewall blocking DNS or DoH, Tailscale DNS interaction, intermittent connectivity, remote diagnostics over SSH.

Generalscripts