I spent a week in November 2016 understanding the basics of A-Frame for WebVR. I put together a small demo with the idea to create an educational piece that could be expanded on. Why would I do this? Well, I’m passionate about VR and like the idea of creating experiences that are accessible to a wider audience, not just those with pricey VR equipment.
A-Frame is a framework for building Web VR experiences, you can check it out at aframe.io.
In this post, I’m going to create a VR experience that uses your gaze and click to select a piece of coral and add it to a reef bed and is easily viewable in browser with Google Cardboard and mobile phone. The final result, A-Frame coral reef builder.
If you’re unfamiliar with designing or developing for VR, I recommend looking at the Cardboard Design Lab as it goes through the principles for designing and developing for VR.
Build
The A-Frame documentation is very reliable and a great place to start. A-Frame also has a great developer community, everyone is helpful, and most contribute massively to A-Frame, and it’s ecosystem.
Breaking down the functionality for my scene as follows;
- Underwater scene
- Select a coral model
- Spawn a coral model and add it the reef bed
- Make sure the coral bed is facing the user
- Sound
Scene setup
Start by adding a scene using the
Below is the starting template where I’ve added my seafloor, sky, sea top, lighting and camera primitives. The inspector is perfect for playing around with the small details for this.
I wanted to use a water effect to the ocean top and a shadow of the moving ocean on the seafloor. A-Frame Extras has an ocean primitive, so I added that to both ocean top and seafloor and adjusted positioning using the inspector.
Reef bed
With the scene set, I positioned the reef bed and coral items using plane and box primitives. When I was happy with the positioning, I styled the coral bed plane primitives with an opacity and added hover styling.
Assets
I used photoshop to create the intro instructions panel and buttons, for the models I used Clara.io 3D editor. I then exported my models as a Collada model with the extension of .dea. I would like to point out that before this I had no experience with 3D modelling; I spent hours learning the basics before actually starting to build the models needed, even then it was trial and error.
Fortunately, Clara.io have a YouTube channel that has a tonne of video tutorials to get you started; I found it an exceptional resource.
I organised all assets adding them below the a-scene opening tag, also give them an appropriated id name. Keeping them in here allows them to be pre-loaded and cached.
Once the assets are in, I replaced the box primitives with my coral models using the inspector.
Custom components
To create a picker I built a custom selection-component to select the coral attributes of id, size and event and spawn a new coral item onto the coral bed. I also used the look-at component by ngokevin to ensure that each spawned coral model faces the camera.
Once everything was functioning as planned, I swapped out the box models for my custom coral that I had made in Clara.io. I completed a screencast and used the video as a how-to guide for the start and added in my audio file.
Audio
Audio is an essential to VR, it brings attention to the user and can set the environment. For this example, I added an underwater sound bite on a loop and placed it on an <a-entity> just above the <a-camera> to help the user feel submerged under water.
What I learned
Not only was this a great start to understanding A-Frame but also helped to gain a better understanding of 3D environments which included;
- Creating low poly models
- Adding models to a scene
- Moving and scaling models
- Triggering events based on user interactions
- The importance of sound
- Lighting
- Creating custom A-Frame components
The final result, A-Frame coral reef builder
This post is also on Medium