mcpField
F
find-examples

find-examples

github.com/playcanvas開発31312 回インストール1 週間前に更新
リポジトリ

find-examples について

find-examplesは、バージョンに合ったPlayCanvasの例を探し、Engine、React、Web Componentsのプロジェクト向けに調整する開発スキルです。ローカルソースやバージョン指定リポジトリでの検索を案内し、導入済みパッケージとのAPI照合も促します。

主な機能

  1. 01導入済みバージョンに合う例の検索
  2. 02該当する環境のカタログを優先して検索
  3. 03例のコードと対応するアセットの取得
  4. 04設定を残してブラウザー操作部分を除去
  5. 05導入済み宣言に基づくReactプロパティの確認

活用シーン

  1. 01互換性のあるレンダリング例の検索
  2. 02Engineの例をプロジェクト向けに調整
  3. 03導入済みパッケージとのReactプロパティ照合

インストール

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

$npx skills add https://github.com/playcanvas/skills --skill find-examples

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

同梱ファイル

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

references/
direct-engine.md
react.md
web-components.md

詳細

公式サンプル

サンプルは、バージョンに合った参考レシピです。インポートするモジュールではなく、適宜変更して使います。Engine に該当する動作のスクリプトがある場合は、まず reuse-scripts を使用してください。

サンプルを探す

node_modules/playcanvas/examples/src/examples が存在する場合は、リンクされたチェックアウトまたはソースチェックアウトです。ローカルで読み取ってください。npm パッケージには examples/ が含まれていないため、それ以外の場合はインストール済みのタグから取得してください。

TAG="v$(node -p "JSON.parse(require('fs').readFileSync('node_modules/playcanvas/package.json')).version")" || exit 1
gh api "repos/playcanvas/engine/git/trees/$TAG?recursive=1" | grep -o '"examples/src/examples/[^"]*\.example\.mjs"'
gh api "repos/playcanvas/engine/contents/examples/src/examples/<category>/<name>.example.mjs?ref=$TAG" \
  --jq .content | base64 --decode

依存関係の一覧ではなく、解決済みのパッケージを確認してください。playcanvas は推移的依存関係であることがよくあります。一覧が空の場合は無効なタグです。推測せずに中止してください。バージョンにタグがない場合に限り、main を使用してください。

対象リポジトリ参照サンプルのパス
直接 Engineplaycanvas/enginev<version>examples/src/examples/<category>/<name>.example.mjs
Web Componentsplaycanvas/web-componentsv<version>examples/<name>.html
Reactplaycanvas/developer-sitemaindocs/user-manual/react/examples/<name>.mdx

まず対象のカタログを検索し、その後 Engine のカタログを検索してください。React ページは最新のパッケージに対応しているため、各 prop をインストール済みの宣言と照合してください。examples/assets/wasm にある Draco、Basis、Ammo デコーダーを含め、サンプルのアセットは同じ参照から取得してください。

サンプルを応用する

コンポーネントのオプション、シーンのセットアップ、マテリアル、シェーダー、アセット、更新ロジックは残し、サンプルブラウザーの操作部とインポートは削除してください。レイヤー、深度、カメラフレーム、空など複数のシステムを組み合わせたサンプルの場合は、カスタマイズする前に、その基本となる描画を実現してください。

コードに対応するリファレンスだけを読んでください：直接 Engine、React、または Web Components。

コメント

Markdown 対応