3D viewer

• 3 minutes to read

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.

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

In params, you can set up controls and animation.

{
    "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 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.

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 the Packaging application or contact our support team 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:

"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:

{
    "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:

{
    "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:

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

Config example

Now, let's see the resulting config.

{
    "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 AuWidget3DViewer.

For more details about configuration parameters, refer to I3DViewerParams.