3Dコンテンツをもっと見る

Viewer API

あなたのウェブサイトに3D表現を実現させる

Viewer API の設置

Viewer API を利用した設置は、APIがフルスクリーンへの対応から、AR/VRへの対応ブラウザ判定、 さらにIntersection Observer APIを使用した適切な読み込みを自動でハンドリングするため非常に容易な設置方法です。
また、APIを介してXRコンテンツを外部から操作できます。

NOTE: 適切な読み込みとは、XR Studio の3Dコンテンツがファーストビューに含まれていない場合、無駄にローディングを行わず、スクロールされ3Dコンテンツが可視化される状態を判断してからローディングを行います。そのため無駄なトラフィックが発生しません

  1. パソコンで、埋め込みたい XR Studio 3D Unit へ移動します。
  2. [Installation Web Viewer API]に表示されているHTMLコードから内に設置する script タグと内の任意の位置に設置する div タグをコピーします。
  3. ブログやウェブサイトのHTML内のXRコンテンツを表示したい位置に.xrstudioのタグを貼り付けます。
  4. ARやVRへ遷移するリンクを設置する場合、A タグのクラスに .xrs_ar もしくは .xrs_vr を挿入してください。
    このクラスはXR/VRの対応環境を自動判定しリンクの表示非表示を行います。
    (将来的には、これらのクラスがある A タグの href 属性に対し適切なリンクを自動挿入する予定です。現在は手動で入力をお願いします)
  5. XRコンテンツを外部から操作する場合は、xrsApi[]に対してwindow.postMessage()を送ります。
    詳しくはこちら

NOTE: 複数のXRコンテンツを設置したページをローカル環境で実行するとアニメーションフレームが想定より高速に実行されることがあります。これはURLoriginを特定できないためおこる現象です。ネット環境で実行すれば問題はありません。

APIによる設置の例：

<head>
    <!-- head内でAPIファイルを読み込む -->
    <!-- キャッシュされないようTimestampなどを挿入。この例はPHPの場合。
        挿入がなくとも問題はないが、なるべくキャッシュされない策があると好ましい。 -->
    <script src="https://web-xr.studio/jp/api"></script>
</head>
<body>
    <!-- body内の任意の位置へ Web3D Viewer タグを設置
        data-option では "transparent, noConfig, nofull" などに対応。
        それぞれの意味は、背景透過、config非表示, フルスクリーン非表示 -->
    <div class="xrstudio" data-id="[あなたのコンテンツのID]"></div>
    <!-- body内の任意の位置へ VR Viewer リンクを設置。
         端末の対応状況を判断し xrs_vr クラスの display 属性が変更されます。-->
    <a class="xrs_vr" href="https://web-xr.studio/jp/vr/[あなたのコンテンツのID]">VRへのリンク</a>
    <!-- body内の任意の位置へ AR Viewer リンクを設置。
         端末の対応状況を判断し xrs_ar クラスの display 属性が変更されます。 -->
    <a class="xrs_ar" href="https://web-xr.studio/jp/ar/[あなたのコンテンツのID]">ARへのリンク</a>
</body>
この3Dを開く
この3Dを開く
3Dコンテンツをもっと見る