GUI: Better grid.

gui/js/ui/Viewport.js

@@ -7,11 +7,29 @@ var Viewport = function ( signals ) {
 
 	var sceneHelpers = new THREE.Scene();
 
-	var plane = new THREE.Mesh(
-		new THREE.PlaneGeometry( 1000, 1000, 20, 20 ),
-		new THREE.MeshBasicMaterial( { color: 0x606060, wireframe: true, transparent: true } )
-	);
-	sceneHelpers.add( plane );
+	var size = 500, step = 25;
+	var geometry = new THREE.Geometry();
+	var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
+	var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0x888888 );
+
+	for ( var i = - size; i <= size; i += step ) {
+
+		geometry.vertices.push( new THREE.Vector3( -size, 0, i ) );
+		geometry.vertices.push( new THREE.Vector3(  size, 0, i ) );
+
+		geometry.vertices.push( new THREE.Vector3( i, 0, -size ) );
+		geometry.vertices.push( new THREE.Vector3( i, 0,  size ) );
+
+		var color = i === 0 ? color1 : color2;
+
+		geometry.colors.push( color, color, color, color );
+
+	}
+
+	var grid = new THREE.Line( geometry, material, THREE.LinePieces );
+	sceneHelpers.add( grid );
+
+	//
 
 	var scene = new THREE.Scene();