According to AlphaMoat, as of 2026-09, Three.js has 3,755 downloads and 6 stars — ranked #2,838 of 5,078 AI skills overall, and #369 of 577 in Development.
| Platform | Installs | Downloads | Stars | Comments |
|---|---|---|---|---|
| ClawHub ↗ | 95 | 3.4K | 6 | - |
| SkillHub ↗ | 146 | 3.8K | 6 | — |
Platforms count differently and update at different times.
Before integration, review dependency choices, third-party asset origins, and explicit disposal of geometries, materials, and textures. Verify implementation details against the project’s bundler and asset configuration. The source lists node as a prerequisite; verify code against the installed Three.js version.
Profile published 2026-10-29
Generated from the skill’s documentation as examples; not results of actual runs.
The counting method changed in 2026-09: skills with the same name are now counted separately by author, and the full catalog is covered. Dashed lines show months before the change; they are not compared with later months, and no growth is computed across the change.
| Month | Downloads | MoM | Stars |
|---|---|---|---|
| 2026-09 | 3.8K | — | 6 |
| 2026-08 | 3.3K | +7.3% | 6 |
| 2026-07 | 3.0K | +18.1% | 6 |
| 2026-06 | 2.6K | +8.1% | 6 |
| 2026-05 | 2.4K | — | 6 |
| 2026-03 | 1.8K | — | 6 |
The author’s original file, shown as plain text without edits or review by AlphaMoat. Links are not clickable; check commands before running them. Fetched 2026-10-23.
---
name: Three.js
description: Build 3D web experiences with proper resource management and performance patterns.
metadata: {"clawdbot":{"emoji":"🎮","requires":{"bins":["node"]},"os":["linux","darwin","win32"]}}
---
# Three.js Production Patterns
## Resource Cleanup
- Call `.dispose()` on geometries, materials, and textures before removing objects — Three.js never garbage collects GPU resources automatically- When removing a mesh: `mesh.geometry.dispose(); mesh.material.dispose(); scene.remove(mesh)` — missing any step causes memory leaks
- Textures loaded via TextureLoader stay in GPU memory forever unless explicitly disposed — track and clean up on scene transitions
## Render Loop
- Always use `renderer.setAnimationLoop(animate)` instead of manual `requestAnimationFrame` — it handles VR, pauses when tab is hidden, and provides proper timing
- For animations, use `clock.getDelta()` for frame-independent movement — raw frame counting breaks on different refresh rates
## Responsive Canvas
- On window resize, update both camera aspect AND renderer size: `camera.aspect = width/height; camera.updateProjectionMatrix(); renderer.setSize(width, height)`
- Missing `updateProjectionMatrix()` after aspect change causes stretched/squished rendering
- Use `renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))` — values above 2 kill performance with minimal visual benefit
## Imports and Setup
- OrbitControls and other addons: `import { OrbitControls } from 'three/addons/controls/OrbitControls.js'` — the path varies by bundler, check your setup
- Always set `controls.enableDamping = true` with OrbitControls and call `controls.update()` in render loop — without this, damping silently fails
## Lighting
- MeshBasicMaterial ignores all lights — use MeshStandardMaterial or MeshPhongMaterial for lit scenes
- Add ambient light (`new THREE.AmbientLight(0xffffff, 0.5)`) as baseline — scenes with only directional lights have pitch-black shadows
- HDR environment maps via PMREMGenerator give far better reflections than point lights on metallic materials
## Loading Assets
- GLTFLoader is the standard for 3D models — use Draco compression for large meshes (add DRACOLoader)
- Texture loading is async — models may render black until textures load; use LoadingManager for loading screens
- CORS blocks textures from other domains — host assets on same origin or configure proper CORS headers
## Camera Issues
- Default near/far planes (0.1 to 1000) cause z-fighting on large scenes — adjust to smallest range that fits your scene
- Camera inside an object renders nothing — check position after loading external models (they may have unexpected transforms)
- PerspectiveCamera FOV is vertical, not horizontal — 75 degrees is a common default
## Performance
- Merge static geometries with `BufferGeometryUtils.mergeBufferGeometries()` — each mesh is a draw call, fewer meshes = faster
- Use `InstancedMesh` for many identical objects — hundreds of draw calls become one
- Set `object.frustumCulled = true` (default) but verify large objects aren't disappearing at edges — bounding sphere may be wrong
- Call `renderer.info` to debug draw calls, triangles, and textures in memory
## Animation
- AnimationMixer requires `mixer.update(delta)` every frame with actual delta time — passing 0 or skipping frames breaks animations
- Skinned meshes (characters) need `SkeletonHelper` during development to debug bone issues
A skill for working with GitHub through the gh CLI: pull request checks, workflow runs, and API queries.
A search skill that aggregates 16 engines and needs no API key.
Lists, configures, authorizes and calls MCP servers and tools from the command line.
Generate Mermaid diagram code from text descriptions.
Access the YouTube Data API through managed OAuth to search videos and manage channel content.
Accesses the GitHub REST API over a managed OAuth connection.
A coding workflow skill covering planning, implementation, verification, and testing.
A skill that collects essential Docker commands and container workflows.
Turns corrections and self-review into tiered memory and promotes or archives it by use.
Creates, inspects, and edits Excel files while keeping formulas, formatting, and workbook structure intact.
A working guide for Word and DOCX documents that keeps styles, numbering, and layout intact after edits.
A data-analysis skill that turns databases, spreadsheets, and raw exports into decision-ready conclusions.
A set of rules for editing PowerPoint decks so they still render cleanly afterward.
Data month: 2026-09 · Downloads, stars and installs are aggregated monthly from public skill registries (ClawHub, SkillHub). See methodology.