YoungSphere
Published in

YoungSphere

6. Relatives & Inspector

This is a series on using WebXR to build immersive content. To access the other blogs in the series, follow this link.

Take a look at the following code:

<a-scene>
<a-box position=”-2 1 -3" color=”green”>
<a-box position=”0 1 -3" color=”red”></a-box>
<a-box position=”2 1 -3" color=”red”></a-box>
</a-box>
</a-scene>

We know that <a-scene> is the parent element of all entities.

Similarly, we can argue that the green box is the parent of the 2 red boxes. The red boxes are siblings of each other and are children of the green box.

Relative Position:

“The coordinates of a parent entity act as origin point for all of its children entities”

So, instead of using the scene’s origin which is (0,0,0) by default, the child entity will use coordinates of its parent entity as the origin.

Let’s take an example:

In the code above, the position of the 1st red box is “0 1 -3”. This is known as the local position as it is the relative position of an entity w.r.t the coordinates of its parent entity.

The parent green box has position “-2 1 -3”.

This means the actual position of the 1st red box is “-2+0 1+1 -3–3” = “-2 2 -6”. This actual position is known as the global position. It is the true position of an entity w.r.t to the scene.

Note: local position and global position of the green box are the same because it is a child of the <a-scene> element. By default, coordinates of <a-scene> and camera are (0,0,0) which is the global origin. We can always change the coordinates of <a-scene> and camera as per requirements but we’ll skip that for now.

Task #1: Find the local and global coordinates of the 2nd red box. I’ll be providing the answers at the end of this section.

Suppose we have a lot of nested entities making changes to a single entity can be pretty cumbersome. To make this process smoother, we can use the Aframe Inspector.

To use it, open your immersive website using Show →In a New Window and press <ctrl> + <alt> + i.

Aframe Inspector

Aframe Inspector has an entity list on the left. Any parent entity has a little arrow next to it that you can click to expand out and see all of its children. If you move/rotate/scale the parent entity, the children entities move/rotate/scale too.

Task #2: Play around with the Aframe Inspector. It is a really handy tool to have. Create your own custom nested entities and try moving/rotating/scaling the parent entity.

Answer for Task #1: local position = “2 1 -3 “, global position = “0 2 -6“

Next, we’ll learn how to add different assets in our project.

See you in the next one.

YoungSphere crowdsources immersive content for K12 education. Contribute your AR/VR content at www.youngsphere.com to earn monetary credits.

--

--

--

Crowd Sourcing Augmented Reality for K12 Education. A student from Bangladesh can now have immersive experiential learning on his mobile phone through the AR content developed by an AR developer from Africa.

Recommended from Medium

The opensource paradox

What the hell is a Snippet?

Top 6 Flutter Development Companies in 2020

Top 6 Flutter Development Companies in 2020

My Development Toolset 2021 for iOS 🛠

Learn Python-100 Days Of Code with Khemlall DAY 4-Randomization and python lists

Automated deployment is coming!

VirtualBox VM Ubuntu on a Windows platform

Facial Landmarks Block On Yonohub

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vivek Chandela

Vivek Chandela

Graduate@IIIT-H, Incoming AMTS@Salesforce

More from Medium

Metaverse Definition Glossary

Oculus Hand Interaction SDK

What Does the Future of Metaverse Look Like? A Design Perspective.

Future of Augmented Reality: How AR Will Transform the Tech World