Relative positioning in A-Frame
Following up on my popular article on how to build a VR experience using A-Frame, React and Redux, I’d like to share a few quick tips on how positioning works in A-Frame, and how you can take advantage of relative positioning when creating your scenes.
TL;DR:
Let’s be honest here: Transforming A-Frame entities — getting their position, rotation and size right — is fiddly work compared to how intuitively it can be done in a GUI editor such as Unity. But you can take some of that pain away by understanding a simple fact about A-Frame:
Using <a-entity> as a container works the same way in A-Frame as using<div style=”position: absolute;”> does in regular HTML and CSS.
The <a-entity> primitive (or Entity component in aframe-react) is the “workhorse” of A-Frame, meaning that most other primitives such as <a-cube> or <a-image> simply wraps <a-entity>, to make the entity-component system of A-Frame more accessible. You can apply any component to it, such as geometry or material, and get a visible entity rendered in your scene.
To use CSS terminology, think of everything in A-Frame as being absolutely positioned by default. If you don’t specify a position for an entity, it will default to appear in (0, 0, 0). In a typical workflow, you will start to add more and entities, positioning them as you go. Often, some of these entities will be closely related, part of the same whole so to speak. An example could be a table with a number of things on it, or a car consisting of many different entities to make up its whole.
You can wrap such related entities in an <a-entity> tag with a position attribute on it, and that will make all the entities inside the container be positioned relative to the position of the entity container rather than to the entire scene. Just like DOM elements such as <div> will be positioned relative to their container when containing element has position absolute or relative, and the element itself has position absolute.
In my case, I was making a simple scene to use in a presentation about WebVR (you can try it above by clicking “Run Pen” and use the mouse and arrow keys to look and move). In it, I have a forest (really just a single model) and a number of texts rendered in 3D. I have grouped the forest and the texts together, as each text’s position relative to the trees and rocks in the forest is important, but I also want to be able to position and rotate the forest and the texts together.
I also have a large number of cubes textured with photos of people in the scene. Each cube is an entity with its own unique position and rotation, but again I have grouped them all together by wrapping them in an <a-entity> tag, which is positioned where I want the entire “photo sphere” in the scene.
The entire example is available on CodePen, if you’d like to play around with it. The example also shows how to add gamepad navigation and 3d text components to A-Frame.
Casper Fabricius is co-founder of Cimmerse — Sell more with 3D, VR & AR. Coming from 17 years of experience as a fullstack web developer he has become an expert in WebVR and is an A-Frame contributor. He tweets abouts VR and coding as @fabricius.
If you liked this article, you may also like:
