c-frame · kylebakerio · Oct 6, 2022 · Oct 1, 2022 · Oct 1, 2022 · Oct 1, 2022
diff --git a/dist/aframe-physics-system.js b/dist/aframe-physics-system.js
diff --git a/dist/aframe-physics-system.min.js b/dist/aframe-physics-system.min.js
diff --git a/examples/ammo.html b/examples/ammo.html
@@ -3,9 +3,10 @@
   <head>
     <title>Examples • AmmoDriver</title>
     <meta name="description" content="Hello, WebVR! - A-Frame" />
-    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
     <script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
     <script src="../dist/aframe-physics-system.js"></script>
+    <link rel="stylesheet" href="styles.css">
     <script>
       AFRAME.registerComponent("bounce", {
         init: function() {
@@ -54,6 +55,15 @@
     </script>
   </head>
   <body>
+    <div class="text-overlay">
+      <p>Demonstration of many Ammo driver features in a single example.</p>
+      <p>The cone is a kinematic object, and the purple box has a constraint attaching it to the cone.</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/ammo.html">
+        view code
+    </a>
     <a-scene physics="driver: ammo; debug: true; gravity: -9.8; debugDrawMode: 1">
       <a-camera near="0.001"></a-camera>
       <a-box

diff --git a/examples/cannon.html b/examples/cannon.html
@@ -3,8 +3,9 @@
   <head>
     <title>Examples • CannonDriver</title>
     <meta name="description" content="Hello, WebVR! - A-Frame">
-    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
     <script src="../dist/aframe-physics-system.js"></script>
+    <link rel="stylesheet" href="styles.css">
     <script>
       AFRAME.registerComponent('bounce', {
         init: function() {
@@ -30,7 +31,16 @@
     </script>
   </head>
   <body>
-    <a-scene physics="debug: false; gravity: -9.8;">
+    <div class="text-overlay">
+      <p>Demonstration of many Cannon driver features in a single example.</p>
+      <p>The cone is a kinematic object, and the purple box has a constraint attaching it to the cone.</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/cannon.html">
+        view code
+    </a>
+    <a-scene physics="debug: true; gravity: -9.8;">
       <a-camera near=0.001></a-camera>
 
       <a-box position="-1 5 -5" rotation="0 45 0" color="#4CC3D9" shadow body="shape: box;"></a-box>

diff --git a/examples/compound.html b/examples/compound.html
@@ -4,17 +4,28 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
     <title>Examples • Compound</title>
-    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
-    <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
-    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/components/sphere-collider.js"></script>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/components/sphere-collider.min.js"></script>
     <script src="../dist/aframe-physics-system.js"></script>
     <script src="components/force-pushable.js"></script>
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
+    <div class="text-overlay">
+      <p>Compund shape, using the Cannon driver.</p>
+      <p>Click when the red reticle is over the sphere to apply a force to it.</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/compound.html">
+        view code
+    </a>
     <a-scene environment physics="debug: true;">
       <!-- Player -->
-      <a-entity camera="userHeight: 1.6" look-controls wasd-controls position="0 0.1 0">
+      <a-entity camera look-controls wasd-controls position="0 1.6 0">
         <a-entity cursor
+                  raycaster="objects:[force-pushable]"
                   position="0 0 -0.5"
                   geometry="primitive: circle; radius: 0.01; segments: 4;"
                   material="color: #FF4444; shader: flat"></a-entity>
@@ -35,6 +46,7 @@
           shape__handle="shape: box;
                          halfExtents: 0.15 0.18 0.04;
                          offset: 0.4 0 0;"
+          force-pushable
       ></a-sphere>
     </a-scene>
   </body>

diff --git a/examples/constraints-ammo.html b/examples/constraints-ammo.html
@@ -5,13 +5,23 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
     <title>Examples • Constraints • AmmoDriver</title>
-    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
     <script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
-    <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
-    <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
+    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/fernandojsg/aframe-teleport-controls@master/dist/aframe-teleport-controls.min.js"></script>
     <script src="../dist/aframe-physics-system.js"></script>
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
+    <div class="text-overlay">
+      <p>Demonstration of many Ammo driver constraints including cone
+        twist, hinge, lock, point to point, and slider constraints.</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/consraints-ammo.html">
+        view code
+    </a>
     <a-scene environment physics="driver: ammo; debug: true">
       <a-entity id="cameraRig">
         <a-camera></a-camera>

diff --git a/examples/constraints.html b/examples/constraints.html
@@ -5,24 +5,45 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
     <title>Examples • Constraints</title>
-    <script type="text/javascript" src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
-    <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
-    <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
-    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/components/sphere-collider.js"></script>
+    <script type="text/javascript" src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/fernandojsg/aframe-teleport-controls@master/dist/aframe-teleport-controls.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/components/sphere-collider.min.js"></script>
     <script src="../dist/aframe-physics-system.js"></script>
     <script src="components/grab.js"></script>
+    <script src="components/force-pushable.js"></script>
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
+    <div class="text-overlay">
+      <p>Demonstration of many Cannon driver constraints including cone twist,
+        hinge, lock, point to point, and distance constraints.</p>
+      <p>Click when the red reticle is over a red object to apply a force to it.</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/constraints.html">
+        view code
+    </a>
     <a-scene environment>
       <a-entity teleport-controls hand-controls="hand: left" static-body="shape: sphere; sphereRadius: 0.02;" sphere-collider="objects: [dynamic-body];" grab></a-entity>
       <a-entity teleport-controls hand-controls="hand: right" static-body="shape: sphere; sphereRadius: 0.02;" sphere-collider="objects: [dynamic-body];" grab></a-entity>
 
+      <a-entity camera look-controls wasd-controls position="0 1.6 0">
+        <a-entity cursor
+                  raycaster="objects:[force-pushable]"
+                  position="0 0 -0.5"
+                  geometry="primitive: circle; radius: 0.01; segments: 4;"
+                  material="color: #FF4444; shader: flat"></a-entity>
+      </a-entity>
+
       <!-- CONE TWIST -->
       <a-entity position="2 0 -1">
         <a-text value="Cone Twist" position="0 1.5 0" align="center"></a-text>
         <a-sphere id="conetwist-target" radius="0.125" color="#777" position="0 1 0" static-body></a-sphere>
         <a-box width="0.25" height="0.25" depth="0.25" color="#F00" position="-0.5 1 0"
                dynamic-body
+               force-pushable
                constraint="type: coneTwist;
                            target: #conetwist-target;
                            pivot: 0.125 0 0.0;
@@ -41,6 +62,7 @@
                position="0.0 1 0.0"
                scale="0.25 0.25 0.25"
                dynamic-body
+               force-pushable
                constraint="type: hinge;
                            target: #hinge-target;
                            axis: 0 1 0;
@@ -64,6 +86,7 @@
                position="0 1.25 0"
                scale="0.25 0.25 0.25"
                dynamic-body
+               force-pushable
                constraint="type: lock;
                            target: #lock-target;
                            maxForce: 100">
@@ -83,6 +106,7 @@
                position="0.125 0.875 0"
                scale="0.25 0.25 0.25"
                dynamic-body
+               force-pushable
                constraint="type: pointToPoint;
                            target: #pointtopoint-target;
                            pivot: -0.125 -0.125 0.125;
@@ -103,6 +127,7 @@
                radius="0.125"
                position="0 1.2 0"
                dynamic-body
+               force-pushable
                constraint="type: distance;
                            target: #distance-target;
                            distance: 0.5;

diff --git a/examples/materials.html b/examples/materials.html
@@ -4,19 +4,32 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
     <title>Examples • Materials</title>
-    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
-    <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
-    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.2.5/dist/components/sphere-collider.js"></script>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/components/sphere-collider.min.js"></script>
     <script src="../dist/aframe-physics-system.js"></script>
     <script src="components/force-pushable.js"></script>
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
+    <div class="text-overlay">
+      <p>Bounce simulation with restitution (bounciness) of 1 using the Cannon driver.</p>
+      <p>Click when the red reticle points at the ball to apply a force to it (if you are having trouble with timing, position yourself beneath it using WASD).</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/materials.html">
+        view code
+    </a>
     <a-scene stats="true"
              environment
-             physics="driver: worker; restitution: 1;">
+             physics="restitution: 1">
+      <!-- worker version (force-pushable not working): 
+             physics="driver: worker; restitution: 1;">-->
       <!-- Player -->
-      <a-entity camera="userHeight: 1.6" look-controls wasd-controls position="0 0.1 0">
+      <a-entity camera look-controls wasd-controls position="0 1.6 0">
         <a-entity cursor
+                  raycaster="objects:[force-pushable]"
                   position="0 0 -0.5"
                   geometry="primitive: circle; radius: 0.01; segments: 4;"
                   material="color: #FF4444; shader: flat"></a-entity>

diff --git a/examples/spring.html b/examples/spring.html
@@ -4,10 +4,20 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
     <title>Examples • Spring</title>
-    <script type="text/javascript" src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
+    <script type="text/javascript" src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
     <script src="../dist/aframe-physics-system.js"></script>
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
+    <div class="text-overlay">
+      <p>Four vertical springs each between two boxes with an
+        assortment of damping and stiffness values using the Cannon driver.</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/spring.html">
+        view code
+    </a>
     <a-scene stats>
       <a-text color="black" position="1.5 3 -3" value="damping: 0.25\nstiffness: 25"></a-text>
       <a-box id="one" position="2 2 -3" color="blue" static-body></a-box>

diff --git a/examples/stress.html b/examples/stress.html
@@ -4,19 +4,30 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
     <title>Examples • Stress Test</title>
-    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
-    <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
-    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/components/sphere-collider.js"></script>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/components/sphere-collider.min.js"></script>
     <script src="../dist/aframe-physics-system.js"></script>
     <script src="components/force-pushable.js"></script>
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
+    <div class="text-overlay">
+      <p>Point the red reticle at a block, and click the mouse to apply a strong force to it.</p>
+      <p>Use mouse and WASD to look and move around.</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/stress.html">
+        view code
+    </a>
     <a-scene stats="true"
              environment
              physics="driver: local; workerFps: 60;">
       <!-- Player -->
       <a-entity camera look-controls wasd-controls position="0 1.6 0">
         <a-entity cursor
+                  raycaster="objects:[force-pushable]"
                   position="0 0 -0.5"
                   geometry="primitive: circle; radius: 0.01; segments: 4;"
                   material="color: #FF4444; shader: flat"></a-entity>

diff --git a/examples/styles.css b/examples/styles.css
@@ -0,0 +1,39 @@
+
+.code-link {
+    position: fixed;
+    right: 50px;
+    top: 50px;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    display: flex;
+    background: white;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    text-decoration: none;
+    text-align: center;
+    color: black;
+    font-family: courier;
+    font-weight: bold;
+    z-index: 10;
+}
+
+.text-overlay {
+    background: black;
+    color: white;
+    width: 40%;
+    position: absolute;
+    bottom: 10px;
+    left: 30%;
+    z-index: 10;
+    font-size: 20px;
+    font-family: arial;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+}
+
+.text-overlay p {
+  margin: 0.2em 1em;
+}
diff --git a/examples/sweeper.html b/examples/sweeper.html
@@ -4,20 +4,31 @@
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
     <title>Examples • Sweeper</title>
-    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
-    <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
-    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/components/sphere-collider.js"></script>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/components/sphere-collider.min.js"></script>
     <script src="../dist/aframe-physics-system.js"></script>
     <script src="components/grab.js"></script>
     <script src="components/rain-of-entities.js"></script>
     <script src="components/force-pushable.js"></script>
+    <link rel="stylesheet" href="styles.css">
   </head>
   <body>
+    <div class="text-overlay">
+      <p>Blocks fall at random from teh sky.  The sweeper wall sweeps them away.</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/sweeper.html">
+        view code
+    </a>
     <a-scene environment
              rain-of-entities="spread: 3"
-             physics="driver: worker; workerFps: 60; workerInterpolate: true; workerInterpBufferSize: 2;">
+             physics>
+      <!-- worker version (sweeper not working): 
+           physics="driver: worker; workerFps: 60; workerInterpolate: true; workerInterpBufferSize: 2;"-->
       <!-- Player -->
-      <a-entity camera="userHeight: 0.6" look-controls position="0 0.1 0">
+      <a-entity camera look-controls position="0 0.6 0">
         <a-entity cursor
                   position="0 0 -0.5"
                   geometry="primitive: circle; radius: 0.01; segments: 4;"