pi-skill-threejs-builder

A pi skill package for creating Three.js web applications.

What it does

When you ask pi to create a Three.js scene, app, 3D showcase, or any browser-based 3D graphics project, this skill provides comprehensive guidance covering:

• Scene setup — minimal HTML template, ES modules, responsive rendering
• Geometries — primitives (Box, Sphere, Torus, Icosahedron, etc.)
• Materials — Basic, Standard, Physical, Phong with PBR properties
• Lighting — Ambient, Directional, Point, Spot with shadow setup
• Animation — rotation, wave motion, mouse interaction, setAnimationLoop
• Camera controls — OrbitControls, fixed game cameras
• Coordinate system — right-handed axes, GLTF orientation, camera-relative movement

Reference guides (loaded on demand)

| Topic | Description | |-------|-------------| | GLTF Loading | Loading, caching, cloning 3D models, SkeletonUtils, model normalization | | Reference Frames | Calibration, anchoring, axis correctness, forward direction debugging | | Game Patterns | State machines, animation switching, parallax, object pooling, screen effects | | Advanced Topics | Post-processing (bloom), custom shaders, physics (Cannon.js), instancing, raycasting |

Calibration helper

Includes a reusable ES module (gltf-calibration-helpers.mjs) that visualizes axes, bounding boxes, and forward direction arrows on GLTF models for quick reference-frame debugging.

Install

# From git (global)
pi install https://github.com/picassio/pi-skill-threejs-builder

# Project-local install (shared with team via .pi/settings.json)
pi install -l https://github.com/picassio/pi-skill-threejs-builder

# From a local clone
pi install /path/to/pi-skill-threejs-builder

Usage

Once installed, the skill is auto-discovered. Just ask pi to build something with Three.js:

> Create a Three.js scene with a rotating torus knot and bloom post-processing

Or invoke it explicitly:

/skill:threejs-builder Create a particle field with mouse interaction

Structure

pi-skill-threejs-builder/
├── package.json                          # pi package manifest
├── README.md
├── LICENSE
└── skills/
    └── threejs-builder/
        ├── SKILL.md                      # Main skill instructions
        ├── references/
        │   ├── gltf-loading-guide.md     # GLTF loading patterns
        │   ├── reference-frame-contract.md # Calibration & anchoring
        │   ├── game-patterns.md          # Game dev patterns
        │   └── advanced-topics.md        # Shaders, physics, post-processing
        └── scripts/
            ├── README.md                 # Script usage docs
            ├── install-gltf-calibration-helpers.py
            └── gltf-calibration-helpers.mjs

Credits

Skill content adapted from chongdashu/threejs-toonshooter Claude Code skill, converted to the Agent Skills standard for pi.

License

MIT