https://github.com/axaq/webvr-helper

A three.js helper library to check and run VR sessions on web with a stereo-effect-view backup.
https://github.com/axaq/webvr-helper

Last synced: about 1 month ago
JSON representation

A three.js helper library to check and run VR sessions on web with a stereo-effect-view backup.

• Host: GitHub
• URL: https://github.com/axaq/webvr-helper
• Owner: axaq
• License: mit
• Created: 2019-07-09T10:46:59.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T23:05:16.000Z (almost 2 years ago)
• Last Synced: 2024-10-01T14:26:11.034Z (about 1 month ago)
• Language: JavaScript
• Size: 1.19 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
WebVR Helper

   

 

#### A three.js helper library to check and run VR sessions on web with a stereo-effect-view backup.


[![Greenkeeper badge](https://badges.greenkeeper.io/axaq/webvr-helper.svg)](https://greenkeeper.io/)

## Features

This library provides features to 

- Check weather VR is available in a loose and synchronous way (you can use this to decide weather to load other VR specific resources)

- Check weather VR is available in a stronger, feature-based and asynchronous way (more reliable)

- Setup necessary components depending on which VR type is available

- Setup necessary callbacks and methods to inform your app about the state of VR sessions

The availability check is done in the following order

- WebXR API

- Legacy WebVR API

- Fallback threejs stereo-effect to simulate VR view for Cardboard-style headsets

## Usage

### npm

```js

import WebVRHelper from 'webvr-helper';

let anyVRAvailable = WebVRHelper.checkAvailabilityLoose();

WebVRHelper.checkAvailabilityFull((anyVRAvailable) => {});

...

```

### self-host

```js

let WebVRHelper = window.WebVRHelper.default;

let anyVRAvailable = WebVRHelper.checkAvailabilityLoose();

WebVRHelper.checkAvailabilityFull((anyVRAvailable) => {});

...

```

### Example code

```js

let container = document.createElement('div');

document.body.appendChild(container);

let scene = new THREE.Scene();

scene.background = new THREE.Color(0x505050);

let camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 10);

scene.add(camera);

let renderer = new THREE.WebGLRenderer();

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.xr.enabled = true;

container.appendChild(renderer.domElement);

window.addEventListener('resize', () => {

    WebVRHelper.onResize();

    renderer.setSize(window.innerWidth, window.innerHeight);

}, false);

// Check VR availability

console.log('Loose sync availability check', WebVRHelper.checkAvailabilityLoose());

// Strong and async feature check

WebVRHelper.checkAvailabilityFull((anyVRAvailable) => {

    if (anyVRAvailable) {

        // setup renderer

        WebVRHelper.postAvailabilitySetup(renderer, THREE.StereoEffect, () => {

            console.log('VR session has changed');

        });

    }

    // start the render

    animate();

});

let animate = () => {

    renderer.setAnimationLoop(render);

};

let render = () => {

    // Render on WebVRHelper if VR is supported

    if (WebVRHelper.isAnyVRSupported()) {

        WebVRHelper.render(scene, camera);

    } else {

        renderer.render(scene, camera);

    }

};

...

```

> **Note:** Check the example in demo folder for a more detailed working example.

## Build

```

git clone https://github.com/axaq/webvr-helper.git

npm install

npm run build

```