ThreeJS - Custom Draw Free Form

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>

JavaScript

// three.js animataed line using BufferGeometry

var renderer, scene, camera;

var line;
var MAX_POINTS = 1000;
var drawCount;
var splineArray= [];
var totalLength = 0;
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
var info = document.createElement( 'div' );
var geometry = new THREE.BufferGeometry();
init();
animate();

function init() {

	// info
	
	info.style.position = 'absolute';
	info.style.top = '30px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.style.color = '#fff';
	info.style.fontWeight = 'bold';
	info.style.backgroundColor = 'transparent';
	info.style.zIndex = '1';
	info.style.fontFamily = 'Monospace';
	info.innerHTML = "wall length: " + totalLength;
	document.body.appendChild( info );

	// renderer
	renderer = new THREE.WebGLRenderer();
	
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	// scene
	scene = new THREE.Scene();

	// camera
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, .001, 10000 );
	camera.position.set( 0, 0, 1000 );



	// attributes
	
	geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

	// drawcalls
	drawCount = 2; // draw the first 2 points, only
	geometry.setDrawRange( 0, drawCount );

	// material
	var material = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 2 } );

	// line
	line = new THREE.Line( geometry,  material );
	scene.add( line );

	// update positions
	updatePositions();
    
        document.addEventListener('mousedown', onMouseDown, false);
        document.addEventListener('mouseup', onMouseUp, false);
        

}

// update positions
function updatePositions() {
	var positions = line.geometry.attributes.position.array;
	var index = 0;
  for ( var i = 0; i < splineArray.length;  i ++ ) {
    positions[ index ++ ] = splineArray[i].x;
    positions[ index ++ ] = splineArray[i].y;
    positions[ index ++ ] = splineArray[i].z;
 ...