Threejs - Ray Line Triangles

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;
}
div .container {
  position: absolute;
  width: 300px;
  height: 50px;
  top: 11px;
  left: 11px;
  border:thin solid red;
  overflow: hidden;
}

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.AxesHelper();
scene.add(axisHelper);

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

// helps for visual debuging our face edges lines - a simple wrapper around the THREE.Line class
class Line{
	constructor(s,e, color = 0xff0000){
  	this.start = s;
    this.end = e;
    this.mat = new THREE.LineBasicMaterial({color: color});
    this.mesh = this.create();
  }
  create(){
  	if(this.start && this.end){
    	var geo = new THREE.Geometry();
      geo.vertices.push(this.start, this.end);
      return new THREE.Line(geo, this.mat);
    }
  }
}

// little data structure to know what lines belong to what face when we ray cast
// this is a custom line
class Face {
	constructor(faceIndex, lines){
  	this.faceIndex = faceIndex;
  	this.lines = [];
    this.lines.push(...lines);
  }
}

// ----- playground starts here ----------------- //
// for just generating the faces of a custom shape
var vec2s = [
new THREE.Vector2(0,0),
new THREE.Vector2(0,10),
new THREE.Vector2(10,10),
new THREE.Vector2(20,10),
new THREE.Vector2(20,0),
new THREE.Vector2(10,0)
];
var shape = new THREE.Shape(vec2s);
var shapeGeo = new THREE.ShapeGeometry(shape);


var allFaces = [];
// for each face we create 3 lines
// we will be casting THREE.Ray into line segments
// these lines are...