@aurigma/ui-framework/docs/reference/interfaces/i3dviewerparams.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

# Interface: 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.
```
{
    "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"
            }]
        }
    }]
}
```

## Hierarchy

* **I3DViewerParams**

## Index

### Properties

* [animationSpeed](i3dviewerparams.md#animationspeed)
* [backgroundColor](i3dviewerparams.md#backgroundcolor)
* [buttonsPosition](i3dviewerparams.md#optional-buttonsposition)
* [cameraButtons](i3dviewerparams.md#optional-camerabuttons)
* [distance](i3dviewerparams.md#optional-distance)
* [items](i3dviewerparams.md#items)
* [modelType](i3dviewerparams.md#modeltype)
* [orbitsControl](i3dviewerparams.md#optional-orbitscontrol)
* [pauseAtEnd](i3dviewerparams.md#pauseatend)
* [preloader](i3dviewerparams.md#optional-preloader)
* [saveDistanceWhenMoveCamera](i3dviewerparams.md#savedistancewhenmovecamera)
* [showAnimationButtons](i3dviewerparams.md#optional-showanimationbuttons)
* [showAnimationControls](i3dviewerparams.md#optional-showanimationcontrols)
* [showCameraButtons](i3dviewerparams.md#optional-showcamerabuttons)

## Properties

###  animationSpeed

• **animationSpeed**: *number*

Speed of animation playing

___

###  backgroundColor

• **backgroundColor**: *string*

Background color for scene.

___

### `Optional` buttonsPosition

• **buttonsPosition**? : *[ButtonsPosition](../enums/buttonsposition.md)*

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

___

### `Optional` cameraButtons

• **cameraButtons**? : *Partial‹object›*

___

### `Optional` distance

• **distance**? : *number*

Distance from camera to scene

___

###  items

• **items**: *[I3DItem](i3ditem.md)[]*

A collection of objects for visualization.

___

###  modelType

• **modelType**: *[ModelType](../enums/modeltype.md)*

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

___

### `Optional` orbitsControl

• **orbitsControl**? : *any*

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

___

###  pauseAtEnd

• **pauseAtEnd**: *boolean*

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

___

### `Optional` preloader

• **preloader**? : *boolean*

Show/hide origami preloader

___

###  saveDistanceWhenMoveCamera

• **saveDistanceWhenMoveCamera**: *boolean*

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

___

### `Optional` showAnimationButtons

• **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.

___

### `Optional` showAnimationControls

• **showAnimationControls**? : *boolean*

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

___

### `Optional` showCameraButtons

• **showCameraButtons**? : *boolean*

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