Threejs - Custom Line to simple 3D

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>
<p>
Draw up to 4 points
</p>

CSS

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

JavaScript

var renderer, scene, camera;
var line;
var count = 0;
var mouse = new THREE.Vector3();
var mesh3D;
var maxPoint = 6;
var height = window.innerHeight * .75;

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

var point3ds = [];

var usePerspectiveCamera = false;	// toggles back and forth

var perspOrbit;
var perspCam;

var orthoOrbit;
var orthoCam;

init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
	
  
  renderer.setSize(window.innerWidth, height);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera perspective
  perspCam = new THREE.PerspectiveCamera(45, window.innerWidth / height, 1, 10000);
  perspCam.position.set(0, 0, 200);
  
  // camera ortho
  var width = window.innerWidth;
  //var height = window.innerHeight;
  orthoCam = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, 0, 1200);
  
  // assign cam
  camera = perspCam;
  
  someMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff, side: THREE.DoubleSide, transparent: true, opacity:0.3});
  
  // grid
  var grid = new THREE.GridHelper(1024, 56);
  grid.rotateX(Math.PI / 2);
  scene.add(grid);

  // geometry
  var geometry = new THREE.BufferGeometry();
  var MAX_POINTS = 500;
  positions = new Float32Array(MAX_POINTS * 3);
  geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));

  // material
  var material = new THREE.LineBasicMaterial({
    color: 0xff0000,
    linewidth: 2
  });

  // line
  line = new THREE.Line(geometry, material);
  line.position.z = 0;
  scene.add(line);

  document.addEventListener("mousemove", onMouseMove, false);
  document.addEventListener('mousedown', onMouseDown, false);
  
  createUI();
}

// update line
function updateLine() {
  positions[count * 3 - 3] = mouse.x;
  positions[count * 3 - 2] = mouse.y;
  positions[count * 3 - 1] = mouse.z;
 ...