Examples: Convert lights and interactive to ES6. (#21592)

examples/js/interactive/SelectionBox.js

@@ -4,47 +4,61 @@
  * This is a class to check whether objects are in a selection area in 3D space
  */
 
-	var SelectionBox = function () {
-
-		var frustum = new THREE.Frustum();
-		var center = new THREE.Vector3();
-		var tmpPoint = new THREE.Vector3();
-		var vecNear = new THREE.Vector3();
-		var vecTopLeft = new THREE.Vector3();
-		var vecTopRight = new THREE.Vector3();
-		var vecDownRight = new THREE.Vector3();
-		var vecDownLeft = new THREE.Vector3();
-		var vecFarTopLeft = new THREE.Vector3();
-		var vecFarTopRight = new THREE.Vector3();
-		var vecFarDownRight = new THREE.Vector3();
-		var vecFarDownLeft = new THREE.Vector3();
-		var vectemp1 = new THREE.Vector3();
-		var vectemp2 = new THREE.Vector3();
-		var vectemp3 = new THREE.Vector3();
-
-		function SelectionBox( camera, scene, deep ) {
+	const _frustum = new THREE.Frustum();
+
+	const _center = new THREE.Vector3();
+
+	const _tmpPoint = new THREE.Vector3();
+
+	const _vecNear = new THREE.Vector3();
+
+	const _vecTopLeft = new THREE.Vector3();
+
+	const _vecTopRight = new THREE.Vector3();
+
+	const _vecDownRight = new THREE.Vector3();
+
+	const _vecDownLeft = new THREE.Vector3();
+
+	const _vecFarTopLeft = new THREE.Vector3();
+
+	const _vecFarTopRight = new THREE.Vector3();
+
+	const _vecFarDownRight = new THREE.Vector3();
+
+	const _vecFarDownLeft = new THREE.Vector3();
+
+	const _vectemp1 = new THREE.Vector3();
+
+	const _vectemp2 = new THREE.Vector3();
+
+	const _vectemp3 = new THREE.Vector3();
+
+	class SelectionBox {
+
+		constructor( camera, scene, deep = Number.MAX_VALUE ) {
 
 			this.camera = camera;
 			this.scene = scene;
 			this.startPoint = new THREE.Vector3();
 			this.endPoint = new THREE.Vector3();
 			this.collection = [];
-			this.deep = deep || Number.MAX_VALUE;
+			this.deep = deep;
 
 		}
 
-		SelectionBox.prototype.select = function ( startPoint, endPoint ) {
+		select( startPoint, endPoint ) {
 
 			this.startPoint = startPoint || this.startPoint;
 			this.endPoint = endPoint || this.endPoint;
 			this.collection = [];
 			this.updateFrustum( this.startPoint, this.endPoint );
-			this.searchChildInFrustum( frustum, this.scene );
+			this.searchChildInFrustum( _frustum, this.scene );
 			return this.collection;
 
-		};
+		}
 
-		SelectionBox.prototype.updateFrustum = function ( startPoint, endPoint ) {
+		updateFrustum( startPoint, endPoint ) {
 
 			startPoint = startPoint || this.startPoint;
 			endPoint = endPoint || this.endPoint; // Avoid invalid frustum
@@ -66,70 +80,110 @@
 
 			if ( this.camera.isPerspectiveCamera ) {
 
-				tmpPoint.copy( startPoint );
-				tmpPoint.x = Math.min( startPoint.x, endPoint.x );
-				tmpPoint.y = Math.max( startPoint.y, endPoint.y );
+				_tmpPoint.copy( startPoint );
+
+				_tmpPoint.x = Math.min( startPoint.x, endPoint.x );
+				_tmpPoint.y = Math.max( startPoint.y, endPoint.y );
 				endPoint.x = Math.max( startPoint.x, endPoint.x );
 				endPoint.y = Math.min( startPoint.y, endPoint.y );
-				vecNear.setFromMatrixPosition( this.camera.matrixWorld );
-				vecTopLeft.copy( tmpPoint );
-				vecTopRight.set( endPoint.x, tmpPoint.y, 0 );
-				vecDownRight.copy( endPoint );
-				vecDownLeft.set( tmpPoint.x, endPoint.y, 0 );
-				vecTopLeft.unproject( this.camera );
-				vecTopRight.unproject( this.camera );
-				vecDownRight.unproject( this.camera );
-				vecDownLeft.unproject( this.camera );
-				vectemp1.copy( vecTopLeft ).sub( vecNear );
-				vectemp2.copy( vecTopRight ).sub( vecNear );
-				vectemp3.copy( vecDownRight ).sub( vecNear );
-				vectemp1.normalize();
-				vectemp2.normalize();
-				vectemp3.normalize();
-				vectemp1.multiplyScalar( this.deep );
-				vectemp2.multiplyScalar( this.deep );
-				vectemp3.multiplyScalar( this.deep );
-				vectemp1.add( vecNear );
-				vectemp2.add( vecNear );
-				vectemp3.add( vecNear );
-				var planes = frustum.planes;
-				planes[ 0 ].setFromCoplanarPoints( vecNear, vecTopLeft, vecTopRight );
-				planes[ 1 ].setFromCoplanarPoints( vecNear, vecTopRight, vecDownRight );
-				planes[ 2 ].setFromCoplanarPoints( vecDownRight, vecDownLeft, vecNear );
-				planes[ 3 ].setFromCoplanarPoints( vecDownLeft, vecTopLeft, vecNear );
-				planes[ 4 ].setFromCoplanarPoints( vecTopRight, vecDownRight, vecDownLeft );
-				planes[ 5 ].setFromCoplanarPoints( vectemp3, vectemp2, vectemp1 );
+
+				_vecNear.setFromMatrixPosition( this.camera.matrixWorld );
+
+				_vecTopLeft.copy( _tmpPoint );
+
+				_vecTopRight.set( endPoint.x, _tmpPoint.y, 0 );
+
+				_vecDownRight.copy( endPoint );
+
+				_vecDownLeft.set( _tmpPoint.x, endPoint.y, 0 );
+
+				_vecTopLeft.unproject( this.camera );
+
+				_vecTopRight.unproject( this.camera );
+
+				_vecDownRight.unproject( this.camera );
+
+				_vecDownLeft.unproject( this.camera );
+
+				_vectemp1.copy( _vecTopLeft ).sub( _vecNear );
+
+				_vectemp2.copy( _vecTopRight ).sub( _vecNear );
+
+				_vectemp3.copy( _vecDownRight ).sub( _vecNear );
+
+				_vectemp1.normalize();
+
+				_vectemp2.normalize();
+
+				_vectemp3.normalize();
+
+				_vectemp1.multiplyScalar( this.deep );
+
+				_vectemp2.multiplyScalar( this.deep );
+
+				_vectemp3.multiplyScalar( this.deep );
+
+				_vectemp1.add( _vecNear );
+
+				_vectemp2.add( _vecNear );
+
+				_vectemp3.add( _vecNear );
+
+				const planes = _frustum.planes;
+				planes[ 0 ].setFromCoplanarPoints( _vecNear, _vecTopLeft, _vecTopRight );
+				planes[ 1 ].setFromCoplanarPoints( _vecNear, _vecTopRight, _vecDownRight );
+				planes[ 2 ].setFromCoplanarPoints( _vecDownRight, _vecDownLeft, _vecNear );
+				planes[ 3 ].setFromCoplanarPoints( _vecDownLeft, _vecTopLeft, _vecNear );
+				planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
+				planes[ 5 ].setFromCoplanarPoints( _vectemp3, _vectemp2, _vectemp1 );
 				planes[ 5 ].normal.multiplyScalar( - 1 );
 
 			} else if ( this.camera.isOrthographicCamera ) {
 
-				var left = Math.min( startPoint.x, endPoint.x );
-				var top = Math.max( startPoint.y, endPoint.y );
-				var right = Math.max( startPoint.x, endPoint.x );
-				var down = Math.min( startPoint.y, endPoint.y );
-				vecTopLeft.set( left, top, - 1 );
-				vecTopRight.set( right, top, - 1 );
-				vecDownRight.set( right, down, - 1 );
-				vecDownLeft.set( left, down, - 1 );
-				vecFarTopLeft.set( left, top, 1 );
-				vecFarTopRight.set( right, top, 1 );
-				vecFarDownRight.set( right, down, 1 );
-				vecFarDownLeft.set( left, down, 1 );
-				vecTopLeft.unproject( this.camera );
-				vecTopRight.unproject( this.camera );
-				vecDownRight.unproject( this.camera );
-				vecDownLeft.unproject( this.camera );
-				vecFarTopLeft.unproject( this.camera );
-				vecFarTopRight.unproject( this.camera );
-				vecFarDownRight.unproject( this.camera );
-				vecFarDownLeft.unproject( this.camera );
-				var planes = frustum.planes;
-				planes[ 0 ].setFromCoplanarPoints( vecTopLeft, vecFarTopLeft, vecFarTopRight );
-				planes[ 1 ].setFromCoplanarPoints( vecTopRight, vecFarTopRight, vecFarDownRight );
-				planes[ 2 ].setFromCoplanarPoints( vecFarDownRight, vecFarDownLeft, vecDownLeft );
-				planes[ 3 ].setFromCoplanarPoints( vecFarDownLeft, vecFarTopLeft, vecTopLeft );
-				planes[ 4 ].setFromCoplanarPoints( vecTopRight, vecDownRight, vecDownLeft );
-				planes[ 5 ].setFromCoplanarPoints( vecFarDownRight, vecFarTopRight, vecFarTopLeft );
+				const left = Math.min( startPoint.x, endPoint.x );
+				const top = Math.max( startPoint.y, endPoint.y );
+				const right = Math.max( startPoint.x, endPoint.x );
+				const down = Math.min( startPoint.y, endPoint.y );
+
+				_vecTopLeft.set( left, top, - 1 );
+
+				_vecTopRight.set( right, top, - 1 );
+
+				_vecDownRight.set( right, down, - 1 );
+
+				_vecDownLeft.set( left, down, - 1 );
+
+				_vecFarTopLeft.set( left, top, 1 );
+
+				_vecFarTopRight.set( right, top, 1 );
+
+				_vecFarDownRight.set( right, down, 1 );
+
+				_vecFarDownLeft.set( left, down, 1 );
+
+				_vecTopLeft.unproject( this.camera );
+
+				_vecTopRight.unproject( this.camera );
+
+				_vecDownRight.unproject( this.camera );
+
+				_vecDownLeft.unproject( this.camera );
+
+				_vecFarTopLeft.unproject( this.camera );
+
+				_vecFarTopRight.unproject( this.camera );
+
+				_vecFarDownRight.unproject( this.camera );
+
+				_vecFarDownLeft.unproject( this.camera );
+
+				const planes = _frustum.planes;
+				planes[ 0 ].setFromCoplanarPoints( _vecTopLeft, _vecFarTopLeft, _vecFarTopRight );
+				planes[ 1 ].setFromCoplanarPoints( _vecTopRight, _vecFarTopRight, _vecFarDownRight );
+				planes[ 2 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarDownLeft, _vecDownLeft );
+				planes[ 3 ].setFromCoplanarPoints( _vecFarDownLeft, _vecFarTopLeft, _vecTopLeft );
+				planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
+				planes[ 5 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarTopRight, _vecFarTopLeft );
 				planes[ 5 ].normal.multiplyScalar( - 1 );
 
 			} else {
@@ -138,19 +192,21 @@
 
 			}
 
-		};
+		}
 
-		SelectionBox.prototype.searchChildInFrustum = function ( frustum, object ) {
+		searchChildInFrustum( frustum, object ) {
 
 			if ( object.isMesh || object.isLine || object.isPoints ) {
 
 				if ( object.material !== undefined ) {
 
 					if ( object.geometry.boundingSphere === null ) object.geometry.computeBoundingSphere();
-					center.copy( object.geometry.boundingSphere.center );
-					center.applyMatrix4( object.matrixWorld );
 
-					if ( frustum.containsPoint( center ) ) {
+					_center.copy( object.geometry.boundingSphere.center );
+
+					_center.applyMatrix4( object.matrixWorld );
+
+					if ( frustum.containsPoint( _center ) ) {
 
 						this.collection.push( object );
 
@@ -162,7 +218,7 @@
 
 			if ( object.children.length > 0 ) {
 
-				for ( var x = 0; x < object.children.length; x ++ ) {
+				for ( let x = 0; x < object.children.length; x ++ ) {
 
 					this.searchChildInFrustum( frustum, object.children[ x ] );
 
@@ -170,11 +226,9 @@
 
 			}
 
-		};
-
-		return SelectionBox;
+		}
 
-	}();
+	}
 
 	THREE.SelectionBox = SelectionBox;
 

examples/js/interactive/SelectionHelper.js

@@ -1,8 +1,8 @@
 ( function () {
 
-	var SelectionHelper = function () {
+	class SelectionHelper {
 
-		function SelectionHelper( selectionBox, renderer, cssClassName ) {
+		constructor( selectionBox, renderer, cssClassName ) {
 
 			this.element = document.createElement( 'div' );
 			this.element.classList.add( cssClassName );
@@ -36,7 +36,7 @@
 
 		}
 
-		SelectionHelper.prototype.onSelectStart = function ( event ) {
+		onSelectStart( event ) {
 
 			this.renderer.domElement.parentElement.appendChild( this.element );
 			this.element.style.left = event.clientX + 'px';
@@ -46,9 +46,9 @@
 			this.startPoint.x = event.clientX;
 			this.startPoint.y = event.clientY;
 
-		};
+		}
 
-		SelectionHelper.prototype.onSelectMove = function ( event ) {
+		onSelectMove( event ) {
 
 			this.pointBottomRight.x = Math.max( this.startPoint.x, event.clientX );
 			this.pointBottomRight.y = Math.max( this.startPoint.y, event.clientY );
@@ -59,17 +59,15 @@
 			this.element.style.width = this.pointBottomRight.x - this.pointTopLeft.x + 'px';
 			this.element.style.height = this.pointBottomRight.y - this.pointTopLeft.y + 'px';
 
-		};
+		}
 
-		SelectionHelper.prototype.onSelectOver = function () {
+		onSelectOver() {
 
 			this.element.parentElement.removeChild( this.element );
 
-		};
-
-		return SelectionHelper;
+		}
 
-	}();
+	}
 
 	THREE.SelectionHelper = SelectionHelper;
 

examples/js/lights/LightProbeGenerator.js

@@ -1,37 +1,35 @@
 ( function () {
 
-	var LightProbeGenerator = {
-	// https://www.ppsloan.org/publications/StupidSH36.pdf
-		fromCubeTexture: function ( cubeTexture ) {
-
-			var norm,
-				lengthSq,
-				weight,
-				totalWeight = 0;
-			var coord = new THREE.Vector3();
-			var dir = new THREE.Vector3();
-			var color = new THREE.Color();
-			var shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
-			var sh = new THREE.SphericalHarmonics3();
-			var shCoefficients = sh.coefficients;
-
-			for ( var faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
-
-				var image = cubeTexture.image[ faceIndex ];
-				var width = image.width;
-				var height = image.height;
-				var canvas = document.createElement( 'canvas' );
+	class LightProbeGenerator {
+
+		// https://www.ppsloan.org/publications/StupidSH36.pdf
+		static fromCubeTexture( cubeTexture ) {
+
+			let totalWeight = 0;
+			const coord = new THREE.Vector3();
+			const dir = new THREE.Vector3();
+			const color = new THREE.Color();
+			const shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
+			const sh = new THREE.SphericalHarmonics3();
+			const shCoefficients = sh.coefficients;
+
+			for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
+
+				const image = cubeTexture.image[ faceIndex ];
+				const width = image.width;
+				const height = image.height;
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = width;
 				canvas.height = height;
-				var context = canvas.getContext( '2d' );
+				const context = canvas.getContext( '2d' );
 				context.drawImage( image, 0, 0, width, height );
-				var imageData = context.getImageData( 0, 0, width, height );
-				var data = imageData.data;
-				var imageWidth = imageData.width; // assumed to be square
+				const imageData = context.getImageData( 0, 0, width, height );
+				const data = imageData.data;
+				const imageWidth = imageData.width; // assumed to be square
 
-				var pixelSize = 2 / imageWidth;
+				const pixelSize = 2 / imageWidth;
 
-				for ( var i = 0, il = data.length; i < il; i += 4 ) {
+				for ( let i = 0, il = data.length; i < il; i += 4 ) {
 
 					// RGBA assumed
 					// pixel color
@@ -39,9 +37,9 @@
 
 					convertColorToLinear( color, cubeTexture.encoding ); // pixel coordinate on unit cube
 
-					var pixelIndex = i / 4;
-					var col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
-					var row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
+					const pixelIndex = i / 4;
+					const col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
+					const row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
 
 					switch ( faceIndex ) {
 
@@ -72,15 +70,15 @@
 					} // weight assigned to this pixel
 
 
-					lengthSq = coord.lengthSq();
-					weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
+					const lengthSq = coord.lengthSq();
+					const weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
 					totalWeight += weight; // direction vector to this pixel
 
 					dir.copy( coord ).normalize(); // evaluate SH basis functions in direction dir
 
 					THREE.SphericalHarmonics3.getBasisAt( dir, shBasis ); // accummuulate
 
-					for ( var j = 0; j < 9; j ++ ) {
+					for ( let j = 0; j < 9; j ++ ) {
 
 						shCoefficients[ j ].x += shBasis[ j ] * color.r * weight;
 						shCoefficients[ j ].y += shBasis[ j ] * color.g * weight;
@@ -93,9 +91,9 @@
 			} // normalize
 
 
-			norm = 4 * Math.PI / totalWeight;
+			const norm = 4 * Math.PI / totalWeight;
 
-			for ( var j = 0; j < 9; j ++ ) {
+			for ( let j = 0; j < 9; j ++ ) {
 
 				shCoefficients[ j ].x *= norm;
 				shCoefficients[ j ].y *= norm;
@@ -105,30 +103,28 @@
 
 			return new THREE.LightProbe( sh );
 
-		},
-		fromCubeRenderTarget: function ( renderer, cubeRenderTarget ) {
+		}
+
+		static fromCubeRenderTarget( renderer, cubeRenderTarget ) {
 
 			// The renderTarget must be set to RGBA in order to make readRenderTargetPixels works
-			var norm,
-				lengthSq,
-				weight,
-				totalWeight = 0;
-			var coord = new THREE.Vector3();
-			var dir = new THREE.Vector3();
-			var color = new THREE.Color();
-			var shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
-			var sh = new THREE.SphericalHarmonics3();
-			var shCoefficients = sh.coefficients;
-
-			for ( var faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
-
-				var imageWidth = cubeRenderTarget.width; // assumed to be square
-
-				var data = new Uint8Array( imageWidth * imageWidth * 4 );
+			let totalWeight = 0;
+			const coord = new THREE.Vector3();
+			const dir = new THREE.Vector3();
+			const color = new THREE.Color();
+			const shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
+			const sh = new THREE.SphericalHarmonics3();
+			const shCoefficients = sh.coefficients;
+
+			for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
+
+				const imageWidth = cubeRenderTarget.width; // assumed to be square
+
+				const data = new Uint8Array( imageWidth * imageWidth * 4 );
 				renderer.readRenderTargetPixels( cubeRenderTarget, 0, 0, imageWidth, imageWidth, data, faceIndex );
-				var pixelSize = 2 / imageWidth;
+				const pixelSize = 2 / imageWidth;
 
-				for ( var i = 0, il = data.length; i < il; i += 4 ) {
+				for ( let i = 0, il = data.length; i < il; i += 4 ) {
 
 					// RGBA assumed
 					// pixel color
@@ -136,9 +132,9 @@
 
 					convertColorToLinear( color, cubeRenderTarget.texture.encoding ); // pixel coordinate on unit cube
 
-					var pixelIndex = i / 4;
-					var col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
-					var row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
+					const pixelIndex = i / 4;
+					const col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
+					const row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
 
 					switch ( faceIndex ) {
 
@@ -169,15 +165,15 @@
 					} // weight assigned to this pixel
 
 
-					lengthSq = coord.lengthSq();
-					weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
+					const lengthSq = coord.lengthSq();
+					const weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
 					totalWeight += weight; // direction vector to this pixel
 
 					dir.copy( coord ).normalize(); // evaluate SH basis functions in direction dir
 
 					THREE.SphericalHarmonics3.getBasisAt( dir, shBasis ); // accummuulate
 
-					for ( var j = 0; j < 9; j ++ ) {
+					for ( let j = 0; j < 9; j ++ ) {
 
 						shCoefficients[ j ].x += shBasis[ j ] * color.r * weight;
 						shCoefficients[ j ].y += shBasis[ j ] * color.g * weight;
@@ -190,9 +186,9 @@
 			} // normalize
 
 
-			norm = 4 * Math.PI / totalWeight;
+			const norm = 4 * Math.PI / totalWeight;
 
-			for ( var j = 0; j < 9; j ++ ) {
+			for ( let j = 0; j < 9; j ++ ) {
 
 				shCoefficients[ j ].x *= norm;
 				shCoefficients[ j ].y *= norm;
@@ -203,9 +199,10 @@
 			return new THREE.LightProbe( sh );
 
 		}
-	};
 
-	var convertColorToLinear = function ( color, encoding ) {
+	}
+
+	function convertColorToLinear( color, encoding ) {
 
 		switch ( encoding ) {
 
@@ -224,7 +221,7 @@
 
 		return color;
 
-	};
+	}
 
 	THREE.LightProbeGenerator = LightProbeGenerator;
 

examples/jsm/interactive/SelectionBox.js

@@ -7,53 +7,53 @@ import {
  * This is a class to check whether objects are in a selection area in 3D space
  */
 
-var SelectionBox = ( function () {
+const _frustum = new Frustum();
+const _center = new Vector3();
 
-	var frustum = new Frustum();
-	var center = new Vector3();
+const _tmpPoint = new Vector3();
 
-	var tmpPoint = new Vector3();
+const _vecNear = new Vector3();
+const _vecTopLeft = new Vector3();
+const _vecTopRight = new Vector3();
+const _vecDownRight = new Vector3();
+const _vecDownLeft = new Vector3();
 
-	var vecNear = new Vector3();
-	var vecTopLeft = new Vector3();
-	var vecTopRight = new Vector3();
-	var vecDownRight = new Vector3();
-	var vecDownLeft = new Vector3();
+const _vecFarTopLeft = new Vector3();
+const _vecFarTopRight = new Vector3();
+const _vecFarDownRight = new Vector3();
+const _vecFarDownLeft = new Vector3();
 
-	var vecFarTopLeft = new Vector3();
-	var vecFarTopRight = new Vector3();
-	var vecFarDownRight = new Vector3();
-	var vecFarDownLeft = new Vector3();
+const _vectemp1 = new Vector3();
+const _vectemp2 = new Vector3();
+const _vectemp3 = new Vector3();
 
-	var vectemp1 = new Vector3();
-	var vectemp2 = new Vector3();
-	var vectemp3 = new Vector3();
+class SelectionBox {
 
-	function SelectionBox( camera, scene, deep ) {
+	constructor( camera, scene, deep = Number.MAX_VALUE ) {
 
 		this.camera = camera;
 		this.scene = scene;
 		this.startPoint = new Vector3();
 		this.endPoint = new Vector3();
 		this.collection = [];
-		this.deep = deep || Number.MAX_VALUE;
+		this.deep = deep;
 
 	}
 
-	SelectionBox.prototype.select = function ( startPoint, endPoint ) {
+	select( startPoint, endPoint ) {
 
 		this.startPoint = startPoint || this.startPoint;
 		this.endPoint = endPoint || this.endPoint;
 		this.collection = [];
 
 		this.updateFrustum( this.startPoint, this.endPoint );
-		this.searchChildInFrustum( frustum, this.scene );
+		this.searchChildInFrustum( _frustum, this.scene );
 
 		return this.collection;
 
-	};
+	}
 
-	SelectionBox.prototype.updateFrustum = function ( startPoint, endPoint ) {
+	updateFrustum( startPoint, endPoint ) {
 
 		startPoint = startPoint || this.startPoint;
 		endPoint = endPoint || this.endPoint;
@@ -77,82 +77,82 @@ var SelectionBox = ( function () {
 
 		if ( this.camera.isPerspectiveCamera ) {
 
-			tmpPoint.copy( startPoint );
-			tmpPoint.x = Math.min( startPoint.x, endPoint.x );
-			tmpPoint.y = Math.max( startPoint.y, endPoint.y );
+			_tmpPoint.copy( startPoint );
+			_tmpPoint.x = Math.min( startPoint.x, endPoint.x );
+			_tmpPoint.y = Math.max( startPoint.y, endPoint.y );
 			endPoint.x = Math.max( startPoint.x, endPoint.x );
 			endPoint.y = Math.min( startPoint.y, endPoint.y );
 
-			vecNear.setFromMatrixPosition( this.camera.matrixWorld );
-			vecTopLeft.copy( tmpPoint );
-			vecTopRight.set( endPoint.x, tmpPoint.y, 0 );
-			vecDownRight.copy( endPoint );
-			vecDownLeft.set( tmpPoint.x, endPoint.y, 0 );
-
-			vecTopLeft.unproject( this.camera );
-			vecTopRight.unproject( this.camera );
-			vecDownRight.unproject( this.camera );
-			vecDownLeft.unproject( this.camera );
-
-			vectemp1.copy( vecTopLeft ).sub( vecNear );
-			vectemp2.copy( vecTopRight ).sub( vecNear );
-			vectemp3.copy( vecDownRight ).sub( vecNear );
-			vectemp1.normalize();
-			vectemp2.normalize();
-			vectemp3.normalize();
-
-			vectemp1.multiplyScalar( this.deep );
-			vectemp2.multiplyScalar( this.deep );
-			vectemp3.multiplyScalar( this.deep );
-			vectemp1.add( vecNear );
-			vectemp2.add( vecNear );
-			vectemp3.add( vecNear );
-
-			var planes = frustum.planes;
-
-			planes[ 0 ].setFromCoplanarPoints( vecNear, vecTopLeft, vecTopRight );
-			planes[ 1 ].setFromCoplanarPoints( vecNear, vecTopRight, vecDownRight );
-			planes[ 2 ].setFromCoplanarPoints( vecDownRight, vecDownLeft, vecNear );
-			planes[ 3 ].setFromCoplanarPoints( vecDownLeft, vecTopLeft, vecNear );
-			planes[ 4 ].setFromCoplanarPoints( vecTopRight, vecDownRight, vecDownLeft );
-			planes[ 5 ].setFromCoplanarPoints( vectemp3, vectemp2, vectemp1 );
+			_vecNear.setFromMatrixPosition( this.camera.matrixWorld );
+			_vecTopLeft.copy( _tmpPoint );
+			_vecTopRight.set( endPoint.x, _tmpPoint.y, 0 );
+			_vecDownRight.copy( endPoint );
+			_vecDownLeft.set( _tmpPoint.x, endPoint.y, 0 );
+
+			_vecTopLeft.unproject( this.camera );
+			_vecTopRight.unproject( this.camera );
+			_vecDownRight.unproject( this.camera );
+			_vecDownLeft.unproject( this.camera );
+
+			_vectemp1.copy( _vecTopLeft ).sub( _vecNear );
+			_vectemp2.copy( _vecTopRight ).sub( _vecNear );
+			_vectemp3.copy( _vecDownRight ).sub( _vecNear );
+			_vectemp1.normalize();
+			_vectemp2.normalize();
+			_vectemp3.normalize();
+
+			_vectemp1.multiplyScalar( this.deep );
+			_vectemp2.multiplyScalar( this.deep );
+			_vectemp3.multiplyScalar( this.deep );
+			_vectemp1.add( _vecNear );
+			_vectemp2.add( _vecNear );
+			_vectemp3.add( _vecNear );
+
+			const planes = _frustum.planes;
+
+			planes[ 0 ].setFromCoplanarPoints( _vecNear, _vecTopLeft, _vecTopRight );
+			planes[ 1 ].setFromCoplanarPoints( _vecNear, _vecTopRight, _vecDownRight );
+			planes[ 2 ].setFromCoplanarPoints( _vecDownRight, _vecDownLeft, _vecNear );
+			planes[ 3 ].setFromCoplanarPoints( _vecDownLeft, _vecTopLeft, _vecNear );
+			planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
+			planes[ 5 ].setFromCoplanarPoints( _vectemp3, _vectemp2, _vectemp1 );
 			planes[ 5 ].normal.multiplyScalar( - 1 );
 
 		} else if ( this.camera.isOrthographicCamera ) {
 
-			var left = Math.min( startPoint.x, endPoint.x );
-			var top = Math.max( startPoint.y, endPoint.y );
-			var right = Math.max( startPoint.x, endPoint.x );
-			var down = Math.min( startPoint.y, endPoint.y );
-
-			vecTopLeft.set( left, top, - 1 );
-			vecTopRight.set( right, top, - 1 );
-			vecDownRight.set( right, down, - 1 );
-			vecDownLeft.set( left, down, - 1 );
-
-			vecFarTopLeft.set( left, top, 1 );
-			vecFarTopRight.set( right, top, 1 );
-			vecFarDownRight.set( right, down, 1 );
-			vecFarDownLeft.set( left, down, 1 );
-
-			vecTopLeft.unproject( this.camera );
-			vecTopRight.unproject( this.camera );
-			vecDownRight.unproject( this.camera );
-			vecDownLeft.unproject( this.camera );
-
-			vecFarTopLeft.unproject( this.camera );
-			vecFarTopRight.unproject( this.camera );
-			vecFarDownRight.unproject( this.camera );
-			vecFarDownLeft.unproject( this.camera );
-
-			var planes = frustum.planes;
-
-			planes[ 0 ].setFromCoplanarPoints( vecTopLeft, vecFarTopLeft, vecFarTopRight );
-			planes[ 1 ].setFromCoplanarPoints( vecTopRight, vecFarTopRight, vecFarDownRight );
-			planes[ 2 ].setFromCoplanarPoints( vecFarDownRight, vecFarDownLeft, vecDownLeft );
-			planes[ 3 ].setFromCoplanarPoints( vecFarDownLeft, vecFarTopLeft, vecTopLeft );
-			planes[ 4 ].setFromCoplanarPoints( vecTopRight, vecDownRight, vecDownLeft );
-			planes[ 5 ].setFromCoplanarPoints( vecFarDownRight, vecFarTopRight, vecFarTopLeft );
+			const left = Math.min( startPoint.x, endPoint.x );
+			const top = Math.max( startPoint.y, endPoint.y );
+			const right = Math.max( startPoint.x, endPoint.x );
+			const down = Math.min( startPoint.y, endPoint.y );
+
+			_vecTopLeft.set( left, top, - 1 );
+			_vecTopRight.set( right, top, - 1 );
+			_vecDownRight.set( right, down, - 1 );
+			_vecDownLeft.set( left, down, - 1 );
+
+			_vecFarTopLeft.set( left, top, 1 );
+			_vecFarTopRight.set( right, top, 1 );
+			_vecFarDownRight.set( right, down, 1 );
+			_vecFarDownLeft.set( left, down, 1 );
+
+			_vecTopLeft.unproject( this.camera );
+			_vecTopRight.unproject( this.camera );
+			_vecDownRight.unproject( this.camera );
+			_vecDownLeft.unproject( this.camera );
+
+			_vecFarTopLeft.unproject( this.camera );
+			_vecFarTopRight.unproject( this.camera );
+			_vecFarDownRight.unproject( this.camera );
+			_vecFarDownLeft.unproject( this.camera );
+
+			const planes = _frustum.planes;
+
+			planes[ 0 ].setFromCoplanarPoints( _vecTopLeft, _vecFarTopLeft, _vecFarTopRight );
+			planes[ 1 ].setFromCoplanarPoints( _vecTopRight, _vecFarTopRight, _vecFarDownRight );
+			planes[ 2 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarDownLeft, _vecDownLeft );
+			planes[ 3 ].setFromCoplanarPoints( _vecFarDownLeft, _vecFarTopLeft, _vecTopLeft );
+			planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
+			planes[ 5 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarTopRight, _vecFarTopLeft );
 			planes[ 5 ].normal.multiplyScalar( - 1 );
 
 		} else {
@@ -161,9 +161,9 @@ var SelectionBox = ( function () {
 
 		}
 
-	};
+	}
 
-	SelectionBox.prototype.searchChildInFrustum = function ( frustum, object ) {
+	searchChildInFrustum( frustum, object ) {
 
 		if ( object.isMesh || object.isLine || object.isPoints ) {
 
@@ -171,11 +171,11 @@ var SelectionBox = ( function () {
 
 				if ( object.geometry.boundingSphere === null ) object.geometry.computeBoundingSphere();
 
-				center.copy( object.geometry.boundingSphere.center );
+				_center.copy( object.geometry.boundingSphere.center );
 
-				center.applyMatrix4( object.matrixWorld );
+				_center.applyMatrix4( object.matrixWorld );
 
-				if ( frustum.containsPoint( center ) ) {
+				if ( frustum.containsPoint( _center ) ) {
 
 					this.collection.push( object );
 
@@ -187,7 +187,7 @@ var SelectionBox = ( function () {
 
 		if ( object.children.length > 0 ) {
 
-			for ( var x = 0; x < object.children.length; x ++ ) {
+			for ( let x = 0; x < object.children.length; x ++ ) {
 
 				this.searchChildInFrustum( frustum, object.children[ x ] );
 
@@ -195,10 +195,8 @@ var SelectionBox = ( function () {
 
 		}
 
-	};
-
-	return SelectionBox;
+	}
 
-} )();
+}
 
 export { SelectionBox };

examples/jsm/interactive/SelectionHelper.js

@@ -2,9 +2,9 @@ import {
 	Vector2
 } from '../../../build/three.module.js';
 
-var SelectionHelper = ( function () {
+class SelectionHelper {
 
-	function SelectionHelper( selectionBox, renderer, cssClassName ) {
+	constructor( selectionBox, renderer, cssClassName ) {
 
 		this.element = document.createElement( 'div' );
 		this.element.classList.add( cssClassName );
@@ -44,7 +44,7 @@ var SelectionHelper = ( function () {
 
 	}
 
-	SelectionHelper.prototype.onSelectStart = function ( event ) {
+	onSelectStart( event ) {
 
 		this.renderer.domElement.parentElement.appendChild( this.element );
 
@@ -56,9 +56,9 @@ var SelectionHelper = ( function () {
 		this.startPoint.x = event.clientX;
 		this.startPoint.y = event.clientY;
 
-	};
+	}
 
-	SelectionHelper.prototype.onSelectMove = function ( event ) {
+	onSelectMove( event ) {
 
 		this.pointBottomRight.x = Math.max( this.startPoint.x, event.clientX );
 		this.pointBottomRight.y = Math.max( this.startPoint.y, event.clientY );
@@ -70,16 +70,14 @@ var SelectionHelper = ( function () {
 		this.element.style.width = ( this.pointBottomRight.x - this.pointTopLeft.x ) + 'px';
 		this.element.style.height = ( this.pointBottomRight.y - this.pointTopLeft.y ) + 'px';
 
-	};
+	}
 
-	SelectionHelper.prototype.onSelectOver = function () {
+	onSelectOver() {
 
 		this.element.parentElement.removeChild( this.element );
 
-	};
-
-	return SelectionHelper;
+	}
 
-} )();
+}
 
 export { SelectionHelper };

examples/jsm/lights/LightProbeGenerator.js

@@ -7,49 +7,49 @@ import {
 	sRGBEncoding
 } from '../../../build/three.module.js';
 
-var LightProbeGenerator = {
+class LightProbeGenerator {
 
 	// https://www.ppsloan.org/publications/StupidSH36.pdf
-	fromCubeTexture: function ( cubeTexture ) {
+	static fromCubeTexture( cubeTexture ) {
 
-		var norm, lengthSq, weight, totalWeight = 0;
+		let totalWeight = 0;
 
-		var coord = new Vector3();
+		const coord = new Vector3();
 
-		var dir = new Vector3();
+		const dir = new Vector3();
 
-		var color = new Color();
+		const color = new Color();
 
-		var shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
+		const shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
 
-		var sh = new SphericalHarmonics3();
-		var shCoefficients = sh.coefficients;
+		const sh = new SphericalHarmonics3();
+		const shCoefficients = sh.coefficients;
 
-		for ( var faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
+		for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
 
-			var image = cubeTexture.image[ faceIndex ];
+			const image = cubeTexture.image[ faceIndex ];
 
-			var width = image.width;
-			var height = image.height;
+			const width = image.width;
+			const height = image.height;
 
-			var canvas = document.createElement( 'canvas' );
+			const canvas = document.createElement( 'canvas' );
 
 			canvas.width = width;
 			canvas.height = height;
 
-			var context = canvas.getContext( '2d' );
+			const context = canvas.getContext( '2d' );
 
 			context.drawImage( image, 0, 0, width, height );
 
-			var imageData = context.getImageData( 0, 0, width, height );
+			const imageData = context.getImageData( 0, 0, width, height );
 
-			var data = imageData.data;
+			const data = imageData.data;
 
-			var imageWidth = imageData.width; // assumed to be square
+			const imageWidth = imageData.width; // assumed to be square
 
-			var pixelSize = 2 / imageWidth;
+			const pixelSize = 2 / imageWidth;
 
-			for ( var i = 0, il = data.length; i < il; i += 4 ) { // RGBA assumed
+			for ( let i = 0, il = data.length; i < il; i += 4 ) { // RGBA assumed
 
 				// pixel color
 				color.setRGB( data[ i ] / 255, data[ i + 1 ] / 255, data[ i + 2 ] / 255 );
@@ -59,11 +59,11 @@ var LightProbeGenerator = {
 
 				// pixel coordinate on unit cube
 
-				var pixelIndex = i / 4;
+				const pixelIndex = i / 4;
 
-				var col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
+				const col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
 
-				var row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
+				const row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
 
 				switch ( faceIndex ) {
 
@@ -83,9 +83,9 @@ var LightProbeGenerator = {
 
 				// weight assigned to this pixel
 
-				lengthSq = coord.lengthSq();
+				const lengthSq = coord.lengthSq();
 
-				weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
+				const weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
 
 				totalWeight += weight;
 
@@ -96,7 +96,7 @@ var LightProbeGenerator = {
 				SphericalHarmonics3.getBasisAt( dir, shBasis );
 
 				// accummuulate
-				for ( var j = 0; j < 9; j ++ ) {
+				for ( let j = 0; j < 9; j ++ ) {
 
 					shCoefficients[ j ].x += shBasis[ j ] * color.r * weight;
 					shCoefficients[ j ].y += shBasis[ j ] * color.g * weight;
@@ -109,9 +109,9 @@ var LightProbeGenerator = {
 		}
 
 		// normalize
-		norm = ( 4 * Math.PI ) / totalWeight;
+		const norm = ( 4 * Math.PI ) / totalWeight;
 
-		for ( var j = 0; j < 9; j ++ ) {
+		for ( let j = 0; j < 9; j ++ ) {
 
 			shCoefficients[ j ].x *= norm;
 			shCoefficients[ j ].y *= norm;
@@ -121,33 +121,33 @@ var LightProbeGenerator = {
 
 		return new LightProbe( sh );
 
-	},
+	}
 
-	fromCubeRenderTarget: function ( renderer, cubeRenderTarget ) {
+	static fromCubeRenderTarget( renderer, cubeRenderTarget ) {
 
 		// The renderTarget must be set to RGBA in order to make readRenderTargetPixels works
-		var norm, lengthSq, weight, totalWeight = 0;
+		let totalWeight = 0;
 
-		var coord = new Vector3();
+		const coord = new Vector3();
 
-		var dir = new Vector3();
+		const dir = new Vector3();
 
-		var color = new Color();
+		const color = new Color();
 
-		var shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
+		const shBasis = [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
 
-		var sh = new SphericalHarmonics3();
-		var shCoefficients = sh.coefficients;
+		const sh = new SphericalHarmonics3();
+		const shCoefficients = sh.coefficients;
 
-		for ( var faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
+		for ( let faceIndex = 0; faceIndex < 6; faceIndex ++ ) {
 
-			var imageWidth = cubeRenderTarget.width; // assumed to be square
-			var data = new Uint8Array( imageWidth * imageWidth * 4 );
+			const imageWidth = cubeRenderTarget.width; // assumed to be square
+			const data = new Uint8Array( imageWidth * imageWidth * 4 );
 			renderer.readRenderTargetPixels( cubeRenderTarget, 0, 0, imageWidth, imageWidth, data, faceIndex );
 
-			var pixelSize = 2 / imageWidth;
+			const pixelSize = 2 / imageWidth;
 
-			for ( var i = 0, il = data.length; i < il; i += 4 ) { // RGBA assumed
+			for ( let i = 0, il = data.length; i < il; i += 4 ) { // RGBA assumed
 
 				// pixel color
 				color.setRGB( data[ i ] / 255, data[ i + 1 ] / 255, data[ i + 2 ] / 255 );
@@ -157,11 +157,11 @@ var LightProbeGenerator = {
 
 				// pixel coordinate on unit cube
 
-				var pixelIndex = i / 4;
+				const pixelIndex = i / 4;
 
-				var col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
+				const col = - 1 + ( pixelIndex % imageWidth + 0.5 ) * pixelSize;
 
-				var row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
+				const row = 1 - ( Math.floor( pixelIndex / imageWidth ) + 0.5 ) * pixelSize;
 
 				switch ( faceIndex ) {
 
@@ -181,9 +181,9 @@ var LightProbeGenerator = {
 
 				// weight assigned to this pixel
 
-				lengthSq = coord.lengthSq();
+				const lengthSq = coord.lengthSq();
 
-				weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
+				const weight = 4 / ( Math.sqrt( lengthSq ) * lengthSq );
 
 				totalWeight += weight;
 
@@ -194,7 +194,7 @@ var LightProbeGenerator = {
 				SphericalHarmonics3.getBasisAt( dir, shBasis );
 
 				// accummuulate
-				for ( var j = 0; j < 9; j ++ ) {
+				for ( let j = 0; j < 9; j ++ ) {
 
 					shCoefficients[ j ].x += shBasis[ j ] * color.r * weight;
 					shCoefficients[ j ].y += shBasis[ j ] * color.g * weight;
@@ -207,9 +207,9 @@ var LightProbeGenerator = {
 		}
 
 		// normalize
-		norm = ( 4 * Math.PI ) / totalWeight;
+		const norm = ( 4 * Math.PI ) / totalWeight;
 
-		for ( var j = 0; j < 9; j ++ ) {
+		for ( let j = 0; j < 9; j ++ ) {
 
 			shCoefficients[ j ].x *= norm;
 			shCoefficients[ j ].y *= norm;
@@ -221,9 +221,9 @@ var LightProbeGenerator = {
 
 	}
 
-};
+}
 
-var convertColorToLinear = function ( color, encoding ) {
+function convertColorToLinear( color, encoding ) {
 
 	switch ( encoding ) {
 
@@ -245,6 +245,6 @@ var convertColorToLinear = function ( color, encoding ) {
 
 	return color;
 
-};
+}
 
 export { LightProbeGenerator };