AlphaMoatによると、2026-09時点でThree.jsのダウンロード数は3,755、スター数は6で、AIスキル全体5,078件中2,838位、開発では577件中369位です。
| プラットフォーム | インストール数 | ダウンロード数 | スター数 | コメント |
|---|---|---|---|---|
| ClawHub ↗ | 95 | 3419 | 6 | - |
| SkillHub ↗ | 146 | 3755 | 6 | — |
プラットフォームごとに集計方法と集計時点が異なります。
統合前に依存関係、サードパーティアセットの出所、ジオメトリ・マテリアル・テクスチャの明示的な解放を確認してください。実装の詳細はプロジェクトのバンドラーとアセット設定に照らして検証します。 資料は node を前提に挙げています。使用する Three.js の版でコードを確認します。
資料公開日 2026-10-29
スキルのドキュメントをもとに生成した例であり、実際の実行結果ではありません。
2026-09 から集計方法を変更し、同名スキルを作者ごとに分けて集計し、全スキルを対象にしました。破線は変更前の月で、変更後のデータとは直接比較せず、変更をまたぐ増減も計算していません。
| 月 | ダウンロード数 | 前月比 | スター数 |
|---|---|---|---|
| 2026-09 | 3755 | — | 6 |
| 2026-08 | 3252 | +7.3% | 6 |
| 2026-07 | 3032 | +18.1% | 6 |
| 2026-06 | 2568 | +8.1% | 6 |
| 2026-05 | 2375 | — | 6 |
| 2026-03 | 1781 | — | 6 |
作者が公開した元のファイルをテキストのまま表示しています。AlphaMoat による編集や審査はしていません。リンクはクリックできません。コマンドは内容を確認してから実行してください。取得日 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
gh コマンドラインで GitHub の PR チェック、ワークフロー実行、API 照会を扱うスキルです。
16 の検索エンジンをまとめて使え、API キーが不要な検索スキルです。
コマンドラインから MCP サーバーとツールを一覧、設定、認証、呼び出しします。
テキストの説明からMermaid図のコードを生成します。
管理された OAuth で YouTube Data API に接続し、動画検索とチャンネル管理を行います。
管理された OAuth 接続で GitHub REST API にアクセスします。
計画、実装、検証、テストをカバーするコーディング作業のスキルです。
Docker の基本コマンドとコンテナ作業をまとめたスキルです。
利用者の訂正と自己点検を層構造の記憶に蓄え、使われ方に応じて昇格や保管を行うスキルです。
数式、書式、ブックの構造を保ったまま Excel ファイルを作成・点検・編集するスキルです。
Word と DOCX 文書を扱うための作業指針で、編集後にスタイルや番号、レイアウトが崩れないことに重点を置きます。
データベースや表計算、書き出した生データを意思決定に使える結論へ変えるデータ分析スキルです。
PPT を編集した後もきれいに表示されるようにするための作業規範です。
データ月:2026-09 · ダウンロード数、スター数、インストール数は公開スキルレジストリ(ClawHub、SkillHub)から月単位で集計しています。詳しくはデータの方法論をご覧ください。