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

# 3D viewer

> A widget for visualizing 3D previews based on DAE models.

## Configuring widget

To add a 3D preview to your editor, you must configure a widget of the `3d-viewer` type.

```json
{
    "name": "preview",
    "type": "3d-viewer",
    "params": {
        ...
    }
}
```

In `params`, you can set up controls and animation.

```json
{
    "name": "preview",
    "type": "3d-viewer",
    "params": {
        "items": [
            ...
        ],
        "modelType": "default",
        "showCameraButtons": true,
        "showAnimationButtons": false,
        "showAnimationControls": false,
        "buttonsPosition": "top",
        "pauseAtEnd": true,
        "distance": 150,
        "saveDistanceWhenMoveCamera": true,
        "orbitsControl": {
            "autoRotate": true,
            "autoRotateSpeed": 1,
            "enableDamping": true,
            "dampingFactor": 0.15,
            "enableZoom": true,
            "enableRotate": true,
            "rotateSpeed": 0.3
        }
        
    }
}
```

In `modelType`, we specified that the `default` script will be used for rendering the model. Then, we configured the controls.

Orbit controls allow the camera to orbit around a target. They are implemented with the [**three.js**](https://github.com/mrdoob/three.js/) library. For details about  parameters of the `orbitsControl`, you can refer to

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

Note that the `distance` to the scene and `rotateSpeed` are defined in conventional units that depend on the product size and are selected manually.

For more details about configuration parameters, refer to [I3DViewerParams](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-3d-viewer.I3DViewerParams.md#i3dviewerparams).

## Providing data

After we have configured the controls, let's define a 3D model and design images to be rendered on this model.

You can both create a model in a packaging application or contact [our support team](https://customerscanvas.com/account/cases/add) to create models for you.

To provide a model for this widget, you must upload it to your server. After that, you can refer to the model in `params.items` as follows:

``` js
"model": "http://localhost/models/box.dae"
```

Here, **models** is the folder that contains DAE models.

This widget applies images to the model as textures. For two-side models, you must provide two images. The first image will be applied to the front surface and the second image - to the back surface. For example, you can define static images for a two-side box as follows:

```json
{
    "name": "preview",
    "type": "3d-viewer",
    "params": {
        "items": [{
            "images": [
                "https://example.com/front.png",
                "https://example.com/back.png"
            ],
            "model": "http://localhost/models/box.dae"
        }],
    ...
```

When you need to personalize images, you can pass proof images generated in the Design Editor:

```json
{
    "widgets": [{
        "name": "canvas",
        "type": "design-editor",
        "params": {
            "initial": {
                "productDefinition": {
                    "surfaces": [ "BoxDesign", "BoxDesignInside" ]
                },
                "editorConfig": {
                    "initialMode": "Advanced"
                }
            }
        }
    },
    {
        "name": "preview",
        "type": "3d-viewer",
        "params": {
            "items": [{
                "images": "{{ $['canvas'].proofImageUrls }}",
                "model": "http://localhost/models/box.dae"
            }],
    ...
```

## Getting results

The `3d-viewer` widget has the `image` property, which contains a base64 URL that links to the rendered model image at the initial position. You can use this image in orders as follows:

```json
{
    "name": "order",
    "type": "order",
    "params": {
        "images": "{{ [$['preview'].image] }}",
        "downloadUrls": {
          "{{ $['canvas'].hiResUrls }}"
        }
    }
}
```

## Config example

Now, let's see the resulting config.

```json
{
    "widgets": [{
        "name": "canvas",
        "type": "design-editor",
        "params": {
            "initial": {
                "productDefinition": {
                    "surfaces": [ "BoxDesign", "BoxDesignInside" ]
                },
                "editorConfig": {
                    "initialMode": "Advanced"
                }
            }
        }
    },
    {
        "name": "preview",
        "type": "3d-viewer",
        "params": {
            "items": [{
                "images": "{{ $['canvas'].proofImageUrls }}",
                "model": "http://localhost/models/box.dae"
            }]
        }
    },
    {
        "name": "order",
        "type": "order",
        "params": {
            "images": "{{ [$['preview'].image] }}",
            "downloadUrls": {
                "{{ $['canvas'].hiResUrls }}"
            }
        }
    }],
    "steps": [{
        "title": "canvas",
        "name": "canvas",
        "description": "Personalize design",
        "mainPanel": {
            "name": "canvas",
            "type": "design-editor",
        }
    }, {
        "title": "Design",
        "name": "Design",
        "description": "Preview 3D",
        "mainPanel": {
            "name": "preview",
            "type": "3d-viewer",
        },
        "onActivate": "{{#function $['canvas'].getProofImages() }}"
    }]
}
```

---
You can find more details about the properties of this widget in the [AuWidget3DViewer class](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-3d-viewer.au-widget-3d-viewer.md#auwidget3dviewer).

For more details about configuration parameters, refer to [I3DViewerParams](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-3d-viewer.I3DViewerParams.md#i3dviewerparams).