Merge pull request #19996 from DefinitelyMaybe/helpers--move-to-es6-classes

helpers: move to es6 classes

src/helpers/ArrowHelper.js

@@ -11,103 +11,104 @@ import { Vector3 } from '../math/Vector3.js';
 const _axis = new Vector3();
 let _lineGeometry, _coneGeometry;
 
-function ArrowHelper( dir, origin, length, color, headLength, headWidth ) {
+class ArrowHelper extends Object3D {
 
-	// dir is assumed to be normalized
+	constructor( dir, origin, length, color, headLength, headWidth ) {
 
-	Object3D.call( this );
+		super();
+		// dir is assumed to be normalized
 
-	this.type = 'ArrowHelper';
+		this.type = 'ArrowHelper';
 
-	if ( dir === undefined ) dir = new Vector3( 0, 0, 1 );
-	if ( origin === undefined ) origin = new Vector3( 0, 0, 0 );
-	if ( length === undefined ) length = 1;
-	if ( color === undefined ) color = 0xffff00;
-	if ( headLength === undefined ) headLength = 0.2 * length;
-	if ( headWidth === undefined ) headWidth = 0.2 * headLength;
+		if ( dir === undefined ) dir = new Vector3( 0, 0, 1 );
+		if ( origin === undefined ) origin = new Vector3( 0, 0, 0 );
+		if ( length === undefined ) length = 1;
+		if ( color === undefined ) color = 0xffff00;
+		if ( headLength === undefined ) headLength = 0.2 * length;
+		if ( headWidth === undefined ) headWidth = 0.2 * headLength;
 
-	if ( _lineGeometry === undefined ) {
+		if ( _lineGeometry === undefined ) {
 
-		_lineGeometry = new BufferGeometry();
-		_lineGeometry.setAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 0, 1, 0 ], 3 ) );
+			_lineGeometry = new BufferGeometry();
+			_lineGeometry.setAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 0, 1, 0 ], 3 ) );
 
-		_coneGeometry = new CylinderBufferGeometry( 0, 0.5, 1, 5, 1 );
-		_coneGeometry.translate( 0, - 0.5, 0 );
+			_coneGeometry = new CylinderBufferGeometry( 0, 0.5, 1, 5, 1 );
+			_coneGeometry.translate( 0, - 0.5, 0 );
 
-	}
+		}
 
-	this.position.copy( origin );
+		this.position.copy( origin );
 
-	this.line = new Line( _lineGeometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
-	this.line.matrixAutoUpdate = false;
-	this.add( this.line );
+		this.line = new Line( _lineGeometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
+		this.line.matrixAutoUpdate = false;
+		this.add( this.line );
 
-	this.cone = new Mesh( _coneGeometry, new MeshBasicMaterial( { color: color, toneMapped: false } ) );
-	this.cone.matrixAutoUpdate = false;
-	this.add( this.cone );
+		this.cone = new Mesh( _coneGeometry, new MeshBasicMaterial( { color: color, toneMapped: false } ) );
+		this.cone.matrixAutoUpdate = false;
+		this.add( this.cone );
 
-	this.setDirection( dir );
-	this.setLength( length, headLength, headWidth );
+		this.setDirection( dir );
+		this.setLength( length, headLength, headWidth );
 
-}
+	}
 
-ArrowHelper.prototype = Object.create( Object3D.prototype );
-ArrowHelper.prototype.constructor = ArrowHelper;
+	setDirection( dir ) {
 
-ArrowHelper.prototype.setDirection = function ( dir ) {
+		// dir is assumed to be normalized
 
-	// dir is assumed to be normalized
+		if ( dir.y > 0.99999 ) {
 
-	if ( dir.y > 0.99999 ) {
+			this.quaternion.set( 0, 0, 0, 1 );
 
-		this.quaternion.set( 0, 0, 0, 1 );
+		} else if ( dir.y < - 0.99999 ) {
 
-	} else if ( dir.y < - 0.99999 ) {
+			this.quaternion.set( 1, 0, 0, 0 );
 
-		this.quaternion.set( 1, 0, 0, 0 );
+		} else {
 
-	} else {
+			_axis.set( dir.z, 0, - dir.x ).normalize();
 
-		_axis.set( dir.z, 0, - dir.x ).normalize();
+			const radians = Math.acos( dir.y );
 
-		const radians = Math.acos( dir.y );
+			this.quaternion.setFromAxisAngle( _axis, radians );
 
-		this.quaternion.setFromAxisAngle( _axis, radians );
+		}
 
 	}
 
-};
+	setLength( length, headLength, headWidth ) {
+
+		if ( headLength === undefined ) headLength = 0.2 * length;
+		if ( headWidth === undefined ) headWidth = 0.2 * headLength;
 
-ArrowHelper.prototype.setLength = function ( length, headLength, headWidth ) {
+		this.line.scale.set( 1, Math.max( 0.0001, length - headLength ), 1 ); // see #17458
+		this.line.updateMatrix();
 
-	if ( headLength === undefined ) headLength = 0.2 * length;
-	if ( headWidth === undefined ) headWidth = 0.2 * headLength;
+		this.cone.scale.set( headWidth, headLength, headWidth );
+		this.cone.position.y = length;
+		this.cone.updateMatrix();
 
-	this.line.scale.set( 1, Math.max( 0.0001, length - headLength ), 1 ); // see #17458
-	this.line.updateMatrix();
+	}
 
-	this.cone.scale.set( headWidth, headLength, headWidth );
-	this.cone.position.y = length;
-	this.cone.updateMatrix();
+	setColor( color ) {
 
-};
+		this.line.material.color.set( color );
+		this.cone.material.color.set( color );
 
-ArrowHelper.prototype.setColor = function ( color ) {
+	}
 
-	this.line.material.color.set( color );
-	this.cone.material.color.set( color );
+	copy( source ) {
 
-};
+		super.copy( source, false );
 
-ArrowHelper.prototype.copy = function ( source ) {
+		this.line.copy( source.line );
+		this.cone.copy( source.cone );
 
-	Object3D.prototype.copy.call( this, source, false );
+		return this;
 
-	this.line.copy( source.line );
-	this.cone.copy( source.cone );
+	}
 
-	return this;
+}
 
-};
 
 export { ArrowHelper };

src/helpers/AxesHelper.js

@@ -3,36 +3,37 @@ import { LineBasicMaterial } from '../materials/LineBasicMaterial.js';
 import { Float32BufferAttribute } from '../core/BufferAttribute.js';
 import { BufferGeometry } from '../core/BufferGeometry.js';
 
-function AxesHelper( size ) {
+class AxesHelper extends LineSegments {
 
-	size = size || 1;
+	constructor( size ) {
 
-	const vertices = [
-		0, 0, 0,	size, 0, 0,
-		0, 0, 0,	0, size, 0,
-		0, 0, 0,	0, 0, size
-	];
+		size = size || 1;
 
-	const colors = [
-		1, 0, 0,	1, 0.6, 0,
-		0, 1, 0,	0.6, 1, 0,
-		0, 0, 1,	0, 0.6, 1
-	];
+		const vertices = [
+			0, 0, 0,	size, 0, 0,
+			0, 0, 0,	0, size, 0,
+			0, 0, 0,	0, 0, size
+		];
 
-	const geometry = new BufferGeometry();
-	geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
-	geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+		const colors = [
+			1, 0, 0,	1, 0.6, 0,
+			0, 1, 0,	0.6, 1, 0,
+			0, 0, 1,	0, 0.6, 1
+		];
 
-	const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );
+		const geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-	LineSegments.call( this, geometry, material );
+		const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );
 
-	this.type = 'AxesHelper';
+		super( geometry, material );
 
-}
+		this.type = 'AxesHelper';
+
+	}
 
