Hermite_myVer

threejs 2D template

by KUO YOU-TING

HTML

<div id="info">THREE.JS 2D Template
    <br/>Left & right click to draw line</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<!-- the following disable the regular right-button click -->
<script type="text/javascript">
    document.oncontextmenu = function() {
        return false;
    }
</script>

CSS

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

JavaScript

var camera, scene, renderer;
var mouse = new THREE.Vector2();
var cameraLeft = -50,
    cameraRight = 50,
    cameraTop = 50,
    cameraBottom = -50,
    cameraNear = -10,
    cameraFar = 10;

var leftPt, rightPt; // empty array
var p0, p1, p2, p3;
var count = 0; //計數

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

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

       ...