Skip to content

Instantly share code, notes, and snippets.

@bryik

bryik/.block

Last active November 15, 2016 20:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bryik/5a1fcd818e45014639008c3bbf6b9192 to your computer and use it in GitHub Desktop.
Save bryik/5a1fcd818e45014639008c3bbf6b9192 to your computer and use it in GitHub Desktop.
Download ZIP
Physics Shaking (Spheres and Boxes)
Raw
.block
license: mit
Raw
readme.md

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.

Raw
index.html
<!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.rawgit.com/donmccurdy/aframe-extras/8a76a783c2ba3d4779e92a892cc31fb0757fa4df/dist/aframe-extras.physics.min.js"></script>
<a-scene antialias="true">
<!-- Camera -->
<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>
<script>
var colorScale = d3.scaleSequential(d3.interpolatePlasma);
var dataset = [];
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', '');
var boxes = d3.select('#boxes');
boxes.selectAll('a-box')
.data(dataset)
.enter()
.append('a-box')
.attr('height', '0.1')
.attr('width', function(d, i) {
return String(0.1 * d);
})
.attr('depth', function(d, i) {
return String(0.1 * d);
})
.attr('color', function(d, i) {
return colorScale(i / 10);
})
.attr('position', function(d, i) {
return '0 ' + (i * 0.1) + ' 0';
})
.attr('dynamic-body', '');
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment