threejs-interaction について
threejs-interactionは、Three.jsプロジェクトでピッキングと操作を実装するためのスキルです。ポインターやタッチ操作、座標処理、選択状態、複雑なシーンでの検証を扱います。
主な機能
- 01ポインターとタッチ操作の指針
- 02ビューポート基準の座標変換
- 03レイキャストと選択処理
- 04ドラッグとコントロールの連携
- 05操作の検証チェックリスト
活用シーン
- 01Three.jsシーンにオブジェクト選択を追加
- 02トランスフォーム操作付きのドラッグを実装
- 03分割ビューポートで選択を行う
- 04タッチとキーボード操作を検証
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/threejs-interactionを入力して読み込まれたか確認します。
詳細
ピッキングとコントロール
プロジェクトにインストールされているバージョンと既存のアーキテクチャを使用してください。これらの指示はユーザーのタスクを補足するものであり、無関係な変更や外部での操作を許可するものではありません。
タスクに応じてコントロールを選び、インタラクティブ領域の外では通常のページスクロールを維持してください。重要な操作について、ポインター、タッチ、キーボード、HTML の各同等操作を定義してください。選択状態は、一時的なメッシュインデックスだけではなく、安定した ID をキーとしてアプリケーションの状態に保持してください。
実際のイベントのビューポート矩形を使用して、クライアント座標を変換してください：x = 2 * (clientX - left) / width - 1、y = 1 - 2 * (clientY - top) / height。シザー表示では、そのビューの矩形を使用してください。サイズが 0 のビューは無視してください。関連するルート／レイヤーのみをレイキャストし、子孫、インスタンス ID、表裏面の挙動を考慮してください。
移動距離のしきい値を使って、クリックとドラッグを区別してください。キャンバスの外までドラッグする場合はポインターキャプチャを使用し、pointercancel とキャプチャの喪失に対処してください。オブジェクト操作がジェスチャーを制御している間はオービットコントロールを一時停止し、すべての終了経路で必ず復元してください。
ドラッグ平面とトランスフォームギズモでは、ワールド座標の結果をオブジェクトの親空間に変換してください。用途に応じて、スケールの制約とヒット許容範囲を設定してください。シェーダーによる可視変形は CPU レイキャストと一致しない場合があります。必要に応じてプロキシジオメトリなど、別のピッキング方法を使用してください。
負荷の高いホバー処理は描画フレームに合わせて間引き、メモリー割り当てを再利用し、コントロールとリスナーを破棄してください。キャンバスのオフセット、タッチのキャンセル、ネストされたトランスフォーム、遮蔽、キーボードによる選択、リスト更新後のインスタンス選択を検証してください。
API リファレンス
正確なシグネチャとリビジョン固有の挙動については、公式ドキュメントを参照してください。ドキュメントにアクセスできない場合は、インストール済みの型定義／ソースを調べ、残る不確実性を明記してください。