Learning Goal #7
3JS Variable Manipulation
PART 1: OPENING DISCUSSIONRead More
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
TOPIC 3: HOW DOES IT WORK?
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
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.
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.
PART 2: DAILY DESIGNRead More
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
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.