webvr-ui

WebVR UI

A javascript library allowing easily to create the Enter VR button a WebVR site. It will automatically detect the support in the browser and show correct messages to the user. The intention for the library is to create an easy way to make a button solving as many of the common use cases of WebVR as possible, and show some best practices for how to work with WebVR.

The library also supports adding a Enter Fullscreen link that allows entering a mode where on desktop you can use the mouse to drag around, and on mobile rotate the camera based on the gyroscope without rendering in stereoscopic mode (also known as Magic Window)

Examples

Library Usage

Include WebVR UI

Get the library either by cloning, downloading or installing through npm npm install webvr-ui

Include the ES5 transpiled library in a script tag

<script src="/webvr-ui/build/webvr-ui.min.js"></script>

or include it in your ES2015 code

import * as webvrui from 'webvr-ui';

The constructor for the button needs the dom element of the WebGL canvas. To use it together with the THREE.WebGLRenderer, do something like this

var renderer = new THREE.WebGLRenderer();

var options = {}
var enterVR = new webvrui.EnterVRButton(renderer.domElement, options);
document.body.appendChild(enterVR.domElement);

A-Frame

To use the button in A-Frame, include the library as above, and add webvr-ui to the scene.

<a-scene webvr-ui>
    ...
</a-scene>

This will disable the default UI and add a Enter VR button to the document DOM. All the styling and text options bellow are also available.

Options

These are the supported options in EnterVRButton. All options are optional.

Styling

Text

Function Hooks

Events

The following events will be broadcasted by EnterVRButton, and can be subscribed to using the function .on([event]) on the button.

Functions

These are some of the functions that can be called on the EnterVRButton

Development

To run the example, install dependencies

npm install

and start the watcher and server (available on localhost:3000/examples/basic.html)

npm start

To build the transpiled es5 version of the library, run

npm run build

and the library will be build to build/webvr-ui.js