threejs-skills
Build 3D graphics and interactive visual experiences using Three.js.
Install
mkdir -p .claude/skills/threejs-skills && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/833" && unzip -o skill.zip -d .claude/skills/threejs-skills && rm skill.zipInstalls to .claude/skills/threejs-skills
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.
Create 3D scenes, interactive experiences, and visual effects using Three.js. Use when user requests 3D graphics, WebGL experiences, 3D visualizations, animations, or interactive 3D elements.Key capabilities
- →Initialize a Three.js scene with camera and renderer
- →Create 3D objects using basic geometries like BoxGeometry or SphereGeometry
- →Apply materials such as MeshBasicMaterial or MeshStandardMaterial
- →Add lighting to a scene with AmbientLight or DirectionalLight
- →Implement animation loops for continuous rendering
- →Handle window resizing for responsive 3D experiences
How it works
The skill sets up core Three.js components including scene, camera, and renderer, then defines objects, materials, and lighting, concluding with an animation loop and responsiveness handling.
Inputs & outputs
When to use threejs-skills
- →Create a 3D rotating object
- →Initialize a WebGL scene
- →Add 3D model interaction to a webpage
- →Create particle system visual effects
About this skill
Three.js Skills
Systematically create high-quality 3D scenes and interactive experiences using Three.js best practices.
Detailed Guide
Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
- Requests 3D visualizations or graphics ("create a 3D model", "show in 3D")
- Wants interactive 3D experiences ("rotating cube", "explorable scene")
- Needs WebGL or canvas-based rendering
- Asks for animations, particles, or visual effects
- Mentions Three.js, WebGL, or 3D rendering
- Wants to visualize data in 3D space
Example Workflow
User: "Create an interactive 3D sphere that responds to mouse movement"
- Setup: Import Three.js, create scene/camera/renderer
- Geometry: Create
SphereGeometry(1, 32, 32)for smooth sphere - Material: Use
MeshStandardMaterialfor realistic look - Lighting: Add ambient + directional lights
- Interaction: Track mouse position, update camera
- Animation: Rotate sphere, render continuously
- Responsive: Add window resize handler
- Result: Smooth, interactive 3D sphere ✓
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
How it compares
This skill provides a systematic development process for Three.js, guiding through scene definition, geometry, materials, and lighting, which differs from ad-hoc 3D web graphics.
Compared to similar skills
threejs-skills side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| threejs-skills (this skill) | 61 | 5mo | No flags | Intermediate |
| 3d-graphics | 33 | 8mo | No flags | Advanced |
| threejs-shaders | 4 | 8mo | No flags | Advanced |
| gsap | 3 | 10mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by sickn33
View all by sickn33 →You might also like
3d-graphics
samhvw8
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.
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.