frame academy

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

project: create a webvr site with basic html

Part 2: moving around your scene

I hope you also took a crack at the challenge for Part 1! If you do the challenges, you'll be building your own 3D 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

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.

moving the camera

rotating the camera

zooming the camera

In the sidebar on the left of the Inspector, you can see a list of all of the elements in your scene. You'll find your shapes in here, and also a few other things that come by default in every A-Frame project, like lights and the camera. We'll look at them more later. You can click on entities in the scene view or in the sidebar to select them.

In the sidebar on the right, you will see information about the element you selected. There's a lot here you haven't learned about yet, but you'll see the "position" near the top of it.

So, what can we do in the Inspector besides look around the scene? Well, The Inspector gives you a more visual way to position and adjust your elements.

Select one of your shapes by clicking on it, and you'll see three arrows appear around the entity. This is the position widget. Click and drag one of the arrows to move your shape in a certain direction and put it where you want. Notice that when you move it, the position value in the properties window on the right will also change.

Besides position, there are two other important attributes you can use to help you place entities how you want them in your scene: rotation, and scale.

- rotation sets how an entity is tilted
- scale sets the size of an entity

With the Inspector open, you can use the position, rotation, and scale widgets to position, rotate, or scale your entities. You can find these widgets with this little toolbar at the top right of the inspector. The widget selected by default is the position widget, the one in the middle is the rotation widget, and the one on the right is the scale widget. Don't worry about the "local" checkbox for now.

Use the three widgets to change the position, rotation, and scale of some of your shapes in Inspector. Once you make the changes that you want in the Inspector, make sure you update your code to make your changes permanent. If you only make the changes in Inspector, and you don't change your code, as soon as you refresh your site it will be back to how it was before you made the changes.

changing entity position

changing entity rotation

changing entity scale

challenge #2

Use the A-Frame Inspector on your scene to change the position, rotation, and size of your shapes, and then change the code in your Glitch project to reflect the changes you want. Try to position your shapes so that when people look all the way around the scene, they still have something to see. To really challenge yourself, try to give your scene a floor, or walls!

Finally, open up your scene and test it out on desktop, mobile, or VR.

At the start of the next Unit, I'll show you how I did the challenge, but I encourage you to experiment on your own before looking at my example!

< go back to part 1
shapes and html
Move on to part 3 >
adding 3D models to your scene