Iván

Three.js

Developmentv1.0.0
By IvánUpdated 2026-05-11threejs@clawhub_ivangdavila/threejs
Frontend

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.

Installs
146
Downloads
3.8K
Stars
6
Overall Rank
#2,838
Top 56% overall · Top 64% in Development
PlatformInstallsDownloadsStarsComments
ClawHub ↗953.4K6-
SkillHub ↗1463.8K6—

Platforms count differently and update at different times.

What this skill does

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

What you can do with it

  • Review GPU-resource cleanup before removing objects
  • Use the renderer animation loop and delta-based animation updates
  • Check camera projection and renderer size after window resizing
  • Assess performance options such as merging static geometry or using InstancedMesh

When to use it

  • When building or reviewing a Three.js web scene
  • When project details are available to verify addon paths and asset origins
  • When cleanup logic and dependencies can be reviewed before integration

Example prompts

Generated from the skill’s documentation as examples; not results of actual runs.

Review a Three.js scene’s resource disposal, render loop, and resize handling, and identify dependencies or assets that need project-specific verification. Do not invent project settings.

Monthly Trend

Downloads3.8K
1.6K2.8K3.9K2026-03 · Downloads 1.8K2026-05 · Downloads 2.4K2026-06 · Downloads 2.6K2026-07 · Downloads 3.0K2026-08 · Downloads 3.3K2026-09 · Downloads 3.8K26-0326-09
Stars6
5672026-03 · Stars 62026-05 · Stars 62026-06 · Stars 62026-07 · Stars 62026-08 · Stars 62026-09 · Stars 626-0326-09

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.

MonthDownloadsMoMStars
2026-093.8K—6
2026-083.3K+7.3%6
2026-073.0K+18.1%6
2026-062.6K+8.1%6
2026-052.4K—6
2026-031.8K—6

SKILL.md (original)

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.

3.4 KB · ClawHub v1.0.0
---
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
Show all (51 lines)
- 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

Popular in Development

More from Iván

Data month: 2026-09 · Downloads, stars and installs are aggregated monthly from public skill registries (ClawHub, SkillHub). See methodology.