Hermite Curve

with orbitControls, XZgrid, info

by k6e2n0t12

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 mouse = new THREE.Vector2();
var curve,count=0;
var q0,q1,q2,q3;

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

        geometry.vertices.push(pt.clone());
    }

    return new THREE.Line(geometry, material);
}

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

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

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    document.body.appendChild(renderer.domElement);
    window.addEventListener('resize', onWindowResize, false);
    window.addEventListener('mousedown', onDocumentMouseDown, false);
    //////// in the scene //////////////////////////////////////////

    var geometry = new THREE.Geometry();
    geometry.vertices.push(
    new THREE.Vector3(-40, -40, 0),
    new THREE.Vector3(40, -40, 0),
    new...