-AxesHelper.prototype = Object.create( LineSegments.prototype );
-AxesHelper.prototype.constructor = AxesHelper;
+}
 
 
 export { AxesHelper };

src/helpers/Box3Helper.js

@@ -3,51 +3,49 @@ import { LineBasicMaterial } from '../materials/LineBasicMaterial.js';
 import { BufferAttribute } from '../core/BufferAttribute.js';
 import { Float32BufferAttribute } from '../core/BufferAttribute.js';
 import { BufferGeometry } from '../core/BufferGeometry.js';
-import { Object3D } from '../core/Object3D.js';
 
-function Box3Helper( box, color ) {
+class Box3Helper extends LineSegments {
 
-	this.type = 'Box3Helper';
+	constructor( box, color ) {
 
-	this.box = box;
+		if ( color === undefined ) color = 0xffff00;
 
-	if ( color === undefined ) color = 0xffff00;
+		const indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] );
 
-	const indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] );
+		const positions = [ 1, 1, 1, - 1, 1, 1, - 1, - 1, 1, 1, - 1, 1, 1, 1, - 1, - 1, 1, - 1, - 1, - 1, - 1, 1, - 1, - 1 ];
 
-	const positions = [ 1, 1, 1, - 1, 1, 1, - 1, - 1, 1, 1, - 1, 1, 1, 1, - 1, - 1, 1, - 1, - 1, - 1, - 1, 1, - 1, - 1 ];
+		const geometry = new BufferGeometry();
 
-	const geometry = new BufferGeometry();
+		geometry.setIndex( new BufferAttribute( indices, 1 ) );
 
-	geometry.setIndex( new BufferAttribute( indices, 1 ) );
+		geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
 
-	geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+		super( geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
 
-	LineSegments.call( this, geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
+		this.box = box;
 
-	this.type = 'Box3Helper';
+		this.type = 'Box3Helper';
 
-	this.geometry.computeBoundingSphere();
+		this.geometry.computeBoundingSphere();
 
-}
+	}
 
-Box3Helper.prototype = Object.create( LineSegments.prototype );
-Box3Helper.prototype.constructor = Box3Helper;
+	updateMatrixWorld( force ) {
 
-Box3Helper.prototype.updateMatrixWorld = function ( force ) {
+		const box = this.box;
 
-	const box = this.box;
+		if ( box.isEmpty() ) return;
 
-	if ( box.isEmpty() ) return;
+		box.getCenter( this.position );
 
-	box.getCenter( this.position );
+		box.getSize( this.scale );
 
-	box.getSize( this.scale );
+		this.scale.multiplyScalar( 0.5 );
 
-	this.scale.multiplyScalar( 0.5 );
+		super.updateMatrixWorld( force );
 
-	Object3D.prototype.updateMatrixWorld.call( this, force );
+	}
 
-};
+}
 
 export { Box3Helper };

src/helpers/BoxHelper.js

@@ -6,103 +6,104 @@ import { BufferGeometry } from '../core/BufferGeometry.js';
 
 const _box = new Box3();
 
-function BoxHelper( object, color ) {
+class BoxHelper extends LineSegments {
 
-	this.object = object;
+	constructor( object, color ) {
 
-	if ( color === undefined ) color = 0xffff00;
+		if ( color === undefined ) color = 0xffff00;
 
-	const indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] );
-	const positions = new Float32Array( 8 * 3 );
+		const indices = new Uint16Array( [ 0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7 ] );
+		const positions = new Float32Array( 8 * 3 );
 
-	const geometry = new BufferGeometry();
-	geometry.setIndex( new BufferAttribute( indices, 1 ) );
-	geometry.setAttribute( 'position', new BufferAttribute( positions, 3 ) );
+		const geometry = new BufferGeometry();
+		geometry.setIndex( new BufferAttribute( indices, 1 ) );
+		geometry.setAttribute( 'position', new BufferAttribute( positions, 3 ) );
 
-	LineSegments.call( this, geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
+		super( geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
 
-	this.type = 'BoxHelper';
+		this.object = object;
+		this.type = 'BoxHelper';
 
-	this.matrixAutoUpdate = false;
+		this.matrixAutoUpdate = false;
 
-	this.update();
+		this.update();
 
-}
+	}
 
-BoxHelper.prototype = Object.create( LineSegments.prototype );
-BoxHelper.prototype.constructor = BoxHelper;
+	update( object ) {
 
-BoxHelper.prototype.update = function ( object ) {
+		if ( object !== undefined ) {
 
-	if ( object !== undefined ) {
+			console.warn( 'THREE.BoxHelper: .update() has no longer arguments.' );
 
-		console.warn( 'THREE.BoxHelper: .update() has no longer arguments.' );
+		}
 
-	}
+		if ( this.object !== undefined ) {
 
-	if ( this.object !== undefined ) {
+			_box.setFromObject( this.object );
 
-		_box.setFromObject( this.object );
+		}
 
-	}
+		if ( _box.isEmpty() ) return;
 
-	if ( _box.isEmpty() ) return;
+		const min = _box.min;
+		const max = _box.max;
 
-	const min = _box.min;
-	const max = _box.max;
+		/*
+			5____4
+		1/___0/|
+		| 6__|_7
+		2/___3/
 
-	/*
-	  5____4
-	1/___0/|
-	| 6__|_7
-	2/___3/
+		0: max.x, max.y, max.z
+		1: min.x, max.y, max.z
+		2: min.x, min.y, max.z
+		3: max.x, min.y, max.z
+		4: max.x, max.y, min.z
+		5: min.x, max.y, min.z
+		6: min.x, min.y, min.z
+		7: max.x, min.y, min.z
+		*/
 
-	0: max.x, max.y, max.z
-	1: min.x, max.y, max.z
-	2: min.x, min.y, max.z
-	3: max.x, min.y, max.z
-	4: max.x, max.y, min.z
-	5: min.x, max.y, min.z
-	6: min.x, min.y, min.z
-	7: max.x, min.y, min.z
-	*/
+		const position = this.geometry.attributes.position;
+		const array = position.array;
 
-	const position = this.geometry.attributes.position;
-	const array = position.array;
+		array[ 0 ] = max.x; array[ 1 ] = max.y; array[ 2 ] = max.z;
+		array[ 3 ] = min.x; array[ 4 ] = max.y; array[ 5 ] = max.z;
+		array[ 6 ] = min.x; array[ 7 ] = min.y; array[ 8 ] = max.z;
+		array[ 9 ] = max.x; array[ 10 ] = min.y; array[ 11 ] = max.z;
+		array[ 12 ] = max.x; array[ 13 ] = max.y; array[ 14 ] = min.z;
+		array[ 15 ] = min.x; array[ 16 ] = max.y; array[ 17 ] = min.z;
+		array[ 18 ] = min.x; array[ 19 ] = min.y; array[ 20 ] = min.z;
+		array[ 21 ] = max.x; array[ 22 ] = min.y; array[ 23 ] = min.z;
 
-	array[ 0 ] = max.x; array[ 1 ] = max.y; array[ 2 ] = max.z;
-	array[ 3 ] = min.x; array[ 4 ] = max.y; array[ 5 ] = max.z;
-	array[ 6 ] = min.x; array[ 7 ] = min.y; array[ 8 ] = max.z;
-	array[ 9 ] = max.x; array[ 10 ] = min.y; array[ 11 ] = max.z;
-	array[ 12 ] = max.x; array[ 13 ] = max.y; array[ 14 ] = min.z;
-	array[ 15 ] = min.x; array[ 16 ] = max.y; array[ 17 ] = min.z;
-	array[ 18 ] = min.x; array[ 19 ] = min.y; array[ 20 ] = min.z;
-	array[ 21 ] = max.x; array[ 22 ] = min.y; array[ 23 ] = min.z;
+		position.needsUpdate = true;
 
-	position.needsUpdate = true;
+		this.geometry.computeBoundingSphere();
 
-	this.geometry.computeBoundingSphere();
 
+	}
 
-};
+	setFromObject( object ) {
 
-BoxHelper.prototype.setFromObject = function ( object ) {
+		this.object = object;
+		this.update();
 
-	this.object = object;
-	this.update();
+		return this;
 
-	return this;
+	}
+
+	copy( source ) {
 
-};
+		LineSegments.prototype.copy.call( this, source );
 
-BoxHelper.prototype.copy = function ( source ) {
+		this.object = source.object;
 
-	LineSegments.prototype.copy.call( this, source );
+		return this;
 
-	this.object = source.object;
+	}
 
-	return this;
+}
 
-};
 
 export { BoxHelper };

