Catmull-Rom Spline

by Rebecca Chen

HTML

<div id="info">Catmull-Rom Curve
  <br>Right click to add data points
  <br>
  <button id="makeCurve" style="width:20%">Make Curve</button>
</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 type="text/javascript">
document.oncontextmenu=function(){return false;}
</script>

CSS

#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();

init();
animate();

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

function init() {

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

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  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,'red','white');
 // 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);
}

function makeCatmullRom () {

	var curve = new THREE.CatmullRomCurve3(dataPoints);
  var geometry = new THREE.Geometry();
  geometry.vertices = curve.getPoints(50);

  var material = new THREE.LineBasicMaterial({
    color: 0xffff00
  });
	return line = new THREE.Line (geometry, material);

}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

// dynamic adding vertices is NOT supported
// http://stackoverflow.com/questions/14840026/dynamically-adding-vertices-to-a-line-in-three-js

function makeADot (pos) {
	var geometry = new THREE.CircleGeometry( 0.3, 32 );
	var material = new THREE.MeshBasicMaterial( { color:...