Threejs - Ray cast against Math Line
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
/* fix mouse click offset errors when doing drags */
body {
margin: 0;
}
JavaScript
class Main {
constructor(){
this.objects = [];
this.scene = new THREE.Scene();
var width = window.innerWidth;
var height = window.innerHeight * .75;
this.camera = new THREE.PerspectiveCamera(
35, width/height, 0.1, 1000
);
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( width, height );
this.renderer.setClearColor( 0xcccccc, 1 );
// controls should set 2nd param or mouse move will be all over the main dom element
// null on 2nd param, threejs will use the parent as the mouse click and prevent default
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
// will turn off zooming while panning with right mouse click, false by default
this.controls.screenSpacePanning = true;
document.body.appendChild( this.renderer.domElement );
this.scene.add(this.camera);
this.setToFullOrbit(this.controls);
this.camera.position.copy(new THREE.Vector3(10,10,10));
// fix first frame render issue going invisible
this.camera.lookAt(new THREE.Vector3(0,0,0));
var axisHelper = new THREE.AxisHelper();
this.scene.add(axisHelper);
var grid = new THREE.GridHelper();
this.scene.add(grid);
this.createScene();
}
createScene(){
// the line sgement
var v1 = new THREE.Vector3(0,1,0);
var v2 = new THREE.Vector3(7,1,0);
// line visual helper
var lineGeo = new THREE.Geometry();
lineGeo.vertices.push(v1, v2);
var line = new THREE.Line(lineGeo);
this.scene.add(line);
// the math ray
var ray = new THREE.Ray();
var origin = new THREE.Vector3(2,-3,0);
var direction = new THREE.Vector3(1,1,0);
direction.normalize(); // FIX
ray.set(origin, direction);
// visually see the ray (does not draw an infinite line, only up to a defined length)
var rayHelper = new RayHelper(ray, 18);
this.scene.add(rayHelper.mesh);
// ray...