JSFiddle - React, Tailwind, and code Playground

HTML

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