API Example

施設内覧風味なAPIリクエスト
部屋A
部屋B
俯瞰
備考

不動産や施設の内覧用途でXRコンテンツを使う場合に部屋や俯瞰視点を切り替えるようなイメージ。
Web-XR API では Editor で作成した演出をほぼ呼び出すことができるので、この例のようにカメラ視点変更を親ページのHTML要素のクリックから行うこともできる。
また、Viewer 自体を過度に装飾しておらず極めてシンプルな形としているのは、親ページを担当しているクリエーターがXRコンテンツを自由に装飾できることを意図している。
型にはまったパッケージではなく、クリエーターの意向を反映できる自由度が Web-XR Studio の特徴。

Example Code

<head>
    <script src="https://web-xr.studio/jp/api"></script>
</head>
<body>
    <!-- XRコンテンツ -->
    <div class="xrstudio" data-id="{xrID}" data-option="noConfig, onlyPageFull"></div>
    <!-- パネル部 : xrs-wide クラスにはページフル時に xrs-wide--on というモデファイアが付加される -->
    <ul class="panel__wrapper xrs-wide">
        <li id="panel_1" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_2" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_3" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_4" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_5" class="panel xrs-wide"><img src="xxx..jpg"></li>
        <li id="panel_6" class="panel xrs-wide"><img src="xxx..jpg"></li>
    </ul>
    <!-- メッセージ部 -->
    <div id="msg"></div>
</body>
<script>
    let i;
    const $msg = document.getElementById('msg');
    const panels = [0];
    const msg = ['上のパネルをクリックしてください。',
    '廊下A', 'リビングA', '廊下B', 'リビングB', '廊下C', '俯瞰'];
    $msg.textContent = msg[0];
    for (i = 1; i <= 6; i++) {
        panels.push(document.getElementById('panel_' + i));
        panels[i].addEventListener('click', (e) => {
            const _id = e.target.id.replace('panel_', '');

            $msg.textContent = msg[_id];
            xrsApi[0].postMessage({act: 'case', id: _id}, '*');
        });
    }
</script>

<style>
    // ページフル時に xrs-wide クラスがあるタグに xrs-wide--on が追加される。
    // panel__wrapper と同階層にあるため、ドットがつながる記述になっている点にも注意
    //
    // xrs-wide　-> xrs-wide--on : ページフル時に全て適応
    // xrs-wide-# -> xrs-wide-#--on : 複数のXRコンテンツを設置した場合、#を付番に変えて個別対応
    .panel__wrapper.xrs-wide--on {
        position: fixed;
        bottom: 5%;
        left: 25%;
        width: 50%;
        z-index: 10000;
        height: 270px!important;
    }

    .panel.xrs-wide--on {
        width: 48%;
        border: 1px solid;
        border-radius: 5px;
        margin: 2px 1%;
        height: 130px;
    }
</style>