> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.sayduck.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 3D Viewer - Dynamic API examples

**Dynamic 3D Viewer** refers to a product with unlimited amount of sizes or material options. To create one, you will need to use our Viewer API.

### Example integration

Example integration: https://jsfiddle.net/huspqyct/

```
<div style="min-width:250px;height:450px;">

  <sayduck-viewer product="d9d023a0-cd3f-013b-dfef-3ae422ad63d9" mode="variants"></sayduck-viewer>

  <button id="painting1">
    Painting 1
  </button>
  <button id="painting2">
    Painting 2
  </button>

</div>

<script src="https://viewer.sayduck.com" type="module" async></script>

<script>
window.addEventListener(
  "sayduck.api-ready",
  (event) => {
    const api = event.detail.instance;
    console.log(api.scene.getAllNodeUuids());
    console.log(api.scene.getAllMaterialUuids());

    const nodeUuid = "d9d22160-cd3f-013b-bb53-3ae422ad63d9";
    const nodeUuid2 = "d9d359c0-cd3f-013b-3619-3ae422ad63d9";
    const materialUuid = "d9db14a0-cd3f-013b-a035-3ae422ad63d9";
    

    document.querySelector("#painting1").onclick = () => {
      api.scene.updateNode(nodeUuid, {
        scale: {
          x: 1.5,
          y: 1,
          z: 1
        }
      }),
      api.scene.updateNode(nodeUuid2, {
        scale: {
          x: 1.5,
          y: 1,
          z: 1
        }
      }),
      api.scene.updateMaterial(materialUuid, {
        albedoTexture: "https://cdn.sayduck.io/a/shared_assets/files/006/953/473/f4a3e72b298664ddfabd63ca76c5f6fc26a16da0ff959eec2964e2f59d52d987-original.jpg"
      })
    }
        document.querySelector("#painting2").onclick = () => {
      api.scene.updateNode(nodeUuid, {
        scale: {
          x: 1,
          y: 1.3,
          z: 1
        }
      }),
      api.scene.updateNode(nodeUuid2, {
        scale: {
          x: 1,
          y: 1.3,
          z: 1
        }
      }),
      api.scene.updateMaterial(materialUuid, {
        albedoTexture: "https://cdn.sayduck.io/a/shared_assets/files/006/953/472/c0416e7554d2a74b68c7116a65ab6c034905cb30af7e6b04d42819dca2559f6e-original.png"
      })
    }
  })
  
</script>
```

### Dynamic Material API

**Dynamic Material API** allows our users to update the material values 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.

To learn more, check out [Dynamic Material API](/en/article/3d-viewer-api-documentation-1ftbxnx/#1-dynamic-material-api).

###### Material UUID

To retrieve the Material UUID, use the event below.

```
window.addEventListener(

  "sayduck.api-ready",
  (event) => {
    const api = event.detail.instance;

    console.log(api.scene.getAllMaterialUuids());

  }
)
```

Alternatively, the Material UUID is also found in the Material information. 

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-05-09-122813_9ntzwr.png)

###### Example integration

Example integration: https://jsfiddle.net/5d3aeub4/

```
<div style="min-width:250px;height:450px;">

  <sayduck-viewer product="d9d023a0-cd3f-013b-dfef-3ae422ad63d9" mode="variants"></sayduck-viewer>

  <button id="albedo">
    Albedo
  </button>
  <button id="texture">
    Albedo texture
  </button>
  <button id="metalness">
    Metalness
  </button>
  <button id="roughness">
    Roughness
  </button>
  <button id="emissiveColour">
    Emissive
  </button>
  <button id="tiling">
    Tiling 2x2
  </button>
  
</div>

<script src="https://viewer.sayduck.com" type="module" async></script>
<script>
window.addEventListener(
  "sayduck.api-ready",
  (event) => {
    const api = event.detail.instance;

    console.log(api.scene.getAllMaterialUuids());

    const materialUuid = "d9db14a0-cd3f-013b-a035-3ae422ad63d9";

    document.querySelector("#albedo").onclick = () => {
      api.scene.updateMaterial(materialUuid, {
        albedoColour: {
          red: 100,
          green: 150,
          blue: 0
        }
      })
    }

    document.querySelector("#texture").onclick = () => {
      api.scene.updateMaterial(materialUuid, {
        albedoTexture: "https://staging-cdn.sayduck.io/a/shared_assets/files/000/256/885/f87c5fdbe66e2d2e066c3a9ac6671f625f0918a1b2216fc8b0a78b93af1fe4c2-optimised_128_jpg.jpg"
      })
    }

    document.querySelector("#metalness").onclick = () => {
      api.scene.updateMaterial(materialUuid, {
        metalness: 1
      })
    }

    document.querySelector("#roughness").onclick = () => {
      api.scene.updateMaterial(materialUuid, {
        roughness: 0.3
      })
    }

    document.querySelector("#emissiveColour").onclick = () => {
      api.scene.updateMaterial(materialUuid, {
        emissiveColour: {
          red: 255,
          green: 0,
          blue: 0,
        }
      })
    }

    document.querySelector("#tiling").onclick = () => {
      api.scene.updateMaterial(materialUuid, {
        transformExtension: true,
        tiling: {
          x: 2,
          y: 2
        }
      })
    }

  }
)
</script>
```

### Dynamic Node API

Dynamic Node API allows you to transfer, rotate and scale node in the 3D scene with javascript events. 

It is used to bypass the limitation of variant and create unlimited amount of size options for your configurators.

To learn more, check out [3D Viewer - API documentation](/en/article/3d-viewer-api-documentation-1ftbxnx/#1-dynamic-trs-api)

###### Node UUID

To retrieve the Node UUID, use the event below.

```
window.addEventListener(

  "sayduck.api-ready",
  (event) => {
    const api = event.detail.instance;

    console.log(api.scene.getAllMaterialUuids());

  }
)
```

###### Example integration

Example integration: https://jsfiddle.net/07wx1uq3/

```
<div style="min-width:250px;height:450px;">

  <sayduck-viewer product="d9d023a0-cd3f-013b-dfef-3ae422ad63d9" mode="variants"></sayduck-viewer>

  <button id="translate">
    Translate
  </button>
  <button id="rotate">
    Rotate
  </button>
  <button id="scale">
    Scale
  </button>

</div>

<script src="https://viewer.sayduck.com" type="module" async></script>

<script>
window.addEventListener(
  "sayduck.api-ready",
  (event) => {
    const api = event.detail.instance;
    console.log(api.scene.getAllNodeUuids());

    const nodeUuid = "d9d22160-cd3f-013b-bb53-3ae422ad63d9";
    const nodeUuid2 = "d9d359c0-cd3f-013b-3619-3ae422ad63d9";

    document.querySelector("#translate").onclick = () => {
      api.scene.updateNode(nodeUuid, {
        translation: {
          x: 2,
          y: 0,
          z: 0
        }
      }),
            api.scene.updateNode(nodeUuid2, {
        translation: {
          x: 2,
          y: 0,
          z: 0
        }
      })
    }

    document.querySelector("#rotate").onclick = () => {
      api.scene.updateNode(nodeUuid, {
        rotation: {
          x: 45,
          y: 0,
          z: 0
        }
      })
    }

    document.querySelector("#scale").onclick = () => {
      api.scene.updateNode(nodeUuid, {
        scale: {
          x: 4,
          y: 2,
          z: 2
        }
      })
    }

  })
</script>
```