Threejs - Custom 2D shape without using ShapeGeometry

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

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 here

var vec3 = new THREE.Vector3(0,1,0);
vec3.applyAxisAngle (new THREE.Vector3(0,0,1), Math.PI / 4);
console.error(vec3);

// ---- test
var cust = newShape();
scene.add(cust);

// ---- end of playground

function newShape(){
	var vertices = [
	new THREE.Vector3(),
	  new THREE.Vector3(0,12,0),
	  new THREE.Vector3(4,12,0),
	  new THREE.Vector3(4,24,0),
	  new THREE.Vector3(8,24,0),
	  new THREE.Vector3(12,12,0),
	  new THREE.Vector3(12,0,0),
	  ];
  var holes = [];
  var triangles, mesh;
  var geometry = new THREE.Geometry();
  var material = new THREE.MeshBasicMaterial({color: 0xff00ff});

  geometry.vertices = vertices;

  triangles = THREE.ShapeUtils.triangulateShape( vertices, holes );

  for( var i = 0; i < triangles.length; i++ ){

      geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));

  }

  mesh = new THREE.Mesh( geometry, material );
  return mesh;
}

// ---- end of playground

var render = function () {
  requestAnimationFrame( render );
  //camera.lookAt( scene.position );
  renderer.render( scene, camera );
};

function fti(feet){
	return feet * 12;
}

function createU(offset){
	
}

function...