Mobile VR Headset Tutorial
Mobile VR Headset Setup:
Hardware Required:
1. Merge Virtual Reality Headset
2. Smartphone with Gyrometer, and Accelerometer
3. Put your phones horizontally into the slot at the top
Software Required:
- VR Compatible programs such as YouTube, and certain games on the Google Play Store
Interactions:
- To do a click interaction, use the buttons at the top of the headset
Mobile VR Development Demo:
Creating and running on Mobile:
1. Install NPM (which is required for getting proper libraries for running this). https://nodejs.org/en/
2. Restart your PC for this to take effect.
3. Install lite-server which is a node js app that lets use run our HTML projects live and detects any changes to our files.
4. Open CMD and type ‘npm install -g lite-server’.
5. Navigate to your HTML root directory in CMD and type ‘lite-server’ which will open your index.html on your default browser with the ip as your local ip and port 3000.
6. In CMD, type in “ipconfig” and enter. Remember your IPv4 address for later, as yours will be different from the screenshot below.
7. Open a browser in your phone, preferable Google Chrome.
8. Type in your IPv4 address then colon ‘:’ then 3000 like so: ‘10.128.21.63:3000’.
9. Now you can access your game from your phone.
Using a-frame WebVR API (requires LeapMotion):
- Commented Code on GitHub (not a functional game, has basic creations of 3d models, and moving in 3D):
- https://github.com/brandongallagher1999/Aframe-Demo
Resources:
- A-Frame 3D VR Framework: https://aframe.io/
- Documentation: https://aframe.io/docs/0.9.0/introduction/