# 3D

## Shapes

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>plane() - Plane</td><td></td><td></td><td><a href="/pages/fpzbbvkByr4h3ZLDnde9">/pages/fpzbbvkByr4h3ZLDnde9</a></td><td><a href="/files/SrZhXI5IQVOtm1GI6neg">/files/SrZhXI5IQVOtm1GI6neg</a></td></tr><tr><td>box() - box</td><td></td><td></td><td><a href="/pages/IHvUz7BV3liVN2DXrcpE">/pages/IHvUz7BV3liVN2DXrcpE</a></td><td><a href="/files/0POKlFQvUqnE18xsbOmP">/files/0POKlFQvUqnE18xsbOmP</a></td></tr><tr><td>sphere() - Sphere</td><td></td><td></td><td><a href="/pages/JDUepf4kMfcUWamByViM">/pages/JDUepf4kMfcUWamByViM</a></td><td><a href="/files/xUWQiYEc3cVY9kmXmUNC">/files/xUWQiYEc3cVY9kmXmUNC</a></td></tr><tr><td>cone() - Cone</td><td></td><td></td><td><a href="/pages/KidbnZU2KBbtAqf8Uvrq">/pages/KidbnZU2KBbtAqf8Uvrq</a></td><td><a href="/files/m4RYLkMIjKsHY2C4nrAG">/files/m4RYLkMIjKsHY2C4nrAG</a></td></tr><tr><td>cylinder() - Cylinder</td><td></td><td></td><td><a href="/pages/QpfTUKp8ZZbxUaU7osRT">/pages/QpfTUKp8ZZbxUaU7osRT</a></td><td><a href="/files/2eaBHBiONm2qFLwi5qhR">/files/2eaBHBiONm2qFLwi5qhR</a></td></tr><tr><td>ellipsoid() - Deformed Sphere</td><td></td><td></td><td><a href="/pages/bdE32r8Fx4IV4gWuK2OA">/pages/bdE32r8Fx4IV4gWuK2OA</a></td><td><a href="/files/2EjVc5ONQhxR4FvYV8pg">/files/2EjVc5ONQhxR4FvYV8pg</a></td></tr><tr><td>torus() - Donut-like Shape</td><td></td><td></td><td><a href="/pages/eUaUMz8WQP6Qke9PDytJ">/pages/eUaUMz8WQP6Qke9PDytJ</a></td><td><a href="/files/inXozyvoO6SWi5ekNNxf">/files/inXozyvoO6SWi5ekNNxf</a></td></tr></tbody></table>

#### To be able to draw in 3D, `WEBGL` mode needs to be activated on your canvas.

`createCanvas(width, height,`` `**`WEBGL`**`)`

## How are 3D Shapes drawn?

In WEBGL mode, 3D shapes are constructed using **triangular faces**. Each face is defined by three vertices that specify a **triangular face** in space, and each face is **assigned a vector** that indicates the normal direction of the face (resulting in an upper and a lower face). This enables the face to interact with incoming light and be shaded accurately.

<figure><img src="/files/z8vxxHUM13CtQyYr5ERn" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/3fHr1GtKOUaq8n303A0V" alt=""><figcaption></figcaption></figure>

## Details

Because a 3D shape like a sphere is constructed from triangular faces, it is not perfectly curved. The level of curvature depends on the number of faces used. In all the functions used to create 3D shapes, there are two optional parameters: `detailX` and `detailY`. These parameters specify the number of faces that the shape is divided into in the X or Y direction.

```python
sphere([radius], [detailX], [detailY])
```

<div><figure><img src="/files/7vgj8dhgn87NwHXHdgrv" alt=""><figcaption><p>maximum = 24</p></figcaption></figure> <figure><img src="/files/0S8LOcsyIE10JHpss7HK" alt=""><figcaption><p>maximum = 24</p></figcaption></figure></div>

```python
cone([radius], [height], [detailX], [detailY], [cap])
```

<div><figure><img src="/files/knAmF8jTD90GdC0G43a9" alt=""><figcaption><p>maximum = 16</p></figcaption></figure> <figure><img src="/files/rohBsEnJuhoTuEVddZS0" alt=""><figcaption><p>maximum = 24</p></figcaption></figure></div>

## Translated Shapes

Methods introduced in this following pages all draw the shapes **at the origin** `(0, 0, 0)` by default, and they don't have parameters to specify their position. \
The common practice is to [translate()](/p5-python-web/reference/built-in-functions/translate.md) **the origin to where you want to the shape to be drawn**, and draw it at that new origin. To not disturb the positions of other shapes, use push() and pop().

Hence, a common block of code in `WEBGL` mode looks like

```python
push()
translate(100, 0, 0)
sphere(50)
pop()
```

{% hint style="info" %}
Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)<mark style="color:blue;">**!**</mark>

We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnpython.strivemath.com/p5-python-web/reference/shapes/3d.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.