Examples: More GridHelper usage

examples/canvas_camera_orthographic.html

@@ -52,24 +52,8 @@
 
 				// Grid
 
-				var size = 500, step = 50;
-
-				var geometry = new THREE.Geometry();
-
-				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 material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				scene.add( gridHelper );
 
 				// Cubes
 

examples/canvas_camera_orthographic2.html

@@ -121,24 +121,8 @@
 
 				// Grid
 
-				var size = 500, step = 50;
-
-				var geometry = new THREE.Geometry();
-
-				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 material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				scene.add( gridHelper );
 
 				// Cubes
 

examples/canvas_interactive_voxelpainter.html

@@ -57,24 +57,8 @@
 
 				// Grid
 
-				var size = 500, step = 50;
-
-				var geometry = new THREE.Geometry();
-
-				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 material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				scene.add( gridHelper );
 
 				//
 

examples/canvas_materials.html

@@ -44,24 +44,9 @@
 
 				// Grid
 
-				var size = 500, step = 100;
-
-				var geometry = new THREE.Geometry();
-
-				for ( var i = - size; i <= size; i += step ) {
-
-					geometry.vertices.push( new THREE.Vector3( - size, - 120, i ) );
-					geometry.vertices.push( new THREE.Vector3(   size, - 120, i ) );
-
-					geometry.vertices.push( new THREE.Vector3( i, - 120, - size ) );
-					geometry.vertices.push( new THREE.Vector3( i, - 120,   size ) );
-
-				}
-
-				var material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 10 );
+				gridHelper.position.y = - 120;
+				scene.add( gridHelper );
 
 				// Spheres
 

examples/canvas_performance.html

@@ -47,24 +47,8 @@
 
 				// Grid
 
-				var size = 500, step = 100;
-
-				var geometry = new THREE.Geometry();
-
-				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 material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 10 );
+				scene.add( gridHelper );
 
 				// Spheres
 

examples/canvas_sandbox.html

@@ -69,24 +69,8 @@
 
 				// Grid
 
-				var size = 500, step = 100;
-
-				var geometry = new THREE.Geometry();
-
-				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 material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 10 );
+				scene.add( gridHelper );
 
 				// Spheres
 

examples/webgl_interactive_voxelpainter.html

@@ -71,24 +71,8 @@
 
 				// grid
 
-				var size = 500, step = 50;
-
-				var geometry = new THREE.Geometry();
-
-				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 material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2, transparent: true } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				scene.add( gridHelper );
 
 				//