How to Build Three.js 3D Web Scenes with Claude Code

Claude Code writes plausible-looking Three.js that fails to render, because WebGL has strict setup rules the model guesses at. Install a Three.js skill stack first and the agent starts from working scene-graph, shader, and animation patterns. The top pick is `threejs-fundamentals` (6,911 installs, skills.sh registry).

Key takeaways

• threejs-animation is the most-installed piece of the family at 9,088 installs (2,579 GitHub stars, skills.sh registry), covering keyframe, skeletal, and morph-target animation.
• A four-skill stack (fundamentals, shaders, geometry, animation) teaches Claude Code the scene setup, GLSL, mesh construction, and mixer patterns WebGL requires.
• 3d-web-experience (3,358 installs, 43,024 GitHub stars) and react-three-fiber (1,540 installs) extend the stack toward full interactive scenes and React.
• All Three.js skills are open SKILL.md files; see the full set under best skills for frontend design.

Why does Claude Code struggle with Three.js?

Three.js sits on top of WebGL, which fails silently: a wrong camera position, an unattached renderer, or a malformed buffer geometry yields a black canvas with no error. Without a skill, Claude Code invents plausible API calls that compile but render nothing. The threejs-fundamentals skill (6,911 installs, skills.sh registry) loads the correct scene, camera, and renderer wiring so the first frame actually draws.

What is the best Three.js skill for Claude Code?

The best pick is `threejs-fundamentals` (6,911 installs, 2,579 GitHub stars, cloudai-x, skills.sh registry). It establishes the scene graph, then the family layers on top: `threejs-shaders` (5,994 installs) for GLSL and materials, `threejs-geometry` (5,625 installs) for mesh construction, and `threejs-animation` (9,088 installs) for the AnimationMixer. Compare the wider set on the frontend-design pillar.

How do you add interactivity and React?

For pointer events, raycasting, and hover states, threejs-interaction carries 5,424 installs (skills.sh registry). If your app is React, `react-three-fiber` (1,540 installs, 524 GitHub stars) turns Three.js objects into declarative components, and a second react-three-fiber listing brings 15,676 GitHub stars of provenance. For a batteries-included interactive scene, 3d-web-experience (3,358 installs, 43,024 GitHub stars) bundles camera controls, lighting, and loading out of the box.

How does this connect to web animation?

3D motion and 2D web animation share timing primitives, so pair the Three.js stack with the broader web animation skills guide. Skills like threejs-animation handle the GLTF and mixer layer, while GSAP-based skills drive DOM and scroll motion around the canvas.

A complete starter stack

• threejs-fundamentals (6,911 installs) - scene, camera, renderer foundation.
• threejs-geometry (5,625 installs) - meshes, buffer geometry, primitives.
• threejs-shaders (5,994 installs) - GLSL, materials, custom effects.
• threejs-animation (9,088 installs) - keyframe and skeletal animation.
• react-three-fiber (1,540 installs) - only if your app is React.

Common pitfalls

• Skipping threejs-fundamentals and going straight to shaders, so the scene never renders a first frame.
• Asking for a full interactive scene in one prompt instead of layering geometry, then material, then animation.
• Ignoring performance: large geometries and unbounded animation loops tank frame rate, which threejs-geometry and threejs-animation both address.

Install the fundamentals skill first, then add shaders, geometry, and animation as your scene grows.

The official Three.js documentation remains the source of truth for API details these skills encode.

Common questions