Cut And Paste Code For Lesson 21

This week we'll learn to make and place 3D objects.
Click here to go back to our lessons page.


Step by step 3D object creation:

Start he ICE editor, and click the three bars to the right of the "HIDE CODE" button to start a new project.

A new project will start, and code will appear.

Under the "START CODING ON THE NEXT LINE" comment, add our 4 lines again:


var shape = new THREE.SphereGeometry(100);

var cover = new THREE.MeshNormalMaterial();

var ball = new THREE.Mesh(shape, cover);



3D shapes in javascript are created by making a shape, then adding a covering.

The basic shape is called a "mesh."

Everything takes place in a "scene."


Change the size of your ball by changing the diameter number:

var shape = new THREE.SphereGeometry(250);


Make your ball smoother by adding polygons to the length and width.

var shape = new THREE.SphereGeometry(1000, 20, 15);


(Diameter, left and right poly size, up and down poly size)


Change the ball's position by adding:

ball.position.set (-250,250,-250);


And while we're at it, how about a cube!  Replace the SphereGeometry line with:

var shape = new THREE.CubeGeometry(100,100,100);


Let's rotate our camera to look at the box from other views.  Add this line:

ball.rotation.set(0.5, 0.5, 0);


Experiment with these numbers to see what the affect.  Note: A full rotation is 6.3, so don't get too crazy!

Changing the CubeGeometry numbers will change the size of each side.

Now, what we have is really a box, not a ball, so you CAN change all references from "ball" to "box" if you like.


A cylinder is just as easy! Replace the SphereGeometry line with:

var shape = new THREE.CylinderGeometry(20,20,100);


Note: These numbers determine (top size, bottom size, how tall)

Can you think of how to make a cone shape?


All right!  Time to start your 3d world.  Create your best design!


Notes:  Your work is automatically saved as you go.  So usually, saving isn't needed.

However, I STRONGLY reccommend you save important work as a text file!