Agent skill · design visual · samhvw8
3d-graphics
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.
Why this skill is useful
Provides domain-specific knowledge on 3D graphics programming with Three.js, including advanced rendering techniques and asset loading patterns.
What it needs
Requires three installed locally. About 2k tokens when loaded. Last updated 2025-12-09. 10 stars on the source repository.
What this skill does
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 External Resources Official Docs: https …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills samhvw8/3d-graphics