D3 Examples - generate simple mass

generate simple mass

This is a prototype for creating quick massing for typology studies.

I need to learn how to create divs on top of the scene, which I can copy from the A-Frame website itself.

It's quite straight forward after that as I will need to generate a grid of boxes based on the inputs.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <title>Custom massing using D3 and A-Frame</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/andreasplesch/aframe-meshline-component/dist/aframe-meshline-component.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="suncalc.js"></script>
</head>
​
<body>
  <div id="controls">
    "here are the controls!"
  </div>
    <div>
  <a-scene>
        <a-sky color="cyan"></a-sky>
    <a-camera position="20 10 20" camera="active:true" look-controls="" wasd-controls="" rotation="0 0 0"></a-camera>
  </a-scene>
</div>
    <script>
    var width = 3.2,
        depth = 3.2,
        height = 3.2;
    
    var xcount = 3,
        ycount = 3,
        zcount = 3;
  
    // create the base plane
    var scene = d3.select("a-scene");
​
    scene.append('a-circle')
      .attr("radius", ycount * depth)
      .attr("position", "0 0 0")
      .attr("rotation", "-90 0 0")
      .attr("color", "gray");
    
    scene.append('a-box')
      .attr("position", "0 " + zcount * height / 2 + " 0")
      .attr("width", xcount * width)
      .attr("depth", ycount * depth)
      .attr("height", zcount * height)
        .attr("opacity", "0.8")
      .attr("color", "red");
​
//     scene.append('a-camera')
//       .attr("position", "20 10 20")
//      .attr("rotation", "-19.59 40.90 0");
  </script>
</body>
​
    