Examples: Convert helpers to ES6. (#21583)

* Examples: Convert helpers to ES6.

* Examples: Remove unused import.

examples/jsm/helpers/LightProbeHelper.js

@@ -4,128 +4,127 @@ import {
 	SphereGeometry
 } from '../../../build/three.module.js';
 
-function LightProbeHelper( lightProbe, size ) {
+class LightProbeHelper extends Mesh {
 
-	this.lightProbe = lightProbe;
+	constructor( lightProbe, size ) {
 
-	this.size = size;
+		const material = new ShaderMaterial( {
 
-	var material = new ShaderMaterial( {
+			type: 'LightProbeHelperMaterial',
 
-		type: 'LightProbeHelperMaterial',
+			uniforms: {
 
-		uniforms: {
+				sh: { value: lightProbe.sh.coefficients }, // by reference
 
-			sh: { value: this.lightProbe.sh.coefficients }, // by reference
+				intensity: { value: lightProbe.intensity }
 
-			intensity: { value: this.lightProbe.intensity }
+			},
 
-		},
+			vertexShader: [
 
-		vertexShader: [
+				'varying vec3 vNormal;',
 
-			'varying vec3 vNormal;',
+				'void main() {',
 
-			'void main() {',
+				'	vNormal = normalize( normalMatrix * normal );',
 
-			'	vNormal = normalize( normalMatrix * normal );',
+				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
 
-			'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+				'}',
 
-			'}',
+			].join( '\n' ),
 
-		].join( '\n' ),
+			fragmentShader: [
 
-		fragmentShader: [
+				'#define RECIPROCAL_PI 0.318309886',
 
-			'#define RECIPROCAL_PI 0.318309886',
+				'vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {',
 
-			'vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {',
+				'	// matrix is assumed to be orthogonal',
 
-			'	// matrix is assumed to be orthogonal',
+				'	return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );',
 
-			'	return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );',
+				'}',
 
-			'}',
+				'// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf',
+				'vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {',
 
-			'// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf',
-			'vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {',
+				'	// normal is assumed to have unit length',
 
-			'	// normal is assumed to have unit length',
+				'	float x = normal.x, y = normal.y, z = normal.z;',
 
-			'	float x = normal.x, y = normal.y, z = normal.z;',
+				'	// band 0',
+				'	vec3 result = shCoefficients[ 0 ] * 0.886227;',
 
-			'	// band 0',
-			'	vec3 result = shCoefficients[ 0 ] * 0.886227;',
+				'	// band 1',
+				'	result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;',
+				'	result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;',
+				'	result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;',
 
-			'	// band 1',
-			'	result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;',
-			'	result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;',
-			'	result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;',
+				'	// band 2',
+				'	result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;',
+				'	result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;',
+				'	result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );',
+				'	result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;',
+				'	result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );',
 
-			'	// band 2',
-			'	result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;',
-			'	result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;',
-			'	result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );',
-			'	result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;',
-			'	result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );',
+				'	return result;',
 
-			'	return result;',
+				'}',
 
-			'}',
+				'uniform vec3 sh[ 9 ]; // sh coefficients',
 
-			'uniform vec3 sh[ 9 ]; // sh coefficients',
+				'uniform float intensity; // light probe intensity',
 
-			'uniform float intensity; // light probe intensity',
+				'varying vec3 vNormal;',
 
-			'varying vec3 vNormal;',
+				'void main() {',
 
-			'void main() {',
+				'	vec3 normal = normalize( vNormal );',
 
-			'	vec3 normal = normalize( vNormal );',
+				'	vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );',
 
-			'	vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );',
+				'	vec3 irradiance = shGetIrradianceAt( worldNormal, sh );',
 
-			'	vec3 irradiance = shGetIrradianceAt( worldNormal, sh );',
+				'	vec3 outgoingLight = RECIPROCAL_PI * irradiance * intensity;',
 
-			'	vec3 outgoingLight = RECIPROCAL_PI * irradiance * intensity;',
+				'	gl_FragColor = linearToOutputTexel( vec4( outgoingLight, 1.0 ) );',
 
-			'	gl_FragColor = linearToOutputTexel( vec4( outgoingLight, 1.0 ) );',
+				'}'
 
-			'}'
+			].join( '\n' )
 
-		].join( '\n' )
+		} );
 
-	} );
+		const geometry = new SphereGeometry( 1, 32, 16 );
 
-	var geometry = new SphereGeometry( 1, 32, 16 );
+		super( geometry, material );
 
-	Mesh.call( this, geometry, material );
+		this.lightProbe = lightProbe;
+		this.size = size;
+		this.type = 'LightProbeHelper';
 
-	this.type = 'LightProbeHelper';
+		this.onBeforeRender();
 
-	this.onBeforeRender();
+	}
 
-}
-
-LightProbeHelper.prototype = Object.create( Mesh.prototype );
-LightProbeHelper.prototype.constructor = LightProbeHelper;
+	dispose() {
 
-LightProbeHelper.prototype.dispose = function () {
+		this.geometry.dispose();
+		this.material.dispose();
 
-	this.geometry.dispose();
-	this.material.dispose();
+	}
 
-};
+	onBeforeRender() {
 
-LightProbeHelper.prototype.onBeforeRender = function () {
+		this.position.copy( this.lightProbe.position );
 
-	this.position.copy( this.lightProbe.position );
+		this.scale.set( 1, 1, 1 ).multiplyScalar( this.size );
 
-	this.scale.set( 1, 1, 1 ).multiplyScalar( this.size );
+		this.material.uniforms.intensity.value = this.lightProbe.intensity;
 
-	this.material.uniforms.intensity.value = this.lightProbe.intensity;
+	}
 
-};
+}
 
 export { LightProbeHelper };

