Intro to Aframe
Intro to Aframe
- Click Here, click on profile in the top right and select sign out
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
- 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
- Click on Sign In, then click on Sign In with Github
- Use your username and password to login
- Follow instructions below:
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
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.
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
- 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?
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
- 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 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.
- 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">
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:
Aframe ships with the basic colors such as:
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:
Copy that value and paste like so:
- Find a color you like and paste that into your color attribute and put that into your box object.
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:
<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
# in front for it to work.
This way is better due to performance of your aframe experience.
- Find some images online that you would like to use for textures on your block by utilizing the above method.
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:
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
<a-entity environment="preset: forest; skyColor: #445; groundColor: #445; groundColor2: #6d3957; ground: canyon; dressing: trees; dressingAmount: 200"></a-entity>
- Add 3 different boxes and 3 spheres to your scene
<a-sphere></sphere>behaves the same way as
- Each object should have it’s own texture
- You should have a customized environment that modifies the attributes above