Three.js 3D Scenes
Lets the agent build and debug interactive 3D scenes for the web using Three.js
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 4 files
What it does
Once installed, the agent knows the Three.js library for drawing real 3D graphics in a web page. It can set up a scene, camera, renderer, lights and materials, load 3D models (glTF), add orbit or first-person controls, keep the animation smooth on phones, and clean up memory when a page changes. It also suggests a still image for users who prefer reduced motion. The guidance is a reference of common patterns and pitfalls rather than a tool that runs anything itself.
Great for
- Front-end developers adding an interactive 3D product viewer or hero scene to a website
- Designers who want a 3D UI moment and need working code for it
- Developers debugging stretched canvases, slow loads, or memory leaks in an existing Three.js page
Skip it if
- Simple background animations or decorative effects that CSS or a lightweight library can handle; the skill itself says Three.js is for full control and needs time for asset and performance work
- Teams without a plan for 3D assets (models, textures) and performance testing on mobile devices
Try asking
- “Build a spinning 3D product viewer for my shoe landing page using a glTF model”
- “My Three.js canvas is stretched after resizing the window, help me fix it”
- “Add OrbitControls and reduced-motion support to this existing scene”
- “Review my Three.js code for memory leaks when users navigate between routes”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 4 original files, the MIT licence and an attribution note.
threejs.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip threejs.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip threejs.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Tell the agent whether the 3D element is decorative or functional, and which devices you must support, so it picks the right performance settings
- Provide your model format and file size limits so it can recommend compression such as Draco or KTX2
- Ask for the reduced-motion fallback explicitly if accessibility matters for your project
What's inside
- demo/index.html
- demo/PROMPT.md
- REFERENCES.md
- SKILL.md
Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.