mcpField
T
threejs-camera

threejs-camera

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

threejs-camera について

three.js の開発者やエージェント向けのカメラスキルで、標準的な投影カメラに加え、キューブ、マルチビュー、ステレオカメラも扱います。パラメーター設定、リサイズ対応、性能上の注意点を案内します。

主な機能

  1. 01透視カメラと正投影カメラの設定
  2. 02視野角とクリッピング面の調整
  3. 03CubeCamera による環境マップ
  4. 04ArrayCamera と StereoCamera の理解
  5. 05リサイズと投影行列への対応

活用シーン

  1. 01シーンに適した透視投影または正投影の選択
  2. 02リサイズ後のカメラアスペクト比の更新
  3. 03リアルタイム環境反射の生成
  4. 04非 XR のステレオまたはマルチビュー設定

インストール

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

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

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

同梱ファイルagents/openai.yamlexamples/workflow-perspective-resize.md

詳細

このスキルを使うタイミング

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

  • パースペクティブと正投影の切り替え、fov、aspect、zoom、near、far
  • リアルタイム環境マップや反射に使うCubeCamera（更新頻度に関する注意点）
  • マルチビューやステレオのオフアクシス投影（非XR）に使うArrayCamera／StereoCamera

重要：camera、webxr、postの使い分け

トピックスキル
標準的なデスクトップ投影threejs-camera
XR参照空間、IPDthreejs-webxr
composer内のオフスクリーンパス用カメラthreejs-postprocessing

トリガーとなる語句の例：

  • 「PerspectiveCamera」、「OrthographicCamera」、「CubeCamera」、「aspect」、「near」、「far」
  • 「パースペクティブカメラ」、「正投影」、「立方体カメラ」

このスキルの使い方

  1. パースペクティブ：aspectを幅／高さに設定し、リサイズ時に更新します（threejs-renderersのワークフロー例）。
  2. 正投影：CADや2.5Dビューでは、ワールド単位でleft/right/top/bottomを定義します。
  3. near/far：シーンの範囲を収めつつ、深度精度とのバランスを取ります。フォグとの関係はthreejs-scenesを参照してください。
  4. CubeCamera：反射プローブの位置に配置します。シーンが十分に静止しているタイミングでupdateを呼び出し、ドキュメントに従ってレンダーターゲットの出力を使用します。
  5. Stereo/Array：高度な機能です。目のパラメーターについてはドキュメントを参照し、XRについてはthreejs-webxrに案内します。
  6. 投影行列：パラメーターを編集した後にupdateProjectionMatrix()を呼び出します。
  7. ヘルパー：CameraHelperはthreejs-helpersにあります。

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

ドキュメント一覧（公式）

ドキュメントのセクション代表的なリンク
カメラ（索引）https://threejs.org/docs/#Cameras
カメラhttps://threejs.org/docs/Camera.html
パースペクティブhttps://threejs.org/docs/PerspectiveCamera.html
正投影https://threejs.org/docs/OrthographicCamera.html
キューブhttps://threejs.org/docs/CubeCamera.html
マルチビューhttps://threejs.org/docs/ArrayCamera.html
ステレオ（非XR）https://threejs.org/docs/StereoCamera.html

対象範囲

  • 対象： コアのカメラクラスとパラメーター、キューブ／アレイ／ステレオの概要。
  • 対象外： WebXR参照空間、目の行列、セッションのライフサイクル（threejs-webxr）、シャドウマップカメラの調整（threejs-lights）、composer内のパス専用カメラ（threejs-postprocessing）。

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

  • リサイズ後にaspectが正しくないと画像が引き伸ばされます。必ずキャンバスと同期してください。
  • 大きなワールドでnearが小さすぎると、深度精度が低下します。
  • 毎フレームCubeCameraを更新すると処理負荷が高くなるため、パフォーマンスのために更新頻度を抑えてください。

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

カメラのパラメーターとCubeCameraの更新動作は、three.js docsのCamerasセクションに準拠しています。WebXRでは異なる投影経路を使用します。ユーザーがヘッドセットや参照空間に言及した場合は、threejs-webxrに案内してください。

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

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

  1. 該当する場合は、PerspectiveCamera、OrthographicCamera、またはCubeCameraへのリンクを含めます。
  2. 該当する場合は、リサイズとthreejs-renderersのsetSize／DPRのパターンを組み合わせて説明します。
  3. XR／WebXRManagerに関する質問は、レンダラーについて一言触れたうえでthreejs-webxrに案内します。
  4. 内部パラメーターを変更した後はupdateProjectionMatrix()を呼び出すことに触れます。
  5. ライトについて説明する際にシャドウフラスタムのデバッグに言及する場合は、threejs-helpersのCameraHelperを使用します。

参考資料

キーワード

英語： perspectivecamera, orthographiccamera, cubecamera, projection, aspect, near, far, three.js

中国語： カメラ、パースペクティブ、正投影、投影、近クリップ、遠クリップ、CubeCamera、three.js

コメント

Markdown 対応