draw 2D Curve

by jmchen

HTML

<div id="info">THREE.JS 2D Curve <br/>
  <button id="startC" style="width:20%">Click away</button>
  <button id="stopC" style="width:20%">Draw</button>
  <button id="clearC" style="width:20%">Clear</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

// open curve issue:
// http://test2.triait.com/question/Drawing-an-open-arc-with-threejs/

var camera, scene, renderer;
//var mesh;
var mouse = new THREE.Vector2();
//var startCurve;
var dPoints;
var dPointsMesh = new THREE.Object3D();
var dataP;
var splineObject;

init();
animate();

$("#startC").click(function () {
 	dPointsMesh = new THREE.Object3D();
  scene.add (dPointsMesh);
  dPoints = [];
});

$("#stopC").click(function () {
  dPoints.pop(); // remove the last dpoint
  makeSpline (dPoints);
});

$("#clearC").click(function () {
  dPoints = null;
  scene.remove (dPointsMesh);
	scene.remove (splineObject);
});


function traceY () {
	var verts = splineObject.geometry.vertices;  
  for (var i = 0; i < verts.length; i++) {
    console.log (verts[i].y);
  }
}

function makeSpline (dPoints) {   // data points
	var curve = new THREE.SplineCurve (dPoints);
  var points = curve.getSpacedPoints(20);

  var path = new THREE.Path();
  var geometry = path.createGeometry(points);
  var material = new THREE.LineBasicMaterial({
    color: 0xffff00
  });

  splineObject = new THREE.Line(geometry, material);
  scene.add(splineObject);
}

function init() {
  scene = new THREE.Scene();

  camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 10);
  camera.position.z = 10;

  dataP = new THREE.Mesh (new THREE.CircleGeometry(1,10), new THREE.MeshBasicMaterial());
  
  var gridXZ = new THREE.GridHelper(50, 10);
  gridXZ.setColors(new THREE.Color(0xff00ff), new THREE.Color(0xffffff));
  gridXZ.rotation.x = Math.PI / 2;
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
  window.addEventListener('mousedown', onDocumentMouseDown, false);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
...