examples/jsm/helpers/PositionalAudioHelper.js

@@ -6,103 +6,104 @@ import {
 	MathUtils
 } from '../../../build/three.module.js';
 
-function PositionalAudioHelper( audio, range, divisionsInnerAngle, divisionsOuterAngle ) {
+class PositionalAudioHelper extends Line {
 
-	this.audio = audio;
-	this.range = range || 1;
-	this.divisionsInnerAngle = divisionsInnerAngle || 16;
-	this.divisionsOuterAngle = divisionsOuterAngle || 2;
+	constructor( audio, range = 1, divisionsInnerAngle = 16, divisionsOuterAngle = 2 ) {
 
-	var geometry = new BufferGeometry();
-	var divisions = this.divisionsInnerAngle + this.divisionsOuterAngle * 2;
-	var positions = new Float32Array( ( divisions * 3 + 3 ) * 3 );
-	geometry.setAttribute( 'position', new BufferAttribute( positions, 3 ) );
+		const geometry = new BufferGeometry();
+		const divisions = divisionsInnerAngle + divisionsOuterAngle * 2;
+		const positions = new Float32Array( ( divisions * 3 + 3 ) * 3 );
+		geometry.setAttribute( 'position', new BufferAttribute( positions, 3 ) );
 
-	var materialInnerAngle = new LineBasicMaterial( { color: 0x00ff00 } );
-	var materialOuterAngle = new LineBasicMaterial( { color: 0xffff00 } );
+		const materialInnerAngle = new LineBasicMaterial( { color: 0x00ff00 } );
+		const materialOuterAngle = new LineBasicMaterial( { color: 0xffff00 } );
 
-	Line.call( this, geometry, [ materialOuterAngle, materialInnerAngle ] );
+		super( geometry, [ materialOuterAngle, materialInnerAngle ] );
 
-	this.type = 'PositionalAudioHelper';
+		this.audio = audio;
+		this.range = range;
+		this.divisionsInnerAngle = divisionsInnerAngle;
+		this.divisionsOuterAngle = divisionsOuterAngle;
+		this.type = 'PositionalAudioHelper';
 
-	this.update();
+		this.update();
 
-}
+	}
 
-PositionalAudioHelper.prototype = Object.create( Line.prototype );
-PositionalAudioHelper.prototype.constructor = PositionalAudioHelper;
+	update() {
 
-PositionalAudioHelper.prototype.update = function () {
+		const audio = this.audio;
+		const range = this.range;
+		const divisionsInnerAngle = this.divisionsInnerAngle;
+		const divisionsOuterAngle = this.divisionsOuterAngle;
 
-	var audio = this.audio;
-	var range = this.range;
-	var divisionsInnerAngle = this.divisionsInnerAngle;
-	var divisionsOuterAngle = this.divisionsOuterAngle;
+		const coneInnerAngle = MathUtils.degToRad( audio.panner.coneInnerAngle );
+		const coneOuterAngle = MathUtils.degToRad( audio.panner.coneOuterAngle );
 
-	var coneInnerAngle = MathUtils.degToRad( audio.panner.coneInnerAngle );
-	var coneOuterAngle = MathUtils.degToRad( audio.panner.coneOuterAngle );
+		const halfConeInnerAngle = coneInnerAngle / 2;
+		const halfConeOuterAngle = coneOuterAngle / 2;
 
-	var halfConeInnerAngle = coneInnerAngle / 2;
-	var halfConeOuterAngle = coneOuterAngle / 2;
+		let start = 0;
+		let count = 0;
+		let i;
+		let stride;
 
-	var start = 0;
-	var count = 0;
-	var i, stride;
+		const geometry = this.geometry;
+		const positionAttribute = geometry.attributes.position;
 
-	var geometry = this.geometry;
-	var positionAttribute = geometry.attributes.position;
+		geometry.clearGroups();
 
-	geometry.clearGroups();
+		//
 
-	//
+		function generateSegment( from, to, divisions, materialIndex ) {
 
-	function generateSegment( from, to, divisions, materialIndex ) {
+			const step = ( to - from ) / divisions;
 
-		var step = ( to - from ) / divisions;
+			positionAttribute.setXYZ( start, 0, 0, 0 );
+			count ++;
 
-		positionAttribute.setXYZ( start, 0, 0, 0 );
-		count ++;
+			for ( i = from; i < to; i += step ) {
 
-		for ( i = from; i < to; i += step ) {
+				stride = start + count;
 
-			stride = start + count;
+				positionAttribute.setXYZ( stride, Math.sin( i ) * range, 0, Math.cos( i ) * range );
+				positionAttribute.setXYZ( stride + 1, Math.sin( Math.min( i + step, to ) ) * range, 0, Math.cos( Math.min( i + step, to ) ) * range );
+				positionAttribute.setXYZ( stride + 2, 0, 0, 0 );
 
-			positionAttribute.setXYZ( stride, Math.sin( i ) * range, 0, Math.cos( i ) * range );
-			positionAttribute.setXYZ( stride + 1, Math.sin( Math.min( i + step, to ) ) * range, 0, Math.cos( Math.min( i + step, to ) ) * range );
-			positionAttribute.setXYZ( stride + 2, 0, 0, 0 );
+				count += 3;
 
-			count += 3;
+			}
 
-		}
+			geometry.addGroup( start, count, materialIndex );
 
-		geometry.addGroup( start, count, materialIndex );
+			start += count;
+			count = 0;
 
-		start += count;
-		count = 0;
+		}
 
-	}
+		//
 
-	//
+		generateSegment( - halfConeOuterAngle, - halfConeInnerAngle, divisionsOuterAngle, 0 );
+		generateSegment( - halfConeInnerAngle, halfConeInnerAngle, divisionsInnerAngle, 1 );
+		generateSegment( halfConeInnerAngle, halfConeOuterAngle, divisionsOuterAngle, 0 );
 
-	generateSegment( - halfConeOuterAngle, - halfConeInnerAngle, divisionsOuterAngle, 0 );
-	generateSegment( - halfConeInnerAngle, halfConeInnerAngle, divisionsInnerAngle, 1 );
-	generateSegment( halfConeInnerAngle, halfConeOuterAngle, divisionsOuterAngle, 0 );
+		//
 
-	//
+		positionAttribute.needsUpdate = true;
 
-	positionAttribute.needsUpdate = true;
+		if ( coneInnerAngle === coneOuterAngle ) this.material[ 0 ].visible = false;
 
-	if ( coneInnerAngle === coneOuterAngle ) this.material[ 0 ].visible = false;
+	}
 
-};
+	dispose() {
 
-PositionalAudioHelper.prototype.dispose = function () {
+		this.geometry.dispose();
+		this.material[ 0 ].dispose();
+		this.material[ 1 ].dispose();
 
-	this.geometry.dispose();
-	this.material[ 0 ].dispose();
-	this.material[ 1 ].dispose();
+	}
 
-};
+}
 
 
 export { PositionalAudioHelper };

