diff --git a/editor/js/ui/Viewport.js b/editor/js/ui/Viewport.js
index 0c6acd0fa0a4f396b78a91f8bcda7ea0201e50cc..20dab2be137145ddd220070887641d7e1cf56b11 100644
--- a/editor/js/ui/Viewport.js
+++ b/editor/js/ui/Viewport.js
@@ -6,7 +6,6 @@ var Viewport = function ( signals ) {
 
 	var objects = [];
 
-
 	// helpers
 
 	var helpersToObjects = {};
@@ -14,26 +13,7 @@ var Viewport = function ( signals ) {
 
 	var sceneHelpers = new THREE.Scene();
 
-	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 );
+	var grid = new THREE.GridHelper( 500, 25 );
 	sceneHelpers.add( grid );
 
 	var selectionBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true, fog: false } ) );
diff --git a/src/extras/helpers/GridHelper.js b/src/extras/helpers/GridHelper.js
new file mode 100644
index 0000000000000000000000000000000000000000..34f8cbd59f91851811721b562d0a1646e3e26517
--- /dev/null
+++ b/src/extras/helpers/GridHelper.js
@@ -0,0 +1,29 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.GridHelper = function ( size, step ) {
+
+	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 );
+
+	}
+
+	THREE.Line.call( this, geometry, material, THREE.LinePieces );
+
+};
+
+THREE.GridHelper.prototype = Object.create( THREE.Line.prototype );
diff --git a/utils/build/includes/extras.json b/utils/build/includes/extras.json
index 31c8e444381df6780fa066951235679c4d42cf41..0e27f289bc2f1021c4aa193ac88d484f785d34f4 100644
--- a/utils/build/includes/extras.json
+++ b/utils/build/includes/extras.json
@@ -36,6 +36,7 @@
 	"src/extras/helpers/ArrowHelper.js",
 	"src/extras/helpers/CameraHelper.js",
 	"src/extras/helpers/DirectionalLightHelper.js",
+	"src/extras/helpers/GridHelper.js",
 	"src/extras/helpers/HemisphereLightHelper.js",
 	"src/extras/helpers/PointLightHelper.js",
 	"src/extras/helpers/SpotLightHelper.js",