mcpField
3
3d-graphics

3d-graphics

github.com/samhvw8Creative & media1186 installsUpdated 46w ago
Repository

About 3d-graphics

A skill for Three.js developers, with progressive references spanning basic scenes to advanced rendering. Topics include interaction, visual effects, performance optimization, and WebGPU.

Key features

  1. 01Progressive Three.js references
  2. 02Load models and textures
  3. 03Cameras, lighting, and animation
  4. 04Interaction and post-processing
  5. 05Performance tuning and WebGPU

Use cases

  1. 01Build interactive 3D web experiences
  2. 02Load and display 3D assets
  3. 03Optimize scene rendering performance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/samhvw8/dot-claude --skill 3d-graphics

After installing, type/3d-graphicsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
01-getting-started.md
02-loaders.md
03-textures.md
04-cameras.md
05-lights.md
06-animations.md
07-math.md
08-interaction.md
09-postprocessing.md
10-controls.md
11-materials-advanced.md
12-performance.md
13-node-materials.md
14-physics-vr.md
15-specialized-loaders.md
16-webgpu.md

Details

From the project README

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

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

Comments

Markdown supported