TOPIC 1: FIRST, LET’S PLAY

The time has come to look a little more closely at Three.JS. Let’s begin by playing a simple game called Where’s Waldo in 3D. After you finish playing, take a look at the source code and see if you can identify some familiar things in the code. How does it work? Why does it look the way that it does?

TOPIC 2: OVERVIEW OF THREE.JS

For the rest of the semester, you’re going to be working with something called ThreeJS. In fact, you’ve already worked with it once before. But before we look at it, let’s talk about what it is. ThreeJS is basically just one big JavaScript Library that can be downloaded, and manipulated, and experimented with by Video Game Designers like you. But more specifically, ThreeJS is one really, really big code that makes it possible for games and interactive graphics to load faster on the World Wide Web. Here’s another example of a game or interactive graphic that only works with that ThreeJS library. It’s called The Climb Simulation.

TOPIC 3: HOW DOES IT WORK?

Over the last several weeks, when you were building things in a Canvas, you learned that JavaScript doesn’t work by itself. JavaScript only works if it is connected to an HTML page (and the same goes for CSS). In the same way, ThreeJS is a really, really, really, really long JavaScript code library that gets connected to an HTML page and then tells the browser what kinds of shapes, colors, and dimensions can be applied. Normally, you won’t ever mess with an average ThreeJS file because it has SOOOOOOO much information in it that a single change could literally make everything go away. But since you’ve never seen it, let’s look at more than 30,000 lines of the ThreeJS code for a few minutes. So here you go. Take a look.

TOPIC 4: DO WE HAVE TO KNOW ALL THAT?

Absolutely not. No one is being asked to learn all the complicated parts of ThreeJS during the next few lessons. In fact, you could spend a year working with ThreeJS and probably not learn everything about it. What you DO need to know is that all the things you manipulate and change over the next few lessons are dependent on those ThreeJS files to be connected. For example, near the top of this messy code, you should see a few SCRIPT tags that have an SRC (or source) connected to them.

TOPIC 5: OUR LEARNING GOAL

So if we’re not going to be learning everything about ThreeJS, then what exactly are we going to be learning? If you look at the top of the lesson, you will see that our learning goal is fairly simple. Students will be able to apply their basic knowledge of JavaScript to manipulate three-dimensional objects.. That means during each lesson, you will be given some new ThreeJS demo codes and you will be changing variables within those codes. But instead of just changing a bunch of things around for no reason, you will only be able to change one of them at a time. Why? Because you’ll need to get comfortable with the idea of writing JavaScript notes that explain what happens when you change a single variable or a single value or a single operation.

TOPIC 6: VIDEO GAME SUPERSTARS

As we’ve already discussed, no one can possibly master all that ThreeJS has to offer in a single learning goal, a single semester, or even a single year. But some of you are video game design superstars. Some of you like to work on these things from home. And some of you will probably look into ThreeJS on your own. If you are one of those students and you’re curious, below are a few great resources to get you started. Just know that none of the information below is required for you to succeed in this learning goal.

• A Beginner’s Guide to THREE.JS
• Getting Started with THREE.JS
• Learning THREE.JS
• Game Development with THREE.JS
• Mixing Canvas and THREE.JS
• 109 Examples of THREE.JS
• Download the THREE.JS Library

TOPIC 7: JUST FOR FUN

Before we start manipulating variables and values and operations, this is a great time for a ThreeJS Video Game Design Recess. Below are just a few examples of interactive games and animations built with ThreeJS. The teacher will put up a 10-15 minute timer on the board. Feel free to have some fun.

• HexGL
• Astray
• Enough
• Bruno
• Marble Table
• A Short Journey

At the beginning of today’s lesson, you got a chance to look at the source code for “Where on the World is Waldo in 3D.” Now the time has come to get the original source code that the Waldo Game was built from so that we can learn to manipulate the variables on our own. Before it was a Where’s Waldo game, it was just an interactive earth.

Getting all the files we need should be pretty simple this time. What we’re going to do is download something called a “zip” file and we’re going to put it in our LG7_threejs folder. But for many of us in the room, downloading a zip file is a new experience. So let’s do this part together. Pay careful attention.

STEP 1: Downloading a Zip File

Most of the THREE.JS files that you download (if you choose to work with Three.JS after the class is over) will come in something called “zipped” files. From time to time, you might see other programs that give you zipped files as well, even if you’re not working with video game design. Zipped files are basically just a file that has other files “zipped up” inside. To unzip a zipped file, all you have to do is right-click on the zipped file and choose “Extract All.” Here is the Zip File for the interactive earth. Go ahead and download this Zip File to your LG7_threejs folder.

STEP 2: Two Different Files, Two Different Folders

As we learned in the last step, to unzip your file, simply right-click on the zipped file and choose “Extract All.” This will pull all of your files out of their zipped version and create a regular folder of files that you can actually work with. By the way, if you try to make changes to the files inside of the ZIPPED folder, it won’t work. You can only make changes to files that are in regular folders (unzipped).

STEP 3: Delete the Zip

Once you have unzipped the .zip file and you can see the regular folder with all six files, delete the .zip file that you downloaded so that you don’t get confused. If you run into problems later, you can always go back and download the zip file again.

STEP 4: Looking at What You Have

In your “earth” folder, you should see 4 JavaScript files (.js), one image file (.jpg), and one page file (.html). Make sure you have all of these files.

STEP 5: Your First Manipulation

Most of the changes and variables that you’ll want to make on the interactive earth will be in the one HTML file that you have (but inside the < script > tags, of course). Your job is to try and manipulate as many of the variables as possible during the time we have left. You might even want to try and see if you can figure out how the Waldo game was created and recreate your own version. The better you are at manipulating variables, the more prepared you’ll be for the learning goal project that starts in a couple of weeks.