In the last level, you were finally able to see most of your 3D shapes come to life. Now, we’re going to work with an avatar that connects a lot of the objects you’ve learned how to manipulate. Follow the steps below to get set up.

STEP 1: Program Setup
Open Notepad++ and close down all of your old files.

STEP 2: File Setup
Create a new document with Notepad++ and save it as “avataranimation.html” in your LG8_gamejs subfolder.

STEP 3: Code Setup
Copy this new source code and paste it into your “avataranimation.html” document.

STEP 4: Screen Setup
Open up your page with Chrome, then create a split screen so that you can see your code on one side and your avatar on the other.

STEP 5: Color Setup
When you look at your avatar, you should notice that there are three colors. See if you can identify the location in your code where the colors have been added to the avatar, then use Hail Pixel to choose three colors of your own (unless you have some “go to” colors that you already like).

STEP 6: Class Setup
Help the rest of your team. After about 5 minutes, you will be working with the teacher to add some animations to the avatar.

During the last couple of designs, you’ve learned several things. You’ve learned how the “scene” is kind of like a canvas. You’ve learned how the Perspective Camera impacts the visibility of your objects. You’ve learned how to adjust the width/height of your working space. You’ve learned how to alternate between MeshBasic and MeshNormal material and even how to use a wireframe. But the main thing you learned was how to animate objects and avatars.

You were not required to memorize everything about the animation code, but you were expected to pay attention and understand a few things about how it works. On the off chance that you couldn’t get it to actually work in the end, here is a simple replacement code so that you can catch up with the class for Avatar Control. Simply delete your existing code and use this one instead.

During this section, you will be learning how to animate specific parts of our avatar and how to use the keyboard to control either all of our avatar or just parts of it.

Keyboard Control