home / skills / samhvw8 / dotfiles / 3d-graphics

3d-graphics skill

safe

This skill helps you build high fidelity 3d web graphics with three.js, delivering interactive scenes, animations, and efficient rendering across devices.

npx playbooks add skill samhvw8/dotfiles --skill 3d-graphics

Review the files below or copy the command above to add this skill to your agents.

Files (17)

SKILL.md

4.0 KB

---
name: 3d-graphics
description: "3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators."
license: MIT
version: 1.0.0
---

# 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/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

### 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

## Quick Start Pattern

```javascript
// 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();
```

## External Resources

- Official Docs: https://threejs.org/docs/
- Examples: https://threejs.org/examples/
- Editor: https://threejs.org/editor/
- Discord: https://discord.gg/56GBJwAnUS

Overview

This skill provides practical expertise for building high-performance 3D web applications using Three.js (WebGL/WebGPU). It covers scene composition, cameras, materials, lighting, animations, model loading, post-processing, custom shaders, performance patterns, and VR/XR integration. The focus is on actionable techniques to create interactive visuals, product configurators, and immersive experiences that run smoothly in browsers.

How this skill works

The skill inspects and designs 3D scenes by assembling cameras, geometries, materials, lights, and renderers, then applying animation loops and asset loaders (GLTF/FBX/OBJ). It configures PBR materials, shadow mapping, post-processing passes (bloom, SSAO, SSR), and custom GLSL shaders, and applies optimization patterns like instancing, LOD, and frustum culling. It also integrates physics engines and WebXR hooks when interactive simulation or VR/AR support is required.

When to use it

Building interactive 3D product configurators, visualizers, or demos for the web.
Creating data visualizations that require spatial layouts, camera controls, or animation.
Loading and displaying GLTF/FBX assets with materials, textures, and animations.
Adding post-processing effects, custom shaders, or PBR materials to improve realism.
Optimizing scenes with instancing, LOD, or GPU-driven rendering for performance.
Implementing VR/XR experiences or physics-driven interactions in the browser.

Best practices

Start with a minimal scene and progressively add complexity to isolate performance costs.
Use GLTF for complex assets, keep textures power-of-two, and compress with KTX2/Basis when possible.
Prefer instancing and LOD for repeated geometry; enable frustum culling and reduce draw calls.
Use MeshStandardMaterial or MeshPhysicalMaterial for PBR workflows and tune maps (albedo, metalness, roughness, ao).
Apply post-processing selectively; use lower-resolution passes or dithering for heavy effects like SSAO/bloom.
Test on target devices early and profile GPU/CPU hotspots with browser devtools and RAF timing.

Example use cases

An interactive product configurator with real-time PBR rendering and material switching.
An architectural walkthrough with baked and dynamic lighting, LOD, and navigation controls.
A data-driven 3D dashboard visualizing geospatial or time-series data with camera interaction.
A web-based VR gallery that loads GLTF models, supports controllers, and applies physics for interactions.
A game prototype using instancing for many objects and custom shaders for stylized rendering.

FAQ

Which asset format should I prefer for web delivery?

Prefer GLTF/GLB for compact scene graphs and PBR material support; compress textures with KTX2/Basis and use Draco for geometry when needed.

How can I improve frame rate on mobile?

Reduce texture resolution, use instancing/LOD, lower post-processing quality, disable expensive lights, and limit draw calls.