2D Curve

by jmchen

HTML

<div id="info">THREE.JS 2D Curve</div>
<script src="https://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

// open curve issue:
// http://test2.triait.com/question/Drawing-an-open-arc-with-threejs/

var camera, scene, renderer;
var mesh, border, angle = 0;
var mousePoint;
var mouse = new THREE.Vector2();

init();
animate();

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

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

    // Create a sine-like wave
/*
  var curve = new THREE.SplineCurve([
    new THREE.Vector2(0,0),
    new THREE.Vector2(5, 1.5),
    new THREE.Vector2(10, 10.0),
    new THREE.Vector2(15, 22.5),
    new THREE.Vector2(20, 40.0)]);
    curve.autoClose = false;
*/
  var curve = new THREE.CubicBezierCurve(
	new THREE.Vector3( -10, 0, 0 ),
	new THREE.Vector3( -5, 15, 0 ),
	new THREE.Vector3( 20, 15, 0 ),
	new THREE.Vector3( 10, -10, 0 )
);

var points = curve.getSpacedPoints( 20 );

var path = new THREE.Path();
var geometry = path.createGeometry( points );
  
/*
  var path = new THREE.Path(curve.getPoints(3));
	console.log (path);
  path.splineThru ([new THREE.Vector2(),
                   new THREE.Vector2 (5,1.5),
                   new THREE.Vector2 (10,10)]);
  var geometry = path.createPointsGeometry(15);
  console.log (geometry.vertices.length)
  */
  var material = new THREE.LineBasicMaterial({
        color: 0xffff00
    });

    // Create the final Object3d to add to the scene
    var splineObject = new THREE.Line(geometry, material);
    scene.add(splineObject);
    
    var gridXZ = new THREE.GridHelper(50, 10);
    gridXZ.setColors(new THREE.Color(0xff00ff), new THREE.Color(0xffffff));
    gridXZ.rotation.x = Math.PI / 2;
    scene.add(gridXZ);

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

function...