mcpField
T
threejs-webxr

threejs-webxr

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

threejs-webxr について

three.js の WebXR 機能を扱う開発者やコーディングエージェント向けのスキルです。セッション設定、開始ボタン、コントローラー、ハンドトラッキング、推定ライティングを扱い、ブラウザーやデバイスの制約にも触れます。

主な機能

  1. 01XR セッションとレンダラーの設定
  2. 02VR・AR の開始ボタン
  3. 03コントローラーモデルと入力
  4. 04オプションのハンドトラッキング
  5. 05AR 向け推定ライティング
  6. 06セッション終了と描画ループの処理

活用シーン

  1. 01three.js シーンに VR・AR の開始機能を追加
  2. 02XR コントローラーとゲームパッド入力の処理
  3. 03対応環境でハンドモデルを有効化
  4. 04XR セッション後に通常の描画へ復帰

インストール

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

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

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

同梱ファイルagents/openai.yamlexamples/workflow-xr-button.md

詳細

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

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

  • VR/AR への移行、navigator.xr、参照空間、レンダラー経由のセッション requestAnimationFrame ループ
  • 例にある VRButton、ARButton、XRButton の作成パターン
  • コントローラーモデル、ハンドトラッキングメッシュ、推定された実世界のライティングプローブ

重要：webxr と renderers と camera の使い分け

トピックスキル
レンダラーでの XR の有効化、サイズ設定threejs-renderers（基本）＋ threejs-webxr（セッション）
デスクトップの投影threejs-camera

トリガーとなるフレーズには、次のものがあります。

  • 「WebXR」、「VRButton」、「ARButton」、「XRControllerModelFactory」、「ハンドトラッキング」
  • 「バーチャルリアリティ」、「拡張現実」、「没入型」

このスキルの使い方

  1. XR の利用可否に関する HTTPS 要件と機能検出。
  2. ボタン：公式のボタンファクトリーを使って DOM エントリーポイントを作成し、セッション終了を処理します。
  3. レンダラー：ドキュメントに沿って renderer.xr.enabled = true のパターンを使用し、XR ループには setAnimationLoop を優先します。
  4. コントローラー：ファクトリーを使ってモデルをアタッチし、フォールバックを用意してゲームパッドの軸とボタンを慎重に読み取ります。
  5. 手：ランタイムが対応している場合は、オプトインでハンドモデルを使用します。パフォーマンスへの影響に注意してください。
  6. ライティング：AR のリアリティを高める XREstimatedLight は、threejs-lights と慎重に組み合わせます。
  7. 終了：セッション終了時に、XR 以外のレンダーループとリサイズ処理を復元します。

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

ドキュメントの構成（公式）

ドキュメントのセクション代表的なリンク
Renderer XRhttps://threejs.org/docs/WebXRManager.html
Webxr addonshttps://threejs.org/docs/VRButton.html
Webxr addonshttps://threejs.org/docs/ARButton.html
Webxr addonshttps://threejs.org/docs/XRControllerModelFactory.html

対象範囲

  • 対象： ドキュメント化された WebXR マネージャーと、ボタン／コントローラー／手／平面用にリストされたアドオン。
  • 対象外： ストアへの提出、OpenXR ランタイム固有の詳細、カスタムネイティブレイヤー。

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

  • デスクトップでのテストには XR エミュレーションまたはハードウェアが必要です。問題が発生しても適切に処理してください。
  • 参照空間が一致していないと床のオフセットが発生します。stage と local-floor を検証してください。
  • 負荷の高いポストプロセスチェーンでは VR のフレーム時間を満たせない場合があります。十分にプロファイリングしてください。

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

WebXR のエントリーポイントは、three.js docs の Addons → Webxr とレンダラーの WebXRManager にあります。ブラウザーやデバイスによって機能は異なります。可能であれば、回答では公式の例の名前と three.js のバージョンを明記してください。

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

このスキルに基づいて回答する場合は、次の点を優先してください。

  1. 関連する WebXRManager、VRButton、ARButton、またはコントローラーファクトリーへのリンクを含めます。
  2. XR のレンダーループには、threejs-renderers と組み合わせた setAnimationLoop のパターンを使用します。
  3. XR の視点に、デスクトップ用 threejs-camera の投影に関する説明を重複して適用しないようにします。
  4. 参照空間の選択（local-floor など）について、ドキュメントへのリンクとともに概要を説明します。
  5. VR では threejs-postprocessing がパフォーマンスに及ぼす影響について注意を促します。

参考資料

キーワード

英語： webxr、vr、ar、xr session、controller、hand tracking、three.js

中国語： WebXR、VR、AR、VRButton、コントローラー、ハンドトラッキング、没入型、three.js

コメント

Markdown 対応