threejs-fundamentals (CloudAI-X): a Claude skill for current three.js scene setup

A skill that gives Claude current three.js r186 knowledge for scenes, cameras, renderers, transforms and cleanup.

Installs: 19.3K; on skills.sh
Stars: 3.9K; on GitHub
Updated: Oct 2026; last repo commit

threejs-fundamentals is a reference skill. Claude uses it when you create a scene from scratch, configure a camera or renderer, handle resize, or arrange objects. It targets three.js r186 and covers scenes and fog, four camera types, the WebGL renderer and tone mapping, object hierarchies, vector, matrix and color math, a loading manager, cleanup and performance tips. A WebGPU and TSL section uses WebGPURenderer.

Its Common Mistakes list has 15 old-to-new fixes, such as Clock to Timer, outputEncoding to outputColorSpace and requestAnimationFrame to renderer.setAnimationLoop. The skill is one file with no scripts. It is one of 13 three.js skills in the same repo, and its See Also section names 11 of them.

Good for

Web developers building a three.js scene from scratch
Developers upgrading old three.js code to the current release
Anyone switching to WebGPU and TSL

Install threejs-fundamentals

Claude Code

Copy this prompt.

Install the threejs-fundamentals skill in Claude Code. Run this command:

npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-fundamentals

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Three.js scene setup: scenes and fog, cameras, the renderer and tone mapping, the animation loop, object hierarchies, transforms, core math and cleanup, on WebGL or with WebGPU and TSL. Use when creating a scene from scratch, configuring a camera or renderer, handling resize, or arranging objects.

Sections in SKILL.md

Quick Start
Scene
Cameras
PerspectiveCamera
OrthographicCamera
ArrayCamera
CubeCamera
WebGLRenderer
Objects
Object3D
Group and Mesh
Coordinate System
Math Utilities
Vector3
Matrix4, Quaternion, Euler
Color

Key facts

Author: CloudAI-X (the cloudai-x/threejs-skills repository)
License: MIT (README)
Targets: three.js r186 (three@0.186). The README also names React Three Fiber 9.8, drei 10.7 and gltf-transform 4.5 for other skills.
Files: 1 file: SKILL.md. No scripts.
Installs on skills.sh: 19,270 as of 2026-11-02
GitHub stars: 3,903 for the whole cloudai-x/threejs-skills repo, 2026-11-02
Last repo commit: 2026-10-19
skills.sh audits: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass

What it includes

A complete runnable scene, renderer, camera and cube
Sets up a WebGLRenderer, a scene with a background color, a PerspectiveCamera and a MeshStandardMaterial cube.
Try: “Set up a three.js scene with a rotating cube, using the current API.”
Read · Quick Start
Perspective, Orthographic, Array and Cube cameras
Shows each camera type, fog and background, and notes that scene.environment lights the standard and physical materials on both renderers.
Read · Scene and cameras
Renderer options, tone mapping and resize
Covers pixel ratio, sizing and renderer settings.
Read · WebGLRenderer
Object3D, Group, Mesh and transforms
Object hierarchies, positions, rotations and scales.
Read · Objects and coordinate system
Vector3, Matrix4, Quaternion, Euler, Color, MathUtils
The core math classes with examples.
Read · Math utilities
Progress callbacks, dispose geometry, materials, textures, renderer
Notes that material.dispose() leaves textures alone and that Object3D.dispose() does not visit children.
Read · Loading manager and cleanup
Culling, merging, InstancedMesh, LOD, renderer.info
Short rules plus a merge and LOD example.
Read · Performance
WebGPURenderer with await renderer.init() and node materials
The same scene on WebGPU, with a fallback to WebGL 2, node materials and asynchronous GPU readback.
Read · WebGPU and TSL
15 outdated snippets with the r186 fix and the reason
For example Clock to Timer, outputEncoding to outputColorSpace, and mesh.layers.set to mesh.layers.enable.
Read · Common Mistakes
Names 11 related three.js skills
Geometry, materials, textures, lighting, animation, interaction, loaders, shaders, postprocessing, performance and React Three Fiber.
Read · See Also

From the official docs

Questions

What does threejs-fundamentals do?

It gives Claude current, checked three.js r186 guidance for scene setup, cameras, the renderer, transforms, math, cleanup and basic WebGPU and TSL. The README says it is meant so the code Claude writes runs on the release you actually install.

How do I install it?

Use the install box at the top of this page to add this skill alone. The repo README also documents installing all 13 three.js skills with one npx skills command, or copying the skill folders into ~/.claude/skills or .claude/skills.

Does it work with other three.js skills?

It names 11 related skills in its See Also section, such as threejs-geometry and threejs-lighting, and points to threejs-geometry for InstancedMesh. They are optional extras installed from the same repo.

Is it safe to use?

It is reference text and code examples, and bundles no scripts. Review the code Claude writes into your project as you would any other change.

Which three.js version does it target?

three.js r186. The README says a lot changed between r160 and r186, for example RGBELoader became HDRLoader and Clock gave way to Timer, and the skill's Common Mistakes list covers the old forms.

Does it cover React Three Fiber?

Not in this skill. The README lists threejs-react-three-fiber as a separate skill, which this one names in its See Also section.

Information

updated Nov 2, 2026

Repository: cloudai-x/threejs-skills
Folder: skills/threejs-fundamentals

cloudai-x/threejs-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

SKILL.md · github.com
README.md · github.com