Threejs - Custom Line Drawing In General

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  background-color: #fff;
  margin: 0px;
  overflow: hidden;
}

JavaScript

var renderer, scene, camera;
var canvasContainer;
var mouse = new THREE.Vector3();
var height = window.innerHeight * .75;

// facing us for mouse intersection
var plane = new THREE.Plane(new THREE.Vector3(0,0,1), 0);
var raycaster = new THREE.Raycaster();

var usePerspectiveCamera = false;	// toggles back and forth

var perspOrbit;
var perspCam;

var orthoOrbit;
var orthoCam;

//---- line segments
var customShape;
var linePencil;
var isDrawingLine = false;

//test material
var lineMat = new THREE.LineBasicMaterial({color:0xff0000, depthWrite: false});
var lineMat1 = new THREE.LineBasicMaterial({color:0x00ff00, depthWrite: false});	// endline1
var lineMat2 = new THREE.LineBasicMaterial({color:0x00ff00, depthWrite: false});	//endline2
var lineThickMat = new THREE.MeshBasicMaterial({color:0xffffff, opacity: .3, transparent: true});


// debugs ray and math plane for when drawing with the pencil with snap on
var RayPlaneDebug = (function(){
  function RayPlaneDebug(){
    this.length = 12;
    this.start = new THREE.Vector3();
    this.end = new THREE.Vector3();

    this.rayGeo = new THREE.Geometry();
    this.rayGeo.vertices.push(this.start, this.end);
    //var rayMat = new THREE.BasicLineMaterial({color:0x00ff00});
    this.mesh = new THREE.Line(this.rayGeo);

    // represent end end point of ray direction
    var ballGeo = new THREE.SphereGeometry(2,8,8);
    this.ball = new THREE.Mesh(ballGeo);
    this.mesh.add(this.ball);
    this.plane = null;
  }
  RayPlaneDebug.prototype.displayRay = function(ray){
    this.start.copy(ray.origin);
    this.ball.position.copy(this.start);

    var direction = ray.direction.clone();
    direction.setLength(this.length);
    var newEnd = this.start.clone().add(direction);
    this.end.copy(newEnd);

    this.rayGeo.verticesNeedUpdate = true;
  }
  RayPlaneDebug.prototype.displayPlane = function(plane){
    if(!this.plane){
      this.plane = new THREE.PlaneHelper(plane, 24);
      this.mesh.add(this.plane);
    }
   ...