3d-graphics
A 3D web graphics toolkit for Three.js. It handles scenes, animations, shaders, and 3D model loading.
Install
mkdir -p .claude/skills/3d-graphics && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/464" && unzip -o skill.zip -d .claude/skills/3d-graphics && rm skill.zipInstalls to .claude/skills/3d-graphics
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Manage 3D web scenes with Three.js
- →Load 3D models in GLTF or FBX formats
- →Configure PBR materials and lighting
- →Implement post-processing effects like bloom
- →Optimize performance with instancing and LOD
How it works
It provides a structured path for setting up Three.js scenes, managing assets, and implementing rendering loops for interactive graphics.
Inputs & outputs
When to use 3d-graphics
- →Import GLTF or FBX 3D models
- →Configure PBR materials and lighting
- →Create custom shader effects
- →Implement post-processing like bloom or SSAO
About 3d-graphics
This skill provides a set of tools for managing 3D web scenes using Three.js and WebGL/WebGPU. It includes capabilities for loading models, setting up lights and materials, and executing custom shaders and animations.
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.
When not to use it
- →When building simple 2D web interfaces
- →When performance constraints prohibit WebGL
Prerequisites
Limitations
- →Performance depends on browser WebGL capabilities
- →Complex scenes require optimization techniques
How it compares
It offers a systematic approach to 3D web development compared to manual, unorganized Three.js implementation.
Compared to similar skills
3d-graphics side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| 3d-graphics (this skill) | 33 | 8mo | No flags | Advanced |
| threejs-skills | 61 | 5mo | No flags | Intermediate |
| threejs-shaders | 4 | 8mo | No flags | Advanced |
| gsap | 3 | 10mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
threejs-skills
sickn33
Three.js skills for creating 3D elements and interactive experiences
threejs-shaders
CloudAI-X
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
gsap
martinholovsky
GSAP animations for JARVIS HUD transitions and effects
threejs-animation
CloudAI-X
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
threejs-lighting
CloudAI-X
Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.
threejs-interaction
CloudAI-X
Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.