diff --git a/lib/three_custom.js b/lib/three_custom.js
index 4fb2ceea..57380509 100644
--- a/lib/three_custom.js
+++ b/lib/three_custom.js
@@ -196,65 +196,52 @@ THREE.AxesHelper = function( size ) {
 THREE.AxesHelper.prototype = Object.create( THREE.LineSegments.prototype );
 THREE.AxesHelper.prototype.constructor = THREE.AxesHelper;
 
-THREE.GridHelper = function( size, divisions, color1, color2 ) {
+THREE.GridHelper = class GridHelper extends THREE.LineSegments {
 
-	size = size || 10;
-	divisions = divisions || 10;
-	color1 = new THREE.Color( color1 !== undefined ? color1 : 0x444444 );
-	color2 = new THREE.Color( color2 !== undefined ? color2 : 0x888888 );
+	constructor( size, divisions, color1, color2 ) {
 
-	var center = divisions / 2;
-	var step = size / divisions;
-	var halfSize = size / 2;
+		console.log({size, divisions, color1, color2})
 
-	var vertices = [], colors = [];
+		size = size || 10;
+		divisions = divisions || 10;
+		color1 = new THREE.Color( color1 !== undefined ? color1 : 0x444444 );
+		color2 = new THREE.Color( color2 !== undefined ? color2 : 0x888888 );
 
-	for ( var i = 0, j = 0, k = - halfSize; i <= divisions; i ++, k += step ) {
+		const center = divisions / 2;
+		const step = size / divisions;
+		const halfSize = size / 2;
 
-		vertices.push( - halfSize, 0, k, halfSize, 0, k );
-		vertices.push( k, 0, - halfSize, k, 0, halfSize );
+		const vertices = [], colors = [];
 
-		var color = i === center ? color1 : color2;
+		for ( let i = 0, j = 0, k = - halfSize; i <= divisions; i ++, k += step ) {
 
-		color.toArray( colors, j ); j += 3;
-		color.toArray( colors, j ); j += 3;
-		color.toArray( colors, j ); j += 3;
-		color.toArray( colors, j ); j += 3;
+			vertices.push( - halfSize, 0, k, halfSize, 0, k );
+			vertices.push( k, 0, - halfSize, k, 0, halfSize );
+
+			const color = i === center ? color1 : color2;
+
+			color.toArray( colors, j ); j += 3;
+			color.toArray( colors, j ); j += 3;
+			color.toArray( colors, j ); j += 3;
+			color.toArray( colors, j ); j += 3;
+
+		}
+
+		var geometry = new THREE.BufferGeometry();
+		geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+		geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+
+		const material = new THREE.LineBasicMaterial( { color: color1, toneMapped: false } );
+
+		super( geometry, material );
+
+		this.type = 'GridHelper';
 
 	}
 
-	var geometry = new THREE.BufferGeometry();
-	geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-	geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-
-	var material = new THREE.LineBasicMaterial( { color: color1 } );
-
-	THREE.LineSegments.call( this, geometry, material );
-
 }
 
-THREE.GridHelper.prototype = Object.assign( Object.create( THREE.LineSegments.prototype ), {
 
-	constructor: THREE.GridHelper,
-
-	copy: function ( source ) {
-
-		THREE.LineSegments.prototype.copy.call( this, source );
-
-		this.geometry.copy( source.geometry );
-		this.material.copy( source.material );
-
-		return this;
-
-	},
-
-	clone: function () {
-
-		return new this.constructor().copy( this );
-
-	}
-
-} );
 
 THREE.NormalX = new THREE.Vector3(1, 0, 0);
 THREE.NormalY = new THREE.Vector3(0, 1, 0);