# threejs

> Claude/Codex skill by [@mengto](https://omgskills.com/library/mengto/index.md) · 6.8k stars · Updated 2026-10-18

Use when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance). Helpful for designers shipping 3D UI moments.

## Install

```sh
git clone https://github.com/MengTo/Skills /tmp/Skills && ln -s /tmp/Skills/agent-skills/web-design/threejs ~/.claude/skills/threejs
```

## From README

Three.js — WebGL 3D Scenes Skill When to use Real 3D: product spins, interactive hero scenes, shaders/material effects, 3D data viz You need full control beyond “background effects” You can budget time for asset pipeline + performance tuning Core mental model Create: Scene (root graph) Camera (Perspective/Orthographic) Renderer (WebGLRenderer) Mesh = Geometry + Material Lights (if using non-unlit materials) Render loop: requestAnimationFrame(animate) Update time-based animations, controls, mixers, then renderer.render(scene, camera) Key APIs/patterns const renderer = new THREE.WebGLRenderer({ canvas, antialias, alpha }) renderer.setSize(width, height, false) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) Camera: camera.aspect = width / height; camera.updateProjectionMatrix() Scene graph: scene.add(object) / object.position/rotation/scale Loading assets: GLTFLoader (models), TextureLoader (images), DRACOLoader (compressed glTF) Controls (common): OrbitControls...

## Links

- HTML page: https://omgskills.com/library/mengto/skills/threejs/
- GitHub: https://github.com/MengTo/Skills
- Author: [@mengto](https://omgskills.com/library/mengto/index.md)

## More from this repo

- [animation-on-scroll](https://omgskills.com/library/mengto/skills/animation-on-scroll/index.md) — Used to create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and...
   - [@mengto](https://omgskills.com/library/mengto/index.md) · 7.3k stars
- [animation-systems](https://omgskills.com/library/mengto/skills/animation-systems/index.md) — Used when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel.
   - [@mengto](https://omgskills.com/library/mengto/index.md) · 6.8k stars
- [beautiful-shadows](https://omgskills.com/library/mengto/skills/beautiful-shadows/index.md) — Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation.
   - [@mengto](https://omgskills.com/library/mengto/index.md) · 6.8k stars