examples/jsm/helpers/RectAreaLightHelper.js

@@ -12,73 +12,72 @@ import {
  *  This helper must be added as a child of the light
  */
 
-function RectAreaLightHelper( light, color ) {
+class RectAreaLightHelper extends Line {
 
-	this.light = light;
+	constructor( light, color ) {
 
-	this.color = color; // optional hardwired color for the helper
+		const positions = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, - 1, 0, 1, 1, 0 ];
 
-	var positions = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, - 1, 0, 1, 1, 0 ];
+		const geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+		geometry.computeBoundingSphere();
 
-	var geometry = new BufferGeometry();
-	geometry.setAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
-	geometry.computeBoundingSphere();
+		const material = new LineBasicMaterial( { fog: false } );
 
-	var material = new LineBasicMaterial( { fog: false } );
+		super( geometry, material );
 
-	Line.call( this, geometry, material );
+		this.light = light;
+		this.color = color; // optional hardwired color for the helper
+		this.type = 'RectAreaLightHelper';
 
-	this.type = 'RectAreaLightHelper';
+		//
 
-	//
+		const positions2 = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, 1, 0, - 1, - 1, 0, 1, - 1, 0 ];
 
-	var positions2 = [ 1, 1, 0, - 1, 1, 0, - 1, - 1, 0, 1, 1, 0, - 1, - 1, 0, 1, - 1, 0 ];
+		const geometry2 = new BufferGeometry();
+		geometry2.setAttribute( 'position', new Float32BufferAttribute( positions2, 3 ) );
+		geometry2.computeBoundingSphere();
 
-	var geometry2 = new BufferGeometry();
-	geometry2.setAttribute( 'position', new Float32BufferAttribute( positions2, 3 ) );
-	geometry2.computeBoundingSphere();
+		this.add( new Mesh( geometry2, new MeshBasicMaterial( { side: BackSide, fog: false } ) ) );
 
-	this.add( new Mesh( geometry2, new MeshBasicMaterial( { side: BackSide, fog: false } ) ) );
+	}
 
