A-Frame Course - Source of /examples/1100-interactions-16-hand-tracking-touching.html

<!DOCTYPE html>
<html>
  <head>
    <title>Interactions - 16 - Hand touching</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-aabb-collider-component@3.2.2/dist/aframe-aabb-collider-component.min.js"></script>
    <script src="https://aframe-course.glitch.me/examples/aframe-course.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img
          id="city"
          src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fcity.jpg?v=1518719834290"
        />
        <img
          id="brick"
          src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2Fbrick_diffuse.jpg?v=1523874307941"
        />
      </a-assets>
      <a-entity environment="preset: goldmine; dressingAmount: 20"></a-entity>

      <a-plane
        id="screen"
        width="2"
        rotation="-20 0 0"
        position="0 1.5 -2"
      ></a-plane>

      <a-box
        id="tablebase_red"
        aabb-collider="objects: .fingertip"
        event-set__changecolor="_event: hitstart; color: white"
        event-set__changeimg="_event: hitstart; _target: #screen; src: #city"
        event-set__hitend="color: red"
        width="0.2"
        depth="0.2"
        height="0.1"
        position="-0.5 1.1 -1"
        color="red"
      ></a-box>

      <a-box
        id="tablebase_green"
        aabb-collider="objects: .fingertip; debug: true"
        event-set__changecolor="_event: hitstart; color: white"
        event-set__changeimg="_event: hitstart; _target: #screen; src: #brick"
        event-set__hitend="color: green"
        width="0.2"
        depth="0.2"
        height="0.1"
        position="0.5 1.05 -1"
        color="green"
      ></a-box>

      <a-box
        id="table"
        width="2"
        height="1"
        position="0 0.5 -1"
        color="yellow"
      ></a-box>

      <a-entity id="leftHand" hand-tracking-controls="hand: left;">
        <a-sphere
          class="fingertip"
          color="red"
          gluetohand="target: #leftHand; bone: 15"
          data-aabb-collider-dynamic
          radius="0"
        ></a-sphere>
      </a-entity>
      <a-entity id="rightHand" hand-tracking-controls="hand: right;">
        <a-sphere
          class="fingertip"
          color="red"
          gluetohand="target: #rightHand; bone: 9"
          data-aabb-collider-dynamic
          radius="0.01"
        ></a-sphere>
      </a-entity>
    </a-scene>

  </body>
</html>