Hermite Curve

with orbitControls, XZgrid, info

HTML

<div id="info">Hermite 2D Curve</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

CSS

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

JavaScript

var camera, scene, renderer, border;
var curve;

init();
animate();

// reference:
// http://cubic.org/docs/hermite.htm

// return a group (Object3D) of a Hermite curve
function drawHermiteCurve(p1, t1, p2, t2) {
	var curveGroup = new THREE.Object3D();
    
    var s, s2, s3, h1, h2, h3, h4;
    var pt = new THREE.Vector3();
    var material = new THREE.LineBasicMaterial({
        color: 0xffff00
    });

    var geometry = new THREE.Geometry();

    for (s = 0; s <= 1; s+= 0.1) {
        s2 = s * s;
        s3 = s2 * s;
        h1 = 2 * s3 - 3 * s2 + 1;
        h2 = -2 * s3 + 3 * s2;
        h3 = s3 - 2 * s2 + s;
        h4 = s3 - s2;
        pt.set(0, 0, 0);
       // pt.addScaledVector(p1, h1);  // no longer supported
        
        pt.add (p1.clone().multiplyScalar (h1));
        pt.add (p2.clone().multiplyScalar (h2));
        pt.add (t1.clone().multiplyScalar (h3));
        pt.add (t2.clone().multiplyScalar (h4));
        
        geometry.vertices.push(pt.clone());
    }

    curveGroup.add (new THREE.Line(geometry, material));
    
    // add four points
    var point = new THREE.Mesh (new THREE.CircleGeometry (1,12), new THREE.MeshBasicMaterial());
    point.position.set (p1.x, p1.y, 0);
	curveGroup.add (point);
    var tangent = new THREE.Mesh (new THREE.PlaneGeometry (2,2), new THREE.MeshBasicMaterial());
    tangent.position.set (p1.x+t1.x, p1.y+t1.y, 0);
	curveGroup.add (tangent);

    point = new THREE.Mesh (new THREE.CircleGeometry (1,12), new THREE.MeshBasicMaterial({color:0xff1234}));
    point.position.set (p2.x, p2.y, 0);
    curveGroup.add (point);
    tangent = new THREE.Mesh (new THREE.PlaneGeometry (2,2), new THREE.MeshBasicMaterial({color:0xff1234}));
    tangent.position.set (p2.x+t2.x, p2.y+t2.y, 0);
    curveGroup.add (tangent);
    
    return curveGroup;
}

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

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

   ...