<div style="width: 100%; height: 100%; position: absolute; left: 0%; top: 0%">
  <canvas id="canvas"></canvas>
  <button id="buttonClick" style="   position:absolute;float: left;top: 0;" onClick="openDoors()">Open doors</button>
</div>

(async () => {
  const viewer = await SDV.api.createViewer({
    canvas: document.getElementById("canvas"),
    id: "myViewer"
  });
  const session = await SDV.api.createSession({
    ticket:
      "9fcd8249550469452ffada9595b141d60e157293aa2700fd11ece7c04834e5fa22b8f1f49417c87735c11546c38733d5747d58e041a25506b83359168d22b2407caba09516bfd258d8d06695094e71b82dc7f5a87b4f3a67092afdabece4213dc10f66053f756c-c83e247269761d927d2a0c73a88fd8aa",
    modelViewUrl: "https://sdeuc1.eu-central-1.shapediver.com",
    id: "mySession"
  });

  window.viewer = viewer;
  window.session = session;
})();
function openDoors() {
  //doorOutput is geometry doors
  const doorOutput = session
    .getOutputByName("puertas")
    .find((o) => o.material !== undefined);
  const animationData = session.getOutputByName("woodDoors_animationData")[0]
    .content[0].data;

  // read out pivot 0 and invert it
  const pivot0 = [
    animationData[0].pivot.x,
    animationData[0].pivot.y,
    animationData[0].pivot.z
  ];
  const pivot0Inverted = [
    -animationData[0].pivot.x,
    -animationData[0].pivot.y,
    -animationData[0].pivot.z
  ];

  // read out pivot 1 and invert it
  const pivot1 = [
    animationData[1].pivot.x,
    animationData[1].pivot.y,
    animationData[1].pivot.z
  ];
  const pivot1Inverted = [
    -animationData[1].pivot.x,
    -animationData[1].pivot.y,
    -animationData[1].pivot.z
  ];

  // create quaternion 0
  const q0 = glMatrix.quat.setAxisAngle(
    glMatrix.quat.create(),
    glMatrix.vec3.fromValues(0, 0, 1),
    -Math.PI / 2
  );

  // create quaternion 1
  const q1 = glMatrix.quat.setAxisAngle(
    glMatrix.quat.create(),
    glMatrix.vec3.fromValues(0, 0, 1),
    Math.PI / 2
  );

  const tracks0 = [
    {
      times: [0, 4],
      node: doorOutput.node.children[0],
      values: [...pivot0, ...pivot0],
      path: "translation",
      interpolation: "linear"
    },
    {
      times: [0, 2, 4],
      node: doorOutput.node.children[0],
      values: [0, 0, 0, 1, q0[0], q0[1], q0[2], q0[3], 0, 0, 0, 1],
      path: "rotation",
      interpolation: "linear"
    },
    {
      times: [0, 4],
      node: doorOutput.node.children[0].children[0],
      values: [...pivot0Inverted, ...pivot0Inverted],
      path: "translation",
      interpolation: "linear"
    }
  ];
  const tracks1 = [
    {
      times: [0, 4],
      node: doorOutput.node.children[1],
      values: [...pivot1, ...pivot1],
      path: "translation",
      interpolation: "linear"
    },
    {
      times: [0, 2, 4],
      node: doorOutput.node.children[1],
      values: [0, 0, 0, 1, q1[0], q1[1], q1[2], q1[3], 0, 0, 0, 1],
      path: "rotation",
      interpolation: "linear"
    },
    {
      times: [0, 4],
      node: doorOutput.node.children[1].children[0],
      values: [...pivot1Inverted, ...pivot1Inverted],
      path: "translation",
      interpolation: "linear"
    }
  ];

  const data = new SDV.AnimationData(
    "myAnimation",
    tracks0.concat(tracks1),
    0,
    4
  );
  data.reset = false;
  data.repeat = false;
  doorOutput.node.data.push(data);

  data.startAnimation();
  viewer.update();
}