Catmull-Rom Spline

HTML

<div id="container">
  <div id="gui"></div>
  <div id="info">Catmull-Rom Curve
    <br>Right click to add data points
    <br>
    <button id="makeCurve" style="width:20%">Make Curve</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script type="text/javascript">
  document.oncontextmenu = function() {
    return false;
  }
</script>

CSS

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  bottom: 0px;
}
#container div#info {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
#gui {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
}

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mousePoint;
var mouse = new THREE.Vector2();
var dataPoints = [];
var dataPointGroup = new THREE.Object3D();
var gcontrols;
var resolutionController;
var typeController;
var closedController;

init();
animate();

$("#makeCurve").click(function() {
  console.log('in makeCurve');
  makeCatmullRom();
  //  line.name = "catmull";
  //  scene.add(line);
});

function init() {

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x202124);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(-10, 10, 10, -10, -10, 100);
  camera.position.z = 10;
  scene.add(camera);

  var gridXZ = new THREE.GridHelper(10, 1, 0xed6e55, 0x555555);
  scene.add(gridXZ);
  gridXZ.rotation.x = Math.PI / 2;
  ///////////////////////////////////////////////////////////////////////////
  //Create a closed wavey loop
  /*
  	dataPoints.push (
      new THREE.Vector3(-8, 0, 0),
      new THREE.Vector3(-4, 4, 0),
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(4, -4, 0),
      new THREE.Vector3(8, 0, 0)
    );
    */
  scene.add(dataPointGroup);

  window.addEventListener('resize', onWindowResize, false);
  window.addEventListener('mousedown', onDocumentMouseDown, false);

  gcontrols = {
    resolution: 20,
    closed: false,
    type: "centripetal"
  };

  var gui = new dat.GUI({
    autoPlace: false,
    height: 3 * 32 - 1 // spiegazione: http://learningthreejs.com/blog/2011/08/14/dat-gui-simple-ui-for-demos/
  });
  var menu = gui.addFolder('Splines');
  resolutionController = menu.add(gcontrols, 'resolution', 20, 100);
  typeController = menu.add(gcontrols, 'type', ["centripetal", "chordal", "catmullrom"]);
  closedController = menu.add(gcontrols, 'closed');

  var customContainer = document.getElementById('gui');
  customContainer.appendChild(gui.domElement);
}

function...