dice.html

<m-model
  id="dice"
  src="/assets/dice.glb"
  onclick="rollDice()"
>
  <m-attr-anim id="y-up-anim" easing="easeOutSine" attr="y" duration="200" start="1" end="1" loop="false"></m-attr-anim>
  <m-attr-anim id="y-down-anim" easing="easeOutBounce" attr="y" start-time="0" duration="500" start="1" end="1" loop="false"></m-attr-anim>
  <m-attr-anim id="rx-anim" attr="rx" duration="400" start="0" end="0" loop="false"></m-attr-anim>
  <m-attr-anim id="ry-anim" attr="ry" duration="400" start="0" end="0" loop="false"></m-attr-anim>
  <m-attr-anim id="rz-anim" attr="rz" duration="400" start="0" end="0" loop="false"></m-attr-anim>
</m-model>
<script>
  let rollResult = 1;
  let rollTime = 0;
  const rollMap = {
    1: [0, 0, 0],
    2: [0, 0, 270],
    3: [270, 0, 0],
    4: [90, 0, 0],
    5: [0, 0, 90],
    6: [180, 0, 0],
  };

  const yUpAnim = document.getElementById("y-up-anim");
  const yDownAnim = document.getElementById("y-down-anim");
  const rxAnim = document.getElementById("rx-anim");
  const ryAnim = document.getElementById("ry-anim");
  const rzAnim = document.getElementById("rz-anim");

  function rollDice() {
    const t = document.timeline.currentTime + 50;
    if (t < rollTime + 400) {
      return;
    }
    rollTime = t;
    const oldRotation = rollMap[rollResult];
    rollResult = Math.floor(Math.random() * 6) + 1;
    const targetRotation = rollMap[rollResult];
    yUpAnim.setAttribute("start-time", t);
    yUpAnim.setAttribute("end", 2);
    yDownAnim.setAttribute("start-time", t+300);
    yDownAnim.setAttribute("start", 2);
    rxAnim.setAttribute("start-time", t);
    rxAnim.setAttribute("start", oldRotation[0].toString());
    rxAnim.setAttribute("end", targetRotation[0].toString());
    ryAnim.setAttribute("start-time", t);
    ryAnim.setAttribute("start", oldRotation[1].toString());
    ryAnim.setAttribute("end", targetRotation[1].toString());
    rzAnim.setAttribute("start-time", t);
    rzAnim.setAttribute("start", oldRotation[2].toString());
    rzAnim.setAttribute("end", targetRotation[2].toString());
  }
</script>