position, rotation, and scale

The scene I made in the challenge is sort of interesting, but all of the shapes are right in front of us. If you view my scene in VR and look to the sides or turn around, you won't see anything there! On desktop or mobile, you can also click or tap to drag and rotate your view around the scene. Try it out on my scene below (it's embedded to the right of my code), and you'll see that there's a lot of unused space:

To see how to place our shapes all around the scene, we need to learn a bit more about position.
‍
The first box has position= "0, 0, -4".  Why does the position need to be 3 numbers? Let's take it one number at a time.

The first number sets where the box is to the right or the left. This horizontal direction is called the x axis. All of the shapes in my scene have an x value of 0, so they are right in the middle of the scene. If you change that first number, you'll see the shape move to the right or left. If I want to move my box to the right, I need to change that first number: the x value. Here I'm going to change it from 0 to 2. See how it moved to the right?
‍

The full position of the box now is "2, 0, -4". That first 2 means that the box is 2 units to the right.

The middle number, 0, sets where the box is up or down, and this vertical direction is called the "y axis". All of my shapes have a y value of 0, which is why they are at the bottom of the scene. Here's what happens when I change the middle number of my box's position to 3. See how it moved up?

Now our box's position is "2, 3, -4". That 3 in the middle means it's 3 units up.
‍
The third number, -4, sets where the box is forwards or backwards, and this special direction is called the "z axis". You only have this third axis when you are working with 3D space, like we are now. All of my shapes have a negative value in the z axis. This puts them in front of the the initial view of your scene.

To help get you oriented, the initial view of your scene, the camera, has a starting position of 0, 0, 0. This is called the origin point of the scene.

If a shape has a position with a positive value in the z-axis, it will show up behind the starting camera. Below, you can see what happens when I change the third number of my box's position to 4, instead of -4. The box is still in the scene, but you need to look around in your scene to see it!

It's no problem if you haven't yet figured out how to look around in your scene - the next section will show you more about how to do it on desktop, mobile, or VR.

Viewing your site on desktop, mobile, and vr

You can visit your 3D site on desktop, mobile, and VR, right from a web browser. If you've been working on your project on Glitch, every one of your Glitch projects already has a link, and you can view your site by pressing the "Show Live" button at the top of your project. It looks like this:

When you click that button, your site will open up in a new window, and you can see its URL in the browser. On desktop, you can click and drag the mouse to rotate the view and use the awsd keys to move around.. On mobile, you can tap and drag or rotate the camera around. In VR, you can look around, and if your device has six degrees of freedom, you can walk around to move around the scene.

You'll see a VR button on the bottom right of your site. Here are instructions for viewing in VR:

GearVR/ Cardboard/ Daydream: Load the your site's URL on a mobile browser and press the VR button. You can then put your phone in your mobile VR headset.
‍
Oculus Go: Open the Oculus Browser and then navigate to your site's URL in the URL bar. Then, press the VR button on the bottom right corner with your laser pointer. Your 3D site will then render in VR mode.

Oculus Rift: Make sure Oculus is running. Open the Firefox web browser and go to your 3D site. Press the VR button at the bottom right corner of your 3D site and it will show up in your Rift.

HTC Vive / Vive Pro: Make sure SteamVR is running and that your headset and controllers are on and tracked. Open the Firefox web browser and go to your 3D site. Press the VR button at the bottom right corner of your 3D site and it will show up in your Vive or Vive Pro.

Windows Mixed Reality: Open your site on Microsoft Edge and press the VR button at the bottom right corner of your 3D site. You can also go to your site using the embedded Edge browser inside the Microsoft VR Portal.
‍‍

using the a-frame inspector to work faster

It can be hard to guess the precise position that you want for your entities. Instead of changing the position value in your code hundreds of times until you get it exactly right, your 3D site actually has a tool built into it that lets you change the visuals of your scene just by dragging and dropping stuff around.

To use this tool, you can hold control-alt-i while viewing your 3D sites from a PC, Mac, or Chromebook. This opens the A-Frame Inspector. ‍

In the large scene view in the middle of the Inspector, you can use a mouse to look around your scene.

Right click + drag will move the camera to the right, left, up, or down. This is called "panning".
Left click + drag will rotate the camera in a circle.
The scroll wheel will zoom the camera forwards or backwards. ‍