---
title: addShape
slug: viewer-3d/addshape
docTags: 
createdAt: 2024-07-08T15:53:11.224Z
---

Adds a shape to the scene.

## Example

::codepen{url="https://codepen.io/Catenda/embed/YzoxZvx"}

## Usage

**Box Shape**

```javascript
const boxShape = {
  extents: {
    x: 0.5,
    y: 0.5,
    z: 0.5
  },
  position: {
    x: 1.0,
    y: 1.0,
    z: 1.0
  },
  type: "box"
};

const shapeId = viewer3d.addShape(boxShape);
```

**Circle Shape**

```javascript
const circleShape = {
  position: {
    x: 1.0,
    y: 1.0,
    z: 1.0
  },
  radius: 1.0,
  type: "circle"
};

const shapeId = viewer3d.addShape(circleShape);
```

**Sphere Shape**

```javascript
const sphereShape = {
  position: {
    x: 1.0,
    y: 1.0,
    z: 1.0
  },
  radius: 1.0,
  type: "sphere"
};

const shapeId = viewer3d.addShape(sphereShape);
```

## Parameters

### shape

Shape to add.

| **Type** | **Required** |
| -------- | ------------ |
| Object   | Yes          |

**Box Shape**

| **Name**   | **Type**     | **Required** | **Description**                          |
| ---------- | ------------ | ------------ | ---------------------------------------- |
| `color`    | String       | No           | Color of the box                         |
| `extents`  | [Vector3](#) | Yes          | Box extents in meters                    |
| `id`       | String       | No           | Id of the box                            |
| `onClick`  | Function     | No           | Function called when user clicks the box |
| `position` | [Vector3](#) | Yes          | Position of the box                      |
| `type`     | String       | Yes          | Value must be `box`                      |

**onClick**

Function called when user clicks the box.

| **Type**     |
| ------------ |
| `() => Void` |

**Circle Shape**

| **Name**   | **Type**     | **Required** | **Description**                             |
| ---------- | ------------ | ------------ | ------------------------------------------- |
| `color`    | String       | No           | Color of the circle                         |
| `id`       | String       | No           | Id of the circle                            |
| `onClick`  | Function     | No           | Function called when user clicks the circle |
| `position` | [Vector3](#) | Yes          | Position of the circle                      |
| `radius`   | Number       | Yes          | Radius of the circle in meters              |
| `type`     | String       | Yes          | Value must be `circle`                      |

**onClick**

Function called when user clicks the circle.

| **Type**     |
| ------------ |
| `() => Void` |

**Sphere Shape**

| **Name**   | **Type**     | **Required** | **Description**                             |
| ---------- | ------------ | ------------ | ------------------------------------------- |
| `color`    | String       | No           | Color of the sphere                         |
| `id`       | String       | No           | Id of the sphere                            |
| `onClick`  | Function     | No           | Function called when user clicks the sphere |
| `position` | [Vector3](#) | Yes          | Position of the sphere                      |
| `radius`   | Number       | Yes          | Radius of the sphere in meters              |
| `type`     | String       | Yes          | Value must be `sphere`                      |

**onClick**

Function called when user clicks the sphere.

| **Type**     |
| ------------ |
| `() => Void` |

## Return Value

Id of the shape.

| **Type** |
| -------- |
| String   |