Examples: Convert loaders to ES6 Part II. (#21614)

examples/js/loaders/HDRCubeTextureLoader.js

 ( function () {
 
-	var HDRCubeTextureLoader = function ( manager ) {
+	class HDRCubeTextureLoader extends THREE.Loader {
 
-		THREE.Loader.call( this, manager );
-		this.hdrLoader = new THREE.RGBELoader();
-		this.type = THREE.UnsignedByteType;
+		constructor( manager ) {
 
-	};
+			super( manager );
+			this.hdrLoader = new THREE.RGBELoader();
+			this.type = THREE.UnsignedByteType;
 
-	HDRCubeTextureLoader.prototype = Object.assign( Object.create( THREE.Loader.prototype ), {
-		constructor: HDRCubeTextureLoader,
-		load: function ( urls, onLoad, onProgress, onError ) {
+		}
+
+		load( urls, onLoad, onProgress, onError ) {
 
 			if ( ! Array.isArray( urls ) ) {
 
@@ -23,7 +23,7 @@
 
 			}
 
-			var texture = new THREE.CubeTexture();
+			const texture = new THREE.CubeTexture();
 			texture.type = this.type;
 
 			switch ( texture.type ) {
@@ -54,20 +54,20 @@
 
 			}
 
-			var scope = this;
-			var loaded = 0;
+			const scope = this;
+			let loaded = 0;
 
 			function loadHDRData( i, onLoad, onProgress, onError ) {
 
 				new THREE.FileLoader( scope.manager ).setPath( scope.path ).setResponseType( 'arraybuffer' ).setWithCredentials( scope.withCredentials ).load( urls[ i ], function ( buffer ) {
 
 					loaded ++;
-					var texData = scope.hdrLoader.parse( buffer );
+					const texData = scope.hdrLoader.parse( buffer );
 					if ( ! texData ) return;
 
 					if ( texData.data !== undefined ) {
 
-						var dataTexture = new THREE.DataTexture( texData.data, texData.width, texData.height );
+						const dataTexture = new THREE.DataTexture( texData.data, texData.width, texData.height );
 						dataTexture.type = texture.type;
 						dataTexture.encoding = texture.encoding;
 						dataTexture.format = texture.format;
@@ -89,7 +89,7 @@
 
 			}
 
-			for ( var i = 0; i < urls.length; i ++ ) {
+			for ( let i = 0; i < urls.length; i ++ ) {
 
 				loadHDRData( i, onLoad, onProgress, onError );
 
@@ -97,15 +97,17 @@
 
 			return texture;
 
-		},
-		setDataType: function ( value ) {
+		}
+
+		setDataType( value ) {
 
 			this.type = value;
 			this.hdrLoader.setDataType( value );
 			return this;
 
 		}
-	} );
+
+	}
 
 	THREE.HDRCubeTextureLoader = HDRCubeTextureLoader;
 

examples/js/loaders/KTXLoader.js

@@ -7,17 +7,17 @@
  * ported from https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.khronosTextureContainer.ts
  */
 
-	var KTXLoader = function ( manager ) {
+	class KTXLoader extends THREE.CompressedTextureLoader {
 
-		THREE.CompressedTextureLoader.call( this, manager );
+		constructor( manager ) {
 
-	};
+			super( manager );
 
-	KTXLoader.prototype = Object.assign( Object.create( THREE.CompressedTextureLoader.prototype ), {
-		constructor: KTXLoader,
-		parse: function ( buffer, loadMipmaps ) {
+		}
+
+		parse( buffer, loadMipmaps ) {
 
-			var ktx = new KhronosTextureContainer( buffer, 1 );
+			const ktx = new KhronosTextureContainer( buffer, 1 );
 			return {
 				mipmaps: ktx.mipmaps( loadMipmaps ),
 				width: ktx.pixelWidth,
@@ -28,9 +28,18 @@
 			};
 
 		}
-	} );
 
-	var KhronosTextureContainer = function () {
+	}
+
+	const HEADER_LEN = 12 + 13 * 4; // identifier + header elements (not including key value meta-data pairs)
+	// load types
+
+	const COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()
+	//const COMPRESSED_3D = 1; // uses a gl.compressedTexImage3D()
+	//const TEX_2D = 2; // uses a gl.texImage2D()
+	//const TEX_3D = 3; // uses a gl.texImage3D()
+
+	class KhronosTextureContainer {
 
 		/**
 	 * @param {ArrayBuffer} arrayBuffer- contents of the KTX container file
@@ -38,7 +47,7 @@
 	 * @param {boolean} threeDExpected- provision for indicating that data should be a 3D texture, not implemented
 	 * @param {boolean} textureArrayExpected- provision for indicating that data should be a texture array, not implemented
 	 */
-		function KhronosTextureContainer( arrayBuffer, facesExpected
+		constructor( arrayBuffer, facesExpected
 			/*, threeDExpected, textureArrayExpected */
 		) {
 
@@ -46,7 +55,7 @@
 			// '´', 'K', 'T', 'X', ' ', '1', '1', 'ª', '\r', '\n', '\x1A', '\n'
 			// 0xAB, 0x4B, 0x54, 0x58, 0x20, 0x31, 0x31, 0xBB, 0x0D, 0x0A, 0x1A, 0x0A
 
-			var identifier = new Uint8Array( this.arrayBuffer, 0, 12 );
+			const identifier = new Uint8Array( this.arrayBuffer, 0, 12 );
 
 			if ( identifier[ 0 ] !== 0xAB || identifier[ 1 ] !== 0x4B || identifier[ 2 ] !== 0x54 || identifier[ 3 ] !== 0x58 || identifier[ 4 ] !== 0x20 || identifier[ 5 ] !== 0x31 || identifier[ 6 ] !== 0x31 || identifier[ 7 ] !== 0xBB || identifier[ 8 ] !== 0x0D || identifier[ 9 ] !== 0x0A || identifier[ 10 ] !== 0x1A || identifier[ 11 ] !== 0x0A ) {
 
@@ -56,10 +65,10 @@
 			} // load the reset of the header in native 32 bit uint
 
 
-			var dataSize = Uint32Array.BYTES_PER_ELEMENT;
-			var headerDataView = new DataView( this.arrayBuffer, 12, 13 * dataSize );
-			var endianness = headerDataView.getUint32( 0, true );
-			var littleEndian = endianness === 0x04030201;
+			const dataSize = Uint32Array.BYTES_PER_ELEMENT;
+			const headerDataView = new DataView( this.arrayBuffer, 12, 13 * dataSize );
+			const endianness = headerDataView.getUint32( 0, true );
+			const littleEndian = endianness === 0x04030201;
 			this.glType = headerDataView.getUint32( 1 * dataSize, littleEndian ); // must be 0 for compressed textures
 
 			this.glTypeSize = headerDataView.getUint32( 2 * dataSize, littleEndian ); // must be 1 for compressed textures
@@ -120,29 +129,28 @@
 			// would need to make this more elaborate & adjust checks above to support more than one load type
 
 
-			this.loadType = KhronosTextureContainer.COMPRESSED_2D;
-
-		} // return mipmaps for js
+			this.loadType = COMPRESSED_2D;
 
+		}
 
-		KhronosTextureContainer.prototype.mipmaps = function ( loadMipmaps ) {
+		mipmaps( loadMipmaps ) {
 
-			var mipmaps = []; // initialize width & height for level 1
+			const mipmaps = []; // initialize width & height for level 1
 
-			var dataOffset = KhronosTextureContainer.HEADER_LEN + this.bytesOfKeyValueData;
-			var width = this.pixelWidth;
-			var height = this.pixelHeight;
-			var mipmapCount = loadMipmaps ? this.numberOfMipmapLevels : 1;
+			let dataOffset = HEADER_LEN + this.bytesOfKeyValueData;
+			let width = this.pixelWidth;
+			let height = this.pixelHeight;
+			const mipmapCount = loadMipmaps ? this.numberOfMipmapLevels : 1;
 
-			for ( var level = 0; level < mipmapCount; level ++ ) {
+			for ( let level = 0; level < mipmapCount; level ++ ) {
 
-				var imageSize = new Int32Array( this.arrayBuffer, dataOffset, 1 )[ 0 ]; // size per face, since not supporting array cubemaps
+				const imageSize = new Int32Array( this.arrayBuffer, dataOffset, 1 )[ 0 ]; // size per face, since not supporting array cubemaps
 
 				dataOffset += 4; // size of the image + 4 for the imageSize field
 
-				for ( var face = 0; face < this.numberOfFaces; face ++ ) {
+				for ( let face = 0; face < this.numberOfFaces; face ++ ) {
 
-					var byteArray = new Uint8Array( this.arrayBuffer, dataOffset, imageSize );
+					const byteArray = new Uint8Array( this.arrayBuffer, dataOffset, imageSize );
 					mipmaps.push( {
 						'data': byteArray,
 						'width': width,
@@ -160,22 +168,9 @@
 
 			return mipmaps;
 
-		};
-
-		KhronosTextureContainer.HEADER_LEN = 12 + 13 * 4; // identifier + header elements (not including key value meta-data pairs)
-		// load types
-
-		KhronosTextureContainer.COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()
-
-		KhronosTextureContainer.COMPRESSED_3D = 1; // uses a gl.compressedTexImage3D()
-
-		KhronosTextureContainer.TEX_2D = 2; // uses a gl.texImage2D()
-
-		KhronosTextureContainer.TEX_3D = 3; // uses a gl.texImage3D()
-
-		return KhronosTextureContainer;
+		}
 
-	}();
+	}
 
 	THREE.KTXLoader = KTXLoader;
 

examples/jsm/loaders/HDRCubeTextureLoader.js

@@ -15,20 +15,18 @@ import {
 } from '../../../build/three.module.js';
 import { RGBELoader } from '../loaders/RGBELoader.js';
 
-var HDRCubeTextureLoader = function ( manager ) {
+class HDRCubeTextureLoader extends Loader {
 
-	Loader.call( this, manager );
+	constructor( manager ) {
 
-	this.hdrLoader = new RGBELoader();
-	this.type = UnsignedByteType;
+		super( manager );
 
-};
+		this.hdrLoader = new RGBELoader();
+		this.type = UnsignedByteType;
 
-HDRCubeTextureLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
-
-	constructor: HDRCubeTextureLoader,
+	}
 
-	load: function ( urls, onLoad, onProgress, onError ) {
+	load( urls, onLoad, onProgress, onError ) {
 
 		if ( ! Array.isArray( urls ) ) {
 
@@ -43,7 +41,7 @@ HDRCubeTextureLoader.prototype = Object.assign( Object.create( Loader.prototype
 
 		}
 
-		var texture = new CubeTexture();
+		const texture = new CubeTexture();
 
 		texture.type = this.type;
 
@@ -78,9 +76,9 @@ HDRCubeTextureLoader.prototype = Object.assign( Object.create( Loader.prototype
 
 		}
 
-		var scope = this;
+		const scope = this;
 
-		var loaded = 0;
+		let loaded = 0;
 
 		function loadHDRData( i, onLoad, onProgress, onError ) {
 
@@ -92,13 +90,13 @@ HDRCubeTextureLoader.prototype = Object.assign( Object.create( Loader.prototype
 
 					loaded ++;
 
-					var texData = scope.hdrLoader.parse( buffer );
+					const texData = scope.hdrLoader.parse( buffer );
 
 					if ( ! texData ) return;
 
 					if ( texData.data !== undefined ) {
 
-						var dataTexture = new DataTexture( texData.data, texData.width, texData.height );
+						const dataTexture = new DataTexture( texData.data, texData.width, texData.height );
 
 						dataTexture.type = texture.type;
 						dataTexture.encoding = texture.encoding;
@@ -122,7 +120,7 @@ HDRCubeTextureLoader.prototype = Object.assign( Object.create( Loader.prototype
 
 		}
 
-		for ( var i = 0; i < urls.length; i ++ ) {
+		for ( let i = 0; i < urls.length; i ++ ) {
 
 			loadHDRData( i, onLoad, onProgress, onError );
 
@@ -130,9 +128,9 @@ HDRCubeTextureLoader.prototype = Object.assign( Object.create( Loader.prototype
 
 		return texture;
 
-	},
+	}
 
-	setDataType: function ( value ) {
+	setDataType( value ) {
 
 		this.type = value;
 		this.hdrLoader.setDataType( value );
@@ -141,6 +139,6 @@ HDRCubeTextureLoader.prototype = Object.assign( Object.create( Loader.prototype
 
 	}
 
-} );
+}
 
 export { HDRCubeTextureLoader };

examples/jsm/loaders/IFCLoader.js

@@ -16,23 +16,21 @@ import {
 	BufferAttribute,
 } from '../../../build/three.module.js';
 
-var ifcAPI = new IfcAPI();
+const ifcAPI = new IfcAPI();
 
-function IFCLoader( manager ) {
+class IFCLoader extends Loader {
 
-	Loader.call( this, manager );
+	constructor( manager ) {
 
-}
-
-IFCLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
+		super( manager );
 
-	constructor: IFCLoader,
+	}
 
-	load: function ( url, onLoad, onProgress, onError ) {
+	load( url, onLoad, onProgress, onError ) {
 
-		var scope = this;
+		const scope = this;
 
-		var loader = new FileLoader( scope.manager );
+		const loader = new FileLoader( scope.manager );
 		loader.setPath( scope.path );
 		loader.setResponseType( 'arraybuffer' );
 		loader.setRequestHeader( scope.requestHeader );
@@ -66,9 +64,9 @@ IFCLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 			onError
 		);
 
-	},
+	}
 
-	parse: async function ( buffer ) {
+	async parse( buffer ) {
 
 		if ( ifcAPI.wasmModule === undefined ) {
 
@@ -76,18 +74,18 @@ IFCLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 
 		}
 
-		var data = new Uint8Array( buffer );
-		var modelID = ifcAPI.OpenModel( 'example.ifc', data );
+		const data = new Uint8Array( buffer );
+		const modelID = ifcAPI.OpenModel( 'example.ifc', data );
 		return loadAllGeometry( modelID );
 
 		function loadAllGeometry( modelID ) {
 
-			var flatMeshes = getFlatMeshes( modelID );
-			var mainObject = new Object3D();
-			for ( var i = 0; i < flatMeshes.size(); i ++ ) {
+			const flatMeshes = getFlatMeshes( modelID );
+			const mainObject = new Object3D();
+			for ( let i = 0; i < flatMeshes.size(); i ++ ) {
 
-				var placedGeometries = flatMeshes.get( i ).geometries;
-				for ( var j = 0; j < placedGeometries.size(); j ++ )
+				const placedGeometries = flatMeshes.get( i ).geometries;
+				for ( let j = 0; j < placedGeometries.size(); j ++ )
 					mainObject.add( getPlacedGeometry( modelID, placedGeometries.get( j ) ) );
 
 			}
@@ -98,16 +96,16 @@ IFCLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 
 		function getFlatMeshes( modelID ) {
 
-			var flatMeshes = ifcAPI.LoadAllGeometry( modelID );
+			const flatMeshes = ifcAPI.LoadAllGeometry( modelID );
 			return flatMeshes;
 
 		}
 
 		function getPlacedGeometry( modelID, placedGeometry ) {
 
-			var geometry = getBufferGeometry( modelID, placedGeometry );
-			var material = getMeshMaterial( placedGeometry.color );
-			var mesh = new Mesh( geometry, material );
+			const geometry = getBufferGeometry( modelID, placedGeometry );
+			const material = getMeshMaterial( placedGeometry.color );
+			const mesh = new Mesh( geometry, material );
 			mesh.matrix = getMeshMatrix( placedGeometry.flatTransformation );
 			mesh.matrixAutoUpdate = false;
 			return mesh;
@@ -116,27 +114,27 @@ IFCLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 
 		function getBufferGeometry( modelID, placedGeometry ) {
 
-			var geometry = ifcAPI.GetGeometry(
+			const geometry = ifcAPI.GetGeometry(
 				modelID,
 				placedGeometry.geometryExpressID
 			);
-			var verts = ifcAPI.GetVertexArray(
+			const verts = ifcAPI.GetVertexArray(
 				geometry.GetVertexData(),
 				geometry.GetVertexDataSize()
 			);
-			var indices = ifcAPI.GetIndexArray(
+			const indices = ifcAPI.GetIndexArray(
 				geometry.GetIndexData(),
 				geometry.GetIndexDataSize()
 			);
-			var bufferGeometry = ifcGeometryToBuffer( verts, indices );
+			const bufferGeometry = ifcGeometryToBuffer( verts, indices );
 			return bufferGeometry;
 
 		}
 
 		function getMeshMaterial( color ) {
 
-			var col = new Color( color.x, color.y, color.z );
-			var material = new MeshPhongMaterial( { color: col, side: DoubleSide } );
+			const col = new Color( color.x, color.y, color.z );
+			const material = new MeshPhongMaterial( { color: col, side: DoubleSide } );
 			material.transparent = color.w !== 1;
 			if ( material.transparent ) material.opacity = color.w;
 			return material;
@@ -145,7 +143,7 @@ IFCLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 
 		function getMeshMatrix( matrix ) {
 
-			var mat = new Matrix4();
+			const mat = new Matrix4();
 			mat.fromArray( matrix );
 			// mat.elements[15 - 3] *= 0.001;
 			// mat.elements[15 - 2] *= 0.001;
@@ -156,8 +154,8 @@ IFCLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 
 		function ifcGeometryToBuffer( vertexData, indexData ) {
 
-			var geometry = new BufferGeometry();
-			var buffer32 = new InterleavedBuffer( vertexData, 6 );
+			const geometry = new BufferGeometry();
+			const buffer32 = new InterleavedBuffer( vertexData, 6 );
 			geometry.setAttribute(
 				'position',
 				new InterleavedBufferAttribute( buffer32, 3, 0 )
@@ -172,6 +170,7 @@ IFCLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 		}
 
 	}
-} );
+
+}
 
 export { IFCLoader };