はじめに
RealityConnect Embedを使うと、インタラクティブでライブなRealityTwinビューアを自社のWebアプリケーションに直接配置できます。ツインはiframe内でレンダリングされ、軽量なJavaScript SDK（@prevu3d/realityconnect-embed）がページからのプログラム制御を可能にします。これにより、ユーザーは既に使用しているツールを離れることなく、没入感のある3Dコンテキストを得られます。
embedの構成
Section titled “embedの構成”開発を始める前に知っておくべき設計上の選択がいくつかあります。
- ページが制御する素のビューア。 埋め込まれたツインは組み込みのインターフェースを持たない3Dビューアです。ヘッダー、サイドバー、メニュー、ツールバーはありません。周囲の枠組みはすべてアプリケーションが所有し、SDKを通じてツインを操作します。
- RealityConnect API経由で認可される。 各embedセッションは組織のOAuth認証情報を使って認可されます。匿名の埋め込みはできません。バックエンドは、指定したツインに対する署名付きで短命のembed URLを要求します。
- SDKがビューアを読み込み計装する。 ページがそのURLをSDKに渡すと、SDKはiframeを挿入し、ツインとの安全な双方向チャネルを確立します。
- ページがツインを操作する。 ビューアが準備完了を通知すると、SDKコマンドが利用可能になり、ツインの操作（ナビゲーション、ポイントオブインタレスト、オブジェクトへのテレポート、共有可能なビューのキャプチャ）や、埋め込まれたシーンのライブ状態の購読ができます。
- RealityConnectの視覚レイヤーである。 RealityConnect APIがシステムを接続してアクセスを認可する一方、RealityConnect Embedはツインをレンダリングし、フロントエンドのコードに公開します。
各要素の連携
Section titled “各要素の連携”embedセッションを機能させるために、3つのコンポーネントが連携します。
- バックエンドがClient CredentialsフローでRealityConnect APIに対して認証し、特定のツイン用に短命のembedセッションを作成するようAPIに要求します。OAuthのクライアントシークレットが存在するのはこの場所だけです。
- フロントエンドはバックエンドからセッション値を受け取り、SDKに渡します。SDKは署名付きembed URLを指すiframeを挿入し、それとの安全な
postMessageチャネルを開きます。 - 埋め込まれたツインは3Dシーンをレンダリングし、ページから送られたコマンドを実行し、ライブ状態（選択中のオブジェクト、現在のカメラモード、エンコードされたビューなど）をストリームで返します。
embedが公開するもの
Section titled “embedが公開するもの”SDKは、シーンを操作する（カメラナビゲーション、ポイントオブインタレスト、オブジェクトテレポート、ビュー共有、スクリーンショット）ための型付きAPIと、ツインから返ってくるライブ状態を購読する手段をページに提供します。完全なサーフェス（namespace、アクション、observable、エラーコード）はSDKのREADMEに記載されています。
以下の表は、embedが現在カバーするものとしないものをまとめたものです。新しい機能は定期的に追加されるため、これはあくまでスナップショットとして扱ってください。
| 機能 | embedに含まれる？ | 備考 |
|---|---|---|
| 3Dシーンのレンダリング | はい | RealityTwinの完全な閲覧体験。 |
| カメラナビゲーションモード | はい | 透視投影、正投影、フォトスフィア、サードパーソン。 |
| ポイントオブインタレスト（表示・作成・編集） | はい | ポイントオブインタレストの作成、編集、配置。 |
| オブジェクトの選択と「テレポート」 | はい | 特定のビジネスオブジェクトへカメラを移動します。 |
| 共有可能なビューのリンク | はい | 現在のカメラをコンパクトな文字列としてエンコードし、後で任意のページ読み込み時に復元します。 |
| スクリーンショット | はい | 現在のビューをPNGバイトとしてキャプチャします。 |
| ライブ状態の購読 | はい | 選択、ホバー、カメラモード、ポイントオブインタレストのツール状態などを監視します。 |
| 組み込みのツインUI（メニュー、パネル、モーダル） | いいえ | すべてのインターフェース要素はホストページが提供します。 |
| 編集機能（下書き、測定、ゾーン、RealityPlan Projects、CAD検査） | いいえ | これらは完全なRealityTwinアプリケーションに残ります。 |
一般的なユースケース
Section titled “一般的なユースケース”- レコードと並べて3Dコンテキストを表示したいアセット管理・検査プラットフォーム
- バーチャルツアーやeラーニング体験
- 埋め込み可能でナビゲート可能なデジタルツインの恩恵を受けるあらゆるWeb製品
次のステップ
Section titled “次のステップ”- セットアップ：認証し、SDKをインストールして、最初の埋め込みツインを読み込みます。
- RealityConnect API：embedの背後にある認証・データレイヤー。
- ライブ例：エンドツーエンドで確認できる動作するVue.js統合。
@prevu3d/realityconnect-embed：ソースリポジトリ