Make a set of cubes that represent segments of a 3d grid

aframe-grid-boxes.html

<!-- requires aframe and d3 java script includes -->

<a-scene id="my-scene" antialias='true'>

<a-assets>

        <a-mixin id="grid-cube" geometry="primitive: box; width: 0.50; height: 0.50; depth: 0.50"></a-mixin>
        <a-mixin id="grid-cube-hovered" material="color: magenta"></a-mixin>
        <a-mixin id="grid-cube-selected" material="color: cyan"></a-mixin>
        <a-mixin id="highlight">
          <a-animation begin="mouseenter" attribute="material.opacity" from="0" to="0.5"></a-animation>
          <a-animation begin="mouseleave" attribute="material.opacity" from="0.5" to="0"></a-animation>
        </a-mixin>
      </a-assets>

      <!-- Grid Boxes -->
      <a-entity id="grid-boxes">

        <script type="text/javascript">
        $( document ).ready(function() {

            var sceneEl = d3.select("#my-scene");

            var zeroX = -1.25;
            var zeroY = 0.25;
            var zeroZ = -2.25;

            var voxelSize = 0.5;

            var maxRows = 6;
            var maxColumns = 6;

            for ( var indexRow = 0; indexRow < maxRows; indexRow ++ ) {
              for ( var indexColumn = 0; indexColumn < maxColumns; indexColumn ++) {
                // <a-entity id="grid-x-y-z" mixin="grid-cube red" position="-0.25 0.25 -0.75">
                var position = (zeroX + indexRow * voxelSize) + ' ' + zeroY + ' ' + (zeroZ + indexColumn * voxelSize);
                console.log( "position: " + position );
                sceneEl.append('a-entity')
          	           .attr('id', 'grid-' + indexRow + '-0-0')
                       .attr('mixin', 'grid-cube red highlight collider')
          	           .attr('position', position);
              };
        	  };
        });
        </script>

        <a-entity id="grid-0-0-0" mixin="grid-cube red" position="-0.25 0.25 -0.75">
          <a-animation begin="mouseenter" attribute="material.opacity" from="0" to="0.5"
                       easing="linear" dur="1000" repeat="indefinite" direction="alternate"></a-animation>
          <a-animation begin="mouseleave" attribute="material.opacity" to="0"
                       easing="linear" dur="500" repeat="1" fill="forwards"></a-animation>

        </a-entity>

      </a-entity>
      
     </a-scene>