Dynamic 3D Viewer

Dynamic 3D Viewer allows our users to update the Base Colour texture on an embedded 3D viewer directly with an javascript event. This can be used to create custom products like Mugs, Pillows or Paintings by letting your customers upload their own .jpg or .png texture to an template 3D product.

Tutorial

This tutorial shows you how to add textures directly to an embedded 3D viewer. You can test out this on an embedded viewer or simply copy the example codes to the console of the Shareable preview.

Example Shareable Preview: https://platform.sayduck.com/public/preview/854fee10-4fdc-0138-5fa8-7a670af172c0

For the full code, you can go to the demo jsfiddle website linked below.

Example: https://jsfiddle.net/epq69wLt/

Here is the an example embedded script used in the demo:

<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="854fee10-4fdc-0138-5fa8-7a670af172c0" ></div><script defer type="text/javascript" src="https://viewer.sayduck.com"></script>

Listen to the Viewer

To update the material of your product, you will first need to get the material uuids. You can get these with sayduck.viewer.actions.getAllMaterialUuids event.

Example (can be copy/pasted in the Chrome developer console for example):

document.addEventListener('sayduck.viewer.allMaterialUuids', e => console.log(e.detail));
window.setTimeout(() => {
  window.dispatchEvent(new CustomEvent('sayduck.viewer.actions.getAllMaterialUuids'))},
  5000
);

This results in the following object:

{
  [variant-uuid]: {
    "name": "White",
    "uuid": "85569f60-4fdc-0138-d05e-7a670af172c0",
    "materials": {
      "229f1950-5b9b-0138-cbf3-5224058f21fb": {
        "name": "Cup_Print_material_0",
        "uuid": "57330670-4fde-0138-642a-2a353642fe01"
      },
      "5733ff90-4fde-0138-6be1-2a353642fe01": {
        "name": "Cup_White_material_1",
        "uuid": "5733ff90-4fde-0138-6be1-2a353642fe01"
      }
    }
  }
}

Interact with the Viewer

With the uuids, you can for example update the base color texture of the print surface, using the sayduck.viewer.actions.updateMaterial event. If they are listening to the sayduck.viewer.material.update event, it will immediately return a message confirming the image is downloading, and then another success message when it has been downloaded and applied.

Example (can be copy/pasted in the Chrome developer console for example):

document.addEventListener('sayduck.viewer.material.update', e => console.log(e.detail));
window.dispatchEvent(new CustomEvent('sayduck.viewer.actions.updateMaterial', {
    detail: {
        materialUuid: '229f1950-5b9b-0138-cbf3-5224058f21fb',
        baseColorMapUrl: 'https://cdn.sayduck.io/a/shared_assets/files/000/774/646/ba36285b79a77429997f578e6f97ef37750bdcfffcbf77b2585d47985cd4a788-original.png'
    },
}));

This will result the following to events:

Requested

{
  "message": "requested",
  "code": 201,
  "modelUuid": "5cc9e470-443d-0138-b7e4-2a9eddc742ee",
  "materialUuid": "33dc8760-4441-0138-ee21-2a9eddc742ee"
}

Success:

{
  "message": "success",
  "code": 200,
  "modelUuid": "5cc9e470-443d-0138-b7e4-2a9eddc742ee",
  "materialUuid": "33dc8760-4441-0138-ee21-2a9eddc742ee"
}

Updated on: 04/04/2023