TOPIC 1: Reviewing the Quiz Grade

Impressive. Seriously impressive. Your work was, without question, the best in all the semesters this course has been around. More As. More Bs. More incredible design work, altogether, than anyone else has ever done. That means what you produce on the other side of the semester should reflect the work you’ve already done.

TOPIC 2: Reflecting on Two Dimensions

Up to this point in the semester, everything you’ve designed has been two-dimensional. Even in Video Game Design I, most of what you did was based on two-dimensional designs. That means you’ve been designing things that are mostly flat. But modern video games are usually not flat. Characters, objects, and avatars typically have multiple dimensions. The best definition of two-dimensional is an object that has length and width. Notice, however, that a two-dimensional object has no depth.

TOPIC 3: Imagining Two Dimensions

Imagine for a moment that you are a two-dimensional character on a piece of paper. You don’t see depth. You don’t see three dimensions. You live in two dimensions and you see in two dimensions. What would things look like to you in that world? How can you be sure? After a few people give their best hypotheses, we’ll do an activity to test some of our theories.

TOPIC 4: Thinking of More Dimensions

The fact is, our lives exist in more than two dimensions. But are we living in just three dimensions? Or are we living in four, five, six, or more dimensions? Some experts have argued that the universe is made up of at least 26 dimensions. And some experts argue that time (or “spacetime”) is an example of the fourth dimension because without it, there would be no beginning or end of anything. When it comes to graphics, trying to imagine any more than three dimensions (length, width, and depth) is really difficult. The video below is one way to think about more dimensions, even though it might blow up your brain.

TOPIC 5: Back to Three Dimensions

In the early days of the World Wide Web, interactive objects were always drawn as two-dimensional. That includes interactive objects that were created with JavaScript. But eventually, companies like Google figured out how to create more complex interactions on the web. Click Here to Begin.

Find the following addresses, then explore the area around them to see what is nearby using the zoom feature.

• 23 Seminola Blvd, Casselberry, FL 32707
• 3101 PGA Boulevard, Palm Beach Gardens, FL 33410
• 1460 Melmart Dr, Bartlesville, OK 74006
• 5200 Robinson St, Niagara Falls, ON L2G 2A3, Canada
• Thurso KW14 8XH, UK
• Champ de Mars, 5 Avenue Anatole France, 75007 Paris, France

TOPIC 6: What actually IS the Third Dimension?

So much of the world wide web depends on our ability to zoom in and out of a page. If the words are too small, we zoom in. If the picture is too large, we zoom out. Normally, we don’t think of this as part of three-dimensions, but that’s exactly what it is. For example, in a graph of geometric shapes, you might normally see (X, Y) representing the width and height, but in three dimensional geometry, you would almost definitely see (X, Y, Z) representing the width, height, and depth, which we call the Zoom Level. Click here to experiment with Geometric Solids by zooming in and out of a net.

Today is all about working with three-dimensional shapes on a preset background. What we’re really doing is working with shapes on an invisible graph that you can’t see. It’s called your screen monitor. It has width (x) and height (y) that we sometimes call the Screen Resolution. Objects on the screen will move along the X, the Y, and even the Z axis as we experiment with various shapes. Each of the steps below will be discussed as a class, so no one should ever feel like they’re falling behind.

STEP 1: Screen Resolution

First things first, figure out what your screen resolution is so that you know how many pixels you have to work with from one side of your screen to the next.

STEP 2: The Screen as a Graph

Next, we need to start looking at our screen like a coordinate graph that you’ve used in math class. Open this image and try to put the origin point (0, 0) at the center of your screen. This will help you to begin realizing that every object in a video game is moving along points of a graph depending on where the designer has placed them.

STEP 3: Getting Set Up

f you understand what we’ve talked about so far, then we’re ready to construct some 3D shapes on a preset background. Open Notepad++ and close down any of your old files. Then create a new file and save it as “3dshapes.html” in your LG7_threejs Folder. See if you can find the hidden source code.

STEP 4: What You Already Know

Let’s start with the simple things you already know. Change the background to either one of your own images or get rid of the image entirely and replace it with a gradient. Make your background unique and personal because once you get it set, we’ll be focusing on the 3D object in the middle of the screen.

STEP 5: A Few Things You Don’t Know

1. camera.position.z = 400; – This is how close or far the camera is looking at the image. The lower the image, the closer it will come to your screen, but if you go too small, it will be too large to see.
2. var shape = new THREE.SphereGeometry(50, 50, 10); – Earlier in class, we talked about how the third number has to do with zooming in and out, but in this case, the third number adds more lines to the sphere in order to smooth out the shape. So in a way, we’re still talking about Zoom, but not from the perspective of going forward or backward from the front of the screen. Experiment with the numbers by making small changes, then we’ll end with (100, 100, 50). Technically, you could ignore the three numbers and just use a single number like (200) because all sides should be equal, but you have more control over the appearance with three points.
3. ball.position.set(0, 0, 0); – This is your first chance to experiment with placing the sphere in a specific place on your screen.

   Remember, the first number is X and this is going left and right from the origin point of (0, 0) in the middle of your screen. Negative numbers move your object left. Positive numbers move your object right. Really high numbers will move your object off the screen.

   The second number is Y and this is going up and down from the origin point of (0, 0) in the middle of your screen. Negative numbers move your object down. Positive numbers move your object up.

   The third number is Z and this is going toward and away from the front of the screen. Positive numbers move your object closer to the screen (and make it appear larger). Negative numbers move your object further away from the screen (and make it appear smaller).

   Experiment for a few moments, then we’ll try a few different shapes.

STEP 6: Your Shape Options

1. Cube Geometry – In the line that says “var shape” replace the word “Sphere” with “Cube” and change “ball” to “box” (3 places). Copy the line that says “box.position.set” then paste it on the line below, but change “position” to “rotation,” then experiment with the numbers again. In the box.rotation.set section, the numbers turn the cube down or up, clockwise or counterclockwise, and left or right. In the box.position.set section, the numbers move the object around the screen (X, Y, Z).
2. Rectangle Geometry – Simply change the numbers next to CubeGeometry so that they are not equal and you will see a similar change.
3. Cylinder Geometry – In the line that says “var shape” replace the word “Cube” with “Cylinder” and change “box” to “tube” (4 places). Since this is a cylinder, see if you can create a 3D Cone (a cylinder with a point) or even a 3D Disc (a flat cylinder) just by changing a few numbers around.
4. Torus Geometry – In the line that says “var shape” replace the word “Cylinder” with “Torus” and change “tube” to “donut” (4 places). Adding a fourth number next to TorusGeometry can help to smooth out the donut. See what you can come up with here.
5. Torus Knot Geometry – In the line that says “var shape” replace the word “Torus” with “TorusKnot” and change “donut” to “knot” (4 places). You can now create a twisted knot that looks like sticks or a twisted knot that looks like a big snake.
6. Multiple Shapes – Now comes the challenge. Can you figure out how to put multiple 3D shapes in different places around the screen? Remember a simple tip: Your screen is like a graph. If you have two objects right on top of each other, you won’t see both of them, so make sure you change their positions if you have more than one shape on the screen. See if you can figure this one out either on your own or with your partner.