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
Viewing a Virtual Reality Program
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 using a mobile camera or any QR code scanner will open the website in the mobile browser. 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 clicking on the "Open in New Tab" 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!
Note: 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
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:
Additional Resources:
Still have questions? Contact our team at hello@codehs.com to learn more!