WebXRの開発体験向上！pmndrsに加わったR3FビジュアルエディターTriplexを試す

はじめに

R3Fを使ってWeb3Dシーンの開発をしているとき、3Dモデル同士の位置関係の調整や実機でのWebXRアプリのデバッグに苦労したことがある方もいるのではないでしょうか。

R3Fは、Reactで宣言的に3Dシーンを構築でき、コードだけで完結できるため、Web開発者にとって馴染んだ開発体験で実装ができます。 しかし、コードだけで完結できるがゆえに、配置した3Dモデルの位置調整には苦労します。

UnityでXR開発をされている方であれば、Unity Editor上で視覚的にオブジェクトの位置関係を調整できますが、R3Fにはそのような視覚的エディタが標準では用意されていません。

また、WebXRの実機デバッグの際も、SSL対応されたページを用意し、実機でアクセスして動作確認を行う必要があり、手間がかかります。

WebXR requires a secure context, which means the page must be served over HTTPS. — Triplex WebXR

これらの課題を解決するツールが、Triplexです。

最近このTriplexが、正式にR3Fの開発元であるpmndrs(ポイマンドレス)に加わり、完全にオープンソース化されたので、R3Fエコシステムの一部としてより信頼できるツールになりました。

本記事では、このTriplexについて紹介していきます。

Triplexとは？

Triplexは、R3Fのコードベースを維持しながら、Reactコンポーネント単位でWeb3Dシーンを視覚的にプレビュー・編集できるツールです。

Triplex is your visual workspace for building React / Three Fiber components. Build 2D and 3D components without coding using its visual and input controls. — Triplex公式サイト

VSCode拡張として提供されており、既存のプロジェクトにconfigファイルを用意するだけで設定が可能です。
※2025年10月末ごろはデスクトップアプリケーション版も提供されていましたが、現在はVSCode拡張版のみの提供となっているようです。

{
  "$schema": "https://triplex.dev/config.schema.json",
  "files": ["../src/levels/*.tsx", "../src/app.tsx"],
  "provider": "./providers.tsx",
  "experimental": {
    "xr_editing": true,
    "debug_api": true
  }
}

設定後Reactコンポーネントを開くと、Open in Triplexボタンが表示され、クリックするとエディタの右側にTriplexのUIが表示されます。

この右側のUIがTriplexです。 Web3Dの開発時にこのGUIを活用することで、より直感的にWeb3Dシーンの構築が可能になります。

R3Fエコシステムへの参加

Triplexは2023年ごろリリースされましたが、VSCode拡張機能としての提供は2025年からです。

2025年10月8日のTriplex公式ブログにて、R3Fエコシステムを管理しているPoimandres Collective(ポイマンドレス、通称pmndrs)にTriplexが加わったことが発表され、同時にTriplexが完全にオープンソース化されました。

Triplex has moved into the Poimandres Collective and is now completely open source!

この発表により、TriplexはR3Fエコシステムの一部として認識され、より信頼できるOSSとして期待できます。

それでは、実際にTriplexを試してみましょう。

クイックスタート

まずはTriplexを手元で動かしてみましょう。

npx create-triplex-project@latest --template point-and-click

Triplex自体は、先述のとおりVSCode拡張をインストールし、configファイルを用意するだけで導入できます。 すでにR3Fプロジェクトをお持ちの方は、そちらに導入してみてください。

※テンプレートプロジェクトのコード詳細については公式ドキュメントを参照してください。

これでTriplexを使う準備ができました。次のセクションでは、Triplexの主要機能を詳しく見ていきます。

Triplexでできること

1. GUIとR3Fコードベースを双方向に編集できる

R3Fコードベースで編集した内容がGUI側（Triplex）に反映されるだけではなく、GUI側で編集した内容がR3Fコードベースに反映されます。 よって、インタラクティブなWeb3DシーンをR3Fコードベースで全て管理しつつ、部分的にGUI側で編集することが可能です。

比較対象としてUnityエディタがありますが、UnityエディタはGUI側で編集した内容がC#コードベースに反映されません。変更はバイナリファイルとして記録されるため、人間が読み書きしやすい形式ではありません。

一方、TriplexはUnityエディタほど高機能ではなく、各オブジェクトの座標・角度・スケール等を編集する程度の機能ですが、R3Fコードベースと双方向で編集できる点が非常に優れています。

また、glb形式などのカスタム3Dモデルも同様に編集可能です。2025年12月現在はドラッグ＆ドロップ等の機能には対応しておらず、R3Fコード側で読み込み処理を書く必要があります。

2. WebXRアプリを実機で簡単にデバッグできる

