VR CSS Boilerplate

Thin abstraction on top of VR CSS APIs that let you focus on setting up your scene.

The library provides:

1. Camera, viewport and world origin setup
2. VR Devices detection and fullscreen and zero sensor mechanisms.
3. Mouse camera lookup so you can create VR content without having a headset.
4. Head orientation tracking if an HMD is available.

How to use it:

No time for reading? Just look at the example. You can zero the sensors by pressing 'z'

Steps:

0. Import the cssvr.js and cssvr.css files in your site.
1. Create a div element with id "scene"
2. Setup your elements with a class "vr" and use regular 3d transforms to position them in space.

<div id="scene">
  <div class="vr button left">WebVR</div>
  <div class="vr button middle">WebVR</div>
  <div class="vr button right">WebVR</div>
</div>

Needs work

Three.js is a dependency just for the Math functions. I postpone a more nimble solution until the library proves its value.