src/helpers/CameraHelper.js

@@ -16,167 +16,169 @@ const _camera = new Camera();
  *		http://evanw.github.com/lightgl.js/tests/shadowmap.html
  */
 
-function CameraHelper( camera ) {
+class CameraHelper extends LineSegments {
 
-	const geometry = new BufferGeometry();
-	const material = new LineBasicMaterial( { color: 0xffffff, vertexColors: true, toneMapped: false } );
+	constructor( camera ) {
 
-	const vertices = [];
-	const colors = [];
+		const geometry = new BufferGeometry();
+		const material = new LineBasicMaterial( { color: 0xffffff, vertexColors: true, toneMapped: false } );
 
-	const pointMap = {};
+		const vertices = [];
+		const colors = [];
 
-	// colors
+		const pointMap = {};
 
-	const colorFrustum = new Color( 0xffaa00 );
-	const colorCone = new Color( 0xff0000 );
-	const colorUp = new Color( 0x00aaff );
-	const colorTarget = new Color( 0xffffff );
-	const colorCross = new Color( 0x333333 );
+		// colors
 
-	// near
+		const colorFrustum = new Color( 0xffaa00 );
+		const colorCone = new Color( 0xff0000 );
+		const colorUp = new Color( 0x00aaff );
+		const colorTarget = new Color( 0xffffff );
+		const colorCross = new Color( 0x333333 );
 
-	addLine( 'n1', 'n2', colorFrustum );
-	addLine( 'n2', 'n4', colorFrustum );
-	addLine( 'n4', 'n3', colorFrustum );
-	addLine( 'n3', 'n1', colorFrustum );
+		// near
 
-	// far
+		addLine( 'n1', 'n2', colorFrustum );
+		addLine( 'n2', 'n4', colorFrustum );
+		addLine( 'n4', 'n3', colorFrustum );
+		addLine( 'n3', 'n1', colorFrustum );
 
-	addLine( 'f1', 'f2', colorFrustum );
-	addLine( 'f2', 'f4', colorFrustum );
-	addLine( 'f4', 'f3', colorFrustum );
-	addLine( 'f3', 'f1', colorFrustum );
+		// far
 
-	// sides
+		addLine( 'f1', 'f2', colorFrustum );
+		addLine( 'f2', 'f4', colorFrustum );
+		addLine( 'f4', 'f3', colorFrustum );
+		addLine( 'f3', 'f1', colorFrustum );
 
-	addLine( 'n1', 'f1', colorFrustum );
-	addLine( 'n2', 'f2', colorFrustum );
-	addLine( 'n3', 'f3', colorFrustum );
-	addLine( 'n4', 'f4', colorFrustum );
+		// sides
 
-	// cone
+		addLine( 'n1', 'f1', colorFrustum );
+		addLine( 'n2', 'f2', colorFrustum );
+		addLine( 'n3', 'f3', colorFrustum );
+		addLine( 'n4', 'f4', colorFrustum );
 
-	addLine( 'p', 'n1', colorCone );
-	addLine( 'p', 'n2', colorCone );
-	addLine( 'p', 'n3', colorCone );
-	addLine( 'p', 'n4', colorCone );
+		// cone
 
-	// up
+		addLine( 'p', 'n1', colorCone );
+		addLine( 'p', 'n2', colorCone );
+		addLine( 'p', 'n3', colorCone );
+		addLine( 'p', 'n4', colorCone );
 
-	addLine( 'u1', 'u2', colorUp );
-	addLine( 'u2', 'u3', colorUp );
-	addLine( 'u3', 'u1', colorUp );
+		// up
 
-	// target
+		addLine( 'u1', 'u2', colorUp );
+		addLine( 'u2', 'u3', colorUp );
+		addLine( 'u3', 'u1', colorUp );
 
-	addLine( 'c', 't', colorTarget );
-	addLine( 'p', 'c', colorCross );
+		// target
 
-	// cross
+		addLine( 'c', 't', colorTarget );
+		addLine( 'p', 'c', colorCross );
 
-	addLine( 'cn1', 'cn2', colorCross );
-	addLine( 'cn3', 'cn4', colorCross );
+		// cross
 
-	addLine( 'cf1', 'cf2', colorCross );
-	addLine( 'cf3', 'cf4', colorCross );
+		addLine( 'cn1', 'cn2', colorCross );
+		addLine( 'cn3', 'cn4', colorCross );
 
-	function addLine( a, b, color ) {
+		addLine( 'cf1', 'cf2', colorCross );
+		addLine( 'cf3', 'cf4', colorCross );
 
-		addPoint( a, color );
-		addPoint( b, color );
+		function addLine( a, b, color ) {
 
-	}
+			addPoint( a, color );
+			addPoint( b, color );
 
-	function addPoint( id, color ) {
+		}
 
-		vertices.push( 0, 0, 0 );
-		colors.push( color.r, color.g, color.b );
+		function addPoint( id, color ) {
 
-		if ( pointMap[ id ] === undefined ) {
+			vertices.push( 0, 0, 0 );
+			colors.push( color.r, color.g, color.b );
 
-			pointMap[ id ] = [];
+			if ( pointMap[ id ] === undefined ) {
 
-		}
+				pointMap[ id ] = [];
 
-		pointMap[ id ].push( ( vertices.length / 3 ) - 1 );
+			}
 
-	}
+			pointMap[ id ].push( ( vertices.length / 3 ) - 1 );
 
-	geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
-	geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+		}
 
-	LineSegments.call( this, geometry, material );
+		geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-	this.type = 'CameraHelper';
+		super( geometry, material );
 
-	this.camera = camera;
-	if ( this.camera.updateProjectionMatrix ) this.camera.updateProjectionMatrix();
+		this.type = 'CameraHelper';
 
-	this.matrix = camera.matrixWorld;
-	this.matrixAutoUpdate = false;
+		this.camera = camera;
+		if ( this.camera.updateProjectionMatrix ) this.camera.updateProjectionMatrix();
 
-	this.pointMap = pointMap;
+		this.matrix = camera.matrixWorld;
+		this.matrixAutoUpdate = false;
 
-	this.update();
+		this.pointMap = pointMap;
 
-}
+		this.update();
 
-CameraHelper.prototype = Object.create( LineSegments.prototype );
-CameraHelper.prototype.constructor = CameraHelper;
+	}
+
+	update() {
 
-CameraHelper.prototype.update = function () {
+		const geometry = this.geometry;
+		const pointMap = this.pointMap;
 
-	const geometry = this.geometry;
-	const pointMap = this.pointMap;
+		const w = 1, h = 1;
 
-	const w = 1, h = 1;
+		// we need just camera projection matrix inverse
+		// world matrix must be identity
 
-	// we need just camera projection matrix inverse
-	// world matrix must be identity
+		_camera.projectionMatrixInverse.copy( this.camera.projectionMatrixInverse );
 
-	_camera.projectionMatrixInverse.copy( this.camera.projectionMatrixInverse );
+		// center / target
 
-	// center / target
+		setPoint( 'c', pointMap, geometry, _camera, 0, 0, - 1 );
+		setPoint( 't', pointMap, geometry, _camera, 0, 0, 1 );
 
-	setPoint( 'c', pointMap, geometry, _camera, 0, 0, - 1 );
-	setPoint( 't', pointMap, geometry, _camera, 0, 0, 1 );
+		// near
 
-	// near
+		setPoint( 'n1', pointMap, geometry, _camera, - w, - h, - 1 );
+		setPoint( 'n2', pointMap, geometry, _camera, w, - h, - 1 );
+		setPoint( 'n3', pointMap, geometry, _camera, - w, h, - 1 );
+		setPoint( 'n4', pointMap, geometry, _camera, w, h, - 1 );
 
-	setPoint( 'n1', pointMap, geometry, _camera, - w, - h, - 1 );
-	setPoint( 'n2', pointMap, geometry, _camera, w, - h, - 1 );
-	setPoint( 'n3', pointMap, geometry, _camera, - w, h, - 1 );
-	setPoint( 'n4', pointMap, geometry, _camera, w, h, - 1 );
+		// far
 
-	// far
+		setPoint( 'f1', pointMap, geometry, _camera, - w, - h, 1 );
+		setPoint( 'f2', pointMap, geometry, _camera, w, - h, 1 );
+		setPoint( 'f3', pointMap, geometry, _camera, - w, h, 1 );
+		setPoint( 'f4', pointMap, geometry, _camera, w, h, 1 );
 
-	setPoint( 'f1', pointMap, geometry, _camera, - w, - h, 1 );
-	setPoint( 'f2', pointMap, geometry, _camera, w, - h, 1 );
-	setPoint( 'f3', pointMap, geometry, _camera, - w, h, 1 );
-	setPoint( 'f4', pointMap, geometry, _camera, w, h, 1 );
+		// up
 
-	// up
+		setPoint( 'u1', pointMap, geometry, _camera, w * 0.7, h * 1.1, - 1 );
+		setPoint( 'u2', pointMap, geometry, _camera, - w * 0.7, h * 1.1, - 1 );
+		setPoint( 'u3', pointMap, geometry, _camera, 0, h * 2, - 1 );
 
-	setPoint( 'u1', pointMap, geometry, _camera, w * 0.7, h * 1.1, - 1 );
-	setPoint( 'u2', pointMap, geometry, _camera, - w * 0.7, h * 1.1, - 1 );
-	setPoint( 'u3', pointMap, geometry, _camera, 0, h * 2, - 1 );
+		// cross
 
-	// cross
+		setPoint( 'cf1', pointMap, geometry, _camera, - w, 0, 1 );
+		setPoint( 'cf2', pointMap, geometry, _camera, w, 0, 1 );
+		setPoint( 'cf3', pointMap, geometry, _camera, 0, - h, 1 );
+		setPoint( 'cf4', pointMap, geometry, _camera, 0, h, 1 );
 
-	setPoint( 'cf1', pointMap, geometry, _camera, - w, 0, 1 );
-	setPoint( 'cf2', pointMap, geometry, _camera, w, 0, 1 );
-	setPoint( 'cf3', pointMap, geometry, _camera, 0, - h, 1 );
-	setPoint( 'cf4', pointMap, geometry, _camera, 0, h, 1 );
+		setPoint( 'cn1', pointMap, geometry, _camera, - w, 0, - 1 );
+		setPoint( 'cn2', pointMap, geometry, _camera, w, 0, - 1 );
+		setPoint( 'cn3', pointMap, geometry, _camera, 0, - h, - 1 );
+		setPoint( 'cn4', pointMap, geometry, _camera, 0, h, - 1 );
 
-	setPoint( 'cn1', pointMap, geometry, _camera, - w, 0, - 1 );
-	setPoint( 'cn2', pointMap, geometry, _camera, w, 0, - 1 );
-	setPoint( 'cn3', pointMap, geometry, _camera, 0, - h, - 1 );
-	setPoint( 'cn4', pointMap, geometry, _camera, 0, h, - 1 );
+		geometry.getAttribute( 'position' ).needsUpdate = true;
 
-	geometry.getAttribute( 'position' ).needsUpdate = true;
+	}
+
+}
 
-};
 
 function setPoint( point, pointMap, geometry, camera, x, y, z ) {
 

src/helpers/DirectionalLightHelper.js

@@ -9,80 +9,80 @@ const _v1 = new Vector3();
 const _v2 = new Vector3();
 const _v3 = new Vector3();
 
-function DirectionalLightHelper( light, size, color ) {
+class DirectionalLightHelper extends Object3D {
 
-	Object3D.call( this );
+	constructor( light, size, color ) {
 
-	this.light = light;
-	this.light.updateMatrixWorld();
+		super();
+		this.light = light;
+		this.light.updateMatrixWorld();
 
-	this.matrix = light.matrixWorld;
-	this.matrixAutoUpdate = false;
+		this.matrix = light.matrixWorld;
+		this.matrixAutoUpdate = false;
 
-	this.color = color;
+		this.color = color;
 
-	if ( size === undefined ) size = 1;
+		if ( size === undefined ) size = 1;
 
-	let geometry = new BufferGeometry();
-	geometry.setAttribute( 'position', new Float32BufferAttribute( [
-		- size, size, 0,
-		size, size, 0,
-		size, - size, 0,
-		- size, - size, 0,
-		- size, size, 0
-	], 3 ) );
+		let geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', new Float32BufferAttribute( [
+			- size, size, 0,
+			size, size, 0,
+			size, - size, 0,
+			- size, - size, 0,
+			- size, size, 0
+		], 3 ) );
 
-	const material = new LineBasicMaterial( { fog: false, toneMapped: false } );
+		const material = new LineBasicMaterial( { fog: false, toneMapped: false } );
 
-	this.lightPlane = new Line( geometry, material );
-	this.add( this.lightPlane );
+		this.lightPlane = new Line( geometry, material );
+		this.add( this.lightPlane );
 
-	geometry = new BufferGeometry();
-	geometry.setAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 0, 0, 1 ], 3 ) );
+		geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 0, 0, 1 ], 3 ) );
 
