Threejs - pattern2

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

var scene, renderer, camera;
var cube;
var controls;

var hollandBoardWalkWidth = 16;
var hollandBoardWalkDepth = 4;
var hollandBoardWallHeight = 2.37;

var hollandWidth = 8;
var hollandDepth = 4;
var hollandHeight = 2.5;

var hollandXLWidth = 8;
var hollandXLDepth = 8;
var hollandXLHeight = 2.375;

var finalPattern = [];

class DisplayPattern {
	constructor() {
  	this.blocks = [];
  }
  
  add(block) {
  	this.blocks.push(block);
  }
  
  getBlocks() {
  	return this.blocks;
  }
}

class Block {
	constructor(width, depth, height, color) {
  	this.width = width;
    this.depth = depth;
    this.height = height;
    this.geometry = new THREE.BoxGeometry(width, height, depth);
    this.material = new THREE.MeshLambertMaterial({
    color: color});
    this.mesh = new THREE.Mesh(this.geometry, this.material);
    this.addWireFrame();
	}
  
  getWidth() {
  	return this.width;
  }
  
  getHeight() {
  	return this.height;
  }
  
  getDepth() {
  	return this.depth;
  }
  
  getMesh() {
  	return this.mesh;
  }
  
  addWireFrame() {
  	 var geo = new THREE.EdgesGeometry(this.geometry);
  	var mat = new THREE.LineBasicMaterial({
    color: 0x000000,
    linewidth: 90
  	});
  	var wireframe = new THREE.LineSegments(geo, mat);
  	wireframe.renderOrder = 1; // make sure wireframes are rendered 2nd
  
  	this.mesh.add(wireframe);
  }
  
  rotateY(degree) {
  	this.mesh.rotation.y = degree * Math.PI / 180;
  }
  
  translate(x, y, z) {
  	this.mesh.position.add(new THREE.Vector3(x, y, z));
  }
  
  clone() {
  	return this.mesh.clone();
  }
 
}

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  var center = new THREE.Vector3(72, 0.625, -72);

  var gridXZ = new THREE.GridHelper(1000, 100);
  scene.add(gridXZ);

  var axes = new THREE.AxesHelper(1000);
 ...