A-Frame Course - Source of /examples/1700-physics-04-constraint.html

<!DOCTYPE html>
<html>
  <head>
    <title>Physics - 04 - Constraint</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: -1.8"
      cursor="rayOrigin: mouse"
      background="color: lightblue"
    >


      <!-- 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 -5"
        width="3"
        height="1"
        depth="1"
      ></a-box>

      <a-box position="0 1.25 -5" width="0.1" height="0.5" depth="1" id="other-box" static-body ></a-box>
      <a-box position="0 1.5 -5"  width="1" height="0.1" depth="1" constraint="target: #other-box; type: hinge; pivot:0 -0.05 0; targetPivot: 0 0.25 0" dynamic-body ></a-box>


      <a-box
        dynamic-body
        color="green"
        position="-0.35 10 -5"
        width="0.1"
        height="0.1"
        depth="0.1"
      ></a-box>
      <a-box
        dynamic-body
        color="green"
        position="0.35 11 -5"
        width="0.1"
        height="0.1"
        depth="0.1"
      ></a-box>
           <a-box
        dynamic-body
        color="green"
        position="-0.25 12 -5"
        width="0.1"
        height="0.1"
        depth="0.1"
      ></a-box>
    </a-scene>
  </body>
</html>