If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

### Course: Computer programming - JavaScript and the web>Unit 4

Lesson 7: 3D shapes

# What are 3D shapes?

This tutorial is from Peter Collingridge and was originally posted on his website.
If you've been programming here on Khan Academy, you've probably drawn a whole lot of 2D shapes, like with rectangles and ellipses, and maybe you've wondered to yourself how to make 3D shapes, like cubes and spheres.
Well, the ProcessingJS library that we use here isn't really designed for 3D graphics, but as it turns out, with some trigonometry, we can write our own 3D graphics engine  and, in doing so, learn a bit how 3D graphics work (and why there is a reason to learn trigonometry besides making math teachers happy!).
Here's an example of the sort of program you can make - use your mouse to rotate the donut around:

### What are 3D graphics?

Since computer screens are essentially two-dimensional, 3D graphics are just 2D optical illusions that trick your brain into thinking it is seeing a 3D object. Here's a simple example:
A 3D graphics engine works by calculating what 2D shapes a 3D object would project on to the screen. So to write our own 3D engine, we need to know how to do these calculations. Our program won't be as quick as most 3D engines but it should help us understand the principles of how they work.

### Representing shapes

A 3D graphics engine takes a 3D object and converts into 2D graphics, but how do we represent a 3D object in code?
A single point in 3D space is easy to represent using an array of three numbers. For example, we can use [30, 80, 55] to represent a point 30 pixels along the horizontal (x) axis, 80 pixels along the vertical (y) axis, and 55 pixels along the axis that goes into and out of the screen. Play around with the point below, rotating with the mouse and tinkering with the numbers:
Representing a line is also easy: you just connect two points. One way to represent an object in 3D, therefore, is by converting it into a group of lines. This is called a wireframe, as it looks like the object is made from wire. It's obviously not ideal for representing solid objects, but it's a good place to start.

### Terms

Below are some terms that we will use when referring to 3D shapes. Other terms might be used elsewhere, but these ones are pretty popular.
• Node: a point represented by three coordinates, x, y and z (can also be called a vertex).
• Edge: a line connecting two points.
• Face: a surface defined by at least three points.
• Wireframe: a shape consisting of just nodes and edges.

## Want to join the conversation?

• Why can't at least some of these be made into videos? If science was listened to, they would see that people learn better when they see and hear information.
• I think some of these are documents, because its faster and easier to create than a professional video. Since Khan academy is trying to create more tutorials their at high demand for them. I wouldn't doubt it if they eventually started converting more of these documents into videos (similar to the intro to javascript.)
• Why was the built in 3D features of Processing.js disabled?
• As far as I know, it was because speed is an issue when using 3D in KA's programming. You can still try using P3D createGraphics, but it is very slow. The Khan Team didn't want everyone's programs to be unbearably slow, so they eventually cut it.
• what is the z axis? i've never heard of it before.
• It is the "depth axis." It measures how close or far something is from you. You've probably never heard of it — yet — because the concept only really comes up when discussing 3D.
• Couldn't you just make a 3-D shape using a quad function?
• I'm just going to put it like this: there is no 3-D shape on a computer screen! After all, your computer screen is only two-dimensional. However, what you see as being 3D on your computer screen is referred to as implied depth. It's all based off of optical illusions.
• how can you draw a circle 3D
• Possibly a lot of circles(1.normal, 2. rotate by 90 degrees.)
• what is the meaning of wireframe
(1 vote)
• Imagine constructing a box using only coat-hanger wire for its edges. That is what a wireframe is.