ck:threejs

Three.js 開発

Three.js を使用して、高性能な 3D ウェブアプリケーションを構築します。13 のカテゴリにわたる検索可能なサンプル 556 件、API クラス 60 件、ユースケースのテンプレート 20 件を収録しています。

使用する場面

• 3D シーン、ゲーム、ビジュアライゼーションの構築
• 3D モデル（GLTF、FBX、OBJ）の読み込み
• アニメーション、物理演算、VR/XR の実装
• パーティクルエフェクトやカスタムシェーダーの作成
• レンダリングパフォーマンスの最適化

サンプルと API の検索

検索 CLI を使用して、関連するサンプルや API リファレンスを探します。

python3 .claude/skills/threejs/scripts/search.py "<query>" [--domain <domain>] [-n <max_results>]

検索対象

対象	用途	クエリ例
examples	コードサンプルを検索	"particle effects gpu"
api	クラス／メソッドのリファレンス	"PerspectiveCamera"
use-cases	プロジェクトの推奨事項	"product configurator"
categories	カテゴリを閲覧	"webgpu"

サンプル

# Find particle/compute examples
python3 .claude/skills/threejs/scripts/search.py "particle compute webgpu"

# Search API for camera classes
python3 .claude/skills/threejs/scripts/search.py "camera" --domain api

# Get examples for a use case
python3 .claude/skills/threejs/scripts/search.py "product configurator" --use-case

# Filter by category
python3 .claude/skills/threejs/scripts/search.py --category webgpu -n 10

# Filter by complexity
python3 .claude/skills/threejs/scripts/search.py --complexity high -n 5

サンプルカテゴリ

カテゴリ	件数	説明
webgl	216	標準的な WebGL レンダリング
webgpu (wip)	190	最新の WebGPU とコンピュートシェーダー
webgl / advanced	48	低レベル GPU、カスタムシェーダー
webgl / postprocessing	27	ブルーム、SSAO、SSR、DOF
webxr	26	VR/AR エクスペリエンス
physics	13	物理シミュレーション

よくあるユースケース

ユースケース	推奨事項	複雑さ
製品コンフィギュレーター	GLTF、PBR、EnvMaps	中
ゲーム開発	アニメーション、物理演算、コントロール	高
データビジュアライゼーション	BufferGeometry、Points	中
360 度パノラマ	Equirectangular、WebXR	低
建築ビジュアライゼーション	GLTF、HDR、CSM シャドウ	高

クイックスタート

// 1. Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// 2. Lighting
scene.add(new THREE.AmbientLight(0x404040));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);

// 3. Load GLTF Model
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => scene.add(gltf.scene));

// 4. Animation Loop
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

段階的なリファレンスファイル

レベル 1：基礎

• references/00-fundamentals.md - 基本概念、シーングラフ
• references/01-getting-started.md - セットアップ、基本的なレンダリング

レベル 2：一般的なタスク

• references/02-loaders.md - GLTF、FBX、OBJ ローダー
• references/03-textures.md - テクスチャの種類、マッピング
• references/04-cameras.md - カメラの種類、コントロール
• references/05-lights.md - ライトの種類、シャドウ
• references/06-animations.md - AnimationMixer、クリップ
• references/11-materials.md - PBR、標準マテリアル
• references/18-geometry.md - BufferGeometry、プリミティブ

レベル 3：インタラクティブ機能

• references/08-interaction.md - レイキャスティング、ピッキング
• references/09-postprocessing.md - ブルーム、SSAO、SSR
• references/10-controls.md - OrbitControls など

レベル 4：高度な機能

• references/12-performance.md - インスタンシング、LOD、バッチ処理
• references/13-node-materials.md - TSL シェーダーグラフ
• references/17-shader.md - カスタム GLSL シェーダー

レベル 5：専門分野

• references/14-physics-vr.md - 物理演算、WebXR
• references/16-webgpu.md - WebGPU、コンピュートシェーダー

外部リソース

• ドキュメント：https://threejs.org/docs/
• サンプル：https://threejs.org/examples/
• エディター：https://threejs.org/editor/
• Discord：https://discord.gg/56GBJwAnUS