Threejs - Ray Line Parallel Test

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

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

class Line{
	constructor(s,e){
  	this.start = s;
    this.end = e;
    this.mat = new THREE.LineBasicMaterial({color:0xff0000});
    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);
    }
  }
}

// ----- playground starts here ----------------- //

var l1 = new Line(new THREE.Vector3(), new THREE.Vector3(10,0,0));
//scene.add(l1.mesh);
//dir.applyAxisAngle(new THREE.Vector3(0,0,1), Math.PI / 2);
//console.log(dir);

var l2 = new Line(new THREE.Vector3(5,6,0), new THREE.Vector3(10,6,0));
scene.add(l2.mesh);

var ray = new THREE.Ray();
var origin = new THREE.Vector3(1,0,0);
var dir = new THREE.Vector3(1,1,0).normalize();	// always work with a normlaize vector
ray.set(origin, dir);

// ray cast to line segment
var intersection = new THREE.Vector3();
var intersectionPoint = new THREE.Vector3();

// raycast
// dist will be zero or negative-near-zero value if ray intersects line.
var dist = ray.distanceSqToSegment(l2.start, l2.end, intersection);
console.log('distToSquared: ' + dist);

// when you do hit, you can...