<!DOCTYPE html>
<html>
  <head>
    <title>Physics - 03 - Dice</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>
    <script src="https://cdn.rawgit.com/elbobo/aframe-multisrc-component/b6d23310/dist/0.3/aframe-multisrc-component.js"></script>
    <script src="../js/livecode.js"></script>
  </head>
  <body>
    <a-scene
      physics="debug: false; gravity: -9.8"
      cursor="rayOrigin: mouse"
      background="color: lightblue"
    >
      <a-assets>
        <img
          id="one"
          cross-origin="false"
          src="https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/master/dice/dice-1.png"
        />
        <img
          id="two"
          src="https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/master/dice/dice-2.png"
        />
        <img
          id="three"
          src="https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/master/dice/dice-3.png"
        />
        <img
          id="four"
          src="https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/master/dice/dice-4.png"
        />
        <img
          id="five"
          src="https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/master/dice/dice-5.png"
        />
        <img
          id="six"
          src="https://raw.githubusercontent.com/jorgecardoso/aframe-course-resources/master/dice/dice-6.png"
        />
      </a-assets>

      <!-- Camera -->
      <a-camera></a-camera>

      <!-- Floor -->
      <a-plane
        color="#c97544"
        side="double"
        width="100"
        height="100"
        rotation="-90 0 0"
        static-body
      ></a-plane>

      <!-- Immovable box -->
      <a-box
        static-body
        color="#d4c4ba"
        position="0 0.5 -2.5"
        width="3"
        height="1"
        depth="1"
      ></a-box>

      <a-box
        id="dice"
        dynamic-body
        multisrc="srcs:#one,#two,#three,#four,#five,#six"
        rotation="45 45 45"
        position="0.01 2.5 -2.5"
        width="0.2"
        height="0.2"
        depth="0.2"
      ></a-box>
    </a-scene>
  </body>
</html>