threejs-interaction について
Three.js のシーンに操作機能を加えるスキルです。レイキャスティング、オブジェクト選択、ポインターやタッチ入力、カメラ制御を扱い、動作確認と後片付けを重視します。
主な機能
- 01レイキャスティングとオブジェクト選択
- 02ポインターとタッチ入力
- 03カメラ制御
- 04インタラクティブな 3D シーン
活用シーン
- 01キャンバスへのオブジェクト選択の追加
- 02リサイズやスクロール後の入力処理
- 03キーボード選択への対応
- 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.
制限事項
- 上記の説明に明確に当てはまる場合に限り、このスキルを使用してください。
- 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
- 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認を求めてください。
コメント
Markdown 対応