CatmullRomCurve3

interactive

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  overflow:  hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x606060);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var dirLight = new THREE.DirectionalLight(0xffffff, 0.75);
dirLight.position.setScalar(10);
scene.add(dirLight);
scene.add(new THREE.AmbientLight(0x404040));

scene.add(new THREE.GridHelper(20, 20, 0x404040, 0x404040));

var plane = new THREE.Plane();
plane.setFromCoplanarPoints(new THREE.Vector3(), new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 1));

var controlPoints = [];
controlPoints.push(createPoint(new THREE.Vector3(-5, 0,  0), "white"));
controlPoints.push(createPoint(new THREE.Vector3( 5, 0, -5), "white"));
controlPoints.push(createPoint(new THREE.Vector3( 0, 0,  5), "white"));
controlPoints.push(createPoint(new THREE.Vector3( 0, 0,  0), "white"));

function createPoint(position, color){
  var viewGeometry = new THREE.BoxGeometry(.5, 1.55, .5, 1, 3, 1);
  viewGeometry.translate(0, .75, 0);
  var viewMaterial = new THREE.MeshBasicMaterial({color: color, wireframe: false, transparent: true, opacity: .5});
  var view = new THREE.Mesh(viewGeometry, viewMaterial);
  view.position.copy(position);
  scene.add(view);
  return view;
}

function createCurveGeometry(){
  var pts = [];
  controlPoints.forEach(pt => {
  	pts.push(pt.position);
  });
  var curve = new THREE.CatmullRomCurve3( pts );
  curve.closed = true;
  var curveGeometry = new THREE.Geometry();
  curveGeometry.vertices = curve.getPoints(75);
  curveGeometry.translate(0, 1, 0);
  return curveGeometry;
}
var curveMaterial = new THREE.LineBasicMaterial({color: "white"});
var curveLine = new THREE.Line(createCurveGeometry(), curveMaterial);
scene.add(curveLine);

var...