Three.js Builder Skill

Overview

This skill builds complete Three.js web applications using a Phased Construction pattern with four phases: Design, Build, Animate, Polish. It is designed for modern Three.js (r150+) ES module patterns and produces scene-graph-driven 3D visualizations.

Scope: Use for 3D web apps, interactive scenes, WebGL visualizations, and product viewers. Do NOT use for game engines, 3D model creation, VR/AR experiences, or CAD workflows.

Instructions

Phase 1: DESIGN

Goal: Understand what the user wants and select appropriate Three.js components.

Core Constraints:

• Build only what the user asked for — no speculative features or "while I'm here" additions
• Use modern Three.js (r150+) ES modules only — always import from CDN (https://unpkg.com/three@0.160.0/build/three.module.js) or npm, never use legacy global THREE variable or CommonJS