-	this.targetLine = new Line( geometry, material );
-	this.add( this.targetLine );
+		this.targetLine = new Line( geometry, material );
+		this.add( this.targetLine );
 
-	this.update();
+		this.update();
 
-}
+	}
+
+	dispose() {
 
-DirectionalLightHelper.prototype = Object.create( Object3D.prototype );
-DirectionalLightHelper.prototype.constructor = DirectionalLightHelper;
+		this.lightPlane.geometry.dispose();
+		this.lightPlane.material.dispose();
+		this.targetLine.geometry.dispose();
+		this.targetLine.material.dispose();
 
-DirectionalLightHelper.prototype.dispose = function () {
+	}
 
-	this.lightPlane.geometry.dispose();
-	this.lightPlane.material.dispose();
-	this.targetLine.geometry.dispose();
-	this.targetLine.material.dispose();
+	update() {
 
-};
+		_v1.setFromMatrixPosition( this.light.matrixWorld );
+		_v2.setFromMatrixPosition( this.light.target.matrixWorld );
+		_v3.subVectors( _v2, _v1 );
 
-DirectionalLightHelper.prototype.update = function () {
+		this.lightPlane.lookAt( _v2 );
 
-	_v1.setFromMatrixPosition( this.light.matrixWorld );
-	_v2.setFromMatrixPosition( this.light.target.matrixWorld );
-	_v3.subVectors( _v2, _v1 );
+		if ( this.color !== undefined ) {
 
-	this.lightPlane.lookAt( _v2 );
+			this.lightPlane.material.color.set( this.color );
+			this.targetLine.material.color.set( this.color );
 
-	if ( this.color !== undefined ) {
+		} else {
 
-		this.lightPlane.material.color.set( this.color );
-		this.targetLine.material.color.set( this.color );
+			this.lightPlane.material.color.copy( this.light.color );
+			this.targetLine.material.color.copy( this.light.color );
 
-	} else {
+		}
 
-		this.lightPlane.material.color.copy( this.light.color );
-		this.targetLine.material.color.copy( this.light.color );
+		this.targetLine.lookAt( _v2 );
+		this.targetLine.scale.z = _v3.length();
 
 	}
 
-	this.targetLine.lookAt( _v2 );
-	this.targetLine.scale.z = _v3.length();
-
-};
+}
 
 
 export { DirectionalLightHelper };

