| license: mit |
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.
Built with blockbuilder.org
| <!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://rawgit.com/andreasplesch/aframe-meshline-component/master/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> |