frame academy

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

project #2: adding animations to your webxr sites

a few helpful notes about This project

• You should do Project #1 before doing this project, or at least skim through it to make sure you understand 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. 🕸
• We're going to learn how to play, create, and add simple animations to your WebXR site. All with basic HTML! 🤯
• We're also going to learn how to find and use A-Frame components, opening up incredible, easy-win possibilities for your WebXR projects. ⭐️
• This project has 3 parts, and each part has a challenge. If you go through the challenges, you will hone your skills + enhance your WebXR site. 🔨
  
• 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! ✋
• 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. 💌
  

a-frame components

In Project #1, we went over how to bring Sketchfab models into your WebXR site. For the first part of this project, I'll show you how to play animations included on 3D models from Sketchfab. After that, we'll learn how to make our own animations to create all sorts of neat and useful effects. We can do it all with HTML!

Take a peek at the project I'm starting with:

Some quick review: In Project #1, we learned that the building blocks of many web sites are HTML elements. For example, one of the elements inside my scene is a-gltf-model. This is the element that brings the 3D model into the scene. HTML elements have an opening tag and a closing tag.

We also learned that you can use HTML attributes to modify the appearance or behavior of your elements. In my project, the a-gltf-model element has a few attributes on it, including position, rotation, and scale.
‍
Now, I'm going to introduce a new, important concept: components. The good news? We've already been using components, even if we didn't use that word for it. Position, rotation, and scale are actually all A-Frame components. A-Frame components are special chunks of code that you can plug into your A-Frame elements by using HTML attributes. So, if you know how to put HTML attributes on an HTML element - you already know the basics of using components!

When you use A-Frame, you have access to super powerful, ready-made components that you can use immediately in your VR projects! To see a list of all the components that come with A-Frame, head to the A-Frame documentation and scroll down in the navigation menu

You can click on any of them to see examples and explore all the ways you can customize them.
‍
I encourage you to explore around the A-Frame components so that you can get a sense of some of the possibilities. You can also experiment by copying and pasting examples from the documentation into your Glitch project. Don't worry if you run into words and concepts that you don't understand. You're on a learning journey - take it at your own pace and have fun with it! If you try something in your project and don't see the results you expect, shoot a question in the community and we'll do our best to help you out.

Now that you know a little bit about components, you're ready to start using them to bring animations into your WebXR project! In my project so far, the 3D model is in there, but it's not animated.

importing components into your html

See the water moving and the leaves blowing in the GIF above? We're almost there! To play the animation on the 3D model, I'm going to use a component called animation-mixer. If you look in the list of components in the A-Frame documentation, though, you won't see a component with that name. What's up with that?

Get ready to hear something that absolutely blew my mind the first time I understood it: in addition to the components that come with A-Frame, there are tons of other A-Frame components that developers around the world create and share openly with the world. There are new ones being created all the time. You can import those A-Frame components in your own WebXR project, and you can even edit those components to customize them how you want.

In a future Frame Academy course, you'll learn how to write your own components - and I hope you'll share some of your components with the A-Frame community! The possibilities are infinite. For now, though, we're going to see how to import and use other people's components. After all, if someone has already done the coding to make animations work, and they've shared their work with the world, there's no reason for you to reinvent it!

So, how do you find other A-Frame components made by the developer community? One place to start is the A-Frame registry, a curated collection of A-Frame components. The component I want to use, animation-mixer, was written by a brilliant developer, Don McCurdy. Find Animation Mixer in the Registry and click the Github button to open it up on a site called Github:

What's Github? Github is a sweet site that developers use to store, update, and share their code, so it's a great place for people to share their A-Frame components with the world. If you ever want to share your code, one way to do it would be to put it on Github. We'll learn how to use Github in a future project.
‍
I'll admit that when I check out projects on Github, there's almost always a ton of stuff I see that I don't fully understand. My advice? You don't need to fully understand something in order to use it. As you keep learning, I think you'll be surprised at how quickly more and more things begin to make sense to you.
‍
We need to find the script for the component so we can bring it right into our projects using the script element. Scroll to the "Usage" section of the Github page (see GIF above) and copy the "script" element you see there. You can plug this element right into your HTML.

Paste the script element into the head element of your Glitch project, right below the script that bring A-Frame itself into your project.

<head>    </head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"> </script>    
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v5.0.0/dist/aframe-extras.min.js"></script>  

‍
This new script is what brings Don McCurdy's animation-mixer component into your project, making it immediately usable in your project. Now that the code for the component is in our project, how do we actually add it to our 3D model so that its animation plays? We've seen it before: with HTML attributes.

The name of the component is animation-mixer, so just just add animation-mixer as an HTML attribute to your entity. It's that simple!


position="-47.681 -37 -58.220" rotation="0 155 0" scale=".02 .02 .02" animation-mixer>
‍
Here's my updated project - check out the working animation!

Tip: You might be wondering why the animation-mixer attribute doesn't need any value - it works its magic just like that on its own. This is because the animation-mixer component has default behavior that, in this case, makes it do exactly what I wanted. This won't happen with all components, though!

Not all 3D models from Sketchfab have animations on them. You can filter any of your Sketchfab searches so that they only include animated models by using the "animated" filter like this:

You can also tell if a 3D model from Sketchfab has an animation on it if it has a tiny icon on the top right of the thumbnail, like on this one: