frame academy
Learn how to create immersive, cross-platform websites.
project #1: create a webxr site with basic html
a few helpful notes about Project #1
- You don't need to know anything about coding to start this project, but you will learn and use some basic HTML as you go through it. 📕
- We're going to learn about something called WebXR: a way to create websites that deliver VR or AR experiences right from a web browser. 🕸
- If you have any questions as you go through the project, I encourage you to ask in our online community. We can all learn from each other! ✋
- If you want to share your VR creations on social media, use the hashtag #frameacademy so that it's easy for others to discover your work. 👀
- This project has 5 parts, and each part has a challenge. If you go through the challenges, you will hone your skills + make your first 3D site. 🔨
- You can use the orange button on the top left to browse through the different parts of the project. I encourage you to go in order, though. 🍊
- When you're done with your project, you can post it on the Frame Gallery so that we have a handy place to explore projects + learn from them.🎨
- If you're curious to hear more about Frame, email hello@framevr.io. We help with WebVR projects + do workshops for schools + businesses. 💌
Project #1 goals
I hope that by going through this project, you will learn:
- how to build a simple 3D web site with shapes, 3D models, photospheres, and text with basic HTML. in other projects, you'll see how to make it interactive.
- how to share and view your 3D web sites from virtual reality, desktop, and mobile.
- how to continue on your learning journey
Part 1: shapes And html
Each part of the project has a video at the top where I guide you through the project. The video is the best place to start, but I also break down the content below so that you can follow along step by step.
I know that when I did this first video, my webcam was a little laggy! In all the other videos, I'm using a different webcam. Sorry about that!
To code our projects, we're going to use something called Glitch, a sweet tool that gives you a way to write your code from a web browser. Glitch also hosts your website for you, letting you see the results of your code immediately! Use this button:
You can also "Remix" any of the code samples you see throughout the course by using the "Remix to Edit" button you'll see next to them. This lets you make a copy of my code that you can edit, build upon, and make your own.
To save your Glitch project so you can keep working on it whenever you want, you have to sign in to Glitch with a free account. The sign in button is on the top right of Glitch.
Reminder: Have a question or idea? Check out the Frame Academy Community on Discord.
setting up your html
To create our 3D web site, we're going to use something called HTML. HTML (HyperText Markup Language) is a popular language for setting up web sites. I'll show you the basics. Once we cover the basic set-up, you'll be using your new HTML skills to build epic 3D sites in no time.
In your Glitch project, look at the sidebar on the left and make sure you have "index.html" selected, like I do in the code sample below.
HTML documents are made up of elements. The first element we need? It's one that every HTML document needs: the html element! To put HTML elements in your document, you use tags. Most HTML elements need two tags: an opening tag and a closing tag. The closing tag is the same as the opening tag, but it has a / in it. Here's what the html element looks like in my project:
<html></html>
is the opening tag
is the closing tag
When you add other elements to your HTML, they all need to go inside the html element - you can think of it as the container that holds all of the other elements. It doesn't make anything cool show up in our 3D site, but without it we couldn't do anything at all!
All of the stuff that will show up in your 3D site needs to be inside a body element. Other things that you need for setup go inside a head element. So, let's put both a head element and a body element inside our html element.
To put an element inside another one, you can sandwich it inside another element's opening and closing tags like this:
Tip: Because the head and body elements are inside the html element, they are called the children of the html element. The html element is called - maybe you guessed it - the parent!
Let's set up our head element first. The head element is where I can import other code into my project. Why do I need other code? Well, a lot of the magic that turns your HTML into a 3D experience is all thanks to some code called A-Frame. We can use A-Frame for free because it is open source, which means the A-Frame code is openly available for anyone to use, inspect, and even modify!
How do we add the A-Frame code inside our own project? We do this by putting a script element inside our head element. Our head element should then look like this:
<head> </head>
<script></script>
We're off to a good start, but right now the script element is empty. It's not bringing A-Frame or anything else into our project! To make sure our script element finds the A-Frame code, we have to modify the element. You can modify HTML elements with html attributes.
Different attributes do different things, and you can add multiple attributes to a single element. To set the source of our script element, we can use the src attribute. You put attributes in the opening tag of the element you want to change. I'll set the value of the src attribute to be a link to the A-Frame code. Here's how the src attribute looks on my script element:
<head> </head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
Notice that the value of the attribute, the part that comes after the equals sign (=), has to be in quotation marks!
Here's my full project with its new script element.
When I put one element inside of another element, I indent the spacing of it so that it's easier to see how the entities are nested. Look at how my script element is indented inside the head element.
Your first shapes
Still no fireworks yet, I know - but we're close to seeing cool stuff! Let's keep it simple at first. We're going to make a scene with a box in it. To make a scene, put an a-scene element inside the body element. Then, put an a-box element inside the scene element!
Tip: The reason why the a-scene element is named a-scene of just scene is because it comes from A-Frame, the code we imported into our project earlier. A-Frame decided to name their elements this way (another example is a-box).
Now that we've made our box, you might be wondering: why don't we see anything in the scene yet? Well, making the a-box entity does indeed create the box, but we still haven't set the position of the box to a place where it shows up in our scene. To do this, we can once more use attributes, the same thing we used when we set the src of our script element. Here, I'm using the color attribute to modify the color of the box.
<a-box color="blue"></a-box>
Remember, the value of the attribute has to be in quotation marks.
Want to change the box's position to place it in front of the camera? You could add the position like this.
<a-box position="0 0 -4" color="blue"></a-box>
Want to make it so when someone clicks on your box, it plays a song or displays a 360 photo? You can give elements in your scene any appearance or behavior you want, and eventually you'll know how!
For now, though, let's just set the position and color of our a-box element:
the basics of position
Sweet! We finally have something showing up on the right. It's only a simple, blue box - but every VR experience has to start somewhere. :)
You might be wondering why the position in my example needs three numbers (position="0 0 -4"). The first number is the position of the shape to the right or left, the second number is the position of the shape up or down, and the third number is the position of the shape forwards or backwards. To make sure a shape shows up in front of your camera, the third number of your position needs to be negative.
We're going to dive more into position in 3D space in the next part of the project!
Now that you know how to add html elements to your site and give them attributes to them like position, you can already do tons of stuff. Want some other shapes to add? Instead of <a-box></a-box> you could also add <a-sphere></a-sphere>, <a-cylinder></a-cylinder>, <a-plane></a-plane>, <a-dodecahedron></a-dodecahedron>, and some really funky ones like <a-torus></a-torus> or <a-torus-knot></a-torus-knot>. Remember to use both their opening and closing tags if you add them to your scene!
🔥 challenge #1 🔥
Each part of this project comes with a challenge. As you go through the challenges, you'll be building your 3D website that will work on desktop, mobile, or VR.
Put a few other shapes inside your scene, and set the position of each one to make sure that they are all in view and not right on top of one another. Remember, you can make sure a shape appears in front of the opening view of your scene by setting the position with a negative third number. For example, position="0 0 -3" or position="0 0 -6"
If you want to tinker more, try also setting the rotation and scale of your shapes. Here's an example you can use so you can start to see how they work and tinker with them:
<a-box position="0 0 -4" rotation="0 45 0" scale="3 3 3"></a-box>
At the start of the next section, I'll show you how I did the challenge, but I encourage you to experiment on your own before looking at my example!