-}
+	updateMatrixWorld() {
 
-RectAreaLightHelper.prototype = Object.create( Line.prototype );
-RectAreaLightHelper.prototype.constructor = RectAreaLightHelper;
+		this.scale.set( 0.5 * this.light.width, 0.5 * this.light.height, 1 );
 
-RectAreaLightHelper.prototype.updateMatrixWorld = function () {
+		if ( this.color !== undefined ) {
 
-	this.scale.set( 0.5 * this.light.width, 0.5 * this.light.height, 1 );
+			this.material.color.set( this.color );
+			this.children[ 0 ].material.color.set( this.color );
 
-	if ( this.color !== undefined ) {
+		} else {
 
-		this.material.color.set( this.color );
-		this.children[ 0 ].material.color.set( this.color );
+			this.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
-	} else {
+			// prevent hue shift
+			const c = this.material.color;
+			const max = Math.max( c.r, c.g, c.b );
+			if ( max > 1 ) c.multiplyScalar( 1 / max );
 
-		this.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
+			this.children[ 0 ].material.color.copy( this.material.color );
 
-		// prevent hue shift
-		var c = this.material.color;
-		var max = Math.max( c.r, c.g, c.b );
-		if ( max > 1 ) c.multiplyScalar( 1 / max );
+		}
 
-		this.children[ 0 ].material.color.copy( this.material.color );
+		this.matrixWorld.copy( this.light.matrixWorld ).scale( this.scale );
+		this.children[ 0 ].matrixWorld.copy( this.matrixWorld );
 
 	}
 
-	this.matrixWorld.copy( this.light.matrixWorld ).scale( this.scale );
-	this.children[ 0 ].matrixWorld.copy( this.matrixWorld );
-
-};
+	dispose() {
 
-RectAreaLightHelper.prototype.dispose = function () {
+		this.geometry.dispose();
+		this.material.dispose();
+		this.children[ 0 ].geometry.dispose();
+		this.children[ 0 ].material.dispose();
 
-	this.geometry.dispose();
-	this.material.dispose();
-	this.children[ 0 ].geometry.dispose();
-	this.children[ 0 ].material.dispose();
+	}
 
-};
+}
 
 export { RectAreaLightHelper };

