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
import WebVRHelper from 'webvr-helper';
let anyVRAvailable = WebVRHelper.checkAvailabilityLoose();
WebVRHelper.checkAvailabilityFull((anyVRAvailable) => {});
...<script src="build/webvrhelper.min.js"></script>
let WebVRHelper = window.WebVRHelper.default;
let anyVRAvailable = WebVRHelper.checkAvailabilityLoose();
WebVRHelper.checkAvailabilityFull((anyVRAvailable) => {});
...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.
git clone https://github.com/axaq/webvr-helper.git
npm install
npm run build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent