Hermite Curve

with orbitControls, XZgrid, info

by pkin159

HTML

<div id="info">Hermite 2D Curve<br/>by clicking</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;
var which = 0;
var q = [];
var mouse = new THREE.Vector2();
var curveGroup1 = new THREE.Object3D();
var start = false;
init();
animate();

function FourPointForm(q0, q1, q2, q3) {
    
    var curveGroup = new THREE.Object3D();
    // p1 = q0, t1 = q1-q0, p2 = q3, t2 = q3-q2
    curveGroup.add(drawHermiteCurve(q0, q1.clone().sub(q0), q3, q3.clone().sub(q2)));

    // add four points
    var point, tangent;
    point = new THREE.Mesh(new THREE.CircleGeometry(1, 12), new THREE.MeshBasicMaterial());
    point.position.copy(q0);
    curveGroup.add(point);
    tangent = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial());
    tangent.position.copy(q1);
    curveGroup.add(tangent);

    point = new THREE.Mesh(new THREE.CircleGeometry(1, 12), new THREE.MeshBasicMaterial({
        color: 0xff1234
    }));
    point.position.copy(q3);
    curveGroup.add(point);
    tangent = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial({
        color: 0xff1234
    }));
    tangent.position.copy(q2);
    curveGroup.add(tangent);

    return curveGroup;
}

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

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

    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.add(p1.clone().multiplyScalar(h1));
        pt.add(p2.clone().multiplyScalar(h2));
        pt.add(t1.clone().multiplyScalar(h3));
        pt.add(t2.clone().multiplyScalar(h4));
        // pt.addScaledVector(p1, h1);  // no longer supported

       ...