A-Frame Course - Source of /examples/1100-interactions-17-hand-tracking-colliders-object.html

<!DOCTYPE html>
<html>
  <head>
    <title>Interactions - 16 - Grab colliders</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>
  </head>
  <body>
    <a-scene>
      <a-entity environment="preset: goldmine; dressingAmount: 20"></a-entity>

      <a-sphere
        id="orangebox"
        grabbable
        data-aabb-collider-dynamic
        scale="0.05 0.05 0.05"
        position="-0.2 1.4 -0.5"
        color="orange"
      ></a-sphere>

      <a-sphere
        id="greenbox"
        grabbable
        data-aabb-collider-dynamic
        scale="0.05 0.05 0.05"
        position="0.2 1.3 -0.5"
        color="green"
      ></a-sphere>

      <a-box
        aabb-collider="debug:true; objects: #orangebox;"
        event-set__hitstart="color: white"
        event-set__hitend="color: red"
        width="1"
        depth="0.5"
        height="0.05"
        position="0.5 1.05 -0.75"
        color="red"
      ></a-box>

      <a-box
        aabb-collider="debug:true; objects: #greenbox;"
        event-set__hitstart="color: white"
        event-set__hitend="color: green"
        width="1"
        depth="0.5"
        height="0.05"
        position="-0.5 1.05 -0.75"
        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-grab-controls="hand: left;"
      ></a-entity>
      <a-entity id="rightHand" hand-tracking-grab-controls="hand: right;">
      </a-entity>
    </a-scene>

    <script>
      document
        .querySelectorAll("[hand-tracking-grab-controls]")
        .forEach(function (hand) {
          hand.addEventListener("pinchstarted", function () {
            let colliders = document.querySelectorAll("[aabb-collider]");
            colliders.forEach(function (col) {
              AFRAME.utils.entity.setComponentProperty(
                col,
                "aabb-collider.enabled",
                false
              );
            });
          });
        });

       document
        .querySelectorAll("[hand-tracking-grab-controls]")
        .forEach(function (hand) {
          hand.addEventListener("pinchended", function () {
            let colliders = document.querySelectorAll("[aabb-collider]");
            colliders.forEach(function (col) {
              AFRAME.utils.entity.setComponentProperty(
                col,
                "aabb-collider.enabled",
                true
              );
            });
          });
        });
    </script>

  </body>
</html>