Browser VR experiences with A-Frame.
JoccaWeb.nl, july 2018.
Currently A-Frame version 0.7.0.
The goal of this project is to have a quick way to set up VR experiences in the browser for frontend developers.
Nevertheless, in A-Frame there are a lot of possibilities for interactive VR experiences directly in the browser for users with any VR headset.
For both production and development code for A-Frame projects, I use an A-Frame minified file (a build). See Resources for the builds on A-Frame's GitHub repo. I host it myself, using a script tag (no NPM, see the Development log). The assets-, components- and library folders will have to be put manually in the dist folder after running the build script from package.json. Working on that.
So start up the project and build your own VR experience in A-Frame!
- With version 0.8.0, some components (K-Frame, A-Frame Extra's and others) don't work (yet). I'll keep it on 0.7.0 for now. The environment component now does work with 0.8.0. I'll disable it's floor, so that I have more control. For example, making a hole in the floor for a pond/sea/swimming pool.
- Babel and React are configured in for ES6 and React support, but not particarly used, it was just handy to keep it in for possible React - A-Frame projects.
- I installed Webpack 4 and A-Frame through NPM and it worked, but there was an exceeded asset size warning. I'm unsure if it's necessary to configure Webpack 4 to split chunks for this. I'll wait 'till I see some more a-frame webpack 4 examples online.
- Custom A-Frame components reside in the components directory.
- Installed the Environment Component (version nr. unknown, it's the most recent version from june 2018).
- I imported a Blender 3D model with the Kronos plugin as a Gltf file. Blender's latest version is 2.79. 2.80 will include Gltf export out of the box.
- Installed Khronos Blender to Gltf exporter, see Resources.
- Installed glTF Tools extension. To preview glTF models with this extension, at least a material node has to be added. Added default Material.001 in Blender (Properties panel, Material tab). Camera and Lamp also have emtpy nodes. In Blender, removed camera and lamp. Preview works!
- Placed the model in the scene. See index.html and a-frame docs, search for glTF.
Debugging and publishing a project on smartphone and Gear VR
Load the local server URL on your smartphone (while working in development mode). If your phone and computer are not on the same LAN, consider using Ngrok for local development and testing. BrowserSync is also worth a gander.
The basic controls will work on Oculus Rift and HTC Vive too.
npm start opens the page on for example http://192.168.1.100:3000/, see the start script in package.json. On your comparable url, in your own local network, with working WIFI, you should be able to use it on your smartphone browser right away with CardBoard/Gear VR. This is all in a development situation, we're not publishing our app here. The port setting is in the start script. Also possible is typing the following in the cli:
PORT=8000 npm start (providing the start script has the port setting removed). You can use
ipconfig in the command line to check the current IPV4 adress on your system. On my system that's 192.168.1.10x . That ip is used in the the
package.json's start script.
You can also publish your development build for free with Surge. Visit the Surge site and read the info, then make two surge websites online (this is quite easy and you can do it fast). One with a clickable link to ovrweb:http://surge-url-of-your-a-frame-app/, and one wich is your a-frame app itself. The
ovrweb: prefix 'll make your smartphone ask to put the phone in the Gear VR and you can go inside your VR creation!
This is assuming you're using the Oculus app on your smartphone, it'll also work for the Rift and the Vive, only then your PC will probably mention to put on the headset connected to your desktop/laptop.
For CardBoard no ovrweb prefix is used, just tap on the CardBoard symbol.
For the Gear VR: Required is that you have a recent smartphone with an installed Oculus app and within that app an installed Carmel Browser. When you're trying out your Gear VR you'll do this almost automatically.
Update june 2018: Now you can put on the headset, start the Oculus browser and surf to the url of your project. Activate the cardboard icon with the headset-controls and you're in!
- A-Frame site
- A-Frame on GitHub
- A-Frame's Changelog
- A-Frame Registry
- A-Frame's builds
- A-Frame K-Frame (Kevin Ngo, Animation- and Event Set Component)
- A-Frame Extra's
- A-Frame Environment Component
- A-Frame Gradient Sky
- The Blender Khronos Plugin
- The GlTF 3D model standard
- The Khronos Blender Exporter