stack geometries

by jscastro76

HTML

<script src="https://threejs.org/build/three.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
  
  <canvas id="myCanvas"/>

CSS

body {
			background-color: #fff;
			margin: 0px;
			overflow: hidden;
		}

JavaScript

var renderer,
		  scene,
		  controls,
		  camera,
		  container = document.getElementById('myCanvas');

		//RENDERER
		renderer = new THREE.WebGLRenderer({
		  canvas: container,
		  antialias: true
		});
		//renderer.setClearColor(0x000000);
		renderer.setPixelRatio(window.devicePixelRatio); //device pixel ratio
		renderer.setSize(window.innerWidth, window.innerHeight); //canvas size

		//MATERIAL

		var data = [{
		  "id": 10075,
		  "size": 3,
		  "slotNumber": 1
		}, {
		  "id": 10174,
		  "size": 7,
		  "slotNumber": 4
		}];
		var rackListGroup;
		init();

		function init() {


		  scene = new THREE.Scene();
		  scene.background = new THREE.Color(0x999999);
		  var light = new THREE.AmbientLight(0xffffff);
		  light.position.set(0.5, 1.0, 0.5).normalize();
		  scene.add(light);
		  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		  camera.position.fromArray([0, 0, 140]);
		  scene.add(camera);

		  var gridHelper = new THREE.GridHelper(400, 40, 0x0000ff, 0x808080);
		  gridHelper.position.y = 0;
		  gridHelper.position.x = 0;
		  scene.add(gridHelper);

		  controls = new THREE.OrbitControls(camera, container);

		  rackListGroup = new THREE.Mesh();
		  rackListGroup.name = "Rack List"
		  var i;
		  for (i = 0; i < 1; i++) {
		    rackListGroup.add(drawRack(10, i))
		  }
		  scene.add(rackListGroup);
		  render();
		}

		function drawRack(size, rackNo) {
		  var rackGroup = new THREE.Group();
		  rackGroup.name = "rack " + rackNo;
		  var yPosition, yBaseHeight = 0;// I saw you start at -42;

		  var xPosition = -20 + parseInt(rackNo) * 40;
		  var slot = 1,
		    counter = 0;
		  var slotWidth = 5;
		  while (slot <= parseInt(size)) {
		    var slotSize = data[counter].size;
		    slot = slot + slotSize;
		    var slotHeight = (slotSize * slotWidth);
		    yPosition = yBaseHeight + (slotHeight / 2);
		    yBaseHeight = yBaseHeight + slotHeight;

		    var geometry = new THREE.BoxGeometry(30, slotHeight, 5);
		...