mcpField
3
3d-graphics

3d-graphics

github.com/samhvw8Creative & media15136 installsUpdated today
Repository

About 3d-graphics

A learning skill for building 3D web applications with Three.js. It guides developers through rendering, interaction, effects, advanced graphics, and specialized topics using a progressive reference path.

Key features

  1. 01Progressive Three.js learning path
  2. 023D asset and texture loading
  3. 03Cameras, lighting, and animation
  4. 04Interaction and post-processing
  5. 05Performance optimization and WebGPU

Use cases

  1. 01Building interactive 3D web experiences
  2. 02Loading and animating 3D models
  3. 03Adding rendering effects and shaders
  4. 04Improving scene rendering performance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/samhvw8/dotfiles --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