A-Frame VR pitfalls, tips and tricks
An unofficial cheatsheet and FAQ
A-Frame is a simple, lightweight yet powerful tool to build awesome web VR applications. If you are not familiar with A-Frame and want to know more, click here to go to the official site and see all the demos. This article will cover the fine print that is not included or extremely hard to find in their docs, and what we learned when we built the npm module: aframe-react-stories.
<a-assets> can ONLY live inside <a-scene>
<a-assets> cannot be placed inside <a-entity>. It can only be placed inside <a-scene>. If you’re using a library like react or a framework like angular, this may cause you some trouble. When building aframe-react-stories, we had to incorporate callbacks to create our simple drop in component.
On that note, if you’re using a library that requires you to wrap everything in <div> tags, like react for instance, you’ll need to wrap every a-frame component inside a single <a-entity>. You can wrap as many <a-entity>'s inside an <a-entity> as you want, just no <a-assets> inside <a-entity>.
Don’t rule out framework specific HTML event listeners and tags
There are no native event listeners in A-Frame. In the docs, it tells you to use something like document.querySelector to find the IDs of the entities and add the event listeners. Since aframe-react-stories is built on react, we learned that you can use the native react onClick event listener. This find made building VR components considerably easier.
Enter VR button has an absolute position
If your framework of choice requires you to wrap your components inside <div>'s, you will need to add this into the <div> style:
position:'absolute'; height: '100%'; width: '100%';If you don’t have the above styling, the button will disappear completely or appear in an undesirable location.
CORs blocking images from other source
There is an ongoing thread in github about this issue. To solve it, add crossorigin='anonymous' into your image tag, like this: <img src='http://example.com' crossorigin='anonymous'>. If that still doesn’t work, use JSONP or route all cross origin image data through your server.
Other helpful tips:
- Awesome A-Frame has a lot of useful community built resources and components.
- If you want a quick starter with aframe + react, click here.
- Our demo for aframe-react-stories
- Our fully built stories with social media integration.
- aframe-react-stories and relevant github repos.
