Now that you've created an awesome virtual reality world in the CodeHS editor, it's time to load that world up in a smartphone VR viewer such as the Google Cardboard. This article gives you the steps to do just that.
Note: There is a playlist describing how to do this, including a video walkthrough, here: codehs.com/playlist/2193
How can I view my Virtual Reality creation?
Safari Smartphone Users:
The most recent versions of Safari on mobile do not have access to the phone's motion sensors by default. To enable the ability to tilt your phone to look around the VR world, simply go to Settings > Safari > and enable Motion and Orientation Access
1. Open up the VR World on a Smartphone
The world you've created is simply a webpage that lives at a specific URL on the Internet. To open it up on a smartphone, all we have to do is visit this URL on the smartphone's browser (Chrome or Safari work best). There are a few ways to do this:
- Use the QR Code for your world by going to the More tab and choosing Run on Phone
Scanning this QR code from any QR code scanner will open the website in the mobile browser. We recommend using either Expo or Chrome to scan the QR code. Expo is an app available free for iOS or Android, and has an easy-to-access Scan QR Code option.
The QR code can also be scanned with the Google Chrome app. To scan with Chrome on an iPhone, you just need to force press the Chrome app icon, and the menu shown below will appear. Then select the Scan QR Code option.
Now you should see your VR world loaded in your mobile browser! This is the easiest way to load the URL in a mobile browser. To do this without a QR scanner:
- Alternative: Copy the URL and send it to your phone
You can get the URL for your VR world directly by choosing "See HTML in new window" under the Run Code button.
This will open up your world in a new window. Your browser may block this window pop up, in which case you'll need to allow pop ups:
Now you should see your world in a new window. The URL for the world is in the window:
Copy this URL and send it to your phone either over email or text. Alternatively, you can manually type out the URL in your phone's browser.
Open this URL in your phone's browser (Chrome or Safari work best) and you should see your Virtual Reality creation loaded on your phone!
2. Press the VR Goggle Button
Pressing the VR Goggle Button switches the world from 2D view into VR view:
Once you've pressed the button you should be prompted to turn your phone sideways and insert it into a cardboard holder:
Once you turn your phone sideways the world will be displayed as two separate images, one for each eye:
Insert your phone into the cardboard holder
Simply insert your sideways phone into the cardboard holder (or similar VR viewing device) and see your VR creation in actual virtual reality!
Configuring Oculus Rift with your Virtual Reality Program
Steps to configure Oculus Rift with WebVR (the API that Aframe uses to render content in the VR headset):
- Download Mozilla Firefox (Nightly seemed to work best: https://www.mozilla.org/en-US/firefox/channel/desktop/)
- Enable Unknown Sources in your Oculus Settings (Instructions here: https://blog.mozvr.com/oculus-home-rift-cv1-webvr/#enablingunknownsources)
- Restart both Firefox & Oculus
- Start up Firefox again and navigate to the page where your Aframe program is
- Click on the Enter VR Program button
- Oculus should start up automatically and you should now be able to explore your Aframe program with your headset!
- If you encounter any issues with rendering your VR program, try closing out of both Firefox & Oculus. Then, follow steps 4-6 once more.
Enter VR Program Button:
Still have questions? Contact our team at firstname.lastname@example.org to learn more!