Examples: Convert loaders to ES6 Part I. (#21612)

examples/js/loaders/AMFLoader.js

@@ -7,7 +7,7 @@
  * More information about the AMF format: http://amf.wikispaces.com
  *
  * Usage:
- *	var loader = new AMFLoader();
+ *	const loader = new AMFLoader();
  *	loader.load('/path/to/project.amf', function(objecttree) {
  *		scene.add(objecttree);
  *	});
@@ -18,18 +18,18 @@
  *
  */
 
-	var AMFLoader = function ( manager ) {
+	class AMFLoader extends THREE.Loader {
 
-		THREE.Loader.call( this, manager );
+		constructor( manager ) {
 
-	};
+			super( manager );
 
-	AMFLoader.prototype = Object.assign( Object.create( THREE.Loader.prototype ), {
-		constructor: AMFLoader,
-		load: function ( url, onLoad, onProgress, onError ) {
+		}
+
+		load( url, onLoad, onProgress, onError ) {
 
-			var scope = this;
-			var loader = new THREE.FileLoader( scope.manager );
+			const scope = this;
+			const loader = new THREE.FileLoader( scope.manager );
 			loader.setPath( scope.path );
 			loader.setResponseType( 'arraybuffer' );
 			loader.setRequestHeader( scope.requestHeader );
@@ -58,18 +58,19 @@
 
 			}, onProgress, onError );
 
-		},
-		parse: function ( data ) {
+		}
+
+		parse( data ) {
 
 			function loadDocument( data ) {
 
-				var view = new DataView( data );
-				var magic = String.fromCharCode( view.getUint8( 0 ), view.getUint8( 1 ) );
+				let view = new DataView( data );
+				const magic = String.fromCharCode( view.getUint8( 0 ), view.getUint8( 1 ) );
 
 				if ( magic === 'PK' ) {
 
-					var zip = null;
-					var file = null;
+					let zip = null;
+					let file = null;
 					console.log( 'THREE.AMFLoader: Loading Zip' );
 
 					try {
@@ -87,7 +88,7 @@
 
 					}
 
-					for ( var file in zip ) {
+					for ( file in zip ) {
 
 						if ( file.toLowerCase().substr( - 4 ) === '.amf' ) {
 
@@ -102,8 +103,8 @@
 
 				}
 
-				var fileText = THREE.LoaderUtils.decodeText( view );
-				var xmlData = new DOMParser().parseFromString( fileText, 'application/xml' );
+				const fileText = THREE.LoaderUtils.decodeText( view );
+				const xmlData = new DOMParser().parseFromString( fileText, 'application/xml' );
 
 				if ( xmlData.documentElement.nodeName.toLowerCase() !== 'amf' ) {
 
@@ -118,8 +119,8 @@
 
 			function loadDocumentScale( node ) {
 
-				var scale = 1.0;
-				var unit = 'millimeter';
+				let scale = 1.0;
+				let unit = 'millimeter';
 
 				if ( node.documentElement.attributes.unit !== undefined ) {
 
@@ -127,7 +128,7 @@
 
 				}
 
-				var scaleUnits = {
+				const scaleUnits = {
 					millimeter: 1.0,
 					inch: 25.4,
 					feet: 304.8,
@@ -148,19 +149,19 @@
 
 			function loadMaterials( node ) {
 
-				var matName = 'AMF Material';
-				var matId = node.attributes.id.textContent;
-				var color = {
+				let matName = 'AMF Material';
+				const matId = node.attributes.id.textContent;
+				let color = {
 					r: 1.0,
 					g: 1.0,
 					b: 1.0,
 					a: 1.0
 				};
-				var loadedMaterial = null;
+				let loadedMaterial = null;
 
-				for ( var i = 0; i < node.childNodes.length; i ++ ) {
+				for ( let i = 0; i < node.childNodes.length; i ++ ) {
 
-					var matChildEl = node.childNodes[ i ];
+					const matChildEl = node.childNodes[ i ];
 
 					if ( matChildEl.nodeName === 'metadata' && matChildEl.attributes.type !== undefined ) {
 
@@ -200,16 +201,16 @@
 
 			function loadColor( node ) {
 
-				var color = {
+				const color = {
 					r: 1.0,
 					g: 1.0,
 					b: 1.0,
 					a: 1.0
 				};
 
-				for ( var i = 0; i < node.childNodes.length; i ++ ) {
+				for ( let i = 0; i < node.childNodes.length; i ++ ) {
 
-					var matColor = node.childNodes[ i ];
+					const matColor = node.childNodes[ i ];
 
 					if ( matColor.nodeName === 'r' ) {
 
@@ -237,12 +238,12 @@
 
 			function loadMeshVolume( node ) {
 
-				var volume = {
+				const volume = {
 					name: '',
 					triangles: [],
 					materialid: null
 				};
-				var currVolumeNode = node.firstElementChild;
+				let currVolumeNode = node.firstElementChild;
 
 				if ( node.attributes.materialid !== undefined ) {
 
@@ -266,9 +267,9 @@
 
 					} else if ( currVolumeNode.nodeName === 'triangle' ) {
 
-						var v1 = currVolumeNode.getElementsByTagName( 'v1' )[ 0 ].textContent;
-						var v2 = currVolumeNode.getElementsByTagName( 'v2' )[ 0 ].textContent;
-						var v3 = currVolumeNode.getElementsByTagName( 'v3' )[ 0 ].textContent;
+						const v1 = currVolumeNode.getElementsByTagName( 'v1' )[ 0 ].textContent;
+						const v2 = currVolumeNode.getElementsByTagName( 'v2' )[ 0 ].textContent;
+						const v3 = currVolumeNode.getElementsByTagName( 'v3' )[ 0 ].textContent;
 						volume.triangles.push( v1, v2, v3 );
 
 					}
@@ -283,30 +284,30 @@
 
 			function loadMeshVertices( node ) {
 
-				var vertArray = [];
-				var normalArray = [];
-				var currVerticesNode = node.firstElementChild;
+				const vertArray = [];
+				const normalArray = [];
+				let currVerticesNode = node.firstElementChild;
 
 				while ( currVerticesNode ) {
 
 					if ( currVerticesNode.nodeName === 'vertex' ) {
 
-						var vNode = currVerticesNode.firstElementChild;
+						let vNode = currVerticesNode.firstElementChild;
 
 						while ( vNode ) {
 
 							if ( vNode.nodeName === 'coordinates' ) {
 
-								var x = vNode.getElementsByTagName( 'x' )[ 0 ].textContent;
-								var y = vNode.getElementsByTagName( 'y' )[ 0 ].textContent;
-								var z = vNode.getElementsByTagName( 'z' )[ 0 ].textContent;
+								const x = vNode.getElementsByTagName( 'x' )[ 0 ].textContent;
+								const y = vNode.getElementsByTagName( 'y' )[ 0 ].textContent;
+								const z = vNode.getElementsByTagName( 'z' )[ 0 ].textContent;
 								vertArray.push( x, y, z );
 
 							} else if ( vNode.nodeName === 'normal' ) {
 
-								var nx = vNode.getElementsByTagName( 'nx' )[ 0 ].textContent;
-								var ny = vNode.getElementsByTagName( 'ny' )[ 0 ].textContent;
-								var nz = vNode.getElementsByTagName( 'nz' )[ 0 ].textContent;
+								const nx = vNode.getElementsByTagName( 'nx' )[ 0 ].textContent;
+								const ny = vNode.getElementsByTagName( 'ny' )[ 0 ].textContent;
+								const nz = vNode.getElementsByTagName( 'nz' )[ 0 ].textContent;
 								normalArray.push( nx, ny, nz );
 
 							}
@@ -330,13 +331,13 @@
 
 			function loadObject( node ) {
 
-				var objId = node.attributes.id.textContent;
-				var loadedObject = {
+				const objId = node.attributes.id.textContent;
+				const loadedObject = {
 					name: 'amfobject',
 					meshes: []
 				};
-				var currColor = null;
-				var currObjNode = node.firstElementChild;
+				let currColor = null;
+				let currObjNode = node.firstElementChild;
 
 				while ( currObjNode ) {
 
@@ -358,8 +359,8 @@
 
 					} else if ( currObjNode.nodeName === 'mesh' ) {
 
-						var currMeshNode = currObjNode.firstElementChild;
-						var mesh = {
+						let currMeshNode = currObjNode.firstElementChild;
+						const mesh = {
 							vertices: [],
 							normals: [],
 							volumes: [],
@@ -370,7 +371,7 @@
 
 							if ( currMeshNode.nodeName === 'vertices' ) {
 
-								var loadedVertices = loadMeshVertices( currMeshNode );
+								const loadedVertices = loadMeshVertices( currMeshNode );
 								mesh.normals = mesh.normals.concat( loadedVertices.normals );
 								mesh.vertices = mesh.vertices.concat( loadedVertices.vertices );
 
@@ -399,18 +400,18 @@
 
 			}
 
-			var xmlData = loadDocument( data );
-			var amfName = '';
-			var amfAuthor = '';
-			var amfScale = loadDocumentScale( xmlData );
-			var amfMaterials = {};
-			var amfObjects = {};
-			var childNodes = xmlData.documentElement.childNodes;
-			var i, j;
+			const xmlData = loadDocument( data );
+			let amfName = '';
+			let amfAuthor = '';
+			const amfScale = loadDocumentScale( xmlData );
+			const amfMaterials = {};
+			const amfObjects = {};
+			const childNodes = xmlData.documentElement.childNodes;
+			let i, j;
 
 			for ( i = 0; i < childNodes.length; i ++ ) {
 
-				var child = childNodes[ i ];
+				const child = childNodes[ i ];
 
 				if ( child.nodeName === 'metadata' ) {
 
@@ -430,20 +431,20 @@
 
 				} else if ( child.nodeName === 'material' ) {
 
-					var loadedMaterial = loadMaterials( child );
+					const loadedMaterial = loadMaterials( child );
 					amfMaterials[ loadedMaterial.id ] = loadedMaterial.material;
 
 				} else if ( child.nodeName === 'object' ) {
 
-					var loadedObject = loadObject( child );
+					const loadedObject = loadObject( child );
 					amfObjects[ loadedObject.id ] = loadedObject.obj;
 
 				}
 
 			}
 
-			var sceneObject = new THREE.Group();
-			var defaultMaterial = new THREE.MeshPhongMaterial( {
+			const sceneObject = new THREE.Group();
+			const defaultMaterial = new THREE.MeshPhongMaterial( {
 				color: 0xaaaaff,
 				flatShading: true
 			} );
@@ -451,19 +452,19 @@
 			sceneObject.userData.author = amfAuthor;
 			sceneObject.userData.loader = 'AMF';
 
-			for ( var id in amfObjects ) {
+			for ( const id in amfObjects ) {
 
-				var part = amfObjects[ id ];
-				var meshes = part.meshes;
-				var newObject = new THREE.Group();
+				const part = amfObjects[ id ];
+				const meshes = part.meshes;
+				const newObject = new THREE.Group();
 				newObject.name = part.name || '';
 
 				for ( i = 0; i < meshes.length; i ++ ) {
 
-					var objDefaultMaterial = defaultMaterial;
-					var mesh = meshes[ i ];
-					var vertices = new THREE.Float32BufferAttribute( mesh.vertices, 3 );
-					var normals = null;
+					let objDefaultMaterial = defaultMaterial;
+					const mesh = meshes[ i ];
+					const vertices = new THREE.Float32BufferAttribute( mesh.vertices, 3 );
+					let normals = null;
 
 					if ( mesh.normals.length ) {
 
@@ -473,7 +474,7 @@
 
 					if ( mesh.color ) {
 
-						var color = mesh.color;
+						const color = mesh.color;
 						objDefaultMaterial = defaultMaterial.clone();
 						objDefaultMaterial.color = new THREE.Color( color.r, color.g, color.b );
 
@@ -486,13 +487,13 @@
 
 					}
 
-					var volumes = mesh.volumes;
+					const volumes = mesh.volumes;
 
 					for ( j = 0; j < volumes.length; j ++ ) {
 
-						var volume = volumes[ j ];
-						var newGeometry = new THREE.BufferGeometry();
-						var material = objDefaultMaterial;
+						const volume = volumes[ j ];
+						const newGeometry = new THREE.BufferGeometry();
+						let material = objDefaultMaterial;
 						newGeometry.setIndex( volume.triangles );
 						newGeometry.setAttribute( 'position', vertices.clone() );
 
@@ -522,7 +523,8 @@
 			return sceneObject;
 
 		}
-	} );
+
+	}
 
 	THREE.AMFLoader = AMFLoader;
 

examples/js/loaders/BVHLoader.js

@@ -7,20 +7,20 @@
  *
  */
 
-	var BVHLoader = function ( manager ) {
+	class BVHLoader extends THREE.Loader {
 
-		THREE.Loader.call( this, manager );
-		this.animateBonePositions = true;
-		this.animateBoneRotations = true;
+		constructor( manager ) {
 
-	};
+			super( manager );
+			this.animateBonePositions = true;
+			this.animateBoneRotations = true;
 
-	BVHLoader.prototype = Object.assign( Object.create( THREE.Loader.prototype ), {
-		constructor: BVHLoader,
-		load: function ( url, onLoad, onProgress, onError ) {
+		}
+
+		load( url, onLoad, onProgress, onError ) {
 
-			var scope = this;
-			var loader = new THREE.FileLoader( scope.manager );
+			const scope = this;
+			const loader = new THREE.FileLoader( scope.manager );
 			loader.setPath( scope.path );
 			loader.setRequestHeader( scope.requestHeader );
 			loader.setWithCredentials( scope.withCredentials );
@@ -48,8 +48,9 @@
 
 			}, onProgress, onError );
 
-		},
-		parse: function ( text ) {
+		}
+
+		parse( text ) {
 
 			/*
 			reads a string array (lines) from a BVH file
@@ -66,9 +67,9 @@
 
 				}
 
-				var list = []; // collects flat array of all bones
+				const list = []; // collects flat array of all bones
 
-				var root = readNode( lines, nextLine( lines ), list ); // read motion data
+				const root = readNode( lines, nextLine( lines ), list ); // read motion data
 
 				if ( nextLine( lines ) !== 'MOTION' ) {
 
@@ -77,8 +78,8 @@
 				} // number of frames
 
 
-				var tokens = nextLine( lines ).split( /[\s]+/ );
-				var numFrames = parseInt( tokens[ 1 ] );
+				let tokens = nextLine( lines ).split( /[\s]+/ );
+				const numFrames = parseInt( tokens[ 1 ] );
 
 				if ( isNaN( numFrames ) ) {
 
@@ -88,7 +89,7 @@
 
 
 				tokens = nextLine( lines ).split( /[\s]+/ );
-				var frameTime = parseFloat( tokens[ 2 ] );
+				const frameTime = parseFloat( tokens[ 2 ] );
 
 				if ( isNaN( frameTime ) ) {
 
@@ -97,7 +98,7 @@
 				} // read frame data line by line
 
 
-				for ( var i = 0; i < numFrames; i ++ ) {
+				for ( let i = 0; i < numFrames; i ++ ) {
 
 					tokens = nextLine( lines ).split( /[\s]+/ );
 					readFrameData( tokens, i * frameTime, root );
@@ -123,18 +124,18 @@
 				// end sites have no motion data
 				if ( bone.type === 'ENDSITE' ) return; // add keyframe
 
-				var keyframe = {
+				const keyframe = {
 					time: frameTime,
 					position: new THREE.Vector3(),
 					rotation: new THREE.Quaternion()
 				};
 				bone.frames.push( keyframe );
-				var quat = new THREE.Quaternion();
-				var vx = new THREE.Vector3( 1, 0, 0 );
-				var vy = new THREE.Vector3( 0, 1, 0 );
-				var vz = new THREE.Vector3( 0, 0, 1 ); // parse values for each channel in node
+				const quat = new THREE.Quaternion();
+				const vx = new THREE.Vector3( 1, 0, 0 );
+				const vy = new THREE.Vector3( 0, 1, 0 );
+				const vz = new THREE.Vector3( 0, 0, 1 ); // parse values for each channel in node
 
-				for ( var i = 0; i < bone.channels.length; i ++ ) {
+				for ( let i = 0; i < bone.channels.length; i ++ ) {
 
 					switch ( bone.channels[ i ] ) {
 
@@ -173,7 +174,7 @@
 				} // parse child nodes
 
 
-				for ( var i = 0; i < bone.children.length; i ++ ) {
+				for ( let i = 0; i < bone.children.length; i ++ ) {
 
 					readFrameData( data, frameTime, bone.children[ i ] );
 
@@ -191,14 +192,14 @@
 
 			function readNode( lines, firstline, list ) {
 
-				var node = {
+				const node = {
 					name: '',
 					type: '',
 					frames: []
 				};
 				list.push( node ); // parse node type and name
 
-				var tokens = firstline.split( /[\s]+/ );
+				let tokens = firstline.split( /[\s]+/ );
 
 				if ( tokens[ 0 ].toUpperCase() === 'END' && tokens[ 1 ].toUpperCase() === 'SITE' ) {
 
@@ -233,7 +234,7 @@
 
 				}
 
-				var offset = new THREE.Vector3( parseFloat( tokens[ 1 ] ), parseFloat( tokens[ 2 ] ), parseFloat( tokens[ 3 ] ) );
+				const offset = new THREE.Vector3( parseFloat( tokens[ 1 ] ), parseFloat( tokens[ 2 ] ), parseFloat( tokens[ 3 ] ) );
 
 				if ( isNaN( offset.x ) || isNaN( offset.y ) || isNaN( offset.z ) ) {
 
@@ -253,7 +254,7 @@
 
 					}
 
-					var numChannels = parseInt( tokens[ 1 ] );
+					const numChannels = parseInt( tokens[ 1 ] );
 					node.channels = tokens.splice( 2, numChannels );
 					node.children = [];
 
@@ -262,7 +263,7 @@
 
 				while ( true ) {
 
-					var line = nextLine( lines );
+					const line = nextLine( lines );
 
 					if ( line === '}' ) {
 
@@ -287,14 +288,14 @@
 
 			function toTHREEBone( source, list ) {
 
-				var bone = new THREE.Bone();
+				const bone = new THREE.Bone();
 				list.push( bone );
 				bone.position.add( source.offset );
 				bone.name = source.name;
 
 				if ( source.type !== 'ENDSITE' ) {
 
-					for ( var i = 0; i < source.children.length; i ++ ) {
+					for ( let i = 0; i < source.children.length; i ++ ) {
 
 						bone.add( toTHREEBone( source.children[ i ], list ) );
 
@@ -314,20 +315,20 @@
 
 			function toTHREEAnimation( bones ) {
 
-				var tracks = []; // create a position and quaternion animation track for each node
+				const tracks = []; // create a position and quaternion animation track for each node
 
-				for ( var i = 0; i < bones.length; i ++ ) {
+				for ( let i = 0; i < bones.length; i ++ ) {
 
-					var bone = bones[ i ];
+					const bone = bones[ i ];
 					if ( bone.type === 'ENDSITE' ) continue; // track data
 
-					var times = [];
-					var positions = [];
-					var rotations = [];
+					const times = [];
+					const positions = [];
+					const rotations = [];
 
-					for ( var j = 0; j < bone.frames.length; j ++ ) {
+					for ( let j = 0; j < bone.frames.length; j ++ ) {
 
-						var frame = bone.frames[ j ];
+						const frame = bone.frames[ j ];
 						times.push( frame.time ); // the animation system animates the position property,
 						// so we have to add the joint offset to all values
 
@@ -365,7 +366,7 @@
 
 			function nextLine( lines ) {
 
-				var line; // skip empty lines
+				let line; // skip empty lines
 
 				while ( ( line = lines.shift().trim() ).length === 0 ) {}
 
@@ -373,19 +374,20 @@
 
 			}
 
-			var scope = this;
-			var lines = text.split( /[\r\n]+/g );
-			var bones = readBvh( lines );
-			var threeBones = [];
+			const scope = this;
+			const lines = text.split( /[\r\n]+/g );
+			const bones = readBvh( lines );
+			const threeBones = [];
 			toTHREEBone( bones[ 0 ], threeBones );
-			var threeClip = toTHREEAnimation( bones );
+			const threeClip = toTHREEAnimation( bones );
 			return {
 				skeleton: new THREE.Skeleton( threeBones ),
 				clip: threeClip
 			};
 
 		}
-	} );
+
+	}
 
 	THREE.BVHLoader = BVHLoader;
 

examples/js/loaders/BasisTextureLoader.js

@@ -13,36 +13,39 @@
  * to the main thread.
  */
 
-	var BasisTextureLoader = function ( manager ) {
-
-		THREE.Loader.call( this, manager );
-		this.transcoderPath = '';
-		this.transcoderBinary = null;
-		this.transcoderPending = null;
-		this.workerLimit = 4;
-		this.workerPool = [];
-		this.workerNextTaskID = 1;
-		this.workerSourceURL = '';
-		this.workerConfig = null;
+	const _taskCache = new WeakMap();
 
-	};
+	class BasisTextureLoader extends THREE.Loader {
+
+		constructor( manager ) {
+
+			super( manager );
+			this.transcoderPath = '';
+			this.transcoderBinary = null;
+			this.transcoderPending = null;
+			this.workerLimit = 4;
+			this.workerPool = [];
+			this.workerNextTaskID = 1;
+			this.workerSourceURL = '';
+			this.workerConfig = null;
+
+		}
 
-	BasisTextureLoader.taskCache = new WeakMap();
-	BasisTextureLoader.prototype = Object.assign( Object.create( THREE.Loader.prototype ), {
-		constructor: BasisTextureLoader,
-		setTranscoderPath: function ( path ) {
+		setTranscoderPath( path ) {
 
 			this.transcoderPath = path;
 			return this;
 
-		},
-		setWorkerLimit: function ( workerLimit ) {
+		}
+
+		setWorkerLimit( workerLimit ) {
 
 			this.workerLimit = workerLimit;
 			return this;
 
-		},
-		detectSupport: function ( renderer ) {
+		}
+
+		detectSupport( renderer ) {
 
 			this.workerConfig = {
 				astcSupported: renderer.extensions.has( 'WEBGL_compressed_texture_astc' ),
@@ -54,20 +57,22 @@
 			};
 			return this;
 
-		},
-		load: function ( url, onLoad, onProgress, onError ) {
+		}
+
+		load( url, onLoad, onProgress, onError ) {
 
-			var loader = new THREE.FileLoader( this.manager );
+			const loader = new THREE.FileLoader( this.manager );
 			loader.setResponseType( 'arraybuffer' );
 			loader.setWithCredentials( this.withCredentials );
-			var texture = new THREE.CompressedTexture();
+			const texture = new THREE.CompressedTexture();
 			loader.load( url, buffer => {
 
 				// Check for an existing task using this buffer. A transferred buffer cannot be transferred
 				// again from this thread.
-				if ( BasisTextureLoader.taskCache.has( buffer ) ) {
+				if ( _taskCache.has( buffer ) ) {
+
+					const cachedTask = _taskCache.get( buffer );
 
-					var cachedTask = BasisTextureLoader.taskCache.get( buffer );
 					return cachedTask.promise.then( onLoad ).catch( onError );
 
 				}
@@ -83,17 +88,18 @@
 			}, onProgress, onError );
 			return texture;
 
-		},
-
+		}
 		/** Low-level transcoding API, exposed for use by KTX2Loader. */
-		parseInternalAsync: function ( options ) {
 
-			var {
+
+		parseInternalAsync( options ) {
+
+			const {
 				levels
 			} = options;
-			var buffers = new Set();
+			const buffers = new Set();
 
-			for ( var i = 0; i < levels.length; i ++ ) {
+			for ( let i = 0; i < levels.length; i ++ ) {
 
 				buffers.add( levels[ i ].data.buffer );
 
@@ -103,27 +109,28 @@
 				lowLevel: true
 			} );
 
-		},
-
+		}
 		/**
 	 * @param {ArrayBuffer[]} buffers
 	 * @param {object?} config
 	 * @return {Promise<CompressedTexture>}
 	 */
-		_createTexture: function ( buffers, config ) {
 
-			var worker;
-			var taskID;
-			var taskConfig = config || {};
-			var taskCost = 0;
 
-			for ( var i = 0; i < buffers.length; i ++ ) {
+		_createTexture( buffers, config = {} ) {
+
+			let worker;
+			let taskID;
+			const taskConfig = config;
+			let taskCost = 0;
+
+			for ( let i = 0; i < buffers.length; i ++ ) {
 
 				taskCost += buffers[ i ].byteLength;
 
 			}
 
-			var texturePending = this._allocateWorker( taskCost ).then( _worker => {
+			const texturePending = this._allocateWorker( taskCost ).then( _worker => {
 
 				worker = _worker;
 				taskID = this.workerNextTaskID ++;
@@ -144,13 +151,13 @@
 
 			} ).then( message => {
 
-				var {
+				const {
 					mipmaps,
 					width,
 					height,
 					format
 				} = message;
-				var texture = new THREE.CompressedTexture( mipmaps, width, height, format, THREE.UnsignedByteType );
+				const texture = new THREE.CompressedTexture( mipmaps, width, height, format, THREE.UnsignedByteType );
 				texture.minFilter = mipmaps.length === 1 ? THREE.LinearFilter : THREE.LinearMipmapLinearFilter;
 				texture.magFilter = THREE.LinearFilter;
 				texture.generateMipmaps = false;
@@ -171,39 +178,41 @@
 
 			} ); // Cache the task result.
 
-			BasisTextureLoader.taskCache.set( buffers[ 0 ], {
+			_taskCache.set( buffers[ 0 ], {
 				promise: texturePending
 			} );
+
 			return texturePending;
 
-		},
-		_initTranscoder: function () {
+		}
+
+		_initTranscoder() {
 
 			if ( ! this.transcoderPending ) {
 
 				// Load transcoder wrapper.
-				var jsLoader = new THREE.FileLoader( this.manager );
+				const jsLoader = new THREE.FileLoader( this.manager );
 				jsLoader.setPath( this.transcoderPath );
 				jsLoader.setWithCredentials( this.withCredentials );
-				var jsContent = new Promise( ( resolve, reject ) => {
+				const jsContent = new Promise( ( resolve, reject ) => {
 
 					jsLoader.load( 'basis_transcoder.js', resolve, undefined, reject );
 
 				} ); // Load transcoder WASM binary.
 
-				var binaryLoader = new THREE.FileLoader( this.manager );
+				const binaryLoader = new THREE.FileLoader( this.manager );
 				binaryLoader.setPath( this.transcoderPath );
 				binaryLoader.setResponseType( 'arraybuffer' );
 				binaryLoader.setWithCredentials( this.withCredentials );
-				var binaryContent = new Promise( ( resolve, reject ) => {
+				const binaryContent = new Promise( ( resolve, reject ) => {
 
 					binaryLoader.load( 'basis_transcoder.wasm', resolve, undefined, reject );
 
 				} );
 				this.transcoderPending = Promise.all( [ jsContent, binaryContent ] ).then( ( [ jsContent, binaryContent ] ) => {
 
-					var fn = BasisTextureLoader.BasisWorker.toString();
-					var body = [ '/* constants */', 'var _EngineFormat = ' + JSON.stringify( BasisTextureLoader.EngineFormat ), 'var _TranscoderFormat = ' + JSON.stringify( BasisTextureLoader.TranscoderFormat ), 'var _BasisFormat = ' + JSON.stringify( BasisTextureLoader.BasisFormat ), '/* basis_transcoder.js */', jsContent, '/* worker */', fn.substring( fn.indexOf( '{' ) + 1, fn.lastIndexOf( '}' ) ) ].join( '\n' );
+					const fn = BasisTextureLoader.BasisWorker.toString();
+					const body = [ '/* constants */', 'let _EngineFormat = ' + JSON.stringify( BasisTextureLoader.EngineFormat ), 'let _TranscoderFormat = ' + JSON.stringify( BasisTextureLoader.TranscoderFormat ), 'let _BasisFormat = ' + JSON.stringify( BasisTextureLoader.BasisFormat ), '/* basis_transcoder.js */', jsContent, '/* worker */', fn.substring( fn.indexOf( '{' ) + 1, fn.lastIndexOf( '}' ) ) ].join( '\n' );
 					this.workerSourceURL = URL.createObjectURL( new Blob( [ body ] ) );
 					this.transcoderBinary = binaryContent;
 
@@ -213,14 +222,15 @@
 
 			return this.transcoderPending;
 
-		},
-		_allocateWorker: function ( taskCost ) {
+		}
+
+		_allocateWorker( taskCost ) {
 
 			return this._initTranscoder().then( () => {
 
 				if ( this.workerPool.length < this.workerLimit ) {
 
-					var worker = new Worker( this.workerSourceURL );
+					const worker = new Worker( this.workerSourceURL );
 					worker._callbacks = {};
 					worker._taskLoad = 0;
 					worker.postMessage( {
@@ -231,7 +241,7 @@
 
 					worker.onmessage = function ( e ) {
 
-						var message = e.data;
+						const message = e.data;
 
 						switch ( message.type ) {
 
@@ -264,16 +274,17 @@
 
 				}
 
-				var worker = this.workerPool[ this.workerPool.length - 1 ];
+				const worker = this.workerPool[ this.workerPool.length - 1 ];
 				worker._taskLoad += taskCost;
 				return worker;
 
 			} );
 
-		},
-		dispose: function () {
+		}
 
-			for ( var i = 0; i < this.workerPool.length; i ++ ) {
+		dispose() {
+
+			for ( let i = 0; i < this.workerPool.length; i ++ ) {
 
 				this.workerPool[ i ].terminate();
 
@@ -283,9 +294,11 @@
 			return this;
 
 		}
-	} );
+
+	}
 	/* CONSTANTS */
 
+
 	BasisTextureLoader.BasisFormat = {
 		ETC1S: 0,
 		UASTC_4x4: 1
@@ -325,18 +338,18 @@
 
 	BasisTextureLoader.BasisWorker = function () {
 
-		var config;
-		var transcoderPending;
-		var BasisModule;
-		var EngineFormat = _EngineFormat; // eslint-disable-line no-undef
+		let config;
+		let transcoderPending;
+		let BasisModule;
+		const EngineFormat = _EngineFormat; // eslint-disable-line no-undef
 
-		var TranscoderFormat = _TranscoderFormat; // eslint-disable-line no-undef
+		const TranscoderFormat = _TranscoderFormat; // eslint-disable-line no-undef
 
-		var BasisFormat = _BasisFormat; // eslint-disable-line no-undef
+		const BasisFormat = _BasisFormat; // eslint-disable-line no-undef
 
 		onmessage = function ( e ) {
 
-			var message = e.data;
+			const message = e.data;
 
 			switch ( message.type ) {
 
@@ -350,16 +363,16 @@
 
 						try {
 
-							var {
+							const {
 								width,
 								height,
 								hasAlpha,
 								mipmaps,
 								format
 							} = message.taskConfig.lowLevel ? transcodeLowLevel( message.taskConfig ) : transcode( message.buffers[ 0 ] );
-							var buffers = [];
+							const buffers = [];
 
-							for ( var i = 0; i < mipmaps.length; ++ i ) {
+							for ( let i = 0; i < mipmaps.length; ++ i ) {
 
 								buffers.push( mipmaps[ i ].data.buffer );
 
@@ -413,24 +426,24 @@
 
 		function transcodeLowLevel( taskConfig ) {
 
-			var {
+			const {
 				basisFormat,
 				width,
 				height,
 				hasAlpha
 			} = taskConfig;
-			var {
+			const {
 				transcoderFormat,
 				engineFormat
 			} = getTranscoderFormat( basisFormat, width, height, hasAlpha );
-			var blockByteLength = BasisModule.getBytesPerBlockOrPixel( transcoderFormat );
+			const blockByteLength = BasisModule.getBytesPerBlockOrPixel( transcoderFormat );
 			assert( BasisModule.isFormatSupported( transcoderFormat ), 'THREE.BasisTextureLoader: Unsupported format.' );
-			var mipmaps = [];
+			const mipmaps = [];
 
 			if ( basisFormat === BasisFormat.ETC1S ) {
 
-				var transcoder = new BasisModule.LowLevelETC1SImageTranscoder();
-				var {
+				const transcoder = new BasisModule.LowLevelETC1SImageTranscoder();
+				const {
 					endpointCount,
 					endpointsData,
 					selectorCount,
@@ -440,18 +453,18 @@
 
 				try {
 
-					var ok;
+					let ok;
 					ok = transcoder.decodePalettes( endpointCount, endpointsData, selectorCount, selectorsData );
 					assert( ok, 'THREE.BasisTextureLoader: decodePalettes() failed.' );
 					ok = transcoder.decodeTables( tablesData );
 					assert( ok, 'THREE.BasisTextureLoader: decodeTables() failed.' );
 
-					for ( var i = 0; i < taskConfig.levels.length; i ++ ) {
+					for ( let i = 0; i < taskConfig.levels.length; i ++ ) {
 
-						var level = taskConfig.levels[ i ];
-						var imageDesc = taskConfig.globalData.imageDescs[ i ];
-						var dstByteLength = getTranscodedImageByteLength( transcoderFormat, level.width, level.height );
-						var dst = new Uint8Array( dstByteLength );
+						const level = taskConfig.levels[ i ];
+						const imageDesc = taskConfig.globalData.imageDescs[ i ];
+						const dstByteLength = getTranscodedImageByteLength( transcoderFormat, level.width, level.height );
+						const dst = new Uint8Array( dstByteLength );
 						ok = transcoder.transcodeImage( transcoderFormat, dst, dstByteLength / blockByteLength, level.data, getWidthInBlocks( transcoderFormat, level.width ), getHeightInBlocks( transcoderFormat, level.height ), level.width, level.height, level.index, imageDesc.rgbSliceByteOffset, imageDesc.rgbSliceByteLength, imageDesc.alphaSliceByteOffset, imageDesc.alphaSliceByteLength, imageDesc.imageFlags, hasAlpha, false, 0, 0 );
 						assert( ok, 'THREE.BasisTextureLoader: transcodeImage() failed for level ' + level.index + '.' );
 						mipmaps.push( {
@@ -470,12 +483,12 @@
 
 			} else {
 
-				for ( var i = 0; i < taskConfig.levels.length; i ++ ) {
+				for ( let i = 0; i < taskConfig.levels.length; i ++ ) {
 
-					var level = taskConfig.levels[ i ];
-					var dstByteLength = getTranscodedImageByteLength( transcoderFormat, level.width, level.height );
-					var dst = new Uint8Array( dstByteLength );
-					var ok = BasisModule.transcodeUASTCImage( transcoderFormat, dst, dstByteLength / blockByteLength, level.data, getWidthInBlocks( transcoderFormat, level.width ), getHeightInBlocks( transcoderFormat, level.height ), level.width, level.height, level.index, 0, level.data.byteLength, 0, hasAlpha, false, 0, 0, - 1, - 1 );
+					const level = taskConfig.levels[ i ];
+					const dstByteLength = getTranscodedImageByteLength( transcoderFormat, level.width, level.height );
+					const dst = new Uint8Array( dstByteLength );
+					const ok = BasisModule.transcodeUASTCImage( transcoderFormat, dst, dstByteLength / blockByteLength, level.data, getWidthInBlocks( transcoderFormat, level.width ), getHeightInBlocks( transcoderFormat, level.height ), level.width, level.height, level.index, 0, level.data.byteLength, 0, hasAlpha, false, 0, 0, - 1, - 1 );
 					assert( ok, 'THREE.BasisTextureLoader: transcodeUASTCImage() failed for level ' + level.index + '.' );
 					mipmaps.push( {
 						data: dst,
@@ -499,12 +512,12 @@
 
 		function transcode( buffer ) {
 
-			var basisFile = new BasisModule.BasisFile( new Uint8Array( buffer ) );
-			var basisFormat = basisFile.isUASTC() ? BasisFormat.UASTC_4x4 : BasisFormat.ETC1S;
-			var width = basisFile.getImageWidth( 0, 0 );
-			var height = basisFile.getImageHeight( 0, 0 );
-			var levels = basisFile.getNumLevels( 0 );
-			var hasAlpha = basisFile.getHasAlpha();
+			const basisFile = new BasisModule.BasisFile( new Uint8Array( buffer ) );
+			const basisFormat = basisFile.isUASTC() ? BasisFormat.UASTC_4x4 : BasisFormat.ETC1S;
+			const width = basisFile.getImageWidth( 0, 0 );
+			const height = basisFile.getImageHeight( 0, 0 );
+			const levels = basisFile.getNumLevels( 0 );
+			const hasAlpha = basisFile.getHasAlpha();
 
 			function cleanup() {
 
@@ -513,7 +526,7 @@
 
 			}
 
-			var {
+			const {
 				transcoderFormat,
 				engineFormat
 			} = getTranscoderFormat( basisFormat, width, height, hasAlpha );
@@ -532,14 +545,14 @@
 
 			}
 
-			var mipmaps = [];
+			const mipmaps = [];
 
-			for ( var mip = 0; mip < levels; mip ++ ) {
+			for ( let mip = 0; mip < levels; mip ++ ) {
 
-				var mipWidth = basisFile.getImageWidth( 0, mip );
-				var mipHeight = basisFile.getImageHeight( 0, mip );
-				var dst = new Uint8Array( basisFile.getImageTranscodedSizeInBytes( 0, mip, transcoderFormat ) );
-				var status = basisFile.transcodeImage( dst, 0, mip, transcoderFormat, 0, hasAlpha );
+				const mipWidth = basisFile.getImageWidth( 0, mip );
+				const mipHeight = basisFile.getImageHeight( 0, mip );
+				const dst = new Uint8Array( basisFile.getImageTranscodedSizeInBytes( 0, mip, transcoderFormat ) );
+				const status = basisFile.transcodeImage( dst, 0, mip, transcoderFormat, 0, hasAlpha );
 
 				if ( ! status ) {
 
@@ -575,7 +588,7 @@
 		// chooses RGBA32 only as a last resort and does not expose that option to the caller.
 
 
-		var FORMAT_OPTIONS = [ {
+		const FORMAT_OPTIONS = [ {
 			if: 'astcSupported',
 			basisFormat: [ BasisFormat.UASTC_4x4 ],
 			transcoderFormat: [ TranscoderFormat.ASTC_4x4, TranscoderFormat.ASTC_4x4 ],
@@ -624,12 +637,12 @@
 			priorityUASTC: 6,
 			needsPowerOfTwo: true
 		} ];
-		var ETC1S_OPTIONS = FORMAT_OPTIONS.sort( function ( a, b ) {
+		const ETC1S_OPTIONS = FORMAT_OPTIONS.sort( function ( a, b ) {
 
 			return a.priorityETC1S - b.priorityETC1S;
 
 		} );
-		var UASTC_OPTIONS = FORMAT_OPTIONS.sort( function ( a, b ) {
+		const UASTC_OPTIONS = FORMAT_OPTIONS.sort( function ( a, b ) {
 
 			return a.priorityUASTC - b.priorityUASTC;
 
@@ -637,13 +650,13 @@
 
 		function getTranscoderFormat( basisFormat, width, height, hasAlpha ) {
 
-			var transcoderFormat;
-			var engineFormat;
-			var options = basisFormat === BasisFormat.ETC1S ? ETC1S_OPTIONS : UASTC_OPTIONS;
+			let transcoderFormat;
+			let engineFormat;
+			const options = basisFormat === BasisFormat.ETC1S ? ETC1S_OPTIONS : UASTC_OPTIONS;
 
-			for ( var i = 0; i < options.length; i ++ ) {
+			for ( let i = 0; i < options.length; i ++ ) {
 
-				var opt = options[ i ];
+				const opt = options[ i ];
 				if ( ! config[ opt.if ] ) continue;
 				if ( ! opt.basisFormat.includes( basisFormat ) ) continue;
 				if ( opt.needsPowerOfTwo && ! ( isPowerOfTwo( width ) && isPowerOfTwo( height ) ) ) continue;
@@ -686,7 +699,7 @@
 
 		function getTranscodedImageByteLength( transcoderFormat, width, height ) {
 
-			var blockByteLength = BasisModule.getBytesPerBlockOrPixel( transcoderFormat );
+			const blockByteLength = BasisModule.getBytesPerBlockOrPixel( transcoderFormat );
 
 			if ( BasisModule.formatIsUncompressed( transcoderFormat ) ) {
 
@@ -698,8 +711,8 @@
 
 				// GL requires extra padding for very small textures:
 				// https://www.khronos.org/registry/OpenGL/extensions/IMG/IMG_texture_compression_pvrtc.txt
-				var paddedWidth = width + 3 & ~ 3;
-				var paddedHeight = height + 3 & ~ 3;
+				const paddedWidth = width + 3 & ~ 3;
+				const paddedHeight = height + 3 & ~ 3;
 				return ( Math.max( 8, paddedWidth ) * Math.max( 8, paddedHeight ) * 4 + 7 ) / 8;
 
 			}

examples/js/loaders/DDSLoader.js

 ( function () {
 
-	var DDSLoader = function ( manager ) {
+	class DDSLoader extends THREE.CompressedTextureLoader {
 
-		THREE.CompressedTextureLoader.call( this, manager );
+		constructor( manager ) {
 
-	};
+			super( manager );
 
-	DDSLoader.prototype = Object.assign( Object.create( THREE.CompressedTextureLoader.prototype ), {
-		constructor: DDSLoader,
-		parse: function ( buffer, loadMipmaps ) {
+		}
+
+		parse( buffer, loadMipmaps ) {
 
-			var dds = {
+			const dds = {
 				mipmaps: [],
 				width: 0,
 				height: 0,
@@ -21,31 +21,31 @@
 			// All values and structures referenced from:
 			// http://msdn.microsoft.com/en-us/library/bb943991.aspx/
 
-			var DDS_MAGIC = 0x20534444; // var DDSD_CAPS = 0x1;
-			// var DDSD_HEIGHT = 0x2;
-			// var DDSD_WIDTH = 0x4;
-			// var DDSD_PITCH = 0x8;
-			// var DDSD_PIXELFORMAT = 0x1000;
-
-			var DDSD_MIPMAPCOUNT = 0x20000; // var DDSD_LINEARSIZE = 0x80000;
-			// var DDSD_DEPTH = 0x800000;
-			// var DDSCAPS_COMPLEX = 0x8;
-			// var DDSCAPS_MIPMAP = 0x400000;
-			// var DDSCAPS_TEXTURE = 0x1000;
-
-			var DDSCAPS2_CUBEMAP = 0x200;
-			var DDSCAPS2_CUBEMAP_POSITIVEX = 0x400;
-			var DDSCAPS2_CUBEMAP_NEGATIVEX = 0x800;
-			var DDSCAPS2_CUBEMAP_POSITIVEY = 0x1000;
-			var DDSCAPS2_CUBEMAP_NEGATIVEY = 0x2000;
-			var DDSCAPS2_CUBEMAP_POSITIVEZ = 0x4000;
-			var DDSCAPS2_CUBEMAP_NEGATIVEZ = 0x8000; // var DDSCAPS2_VOLUME = 0x200000;
-			// var DDPF_ALPHAPIXELS = 0x1;
-			// var DDPF_ALPHA = 0x2;
-
-			var DDPF_FOURCC = 0x4; // var DDPF_RGB = 0x40;
-			// var DDPF_YUV = 0x200;
-			// var DDPF_LUMINANCE = 0x20000;
+			const DDS_MAGIC = 0x20534444; // let DDSD_CAPS = 0x1;
+			// let DDSD_HEIGHT = 0x2;
+			// let DDSD_WIDTH = 0x4;
+			// let DDSD_PITCH = 0x8;
+			// let DDSD_PIXELFORMAT = 0x1000;
+
+			const DDSD_MIPMAPCOUNT = 0x20000; // let DDSD_LINEARSIZE = 0x80000;
+			// let DDSD_DEPTH = 0x800000;
+			// let DDSCAPS_COMPLEX = 0x8;
+			// let DDSCAPS_MIPMAP = 0x400000;
+			// let DDSCAPS_TEXTURE = 0x1000;
+
+			const DDSCAPS2_CUBEMAP = 0x200;
+			const DDSCAPS2_CUBEMAP_POSITIVEX = 0x400;
+			const DDSCAPS2_CUBEMAP_NEGATIVEX = 0x800;
+			const DDSCAPS2_CUBEMAP_POSITIVEY = 0x1000;
+			const DDSCAPS2_CUBEMAP_NEGATIVEY = 0x2000;
+			const DDSCAPS2_CUBEMAP_POSITIVEZ = 0x4000;
+			const DDSCAPS2_CUBEMAP_NEGATIVEZ = 0x8000; // let DDSCAPS2_VOLUME = 0x200000;
+			// let DDPF_ALPHAPIXELS = 0x1;
+			// let DDPF_ALPHA = 0x2;
+
+			const DDPF_FOURCC = 0x4; // let DDPF_RGB = 0x40;
+			// let DDPF_YUV = 0x200;
+			// let DDPF_LUMINANCE = 0x20000;
 
 			function fourCCToInt32( value ) {
 
@@ -61,23 +61,23 @@
 
 			function loadARGBMip( buffer, dataOffset, width, height ) {
 
-				var dataLength = width * height * 4;
-				var srcBuffer = new Uint8Array( buffer, dataOffset, dataLength );
-				var byteArray = new Uint8Array( dataLength );
-				var dst = 0;
-				var src = 0;
+				const dataLength = width * height * 4;
+				const srcBuffer = new Uint8Array( buffer, dataOffset, dataLength );
+				const byteArray = new Uint8Array( dataLength );
+				let dst = 0;
+				let src = 0;
 
-				for ( var y = 0; y < height; y ++ ) {
+				for ( let y = 0; y < height; y ++ ) {
 
-					for ( var x = 0; x < width; x ++ ) {
+					for ( let x = 0; x < width; x ++ ) {
 
-						var b = srcBuffer[ src ];
+						const b = srcBuffer[ src ];
 						src ++;
-						var g = srcBuffer[ src ];
+						const g = srcBuffer[ src ];
 						src ++;
-						var r = srcBuffer[ src ];
+						const r = srcBuffer[ src ];
 						src ++;
-						var a = srcBuffer[ src ];
+						const a = srcBuffer[ src ];
 						src ++;
 						byteArray[ dst ] = r;
 						dst ++; //r
@@ -99,32 +99,32 @@
 
 			}
 
-			var FOURCC_DXT1 = fourCCToInt32( 'DXT1' );
-			var FOURCC_DXT3 = fourCCToInt32( 'DXT3' );
-			var FOURCC_DXT5 = fourCCToInt32( 'DXT5' );
-			var FOURCC_ETC1 = fourCCToInt32( 'ETC1' );
-			var headerLengthInt = 31; // The header length in 32 bit ints
+			const FOURCC_DXT1 = fourCCToInt32( 'DXT1' );
+			const FOURCC_DXT3 = fourCCToInt32( 'DXT3' );
+			const FOURCC_DXT5 = fourCCToInt32( 'DXT5' );
+			const FOURCC_ETC1 = fourCCToInt32( 'ETC1' );
+			const headerLengthInt = 31; // The header length in 32 bit ints
 			// Offsets into the header array
 
-			var off_magic = 0;
-			var off_size = 1;
-			var off_flags = 2;
-			var off_height = 3;
-			var off_width = 4;
-			var off_mipmapCount = 7;
-			var off_pfFlags = 20;
-			var off_pfFourCC = 21;
-			var off_RGBBitCount = 22;
-			var off_RBitMask = 23;
-			var off_GBitMask = 24;
-			var off_BBitMask = 25;
-			var off_ABitMask = 26; // var off_caps = 27;
-
-			var off_caps2 = 28; // var off_caps3 = 29;
-			// var off_caps4 = 30;
+			const off_magic = 0;
+			const off_size = 1;
+			const off_flags = 2;
+			const off_height = 3;
+			const off_width = 4;
+			const off_mipmapCount = 7;
+			const off_pfFlags = 20;
+			const off_pfFourCC = 21;
+			const off_RGBBitCount = 22;
+			const off_RBitMask = 23;
+			const off_GBitMask = 24;
+			const off_BBitMask = 25;
+			const off_ABitMask = 26; // let off_caps = 27;
+
+			const off_caps2 = 28; // let off_caps3 = 29;
+			// let off_caps4 = 30;
 			// Parse header
 
-			var header = new Int32Array( buffer, 0, headerLengthInt );
+			const header = new Int32Array( buffer, 0, headerLengthInt );
 
 			if ( header[ off_magic ] !== DDS_MAGIC ) {
 
@@ -140,9 +140,9 @@
 
 			}
 
-			var blockBytes;
-			var fourCC = header[ off_pfFourCC ];
-			var isRGBAUncompressed = false;
+			let blockBytes;
+			const fourCC = header[ off_pfFourCC ];
+			let isRGBAUncompressed = false;
 
 			switch ( fourCC ) {
 
@@ -190,7 +190,7 @@
 
 			}
 
-			var caps2 = header[ off_caps2 ];
+			const caps2 = header[ off_caps2 ];
 			dds.isCubemap = caps2 & DDSCAPS2_CUBEMAP ? true : false;
 
 			if ( dds.isCubemap && ( ! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEX ) || ! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEX ) || ! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEY ) || ! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEY ) || ! ( caps2 & DDSCAPS2_CUBEMAP_POSITIVEZ ) || ! ( caps2 & DDSCAPS2_CUBEMAP_NEGATIVEZ ) ) ) {
@@ -202,30 +202,32 @@
 
 			dds.width = header[ off_width ];
 			dds.height = header[ off_height ];
-			var dataOffset = header[ off_size ] + 4; // Extract mipmaps buffers
+			let dataOffset = header[ off_size ] + 4; // Extract mipmaps buffers
 
-			var faces = dds.isCubemap ? 6 : 1;
+			const faces = dds.isCubemap ? 6 : 1;
 
-			for ( var face = 0; face < faces; face ++ ) {
+			for ( let face = 0; face < faces; face ++ ) {
 
-				var width = dds.width;
-				var height = dds.height;
+				let width = dds.width;
+				let height = dds.height;
 
-				for ( var i = 0; i < dds.mipmapCount; i ++ ) {
+				for ( let i = 0; i < dds.mipmapCount; i ++ ) {
+
+					let byteArray, dataLength;
 
 					if ( isRGBAUncompressed ) {
 
-						var byteArray = loadARGBMip( buffer, dataOffset, width, height );
-						var dataLength = byteArray.length;
+						byteArray = loadARGBMip( buffer, dataOffset, width, height );
+						dataLength = byteArray.length;
 
 					} else {
 
-						var dataLength = Math.max( 4, width ) / 4 * Math.max( 4, height ) / 4 * blockBytes;
-						var byteArray = new Uint8Array( buffer, dataOffset, dataLength );
+						dataLength = Math.max( 4, width ) / 4 * Math.max( 4, height ) / 4 * blockBytes;
+						byteArray = new Uint8Array( buffer, dataOffset, dataLength );
 
 					}
 
-					var mipmap = {
+					const mipmap = {
 						'data': byteArray,
 						'width': width,
 						'height': height
@@ -242,7 +244,8 @@
 			return dds;
 
 		}
-	} );
+
+	}
 
 	THREE.DDSLoader = DDSLoader;
 

examples/js/loaders/KMZLoader.js

 ( function () {
 
-	var KMZLoader = function ( manager ) {
+	class KMZLoader extends THREE.Loader {
 
-		THREE.Loader.call( this, manager );
+		constructor( manager ) {
 
-	};
+			super( manager );
 
-	KMZLoader.prototype = Object.assign( Object.create( THREE.Loader.prototype ), {
-		constructor: KMZLoader,
-		load: function ( url, onLoad, onProgress, onError ) {
+		}
+
+		load( url, onLoad, onProgress, onError ) {
 
-			var scope = this;
-			var loader = new THREE.FileLoader( scope.manager );
+			const scope = this;
+			const loader = new THREE.FileLoader( scope.manager );
 			loader.setPath( scope.path );
 			loader.setResponseType( 'arraybuffer' );
 			loader.setRequestHeader( scope.requestHeader );
@@ -40,12 +40,13 @@
 
 			}, onProgress, onError );
 
-		},
-		parse: function ( data ) {
+		}
+
+		parse( data ) {
 
 			function findFile( url ) {
 
-				for ( var path in zip ) {
+				for ( const path in zip ) {
 
 					if ( path.substr( - url.length ) === url ) {
 
@@ -57,15 +58,15 @@
 
 			}
 
-			var manager = new THREE.LoadingManager();
+			const manager = new THREE.LoadingManager();
 			manager.setURLModifier( function ( url ) {
 
-				var image = findFile( url );
+				const image = findFile( url );
 
 				if ( image ) {
 
 					console.log( 'Loading', url );
-					var blob = new Blob( [ image.buffer ], {
+					const blob = new Blob( [ image.buffer ], {
 						type: 'application/octet-stream'
 					} );
 					return URL.createObjectURL( blob );
@@ -76,17 +77,17 @@
 
 			} ); //
 
-			var zip = fflate.unzipSync( new Uint8Array( data ) ); // eslint-disable-line no-undef
+			const zip = fflate.unzipSync( new Uint8Array( data ) ); // eslint-disable-line no-undef
 
 			if ( zip[ 'doc.kml' ] ) {
 
-				var xml = new DOMParser().parseFromString( fflate.strFromU8( zip[ 'doc.kml' ] ), 'application/xml' ); // eslint-disable-line no-undef
+				const xml = new DOMParser().parseFromString( fflate.strFromU8( zip[ 'doc.kml' ] ), 'application/xml' ); // eslint-disable-line no-undef
 
-				var model = xml.querySelector( 'Placemark Model Link href' );
+				const model = xml.querySelector( 'Placemark Model Link href' );
 
 				if ( model ) {
 
-					var loader = new THREE.ColladaLoader( manager );
+					const loader = new THREE.ColladaLoader( manager );
 					return loader.parse( fflate.strFromU8( zip[ model.textContent ] ) ); // eslint-disable-line no-undef
 
 				}
@@ -95,13 +96,13 @@
 
 				console.warn( 'KMZLoader: Missing doc.kml file.' );
 
-				for ( var path in zip ) {
+				for ( const path in zip ) {
 
-					var extension = path.split( '.' ).pop().toLowerCase();
+					const extension = path.split( '.' ).pop().toLowerCase();
 
 					if ( extension === 'dae' ) {
 
-						var loader = new THREE.ColladaLoader( manager );
+						const loader = new THREE.ColladaLoader( manager );
 						return loader.parse( fflate.strFromU8( zip[ path ] ) ); // eslint-disable-line no-undef
 
 					}
@@ -116,7 +117,8 @@
 			};
 
 		}
-	} );
+
+	}
 
 	THREE.KMZLoader = KMZLoader;
 

examples/js/loaders/MDDLoader.js

@@ -12,18 +12,18 @@
  * vertex data for each frame (sequence of float32)
  */
 
-	var MDDLoader = function ( manager ) {
+	class MDDLoader extends THREE.Loader {
 
-		THREE.Loader.call( this, manager );
+		constructor( manager ) {
 
-	};
+			super( manager );
 
-	MDDLoader.prototype = Object.assign( Object.create( THREE.Loader.prototype ), {
-		constructor: MDDLoader,
-		load: function ( url, onLoad, onProgress, onError ) {
+		}
+
+		load( url, onLoad, onProgress, onError ) {
 
-			var scope = this;
-			var loader = new THREE.FileLoader( this.manager );
+			const scope = this;
+			const loader = new THREE.FileLoader( this.manager );
 			loader.setPath( this.path );
 			loader.setResponseType( 'arraybuffer' );
 			loader.load( url, function ( data ) {
@@ -32,18 +32,19 @@
 
 			}, onProgress, onError );
 
-		},
-		parse: function ( data ) {
+		}
 
-			var view = new DataView( data );
-			var totalFrames = view.getUint32( 0 );
-			var totalPoints = view.getUint32( 4 );
-			var offset = 8; // animation clip
+		parse( data ) {
 
-			var times = new Float32Array( totalFrames );
-			var values = new Float32Array( totalFrames * totalFrames ).fill( 0 );
+			const view = new DataView( data );
+			const totalFrames = view.getUint32( 0 );
+			const totalPoints = view.getUint32( 4 );
+			let offset = 8; // animation clip
 
-			for ( var i = 0; i < totalFrames; i ++ ) {
+			const times = new Float32Array( totalFrames );
+			const values = new Float32Array( totalFrames * totalFrames ).fill( 0 );
+
+			for ( let i = 0; i < totalFrames; i ++ ) {
 
 				times[ i ] = view.getFloat32( offset );
 				offset += 4;
@@ -51,18 +52,18 @@
 
 			}
 
-			var track = new THREE.NumberKeyframeTrack( '.morphTargetInfluences', times, values );
-			var clip = new THREE.AnimationClip( 'default', times[ times.length - 1 ], [ track ] ); // morph targets
+			const track = new THREE.NumberKeyframeTrack( '.morphTargetInfluences', times, values );
+			const clip = new THREE.AnimationClip( 'default', times[ times.length - 1 ], [ track ] ); // morph targets
 
-			var morphTargets = [];
+			const morphTargets = [];
 
-			for ( var i = 0; i < totalFrames; i ++ ) {
+			for ( let i = 0; i < totalFrames; i ++ ) {
 
-				var morphTarget = new Float32Array( totalPoints * 3 );
+				const morphTarget = new Float32Array( totalPoints * 3 );
 
-				for ( var j = 0; j < totalPoints; j ++ ) {
+				for ( let j = 0; j < totalPoints; j ++ ) {
 
-					var stride = j * 3;
+					const stride = j * 3;
 					morphTarget[ stride + 0 ] = view.getFloat32( offset );
 					offset += 4; // x
 
@@ -74,7 +75,7 @@
 
 				}
 
-				var attribute = new THREE.BufferAttribute( morphTarget, 3 );
+				const attribute = new THREE.BufferAttribute( morphTarget, 3 );
 				attribute.name = 'morph_' + i;
 				morphTargets.push( attribute );
 
@@ -86,7 +87,8 @@
 			};
 
 		}
-	} );
+
+	}
 
 	THREE.MDDLoader = MDDLoader;