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.

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.

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

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>

Updated on: 02/08/2023