Examples: Clean up. (#23426)

examples/jsm/csm/CSMFrustum.js

@@ -133,7 +133,7 @@ class CSMFrustum {
 
 	toSpace( cameraMatrix, target ) {
 
-		for ( var i = 0; i < 4; i ++ ) {
+		for ( let i = 0; i < 4; i ++ ) {
 
 			target.vertices.near[ i ]
 				.copy( this.vertices.near[ i ] )

examples/jsm/geometries/ParametricGeometries.js

@@ -210,9 +210,9 @@ ParametricGeometries.SphereGeometry = class SphereGeometry extends ParametricGeo
 			u *= Math.PI;
 			v *= 2 * Math.PI;
 
-			var x = size * Math.sin( u ) * Math.cos( v );
-			var y = size * Math.sin( u ) * Math.sin( v );
-			var z = size * Math.cos( u );
+			const x = size * Math.sin( u ) * Math.cos( v );
+			const y = size * Math.sin( u ) * Math.sin( v );
+			const z = size * Math.cos( u );
 
 			target.set( x, y, z );
 

examples/jsm/lines/LineGeometry.js

@@ -13,10 +13,10 @@ class LineGeometry extends LineSegmentsGeometry {
 
 		// converts [ x1, y1, z1,  x2, y2, z2, ... ] to pairs format
 
-		var length = array.length - 3;
-		var points = new Float32Array( 2 * length );
+		const length = array.length - 3;
+		const points = new Float32Array( 2 * length );
 
-		for ( var i = 0; i < length; i += 3 ) {
+		for ( let i = 0; i < length; i += 3 ) {
 
 			points[ 2 * i ] = array[ i ];
 			points[ 2 * i + 1 ] = array[ i + 1 ];
@@ -38,10 +38,10 @@ class LineGeometry extends LineSegmentsGeometry {
 
 		// converts [ r1, g1, b1,  r2, g2, b2, ... ] to pairs format
 
-		var length = array.length - 3;
-		var colors = new Float32Array( 2 * length );
+		const length = array.length - 3;
+		const colors = new Float32Array( 2 * length );
 
-		for ( var i = 0; i < length; i += 3 ) {
+		for ( let i = 0; i < length; i += 3 ) {
 
 			colors[ 2 * i ] = array[ i ];
 			colors[ 2 * i + 1 ] = array[ i + 1 ];
@@ -61,7 +61,7 @@ class LineGeometry extends LineSegmentsGeometry {
 
 	fromLine( line ) {
 
-		var geometry = line.geometry;
+		const geometry = line.geometry;
 
 		if ( geometry.isGeometry ) {
 

examples/jsm/lines/LineSegments2.js

@@ -196,7 +196,7 @@ class LineSegments2 extends Mesh {
 			_end4.applyMatrix4( _mvMatrix );
 
 			// skip the segment if it's entirely behind the camera
-			var isBehindCameraNear = _start4.z > near && _end4.z > near;
+			const isBehindCameraNear = _start4.z > near && _end4.z > near;
 			if ( isBehindCameraNear ) {
 
 				continue;

examples/jsm/misc/Volume.js

@@ -144,7 +144,7 @@ function Volume( xLength, yLength, zLength, type, arrayBuffer ) {
 	 * @member {number} lowerThreshold The voxels with values under this threshold won't appear in the slices.
 	 *                      If changed, geometryNeedsUpdate is automatically set to true on all the slices associated to this volume
 	 */
-	var lowerThreshold = - Infinity;
+	let lowerThreshold = - Infinity;
 	Object.defineProperty( this, 'lowerThreshold', {
 		get: function () {
 
@@ -166,7 +166,7 @@ function Volume( xLength, yLength, zLength, type, arrayBuffer ) {
 	 * @member {number} upperThreshold The voxels with values over this threshold won't appear in the slices.
 	 *                      If changed, geometryNeedsUpdate is automatically set to true on all the slices associated to this volume
 	 */
-	var upperThreshold = Infinity;
+	let upperThreshold = Infinity;
 	Object.defineProperty( this, 'upperThreshold', {
 		get: function () {
 
@@ -238,9 +238,9 @@ Volume.prototype = {
 	 */
 	reverseAccess: function ( index ) {
 
-		var z = Math.floor( index / ( this.yLength * this.xLength ) );
-		var y = Math.floor( ( index - z * this.yLength * this.xLength ) / this.xLength );
-		var x = index - z * this.yLength * this.xLength - y * this.xLength;
+		const z = Math.floor( index / ( this.yLength * this.xLength ) );
+		const y = Math.floor( ( index - z * this.yLength * this.xLength ) / this.xLength );
+		const x = index - z * this.yLength * this.xLength - y * this.xLength;
 		return [ x, y, z ];
 
 	},
@@ -257,10 +257,10 @@ Volume.prototype = {
 	 */
 	map: function ( functionToMap, context ) {
 
-		var length = this.data.length;
+		const length = this.data.length;
 		context = context || this;
 
-		for ( var i = 0; i < length; i ++ ) {
+		for ( let i = 0; i < length; i ++ ) {
 
 			this.data[ i ] = functionToMap.call( context, this.data[ i ], i, this.data );
 
@@ -279,23 +279,18 @@ Volume.prototype = {
 	 */
 	extractPerpendicularPlane: function ( axis, RASIndex ) {
 
-		var iLength,
-			jLength,
-			sliceAccess,
-			planeMatrix = ( new Matrix4() ).identity(),
-			volume = this,
-			planeWidth,
-			planeHeight,
-			firstSpacing,
+		let firstSpacing,
 			secondSpacing,
 			positionOffset,
 			IJKIndex;
 
-		var axisInIJK = new Vector3(),
+		const axisInIJK = new Vector3(),
 			firstDirection = new Vector3(),
-			secondDirection = new Vector3();
+			secondDirection = new Vector3(),
+			planeMatrix = ( new Matrix4() ).identity(),
+			volume = this;
 
-		var dimensions = new Vector3( this.xLength, this.yLength, this.zLength );
+		const dimensions = new Vector3( this.xLength, this.yLength, this.zLength );
 
 
 		switch ( axis ) {
@@ -340,50 +335,48 @@ Volume.prototype = {
 		}
 
 		firstDirection.applyMatrix4( volume.inverseMatrix ).normalize();
-		firstDirection.argVar = 'i';
+		firstDirection.arglet = 'i';
 		secondDirection.applyMatrix4( volume.inverseMatrix ).normalize();
-		secondDirection.argVar = 'j';
+		secondDirection.arglet = 'j';
 		axisInIJK.applyMatrix4( volume.inverseMatrix ).normalize();
-		iLength = Math.floor( Math.abs( firstDirection.dot( dimensions ) ) );
-		jLength = Math.floor( Math.abs( secondDirection.dot( dimensions ) ) );
-		planeWidth = Math.abs( iLength * firstSpacing );
-		planeHeight = Math.abs( jLength * secondSpacing );
+		const iLength = Math.floor( Math.abs( firstDirection.dot( dimensions ) ) );
+		const jLength = Math.floor( Math.abs( secondDirection.dot( dimensions ) ) );
+		const planeWidth = Math.abs( iLength * firstSpacing );
+		const planeHeight = Math.abs( jLength * secondSpacing );
 
 		IJKIndex = Math.abs( Math.round( IJKIndex.applyMatrix4( volume.inverseMatrix ).dot( axisInIJK ) ) );
-		var base = [ new Vector3( 1, 0, 0 ), new Vector3( 0, 1, 0 ), new Vector3( 0, 0, 1 ) ];
-		var iDirection = [ firstDirection, secondDirection, axisInIJK ].find( function ( x ) {
+		const base = [ new Vector3( 1, 0, 0 ), new Vector3( 0, 1, 0 ), new Vector3( 0, 0, 1 ) ];
+		const iDirection = [ firstDirection, secondDirection, axisInIJK ].find( function ( x ) {
 
 			return Math.abs( x.dot( base[ 0 ] ) ) > 0.9;
 
 		} );
-		var jDirection = [ firstDirection, secondDirection, axisInIJK ].find( function ( x ) {
+		const jDirection = [ firstDirection, secondDirection, axisInIJK ].find( function ( x ) {
 
 			return Math.abs( x.dot( base[ 1 ] ) ) > 0.9;
 
 		} );
-		var kDirection = [ firstDirection, secondDirection, axisInIJK ].find( function ( x ) {
+		const kDirection = [ firstDirection, secondDirection, axisInIJK ].find( function ( x ) {
 
 			return Math.abs( x.dot( base[ 2 ] ) ) > 0.9;
 
 		} );
 
-		sliceAccess = function ( i, j ) {
-
-			var accessI, accessJ, accessK;
+		function sliceAccess( i, j ) {
 
-			var si = ( iDirection === axisInIJK ) ? IJKIndex : ( iDirection.argVar === 'i' ? i : j );
-			var sj = ( jDirection === axisInIJK ) ? IJKIndex : ( jDirection.argVar === 'i' ? i : j );
-			var sk = ( kDirection === axisInIJK ) ? IJKIndex : ( kDirection.argVar === 'i' ? i : j );
+			const si = ( iDirection === axisInIJK ) ? IJKIndex : ( iDirection.arglet === 'i' ? i : j );
+			const sj = ( jDirection === axisInIJK ) ? IJKIndex : ( jDirection.arglet === 'i' ? i : j );
+			const sk = ( kDirection === axisInIJK ) ? IJKIndex : ( kDirection.arglet === 'i' ? i : j );
 
 			// invert indices if necessary
 
-			var accessI = ( iDirection.dot( base[ 0 ] ) > 0 ) ? si : ( volume.xLength - 1 ) - si;
-			var accessJ = ( jDirection.dot( base[ 1 ] ) > 0 ) ? sj : ( volume.yLength - 1 ) - sj;
-			var accessK = ( kDirection.dot( base[ 2 ] ) > 0 ) ? sk : ( volume.zLength - 1 ) - sk;
+			const accessI = ( iDirection.dot( base[ 0 ] ) > 0 ) ? si : ( volume.xLength - 1 ) - si;
+			const accessJ = ( jDirection.dot( base[ 1 ] ) > 0 ) ? sj : ( volume.yLength - 1 ) - sj;
+			const accessK = ( kDirection.dot( base[ 2 ] ) > 0 ) ? sk : ( volume.zLength - 1 ) - sk;
 
 			return volume.access( accessI, accessJ, accessK );
 
-		};
+		}
 
 		return {
 			iLength: iLength,
@@ -406,7 +399,7 @@ Volume.prototype = {
 	 */
 	extractSlice: function ( axis, index ) {
 
-		var slice = new VolumeSlice( this, index, axis );
+		const slice = new VolumeSlice( this, index, axis );
 		this.sliceList.push( slice );
 		return slice;
 
@@ -437,19 +430,19 @@ Volume.prototype = {
 	 */
 	computeMinMax: function () {
 
-		var min = Infinity;
-		var max = - Infinity;
+		let min = Infinity;
+		let max = - Infinity;
 
 		// buffer the length
-		var datasize = this.data.length;
+		const datasize = this.data.length;
 
-		var i = 0;
+		let i = 0;
 
 		for ( i = 0; i < datasize; i ++ ) {
 
 			if ( ! isNaN( this.data[ i ] ) ) {
 
-				var value = this.data[ i ];
+				const value = this.data[ i ];
 				min = Math.min( min, value );
 				max = Math.max( max, value );
 

examples/jsm/misc/VolumeSlice.js

@@ -18,7 +18,7 @@ import {
  */
 function VolumeSlice( volume, index, axis ) {
 
-	var slice = this;
+	const slice = this;
 	/**
 	 * @member {Volume} volume The associated volume
 	 */
@@ -63,10 +63,10 @@ function VolumeSlice( volume, index, axis ) {
 	this.updateGeometry();
 
 
-	var canvasMap = new Texture( this.canvas );
+	const canvasMap = new Texture( this.canvas );
 	canvasMap.minFilter = LinearFilter;
 	canvasMap.wrapS = canvasMap.wrapT = ClampToEdgeWrapping;
-	var material = new MeshBasicMaterial( { map: canvasMap, side: DoubleSide, transparent: true } );
+	const material = new MeshBasicMaterial( { map: canvasMap, side: DoubleSide, transparent: true } );
 	/**
 	 * @member {Mesh} mesh The mesh ready to get used in the scene
 	 */
@@ -113,7 +113,7 @@ VolumeSlice.prototype = {
 
 		}
 
-		var iLength = this.iLength,
+		const iLength = this.iLength,
 			jLength = this.jLength,
 			sliceAccess = this.sliceAccess,
 			volume = this.volume,
@@ -122,27 +122,27 @@ VolumeSlice.prototype = {
 
 
 		// get the imageData and pixel array from the canvas
-		var imgData = ctx.getImageData( 0, 0, iLength, jLength );
-		var data = imgData.data;
-		var volumeData = volume.data;
-		var upperThreshold = volume.upperThreshold;
-		var lowerThreshold = volume.lowerThreshold;
-		var windowLow = volume.windowLow;
-		var windowHigh = volume.windowHigh;
+		const imgData = ctx.getImageData( 0, 0, iLength, jLength );
+		const data = imgData.data;
+		const volumeData = volume.data;
+		const upperThreshold = volume.upperThreshold;
+		const lowerThreshold = volume.lowerThreshold;
+		const windowLow = volume.windowLow;
+		const windowHigh = volume.windowHigh;
 
 		// manipulate some pixel elements
-		var pixelCount = 0;
+		let pixelCount = 0;
 
 		if ( volume.dataType === 'label' ) {
 
 			//this part is currently useless but will be used when colortables will be handled
-			for ( var j = 0; j < jLength; j ++ ) {
+			for ( let j = 0; j < jLength; j ++ ) {
 
-				for ( var i = 0; i < iLength; i ++ ) {
+				for ( let i = 0; i < iLength; i ++ ) {
 
-					var label = volumeData[ sliceAccess( i, j ) ];
+					let label = volumeData[ sliceAccess( i, j ) ];
 					label = label >= this.colorMap.length ? ( label % this.colorMap.length ) + 1 : label;
-					var color = this.colorMap[ label ];
+					const color = this.colorMap[ label ];
 					data[ 4 * pixelCount ] = ( color >> 24 ) & 0xff;
 					data[ 4 * pixelCount + 1 ] = ( color >> 16 ) & 0xff;
 					data[ 4 * pixelCount + 2 ] = ( color >> 8 ) & 0xff;
@@ -155,12 +155,12 @@ VolumeSlice.prototype = {
 
 		} else {
 
-			for ( var j = 0; j < jLength; j ++ ) {
+			for ( let j = 0; j < jLength; j ++ ) {
 
-				for ( var i = 0; i < iLength; i ++ ) {
+				for ( let i = 0; i < iLength; i ++ ) {
 
-					var value = volumeData[ sliceAccess( i, j ) ];
-					var alpha = 0xff;
+					let value = volumeData[ sliceAccess( i, j ) ];
+					let alpha = 0xff;
 					//apply threshold
 					alpha = upperThreshold >= value ? ( lowerThreshold <= value ? alpha : 0 ) : 0;
 					//apply window level
@@ -194,7 +194,7 @@ VolumeSlice.prototype = {
 	 */
 	updateGeometry: function () {
 
-		var extracted = this.volume.extractPerpendicularPlane( this.axis, this.index );
+		const extracted = this.volume.extractPerpendicularPlane( this.axis, this.index );
 		this.sliceAccess = extracted.sliceAccess;
 		this.jLength = extracted.jLength;
 		this.iLength = extracted.iLength;

examples/jsm/modifiers/SimplifyModifier.js

@@ -164,7 +164,7 @@ function pushIfUnique( array, object ) {
 
 function removeFromArray( array, object ) {
 
-	var k = array.indexOf( object );
+	const k = array.indexOf( object );
 	if ( k > - 1 ) array.splice( k, 1 );
 
 }

examples/jsm/offscreen/jank.js

@@ -1,9 +1,9 @@
-var interval = null;
-var result = null;
+let interval = null;
+let result = null;
 
 function initJank() {
 
-	var button = document.getElementById( 'button' );
+	const button = document.getElementById( 'button' );
 	button.addEventListener( 'click', function () {
 
 		if ( interval === null ) {
@@ -30,9 +30,9 @@ function initJank() {
 
 function jank() {
 
-	var number = 0;
+	let number = 0;
 
-	for ( var i = 0; i < 10000000; i ++ ) {
+	for ( let i = 0; i < 10000000; i ++ ) {
 
 		number += Math.random();
 

examples/jsm/offscreen/offscreen.js

@@ -2,7 +2,7 @@ import init from './scene.js';
 
 self.onmessage = function ( message ) {
 
-	var data = message.data;
+	const data = message.data;
 	init( data.drawingSurface, data.width, data.height, data.pixelRatio, data.path );
 
 };

examples/jsm/offscreen/scene.js

@@ -1,6 +1,6 @@
 import * as THREE from '../../../build/three.module.js';
 
-var camera, scene, renderer, group;
+let camera, scene, renderer, group;
 
 function init( canvas, width, height, pixelRatio, path ) {
 
@@ -16,24 +16,24 @@ function init( canvas, width, height, pixelRatio, path ) {
 
 	// we don't use ImageLoader since it has a DOM dependency (HTML5 image element)
 
-	var loader = new THREE.ImageBitmapLoader().setPath( path );
+	const loader = new THREE.ImageBitmapLoader().setPath( path );
 	loader.setOptions( { imageOrientation: 'flipY' } );
 	loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function ( imageBitmap ) {
 
-		var texture = new THREE.CanvasTexture( imageBitmap );
+		const texture = new THREE.CanvasTexture( imageBitmap );
 
-		var geometry = new THREE.IcosahedronGeometry( 5, 8 );
-		var materials = [
+		const geometry = new THREE.IcosahedronGeometry( 5, 8 );
+		const materials = [
 			new THREE.MeshMatcapMaterial( { color: 0xaa24df, matcap: texture } ),
 			new THREE.MeshMatcapMaterial( { color: 0x605d90, matcap: texture } ),
 			new THREE.MeshMatcapMaterial( { color: 0xe04a3f, matcap: texture } ),
 			new THREE.MeshMatcapMaterial( { color: 0xe30456, matcap: texture } )
 		];
 
-		for ( var i = 0; i < 100; i ++ ) {
+		for ( let i = 0; i < 100; i ++ ) {
 
-			var material = materials[ i % materials.length ];
-			var mesh = new THREE.Mesh( geometry, material );
+			const material = materials[ i % materials.length ];
+			const mesh = new THREE.Mesh( geometry, material );
 			mesh.position.x = random() * 200 - 100;
 			mesh.position.y = random() * 200 - 100;
 			mesh.position.z = random() * 200 - 100;
@@ -73,11 +73,11 @@ function animate() {
 
 // PRNG
 
-var seed = 1;
+let seed = 1;
 
 function random() {
 
-	var x = Math.sin( seed ++ ) * 10000;
+	const x = Math.sin( seed ++ ) * 10000;
 
 	return x - Math.floor( x );
 

examples/jsm/postprocessing/DotScreenPass.js

@@ -13,7 +13,7 @@ class DotScreenPass extends Pass {
 
 		if ( DotScreenShader === undefined ) console.error( 'THREE.DotScreenPass relies on DotScreenShader' );
 
-		var shader = DotScreenShader;
+		const shader = DotScreenShader;
 
 		this.uniforms = UniformsUtils.clone( shader.uniforms );
 

examples/jsm/shaders/CopyShader.js

@@ -2,7 +2,7 @@
  * Full-screen textured quad shader
  */
 
-var CopyShader = {
+const CopyShader = {
 
 	uniforms: {
 

examples/jsm/shaders/FreiChenShader.js

@@ -9,7 +9,7 @@ import {
  * aspect: vec2 of (1/width, 1/height)
  */
 
-var FreiChenShader = {
+const FreiChenShader = {
 
 	uniforms: {
 

examples/jsm/shaders/HorizontalBlurShader.js

@@ -7,7 +7,7 @@
  * - "h" and "v" parameters should be set to "1 / width" and "1 / height"
  */
 
-var HorizontalBlurShader = {
+const HorizontalBlurShader = {
 
 	uniforms: {
 

examples/jsm/shaders/HorizontalTiltShiftShader.js

@@ -7,7 +7,7 @@
  * - "r" parameter control where "focused" horizontal line lies
  */
 
-var HorizontalTiltShiftShader = {
+const HorizontalTiltShiftShader = {
 
 	uniforms: {
 

examples/jsm/shaders/SSRShader.js

@@ -7,7 +7,7 @@ import {
  * https://lettier.github.io/3d-game-shaders-for-beginners/screen-space-reflection.html
  */
 
-var SSRShader = {
+const SSRShader = {
 
 	defines: {
 		MAX_STEP: 0,
@@ -231,7 +231,7 @@ var SSRShader = {
 
 };
 
-var SSRDepthShader = {
+const SSRDepthShader = {
 
 	defines: {
 		'PERSPECTIVE_CAMERA': 1
@@ -298,7 +298,7 @@ var SSRDepthShader = {
 
 };
 
-var SSRBlurShader = {
+const SSRBlurShader = {
 
 	uniforms: {
 

examples/jsm/shaders/SSRrShader.js

@@ -237,7 +237,7 @@ const SSRrShader = {
 
 };
 
-var SSRrDepthShader = {
+const SSRrDepthShader = {
 
 	defines: {
 		'PERSPECTIVE_CAMERA': 1

examples/jsm/shaders/ToneMapShader.js

@@ -2,7 +2,7 @@
  * Full-screen tone-mapping shader based on http://www.cis.rit.edu/people/faculty/ferwerda/publications/sig02_paper.pdf
  */
 
-var ToneMapShader = {
+const ToneMapShader = {
 
 	uniforms: {
 

examples/jsm/webxr/ARButton.js

@@ -8,11 +8,11 @@ class ARButton {
 
 			if ( sessionInit.domOverlay === undefined ) {
 
-				var overlay = document.createElement( 'div' );
+				const overlay = document.createElement( 'div' );
 				overlay.style.display = 'none';
 				document.body.appendChild( overlay );
 
-				var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+				const svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
 				svg.setAttribute( 'width', 38 );
 				svg.setAttribute( 'height', 38 );
 				svg.style.position = 'absolute';
@@ -25,7 +25,7 @@ class ARButton {
 				} );
 				overlay.appendChild( svg );
 
-				var path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+				const path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
 				path.setAttribute( 'd', 'M 12,12 L 28,28 M 28,12 12,28' );
 				path.setAttribute( 'stroke', '#fff' );
 				path.setAttribute( 'stroke-width', 2 );

examples/jsm/webxr/OculusHandPointerModel.js

@@ -62,7 +62,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 	_drawVerticesRing( vertices, baseVector, ringIndex ) {
 
 		const segmentVector = baseVector.clone();
-		for ( var i = 0; i < POINTER_SEGMENTS; i ++ ) {
+		for ( let i = 0; i < POINTER_SEGMENTS; i ++ ) {
 
 			segmentVector.applyAxisAngle( ZAXIS, ( Math.PI * 2 ) / POINTER_SEGMENTS );
 			const vid = ringIndex * POINTER_SEGMENTS + i;
@@ -91,7 +91,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 			Math.cos( ( Math.PI * POINTER_HEMISPHERE_ANGLE ) / 180 ) * rearRadius,
 			0
 		);
-		for ( var i = 0; i < POINTER_RINGS; i ++ ) {
+		for ( let i = 0; i < POINTER_RINGS; i ++ ) {
 
 			this._drawVerticesRing( vertices, rearBase, i + 1 );
 			rearBase.applyAxisAngle(
@@ -127,7 +127,7 @@ class OculusHandPointerModel extends THREE.Object3D {
 
 	createPointer() {
 
-		var i, j;
+		let i, j;
 		const vertices = new Array(
 			( ( POINTER_RINGS + 1 ) * POINTER_SEGMENTS + 2 ) * 3
 		).fill( 0 );

examples/jsm/webxr/Text2D.js

@@ -19,7 +19,7 @@ function createText( message, height ) {
 
 	const texture = new THREE.Texture( canvas );
 	texture.needsUpdate = true;
-	//var spriteAlignment = new THREE.Vector2(0,0) ;
+
 	const material = new THREE.MeshBasicMaterial( {
 		color: 0xffffff,
 		side: THREE.DoubleSide,