bryik/.block

## .block
license: mit

## readme.md

      
    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.

  
## 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>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
No results found