Browser VR experiences in A-Frame
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
aframe
assets
components
img
src
LICENSE
README.md
aframe.min.js
package.json
webpack.config.js
yarn.lock

README.md

a-frame-vr-boilerplate

Browser VR experiences with A-Frame.

JoccaWeb.nl, july 2018.
Currently A-Frame version 0.7.0.

Welcome to my VR - A-Frame - JavaScript "starter-kit" or "boilerplate"!

scene in a-frame inspector

This boilerplate assumes intermediate knowledge of vanilla JavaScript, HTML5 and Webpack (and Yarn). Some A-Frame and Blender beginner knowledge wouldn't hurt either.

The goal of this project is to have a quick way to set up VR experiences in the browser for frontend developers.
If you're more inclined to strictly game-developing in VR, I would advise Unity. Unity does have somewhat JavaScript-like support but you'll find it's very handy to know C#.

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!

Development log

  • 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).
  • For setting up animations you can choose a-animation and/or the animation component (K-Frame). For events choose vanilla JavaScript and/or the event set component. For each project you'll have to figure out what to use best.
  • 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!

Resources