mcpField
3
3d-graphics

3d-graphics

github.com/samhvw8クリエイティブ・メディア15136 回インストール今日更新
リポジトリ

3d-graphics について

Three.jsで3D Webアプリを開発するための学習スキルです。段階的なリファレンスを通じて、インタラクションや描画効果、高度なテーマを扱います。

主な機能

  1. 01段階的なThree.js学習パス
  2. 023Dアセットとテクスチャの読み込み
  3. 03カメラ、照明、アニメーション
  4. 04インタラクションとポストプロセス
  5. 05パフォーマンス最適化とWebGPU

活用シーン

  1. 01インタラクティブな3D Web体験の構築
  2. 023Dモデルの読み込みとアニメーション
  3. 03描画効果やシェーダーの追加
  4. 04シーン描画パフォーマンスの改善

インストール

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

$npx skills add https://github.com/samhvw8/dotfiles --skill 3d-graphics

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

同梱ファイル

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

references/
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
12-performance.md
13-node-materials.md
14-physics-vr.md
15-specialized-loaders.md
16-webgpu.md

詳細

Three.js 開発

クロスブラウザー対応の WebGL／WebGPU ライブラリである Three.js を使用して、高性能な 3D ウェブアプリケーションを構築します。

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

次の作業で使用します。

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

段階的な学習パス

レベル 1：入門

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 - ベクトル、行列、クォータニオン、曲線
レベル 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 - 最新のバックエンド、コンピュートシェーダー

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

// 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 対応