mcpField
T
threejs-interaction

threejs-interaction

github.com/sickn33開発48.9k108 回インストール今日更新
リポジトリ

threejs-interaction について

Three.js のシーンに操作機能を加えるスキルです。レイキャスティング、オブジェクト選択、ポインターやタッチ入力、カメラ制御を扱い、動作確認と後片付けを重視します。

主な機能

  1. 01レイキャスティングとオブジェクト選択
  2. 02ポインターとタッチ入力
  3. 03カメラ制御
  4. 04インタラクティブな 3D シーン

活用シーン

  1. 01キャンバスへのオブジェクト選択の追加
  2. 02リサイズやスクロール後の入力処理
  3. 03キーボード選択への対応
  4. 04アンマウント時のリスナーと制御機能の解放

インストール

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill threejs-interaction

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

同梱ファイルreferences/detailed-guide.md

詳細

Three.js インタラクション

詳細ガイド

このスキルを実行する前に、詳細ガイドをお読みください。詳細ガイドには、手順と参考資料がすべて記載されています。安全上の要件、前提条件、検証要件は必ず遵守してください。特定の作業に取り組む場合は関連するセクションを、最初から最後まで作業する場合はガイド全体をお読みください。

使用する場面

  • Three.js のシーン内でユーザー操作を実装する必要がある場合。
  • レイキャスティング、オブジェクトの選択、ポインター操作、タッチ入力、またはカメラコントロールを扱う場合。
  • 静的なレンダリングではなく、インタラクティブな 3D 体験を構築する場合。

例

Add pointer selection to this canvas using its bounding rectangle, test after resize/scroll and provide keyboard selection. Dispose listeners/controls on unmount and verify picking nested meshes.

制限事項

  • 上記の説明に明確に当てはまる場合に限り、このスキルを使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認を求めてください。

コメント