Iván

Three.js

開発v1.0.0
作者:Iván更新日 2026-05-11threejs@clawhub_ivangdavila/threejs
フロントエンド開発

AlphaMoatによると、2026-09時点でThree.jsのダウンロード数は3,755、スター数は6で、AIスキル全体5,078件中2,838位、開発では577件中369位です。

インストール数
146
ダウンロード数
3755
スター数
6
総合順位
#2,838
全体の上位 56% · 開発の上位 64%
プラットフォームインストール数ダウンロード数スター数コメント
ClawHub ↗9534196-
SkillHub ↗14637556—

プラットフォームごとに集計方法と集計時点が異なります。

このスキルでできること

統合前に依存関係、サードパーティアセットの出所、ジオメトリ・マテリアル・テクスチャの明示的な解放を確認してください。実装の詳細はプロジェクトのバンドラーとアセット設定に照らして検証します。 資料は node を前提に挙げています。使用する Three.js の版でコードを確認します。

資料公開日 2026-10-29

できること

  • オブジェクト削除前のGPUリソース解放を確認する
  • rendererのアニメーションループとdeltaに基づく更新を使う
  • ウィンドウサイズ変更時にカメラ投影とrendererサイズを確認する
  • 静的ジオメトリの結合やInstancedMeshなどの性能策を評価する

使う場面

  • Three.jsのWebシーンを構築またはレビューする場合
  • プロジェクト情報を使ってaddonのパスやアセットの出所を確認できる場合
  • 統合前にクリーンアップ処理と依存関係をレビューできる場合

プロンプト例

スキルのドキュメントをもとに生成した例であり、実際の実行結果ではありません。

Three.jsシーンのリソース解放、レンダーループ、リサイズ対応をレビューし、プロジェクト固有の確認が必要な依存関係やアセットを示してください。プロジェクト設定を捏造しないでください。

月次の推移

ダウンロード数3755
1623276839132026-03 · ダウンロード数 17812026-05 · ダウンロード数 23752026-06 · ダウンロード数 25682026-07 · ダウンロード数 30322026-08 · ダウンロード数 32522026-09 · ダウンロード数 375526-0326-09
スター数6
5672026-03 · スター数 62026-05 · スター数 62026-06 · スター数 62026-07 · スター数 62026-08 · スター数 62026-09 · スター数 626-0326-09

2026-09 から集計方法を変更し、同名スキルを作者ごとに分けて集計し、全スキルを対象にしました。破線は変更前の月で、変更後のデータとは直接比較せず、変更をまたぐ増減も計算していません。

月ダウンロード数前月比スター数
2026-093755—6
2026-083252+7.3%6
2026-073032+18.1%6
2026-062568+8.1%6
2026-052375—6
2026-031781—6

SKILL.md 原文

作者が公開した元のファイルをテキストのまま表示しています。AlphaMoat による編集や審査はしていません。リンクはクリックできません。コマンドは内容を確認してから実行してください。取得日 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
すべて表示(全 51 行)
- 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

開発の人気スキル

Ivánのその他のスキル

データ月:2026-09 · ダウンロード数、スター数、インストール数は公開スキルレジストリ(ClawHub、SkillHub)から月単位で集計しています。詳しくはデータの方法論をご覧ください。