Three.js 開発

Three.js を使用した高性能の 3D ウェブアプリケーション開発 - クロスブラウザ対応の WebGL/WebGPU ライブラリです。

このスキルを使用する場面

以下の作業に使用します：

• 3D シーン、モデル、アニメーション、またはビジュアライゼーション
• WebGL/WebGPU レンダリングとグラフィックスプログラミング
• インタラクティブな 3D 体験（ゲーム、コンフィギュレータ、データ視覚化）
• カメラコントロール、ライティング、マテリアル、またはシェーダー
• 3D アセットの読み込み（GLTF、FBX、OBJ）またはテクスチャ
• ポストプロセッシング効果（ブルーム、被写界深度、SSAO）
• 物理シミュレーション、VR/XR 体験、または空間オーディオ
• パフォーマンス最適化（インスタンシング、LOD、フラスタムカリング）

段階的学習パス

レベル 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 - クリップ、ミキサー、キーフレーム
• 数学: references/07-math.md - ベクトル、行列、クォータニオン、曲線
• ジオメトリ: references/18-geometry.md - 組み込み図形、BufferGeometry、カスタムジオメトリ、インスタンシング
• マテリアル: references/11-materials.md - PBR、基本、Phong、Lambert、Physical、Toon、Normal、Depth、Raw、シェーダーマテリアル、マテリアルプロパティ

レベル 3: インタラクション & エフェクト

• インタラクション: references/08-interaction.md - レイキャスティング、ピッキング、トランスフォーム
• ポストプロセッシング: references/09-postprocessing.md - パス、ブルーム、SSAO、SSR
• コントロール（アドオン）: references/10-controls.md - Orbit、Transform、First-person

レベル 4: 高度なレンダリング

• マテリアル応用: references/11-materials-advanced.md - PBR、カスタムシェーダー
• パフォーマンス: references/12-performance.md - インスタンシング、LOD、バッチング、カリング
• ノードマテリアル（TSL）: references/13-node-materials.md - シェーダーグラフ、コンピュート

レベル 5: 専門的な分野

• 物理: references/14-physics-vr.md - Ammo、Rapier、Jolt、VR/XR
• 高度なローダー: references/15-specialized-loaders.md - SVG、VRML、ドメイン固有
• WebGPU: references/16-webgpu.md - モダンバックエンド、コンピュートシェーダー
• シェーダー: references/17-shader.md - GLSL、ShaderMaterial、ユニフォーム、カスタム効果

クイックスタートパターン

// 1. シーン、カメラ、レンダラー
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 2. オブジェクトを追加
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 3. ライトを追加
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));

// 4. アニメーションループ
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

外部リソース

• 公式ドキュメント: https://threejs.org/docs/
• 例: https://threejs.org/examples/
• エディター: https://threejs.org/editor/
• Discord: https://discord.gg/56GBJwAnUS