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.
If you would like to use this boilerplate as a starting point for your own VR projects, check out brief tutorial for doing so at the bottom of this page.
Click (or tap) to enter full-screen VR mode.
- 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:
- A simple html file.
- By default, it points at demoWebVR.js, which contains a demo webVR experience
- You can change it to point at blankWebVR.js, which is clearly annotated for creating your own experience
- A basic demo THREE.js experience is written into this file, you can use it as a guideline.
- A clearly annotated boilerplate file that you can add code to to create your own webVR project from scratch
- 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.
WebVR Basic Tutorial
- Obtain a webVR browser (we recommend Firefox Nightly) for your OS 1a. Also get the appropriate Oculus runtime if you are going to use with an Oculus
- If you are using Firefox Nightly, enable webVR in your browser
- enter "about:config" into your address bar
- use the search tool to find "vr"
- then set "dom.vr.enabled" to "true"
- Edit demoWebVR.js in the webVR-boilerplate/js folder to create your scene.
- It has some sample code already to get you started
- We assume that you will use three.js, a wrapper around webGL to create your VR project. You can find some great docs for three.js here: http://threejs.org/docs/
- Always Remember: Google is your friend! 3a. OR change index.html to point at blankWebVR.js in the webVR-boilerplate/js folder and create your scene from scratch
- blankWebVR.js contains no sample code, but you can always cross reference demoWebVR.js if you would like some
Bonus: Set up your computer to serve up your website to localhost, this allows you to do things like experiment with image and video textures and test-run your stuff on your mobile device. The fastest and simplest is probably python simple server (default port is 8000):
% python -m SimpleHTTPServer [port]
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.