---
title: viewer3d.measure
slug: viewer-3d/events/measure
docTags: 
createdAt: 2024-08-28T18:59:30.430Z
---

Invoked when a measurement changes.

## Example

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

## Usage

:::CodeblockTabs
```javascript
const onMeasurementChange = function (event) {
  const { measure, measures } = event;
  console.log("viewer3d.measure", "measure:", measure, "measures", measures);
};

viewer3d.addEventListener("viewer3d.measure", onMeasurementChange);
```

jQuery

```javascript
const onMeasurementChange = function (event, measure, measures) {
  console.log("viewer.measure", "measure:", measure, "measures", measures);
};

$("#viewer-3d").on("viewer.measure", onMeasurementChange);
```
:::

## Parameters

### onMeasurementChange

::::Tabs
:::Tab{title="JS"}
Function called when a measurement changes.

| **Type**                  |
| ------------------------- |
| `(event: Object) => Void` |

**event**

| **Name**   | **Type**       | **Description**          |
| ---------- | -------------- | ------------------------ |
| `measure`  | Object         | The changed measurement  |
| `measures` | Array\[Object] | The current measurements |

**Measure**

| **Name** | **Type**     | **Description**           |
| -------- | ------------ | ------------------------- |
| `uuid`   | String       | Id of the measure         |
| `mode`   | String       | Mode of the measurement   |
| `values` | Map\[Object] | Values of the measurement |

**mode**

Valid values are:

- `dimension`
- `laser`
- `point`

**values**

Map of measurement components.

- Point measurements have a single component `point`.
- Laser measurements have three components `a`, `b`, and `c` corresponding to the `x`, `y` and `z` axis.
- Dimension measurements have four components `depth`, `distance`, `height`, and `width`.

| **Name** | **Type**       | **Description**            |
| -------- | -------------- | -------------------------- |
| `color`  | String         | Color of this component    |
| `points` | Array\[Object] | List of measurement points |

**point**

| **Name**   | **Type**                                 | **Description**                                |
| ---------- | ---------------------------------------- | ---------------------------------------------- |
| `distance` | Number                                   | Distance from this point to the previous point |
| `point`    | [Vector3](docId\:kEwRHKTC8Iq2HlT48sRFQ)  | The measurement point                          |
:::

:::Tab{title="jQuery"}
Function called when a measurement changes.

| **Type**                                                            |
| ------------------------------------------------------------------- |
| `(event: Object, measure: Object, measures: Array[Object]) => Void` |

**event**

[jQuery.Event](https://api.jquery.com/category/events/event-object/)

**Measure**

| **Name** | **Type**     | **Description**           |
| -------- | ------------ | ------------------------- |
| `uuid`   | String       | Id of the measure         |
| `mode`   | String       | Mode of the measurement   |
| `values` | Map\[Object] | Values of the measurement |

**mode**

Valid values are:

- `dimension`
- `laser`
- `point`

**values**

Map of measurement components.

- Point measurements have a single component `point`.
- Laser measurements have three components `a`, `b`, and `c` corresponding to the `x`, `y` and `z` axis.
- Dimension measurements have four components `depth`, `distance`, `height`, and `width`.

| **Name** | **Type**       | **Description**            |
| -------- | -------------- | -------------------------- |
| `color`  | String         | Color of this component    |
| `points` | Array\[Object] | List of measurement points |

**point**

| **Name**   | **Type**                                 | **Description**                                |
| ---------- | ---------------------------------------- | ---------------------------------------------- |
| `distance` | Number                                   | Distance from this point to the previous point |
| `point`    | [Vector3](docId\:kEwRHKTC8Iq2HlT48sRFQ)  | The measurement point                          |
:::
::::