threejs-objects について
threejs-objectsは、three.jsのシーングラフやオブジェクトに関する回答を支援するスキルです。変換、メッシュの種類、レイキャスト、レイヤーを扱い、関連分野との範囲も示します。
主な機能
- 01シーングラフとオブジェクト変換
- 02静的・インスタンス・スキンメッシュ
- 03レイキャストとピッキング
- 04レイヤーによる可視性制御
- 05オブジェクトの破棄に関する指針
活用シーン
- 01Groupと変換によるオブジェクト整理
- 02Raycasterを使ったシーン内オブジェクト選択
- 03レイヤーによるカメラとオブジェクトの可視性絞り込み
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/threejs-objectsを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlexamples/workflow-raycaster-pick.md
詳細
このスキルを使用するタイミング
ユーザーが次の内容に言及した場合は、必ずこのスキルを使用してください：
- 親子関係、
position/rotation/scale、matrixAutoUpdate、updateMatrixWorld - メッシュの種類の選択：静的、インスタンス化、スキニング、バッチ LOD
- ピッキング：
Raycaster.setFromCamera、intersectObjects、再帰フラグ、面／uv の結果 - レイヤー：カメラ／ライト／オブジェクトの選択的な表示
重要：オブジェクトと数学
| 必要な内容 | スキル |
|---|---|
| シーングラフとピッキング | threejs-objects |
| ボックス／レイの数学のみ | threejs-math |
トリガーとなる語句の例：
- 「Object3D」、「InstancedMesh」、「SkinnedMesh」、「Raycaster」、「layers」
- 「親子ノード」、「レイキャスティング」、「レイヤー」
このスキルの使用方法
Groupとトランスフォームを使ってシーンを構成します。可能な場合は、深い階層を最小限に抑えます。- インスタンス化：インスタンスごとの行列を設定し、
countとフラスタムカリングの動作を理解します。 - SkinnedMesh：スケルトンをバインドします。クリップについては threejs-animation、スキニング用マテリアルのフラグについては threejs-materials を参照します。
- ピッキング：デバイス座標を正規化し、カメラからレイを設定し、レイヤーでフィルタリングして、交差をソートします。
- イベント：カスタムオブジェクトで
EventDispatcherを使用します。パターンのみを扱い、DOM フレームワークは対象外です。 - クリッピング：ユーザーが断面カットを必要とする場合は、ドキュメントに従って
ClippingGroupを使用します。 - 破棄：オブジェクトを完全に削除する際は、ジオメトリ／マテリアル／テクスチャを破棄します。
examples/workflow-raycaster-pick.md を参照してください。
ドキュメントの案内（公式）
| ドキュメントのセクション | 代表的なリンク |
|---|---|
| コア | https://threejs.org/docs/Object3D.html |
| オブジェクト | https://threejs.org/docs/Mesh.html |
| オブジェクト | https://threejs.org/docs/InstancedMesh.html |
| コア | https://threejs.org/docs/Raycaster.html |
対象範囲
- 対象範囲内： Object3D グラフ、レンダリング可能なオブジェクトの種類、レイキャスティング、レイヤー、ディスパッチャーの基本。
- 対象範囲外： 物理エンジン、XR 入力マッピング（threejs-webxr）。
よくある落とし穴とベストプラクティス
- 移動したオブジェクトに対してワールド空間でレイテストを行う前に、
updateMatrixWorldを呼び出し忘れる。 layersを設定していない Raycaster は意図しないオブジェクトを選択します。カメラとオブジェクトでマスクを一貫して設定してください。- InstancedMesh のレイキャストヒットにはインスタンスごとの処理が必要です。使用しているバージョンのドキュメントを確認してください。
ドキュメントとバージョン
Object3D、メッシュの種類、Raycaster、Layers は、three.js docs の Objects と Core に記載されています。ピッキングとレイヤーの動作は多少変わる可能性があるため、ユーザーが使用している three.js の系統に対応する正確なページをリンクしてください。
エージェントの回答チェックリスト
このスキルに基づいて回答する際は、次の点を優先してください：
- 必要に応じて
Object3D、Mesh、InstancedMesh、Raycaster、またはLayersをリンクします。 - スケルトンアニメーションとスキニングメッシュのセットアップには、threejs-animation を組み合わせます。
- シーングラフを伴わない純粋な線形代数の質問は、threejs-math に案内します。
- セッション／コントローラーが関係する場合は、XR 入力を threejs-webxr に案内します。
- オブジェクトを完全に削除する際は、ジオメトリ／マテリアルに対する
dispose()に触れます。
参考資料
- https://threejs.org/docs/Object3D.html
- https://threejs.org/docs/Raycaster.html
- https://threejs.org/docs/Layers.html
- https://threejs.org/docs/InstancedMesh.html
キーワード
英語： Object3D、メッシュ、インスタンス化メッシュ、スキニングメッシュ、Raycaster、レイヤー、シーングラフ、three.js
中国語： シーングラフ、Object3D、Mesh、インスタンス化、スケルトンメッシュ、レイキャスティング、レイヤー、three.js
コメント
Markdown 対応