Using the Babylon.js viewer with WebVR and Windows Mixed Reality home

The Babylon.js viewer gives you an easy declarative approach to display 3D models on a web page. Simply point to a glTF file for the 3D model and the viewer will give you an default 3D model viewing experience out of the box.

<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js" />
<babylon model="model.gltf"></babylon>

Click on Run Pen above to view CodePen example of displaying a 3D model on a webpage

You can also enable a VR viewing experience by adding the <vr> tag to view the model on any device/browser that supports WebVR. To display the VR button on the viewer set the hide-vr parameter for the viewer’s navigation bar to false. Users can now view the model on a webpage and click the VR button to view the model in VR.

<vr></vr>
<templates>
    <nav-bar>
      <params hide-vr="false"></params>
    </nav-bar>
</templates>

Click Run Pen to view example of 3D Model in VR using WebVR

The WebVR example shows you how you can view the model exclusively. If you happen to be using Windows Mixed Reality devices then in addition to viewing the model in exclusive WebVR mode you can also place the 3D model in Windows Mixed Reality home as decorations.

To add models to Windows Mixed Reality home simply pass in the url to the glTF file as a link with the protocol handler.

<a href="ms-mixedreality:addModel?uri=https://models.babylonjs.com/boombox.glb">

Click Run Pen to view example of adding 3D models to Windows Mixed Reality Home

Now you can click on the Mixed Reality Button in the viewer and add the model you are viewing on the web page to Mixed Reality Home. The same protocol handler also works on Hololens, just make sure that the model you are viewing is simple enough to meet the triangle count limitations described here.

Using the Babylon.js viewer you can easily display 3D models on web pages and if you happen to be viewing the web page on Mixed Reality headsets you can extend the viewer to take advantage of the device specific APIs.

Saurabh Bhatia — Babylon.js Team

Saurabh Bhatia (@iamSBTron) | Twitter