Guide · Agent skill
How to use the Three.js 3D Scenes agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The threejs skill is a set of instructions that gives an AI agent working knowledge of Three.js, the JavaScript library for drawing real 3D graphics in a web page. Once it is installed, you can ask the agent to build or debug an interactive 3D scene, and it will work from the skill's patterns for the scene, camera, renderer, lights, materials, model loading, controls and performance. This guide explains what the skill does, how to install it, how to phrase requests that trigger it, and what to check before you ship.
Three.js 3D ScenesMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the threejs skill ZIP from this page.
- 2Unzip the skill folder. Unzip the file so the skill folder is ready to copy.
- 3Place it in the right location. Put it in ~/.claude/skills/ for personal use, or in .claude/skills/ inside your project. Alternatively, upload it under Settings → Capabilities → Skills in the Claude apps.
- 4Describe your 3D goal. Ask in plain language, for example to build a product viewer or fix a stretched canvas, and mention Three.js.
- 5Review and test the output. Run the code in your browser and check resizing, load times and performance on a phone before you ship.
What the skill makes the agent do
The skill describes the core Three.js setup: a Scene as the root of the graph, a Camera (perspective or orthographic), a WebGLRenderer, and Meshes made from a Geometry plus a Material. It also explains the render loop, where you call requestAnimationFrame, update animations and controls, then call renderer.render(scene, camera).
It covers loading assets with GLTFLoader for models, TextureLoader for images and DRACOLoader for compressed glTF. For controls it names OrbitControls for debugging or product viewing and PointerLockControls for first-person movement. It also covers cleanup for single-page apps, such as disposing geometries, materials, textures and the renderer, and removing listeners and cancelling the animation frame.
The skill is a reference of common patterns and pitfalls. It does not run anything itself; the agent writes code for your page based on it.
How to install the threejs skill
Download the ZIP for this skill from this page and unzip it. Then place the skill folder in one of two locations: ~/.claude/skills/ to make it available to you across projects, or .claude/skills/ inside a specific project to make it available only there.
If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into .claude/skills/ in your project folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
How to trigger the skill with natural requests
You do not need a special command. The skill is meant to be used when you are building or debugging interactive 3D scenes on the web. Describe your goal in plain language and mention Three.js or the 3D part of the page. The skill's own description lists the topics it covers: scene, camera and renderer setup, lights and materials, GLTF loading, controls and performance.
The skill's demo prompts refer to it as $threejs, so you can name it directly in a request if your setup supports that.
- Build a product viewer that loads my glTF model and lets visitors orbit it
- Add a rotating wireframe cube hero to my landing page using Three.js
- My Three.js canvas looks stretched when I resize the window. Find the cause
- My Three.js page slows down and crashes after route changes. Check for leaked WebGL resources
- Make my 3D hero respect prefers-reduced-motion
Example: a minimal spinning cube
The skill includes a small starting example: a lit, spinning cube drawn on a canvas. It creates the renderer, camera, a box mesh with a standard material, ambient and directional lights, and a resize handler that keeps the aspect ratio correct. Use it as a starting point and ask the agent to adapt it to your page.
The resize function below comes from the skill. It sets the renderer size, caps the pixel ratio at 2 and updates the camera aspect ratio, which addresses the stretched-rendering pitfall.
function resize() {
const w = canvas.clientWidth;
const h = canvas.clientHeight;
renderer.setSize(w, h, false);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
camera.aspect = w / h;
camera.updateProjectionMatrix();
}
window.addEventListener("resize", resize);
resize();Common pitfalls the skill warns about
The skill lists the mistakes that most often break 3D pages, and it expects the agent to check for them when debugging.
- Not handling resize, which leads to stretched or cropped rendering
- A devicePixelRatio that is too high, which can overload mobile GPUs
- Leaking WebGL resources by not disposing them, which can crash the page after route changes
- Huge textures or models, which slow the start; the skill suggests compressed textures, Draco or KTX2, and smaller maps
- Too many lights or shadows, which are expensive; baked textures can fake lighting when possible
Safety notes: scripts and network
According to the listing, this skill does not run scripts and does not use the network. It is guidance that the agent applies to code it writes for your page.
The code the agent produces still runs in your browser and your project, so review it as you would any code. If you load 3D models, textures or the Three.js library itself, the page will fetch those files, which is a property of your site rather than of the skill.
Tips for getting good results
Tell the agent whether the 3D is decorative or functional, because the skill asks this and the answer changes the approach. Say which devices you need to support, including older phones. Also state the asset formats you have (glTF, HDRI, textures) and any file size limits.
Prepare your 3D assets and plan performance testing on mobile devices before you commit to a design. The skill is more useful when you give it real models and real targets.
- Say whether the scene is a hero effect or a product viewer
- Name your target devices and budget
- List your asset formats and file sizes
- State any accessibility or reduced-motion requirement
What people use it for
- Adding an interactive 3D product viewer with orbit controls to an e-commerce page
- Building a 3D hero scene for a landing page that a designer can tune
- Loading a glTF model with Draco compression and reducing its load time
- Debugging a Three.js page that leaks memory or crashes after navigation between views
Frequently asked questions
How do I install the threejs agent skill?
Download the ZIP from this page and unzip it. Put the skill folder in ~/.claude/skills/ for personal use or in .claude/skills/ inside a project. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
What does the threejs skill require?
You need a web page with JavaScript and an HTML canvas element, plus the three JavaScript library installed through npm or loaded from a CDN. Glტ, Draco model files and textures are optional, depending on your scene.
Is the threejs skill free?
The listing states the licence is MIT. Check the licence file in the download for the full terms before you use or redistribute it.
Does the threejs skill run code or access the internet?
The listing says it does not run scripts and does not use the network. It provides guidance that the agent uses when writing code for your page.
What is the difference between this skill and a simple CSS animation?
The skill is for full 3D with a scene, camera, lights and models. The listing says simple background animations or decorative effects are better handled by CSS or a lightweight library.
Why does my Three.js canvas look stretched?
The most common cause in the skill's pitfalls list is not handling resize. Update the renderer size and the camera aspect ratio when the window or canvas changes, as shown in the resize example.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer who needs a real interactive 3D scene or product viewer on the web, or if you are debugging an existing Three.js page. Pick something else if you only need a simple background animation, since the skill itself notes that CSS or a lightweight library can handle those, or if you have no plan for 3D assets and mobile performance testing.
Download the skill