threejs

Name: threejs
Author: mrgoonie

High-performance 3D web applications with Three.js WebGL/WebGPU rendering. Covers scene setup, geometries, materials (PBR, standard, custom shaders), lights, cameras, and animation systems Supports asset loading (GLTF, FBX, OBJ), textures, post-processing effects (bloom, SSAO, SSR), and raycasting for interaction Includes performance optimization techniques: instancing, LOD, batching, frustum culling, and WebGPU backend support Enables specialized workflows: physics simulations, VR/XR experiences, shader graphs (TSL), and spatial audio integration

INSTALLATION

npx skills add https://github.com/mrgoonie/claudekit-skills --skill threejs

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Three.js Development

Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.

When to Use This Skill

Use when working with:

3D scenes, models, animations, or visualizations

WebGL/WebGPU rendering and graphics programming

Interactive 3D experiences (games, configurators, data viz)

Camera controls, lighting, materials, or shaders

Loading 3D assets (GLTF, FBX, OBJ) or textures

Post-processing effects (bloom, depth of field, SSAO)

Physics simulations, VR/XR experiences, or spatial audio

Performance optimization (instancing, LOD, frustum culling)

Progressive Learning Path

Level 1: Getting Started

Load references/00-fundamentals.md - Fundamentals

Load references/01-getting-started.md - Scene setup, basic geometries, materials, lights, rendering loop

Level 2: Common Tasks

Asset Loading: references/02-loaders.md - GLTF, FBX, OBJ, texture loaders

Textures: references/03-textures.md - Types, mapping, wrapping, filtering

Cameras: references/04-cameras.md - Perspective, orthographic, controls

Lights: references/05-lights.md - Types, shadows, helpers

Animations: references/06-animations.md - Clips, mixer, keyframes

Math: references/07-math.md - Vectors, matrices, quaternions, curves

Geometry: references/18-geometry.md - Built-in shapes, BufferGeometry, custom geometry, instancing

Materials: references/11-materials.md - PBR, basic, phong, lambert, physical, toon, normal, depth, raw, shader materials, material properties

Level 3: Interactive & Effects

Interaction: references/08-interaction.md - Raycasting, picking, transforms

Post-Processing: references/09-postprocessing.md - Passes, bloom, SSAO, SSR

Controls (Addons): references/10-controls.md - Orbit, transform, first-person

Level 4: Advanced Rendering

Materials Advanced: references/11-materials-advanced.md - PBR, custom shaders

Performance: references/12-performance.md - Instancing, LOD, batching, culling

Node Materials (TSL): references/13-node-materials.md - Shader graphs, compute

Level 5: Specialized

Physics: references/14-physics-vr.md - Ammo, Rapier, Jolt, VR/XR

Advanced Loaders: references/15-specialized-loaders.md - SVG, VRML, domain-specific

WebGPU: references/16-webgpu.md - Modern backend, compute shaders

Shaders: references/17-shader.md - GLSL, ShaderMaterial, uniforms, custom effects

Quick Start Pattern

// 1. Scene, Camera, Renderer

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// 2. Add Objects

const geometry = new THREE.BoxGeometry();

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

// 3. Add Lights

const light = new THREE.DirectionalLight(0xffffff, 1);

light.position.set(5, 5, 5);

scene.add(light);

scene.add(new THREE.AmbientLight(0x404040));

// 4. Animation Loop

function animate() {

  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;

  cube.rotation.y += 0.01;

  renderer.render(scene, camera);

}

animate();