mcpField
T
threejs-ecs-ts

threejs-ecs-ts

github.com/podo開発29160 回インストール1 日前に更新
リポジトリ

threejs-ecs-ts について

TypeScriptによる3Dシーン開発向けのスキルで、Three.jsの描画とECSアーキテクチャのパターンを組み合わせます。多数の独立したオブジェクトを含む複雑なインタラクティブシーンを対象とします。

主な機能

  1. 01Three.jsとECSアーキテクチャの組み合わせ
  2. 02コンポーネントによるデータとロジックの分離
  3. 03複雑なインタラクティブ3Dシーン向け
  4. 04TypeScriptによるシーン管理

活用シーン

  1. 01多数のキャラクターを含む3Dゲームシーンの構築
  2. 02シミュレーション内のオブジェクトと振る舞いの整理
  3. 03インタラクティブな展示物の独立オブジェクト管理
  4. 04複雑なシーンのECS構成

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill threejs-ecs-ts

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

同梱ファイルstub.yaml

詳細

threejs-ecs-ts

カタログの概要 — 完全なパッケージはこちら：Nice-Wolf-Studio/claude-skills-threejs-ecs-ts

意思決定ツリー

  1. パッケージはすでにインストールされていますか？ 確認：~/.design-agent-skills/skills/threejs-ecs-ts/SKILL.md が存在するか確認します。

    • はい → threejs-ecs-ts を呼び出して続行します
    • いいえ → ステップ 2 に進みます

  2. シェルにアクセスできますか？

    • はい → 以下のインストールコマンドを実行してから、スキルを呼び出します
    • いいえ → インストールコマンドを表示します。Claude Code では、先頭に ! を付けてチャットメッセージとして送信します。グローバルにインストールする場合は -g を追加し、プロジェクトのみにインストールする場合は省略します

インストールコマンド

npx skills add Nice-Wolf-Studio/claude-skills-threejs-ecs-ts

インストール後の呼び出し

  • スキル名：threejs-ecs-ts
  • トリガーフレーズ：「Three.js ECS」、「entity component」、「3D game architecture」

概要

Three.js のレンダリングと TypeScript の Entity Component System（ECS）アーキテクチャパターンを組み合わせ、複雑でインタラクティブな 3D シーンを管理するための構造化されたアプローチを提供します。ECS では、データ（コンポーネント）、ロジック（システム）、エンティティ（ID）を分離することで、ゲームキャラクター、シミュレーション、インタラクティブなインスタレーションなど、多数の独立したオブジェクトを含むシーンを拡張しやすくします。シンプルなオブジェクト階層では複雑さをすっきりと管理できなくなる場合に最適です。

使用しない場合

  • アーキテクチャ上の複雑さがないシンプルな Three.js シーン — 代わりに cloudai-threejs を使用します
  • WebGPU 固有のレンダリング機能 — 代わりに webgpu-claude-skill を使用します
  • アーキテクチャ／BIM の 3D ワークフロー — 代わりに threejs-claude-skill-package を使用します

コメント

Markdown 対応