vr-components/css-vr-boilerplate

Name: css-vr-boilerplate

Owner: vr-components

Description: Getting started with VR CSS

Created: 2015-07-16 01:04:36.0

Updated: 2017-09-29 21:33:50.0

Pushed: 2015-08-05 23:51:17.0

Homepage: null

Size: 2768

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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:

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

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

Needs work

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