Spatial Coordinates Exercise

Now that we know how to describe the position of objects in virtual worlds, let’s put it into practice.

Spatial Coordinates Exercise
The objective of this exercise is to improve the understanding of spatial coordinates. We start with a set of blocks/cubes positioned in a certain arrangement and also provide a set of desired arrangements. Your task is to update/change the position coordinates of the blocks to position them as desired for each task.

We have provided the baseline source code (see the “See Also” section at the bottom of the page). To work on the exercise, copy the file contents to Glitch or CodePen as per your preference. If you simply run the provided file in a browser, you will see output similar to one in Figure 1.

Figure 1: Initial positions of cubes the red ‘block1’, green ‘block2’ and blue ‘block3’

To draw the red ‘block1’, the following code is used:

 <a-box id="block1" position="0 0 0" color="red"></a-box>

Note the position attribute which specifies the position at (0,0,0) or origin. The three numbers, specify the position in X, Y and Z direction. Modify these numbers and explore the effects of the modification. Once you are reasonably comfortable with which directions are +X, +Y and +Z, try your hand at the following five tasks. Each task shows you what the arrangement of cubes should look like. Modify the coordinates (using Glitch/CodePen/Notepad) such that the resulting output matches the required arrangement.

Hint: The white grid’s squares are exactly 1-unit across.

Task 1: Re-position the cubes to match the arrangement in Figure 2.

Figure 2: Task 1 Arrangement

Task 2: Re-position the cubes to match the arrangement in Figure 3.

Figure 3: Task 2 Arrangement

Task 3: Re-position the cubes to match the arrangement in Figure 4.

Figure 4: Task 3 Arrangement

Task 4: Re-position the cubes to match the arrangement in Figure 5.

Figure 5: Task 4 Arrangement

Task 5: Re-position the cubes to match the arrangement in Figure 6.

Figure 6 Task 5 Arrangement