SVGLoader: Basic fill color support.

editor/js/Loader.js

@@ -401,7 +401,7 @@ var Loader = function ( editor ) {
 						var path = paths[ i ];
 
 						var material = new THREE.MeshBasicMaterial( {
-							color: Math.random() * 0xffffff,
+							color: path.color,
 							depthWrite: false
 						} );
 

examples/js/loaders/SVGLoader.js

@@ -90,6 +90,8 @@ THREE.SVGLoader.prototype = {
 		function parsePathNode( node ) {
 
 			var path = new THREE.ShapePath();
+			path.color.setStyle( parseFill( node ) );
+
 			var point = new THREE.Vector2();
 			var control = new THREE.Vector2();
 
@@ -331,6 +333,7 @@ THREE.SVGLoader.prototype = {
 			var h = parseFloat( node.getAttribute( 'height' ) );
 
 			var path = new THREE.ShapePath();
+			path.color.setStyle( parseFill( node ) );
 			path.moveTo( x, y );
 			path.lineTo( x + w, y );
 			path.lineTo( x + w, y + h );
@@ -357,7 +360,10 @@ THREE.SVGLoader.prototype = {
 			}
 
 			var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
+
 			var path = new THREE.ShapePath();
+			path.color.setStyle( parseFill( node ) );
+
 			var index = 0;
 
 			node.getAttribute( 'points' ).replace(regex, iterator);
@@ -386,7 +392,10 @@ THREE.SVGLoader.prototype = {
 			}
 
 			var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
+
 			var path = new THREE.ShapePath();
+			path.color.setStyle( parseFill( node ) );
+
 			var index = 0;
 
 			node.getAttribute( 'points' ).replace(regex, iterator);
@@ -407,6 +416,7 @@ THREE.SVGLoader.prototype = {
 			subpath.absarc( x, y, r, 0, Math.PI * 2 );
 
 			var path = new THREE.ShapePath();
+			path.color.setStyle( parseFill( node ) );
 			path.subPaths.push( subpath );
 
 			return path;
@@ -424,6 +434,7 @@ THREE.SVGLoader.prototype = {
 			subpath.absellipse( x, y, rx, ry, 0, Math.PI * 2 );
 
 			var path = new THREE.ShapePath();
+			path.color.setStyle( parseFill( node ) );
 			path.subPaths.push( subpath );
 
 			return path;
@@ -446,6 +457,18 @@ THREE.SVGLoader.prototype = {
 
 		}
 
+		function parseFill( node ) {
+
+			if ( node.hasAttribute( 'fill' ) ) {
+
+				return node.getAttribute( 'fill' );
+
+			}
+
+			return '#ffffff';
+
+		}
+
 		// http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
 
 		function getReflection( a, b ) {

examples/webgl_interactive_draggablecubes.html

@@ -36,7 +36,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1000;
 
 				controls = new THREE.TrackballControls( camera );

src/extras/core/ShapePath.js

@@ -11,6 +11,8 @@ function ShapePath() {
 
 	this.type = 'ShapePath';
 
+	this.color = new THREE.Color();
+
 	this.subPaths = [];
 	this.currentPath = null;