Getting Started
Click “Save" on that menu and change the project name from
```3D Starter`” to “Shapes”:
Then click the “Save” button. That’s it! You are now working on a
new “Shapes” project.
As you work through this chapter, save after each shape. You
won’t have to change the name of the project again.
1.2. Shapes
So far, we have seen one kind of shape: the sphere. Shapes can be simple
like cubes, pyramids, cones, and spheres. Shapes can also be more
complex things like faces or cars. In this book, we are going to stick with
simple shapes . When we build things like trees, we will combine simple
shapes, like spheres and cylinders, to make them.
1.2.1. Sphere
The ball that we made is a sphere. Sphere just is another name for a ball.
There are two ways that we will control the shape of a sphere.
4
Getting Started
1.2.1.1. Size: SphereGeometry(100)
The first way that we can control a sphere is to describe how big
it is. We created a ball whose radius was
when we said &
. What happens when you change the radius to
250?
$ ##
&
&
&
$ ##
!
!
"
#!
%
'(
#
))
You don’t have to type the two slashes or the “1”. This just points to
where you should change the sphere’s size.
This should make it much bigger:
What happens if you change the 250 to 10? As you probably guessed,
it gets much smaller. So that is one way that we can control a sphere’s
shape. What is the other?
1.2.1.2. Chunky: SphereGeometry(100, 20, 15)
If you click on the "Hide Code" button in ICE, you may notice that our
sphere isn’t really a smooth ball:
5
Getting Started
!
$ ,
"
!
#!
#
%
$ ,
If you have everything correct, you should see… a square:
Well, that’s boring. Why do we see a square instead of a box? The answer
is that our “camera” is looking directly at one side of the box. If we want
to see more of the box, we need to move the camera or turn the box. Let’s
turn the box by rotating it:
&
&
$ ,
$ ,
&
$ ,
*+$
!
"
!
(%
(%
#!
%
%
#
%
))
These three numbers turn the box down, counterclockwise, and leftright. Play with the numbers if you like. To make a full turn in any
direction, you would need a number around 7.3 (we’ll talk about that
number later).
This should get the cube rotated so that we can see that it really is a cube:
8
Getting Started
Each side of a cube does not have to be the same size. Our box so far is
100 wide (from left to right), 100 tall (up and down) and 100 deep (front to
back). Let’s change it so that it is 300 wide, 100 tall and only 20 deep:
*+$
!
"
$ ,
!
#!
%
#
% '
%
$ ,
$ ,
(%
(%
This should show something like:
Play around with the numbers to get a good feel for what they can do.
Believe it or not, you already know a ton about JavaScript and 3D
programming. There is still lots to learn, of course, but we can already
make balls and boxes. We can already move them and turn them. And we
only had to write 10 lines of JavaScript to do it—nice!
Like the ball, let’s move our box out of the way so that we can play with
more shapes:
*+$
!
"
$ ,
!
#!
%
$ ,
$ ,
$ ,
(%
(%
'( % '( %
'(
9
%
#
% '
Getting Started
1.2.3. Cylinder
A cylinder, which is also sometimes called a tube, is a surprisingly useful
shape in 3D programming. You might expect that cylinders can be used
as tree trunks, tin cans, wheels. You probably would not think that
cylinders can be used to create cones, evergreen trees and even pyramids.
Let’s find out how!
1.2.3.1. Size: CylinderGeometry(top_size,
bottom_size, height)
Below the box code, type in the following to create a cylinder:
* #
!
"
!
+$
#!
%
' % ' %
#
+$
If you rotate that a little (you remember how to do that from the last
section, right?) then you might see something like:
If you were not able to figure out how to rotate the tube, don’t worry—just
add this line, after the line with
+$ :
+$
(%
%
When making cylinders, the first two numbers describe how big the top
and bottom of the cylinders are. The last number is how tall the cylinder
is. So our tube has a top and bottom that both are 20 in size and is 100 in
height.
10
Getting Started
What did you find?
A flat cylinder is a disc:
And a cylinder with either the top or bottom with a size of 1 is a cone:
It should be clear that you can do a lot with cylinders, but believe it or
not, we have one trick left.
1.2.3.2. Pyramids: CylinderGeometry(1, 100, 100,
4)
Did you notice that cylinders look chunky just like spheres do? It should
be no surprise then, that you can control the chunkiness of cylinders. If
you set the number of chunks to 20, for instance, with the disc:
* #
!
"
!
+$
%
#!
%
+$
+$
(%
%
Then you should see something like:
12
#
%
% '
Getting Started
!
/
+
/
/
"
#!
!
#
%
+
+
(%
%
Don’t forget the rotation on the last line—planes are so thin that they you
might not see them when looking directly at them.
The numbers when building a plane are the width and depth. A plane that
is 300 wide and 100 deep might look like:
That’s pretty much all there is to know about planes. Move it out of the
way:
/
.#
!
!
+
/
/
"
#!
%
#
%
+
+
'( %
'( %
'(
Now, let’s move onto the greatest shape in the world…
1.2.5. Donuts
In 3D programming speak, a donut is called a “torus”. The simplest torus
that we can create needs a size for the whole donut and a size for the
tube.
1.2.5.1. TorusGeometry(100, 25)
Type the following into ICE:
!
+
"
#!
15
% '(
#
Getting Started
+
!
%
+
You should then see a very chunky donut:
By now, you ought to expect how to make the donut less chunky…
1.2.5.2. TorusGeometry(100, 25, 8, 25)
The two chunks that make a donut shape go around the tube (the first
number) and go around the outside of the donut (the second number). Try
experimenting with numbers like:
!
!
+
+
"
#!
%
+
Now that is a good looking donut:
16
% '(% 0% '(
#
Getting Started
1.2.5.3. TorusGeometry(100, 25, 8, 25, 3.14)
There is one other trick that we can play with donuts. Try adding one
more number, - 1, to the
+
shape:
!
!
+
+
"
#!
%
% '(% 0% '(% #
1
+
That should make a half-eaten donut.
1.3. Spinning
Before we finish our first programming session, let’s do something cool.
Let’s make all of our shapes spin around uncontrollably.
In ICE, add the following code after all of the shapes:
#
2
*#
2
3
4+
5
6
#
$ ##
$ ,
+$
/ +
+
2 /
#
% '7 %
% '7 %
% '7 %
% '7 %
% '7 %
%
8
Don’t worry too much about what everything means in that code—we will
look at all of those lines in more detail later in the book. Just know that
17
Getting Started
we are updating the rotation of all shapes as time goes by. And, after each
change in rotation, we tell the renderer to draw the current shapes on the
screen.
1.4. Conclusion
Whoa! That was pretty crazy. We learned a ton and we’re just getting
started!
So far, we know how to code projects in the ICE Code Editor. We know how
to make a lot of different shapes. We even learned how to move and spin
things with JavaScript.
Speaking of JavaScript, we wrote a lot of it. To be sure, we still have lots to
learn, but we are off to an impressive start.
And, best of all, we wrote 15 lines of code to create a pretty cool animation.
That is a pretty good start.
18
A Rafting Game
Keep Going!
Want to make your player move? Want to build 3D games?
Keep going at http://gamingJS.com!
118