mcpField
T
threejs

threejs

github.com/mrgoonie開発2.2k1.3k 回インストール30 週間前に更新
リポジトリ

threejs について

Three.js で 3D Web アプリを開発する人向けのスキルです。段階別の資料で、シーン構築から高度なレンダリングや専門分野まで扱います。

主な機能

  1. 01段階的な学習パス
  2. 02シーンとレンダラーの設定
  3. 033D アセットとテクスチャの読み込み
  4. 04カメラ、ライト、アニメーション
  5. 05インタラクションとポストプロセス
  6. 06パフォーマンスと WebGPU の解説

活用シーン

  1. 01インタラクティブな 3D Web シーンの構築
  2. 02モデルやテクスチャの読み込み
  3. 03レンダリング効果の作成
  4. 043D アプリの最適化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mrgoonie/claudekit-skills --skill threejs

インストール後、Claude Code で/threejsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
00-fundamentals.md
01-getting-started.md
02-loaders.md
03-textures.md
04-cameras.md
05-lights.md
06-animations.md
07-math.md
08-interaction.md
09-postprocessing.md
10-controls.md
11-materials-advanced.md
11-materials.md
12-performance.md
13-node-materials.md
14-physics-vr.md
15-specialized-loaders.md
16-webgpu.md
17-shader.md
18-geometry.md

詳細

Three.js 開発

クロスブラウザー対応の WebGL/WebGPU ライブラリである Three.js を使って、高パフォーマンスな 3D Web アプリケーションを構築します。

このスキルを使う場面

以下の作業で使用します。

  • 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、物理ベース、トゥーン、法線、深度、Raw、シェーダーマテリアル、マテリアルのプロパティ
レベル 3：インタラクションとエフェクト
  • インタラクション：references/08-interaction.md - レイキャスティング、ピッキング、トランスフォーム
  • ポストプロセス：references/09-postprocessing.md - パス、ブルーム、SSAO、SSR
  • コントロール（アドオン）：references/10-controls.md - オービット、トランスフォーム、一人称視点
レベル 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. 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();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 2. Add Objects
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 3. Add Lights
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));

// 4. Animation Loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

外部リソース

コメント

Markdown 対応