frame academy

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

project 3: relative position + grouping entities

Part 2: keep it in the family

I hope you also took a crack at the challenge for Part 1! If you do the challenges, you'll be building your own immersive website that works on desktop, mobile, or VR.

Remember that if you have questions or want to share your work-in-progress, feel free to ask in our online community, or on Twitter with the hashtag #frameacademy


In Part #1, we saw how relative position works when you have parent-child relationship with entities in your scene. The child entity sets its position relative to its parent.

There are other things you should keep in mind when you group entities, though. I'm using the same scene from Part 1, with one box as a parent and two boxes nested inside of it as children. This time, though, I'm going to add the visible component to the parent box.

This component is one of the components that comes with A-Frame itself, so we don't need to import it into our project. In the A-Frame documentation, you can find the visible component by looking on the side navigation bar.

The visible component takes one value, and it can be set to either true or false. So, I'm going to add visible="false" to the parent box. See what happens:

All of the boxes disappeared, and my scene is really boring now.

As you can see, making the parent box invisible also makes its children invisible. So, in some ways you can think of the children entities as part of the parent entity, and things that affect the parent entity may also affect its children. This becomes really handy because often you will want to control the appearance of things in your scene, and being able to make a group of entities disappear or appear at once, just by changing the visible component of a parent entity, is really handy.

animating families

As we saw in Part 1, if you change the position of a parent entity, its children will move along with it. We saw this happen in Part 1 when we moved them around in Inspector.

You can also see this in action if you add an animation to a parent entity. To try this out, remember to import the animation component into your project (you can copy and paste the second script in my head element from the project below into the head element of your own project, if it's not there already).

I put an animation on the position and an animation on the rotation of the parent element, and I also changed the child boxes to spheres. If you need to review how the animation component works, check out Project 2. See what happens to the children entities:

As you can see, even though the animation component isn't on the child entities, the child entities still move and rotate along with their parent entity!

The global position of the children entities changes throughout the animation, but their position relative to the parent entity, their local position, stays the same throughout the animation.

This concept of global vs. local position isn't always an intuitive concept to grasp, and I'll admit: I'm not sure I've done the best job at explaining it! So, if you have any questions at all about it, do ask in the online community. :)

challenge #2: add animations to the family

To see these concepts in action on your own project, add some animations to the parent entities you set up in challenge #1 and see how those animations affect your children entities. Try animating position, rotation, and scale! For review on setting up animations, check out this part of Project 2.

< go back to part #1
meeting the relatives
Move on to part #3 >
asset management system