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

Project goals

I hope that by going through this small project, you will learn:

part 1: playing animations on 3d models

setup your project

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.

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! If you did Project 1, you can keep building on your existing project, but if you want to make a new one use this button:

start your own project on Glitch

You can also "Remix" any of the code samples you see throughout the project 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. You can also always copy and paste my code into your own project..

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.

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!

Tip: One thing to keep in mind when you use other people's components is that they aren't guaranteed to work. Be sure to test them to make sure they work as expected.

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.

Tip: Most A-Frame components you find on Github will have a "Usage" section that provides this script. Paste the script element into the head element of your Glitch project, right below the script that bring A-Frame itself into your project.

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>    
<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>  
</head>

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!

<a-gltf-model src="https://cdn.glitch.com/b340c7cd-dc00-456b-9d34-5145c16fc8fe%2FForest%20Scene.glb?1544740232462"                      
position="-47.681 -37 -58.220" rotation="0 155 0" scale=".02 .02 .02"
animation-mixer></a-gltf-model>

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!

finding 3d models with animations on sketchfab

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:

🔥 challenge #1 🔥

Each part of this project comes with a challenge. As you go through the challenges, you'll be building a WebXR site that will work on desktop, mobile, or VR!

First, find a Sketchfab model with an animation and bring it into your project. Need a refresher on how to bring Sketchfab models into your HTML? See that part of Project 1. Once you have the 3D model showing up in your site, bring the script for Don's animation-mixer component into your head element. Finally, put the animation-mixer component on your a-gltf-model element. All of these steps are shown above if you need to review!

Finally, check out your site and make sure the animation is playing on the 3D model! If you have any questions or run into any issues, just ask in our online community!

Move on to part 2 >
creating your own animations