Threejs - Custom Countour Lines

Not the best as it produces some odd offsets

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

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, 1000 );
var renderer = new THREE.WebGLRenderer();

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

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = true;
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
// 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 starts here ----------------- //
var points = [
	new THREE.Vector3(-71,-28,0),new THREE.Vector3(-71,42,0),new THREE.Vector3(97,42,0),new THREE.Vector3(97,-32,0),new THREE.Vector3(39,-32,0),new THREE.Vector3(39,10,0),new THREE.Vector3(-26,10,0),new THREE.Vector3(-26,-28,0),new THREE.Vector3(-71,-28,0)
];
console.log('points b4 offset: ' + points.length);

createLine(points, 0x0000ff);

var pointsWithOffset = completeContour(5, points);
//createLine(pointsWithOffset);

createShape(pointsWithOffset);



// ---- end of playground ---------------------- //

function createLine(points, color){
	var color = color || 0xff0000;
	var geo = new THREE.Geometry();
  geo.vertices.push(...points);
  var line = new THREE.Line(geo, new THREE.LineBasicMaterial({color: color}));
  scene.add(line);
  console.warn('line addded');
}

function createSphere(size){
	var mesh = new THREE.Mesh(new THREE.SphereGeometry(size,10,10));
	scene.add(mesh);
  return mesh;
}

function createShape(vec3s, color = 0x00ff00) {
	// ---- playground here
	var points = vec3sToVec2s(vec3s);
  var shape = new THREE.Shape(points);
  var geo = new THREE.ShapeGeometry(shape);
  console.log('geo without merge verts: ' +...