Viewer API

Realize 3D expression on your website

Viewer API installation

Installation using the Viewer API is based on the API's support for full screen, AR/VR compatible browser determination, Furthermore, it automatically handles the appropriate loading using Intersection Observer API. Therefore, it is a very easy installation method.
You can also operate XR content externally via the API.

NOTE: Appropriate loading means that if the 3D content of XR Studio is not included in the first view, it will not be loaded unnecessarily, and it will be judged after the scrolled 3D content is visualized. I will. So no wasted traffic.

On your computer, move to the XR Studio 3D Unit you want to embed.
From the HTML code displayed in [Installation Web Viewer API], copy the script tag to be placed in and the div tag to be placed anywhere in .
Paste the .xrstudio tag where you want to display the XR content in the HTML of your blog or website.
If you want to set a link to transition to AR or VR, insert .xrs_ar or .xrs_vr in the A tag class.
This class automatically determines the XR/VR compatible environment and displays or hides the link.
(In the future, we plan to auto-insert the appropriate links for the href attribute of A tags that have these classes. Currently, please enter them manually.)
When operating XR contents from the outside, send window.postMessage() to xrsApi[].
For details, here

API installation example:

<head>
    <!-- Load API file in head tag -->
    <!-- Insert Timestamp etc. so that it will not be cached. This example is for PHP.
        There is no problem even if there is no insertion, but it is preferable that preventing cache as much as possible. -->
    <script src="https://web-xr.studio/jp/api"></script>
</head>
<body>
    <!-- Place the following tags in the position where
         you want to display the WebXR content in the body tag -->
    <div class="xrstudio" data-id="[your xrID]"></div>
    <!-- Place a VR Viewer link anywhere in the body tag.
         The display attribute of the xrs_vr class is
         changed to determine the handset compatibility.-->
    <a class="xrs_vr" href="https://web-xr.studio/jp/vr/[your xrID]">Link to VR</a>
    <!-- Place a AR Viewer link anywhere in the body tag.
         The display attribute of the xrs_ar class is
         changed to determine the handset compatibility. -->
    <a class="xrs_ar" href="https://web-xr.studio/jp/ar/[your xrID]">Link to AR</a>
</body>