Physics Shaking (Spheres and Boxes)

Physics shaking (spheres and boxes)

Comparing the stability of stacked spheres and boxes with physics from A-Frame Extras (Cannon.js). The boxes appear to bounce off each other in a feedback loop until they fall over, while the spheres are surprisingly stable. This problem occurs wherever a box makes contact with another box (unless one of the boxes is a static-body). Lowering the force of gravity helps as does using pre-generated box entities.

The same issue can be seen in some of the official Cannon.js demos (select the "convex on convex" option).

A Pen by bryik on CodePen.

forked from bryik's block: Physics Shaking (Spheres and Boxes)

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras/8a76a783c2ba3d4779e92a892cc31fb0757fa4df/dist/aframe-extras.physics.min.js"></script>

<a-scene antialias="true">
  
  <a-entity position="0 1.6 0">
    <a-entity camera look-controls wasd-controls></a-entity>
  </a-entity>
  
  <a-entity id='boxContainer' position="-1 1 -3">
    <a-entity id="boxes" position="0 0.2 0"></a-entity>
    <a-box id='platform' width='1' depth='1' height='0.1' color='grey' static-body></a-box>
  </a-entity>
  
  <a-entity id='sphereContainer' position="1 1 -3">
    <a-entity id="spheres" position="0 0.2 0"></a-entity>
    <a-box id='platform' width='1' depth='1' height='0.1' color='grey' static-body></a-box>
  </a-entity>
  
  <a-plane rotation="-90 0 0" position='0 0 -1' width="4" height="4" color="black" static-body></a-plane>
  <a-sky color="white"></a-sky>
</a-scene>

for (var i = 10; i > 0; i--) {
    dataset.push(i);
  }

var spheres = d3.select('#spheres');
  spheres.selectAll('a-sphere')
         .data(dataset)
         .enter()
         .append('a-sphere')
         .attr('radius', '0.1')
         .attr('color', function(d, i) {
           return colorScale(i / 10);
         })
         .attr('position', function(d, i) {
           return '0 ' + (i * 0.1) + ' 0';
         })
         .attr('dynamic-body', '');

Updated missing url https://cdn.rawgit.com/donmccurdy/aframe-extras/8a76a783c2ba3d4779e92a892cc31fb0757fa4df/dist/aframe-extras.physics.min.js to https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras/8a76a783c2ba3d4779e92a892cc31fb0757fa4df/dist/aframe-extras.physics.min.js

https://aframe.io/releases/0.3.0/aframe.min.js

https://d3js.org/d3.v4.min.js

https://cdn.rawgit.com/donmccurdy/aframe-extras/8a76a783c2ba3d4779e92a892cc31fb0757fa4df/dist/aframe-extras.physics.min.js