The eleVR webVR Boilerplate
This is the standard ThreeJS-based boilerplate for webVR currently being used by the eleVR team. It is a starting point for web-based VR experiences that work with the Oculus Rift as well as with smartphones + a google cardboard or similar phoneVR headset. There is also a non-VR fallback for experiencing the content without a VR device.
The boilerplate also has gamepad and keyboard controls that are on by default.
Controls:
Click (or tap) to enter full-screen VR mode.
Navigation Controls:
- WASD + E/Q navigation support for rotation.
- Arrow key navigation support for moving the location of the camera.
- Gamepad joystick navigation controls.
- Orientation control with a VR headset OR mobile phone.
Explanation of Files:
index.html
- A simple html file with a very basic example THREE.js experience built in.
- When using this as a boilerplate, you would generally only modify this file.
- WebGL helper library that lets you create webGL experiences using JS. PhoneVR.js (special thanks to Andrew Lutomirski for helping with this)
- Detects whether a device with orientation is being used and turns phone orientation data into a quaternion.
VRControls.js (forked from MozVR version)
- THREE.js controls which take advantage of the WebVR API.
- Keyboard controls
- Gamepad controls
- Pulls in phoneVR information for phoneVR controls
VREffect.js (forked from MozVR version)
- THREE.js effect which renders a scene with two cameras in it side by side when in webVR or on a phone for VR viewing, but just a single camera full-screen as a fallback for non-VR viewing.
Acknowledgements
This boilerplate is based on Mozilla's boilerplate
It has been developed with the advice, help, and contributions of a great many people including (but not limited to) the other members of the eleVR team (Emily Eifler and Vi Hart), Andrew Lutomirski, and Henry Segerman.