Threejs - Under Decking

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

body {
  margin:0;
}

JavaScript

/**
   * The base shape
   * @constructor
   * @param {THREE.Vector3} points that define the shape
   */
  class Shape {

    constructor(points) {

      /**
       * The shape's container which is an empty mesh
       * @type {THREE.Mesh}
       */
      this.mesh = new THREE.Mesh();
      this.id = this.mesh.id;
      this.mat = new THREE.MeshBasicMaterial({color: 0x0000ff, transparent: true, opacity: .5, side: THREE.DoubleSide});
      this.underMat = new THREE.MeshBasicMaterial({color: 0x0000ff, side:
        THREE.DoubleSide});

      /**
       * all the points that represent the shape
       */
      this.points = points;
      this.updateBgMesh();
      this.createUnderMesh();
      /* this.createPerpendicularCornerLine() */;
    }

    /**
     * helper to draw lines at corners to the under decking
     */
    createPerpendicularCornerLine(){
      var index = 0;
      var points = vec2sToVec3s(this.points);
      points.forEach((point) => {
        var lineGeo = new THREE.Geometry();

        var p1 = point.clone();
        var p2 = p1.clone();
        var w = this.underDeckingMesh.geometry.vertices[index];
        p2.copy(w);

        lineGeo.vertices.push(p1, p2);

				var lineMat = new THREE.LineBasicMaterial({color:0xff00ff});
        var line = new THREE.Line(lineGeo, lineMat);
        this.mesh.add(line);
        index++;
      });
    }

    /**
     * The background mesh.
     * Updates only on finalize.
     */
    updateBgMesh() {
      if (this.bgMesh) {
        this.mesh.remove(this.bgMesh);
      }

      var pointType = this.points[0];
      var levelGeo;

      if(pointType instanceof THREE.Vector2){
        levelGeo = this.createShape2dGeo(this.points);
      } else if(pointType instanceof THREE.Vector3){
        throw new Error('points are not type vector2');
      }

      this.bgMesh = new THREE.Mesh(levelGeo, this.mat);
      this.bgMesh.name = 'bgMesh';
      this.mesh.add(this.bgMesh);
    }

    /**
     * Create and returns a...