Triplexには、WebXRアプリを実機で簡単にデバッグできる機能があります。 冒頭で触れたとおり、WebXRの実機デバッグにはSSL対応ページの用意が必要で、手間がかかります。 Triplexでは、SSL対応されたページを自動で用意してくれるため、実機でのデバッグが非常に楽になります。

TriplexのWebXR機能を使うには、まずはconfigファイルに以下の設定を追加します。

{
  "experimental": {
    "xr_editing": true
  }
}

その後、Triplexエディター右上のOpen in WebXRボタンをクリックします。 @react-three/xrパッケージがインストールされていない場合は、インストールを促すダイアログが表示されるため、指示に従いインストールします。

@react-three/xrパッケージをインストールして再度Open in WebXRボタンをクリックすると、3つのWebXRデバッグオプションが表示されます。

• Send To Meta Quest: Meta Questに直接送信してデバッグできます。
• Open in Browser Emulator: ブラウザ上でWebXRエミュレーターを起動してデバッグできます。
• Copy WebXR Link: SSL対応したWebXRアプリのURLを発行し、そのURLをコピーします。このURLに実機でアクセスしてデバッグできます。

Send To Meta Quest: Meta Questに直接送信してデバッグ

Meta Quest等にリンクを送信できる機能ですが、動作が不安定なことが多いため、個人的には非推奨です。

Open in Browser Emulator: ブラウザ上でWebXRエミュレーターを起動してデバッグ

@react-three/xrパッケージの内部で、Immersive Web Emulation Runtimeを利用しており、PCブラウザ上でWebXRアプリをエミュレーションできます。
最低限の動作確認はできますが、実際のユーザー体験とは異なる場合があるため、最終的な動作確認は実機で行う必要があります。

Copy WebXR Link: SSL対応したWebXRアプリのURLを発行し、そのURLをコピー。実機でアクセスしてデバッグ

ボタンをクリックするだけで、SSL対応したWebXRアプリのURLが発行されます。 まずはPCでURLにアクセスし、QRコードを表示します。

表示されたQRコードを、HMD上から読み取る必要があります。Meta QuestにはQRコードリーダーが標準搭載されていないため、sawa-zenさんが開発したXRQRというHMD上で動作するQRコードリーダーWebアプリを使用します。

読み取れれば、Meta Quest Browserで開くことができます。 空間データ等へのアクセス許可を求められるため、許可し、Enter VRボタンをクリックすれば、WebXRセッションが起動します。

以下のように、WebXRセッション内でもオブジェクト等の編集が可能です。
※2025年12月25日現在、WebXRセッション内での編集内容はR3Fコードベースには反映されません。

- 左コントローラ
  - 視点の移動: ジョイスティック
- 右コントローラ
  - 視点の回転: ジョイスティック
  - オブジェクトの選択/解除: トリガーボタン
  - オブジェクトの編集方法切り替え(移動/回転/スケール): Aボタン
※右コントローラのみレイポインターが表示され、オブジェクトをホバーすると触覚フィードバック(振動)が返ってくる

まとめ

• GUIとR3Fコードベースを双方向に編集できる(コンポーネント単位で管理できる点もGood)
• WebXRアプリを実機で簡単にデバッグできる
• npmパッケージとしてインストールするわけでなく、あくまでVSCodeの拡張機能として提供されているため、導入が簡単
• R3Fコミュニティに正式に入ったので、今後の安定性や機能拡張に期待できる

Triplexは、R3F上のWeb3D/WebXR開発のワークフローを向上させる優れたツールです。
Unityエディタのような高機能なエディタには及びませんが、R3Fコードベースを常に最新の状態に保ちながら、GUIから直感的に3Dシーンを編集できる体験は唯一無二と言えるでしょう。

さらに、WebXRアプリの実機デバッグが非常に楽になる点も大きなメリットです。 現状、最も手軽にWebXRセッションで確認できる方法だと思います。

また、今回紹介した他にも、コンポーネントの引数をGUIで編集できたりと、様々な便利機能が備わっています。
ぜひR3FでのWeb3D/WebXR開発をされている方は、Triplexを試してみてください。

各種公式リソース

• Triplex公式ドキュメント:

• Triplex GitHubリポジトリ:

• Triplex VSCode拡張機能:

関連コンテンツ

この記事の内容は、2025年10月末に収録したWebXR JPポッドキャストの内容をまとめたものです。

興味のある方はWebXR JP Discordサーバーにもご参加ください。

補足: WSL環境での設定

WSL環境でTriplexを使用する場合、WSL側で追加の設定が必要なようです。
詳細は以下の記事を参照してください。

謝辞

WebXR JPのDiscordサーバーで、はがさんにTriplexの検証を手伝っていただきました。
ありがとうございました！