Threejs -Line inside a Math Line + Movement + Math Plane

A math plane has a nomalized vector normal in order to know how the plane is tilted. It doesn't have an aboslute position like a mesh and it has no boundary and is infinite. A math ray can hit a math plane from any direction, front and back, a long as the ray is perpendicular and not parallel to the plane. To set a math plane in position and face a direction, use the method setFromNormalAndCoplanarPoint();

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>
<div id="print">

</div>

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();
    
    var intersectionBallGeo = new THREE.SphereGeometry(.1,8,8);
    this.intersectionBall = new THREE.Mesh(intersectionBallGeo, new THREE.MeshBasicMaterial({color:0xff0000}));
    this.scene.add(this.intersectionBall);
    
    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.AxesHelper();
    this.scene.add(axisHelper);

   	var line = new Line(new THREE.Vector3(0,1,0), new THREE.Vector3(-8,1,0), this.scene);
    line.createLineMesh();
    
    var sphereGeo = new THREE.SphereGeometry(.1,10,10);
    var sphere = new THREE.Mesh(sphereGeo, new THREE.MeshBasicMaterial({color:0x0000ff}));
    sphere.position.x = -2;
    this.scene.add(sphere);
    
    // sphere.position.distanceTo(new THREE.Vector3())
    
    // keep the plane at a constant 0 and to move plane around
    // use instead setFromNormalAndCoplanarPoint to move the math plane to a location with a vector normal
    var plane...