Doodle3D-Slicer/doodle_app/js/DrawCanvas.js

function DrawCanvas (scene) {
	"use strict";

	this.domElement = document.createElement("canvas");

	paper.setup(this.domElement);

	var path = new paper.Path();

	this.scene = scene;
	this.test();
};
DrawCanvas.prototype.test = function () {
	"use strict";
	var scope = this;

	var a = [];

	var tool = new paper.Tool();

	var path;

	tool.onMouseDown = function (event) {
		if (path) {
			path.selected = false;
		}

		a.push(event.point);

		path = new paper.Path({
			segments: [event.point],
			strokeColor: 'black',
			fullySelected: true
		});
	}

	tool.onMouseDrag = function(event) {
		path.add(event.point);

		a.push(event.point);
	}

	tool.onMouseUp = function (event) {
		console.log(path);

		var shape = new THREE.Shape();

		for (var i = 0; i < a.length; i ++) {
			var point = a[i % a.length];

			if (i === 0) {
				shape.moveTo(point.y, point.x);
			}
			else {
				shape.lineTo(point.y, point.x);
			}
		}
		var geometry = new THREE.ExtrudeGeometry(shape, {
			amount: 40,
			bevelEnabled: true,
			bevelSegments: 2,
			steps: 2,
			bevelSize: 1,
			bevelThickness: 1
		});
		var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: 0xff0000}));
		mesh.rotation.x = -Math.PI/2;

		mesh.position.x = -400;
		mesh.position.z = 200;

		a = [];

		scope.scene.add(mesh);

		// Select the path, so we can see its segments:
		path.fullySelected = true;
	}
};
DrawCanvas.prototype.setSize = function (width, height) {
	"use strict";

	paper.view.viewSize = new paper.Size(width, height);
	paper.view.draw();

};