Intro to Aframe

Virtual Reality

Intro to Aframe

Aframe

  1. Click Here, click on profile in the top right and select sign out

Login information

If you are in class 1 click here

If you are in class 2 click here

If you are in class 3 click here

If you don’t find your name on the spreadsheet, please see Mr. Sam to get your login information

  1. If you do see your name and username, please open a new tab and go to glitch.com
    Note: Your password is your username without the -. For example: if your username is idea-student2 your password will be ideastudent2
  2. Click on Sign In, then click on Sign In with Github
  3. Use your username and password to login
  4. Follow instructions below:

Template Link

Click Here for Aframe Template
1. Remix this project
2. Name it: firstname-lastname-aframe-project

Aframe introduces new HTML tags that are used to display VR scenes. Below is a basic aframe experience.

Terms covered today:

<a-scene></a-scene> parent element for Aframe
<a-assets></a-assets> this section houses all the assets including pictures, audio
<a-entity></a-entity> generic container for objects in aframe
<a-box></a-box> adds a box to the aframe scene

Activity 1:

We will be adding a box to the scene and positioning, scaling, rotation.

Copying and Pasting Code
When we copy code from this page we are placing the code in the <a-scene></a-scene> section. The code below shows where code should be placed:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
    <script src="https://unpkg.com/aframe-text-geometry-component@^0.5.0/dist/aframe-text-geometry-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <!--   Images       -->
        <!--    Here is where we add all of our pictures, audio and other media     -->


      </a-assets>
      <!--   We paste code below here:     -->


    </a-scene>
  </body>
</html>

Adding box to scene

<a-box color="green" position="0 0 0" scale="1 1 1" rotation="0 0 0"></a-box>
  • Paste this code into your project.
  • Click on live to view the results

Do you see anything? We have to correctly position this box so the player can view it.

Positioning

Aframe uses the position attribute like so:

<a-box position="0 0 0"></a-box>

There are three numbers because there’s three axises in this order:
1. X-axis: Left and Right
2. Y-axis: Up and Down
3. Z-axis: toward and away

Discuss positioning:

  • Based on where our box is currently, how can we adjust the position so its in view?
  • How do we make it so the box isn’t hitting the ground?
  • How do we make it so the box is to the right?

We’ve covered the basics of positioning.

The box is a bit small huh?

Scaling:

Aframe uses the same approach with scaling an object (modifying size of an object). Again there are three numbers we work with in the scale attribute. Let’s take a look:

<a-box scale="1 1 1"></a-box>

Again we are affecting the three axises again.
1. X-axis: width
2. Y-axis: height
3. Z-axis: depth

Discuss scaling:

  • How do we make the object more wider?
  • How do we make the object taller?
  • How dow we make the object thicker?

Note: Your code should look something like this:

<a-box color="green" position="0 0 0" scale="1 1 1">

Rotation

Rotation is handled in a similar fashion with three axises:

<a-box rotation="0 0 0">

Can you guess what each number corresponds to? We will leave this one up to you to play around with.

Explore

  • Enter 45 in the first number, What do you notice?
  • Enter 45 in the second number, What do you notice?
  • Enter 45 in the third number, What do you notice?

Note: Your code should look something like this:

<a-box color="green" position="0 0 0" scale="1 1 1" rotation="0 0 0">

Color

Now that we know how to properly position, scale and rotate our objects we are now VR Developers! Let’s showoff some more by changing the color of our box.

Aframe has a handy color attribute:

<a-box color="green">

Aframe ships with the basic colors such as:
– blue
– purple
– yellow
– red

This is cool but we want to add our own colors. We can do so using Hex values. Don’t worry about what that is. We are going to use a tool that will generate Hex Values for us.

Go to google.com and type in colorpicker

You should see the google colorpicker at the top.

We want to use the slider to choose a shade and drag the circle to land on a color you would like.

Once you completed this there will be some text at the top left that looks something like this:
#4386f4

Copy that value and paste like so:

<a-box color="#4386f4">

Explore

  • Find a color you like and paste that into your color attribute and put that into your box object.

Textures

Colors are cool but lets customize it a bit more. We are going to use textures. Textures are images that you can put on 3D objects that make them look like the artist intended. Let’s see how this works.

There are two ways to do this:

First Way:

<a-box src="https://i.imgur.com/mYmmbrp.jpg" ></a-box>

Here all we’re doing is linking to an image out on the web using the src attribute. This is very similar to how we use image tags and src attribute.

This works but best practice is to do it using the <a-assets></a-assets> section in aframe

Second Way, Best Way
Here’s how that same example will look using the best practice method.

<a-scene>
  <a-assets>
    <img id="texture" src="https://i.imgur.com/mYmmbrp.jpg">
  </a-assets>
  <a-box src="#texture"></a-box>      
</a-scene>

Here we set an img tag in with the id attribute of texture and entered a url for the src attribute. All good you’ve seen this before. The only difference is the id attribute which basically allows you to refer to that name later on in the code.

With our we are referencing the img tag above via the id. For id’s, you need to add a # in front for it to work.

This way is better due to performance of your aframe experience.

Explore

  • Find some images online that you would like to use for textures on your block by utilizing the above method.

Customizing Environment

Not only can we modify objects in our scene, we can modify the entire environment.

Aframe generates some premade environments that you can play around with.

We do this by modifying this piece of code:

<a-entity environment="preset: starry; "></a-entity>

We utilize the environment component by modifying the preset attribute.

Here are a list of different values we can have for the preset attribute:
– egypt
– forest
– japan
– starry
– yavapai
– volcano
– arches
– tron

Try each one of them out Decide on which one you like best

Other attributes we can modify:
– skyColor: use hex values
– groundColor: use hex values
– groundColor2: use hex values
– ground: flat, hills, canyon, spikes, noise
– dressing: cubes, pyramids, cylinders, towers, mushrooms, trees
– dressingAmount: any valid number

Example:

<a-entity environment="preset: forest; skyColor: #445; groundColor: #445; groundColor2: #6d3957; ground: canyon; dressing: trees; dressingAmount: 200"></a-entity>

Explore

More Options

Lab Activity

  • Add 3 different boxes and 3 spheres to your scene
    Hint: <a-sphere></sphere> behaves the same way as <a-box></a-box>
  • Each object should have it’s own texture
  • You should have a customized environment that modifies the attributes above

Follow us online