---
title: "au-widget-3d-viewer/I3DViewerParams | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-3d-viewer.I3DViewerParams/"
---

# au-widget-3d-viewer/I3DViewerParams

> Position of controls for the 3D Viewer.

## Enumerations

### ButtonsPosition

For more details, you can refer to the `3D-Viewer widget`.

#### Enumeration Members

| Enumeration Member | Value |
| ------ | ------ |
|  `left` | `"left"` |
|  `right` | `"right"` |
|  `top` | `"top"` |

## Interfaces

### I3DItem

Provides properties that are used to visualize 3D models.

For more details, you can refer to the `3D-Viewer widget`.

The following example illustrates how you can specify a two-sided model in the `3D-Viewer` widget.
```json
{
    "widgets": `[{
        "name": "preview",
        "type": "3d-viewer",
        "params": {
            "items": [{
                "images": [
                    "https://example.com/800/600",
                    "https://example.com/1000/601"
                ],
                "model": "http://localhost:8081/box.dae"
            }]`
        }
    }]
}
```

#### Properties

##### animation?

```ts
optional animation?: string;
```

Animation of elements (an autogenerated property of a model).

##### images

```ts
images: string[];
```

Images that are applied to the model as textures. For two-side models, the first image will be applied to the front surface and the second image - to the back surface.

##### model

```ts
model: string;
```

A link to a `.dae` file.

##### position?

```ts
optional position?: string;
```

A position of the element (an autogenerated property of a model).

***

### I3DViewerParams

Provides properties that are used to visualize 3D models.

For more details, you can refer to the [[AuWidget3DViewer|3D-Viewer widget].

The following example illustrates how you can specify a two-sided model in the `3D-Viewer` widget.
```json
{
    "widgets": `[{
        "name": "preview",
        "type": "3d-viewer",
        "params": {
            "showAnimationButtons": false,
            "showCameraButtons": false,
            "items": [{
                "images": [
                    "https://example.com/800/600",
                    "https://example.com/1000/601"
                ],
                "model": "http://localhost:8081/box.dae"
            }]`
        }
    }]
}
```

#### Properties

##### animationSpeed

```ts
animationSpeed: number;
```

Speed of animation playing

##### backgroundColor

```ts
backgroundColor: string;
```

Background color for scene.

##### buttonsPosition?

```ts
optional buttonsPosition?: ButtonsPosition;
```

The position of the camera and animation button: `left`, `right`, or `top`. By default: `left`.

##### cameraButtons?

```ts
optional cameraButtons?: Partial<{
  BACK: CameraSetting;
  BOTTOM: CameraSetting;
  FRONT: CameraSetting;
  LEFT: CameraSetting;
  RIGHT: CameraSetting;
  TOP: CameraSetting;
}>;
```

##### distance?

```ts
optional distance?: number;
```

Distance from camera to scene

##### items

```ts
items: I3DItem[];
```

A collection of objects for visualization.

##### modelType

```ts
modelType: ModelType;
```

The model type: `default` or `blender`.

##### orbitsControl?

```ts
optional orbitsControl?: any;
```

Parameters for OrbitControls. https://threejs.org/docs/#examples/en/controls/OrbitControls

##### pauseAtEnd

```ts
pauseAtEnd: boolean;
```

If `true`, pauses animation at the last frame.

##### preloader?

```ts
optional preloader?: boolean;
```

Show/hide origami preloader

##### saveDistanceWhenMoveCamera

```ts
saveDistanceWhenMoveCamera: boolean;
```

If `true`, saves camera distance position when select another camera button view.

##### showAnimationButtons?

```ts
optional showAnimationButtons?: boolean;
```

If a model has several elements (for example, if a box consists of a container and a lid), you can set this parameter to `true` to enable buttons for opening and closing these elements.

##### showAnimationControls?

```ts
optional showAnimationControls?: boolean;
```

if `true`, shows Play\Pause button, animation timeline and animation speed controls.

##### showCameraButtons?

```ts
optional showCameraButtons?: boolean;
```

If `true`, enables camera buttons. If it's a string array - show buttons with that name.