frame academy

Learn how to create immersive, cross-platform webxr sites.

project #3: relative position + grouping entities

a few helpful notes about This project

• You should do Project #1 and Project #2 before doing this project, or at least skim through them to make sure you understand them. 📕
• We're going to learn about something called WebXR: a way to create websites that deliver VR or AR experiences right from a web browser. 🕸
• We're going to learn how to link entities to each other and understand relative position. 🤯
• We're also going to learn how to use the A-Frame Asset Management System, letting you improve the performance of your WebXR sites. ⭐️
• This project has 2 parts, and each part has a challenge. If you go through the challenges, you will hone your skills + enhance your WebXR site. 🔨
  
• If you have any questions as you go through the project, I encourage you to ask in our online community. We can all learn from each other! ✋
• When you're done with your project, you can post it on the Frame Gallery so that we have a handy place to explore projects + learn from them.🎨
  
• If you're curious to hear more about Frame, email hello@framevr.io. We help with WebVR projects + do workshops for schools + businesses. 💌
  

parents, children, and siblings

In Project #1, we learned a little bit about position. To review the main points: you set position with three numbers. The first number represents the x axis (where the element is positioned to the right or the left), the second number represents the y axis (where the element is positioned up or down), and the third number represents the z axis (where the element is positioned forwards or backwards). In my starter project, I'm simply going to throw a few box entities in my scene and give them each a position, color, and rotation. I'm also going to put a background component on the scene element, and set its color property to a nice blue color I found.

Take a peek at the project I'm starting with:

As you can see, our a-box entities are inside our a-scene entity. When an entity is inside of another one, it's called a child.

As you might have guessed, an entity that has a child inside of it is called a parent. In this project, the scene is the parent, and the boxes are its children.

Our scene has more than one box inside of it, so these boxes are siblings of each other - after all, they have the same parent! I know this family lingo is a bit weird when we're talking about HTML, but it's a decent way of understanding the relationship between the entities and at least it gives us a standard way to talk about it.

Now, let's mix it up. I'm going to nest the two bottom boxes inside the first box. I do this by putting them inside the opening and closing tags of the first box. Now, although the first box is still a child of the scene, it's also the parent of the other two boxes!

relative position

Woah! Now the scene might not look as you expect it to. Why did the two child boxes change position? Why are they now higher up than the first box, and farther away?

This gets into the concept of relative position. If one entity is the parent of another entity, it becomes the origin point for all of its children entities. This means that instead of using the scene's origin point (0, 0, 0) to determine its position, the child entity will use the position of its parent entity. Let's make sense of this.

Notice how all of the boxes have a vertical position (the second value in the position property) of 1. Because the second and third boxes are children of the first box, though, their position will be relative to the position of the first box. So if the vertical position of the second and third boxes is 1, they will be 1 above the position of their parent, the first box. So that's why we see the second and third box are higher than the first box now. Their position is determined relative to the position of their parent.

This is also why the children boxes are farther back. All of the boxes have a z value (the third number in the position property) of -3, but the second and third box will now be -3 away from their parent, the first box, putting them even farther in front of the camera than the first box.

Now, you might be wondering: isn't the y value of the child boxes really 2 then? If the parent box has a y value of 1, and the other boxes are positioned 1 above the parent, then the real y position of the other boxes must be 2. Same with the z value: if the parent box has a z value of -3, and the children boxes are -3 away from the parent box, then isn't their z value really -6?

You would be right! The position that you're figuring out there, though, is called the global position. Global position is the true position of an entity relative to the scene. The position of the child boxes you see in the code is called local position. ‍

looking at parents + children in a-frame inspector

A good place to help you understand the relationship between parent entities and children is in the A-Frame Inspector. In the GIF above, I visited my immersive web site and pressed control-alt-i to open up the Inspector.

In the entity list on the left, any entity that is a parent will have a little arrow next to it that you can click to expand out and see all of its children. When I expand out my parent box, I see my two other boxes appear in the list. If you move around the parent entity, notice that the children move with it. When I rotate the parent, the children also change position to account for the new orientation of the parent. If I scale the parent up in size, the children scale too.

Why would you make one entity the parent of another? This is a very handy way to group entities that you know need to be linked together. Instead of changing all of their positions in your code or in inspector, you can just change the parent entity! Later on, when we make our WebXR sites interactive, you'll see how helpful it can be to strategically group your entities together.
‍