src/helpers/GridHelper.js

@@ -4,46 +4,48 @@ import { Float32BufferAttribute } from '../core/BufferAttribute.js';
 import { BufferGeometry } from '../core/BufferGeometry.js';
 import { Color } from '../math/Color.js';
 
-function GridHelper( size, divisions, color1, color2 ) {
+class GridHelper extends LineSegments {
 
-	size = size || 10;
-	divisions = divisions || 10;
-	color1 = new Color( color1 !== undefined ? color1 : 0x444444 );
-	color2 = new Color( color2 !== undefined ? color2 : 0x888888 );
+	constructor( size, divisions, color1, color2 ) {
 
-	const center = divisions / 2;
-	const step = size / divisions;
-	const halfSize = size / 2;
+		size = size || 10;
+		divisions = divisions || 10;
+		color1 = new Color( color1 !== undefined ? color1 : 0x444444 );
+		color2 = new Color( color2 !== undefined ? color2 : 0x888888 );
 
-	const vertices = [], colors = [];
+		const center = divisions / 2;
+		const step = size / divisions;
+		const halfSize = size / 2;
 
-	for ( let i = 0, j = 0, k = - halfSize; i <= divisions; i ++, k += step ) {
+		const vertices = [], colors = [];
 
-		vertices.push( - halfSize, 0, k, halfSize, 0, k );
-		vertices.push( k, 0, - halfSize, k, 0, halfSize );
+		for ( let i = 0, j = 0, k = - halfSize; i <= divisions; i ++, k += step ) {
 
-		const color = i === center ? color1 : color2;
+			vertices.push( - halfSize, 0, k, halfSize, 0, k );
+			vertices.push( k, 0, - halfSize, k, 0, halfSize );
 
-		color.toArray( colors, j ); j += 3;
-		color.toArray( colors, j ); j += 3;
-		color.toArray( colors, j ); j += 3;
-		color.toArray( colors, j ); j += 3;
+			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;
+
+		}
 
-	const geometry = new BufferGeometry();
-	geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
-	geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+		const geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-	const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );
+		const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );
 
-	LineSegments.call( this, geometry, material );
+		super( geometry, material );
 
-	this.type = 'GridHelper';
+		this.type = 'GridHelper';
+
+	}
 
 }
 
-GridHelper.prototype = Object.create( LineSegments.prototype );
-GridHelper.prototype.constructor = GridHelper;
 
 export { GridHelper };

src/helpers/HemisphereLightHelper.js

@@ -10,75 +10,75 @@ const _vector = new Vector3();
 const _color1 = new Color();
 const _color2 = new Color();
 
