Updated examples builds.

examples/js/animation/CCDIKSolver.js

@@ -427,6 +427,7 @@
 
 	}
 
+	THREE.CCDIKHelper = CCDIKHelper;
 	THREE.CCDIKSolver = CCDIKSolver;
 
 } )();

examples/js/controls/TrackballControls.js

@@ -510,9 +510,6 @@
 							_state = STATE.PAN;
 							break;
 
-						default:
-							_state = STATE.NONE;
-
 					}
 
 				}

examples/js/curves/CurveExtras.js

@@ -330,23 +330,19 @@
 
 	}
 
-	const Curves = {
-		GrannyKnot: GrannyKnot,
-		HeartCurve: HeartCurve,
-		VivianiCurve: VivianiCurve,
-		KnotCurve: KnotCurve,
-		HelixCurve: HelixCurve,
-		TrefoilKnot: TrefoilKnot,
-		TorusKnot: TorusKnot,
-		CinquefoilKnot: CinquefoilKnot,
-		TrefoilPolynomialKnot: TrefoilPolynomialKnot,
-		FigureEightPolynomialKnot: FigureEightPolynomialKnot,
-		DecoratedTorusKnot4a: DecoratedTorusKnot4a,
-		DecoratedTorusKnot4b: DecoratedTorusKnot4b,
-		DecoratedTorusKnot5a: DecoratedTorusKnot5a,
-		DecoratedTorusKnot5c: DecoratedTorusKnot5c
-	};
-
-	THREE.Curves = Curves;
+	THREE.CinquefoilKnot = CinquefoilKnot;
+	THREE.DecoratedTorusKnot4a = DecoratedTorusKnot4a;
+	THREE.DecoratedTorusKnot4b = DecoratedTorusKnot4b;
+	THREE.DecoratedTorusKnot5a = DecoratedTorusKnot5a;
+	THREE.DecoratedTorusKnot5c = DecoratedTorusKnot5c;
+	THREE.FigureEightPolynomialKnot = FigureEightPolynomialKnot;
+	THREE.GrannyKnot = GrannyKnot;
+	THREE.HeartCurve = HeartCurve;
+	THREE.HelixCurve = HelixCurve;
+	THREE.KnotCurve = KnotCurve;
+	THREE.TorusKnot = TorusKnot;
+	THREE.TrefoilKnot = TrefoilKnot;
+	THREE.TrefoilPolynomialKnot = TrefoilPolynomialKnot;
+	THREE.VivianiCurve = VivianiCurve;
 
 } )();

examples/js/effects/AnaglyphEffect.js

@@ -81,10 +81,13 @@
 
 			this.dispose = function () {
 
-				if ( _renderTargetL ) _renderTargetL.dispose();
-				if ( _renderTargetR ) _renderTargetR.dispose();
-				if ( _mesh ) _mesh.geometry.dispose();
-				if ( _material ) _material.dispose();
+				_renderTargetL.dispose();
+
+				_renderTargetR.dispose();
+
+				_mesh.geometry.dispose();
+
+				_mesh.material.dispose();
 
 			};
 

examples/js/exporters/ColladaExporter.js

@@ -127,10 +127,30 @@
 
 
 			const getFuncs = [ 'getX', 'getY', 'getZ', 'getW' ];
+			const tempColor = new THREE.Color();
 
-			function attrBufferToArray( attr ) {
+			function attrBufferToArray( attr, isColor = false ) {
 
-				if ( attr.isInterleavedBufferAttribute ) {
+				console.log( attr, attr.count, isColor );
+
+				if ( isColor ) {
+
+					// convert the colors to srgb before export
+					// colors are always written as floats
+					const arr = new Float32Array( attr.count * 3 );
+
+					for ( let i = 0, l = attr.count; i < l; i ++ ) {
+
+						tempColor.fromBufferAttribute( attr, i ).convertLinearToSRGB();
+						arr[ 3 * i + 0 ] = tempColor.r;
+						arr[ 3 * i + 1 ] = tempColor.g;
+						arr[ 3 * i + 2 ] = tempColor.b;
+
+					}
+
+					return arr;
+
+				} else if ( attr.isInterleavedBufferAttribute ) {
 
 					// use the typed array constructor to save on memory
 					const arr = new attr.array.constructor( attr.count * attr.itemSize );
@@ -165,9 +185,9 @@
 			} // Returns the string for a geometry's attribute
 
 
-			function getAttribute( attr, name, params, type ) {
+			function getAttribute( attr, name, params, type, isColor = false ) {
 
-				const array = attrBufferToArray( attr );
+				const array = attrBufferToArray( attr, isColor );
 				const res = `<source id="${name}">` + `<float_array id="${name}-array" count="${array.length}">` + array.join( ' ' ) + '</float_array>' + '<technique_common>' + `<accessor source="#${name}-array" count="${Math.floor( array.length / attr.itemSize )}" stride="${attr.itemSize}">` + params.map( n => `<param name="${n}" type="${type}" />` ).join( '' ) + '</accessor>' + '</technique_common>' + '</source>';
 				return res;
 
@@ -255,8 +275,9 @@
 
 					if ( 'color' in bufferGeometry.attributes ) {
 
+						// colors are always written as floats
 						const colName = `${meshid}-color`;
-						gnode += getAttribute( bufferGeometry.attributes.color, colName, [ 'X', 'Y', 'Z' ], 'uint8' );
+						gnode += getAttribute( bufferGeometry.attributes.color, colName, [ 'R', 'G', 'B' ], 'float', true );
 						triangleInputs += `<input semantic="COLOR" source="#${colName}" offset="0" />`;
 
 					}
@@ -376,7 +397,10 @@
 					const diffuse = m.color ? m.color : new THREE.Color( 0, 0, 0 );
 					const specular = m.specular ? m.specular : new THREE.Color( 1, 1, 1 );
 					const shininess = m.shininess || 0;
-					const reflectivity = m.reflectivity || 0; // Do not export and alpha map for the reasons mentioned in issue (#13792)
+					const reflectivity = m.reflectivity || 0;
+					emissive.convertLinearToSRGB();
+					specular.convertLinearToSRGB();
+					diffuse.convertLinearToSRGB(); // Do not export and alpha map for the reasons mentioned in issue (#13792)
 					// in three.js alpha maps are black and white, but collada expects the alpha
 					// channel to specify the transparency
 
@@ -441,7 +465,7 @@
 					}
 
 					matids = matidsArray.fill().map( ( v, i ) => processMaterial( materials[ i % materials.length ] ) );
-					node += `<instance_geometry url="#${meshid}">` + ( matids != null ? '<bind_material><technique_common>' + matids.map( ( id, i ) => `<instance_material symbol="MESH_MATERIAL_${i}" target="#${id}" >` + '<bind_vertex_input semantic="TEXCOORD" input_semantic="TEXCOORD" input_set="0" />' + '</instance_material>' ).join( '' ) + '</technique_common></bind_material>' : '' ) + '</instance_geometry>';
+					node += `<instance_geometry url="#${meshid}">` + ( matids.length > 0 ? '<bind_material><technique_common>' + matids.map( ( id, i ) => `<instance_material symbol="MESH_MATERIAL_${i}" target="#${id}" >` + '<bind_vertex_input semantic="TEXCOORD" input_semantic="TEXCOORD" input_set="0" />' + '</instance_material>' ).join( '' ) + '</technique_common></bind_material>' : '' ) + '</instance_geometry>';
 
 				}
 

examples/js/exporters/GLTFExporter.js

@@ -946,7 +946,7 @@
 			const pending = writer.pending;
 			if ( ! cache.images.has( image ) ) cache.images.set( image, {} );
 			const cachedImages = cache.images.get( image );
-			const mimeType = format === THREE.RGBAFormat ? 'image/png' : 'image/jpeg';
+			const mimeType = 'image/png';
 			const key = mimeType + ':flipY/' + flipY.toString();
 			if ( cachedImages[ key ] !== undefined ) return cachedImages[ key ];
 			if ( ! json.images ) json.images = [];

examples/js/exporters/OBJExporter.js

@@ -221,7 +221,7 @@
 
 						if ( colors !== undefined ) {
 
-							color.fromBufferAttribute( colors, i );
+							color.fromBufferAttribute( colors, i ).convertLinearToSRGB();
 							output += ' ' + color.r + ' ' + color.g + ' ' + color.b;
 
 						}

examples/js/exporters/PLYExporter.js

@@ -103,6 +103,7 @@
 				}
 
 			} );
