Matterport SDKについてのまとめ
Yuma Ito公式ドキュメントページまとめ
Yuma ItoURLパラメータを追加することでUIをカスタマイズできる。
-
lang=ja: UIが日本語になる -
qs=1: クイックスタート。モデルを開いたときにインサイドビューから始まる。
など多数。
Yuma Itoスタート位置を設定する方法
Matterportアカウントが必要。
Yuma ItoMattertagを作成する方法。
- タイトル
- 説明文
- リンク
- タグの色
- 非表示/削除
などがができる。
Yuma Ito3Dモデル作成のための撮影方法について
Yuma Ito（説明文を一部翻訳）
API & SDKについて
Showcase SDK
SDKは3Dプレイヤーに関する体験をカスタマイズして高めることができ、WebブラウザでMatterport 3D空間に導くwebGLアプリケーションです。例はこちらをクリックしてください。あなたのページでSDKコマンドを利用すると、以下のようにしてユーザー体験を高めることができます。
- 空間内におけるユーザーナビゲーションに関する詳細なイベントを聞く。（ユーザーの場所、位置、アングルなど）
- 内容やオーバーレイを追加
- ナビゲーション要素の追加
- ミニマップを追加
- 特定の位置へユーザーを増やす
- カメラのコントロール
- Matterタグに関する情報の収集と、Matterタグの検索のような動作を行うために情報を利用する
- Matterタグの作成、編集、削除、移動
※SDKはクライアントサイドのみです。データは私たちのデータストアにプッシュされず、永続的ではありません。（あなた側で情報を記録/保管しない限り）
SDKドキュメントはこちらから確認できます。
Model API
Model APIはあなたのバックエンドシステムから私たちのものに繋ぐために使われる直接的なシステム間接続であり、データをデータを交換し特定のアクションをスペース内で行うことができます。
- SDKとは異なり、APIを介してMatterportデータストアに直接働きかけるので、これらのアクションやデータ交換は永続的です。
Model APIのドキュメントはこちら。←GraphQL
Yuma Itoshowcase SDKについて
SDK for Embeds
SDKを使うと開発者は以下のことができます。
- 3D Showcaseをウェブアプリケーションから制御するアクションを実行します。例えば、ユーザーがWebページ上のボタンをクリックするとMatterport空間内で特定の位置に移動します。
SDK Bundle
このSDKは SDK for embedsの拡張機能であり、Matterportモデルとの深いサードパーティーインテグレーションのフレームワークを提供します。3Dエンジンやレンダラー、シーングラフなどに直接アクセスできます。
SDK Bundle
Yuma ItoMatterportの機能を拡張するサービス？もある。
MP/embed
Yuma Ito- ミニマップの表示
- Mattertagのリスト
- Google Analiticsの利用
など。
日本語をサポートしているかは分からない。
Yuma ItoShowcase SDK for Embedsを利用するために行ったこと
Yuma Ito- SDKを利用するために（SDK Keyを取得するために）Matterportアカウントを作成。無料アカウントがある。
- Settings > Developer Tools > SDK Key ManagementからPublic Keysを作成。
無料アカウントでは、localhostからのみアクセスできるキーに制限されている。
Yuma ItoライブラリとMatterportスペースのインストール
- htmlファイルの
<head>タグに以下を挿入
<script src='https://static.matterport.com/showcase-sdk/2.0.1-0-g64e7e88/sdk.js'></script>
-
<iframe>tagを挿入
<iframe width="853" height="480"
src="https://my.matterport.com/show?m=SxQL3iGyoDo&play=1"
frameborder="0" allowfullscreen allow="vr"
id="showcase_iframe"></iframe>
src属性は、https://my.matterport.com/show?m={モデルのID}?{パラメータ}となっている。
パラメータはURL Parameters – Help Centerを参照。
Yuma ItoSDKの型定義ファイルはないが、パラメータは公開されている
Yuma ItoMatterport showcase SDKを用いたAngularアプリを作ってみました。
- Showcaseの表示
- clickイベントを検知してクリックしたタグのIDを表示
- hoverイベントを検知してホバーしたタグのIDを表示