mcpField
T
threejs-math

threejs-math

github.com/full-stack-skills開発10358 回インストール4 週間前に更新
リポジトリ

threejs-math について

threejs-mathは、three.jsの数学型と空間クエリに関する回答を支援するエージェント向けスキルです。基本数学、ピッキング、アニメーションの扱いを区別し、関連ドキュメントや実践方法を案内します。

主な機能

  1. 01ベクトル、行列、四元数の案内
  2. 02境界ボリュームと交差判定
  3. 03レイ、平面、フラスタムのクエリ案内
  4. 04アドオンの数学構造への案内

活用シーン

  1. 01ローカルとワールド変換の検討
  2. 02オブジェクトの境界と包含確認
  3. 03レイとジオメトリの交差テスト

インストール

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

$npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-math

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

同梱ファイルagents/openai.yamlexamples/workflow-ray-aabb.md

詳細

このスキルを使用するタイミング

ユーザーが次の内容に言及した場合は、必ずこのスキルを使用してください：

  • ベクトル／行列の演算順序、applyQuaternion、lookAt、ワールド変換とローカル変換の違い
  • 境界ボリューム Box3／Sphere、包含判定／交差判定
  • （ピッキング処理全体を伴わない）Ray と Plane と Frustum の判定

重要：数学とオブジェクトとアニメーションの違い

必要なものスキル
数学の基本型threejs-math
Raycaster とレイヤーを使ったピッキングthreejs-objects
QuaternionKeyframeTrack の再生threejs-animation

トリガーとなる語句：

  • 「Vector3」、「Matrix4」、「Quaternion」、「Box3」、「Ray」、「Frustum」
  • 「ベクトル」、「行列」、「クォータニオン」、「境界ボックス」

このスキルの使用方法

  1. 規約：three.js の例に従い、ベクトルには左から行列を乗算します。ワールド空間でクエリを行う前に updateMatrixWorld を呼び出してください（threejs-objects）。
  2. 境界：大まかな境界には Box3().setFromObject(object) を使用し、必要に応じて詳細化します。
  3. 衝突に関する判定：ドキュメントに従い、ray.intersectBox、sphere.containsPoint などを使用します。
  4. アドオンの構造体：ゲームでは Octree／OBB を使用します。アドオンのページを参照し、ここに API の表全体をコピーするのは避けてください。
  5. 色：Color の変換はマテリアル／テクスチャに関連するため、相互にリンクしてください。
  6. ランダムサンプリング：メッシュ上に点を分布させるには MeshSurfaceSampler を使用します。

examples/workflow-ray-aabb.md を参照してください。

ドキュメントマップ（公式）

ドキュメントのセクション代表的なリンク
数学https://threejs.org/docs/Vector3.html
数学https://threejs.org/docs/Matrix4.html
数学https://threejs.org/docs/Quaternion.html
数学https://threejs.org/docs/Ray.html

対象範囲

  • 対象範囲内： コアの数学型。アドオンの数学関連項目は参照先として扱います。
  • 対象範囲外： 型の参照を超えるキーフレームトラックの評価（アニメーションスキル）。

よくある落とし穴とベストプラクティス

  • オイラー角のジンバルロック：任意の回転にはクォータニオンを優先してください。
  • 一時的なベクトルを再利用すると、頻繁に実行されるループでの GC の負荷を軽減できます。
  • フラスタムカリングのヘルパーは実装によって異なります。使用中の three のバージョンで確認してください。

ドキュメントとバージョン

コアの数学型は Math に記載されています。アドオンのユーティリティ（Octree、OBB、…）は three.js のドキュメント の Addons → Math にあります。Global には、マテリアルと併せて必要になることがある定数（例：ラッピング、ブレンディング）も記載されています。

エージェントの回答チェックリスト

このスキルを使用して回答する際は、次の点を優先してください：

  1. ドキュメントから具体的な型（Vector3、Matrix4、Quaternion、…）へのリンクを記載します。
  2. 時間サンプルに基づく AnimationMixer／トラックの数学処理は threejs-animation に案内します。
  3. インタラクションが目的の場合、Raycaster を使ったピッキングの流れは threejs-objects に案内します。
  4. 比較が重要な箇所では、数値安定性（イプシロン）に触れます。
  5. ユーザーが空間アクセラレーションを必要としている場合、ゲーム向けの構造体について Addons → Math を案内します。

参考資料

キーワード

英語： ベクトル、行列、クォータニオン、オイラー角、box3、sphere、ray、frustum、three.js

中国語： ベクトル、行列、クォータニオン、オイラー角、境界ボックス、レイ、three.js

コメント

Markdown 対応