Threejs - Tables assembly

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>
<!--
  /**
   * corrects gl transparency rendering issues when no decking and framing is selected
   * the lower the number, the higher the priority to be rendered first
   */
  public static readonly RENDER_ORDER_DECK_FLOOR = new DeckDefaults(15);

  /**
   * corrects gl transparency rendering issues when no decking and framing is selected
   * the lower the number, the higher the priority to be rendered first
   */
  public static readonly RENDER_ORDER_FRAMING = new DeckDefaults(10);
  
  -->

CSS

body {
  margin:0;
}

JavaScript

class Line {
    constructor(start, end){
      if(start && end){
        this.start = start;
        this.end = end;
        this.mesh = THREE.Line(start, end);
      }
    }

    update(){
      this.line.needsUpdate();
    }
  }

  var objects = [];
  var scene = new THREE.Scene();

  var width = window.innerWidth;
  var height = window.innerHeight;

  var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 5000 );
  var renderer = new THREE.WebGLRenderer();

  renderer.setSize( width, height );
  renderer.setClearColor( 0xcccccc, 1 );
  document.body.appendChild( renderer.domElement );
  scene.add(camera);

  //var dirLight = new THREE.SpotLight('rgb(255,255,255)', 1);
  var dirLight = new THREE.DirectionalLight('rgb(255,255,255)', 1.2);
  dirLight.position.set( 5, 7, - 1 );
  //dirLight.position.set( 5, 50, - 1 );
  dirLight.lookAt( scene.position );
  scene.add(dirLight);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.screenSpacePanning = true;

  setToFullOrbit(controls)
  camera.position.copy(new THREE.Vector3(fti(15), fti(15), fti(15)) );
  // fix first frame render issue going invisible
  camera.lookAt(new THREE.Vector3(0,0,0));

  var axisHelper = new THREE.AxisHelper();
  scene.add(axisHelper);

  var grid = new THREE.GridHelper(fti(12), 12);
  //scene.add(grid);

  // ---- playground here
  var floorW = 50*12;
  var floorL = 40*12;
  var floor = createFloor(floorW,floorL, 0X00FF00);
  floor.position.set(floorW/2,0, floorL/2);

  var w = 6 * 12;
  var l = 2.5 * 12;
  var d = 2;
  var paddingX = w + (3);
  var paddingZ = l + (3*12);


  var tables = new THREE.Mesh();
  tables.position.set(fti(15),0,fti(3));
  scene.add(tables);
  for(var i=0; i<6; i++) {
      for(var j=0; j<6; j++){
          var lt = createLongTable(w, l, d, 0xffffff);
          // lt.position.set(i * l + padding, 0, j * w + padding);
          lt.position.set( paddingX * i, 0, paddingZ * j);
          tables.add(lt);
      }
  }


  var...