examples/jsm/helpers/VertexNormalsHelper.js

@@ -7,110 +7,105 @@ import {
 	Vector3
 } from '../../../build/three.module.js';
 
-var _v1 = new Vector3();
-var _v2 = new Vector3();
-var _normalMatrix = new Matrix3();
+const _v1 = new Vector3();
+const _v2 = new Vector3();
+const _normalMatrix = new Matrix3();
 
-function VertexNormalsHelper( object, size, hex ) {
+class VertexNormalsHelper extends LineSegments {
 
-	this.object = object;
+	constructor( object, size = 1, color = 0xff0000 ) {
 
-	this.size = ( size !== undefined ) ? size : 0.1;
+		let nNormals = 0;
 
-	var color = ( hex !== undefined ) ? hex : 0xff0000;
+		const objGeometry = object.geometry;
 
-	//
+		if ( objGeometry && objGeometry.isGeometry ) {
 
-	var nNormals = 0;
+			console.error( 'THREE.VertexNormalsHelper no longer supports Geometry. Use BufferGeometry instead.' );
+			return;
 
-	var objGeometry = this.object.geometry;
+		} else if ( objGeometry && objGeometry.isBufferGeometry ) {
 
-	if ( objGeometry && objGeometry.isGeometry ) {
+			nNormals = objGeometry.attributes.normal.count;
 
-		console.error( 'THREE.VertexNormalsHelper no longer supports Geometry. Use BufferGeometry instead.' );
-		return;
-
-	} else if ( objGeometry && objGeometry.isBufferGeometry ) {
-
-		nNormals = objGeometry.attributes.normal.count;
-
-	}
+		}
 
-	//
+		//
 
-	var geometry = new BufferGeometry();
+		const geometry = new BufferGeometry();
 
-	var positions = new Float32BufferAttribute( nNormals * 2 * 3, 3 );
+		const positions = new Float32BufferAttribute( nNormals * 2 * 3, 3 );
 
-	geometry.setAttribute( 'position', positions );
+		geometry.setAttribute( 'position', positions );
 
-	LineSegments.call( this, geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
+		super( geometry, new LineBasicMaterial( { color, toneMapped: false } ) );
 
-	this.type = 'VertexNormalsHelper';
+		this.object = object;
+		this.size = size;
+		this.type = 'VertexNormalsHelper';
 
-	//
+		//
 
-	this.matrixAutoUpdate = false;
+		this.matrixAutoUpdate = false;
 
-	this.update();
+		this.update();
 
-}
+	}
 
-VertexNormalsHelper.prototype = Object.create( LineSegments.prototype );
-VertexNormalsHelper.prototype.constructor = VertexNormalsHelper;
+	update() {
 
-VertexNormalsHelper.prototype.update = function () {
+		this.object.updateMatrixWorld( true );
 
-	this.object.updateMatrixWorld( true );
+		_normalMatrix.getNormalMatrix( this.object.matrixWorld );
 
-	_normalMatrix.getNormalMatrix( this.object.matrixWorld );
+		const matrixWorld = this.object.matrixWorld;
 
-	var matrixWorld = this.object.matrixWorld;
+		const position = this.geometry.attributes.position;
 
-	var position = this.geometry.attributes.position;
+		//
 
-	//
+		const objGeometry = this.object.geometry;
 
-	var objGeometry = this.object.geometry;
+		if ( objGeometry && objGeometry.isGeometry ) {
 
-	if ( objGeometry && objGeometry.isGeometry ) {
+			console.error( 'THREE.VertexNormalsHelper no longer supports Geometry. Use BufferGeometry instead.' );
+			return;
 
-		console.error( 'THREE.VertexNormalsHelper no longer supports Geometry. Use BufferGeometry instead.' );
-		return;
+		} else if ( objGeometry && objGeometry.isBufferGeometry ) {
 
-	} else if ( objGeometry && objGeometry.isBufferGeometry ) {
+			const objPos = objGeometry.attributes.position;
 
-		var objPos = objGeometry.attributes.position;
+			const objNorm = objGeometry.attributes.normal;
 
-		var objNorm = objGeometry.attributes.normal;
+			let idx = 0;
 
-		var idx = 0;
+			// for simplicity, ignore index and drawcalls, and render every normal
 
-		// for simplicity, ignore index and drawcalls, and render every normal
+			for ( let j = 0, jl = objPos.count; j < jl; j ++ ) {
 
-		for ( var j = 0, jl = objPos.count; j < jl; j ++ ) {
+				_v1.set( objPos.getX( j ), objPos.getY( j ), objPos.getZ( j ) ).applyMatrix4( matrixWorld );
 
-			_v1.set( objPos.getX( j ), objPos.getY( j ), objPos.getZ( j ) ).applyMatrix4( matrixWorld );
+				_v2.set( objNorm.getX( j ), objNorm.getY( j ), objNorm.getZ( j ) );
 
-			_v2.set( objNorm.getX( j ), objNorm.getY( j ), objNorm.getZ( j ) );
+				_v2.applyMatrix3( _normalMatrix ).normalize().multiplyScalar( this.size ).add( _v1 );
 
-			_v2.applyMatrix3( _normalMatrix ).normalize().multiplyScalar( this.size ).add( _v1 );
+				position.setXYZ( idx, _v1.x, _v1.y, _v1.z );
 
-			position.setXYZ( idx, _v1.x, _v1.y, _v1.z );
+				idx = idx + 1;
 
-			idx = idx + 1;
+				position.setXYZ( idx, _v2.x, _v2.y, _v2.z );
 
-			position.setXYZ( idx, _v2.x, _v2.y, _v2.z );
+				idx = idx + 1;
 
-			idx = idx + 1;
+			}
 
 		}
 
-	}
+		position.needsUpdate = true;
 
-	position.needsUpdate = true;
+	}
 
-};
+}
 
 
 export { VertexNormalsHelper };

examples/jsm/helpers/VertexTangentsHelper.js

@@ -6,93 +6,88 @@ import {
 	Vector3
 } from '../../../build/three.module.js';
 
-var _v1 = new Vector3();
-var _v2 = new Vector3();
+const _v1 = new Vector3();
+const _v2 = new Vector3();
 
-function VertexTangentsHelper( object, size, hex ) {
+class VertexTangentsHelper extends LineSegments {
 
-	this.object = object;
+	constructor( object, size = 1, color = 0x00ffff ) {
 
-	this.size = ( size !== undefined ) ? size : 1;
+		const objGeometry = object.geometry;
 
-	var color = ( hex !== undefined ) ? hex : 0x00ffff;
+		if ( ! ( objGeometry && objGeometry.isBufferGeometry ) ) {
 
-	//
+			console.error( 'THREE.VertexTangentsHelper: geometry not an instance of THREE.BufferGeometry.', objGeometry );
+			return;
 
-	var objGeometry = this.object.geometry;
+		}
 
-	if ( ! ( objGeometry && objGeometry.isBufferGeometry ) ) {
+		const nTangents = objGeometry.attributes.tangent.count;
 
-		console.error( 'THREE.VertexTangentsHelper: geometry not an instance of THREE.BufferGeometry.', objGeometry );
-		return;
+		//
 
-	}
-
-	var nTangents = objGeometry.attributes.tangent.count;
+		const geometry = new BufferGeometry();
 
-	//
+		const positions = new Float32BufferAttribute( nTangents * 2 * 3, 3 );
 
-	var geometry = new BufferGeometry();
+		geometry.setAttribute( 'position', positions );
 
-	var positions = new Float32BufferAttribute( nTangents * 2 * 3, 3 );
+		super( geometry, new LineBasicMaterial( { color, toneMapped: false } ) );
 
-	geometry.setAttribute( 'position', positions );
+		this.object = object;
+		this.size = size;
+		this.type = 'VertexTangentsHelper';
 
-	LineSegments.call( this, geometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
+		//
 
-	this.type = 'VertexTangentsHelper';
+		this.matrixAutoUpdate = false;
 
-	//
+		this.update();
 
-	this.matrixAutoUpdate = false;
+	}
 
-	this.update();
+	update() {
 
-}
+		this.object.updateMatrixWorld( true );
 
-VertexTangentsHelper.prototype = Object.create( LineSegments.prototype );
-VertexTangentsHelper.prototype.constructor = VertexTangentsHelper;
+		const matrixWorld = this.object.matrixWorld;
 
-VertexTangentsHelper.prototype.update = function () {
+		const position = this.geometry.attributes.position;
 
-	this.object.updateMatrixWorld( true );
+		//
 
-	var matrixWorld = this.object.matrixWorld;
+		const objGeometry = this.object.geometry;
 
-	var position = this.geometry.attributes.position;
+		const objPos = objGeometry.attributes.position;
 
-	//
+		const objTan = objGeometry.attributes.tangent;
 
-	var objGeometry = this.object.geometry;
+		let idx = 0;
 
-	var objPos = objGeometry.attributes.position;
+		// for simplicity, ignore index and drawcalls, and render every tangent
 
-	var objTan = objGeometry.attributes.tangent;
+		for ( let j = 0, jl = objPos.count; j < jl; j ++ ) {
 
-	var idx = 0;
+			_v1.set( objPos.getX( j ), objPos.getY( j ), objPos.getZ( j ) ).applyMatrix4( matrixWorld );
 
-	// for simplicity, ignore index and drawcalls, and render every tangent
+			_v2.set( objTan.getX( j ), objTan.getY( j ), objTan.getZ( j ) );
 
-	for ( var j = 0, jl = objPos.count; j < jl; j ++ ) {
+			_v2.transformDirection( matrixWorld ).multiplyScalar( this.size ).add( _v1 );
 
-		_v1.set( objPos.getX( j ), objPos.getY( j ), objPos.getZ( j ) ).applyMatrix4( matrixWorld );
+			position.setXYZ( idx, _v1.x, _v1.y, _v1.z );
 
-		_v2.set( objTan.getX( j ), objTan.getY( j ), objTan.getZ( j ) );
+			idx = idx + 1;
 
-		_v2.transformDirection( matrixWorld ).multiplyScalar( this.size ).add( _v1 );
+			position.setXYZ( idx, _v2.x, _v2.y, _v2.z );
 
-		position.setXYZ( idx, _v1.x, _v1.y, _v1.z );
+			idx = idx + 1;
 
-		idx = idx + 1;
+		}
 
-		position.setXYZ( idx, _v2.x, _v2.y, _v2.z );
-
-		idx = idx + 1;
+		position.needsUpdate = true;
 
 	}
 
-	position.needsUpdate = true;
-
-};
+}
 
 export { VertexTangentsHelper };

examples/webgl_helpers.html

@@ -20,8 +20,6 @@
 			import { VertexNormalsHelper } from './jsm/helpers/VertexNormalsHelper.js';
 			import { VertexTangentsHelper } from './jsm/helpers/VertexTangentsHelper.js';
 
-			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
-
 			let scene, renderer;
 			let camera, light;
 			let vnh;
@@ -65,7 +63,7 @@
 
 					const mesh = gltf.scene.children[ 0 ];
 
-					BufferGeometryUtils.computeTangents( mesh.geometry ); // generates bad data due to degenerate UVs
+					mesh.geometry.computeTangents(); // generates bad data due to degenerate UVs
 
 					const group = new THREE.Group();
 					group.scale.multiplyScalar( 50 );