+			const tempColor = new THREE.Color();
 			const includeIndices = excludeAttributes.indexOf( 'index' ) === - 1;
 			includeNormals = includeNormals && excludeAttributes.indexOf( 'normal' ) === - 1;
 			includeColors = includeColors && excludeAttributes.indexOf( 'color' ) === - 1;
@@ -243,18 +244,19 @@
 
 							}
 
-						} // Color information
+						} // THREE.Color information
 
 
 						if ( includeColors === true ) {
 
 							if ( colors != null ) {
 
-								output.setUint8( vOffset, Math.floor( colors.getX( i ) * 255 ) );
+								tempColor.fromBufferAttribute( colors, i ).convertLinearToSRGB();
+								output.setUint8( vOffset, Math.floor( tempColor.r * 255 ) );
 								vOffset += 1;
-								output.setUint8( vOffset, Math.floor( colors.getY( i ) * 255 ) );
+								output.setUint8( vOffset, Math.floor( tempColor.g * 255 ) );
 								vOffset += 1;
-								output.setUint8( vOffset, Math.floor( colors.getZ( i ) * 255 ) );
+								output.setUint8( vOffset, Math.floor( tempColor.b * 255 ) );
 								vOffset += 1;
 
 							} else {
@@ -372,14 +374,15 @@
 
 							}
 
-						} // Color information
+						} // THREE.Color information
 
 
 						if ( includeColors === true ) {
 
 							if ( colors != null ) {
 
-								line += ' ' + Math.floor( colors.getX( i ) * 255 ) + ' ' + Math.floor( colors.getY( i ) * 255 ) + ' ' + Math.floor( colors.getZ( i ) * 255 );
+								tempColor.fromBufferAttribute( colors, i ).convertLinearToSRGB();
+								line += ' ' + Math.floor( tempColor.r * 255 ) + ' ' + Math.floor( tempColor.g * 255 ) + ' ' + Math.floor( tempColor.b * 255 );
 
 							} else {
 

examples/js/helpers/VertexNormalsHelper.js

@@ -10,22 +10,8 @@
 
 		constructor( object, size = 1, color = 0xff0000 ) {
 
-			let nNormals = 0;
-			const objGeometry = object.geometry;
-
-			if ( objGeometry && objGeometry.isGeometry ) {
-
-				console.error( 'THREE.VertexNormalsHelper no longer supports Geometry. Use THREE.BufferGeometry instead.' );
-				return;
-
-			} else if ( objGeometry && objGeometry.isBufferGeometry ) {
-
-				nNormals = objGeometry.attributes.normal.count;
-
-			} //
-
-
 			const geometry = new THREE.BufferGeometry();
+			const nNormals = object.geometry.attributes.normal.count;
 			const positions = new THREE.Float32BufferAttribute( nNormals * 2 * 3, 3 );
 			geometry.setAttribute( 'position', positions );
 			super( geometry, new THREE.LineBasicMaterial( {

examples/js/helpers/VertexTangentsHelper.js

@@ -8,18 +8,8 @@
 
 		constructor( object, size = 1, color = 0x00ffff ) {
 
-			const objGeometry = object.geometry;
-
-			if ( ! ( objGeometry && objGeometry.isBufferGeometry ) ) {
-
-				console.error( 'THREE.VertexTangentsHelper: geometry not an instance of THREE.BufferGeometry.', objGeometry );
-				return;
-
-			}
-
-			const nTangents = objGeometry.attributes.tangent.count; //
-
 			const geometry = new THREE.BufferGeometry();
+			const nTangents = object.geometry.attributes.tangent.count;
 			const positions = new THREE.Float32BufferAttribute( nTangents * 2 * 3, 3 );
 			geometry.setAttribute( 'position', positions );
 			super( geometry, new THREE.LineBasicMaterial( {

examples/js/interactive/HTMLMesh.js

@@ -48,14 +48,36 @@
 			this.anisotropy = 16;
 			this.encoding = THREE.sRGBEncoding;
 			this.minFilter = THREE.LinearFilter;
-			this.magFilter = THREE.LinearFilter;
+			this.magFilter = THREE.LinearFilter; // Create an observer on the DOM, and run html2canvas update in the next loop
+
+			const observer = new MutationObserver( () => {
+
+				if ( ! this.scheduleUpdate ) {
+
+					// ideally should use xr.requestAnimationFrame, here setTimeout to avoid passing the renderer
+					this.scheduleUpdate = setTimeout( () => this.update(), 16 );
+
+				}
+
+			} );
+			const config = {
+				attributes: true,
+				childList: true,
+				subtree: true,
+				characterData: true
+			};
+			observer.observe( dom, config );
+			this.observer = observer;
 
 		}
 
 		dispatchDOMEvent( event ) {
 
-			htmlevent( this.dom, event.type, event.data.x, event.data.y );
-			this.update();
+			if ( event.data ) {
+
+				htmlevent( this.dom, event.type, event.data.x, event.data.y );
+
+			}
 
 		}
 
@@ -63,6 +85,20 @@
 
 			this.image = html2canvas( this.dom );
 			this.needsUpdate = true;
+			this.scheduleUpdate = null;
+
+		}
+
+		dispose() {
+
+			if ( this.observer ) {
+
+				this.observer.disconnect();
+
+			}
+
+			this.scheduleUpdate = clearTimeout( this.scheduleUpdate );
+			super.dispose();
 
 		}
 
@@ -73,12 +109,12 @@
 
 	function html2canvas( element ) {
 
-		var range = document.createRange();
+		const range = document.createRange();
 
 		function Clipper( context ) {
 
-			var clips = [];
-			var isClipping = false;
+			const clips = [];
+			let isClipping = false;
 
 			function doClip() {
 
@@ -90,14 +126,14 @@
 				}
 
 				if ( clips.length === 0 ) return;
-				var minX = - Infinity,
+				let minX = - Infinity,
 					minY = - Infinity;
-				var maxX = Infinity,
+				let maxX = Infinity,
 					maxY = Infinity;
 
-				for ( var i = 0; i < clips.length; i ++ ) {
+				for ( let i = 0; i < clips.length; i ++ ) {
 
-					var clip = clips[ i ];
+					const clip = clips[ i ];
 					minX = Math.max( minX, clip.x );
 					minY = Math.max( minY, clip.y );
 					maxX = Math.min( maxX, clip.x + clip.width );
@@ -151,9 +187,9 @@
 
 		function drawBorder( style, which, x, y, width, height ) {
 
-			var borderWidth = style[ which + 'Width' ];
-			var borderStyle = style[ which + 'Style' ];
-			var borderColor = style[ which + 'Color' ];
+			const borderWidth = style[ which + 'Width' ];
+			const borderStyle = style[ which + 'Style' ];
+			const borderColor = style[ which + 'Color' ];
 
 			if ( borderWidth !== '0px' && borderStyle !== 'none' && borderColor !== 'transparent' && borderColor !== 'rgba(0, 0, 0, 0)' ) {
 
@@ -169,7 +205,7 @@
 
 		function drawElement( element, style ) {
 
-			var x = 0,
+			let x = 0,
 				y = 0,
 				width = 0,
 				height = 0;
@@ -178,23 +214,33 @@
 
 				// text
 				range.selectNode( element );
-				var rect = range.getBoundingClientRect();
+				const rect = range.getBoundingClientRect();
 				x = rect.left - offset.left - 0.5;
 				y = rect.top - offset.top - 0.5;
 				width = rect.width;
 				height = rect.height;
 				drawText( style, x, y, element.nodeValue.trim() );
 
+			} else if ( element instanceof HTMLCanvasElement ) {
+
+				// Canvas element
+				if ( element.style.display === 'none' ) return;
+				context.save();
+				const dpr = window.devicePixelRatio;
+				context.scale( 1 / dpr, 1 / dpr );
+				context.drawImage( element, 0, 0 );
+				context.restore();
+
 			} else {
 
 				if ( element.style.display === 'none' ) return;
-				var rect = element.getBoundingClientRect();
+				const rect = element.getBoundingClientRect();
 				x = rect.left - offset.left - 0.5;
 				y = rect.top - offset.top - 0.5;
 				width = rect.width;
 				height = rect.height;
 				style = window.getComputedStyle( element );
-				var backgroundColor = style.backgroundColor;
+				const backgroundColor = style.backgroundColor;
 
 				if ( backgroundColor !== 'transparent' && backgroundColor !== 'rgba(0, 0, 0, 0)' ) {
 
@@ -208,7 +254,7 @@
 				drawBorder( style, 'borderBottom', x, y + height, width, 0 );
 				drawBorder( style, 'borderRight', x + width, y, 0, height );
 
-				if ( element.type === 'color' || element.type === 'text' ) {
+				if ( element.type === 'color' || element.type === 'text' || element.type === 'number' ) {
 
 					clipper.add( {
 						x: x,
@@ -229,7 +275,7 @@
     */
 
 
-			var isClipping = style.overflow === 'auto' || style.overflow === 'hidden';
+			const isClipping = style.overflow === 'auto' || style.overflow === 'hidden';
 			if ( isClipping ) clipper.add( {
 				x: x,
 				y: y,
@@ -237,7 +283,7 @@
 				height: height
 			} );
 
-			for ( var i = 0; i < element.childNodes.length; i ++ ) {
+			for ( let i = 0; i < element.childNodes.length; i ++ ) {
 
 				drawElement( element.childNodes[ i ], style );
 
@@ -297,7 +343,7 @@
 
 				}
 
-				for ( var i = 0; i < element.childNodes.length; i ++ ) {
+				for ( let i = 0; i < element.childNodes.length; i ++ ) {
 
 					traverse( element.childNodes[ i ] );
 

examples/js/loaders/ColladaLoader.js

@@ -1443,7 +1443,7 @@
 
 				material.name = data.name || '';
 
-				function getTexture( textureObject ) {
+				function getTexture( textureObject, encoding = null ) {
 
 					const sampler = effect.profile.samplers[ textureObject.id ];
 					let image = null; // get image
@@ -1485,6 +1485,12 @@
 
 							}
 
+							if ( encoding !== null ) {
+
+								texture.encoding = encoding;
+
+							}
+
 							return texture;
 
 						} else {
@@ -1513,7 +1519,7 @@
 
 						case 'diffuse':
 							if ( parameter.color ) material.color.fromArray( parameter.color );
-							if ( parameter.texture ) material.map = getTexture( parameter.texture );
+							if ( parameter.texture ) material.map = getTexture( parameter.texture, THREE.sRGBEncoding );
 							break;
 
 						case 'specular':
@@ -1526,7 +1532,7 @@
 							break;
 
 						case 'ambient':
-							if ( parameter.texture ) material.lightMap = getTexture( parameter.texture );
+							if ( parameter.texture ) material.lightMap = getTexture( parameter.texture, THREE.sRGBEncoding );
 							break;
 
 						case 'shininess':
@@ -1535,13 +1541,16 @@
 
 						case 'emission':
 							if ( parameter.color && material.emissive ) material.emissive.fromArray( parameter.color );
-							if ( parameter.texture ) material.emissiveMap = getTexture( parameter.texture );
+							if ( parameter.texture ) material.emissiveMap = getTexture( parameter.texture, THREE.sRGBEncoding );
 							break;
 
 					}
 
-				} //
+				}
 
+				material.color.convertSRGBToLinear();
+				if ( material.specular ) material.specular.convertSRGBToLinear();
+				if ( material.emissive ) material.emissive.convertSRGBToLinear(); //
 
 				let transparent = parameters[ 'transparent' ];
 				let transparency = parameters[ 'transparency' ]; // <transparency> does not exist but <transparent>
@@ -1851,7 +1860,7 @@
 
 						case 'color':
 							const array = parseFloats( child.textContent );
-							data.color = new THREE.Color().fromArray( array );
+							data.color = new THREE.Color().fromArray( array ).convertSRGBToLinear();
 							break;
 
 						case 'falloff_angle':
@@ -2310,7 +2319,7 @@
 								break;
 
 							case 'COLOR':
-								buildGeometryData( primitive, sources[ input.id ], input.offset, color.array );
+								buildGeometryData( primitive, sources[ input.id ], input.offset, color.array, true );
 								color.stride = sources[ input.id ].stride;
 								break;
 
@@ -2345,7 +2354,7 @@
 
 			}
 
-			function buildGeometryData( primitive, source, offset, array ) {
+			function buildGeometryData( primitive, source, offset, array, isColor = false ) {
 
 				const indices = primitive.p;
 				const stride = primitive.stride;
@@ -2362,6 +2371,17 @@
 
 					}
 
+					if ( isColor ) {
+
+						// convert the vertex colors from srgb to linear if present
+						const startIndex = array.length - sourceStride - 1;
+						tempColor.setRGB( array[ startIndex + 0 ], array[ startIndex + 1 ], array[ startIndex + 2 ] ).convertSRGBToLinear();
+						array[ startIndex + 0 ] = tempColor.r;
+						array[ startIndex + 1 ] = tempColor.g;
+						array[ startIndex + 2 ] = tempColor.b;
+
+					}
+
 				}
 
 				const sourceArray = source.array;
@@ -3721,6 +3741,7 @@
 			} //
 
 
+			const tempColor = new THREE.Color();
 			const animations = [];
 			let kinematics = {};
 			let count = 0; //

examples/js/loaders/KTX2Loader.js

@@ -75,14 +75,6 @@
 
 		}
 
-		dispose() {
-
-			this.workerPool.dispose();
-			if ( this.workerSourceURL ) URL.revokeObjectURL( this.workerSourceURL );
-			return this;
-
-		}
-
 		init() {
 
 			if ( ! this.transcoderPending ) {
@@ -224,8 +216,8 @@
 
 		dispose() {
 
-			URL.revokeObjectURL( this.workerSourceURL );
 			this.workerPool.dispose();
+			if ( this.workerSourceURL ) URL.revokeObjectURL( this.workerSourceURL );
 			_activeLoaders --;
 			return this;
 

examples/js/loaders/LDrawLoader.js

@@ -1656,21 +1656,13 @@
 
 					} else if ( elementSize === 2 ) {
 
-						if ( material !== null ) {
+						if ( isConditionalSegments ) {
 
-							if ( isConditionalSegments ) {
-
-								materials.push( material.userData.edgeMaterial.userData.conditionalEdgeMaterial );
-
-							} else {
-
-								materials.push( material.userData.edgeMaterial );
-
-							}
+							materials.push( material.userData.edgeMaterial.userData.conditionalEdgeMaterial );
 
 						} else {
 
-							materials.push( null );
+							materials.push( material.userData.edgeMaterial );
 
 						}
 

examples/js/loaders/OBJLoader.js

@@ -18,6 +18,8 @@
 
 	const _cb = new THREE.Vector3();
 
+	const _color = new THREE.Color();
+
 	function ParserState() {
 
 		const state = {
@@ -464,7 +466,9 @@
 
 							if ( data.length >= 7 ) {
 
-								state.colors.push( parseFloat( data[ 4 ] ), parseFloat( data[ 5 ] ), parseFloat( data[ 6 ] ) );
+								_color.setRGB( parseFloat( data[ 4 ] ), parseFloat( data[ 5 ] ), parseFloat( data[ 6 ] ) ).convertSRGBToLinear();
+
+								state.colors.push( _color.r, _color.g, _color.b );
 
 							} else {
 

examples/js/loaders/PLYLoader.js

@@ -26,6 +26,8 @@
  *
  */
 
+	const _color = new THREE.Color();
+
 	class PLYLoader extends THREE.Loader {
 
 		constructor( manager ) {
@@ -386,7 +388,9 @@
 
 					if ( attrR !== null && attrG !== null && attrB !== null ) {
 
-						buffer.colors.push( element[ attrR ] / 255.0, element[ attrG ] / 255.0, element[ attrB ] / 255.0 );
+						_color.setRGB( element[ attrR ] / 255.0, element[ attrG ] / 255.0, element[ attrB ] / 255.0 ).convertSRGBToLinear();
+
+						buffer.colors.push( _color.r, _color.g, _color.b );
 
 					}
 

examples/js/loaders/VOXLoader.js

@@ -59,7 +59,7 @@
 
 				for ( let j = 0; j < 4; j ++ ) {
 
-					id += String.fromCharCode( data.getUint8( i ++, true ) );
+					id += String.fromCharCode( data.getUint8( i ++ ) );
 
 				}
 

examples/js/loaders/VTKLoader.js

@@ -47,51 +47,51 @@
 			function parseASCII( data ) {
 
 				// connectivity of the triangles
-				var indices = []; // triangles vertices
+				const indices = []; // triangles vertices
 
-				var positions = []; // red, green, blue colors in the range 0 to 1
+				const positions = []; // red, green, blue colors in the range 0 to 1
 
-				var colors = []; // normal vector, one per vertex
+				const colors = []; // normal vector, one per vertex
 
-				var normals = [];
-				var result; // pattern for detecting the end of a number sequence
+				const normals = [];
+				let result; // pattern for detecting the end of a number sequence
 
-				var patWord = /^[^\d.\s-]+/; // pattern for reading vertices, 3 floats or integers
+				const patWord = /^[^\d.\s-]+/; // pattern for reading vertices, 3 floats or integers
 
-				var pat3Floats = /(\-?\d+\.?[\d\-\+e]*)\s+(\-?\d+\.?[\d\-\+e]*)\s+(\-?\d+\.?[\d\-\+e]*)/g; // pattern for connectivity, an integer followed by any number of ints
+				const pat3Floats = /(\-?\d+\.?[\d\-\+e]*)\s+(\-?\d+\.?[\d\-\+e]*)\s+(\-?\d+\.?[\d\-\+e]*)/g; // pattern for connectivity, an integer followed by any number of ints
 				// the first integer is the number of polygon nodes
 
-				var patConnectivity = /^(\d+)\s+([\s\d]*)/; // indicates start of vertex data section
+				const patConnectivity = /^(\d+)\s+([\s\d]*)/; // indicates start of vertex data section
 
-				var patPOINTS = /^POINTS /; // indicates start of polygon connectivity section
+				const patPOINTS = /^POINTS /; // indicates start of polygon connectivity section
 
-				var patPOLYGONS = /^POLYGONS /; // indicates start of triangle strips section
+				const patPOLYGONS = /^POLYGONS /; // indicates start of triangle strips section
 
-				var patTRIANGLE_STRIPS = /^TRIANGLE_STRIPS /; // POINT_DATA number_of_values
+				const patTRIANGLE_STRIPS = /^TRIANGLE_STRIPS /; // POINT_DATA number_of_values
 
-				var patPOINT_DATA = /^POINT_DATA[ ]+(\d+)/; // CELL_DATA number_of_polys
+				const patPOINT_DATA = /^POINT_DATA[ ]+(\d+)/; // CELL_DATA number_of_polys
 
-				var patCELL_DATA = /^CELL_DATA[ ]+(\d+)/; // Start of color section
+				const patCELL_DATA = /^CELL_DATA[ ]+(\d+)/; // Start of color section
 
-				var patCOLOR_SCALARS = /^COLOR_SCALARS[ ]+(\w+)[ ]+3/; // NORMALS Normals float
+				const patCOLOR_SCALARS = /^COLOR_SCALARS[ ]+(\w+)[ ]+3/; // NORMALS Normals float
 
-				var patNORMALS = /^NORMALS[ ]+(\w+)[ ]+(\w+)/;
-				var inPointsSection = false;
-				var inPolygonsSection = false;
-				var inTriangleStripSection = false;
-				var inPointDataSection = false;
-				var inCellDataSection = false;
-				var inColorSection = false;
-				var inNormalsSection = false;
-				var lines = data.split( '\n' );
+				const patNORMALS = /^NORMALS[ ]+(\w+)[ ]+(\w+)/;
+				let inPointsSection = false;
+				let inPolygonsSection = false;
+				let inTriangleStripSection = false;
+				let inPointDataSection = false;
+				let inCellDataSection = false;
+				let inColorSection = false;
+				let inNormalsSection = false;
+				const lines = data.split( '\n' );
 
-				for ( var i in lines ) {
+				for ( const i in lines ) {
 
-					var line = lines[ i ].trim();
+					const line = lines[ i ].trim();
 
 					if ( line.indexOf( 'DATASET' ) === 0 ) {
 
-						var dataset = line.split( ' ' )[ 1 ];
+						const dataset = line.split( ' ' )[ 1 ];
 						if ( dataset !== 'POLYDATA' ) throw new Error( 'Unsupported DATASET type: ' + dataset );
 
 					} else if ( inPointsSection ) {
@@ -100,9 +100,9 @@
 						while ( ( result = pat3Floats.exec( line ) ) !== null ) {
 
 							if ( patWord.exec( line ) !== null ) break;
-							var x = parseFloat( result[ 1 ] );
-							var y = parseFloat( result[ 2 ] );
-							var z = parseFloat( result[ 3 ] );
+							const x = parseFloat( result[ 1 ] );
+							const y = parseFloat( result[ 2 ] );
+							const z = parseFloat( result[ 3 ] );
 							positions.push( x, y, z );
 
 						}
@@ -112,19 +112,18 @@
 						if ( ( result = patConnectivity.exec( line ) ) !== null ) {
 
 							// numVertices i0 i1 i2 ...
-							var numVertices = parseInt( result[ 1 ] );
-							var inds = result[ 2 ].split( /\s+/ );
+							const numVertices = parseInt( result[ 1 ] );
+							const inds = result[ 2 ].split( /\s+/ );
 
 							if ( numVertices >= 3 ) {
 
-								var i0 = parseInt( inds[ 0 ] );
-								var i1, i2;
-								var k = 1; // split the polygon in numVertices - 2 triangles
+								const i0 = parseInt( inds[ 0 ] );
+								let k = 1; // split the polygon in numVertices - 2 triangles
 
-								for ( var j = 0; j < numVertices - 2; ++ j ) {
+								for ( let j = 0; j < numVertices - 2; ++ j ) {
 
-									i1 = parseInt( inds[ k ] );
-									i2 = parseInt( inds[ k + 1 ] );
+									const i1 = parseInt( inds[ k ] );
+									const i2 = parseInt( inds[ k + 1 ] );
 									indices.push( i0, i1, i2 );
 									k ++;
 
@@ -139,27 +138,26 @@
 						if ( ( result = patConnectivity.exec( line ) ) !== null ) {
 
 							// numVertices i0 i1 i2 ...
-							var numVertices = parseInt( result[ 1 ] );
-							var inds = result[ 2 ].split( /\s+/ );
+							const numVertices = parseInt( result[ 1 ] );
+							const inds = result[ 2 ].split( /\s+/ );
 
 							if ( numVertices >= 3 ) {
 
-								var i0, i1, i2; // split the polygon in numVertices - 2 triangles
-
-								for ( var j = 0; j < numVertices - 2; j ++ ) {
+								// split the polygon in numVertices - 2 triangles
+								for ( let j = 0; j < numVertices - 2; j ++ ) {
 
 									if ( j % 2 === 1 ) {
 
-										i0 = parseInt( inds[ j ] );
-										i1 = parseInt( inds[ j + 2 ] );
-										i2 = parseInt( inds[ j + 1 ] );
+										const i0 = parseInt( inds[ j ] );
+										const i1 = parseInt( inds[ j + 2 ] );
+										const i2 = parseInt( inds[ j + 1 ] );
 										indices.push( i0, i1, i2 );
 
 									} else {
 
-										i0 = parseInt( inds[ j ] );
-										i1 = parseInt( inds[ j + 1 ] );
-										i2 = parseInt( inds[ j + 2 ] );
+										const i0 = parseInt( inds[ j ] );
+										const i1 = parseInt( inds[ j + 1 ] );
+										const i2 = parseInt( inds[ j + 2 ] );
 										indices.push( i0, i1, i2 );
 
 									}
@@ -178,9 +176,9 @@
 							while ( ( result = pat3Floats.exec( line ) ) !== null ) {
 
 								if ( patWord.exec( line ) !== null ) break;
-								var r = parseFloat( result[ 1 ] );
-								var g = parseFloat( result[ 2 ] );
-								var b = parseFloat( result[ 3 ] );
+								const r = parseFloat( result[ 1 ] );
+								const g = parseFloat( result[ 2 ] );
+								const b = parseFloat( result[ 3 ] );
 								colors.push( r, g, b );
 
 							}
@@ -191,9 +189,9 @@
 							while ( ( result = pat3Floats.exec( line ) ) !== null ) {
 
 								if ( patWord.exec( line ) !== null ) break;
-								var nx = parseFloat( result[ 1 ] );
-								var ny = parseFloat( result[ 2 ] );
-								var nz = parseFloat( result[ 3 ] );
+								const nx = parseFloat( result[ 1 ] );
+								const ny = parseFloat( result[ 2 ] );
+								const nz = parseFloat( result[ 3 ] );
 								normals.push( nx, ny, nz );
 
 							}
@@ -254,7 +252,7 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
+				let geometry = new THREE.BufferGeometry();
 				geometry.setIndex( indices );
 				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 
@@ -277,17 +275,17 @@
 
 					// cell
 					geometry = geometry.toNonIndexed();
-					var numTriangles = geometry.attributes.position.count / 3;
+					const numTriangles = geometry.attributes.position.count / 3;
 
 					if ( colors.length === numTriangles * 3 ) {
 
-						var newColors = [];
+						const newColors = [];
 
-						for ( var i = 0; i < numTriangles; i ++ ) {
+						for ( let i = 0; i < numTriangles; i ++ ) {
 
-							var r = colors[ 3 * i + 0 ];
-							var g = colors[ 3 * i + 1 ];
-							var b = colors[ 3 * i + 2 ];
+							const r = colors[ 3 * i + 0 ];
+							const g = colors[ 3 * i + 1 ];
+							const b = colors[ 3 * i + 2 ];
 							newColors.push( r, g, b );
 							newColors.push( r, g, b );
 							newColors.push( r, g, b );
@@ -306,22 +304,21 @@
 
 			function parseBinary( data ) {
 
-				var count, pointIndex, i, numberOfPoints, s;
-				var buffer = new Uint8Array( data );
-				var dataView = new DataView( data ); // Points and normals, by default, are empty
+				const buffer = new Uint8Array( data );
+				const dataView = new DataView( data ); // Points and normals, by default, are empty
 
-				var points = [];
-				var normals = [];
-				var indices = []; // Going to make a big array of strings
+				let points = [];
+				let normals = [];
+				let indices = []; // Going to make a big array of strings
 
-				var vtk = [];
-				var index = 0;
+				const vtk = [];
+				let index = 0;
 
 				function findString( buffer, start ) {
 
-					var index = start;
-					var c = buffer[ index ];
-					var s = [];
+					let index = start;
+					let c = buffer[ index ];
+					const s = [];
 
 					while ( c !== 10 ) {
 
@@ -340,7 +337,7 @@
 
 				}
 
-				var state, line;
+				let state, line;
 
 				while ( true ) {
 
@@ -350,20 +347,20 @@
 
 					if ( line.indexOf( 'DATASET' ) === 0 ) {
 
-						var dataset = line.split( ' ' )[ 1 ];
+						const dataset = line.split( ' ' )[ 1 ];
 						if ( dataset !== 'POLYDATA' ) throw new Error( 'Unsupported DATASET type: ' + dataset );
 
 					} else if ( line.indexOf( 'POINTS' ) === 0 ) {
 
 						vtk.push( line ); // Add the points
 
-						numberOfPoints = parseInt( line.split( ' ' )[ 1 ], 10 ); // Each point is 3 4-byte floats
+						const numberOfPoints = parseInt( line.split( ' ' )[ 1 ], 10 ); // Each point is 3 4-byte floats
 
-						count = numberOfPoints * 4 * 3;
+						const count = numberOfPoints * 4 * 3;
 						points = new Float32Array( numberOfPoints * 3 );
-						pointIndex = state.next;
+						let pointIndex = state.next;
 
-						for ( i = 0; i < numberOfPoints; i ++ ) {
+						for ( let i = 0; i < numberOfPoints; i ++ ) {
 
 							points[ 3 * i ] = dataView.getFloat32( pointIndex, false );
 							points[ 3 * i + 1 ] = dataView.getFloat32( pointIndex + 4, false );
@@ -377,22 +374,22 @@
 
 					} else if ( line.indexOf( 'TRIANGLE_STRIPS' ) === 0 ) {
 
-						var numberOfStrips = parseInt( line.split( ' ' )[ 1 ], 10 );
-						var size = parseInt( line.split( ' ' )[ 2 ], 10 ); // 4 byte integers
+						const numberOfStrips = parseInt( line.split( ' ' )[ 1 ], 10 );
+						const size = parseInt( line.split( ' ' )[ 2 ], 10 ); // 4 byte integers
 
-						count = size * 4;
+						const count = size * 4;
 						indices = new Uint32Array( 3 * size - 9 * numberOfStrips );
-						var indicesIndex = 0;
-						pointIndex = state.next;
+						let indicesIndex = 0;
+						let pointIndex = state.next;
 
-						for ( i = 0; i < numberOfStrips; i ++ ) {
+						for ( let i = 0; i < numberOfStrips; i ++ ) {
 
 							// For each strip, read the first value, then record that many more points
-							var indexCount = dataView.getInt32( pointIndex, false );
-							var strip = [];
+							const indexCount = dataView.getInt32( pointIndex, false );
+							const strip = [];
 							pointIndex += 4;
 
-							for ( s = 0; s < indexCount; s ++ ) {
+							for ( let s = 0; s < indexCount; s ++ ) {
 
 								strip.push( dataView.getInt32( pointIndex, false ) );
 								pointIndex += 4;
@@ -400,7 +397,7 @@
 							} // retrieves the n-2 triangles from the triangle strip
 
 
-							for ( var j = 0; j < indexCount - 2; j ++ ) {
+							for ( let j = 0; j < indexCount - 2; j ++ ) {
 
 								if ( j % 2 ) {
 
@@ -425,22 +422,22 @@
 
 					} else if ( line.indexOf( 'POLYGONS' ) === 0 ) {
 
-						var numberOfStrips = parseInt( line.split( ' ' )[ 1 ], 10 );
-						var size = parseInt( line.split( ' ' )[ 2 ], 10 ); // 4 byte integers
+						const numberOfStrips = parseInt( line.split( ' ' )[ 1 ], 10 );
+						const size = parseInt( line.split( ' ' )[ 2 ], 10 ); // 4 byte integers
 
-						count = size * 4;
+						const count = size * 4;
 						indices = new Uint32Array( 3 * size - 9 * numberOfStrips );
-						var indicesIndex = 0;
-						pointIndex = state.next;
+						let indicesIndex = 0;
+						let pointIndex = state.next;
 
-						for ( i = 0; i < numberOfStrips; i ++ ) {
+						for ( let i = 0; i < numberOfStrips; i ++ ) {
 
 							// For each strip, read the first value, then record that many more points
-							var indexCount = dataView.getInt32( pointIndex, false );
-							var strip = [];
+							const indexCount = dataView.getInt32( pointIndex, false );
+							const strip = [];
 							pointIndex += 4;
 
-							for ( s = 0; s < indexCount; s ++ ) {
+							for ( let s = 0; s < indexCount; s ++ ) {
 
 								strip.push( dataView.getInt32( pointIndex, false ) );
 								pointIndex += 4;
@@ -448,7 +445,7 @@
 							} // divide the polygon in n-2 triangle
 
 
-							for ( var j = 1; j < indexCount - 1; j ++ ) {
+							for ( let j = 1; j < indexCount - 1; j ++ ) {
 
 								indices[ indicesIndex ++ ] = strip[ 0 ];
 								indices[ indicesIndex ++ ] = strip[ j ];
@@ -463,15 +460,15 @@
 
 					} else if ( line.indexOf( 'POINT_DATA' ) === 0 ) {
 
-						numberOfPoints = parseInt( line.split( ' ' )[ 1 ], 10 ); // Grab the next line
+						const numberOfPoints = parseInt( line.split( ' ' )[ 1 ], 10 ); // Grab the next line
 
 						state = findString( buffer, state.next ); // Now grab the binary data
 
-						count = numberOfPoints * 4 * 3;
+						const count = numberOfPoints * 4 * 3;
 						normals = new Float32Array( numberOfPoints * 3 );
-						pointIndex = state.next;
+						let pointIndex = state.next;
 
-						for ( i = 0; i < numberOfPoints; i ++ ) {
+						for ( let i = 0; i < numberOfPoints; i ++ ) {
 
 							normals[ 3 * i ] = dataView.getFloat32( pointIndex, false );
 							normals[ 3 * i + 1 ] = dataView.getFloat32( pointIndex + 4, false );
@@ -496,7 +493,7 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( points, 3 ) );
 
@@ -522,7 +519,7 @@
 
 			function Int32Concat( first, second ) {
 
-				var firstLength = first.length,
+				const firstLength = first.length,
 					result = new Int32Array( firstLength + second.length );
 				result.set( first );
 				result.set( second, firstLength );
@@ -536,7 +533,7 @@
 				function xmlToJson( xml ) {
 
 					// Create the return object
-					var obj = {};
+					let obj = {};
 
 					if ( xml.nodeType === 1 ) {
 
@@ -548,9 +545,9 @@
 
 								obj[ 'attributes' ] = {};
 
-								for ( var j = 0; j < xml.attributes.length; j ++ ) {
+								for ( let j = 0; j < xml.attributes.length; j ++ ) {
 
-									var attribute = xml.attributes.item( j );
+									const attribute = xml.attributes.item( j );
 									obj[ 'attributes' ][ attribute.nodeName ] = attribute.nodeValue.trim();
 
 								}
@@ -569,26 +566,26 @@
 
 					if ( xml.hasChildNodes() ) {
 
-						for ( var i = 0; i < xml.childNodes.length; i ++ ) {
+						for ( let i = 0; i < xml.childNodes.length; i ++ ) {
 
-							var item = xml.childNodes.item( i );
-							var nodeName = item.nodeName;
+							const item = xml.childNodes.item( i );
+							const nodeName = item.nodeName;
 
 							if ( typeof obj[ nodeName ] === 'undefined' ) {
 
-								var tmp = xmlToJson( item );
+								const tmp = xmlToJson( item );
 								if ( tmp !== '' ) obj[ nodeName ] = tmp;
 
 							} else {
 
 								if ( typeof obj[ nodeName ].push === 'undefined' ) {
 
-									var old = obj[ nodeName ];
+									const old = obj[ nodeName ];
 									obj[ nodeName ] = [ old ];
 
 								}
 
-								var tmp = xmlToJson( item );
+								const tmp = xmlToJson( item );
 								if ( tmp !== '' ) obj[ nodeName ].push( tmp );
 
 							}
@@ -604,20 +601,11 @@
 
 				function Base64toByteArray( b64 ) {
 
-					var Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array;
-					var i;
-					var lookup = [];
-					var revLookup = [];
-					var code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-					var len = code.length;
+					const Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array;
+					const revLookup = [];
+					const code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
 
-					for ( i = 0; i < len; i ++ ) {
-
-						lookup[ i ] = code[ i ];
-
-					}
-
-					for ( i = 0; i < len; ++ i ) {
+					for ( let i = 0, l = code.length; i < l; ++ i ) {
 
 						revLookup[ code.charCodeAt( i ) ] = i;
 
@@ -625,8 +613,7 @@
 
 					revLookup[ '-'.charCodeAt( 0 ) ] = 62;
 					revLookup[ '_'.charCodeAt( 0 ) ] = 63;
-					var j, l, tmp, placeHolders, arr;
-					var len = b64.length;
+					const len = b64.length;
 
 					if ( len % 4 > 0 ) {
 
@@ -634,14 +621,15 @@
 
 					}
 
-					placeHolders = b64[ len - 2 ] === '=' ? 2 : b64[ len - 1 ] === '=' ? 1 : 0;
-					arr = new Arr( len * 3 / 4 - placeHolders );
-					l = placeHolders > 0 ? len - 4 : len;
-					var L = 0;
+					const placeHolders = b64[ len - 2 ] === '=' ? 2 : b64[ len - 1 ] === '=' ? 1 : 0;
+					const arr = new Arr( len * 3 / 4 - placeHolders );
+					const l = placeHolders > 0 ? len - 4 : len;
+					let L = 0;
+					let i, j;
 
 					for ( i = 0, j = 0; i < l; i += 4, j += 3 ) {
 
-						tmp = revLookup[ b64.charCodeAt( i ) ] << 18 | revLookup[ b64.charCodeAt( i + 1 ) ] << 12 | revLookup[ b64.charCodeAt( i + 2 ) ] << 6 | revLookup[ b64.charCodeAt( i + 3 ) ];
+						const tmp = revLookup[ b64.charCodeAt( i ) ] << 18 | revLookup[ b64.charCodeAt( i + 1 ) ] << 12 | revLookup[ b64.charCodeAt( i + 2 ) ] << 6 | revLookup[ b64.charCodeAt( i + 3 ) ];
 						arr[ L ++ ] = ( tmp & 0xFF0000 ) >> 16;
 						arr[ L ++ ] = ( tmp & 0xFF00 ) >> 8;
 						arr[ L ++ ] = tmp & 0xFF;
@@ -650,12 +638,12 @@
 
 					if ( placeHolders === 2 ) {
 
-						tmp = revLookup[ b64.charCodeAt( i ) ] << 2 | revLookup[ b64.charCodeAt( i + 1 ) ] >> 4;
+						const tmp = revLookup[ b64.charCodeAt( i ) ] << 2 | revLookup[ b64.charCodeAt( i + 1 ) ] >> 4;
 						arr[ L ++ ] = tmp & 0xFF;
 
 					} else if ( placeHolders === 1 ) {
 
-						tmp = revLookup[ b64.charCodeAt( i ) ] << 10 | revLookup[ b64.charCodeAt( i + 1 ) ] << 4 | revLookup[ b64.charCodeAt( i + 2 ) ] >> 2;
+						const tmp = revLookup[ b64.charCodeAt( i ) ] << 10 | revLookup[ b64.charCodeAt( i + 1 ) ] << 4 | revLookup[ b64.charCodeAt( i + 2 ) ] >> 2;
 						arr[ L ++ ] = tmp >> 8 & 0xFF;
 						arr[ L ++ ] = tmp & 0xFF;
 
@@ -667,7 +655,7 @@
 
 				function parseDataArray( ele, compressed ) {
 
-					var numBytes = 0;
+					let numBytes = 0;
 
 					if ( json.attributes.header_type === 'UInt64' ) {
 
@@ -677,20 +665,19 @@
 
 						numBytes = 4;
 
-					} // Check the format
+					}
 
+					let txt, content; // Check the format
 
 					if ( ele.attributes.format === 'binary' && compressed ) {
 
-						var rawData, content, byteData, blocks, cSizeStart, headerSize, padding, dataOffsets, currentOffset;
-
 						if ( ele.attributes.type === 'Float32' ) {
 
-							var txt = new Float32Array();
+							txt = new Float32Array();
 
 						} else if ( ele.attributes.type === 'Int64' ) {
 
-							var txt = new Int32Array();
+							txt = new Int32Array();
 
 						} // VTP data with the header has the following structure:
 						// [#blocks][#u-size][#p-size][#c-size-1][#c-size-2]...[#c-size-#blocks][DATA]
@@ -705,31 +692,31 @@
 						// computed by summing the compressed block sizes from preceding blocks according to the header.
 
 
-						rawData = ele[ '#text' ];
-						byteData = Base64toByteArray( rawData );
-						blocks = byteData[ 0 ];
+						const rawData = ele[ '#text' ];
+						const byteData = Base64toByteArray( rawData );
+						let blocks = byteData[ 0 ];
 
-						for ( var i = 1; i < numBytes - 1; i ++ ) {
+						for ( let i = 1; i < numBytes - 1; i ++ ) {
 
 							blocks = blocks | byteData[ i ] << i * numBytes;
 
 						}
 
-						headerSize = ( blocks + 3 ) * numBytes;
-						padding = headerSize % 3 > 0 ? 3 - headerSize % 3 : 0;
+						let headerSize = ( blocks + 3 ) * numBytes;
+						const padding = headerSize % 3 > 0 ? 3 - headerSize % 3 : 0;
 						headerSize = headerSize + padding;
-						dataOffsets = [];
-						currentOffset = headerSize;
+						const dataOffsets = [];
+						let currentOffset = headerSize;
 						dataOffsets.push( currentOffset ); // Get the blocks sizes after the compression.
 						// There are three blocks before c-size-i, so we skip 3*numBytes
 
-						cSizeStart = 3 * numBytes;
+						const cSizeStart = 3 * numBytes;
 
-						for ( var i = 0; i < blocks; i ++ ) {
+						for ( let i = 0; i < blocks; i ++ ) {
 
-							var currentBlockSize = byteData[ i * numBytes + cSizeStart ];
+							let currentBlockSize = byteData[ i * numBytes + cSizeStart ];
 
-							for ( var j = 1; j < numBytes - 1; j ++ ) {
+							for ( let j = 1; j < numBytes - 1; j ++ ) {
 
 								// Each data point consists of 8 bytes regardless of the header type
 								currentBlockSize = currentBlockSize | byteData[ i * numBytes + cSizeStart + j ] << j * 8;
@@ -741,9 +728,9 @@
 
 						}
 
-						for ( var i = 0; i < dataOffsets.length - 1; i ++ ) {
+						for ( let i = 0; i < dataOffsets.length - 1; i ++ ) {
 
-							var data = fflate.unzlibSync( byteData.slice( dataOffsets[ i ], dataOffsets[ i + 1 ] ) ); // eslint-disable-line no-undef
+							const data = fflate.unzlibSync( byteData.slice( dataOffsets[ i ], dataOffsets[ i + 1 ] ) ); // eslint-disable-line no-undef
 
 							content = data.buffer;
 
@@ -781,7 +768,7 @@
 
 						if ( ele.attributes.format === 'binary' && ! compressed ) {
 
-							var content = Base64toByteArray( ele[ '#text' ] ); //  VTP data for the uncompressed case has the following structure:
+							content = Base64toByteArray( ele[ '#text' ] ); //  VTP data for the uncompressed case has the following structure:
 							// [#bytes][DATA]
 							// where "[#bytes]" is an integer value specifying the number of bytes in the block of data following it.
 
@@ -791,7 +778,7 @@
 
 							if ( ele[ '#text' ] ) {
 
-								var content = ele[ '#text' ].split( /\s+/ ).filter( function ( el ) {
+								content = ele[ '#text' ].split( /\s+/ ).filter( function ( el ) {
 
 									if ( el !== '' ) return el;
 
@@ -799,7 +786,7 @@
 
 							} else {
 
-								var content = new Int32Array( 0 ).buffer;
+								content = new Int32Array( 0 ).buffer;
 
 							}
 
@@ -809,15 +796,15 @@
 
 						if ( ele.attributes.type === 'Float32' ) {
 
-							var txt = new Float32Array( content );
+							txt = new Float32Array( content );
 
 						} else if ( ele.attributes.type === 'Int32' ) {
 
-							var txt = new Int32Array( content );
+							txt = new Int32Array( content );
 
 						} else if ( ele.attributes.type === 'Int64' ) {
 
-							var txt = new Int32Array( content );
+							txt = new Int32Array( content );
 
 							if ( ele.attributes.format === 'binary' ) {
 
@@ -840,84 +827,47 @@
 				// Get Dom
 
 
-				var dom = null;
-
-				if ( window.DOMParser ) {
-
-					try {
-
-						dom = new DOMParser().parseFromString( stringFile, 'text/xml' );
-
-					} catch ( e ) {
-
-						dom = null;
-
-					}
-
-				} else if ( window.ActiveXObject ) {
-
-					try {
-
-						dom = new ActiveXObject( 'Microsoft.XMLDOM' ); // eslint-disable-line no-undef
-
-						dom.async = false;
-
-						if ( ! dom.loadXML() ) {
-
-							throw new Error( dom.parseError.reason + dom.parseError.srcText );
-
-						}
-
-					} catch ( e ) {
-
-						dom = null;
-
-					}
-
-				} else {
-
-					throw new Error( 'Cannot parse xml string!' );
+				const dom = new DOMParser().parseFromString( stringFile, 'application/xml' ); // Get the doc
 
-				} // Get the doc
+				const doc = dom.documentElement; // Convert to json
 
-
-				var doc = dom.documentElement; // Convert to json
-
-				var json = xmlToJson( doc );
-				var points = [];
-				var normals = [];
-				var indices = [];
+				const json = xmlToJson( doc );
+				let points = [];
+				let normals = [];
+				let indices = [];
 
 				if ( json.PolyData ) {
 
-					var piece = json.PolyData.Piece;
-					var compressed = json.attributes.hasOwnProperty( 'compressor' ); // Can be optimized
+					const piece = json.PolyData.Piece;
+					const compressed = json.attributes.hasOwnProperty( 'compressor' ); // Can be optimized
 					// Loop through the sections
 
-					var sections = [ 'PointData', 'Points', 'Strips', 'Polys' ]; // +['CellData', 'Verts', 'Lines'];
+					const sections = [ 'PointData', 'Points', 'Strips', 'Polys' ]; // +['CellData', 'Verts', 'Lines'];
 
-					var sectionIndex = 0,
-						numberOfSections = sections.length;
+					let sectionIndex = 0;
+					const numberOfSections = sections.length;
 
 					while ( sectionIndex < numberOfSections ) {
 
-						var section = piece[ sections[ sectionIndex ] ]; // If it has a DataArray in it
+						const section = piece[ sections[ sectionIndex ] ]; // If it has a DataArray in it
 
 						if ( section && section.DataArray ) {
 
 							// Depending on the number of DataArrays
+							let arr;
+
 							if ( Object.prototype.toString.call( section.DataArray ) === '[object Array]' ) {
 
-								var arr = section.DataArray;
+								arr = section.DataArray;
 
 							} else {
 
-								var arr = [ section.DataArray ];
+								arr = [ section.DataArray ];
 
 							}
 
-							var dataArrayIndex = 0,
-								numberOfDataArrays = arr.length;
+							let dataArrayIndex = 0;
+							const numberOfDataArrays = arr.length;
 
 							while ( dataArrayIndex < numberOfDataArrays ) {
 
@@ -936,18 +886,22 @@
 
 								// if iti is point data
 								case 'PointData':
-									var numberOfPoints = parseInt( piece.attributes.NumberOfPoints );
-									var normalsName = section.attributes.Normals;
+									{
 
-									if ( numberOfPoints > 0 ) {
+										const numberOfPoints = parseInt( piece.attributes.NumberOfPoints );
+										const normalsName = section.attributes.Normals;
 
-										for ( var i = 0, len = arr.length; i < len; i ++ ) {
+										if ( numberOfPoints > 0 ) {
 
-											if ( normalsName === arr[ i ].attributes.Name ) {
+											for ( let i = 0, len = arr.length; i < len; i ++ ) {
 
-												var components = arr[ i ].attributes.NumberOfComponents;
-												normals = new Float32Array( numberOfPoints * components );
-												normals.set( arr[ i ].text, 0 );
+												if ( normalsName === arr[ i ].attributes.Name ) {
+
+													const components = arr[ i ].attributes.NumberOfComponents;
+													normals = new Float32Array( numberOfPoints * components );
+													normals.set( arr[ i ].text, 0 );
+
+												}
 
 											}
 
@@ -959,13 +913,17 @@
 									// if it is points
 
 								case 'Points':
-									var numberOfPoints = parseInt( piece.attributes.NumberOfPoints );
+									{
 
-									if ( numberOfPoints > 0 ) {
+										const numberOfPoints = parseInt( piece.attributes.NumberOfPoints );
 
-										var components = section.DataArray.attributes.NumberOfComponents;
-										points = new Float32Array( numberOfPoints * components );
-										points.set( section.DataArray.text, 0 );
+										if ( numberOfPoints > 0 ) {
+
+											const components = section.DataArray.attributes.NumberOfComponents;
+											points = new Float32Array( numberOfPoints * components );
+											points.set( section.DataArray.text, 0 );
+
+										}
 
 									}
 
@@ -973,46 +931,50 @@
 									// if it is strips
 
 								case 'Strips':
-									var numberOfStrips = parseInt( piece.attributes.NumberOfStrips );
+									{
 
-									if ( numberOfStrips > 0 ) {
+										const numberOfStrips = parseInt( piece.attributes.NumberOfStrips );
 
-										var connectivity = new Int32Array( section.DataArray[ 0 ].text.length );
-										var offset = new Int32Array( section.DataArray[ 1 ].text.length );
-										connectivity.set( section.DataArray[ 0 ].text, 0 );
-										offset.set( section.DataArray[ 1 ].text, 0 );
-										var size = numberOfStrips + connectivity.length;
-										indices = new Uint32Array( 3 * size - 9 * numberOfStrips );
-										var indicesIndex = 0;
+										if ( numberOfStrips > 0 ) {
 
-										for ( var i = 0, len = numberOfStrips; i < len; i ++ ) {
+											const connectivity = new Int32Array( section.DataArray[ 0 ].text.length );
+											const offset = new Int32Array( section.DataArray[ 1 ].text.length );
+											connectivity.set( section.DataArray[ 0 ].text, 0 );
+											offset.set( section.DataArray[ 1 ].text, 0 );
+											const size = numberOfStrips + connectivity.length;
+											indices = new Uint32Array( 3 * size - 9 * numberOfStrips );
+											let indicesIndex = 0;
 
-											var strip = [];
+											for ( let i = 0, len = numberOfStrips; i < len; i ++ ) {
 
-											for ( var s = 0, len1 = offset[ i ], len0 = 0; s < len1 - len0; s ++ ) {
+												const strip = [];
 
-												strip.push( connectivity[ s ] );
-												if ( i > 0 ) len0 = offset[ i - 1 ];
+												for ( let s = 0, len1 = offset[ i ], len0 = 0; s < len1 - len0; s ++ ) {
 
-											}
+													strip.push( connectivity[ s ] );
+													if ( i > 0 ) len0 = offset[ i - 1 ];
+
+												}
 
-											for ( var j = 0, len1 = offset[ i ], len0 = 0; j < len1 - len0 - 2; j ++ ) {
+												for ( let j = 0, len1 = offset[ i ], len0 = 0; j < len1 - len0 - 2; j ++ ) {
 
-												if ( j % 2 ) {
+													if ( j % 2 ) {
 
-													indices[ indicesIndex ++ ] = strip[ j ];
-													indices[ indicesIndex ++ ] = strip[ j + 2 ];
-													indices[ indicesIndex ++ ] = strip[ j + 1 ];
+														indices[ indicesIndex ++ ] = strip[ j ];
+														indices[ indicesIndex ++ ] = strip[ j + 2 ];
+														indices[ indicesIndex ++ ] = strip[ j + 1 ];
 
-												} else {
+													} else {
 
-													indices[ indicesIndex ++ ] = strip[ j ];
-													indices[ indicesIndex ++ ] = strip[ j + 1 ];
-													indices[ indicesIndex ++ ] = strip[ j + 2 ];
+														indices[ indicesIndex ++ ] = strip[ j ];
+														indices[ indicesIndex ++ ] = strip[ j + 1 ];
+														indices[ indicesIndex ++ ] = strip[ j + 2 ];
 
-												}
+													}
 
-												if ( i > 0 ) len0 = offset[ i - 1 ];
+													if ( i > 0 ) len0 = offset[ i - 1 ];
+
+												}
 
 											}
 
@@ -1024,48 +986,52 @@
 									// if it is polys
 
 								case 'Polys':
-									var numberOfPolys = parseInt( piece.attributes.NumberOfPolys );
+									{
 
-									if ( numberOfPolys > 0 ) {
+										const numberOfPolys = parseInt( piece.attributes.NumberOfPolys );
 
-										var connectivity = new Int32Array( section.DataArray[ 0 ].text.length );
-										var offset = new Int32Array( section.DataArray[ 1 ].text.length );
-										connectivity.set( section.DataArray[ 0 ].text, 0 );
-										offset.set( section.DataArray[ 1 ].text, 0 );
-										var size = numberOfPolys + connectivity.length;
-										indices = new Uint32Array( 3 * size - 9 * numberOfPolys );
-										var indicesIndex = 0,
-											connectivityIndex = 0;
-										var i = 0,
-											len = numberOfPolys,
-											len0 = 0;
+										if ( numberOfPolys > 0 ) {
 
-										while ( i < len ) {
+											const connectivity = new Int32Array( section.DataArray[ 0 ].text.length );
+											const offset = new Int32Array( section.DataArray[ 1 ].text.length );
+											connectivity.set( section.DataArray[ 0 ].text, 0 );
+											offset.set( section.DataArray[ 1 ].text, 0 );
+											const size = numberOfPolys + connectivity.length;
+											indices = new Uint32Array( 3 * size - 9 * numberOfPolys );
+											let indicesIndex = 0,
+												connectivityIndex = 0;
+											let i = 0,
+												len0 = 0;
+											const len = numberOfPolys;
 
-											var poly = [];
-											var s = 0,
-												len1 = offset[ i ];
+											while ( i < len ) {
 
-											while ( s < len1 - len0 ) {
+												const poly = [];
+												let s = 0;
+												const len1 = offset[ i ];
 
-												poly.push( connectivity[ connectivityIndex ++ ] );
-												s ++;
+												while ( s < len1 - len0 ) {
 
-											}
+													poly.push( connectivity[ connectivityIndex ++ ] );
+													s ++;
 
-											var j = 1;
+												}
 
-											while ( j < len1 - len0 - 1 ) {
+												let j = 1;
 
-												indices[ indicesIndex ++ ] = poly[ 0 ];
-												indices[ indicesIndex ++ ] = poly[ j ];
-												indices[ indicesIndex ++ ] = poly[ j + 1 ];
-												j ++;
+												while ( j < len1 - len0 - 1 ) {
 
-											}
+													indices[ indicesIndex ++ ] = poly[ 0 ];
+													indices[ indicesIndex ++ ] = poly[ j ];
+													indices[ indicesIndex ++ ] = poly[ j + 1 ];
+													j ++;
+
+												}
+
+												i ++;
+												len0 = offset[ i - 1 ];
 
-											i ++;
-											len0 = offset[ i - 1 ];
+											}
 
 										}
 
@@ -1084,7 +1050,7 @@
 
 					}
 
-					var geometry = new THREE.BufferGeometry();
+					const geometry = new THREE.BufferGeometry();
 					geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
 					geometry.setAttribute( 'position', new THREE.BufferAttribute( points, 3 ) );
 
@@ -1105,7 +1071,7 @@
 			} // get the 5 first lines of the files to check if there is the key word binary
 
 
-			var meta = THREE.LoaderUtils.decodeText( new Uint8Array( data, 0, 250 ) ).split( '\n' );
+			const meta = THREE.LoaderUtils.decodeText( new Uint8Array( data, 0, 250 ) ).split( '\n' );
 
 			if ( meta[ 0 ].indexOf( 'xml' ) !== - 1 ) {
 

examples/js/renderers/CSS2DRenderer.js

@@ -126,11 +126,6 @@
 
 						}
 
-						const objectData = {
-							distanceToCameraSquared: getDistanceToSquared( camera, object )
-						};
-						cache.objects.set( object, objectData );
-
 						if ( element.parentNode !== domElement ) {
 
 							domElement.appendChild( element );
@@ -141,6 +136,11 @@
 
 					}
 
+					const objectData = {
+						distanceToCameraSquared: getDistanceToSquared( camera, object )
+					};
+					cache.objects.set( object, objectData );
+
 				}
 
 				for ( let i = 0, l = object.children.length; i < l; i ++ ) {

examples/js/utils/BufferGeometryUtils.js

@@ -763,7 +763,7 @@
 
 			}
 
-		} else if ( positionAttribute !== undefined ) {
+		} else {
 
 			// non-indexed buffer geometry
 			if ( Array.isArray( material ) ) {