Lesson goal: Introduction to 3d graphics

Previous: Draw a trail | Home | Next: Depth with 3D graphics

Note! To do this lesson, you need a WebGL-enabled browser (if in doubt, just use Chrome). Here's more information.

Here's an exciting application in computer programming: drawing using three-dimensional computer graphics. Thanks to some technology called WebGL, you can render 3D graphics right in your web browser, and that's what this lesson is all about. Such 3D graphics can have a very compelling look, particularly because of the perspective and lighting effects that the objects have. Spheres look nice and round (with a limb) and boxes look rigid and "boxy."

From a mathematics point of view, 3D plotting allows you to think of the Cartesian Coordinate System in three-dimensions now, not just two. Mostly you deal with $(x,y)$ coordinates in math class, and this was covered in this lesson.

For 3D graphics, you need to think about $(x,y,z)$ coordinates. Here, the $x$ and $y$ axes are in the plane of the screen as usual. $+x$ is to the right, and $-x$ is to the left. $+y$ is up and $-y$ is down. But now, you'll have the $z$ axis, which runs out-of and in-to the screen. $+z$ is toward you as the viewer and $-z$ is away from you. The 3D render engine will provide all of the perspective, meaning closer objects will be bigger than farther objects, etc. Cool stuff!

We'll start with two core functions for 3D drawing as described here. Have fun!

Move the mouse over a dotted box for more information.

You can find a list of color codes here. The 3D drawing area will appear under your code-editor. You might have to scroll down to see it.

Now you try. Fill in a x,y,z coordinates and a radius to draw a 3D sphere. Try experimenting with the $z$ coordinate and watch the perspective change.

Type your code here:

See your results here:

This code will not run! Fill in $(x,y,z)$ coordinates of the sphere, and a radius. To start out, keep all numbers between 0 and 10 or so. Dismiss.
Show a friend, family member, or teacher what you've done!

Here is a share link to your code:

Does your code work? Want to run it on your iPhone?

Here's your code:

  1. Use [Control]-[C] (Windows) or [⌘]-[C] (MacOS) to copy your code.

  2. Paste it using [Control]-[V] (Windows) or [⌘]-[V] (MacOS) into this page

  3. Then click the "Use on iPhone" button that you'll see.