-function HemisphereLightHelper( light, size, color ) {
+class HemisphereLightHelper extends Object3D {
 
-	Object3D.call( this );
+	constructor( light, size, color ) {
 
-	this.light = light;
-	this.light.updateMatrixWorld();
+		super();
+		this.light = light;
+		this.light.updateMatrixWorld();
 
-	this.matrix = light.matrixWorld;
-	this.matrixAutoUpdate = false;
+		this.matrix = light.matrixWorld;
+		this.matrixAutoUpdate = false;
 
-	this.color = color;
+		this.color = color;
 
-	const geometry = new OctahedronBufferGeometry( size );
-	geometry.rotateY( Math.PI * 0.5 );
+		const geometry = new OctahedronBufferGeometry( size );
+		geometry.rotateY( Math.PI * 0.5 );
 
-	this.material = new MeshBasicMaterial( { wireframe: true, fog: false, toneMapped: false } );
-	if ( this.color === undefined ) this.material.vertexColors = true;
+		this.material = new MeshBasicMaterial( { wireframe: true, fog: false, toneMapped: false } );
+		if ( this.color === undefined ) this.material.vertexColors = true;
 
-	const position = geometry.getAttribute( 'position' );
-	const colors = new Float32Array( position.count * 3 );
+		const position = geometry.getAttribute( 'position' );
+		const colors = new Float32Array( position.count * 3 );
 
-	geometry.setAttribute( 'color', new BufferAttribute( colors, 3 ) );
+		geometry.setAttribute( 'color', new BufferAttribute( colors, 3 ) );
 
-	this.add( new Mesh( geometry, this.material ) );
+		this.add( new Mesh( geometry, this.material ) );
 
-	this.update();
+		this.update();
 
-}
+	}
+
+	dispose() {
 
-HemisphereLightHelper.prototype = Object.create( Object3D.prototype );
-HemisphereLightHelper.prototype.constructor = HemisphereLightHelper;
+		this.children[ 0 ].geometry.dispose();
+		this.children[ 0 ].material.dispose();
 
-HemisphereLightHelper.prototype.dispose = function () {
+	}
 
-	this.children[ 0 ].geometry.dispose();
-	this.children[ 0 ].material.dispose();
+	update() {
 
-};
+		const mesh = this.children[ 0 ];
 
-HemisphereLightHelper.prototype.update = function () {
+		if ( this.color !== undefined ) {
 
-	const mesh = this.children[ 0 ];
+			this.material.color.set( this.color );
 
-	if ( this.color !== undefined ) {
+		} else {
 
-		this.material.color.set( this.color );
+			const colors = mesh.geometry.getAttribute( 'color' );
 
-	} else {
+			_color1.copy( this.light.color );
+			_color2.copy( this.light.groundColor );
 
-		const colors = mesh.geometry.getAttribute( 'color' );
+			for ( let i = 0, l = colors.count; i < l; i ++ ) {
 
-		_color1.copy( this.light.color );
-		_color2.copy( this.light.groundColor );
+				const color = ( i < ( l / 2 ) ) ? _color1 : _color2;
 
-		for ( let i = 0, l = colors.count; i < l; i ++ ) {
+				colors.setXYZ( i, color.r, color.g, color.b );
 
-			const color = ( i < ( l / 2 ) ) ? _color1 : _color2;
+			}
 
-			colors.setXYZ( i, color.r, color.g, color.b );
+			colors.needsUpdate = true;
 
 		}
 
-		colors.needsUpdate = true;
+		mesh.lookAt( _vector.setFromMatrixPosition( this.light.matrixWorld ).negate() );
 
 	}
 
-	mesh.lookAt( _vector.setFromMatrixPosition( this.light.matrixWorld ).negate() );
-
-};
+}
 
 
 export { HemisphereLightHelper };

src/helpers/PlaneHelper.js

@@ -4,56 +4,55 @@ import { LineBasicMaterial } from '../materials/LineBasicMaterial.js';
 import { MeshBasicMaterial } from '../materials/MeshBasicMaterial.js';
 import { Float32BufferAttribute } from '../core/BufferAttribute.js';
 import { BufferGeometry } from '../core/BufferGeometry.js';
-import { Object3D } from '../core/Object3D.js';
 import { FrontSide, BackSide } from '../constants.js';
 
-function PlaneHelper( plane, size, hex ) {
+class PlaneHelper extends Line {
 
-	this.plane = plane;
+	constructor( plane, size, hex ) {
 
-	this.size = ( size === undefined ) ? 1 : size;
 
-	const color = ( hex !== undefined ) ? hex : 0xffff00;
+		const color = ( hex !== undefined ) ? hex : 0xffff00;
 
-	const positions = [ 1, - 1, 1, - 1, 1, 1, - 1, - 1, 1, 1, 1, 1, - 1, 1, 1, - 1, - 1, 1, 1, - 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0 ];
+		const positions = [ 1, - 1, 1, - 1, 1, 1, - 1, - 1, 1, 1, 1, 1, - 1, 1, 1, - 1, - 1, 1, 1, - 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0 ];
 
-	const geometry = new BufferGeometry();
-	geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
-	geometry.computeBoundingSphere();
+		const geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+		geometry.computeBoundingSphere();
 
-	Line.call( this, geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
+		super( geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
 
-	this.type = 'PlaneHelper';
+		this.type = 'PlaneHelper';
 
-	//
+		this.plane = plane;
 
-	const positions2 = [ 1, 1, 1, - 1, 1, 1, - 1, - 1, 1, 1, 1, 1, - 1, - 1, 1, 1, - 1, 1 ];
+		this.size = ( size === undefined ) ? 1 : size;
 
-	const geometry2 = new BufferGeometry();
-	geometry2.setAttribute( 'position', new Float32BufferAttribute( positions2, 3 ) );
-	geometry2.computeBoundingSphere();
+		const positions2 = [ 1, 1, 1, - 1, 1, 1, - 1, - 1, 1, 1, 1, 1, - 1, - 1, 1, 1, - 1, 1 ];
 
-	this.add( new Mesh( geometry2, new MeshBasicMaterial( { color: color, opacity: 0.2, transparent: true, depthWrite: false, toneMapped: false } ) ) );
+		const geometry2 = new BufferGeometry();
+		geometry2.setAttribute( 'position', new Float32BufferAttribute( positions2, 3 ) );
+		geometry2.computeBoundingSphere();
 
-}
+		this.add( new Mesh( geometry2, new MeshBasicMaterial( { color: color, opacity: 0.2, transparent: true, depthWrite: false, toneMapped: false } ) ) );
+
+	}
 
-PlaneHelper.prototype = Object.create( Line.prototype );
-PlaneHelper.prototype.constructor = PlaneHelper;
+	updateMatrixWorld( force ) {
 
-PlaneHelper.prototype.updateMatrixWorld = function ( force ) {
+		let scale = - this.plane.constant;
 
-	let scale = - this.plane.constant;
+		if ( Math.abs( scale ) < 1e-8 ) scale = 1e-8; // sign does not matter
 
-	if ( Math.abs( scale ) < 1e-8 ) scale = 1e-8; // sign does not matter
+		this.scale.set( 0.5 * this.size, 0.5 * this.size, scale );
 
-	this.scale.set( 0.5 * this.size, 0.5 * this.size, scale );
+		this.children[ 0 ].material.side = ( scale < 0 ) ? BackSide : FrontSide; // renderer flips side when determinant < 0; flipping not wanted here
 
-	this.children[ 0 ].material.side = ( scale < 0 ) ? BackSide : FrontSide; // renderer flips side when determinant < 0; flipping not wanted here
+		this.lookAt( this.plane.normal );
 
-	this.lookAt( this.plane.normal );
+		super.updateMatrixWorld( force );
 
-	Object3D.prototype.updateMatrixWorld.call( this, force );
+	}
 
-};
+}
 
 export { PlaneHelper };

src/helpers/PointLightHelper.js

@@ -2,27 +2,30 @@ import { Mesh } from '../objects/Mesh.js';
 import { MeshBasicMaterial } from '../materials/MeshBasicMaterial.js';
 import { SphereBufferGeometry } from '../geometries/SphereGeometry.js';
 
-function PointLightHelper( light, sphereSize, color ) {
+class PointLightHelper extends Mesh {
 
-	this.light = light;
-	this.light.updateMatrixWorld();
+	constructor( light, sphereSize, color ) {
 
-	this.color = color;
+		const geometry = new SphereBufferGeometry( sphereSize, 4, 2 );
+		const material = new MeshBasicMaterial( { wireframe: true, fog: false, toneMapped: false } );
 
-	const geometry = new SphereBufferGeometry( sphereSize, 4, 2 );
-	const material = new MeshBasicMaterial( { wireframe: true, fog: false, toneMapped: false } );
+		super( geometry, material );
 
-	Mesh.call( this, geometry, material );
+		this.light = light;
+		this.light.updateMatrixWorld();
 
-	this.type = 'PointLightHelper';
+		this.color = color;
 
-	this.matrix = this.light.matrixWorld;
-	this.matrixAutoUpdate = false;
+		this.type = 'PointLightHelper';
 
-	this.update();
+		this.matrix = this.light.matrixWorld;
+		this.matrixAutoUpdate = false;
 
+		this.update();
 
-	/*
+
+		/*
+	// TODO: delete this comment?
 	const distanceGeometry = new THREE.IcosahedronBufferGeometry( 1, 2 );
 	const distanceMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false, wireframe: true, opacity: 0.1, transparent: true } );
 
@@ -44,46 +47,45 @@ function PointLightHelper( light, sphereSize, color ) {
 	this.add( this.lightDistance );
 	*/
 
-}
+	}
 
-PointLightHelper.prototype = Object.create( Mesh.prototype );
-PointLightHelper.prototype.constructor = PointLightHelper;
+	dispose() {
 
-PointLightHelper.prototype.dispose = function () {
+		this.geometry.dispose();
+		this.material.dispose();
 
-	this.geometry.dispose();
-	this.material.dispose();
+	}
 
-};
+	update() {
 
-PointLightHelper.prototype.update = function () {
+		if ( this.color !== undefined ) {
 
-	if ( this.color !== undefined ) {
+			this.material.color.set( this.color );
 
-		this.material.color.set( this.color );
+		} else {
 
-	} else {
+			this.material.color.copy( this.light.color );
 
-		this.material.color.copy( this.light.color );
+		}
 
-	}
+		/*
+		const d = this.light.distance;
 
-	/*
-	const d = this.light.distance;
+		if ( d === 0.0 ) {
 
-	if ( d === 0.0 ) {
+			this.lightDistance.visible = false;
 
-		this.lightDistance.visible = false;
+		} else {
 
-	} else {
+			this.lightDistance.visible = true;
+			this.lightDistance.scale.set( d, d, d );
 
-		this.lightDistance.visible = true;
-		this.lightDistance.scale.set( d, d, d );
+		}
+		*/
 
 	}
-	*/
 
-};
+}
 
 
 export { PointLightHelper };

src/helpers/PolarGridHelper.js

@@ -4,84 +4,86 @@ import { Float32BufferAttribute } from '../core/BufferAttribute.js';
 import { BufferGeometry } from '../core/BufferGeometry.js';
 import { Color } from '../math/Color.js';
 
-function PolarGridHelper( radius, radials, circles, divisions, color1, color2 ) {
+class PolarGridHelper extends LineSegments {
 
-	radius = radius || 10;
-	radials = radials || 16;
-	circles = circles || 8;
-	divisions = divisions || 64;
-	color1 = new Color( color1 !== undefined ? color1 : 0x444444 );
-	color2 = new Color( color2 !== undefined ? color2 : 0x888888 );
+	constructor( radius, radials, circles, divisions, color1, color2 ) {
 
-	const vertices = [];
-	const colors = [];
+		radius = radius || 10;
+		radials = radials || 16;
+		circles = circles || 8;
+		divisions = divisions || 64;
+		color1 = new Color( color1 !== undefined ? color1 : 0x444444 );
+		color2 = new Color( color2 !== undefined ? color2 : 0x888888 );
 
-	// create the radials
+		const vertices = [];
+		const colors = [];
 
-	for ( let i = 0; i <= radials; i ++ ) {
+		// create the radials
 
-		const v = ( i / radials ) * ( Math.PI * 2 );
+		for ( let i = 0; i <= radials; i ++ ) {
 
-		const x = Math.sin( v ) * radius;
-		const z = Math.cos( v ) * radius;
+			const v = ( i / radials ) * ( Math.PI * 2 );
 
-		vertices.push( 0, 0, 0 );
-		vertices.push( x, 0, z );
+			const x = Math.sin( v ) * radius;
+			const z = Math.cos( v ) * radius;
 
-		const color = ( i & 1 ) ? color1 : color2;
+			vertices.push( 0, 0, 0 );
+			vertices.push( x, 0, z );
 
-		colors.push( color.r, color.g, color.b );
-		colors.push( color.r, color.g, color.b );
+			const color = ( i & 1 ) ? color1 : color2;
 
-	}
+			colors.push( color.r, color.g, color.b );
+			colors.push( color.r, color.g, color.b );
 
-	// create the circles
+		}
 
-	for ( let i = 0; i <= circles; i ++ ) {
+		// create the circles
 
-		const color = ( i & 1 ) ? color1 : color2;
+		for ( let i = 0; i <= circles; i ++ ) {
 
-		const r = radius - ( radius / circles * i );
+			const color = ( i & 1 ) ? color1 : color2;
 
-		for ( let j = 0; j < divisions; j ++ ) {
+			const r = radius - ( radius / circles * i );
 
-			// first vertex
+			for ( let j = 0; j < divisions; j ++ ) {
 
-			let v = ( j / divisions ) * ( Math.PI * 2 );
+				// first vertex
 
-			let x = Math.sin( v ) * r;
-			let z = Math.cos( v ) * r;
+				let v = ( j / divisions ) * ( Math.PI * 2 );
 
-			vertices.push( x, 0, z );
-			colors.push( color.r, color.g, color.b );
+				let x = Math.sin( v ) * r;
+				let z = Math.cos( v ) * r;
 
-			// second vertex
+				vertices.push( x, 0, z );
+				colors.push( color.r, color.g, color.b );
 
-			v = ( ( j + 1 ) / divisions ) * ( Math.PI * 2 );
+				// second vertex
 
-			x = Math.sin( v ) * r;
-			z = Math.cos( v ) * r;
+				v = ( ( j + 1 ) / divisions ) * ( Math.PI * 2 );
 
-			vertices.push( x, 0, z );
-			colors.push( color.r, color.g, color.b );
+				x = Math.sin( v ) * r;
+				z = Math.cos( v ) * r;
+
+				vertices.push( x, 0, z );
+				colors.push( color.r, color.g, color.b );
+
+			}
 
 		}
 
-	}
+		const geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-	const geometry = new BufferGeometry();
-	geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
-	geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+		const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );
 
-	const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );
+		super( geometry, material );
 
-	LineSegments.call( this, geometry, material );
+		this.type = 'PolarGridHelper';
 
-	this.type = 'PolarGridHelper';
+	}
 
 }
 
-PolarGridHelper.prototype = Object.create( LineSegments.prototype );
-PolarGridHelper.prototype.constructor = PolarGridHelper;
 
 export { PolarGridHelper };

src/helpers/SkeletonHelper.js

@@ -5,114 +5,116 @@ import { Color } from '../math/Color.js';
 import { Vector3 } from '../math/Vector3.js';
 import { BufferGeometry } from '../core/BufferGeometry.js';
 import { Float32BufferAttribute } from '../core/BufferAttribute.js';
-import { Object3D } from '../core/Object3D.js';
 
 const _vector = new Vector3();
 const _boneMatrix = new Matrix4();
 const _matrixWorldInv = new Matrix4();
 
-function getBoneList( object ) {
-
-	const boneList = [];
 
-	if ( object && object.isBone ) {
+class SkeletonHelper extends LineSegments {
 
-		boneList.push( object );
+	constructor( object ) {
 
-	}
+		const bones = getBoneList( object );
 
-	for ( let i = 0; i < object.children.length; i ++ ) {
+		const geometry = new BufferGeometry();
 
-		boneList.push.apply( boneList, getBoneList( object.children[ i ] ) );
+		const vertices = [];
+		const colors = [];
 
-	}
+		const color1 = new Color( 0, 0, 1 );
+		const color2 = new Color( 0, 1, 0 );
 
-	return boneList;
+		for ( let i = 0; i < bones.length; i ++ ) {
 
-}
+			const bone = bones[ i ];
 
-function SkeletonHelper( object ) {
+			if ( bone.parent && bone.parent.isBone ) {
 
-	const bones = getBoneList( object );
+				vertices.push( 0, 0, 0 );
+				vertices.push( 0, 0, 0 );
+				colors.push( color1.r, color1.g, color1.b );
+				colors.push( color2.r, color2.g, color2.b );
 
-	const geometry = new BufferGeometry();
+			}
 
-	const vertices = [];
-	const colors = [];
+		}
 
-	const color1 = new Color( 0, 0, 1 );
-	const color2 = new Color( 0, 1, 0 );
+		geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-	for ( let i = 0; i < bones.length; i ++ ) {
+		const material = new LineBasicMaterial( { vertexColors: true, depthTest: false, depthWrite: false, toneMapped: false, transparent: true } );
 
-		const bone = bones[ i ];
+		super( geometry, material );
 
-		if ( bone.parent && bone.parent.isBone ) {
+		this.type = 'SkeletonHelper';
+		this.isSkeletonHelper = true;
 
-			vertices.push( 0, 0, 0 );
-			vertices.push( 0, 0, 0 );
-			colors.push( color1.r, color1.g, color1.b );
-			colors.push( color2.r, color2.g, color2.b );
+		this.root = object;
+		this.bones = bones;
 
-		}
+		this.matrix = object.matrixWorld;
+		this.matrixAutoUpdate = false;
 
 	}
 
-	geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
-	geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+	updateMatrixWorld( force ) {
 
-	const material = new LineBasicMaterial( { vertexColors: true, depthTest: false, depthWrite: false, toneMapped: false, transparent: true } );
+		const bones = this.bones;
 
-	LineSegments.call( this, geometry, material );
+		const geometry = this.geometry;
+		const position = geometry.getAttribute( 'position' );
 
-	this.type = 'SkeletonHelper';
+		_matrixWorldInv.getInverse( this.root.matrixWorld );
 
-	this.root = object;
-	this.bones = bones;
+		for ( let i = 0, j = 0; i < bones.length; i ++ ) {
 
-	this.matrix = object.matrixWorld;
-	this.matrixAutoUpdate = false;
+			const bone = bones[ i ];
 
-}
+			if ( bone.parent && bone.parent.isBone ) {
 
-SkeletonHelper.prototype = Object.create( LineSegments.prototype );
-SkeletonHelper.prototype.constructor = SkeletonHelper;
+				_boneMatrix.multiplyMatrices( _matrixWorldInv, bone.matrixWorld );
+				_vector.setFromMatrixPosition( _boneMatrix );
+				position.setXYZ( j, _vector.x, _vector.y, _vector.z );
 
-SkeletonHelper.prototype.isSkeletonHelper = true;
+				_boneMatrix.multiplyMatrices( _matrixWorldInv, bone.parent.matrixWorld );
+				_vector.setFromMatrixPosition( _boneMatrix );
+				position.setXYZ( j + 1, _vector.x, _vector.y, _vector.z );
 
-SkeletonHelper.prototype.updateMatrixWorld = function ( force ) {
+				j += 2;
 
-	const bones = this.bones;
+			}
 
-	const geometry = this.geometry;
-	const position = geometry.getAttribute( 'position' );
+		}
 
-	_matrixWorldInv.getInverse( this.root.matrixWorld );
+		geometry.getAttribute( 'position' ).needsUpdate = true;
 
-	for ( let i = 0, j = 0; i < bones.length; i ++ ) {
+		super.updateMatrixWorld( force );
 
-		const bone = bones[ i ];
+	}
 
-		if ( bone.parent && bone.parent.isBone ) {
+}
 
-			_boneMatrix.multiplyMatrices( _matrixWorldInv, bone.matrixWorld );
-			_vector.setFromMatrixPosition( _boneMatrix );
-			position.setXYZ( j, _vector.x, _vector.y, _vector.z );
 
-			_boneMatrix.multiplyMatrices( _matrixWorldInv, bone.parent.matrixWorld );
-			_vector.setFromMatrixPosition( _boneMatrix );
-			position.setXYZ( j + 1, _vector.x, _vector.y, _vector.z );
+function getBoneList( object ) {
 
-			j += 2;
+	const boneList = [];
 
-		}
+	if ( object && object.isBone ) {
+
+		boneList.push( object );
 
 	}
 
-	geometry.getAttribute( 'position' ).needsUpdate = true;
+	for ( let i = 0; i < object.children.length; i ++ ) {
 
-	Object3D.prototype.updateMatrixWorld.call( this, force );
+		boneList.push.apply( boneList, getBoneList( object.children[ i ] ) );
+
+	}
+
+	return boneList;
+
+}
 
-};
 
 export { SkeletonHelper };

src/helpers/SpotLightHelper.js

@@ -7,85 +7,85 @@ import { BufferGeometry } from '../core/BufferGeometry.js';
 
 const _vector = new Vector3();
 
-function SpotLightHelper( light, color ) {
+class SpotLightHelper extends Object3D {
 
-	Object3D.call( this );
+	constructor( light, color ) {
 
-	this.light = light;
-	this.light.updateMatrixWorld();
+		super();
+		this.light = light;
+		this.light.updateMatrixWorld();
 
-	this.matrix = light.matrixWorld;
-	this.matrixAutoUpdate = false;
+		this.matrix = light.matrixWorld;
+		this.matrixAutoUpdate = false;
 
-	this.color = color;
+		this.color = color;
 
-	const geometry = new BufferGeometry();
+		const geometry = new BufferGeometry();
 
-	const positions = [
-		0, 0, 0, 	0, 0, 1,
-		0, 0, 0, 	1, 0, 1,
-		0, 0, 0,	- 1, 0, 1,
-		0, 0, 0, 	0, 1, 1,
-		0, 0, 0, 	0, - 1, 1
-	];
+		const positions = [
+			0, 0, 0, 	0, 0, 1,
+			0, 0, 0, 	1, 0, 1,
+			0, 0, 0,	- 1, 0, 1,
+			0, 0, 0, 	0, 1, 1,
+			0, 0, 0, 	0, - 1, 1
+		];
 
-	for ( let i = 0, j = 1, l = 32; i < l; i ++, j ++ ) {
+		for ( let i = 0, j = 1, l = 32; i < l; i ++, j ++ ) {
 
-		const p1 = ( i / l ) * Math.PI * 2;
-		const p2 = ( j / l ) * Math.PI * 2;
+			const p1 = ( i / l ) * Math.PI * 2;
+			const p2 = ( j / l ) * Math.PI * 2;
 
-		positions.push(
-			Math.cos( p1 ), Math.sin( p1 ), 1,
-			Math.cos( p2 ), Math.sin( p2 ), 1
-		);
+			positions.push(
+				Math.cos( p1 ), Math.sin( p1 ), 1,
+				Math.cos( p2 ), Math.sin( p2 ), 1
+			);
 
-	}
+		}
 
-	geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+		geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
 
-	const material = new LineBasicMaterial( { fog: false, toneMapped: false } );
+		const material = new LineBasicMaterial( { fog: false, toneMapped: false } );
 
-	this.cone = new LineSegments( geometry, material );
-	this.add( this.cone );
+		this.cone = new LineSegments( geometry, material );
+		this.add( this.cone );
 
-	this.update();
+		this.update();
 
-}
+	}
 
-SpotLightHelper.prototype = Object.create( Object3D.prototype );
-SpotLightHelper.prototype.constructor = SpotLightHelper;
+	dispose() {
 
-SpotLightHelper.prototype.dispose = function () {
+		this.cone.geometry.dispose();
+		this.cone.material.dispose();
 
-	this.cone.geometry.dispose();
-	this.cone.material.dispose();
+	}
 
-};
+	update() {
 
-SpotLightHelper.prototype.update = function () {
+		this.light.updateMatrixWorld();
 
-	this.light.updateMatrixWorld();
+		const coneLength = this.light.distance ? this.light.distance : 1000;
+		const coneWidth = coneLength * Math.tan( this.light.angle );
 
-	const coneLength = this.light.distance ? this.light.distance : 1000;
-	const coneWidth = coneLength * Math.tan( this.light.angle );
+		this.cone.scale.set( coneWidth, coneWidth, coneLength );
 
-	this.cone.scale.set( coneWidth, coneWidth, coneLength );
+		_vector.setFromMatrixPosition( this.light.target.matrixWorld );
 
-	_vector.setFromMatrixPosition( this.light.target.matrixWorld );
+		this.cone.lookAt( _vector );
 
-	this.cone.lookAt( _vector );
+		if ( this.color !== undefined ) {
 
-	if ( this.color !== undefined ) {
+			this.cone.material.color.set( this.color );
 
-		this.cone.material.color.set( this.color );
+		} else {
 
-	} else {
+			this.cone.material.color.copy( this.light.color );
 
-		this.cone.material.color.copy( this.light.color );
+		}
 
 	}
 
-};
+}
 
 
 export { SpotLightHelper };