| license: mit |
Originally a test comparing the 'shakiness' of spheres to boxes--spheres are stable while boxes shake if stacked.
However, I got sidetracked into making a loop. Strangely, attempting to update the position of an entity with a dynamic-body failed (nothing happened). The work-around is to remove the dynamic-body, re-position, and then add the dynamic-body component once-more (i.e. turn physics off for the entity, move, and then turn it on again).
| <!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" physics> | |
| <!-- Camera --> | |
| <a-entity position="0 1.6 0"> | |
| <a-entity camera look-controls wasd-controls></a-entity> | |
| </a-entity> | |
| <a-entity id='container' position="0 1 -3"> | |
| <a-entity id="jenga" position="0 0.2 0"></a-entity> | |
| <a-box id='platform' width='2' depth='2' height='0.1' color='grey' static-body></a-box> | |
| </a-entity> | |
| <a-plane rotation="-90 0 0" position='0 0 -1.5' 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 jenga = d3.select('#jenga'); | |
| var container = d3.select('#container'); | |
| var dataset = []; // 10, 9, 8...1 | |
| for (var i = 10; i > 0; i--) { | |
| dataset.push(i); | |
| } | |
| // Create tower of spheres | |
| jenga.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.2) + ' 0'; | |
| }) | |
| .attr('dynamic-body', '') | |
| .call(start); | |
| function start () { | |
| // Knock it down | |
| container.append('a-sphere') | |
| .attr('id', 'ignition') | |
| .attr('radius', '0.1') | |
| .attr('color', 'red') | |
| .attr('position', '0.1 10 0') | |
| .attr('dynamic-body', ''); | |
| var t = d3.timeout(rebuild, 10000); // Reset tower of spheres after 10 seconds | |
| } | |
| function rebuild () { | |
| // Remove ignition sphere | |
| d3.select('#ignition') | |
| .remove(); | |
| // Update spheres, stack them up again | |
| jenga.selectAll('a-sphere') | |
| .data(dataset) | |
| .attr('dynamic-body', null) // <- Interesting, tower cannot be rebuilt if dynamic-body is on | |
| .attr('radius', '0.1') | |
| .attr('color', function(d, i) { | |
| return colorScale(i / 10); | |
| }) | |
| .attr('position', function(d, i) { | |
| return '0 ' + (i * 0.2) + ' 0'; | |
| }) | |
| .attr('dynamic-body', '') // <- Turn physics back on | |
| .call(start); // Knock it down again | |
| } | |
| </script> |
