Catmull-Rom Spline

by 蔡 育曄

HTML

<div id="info">Catmull-Rom Curve
  <br>Right click to add data points
  <br>
  <button id="makeCurve" style="width:20%">Make Curve</button>
  <button id="go" style="width:20%"> Go!</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<canvas id='mycanvas'>
  <canvas>

CSS

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

#gui {
  position: absolute;
  top: 0px;
  left: 0px;
  border: solid 1px green;
  //height: 350px;
}

body {
  overflow: hidden;
}

JavaScript

// to deactivate default right button events
document.oncontextmenu = function() {
  return false;
}

var camera, scene, renderer;
var mousePoint;
var mouse = new THREE.Vector2();
var dataPoints = [];
var dataPointGroup = new THREE.Object3D();
var gcontrols,curve;
var resController;
var typeController, closedController;
var mycanvas, toggle = false;
var cube;
var quat1, quat2;
var pos1, pos2;
var alpha = 0;
var index=0,max;
init();
animate();

$("#makeCurve").click(function() {
  console.log('in makeCurve');
  makeCatmullRom();
});

$("#go").click(function() {
	toggle = !toggle;
	if(index == 0) 
  	walkingRoute(0);
});

function init() {

  mycanvas = document.getElementById('mycanvas');
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: mycanvas
  });
  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;

  scene.add(dataPointGroup);
  
	cube = new THREE.Mesh(new THREE.BoxGeometry(1,1,1),new THREE.MeshNormalMaterial());
  scene.add(cube);
  
  
  
  window.addEventListener('resize', onWindowResize, false);
  mycanvas.addEventListener('mousedown', onDocumentMouseDown, false);

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

  var gui = new dat.GUI();
  gui.domElement.id = 'gui';

  resController = gui.add(gcontrols, 'resolution', 10, 50);
  closedController = gui.add(gcontrols, 'closed');
  typeController = gui.add(gcontrols, 'type', ["centripetal", "chordal", "catmullrom"]);
  
  quat1 = new THREE.Quaternion();
  quat2 = new THREE.Quaternion();
}

function makeCatmullRom() {

  var cat;
  // if line exists, remove it...
  cat =...