Examples: More clean up.

examples/webgl_loader_3dm.html

@@ -21,9 +21,9 @@
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var container, controls;
-			var camera, scene, renderer;
-			var gui;
+			let container, controls;
+			let camera, scene, renderer;
+			let gui;
 
 			init();
 			animate();
@@ -39,13 +39,13 @@
 
 				scene = new THREE.Scene();
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff );
 				directionalLight.position.set( 0, 0, 2 );
 				directionalLight.castShadow = true;
 				directionalLight.intensity = 2;
 				scene.add( directionalLight );
 
-				var loader = new Rhino3dmLoader();
+				const loader = new Rhino3dmLoader();
 				loader.setLibraryPath( 'jsm/libs/rhino3dm/' );
 
 				loader.load( 'models/3dm/Rhino_Logo.3dm', function ( object ) {
@@ -55,8 +55,8 @@
 
 				} );
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -71,8 +71,8 @@
 
 			function resize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -93,15 +93,15 @@
 			function initGUI( layers ) {
 
 				gui = new GUI( { width: 300 } );
-				var layersControl = gui.addFolder( 'layers' );
+				const layersControl = gui.addFolder( 'layers' );
 				layersControl.open();
 
-				for ( var i = 0; i < layers.length; i ++ ) {
+				for ( let i = 0; i < layers.length; i ++ ) {
 
-					var layer = layers[ i ];
+					const layer = layers[ i ];
 					layersControl.add( layer, 'visible' ).name( layer.name ).onChange( function ( val ) {
 
-						var name = this.object.name;
+						const name = this.object.name;
 
 						scene.traverse( function ( child ) {
 
@@ -109,7 +109,7 @@
 
 								if ( 'layerIndex' in child.userData.attributes ) {
 
-									var layerName = layers[ child.userData.attributes.layerIndex ].name;
+									const layerName = layers[ child.userData.attributes.layerIndex ].name;
 
 									if ( layerName === name ) {
 

examples/webgl_loader_3ds.html

@@ -19,8 +19,8 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { TDSLoader } from './jsm/loaders/TDSLoader.js';
 
-			var container, controls;
-			var camera, scene, renderer;
+			let container, controls;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -36,15 +36,14 @@
 				scene = new THREE.Scene();
 				scene.add( new THREE.HemisphereLight() );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
+				const directionalLight = new THREE.DirectionalLight( 0xffeedd );
 				directionalLight.position.set( 0, 0, 2 );
 				scene.add( directionalLight );
 
 				//3ds files dont store normal maps
-				var loader = new THREE.TextureLoader();
-				var normal = loader.load( 'models/3ds/portalgun/textures/normal.jpg' );
+				const normal = new THREE.TextureLoader().load( 'models/3ds/portalgun/textures/normal.jpg' );
 
-				var loader = new TDSLoader( );
+				const loader = new TDSLoader( );
 				loader.setResourcePath( 'models/3ds/portalgun/textures/' );
 				loader.load( 'models/3ds/portalgun/portalgun.3ds', function ( object ) {
 

examples/webgl_loader_3mf.html

@@ -27,13 +27,13 @@
 			import { ThreeMFLoader } from './jsm/loaders/3MFLoader.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var camera, scene, renderer, object, loader, controls;
+			let camera, scene, renderer, object, loader, controls;
 
-			var params = {
+			const params = {
 				asset: 'cube_gears'
 			};
 
-			var assets = [
+			const assets = [
 				'cube_gears',
 				'facecolors',
 				'multipletextures',
@@ -69,15 +69,15 @@
 				controls.enablePan = false;
 				controls.update();
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 
-				var manager = new THREE.LoadingManager();
+				const manager = new THREE.LoadingManager();
 
 				manager.onLoad = function () {
 
-					var aabb = new THREE.Box3().setFromObject( object );
-					var center = aabb.getCenter( new THREE.Vector3() );
+					const aabb = new THREE.Box3().setFromObject( object );
+					const center = aabb.getCenter( new THREE.Vector3() );
 
 					object.position.x += ( object.position.x - center.x );
 					object.position.y += ( object.position.y - center.y );
@@ -97,7 +97,7 @@
 
 				//
 
-				var gui = new GUI( { width: 300 } );
+				const gui = new GUI( { width: 300 } );
 				gui.add( params, 'asset', assets ).onChange( function ( value ) {
 
 					loadAsset( value );

examples/webgl_loader_3mf_materials.html

@@ -24,7 +24,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ThreeMFLoader } from './jsm/loaders/3MFLoader.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 
@@ -40,11 +40,11 @@
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 100, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( - 0, 40, 50 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 50;
@@ -56,13 +56,13 @@
 				dirLight.shadow.mapSize.set( 1024, 1024 );
 				scene.add( dirLight );
 
-				// scene.add( new CameraHelper( dirLight.shadow.camera ) );
+				// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
 
 				//
 
-				var manager = new THREE.LoadingManager();
+				const manager = new THREE.LoadingManager();
 
-				var loader = new ThreeMFLoader( manager );
+				const loader = new ThreeMFLoader( manager );
 				loader.load( './models/3mf/truck.3mf', function ( object ) {
 
 					object.quaternion.setFromEuler( new THREE.Euler( - Math.PI / 2, 0, 0 ) ); 	// z-up conversion
@@ -87,7 +87,7 @@
 
 				//
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				const ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.position.y = 11;
 				ground.receiveShadow = true;
@@ -105,7 +105,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 50;
 				controls.maxDistance = 200;

examples/webgl_loader_amf.html

@@ -26,7 +26,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { AMFLoader } from './jsm/loaders/AMFLoader.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 
@@ -48,7 +48,7 @@
 
 				scene.add( camera );
 
-				var grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
+				const grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
 				grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI / 180 ) );
 				scene.add( grid );
 
@@ -57,7 +57,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var loader = new AMFLoader();
+				const loader = new AMFLoader();
 				loader.load( './models/amf/rook.amf', function ( amfobject ) {
 
 					scene.add( amfobject );
@@ -65,7 +65,7 @@
 
 				} );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.target.set( 0, 1.2, 2 );
 				controls.update();

examples/webgl_loader_assimp.html

@@ -25,9 +25,9 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { AssimpLoader } from './jsm/loaders/AssimpLoader.js';
 
-			var container, stats;
-			var camera, scene, renderer;
-			var animation;
+			let container, stats;
+			let camera, scene, renderer;
+			let animation;
 
 			init();
 
@@ -41,11 +41,11 @@
 
 				scene = new THREE.Scene();
 
-				var ambient = new THREE.HemisphereLight( 0x8888fff, 0xff8888, 0.5 );
+				const ambient = new THREE.HemisphereLight( 0x8888fff, 0xff8888, 0.5 );
 				ambient.position.set( 0, 1, 0 );
 				scene.add( ambient );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 0, 4, 4 ).normalize();
 				scene.add( light );
 
@@ -54,17 +54,17 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 750;
 				controls.maxDistance = 2500;
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var loader = new AssimpLoader();
+				const loader = new AssimpLoader();
 				loader.load( './models/assimp/octaminator/Octaminator.assimp', function ( result ) {
 
-					var object = result.object;
+					const object = result.object;
 
 					object.position.y = - 100;
 					object.rotation.x = Math.PI / 2;

examples/webgl_loader_bvh.html

@@ -28,21 +28,21 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { BVHLoader } from './jsm/loaders/BVHLoader.js';
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
-			var camera, controls, scene, renderer;
-			var mixer, skeletonHelper;
+			let camera, controls, scene, renderer;
+			let mixer, skeletonHelper;
 
 			init();
 			animate();
 
-			var loader = new BVHLoader();
+			const loader = new BVHLoader();
 			loader.load( "models/bvh/pirouette.bvh", function ( result ) {
 
 				skeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );
 				skeletonHelper.skeleton = result.skeleton; // allow animation mixer to bind to THREE.SkeletonHelper directly
 
-				var boneContainer = new THREE.Group();
+				const boneContainer = new THREE.Group();
 				boneContainer.add( result.skeleton.bones[ 0 ] );
 
 				scene.add( skeletonHelper );
@@ -91,7 +91,7 @@
 
 				requestAnimationFrame( animate );
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgl_loader_collada.html

@@ -22,8 +22,8 @@
 
 			import { ColladaLoader } from './jsm/loaders/ColladaLoader.js';
 
-			var container, stats, clock;
-			var camera, scene, renderer, elf;
+			let container, stats, clock;
+			let camera, scene, renderer, elf;
 
 			init();
 			animate();
@@ -42,7 +42,7 @@
 
 				// loading manager
 
-				var loadingManager = new THREE.LoadingManager( function () {
+				const loadingManager = new THREE.LoadingManager( function () {
 
 					scene.add( elf );
 
@@ -50,7 +50,7 @@
 
 				// collada
 
-				var loader = new ColladaLoader( loadingManager );
+				const loader = new ColladaLoader( loadingManager );
 				loader.load( './models/collada/elf/elf.dae', function ( collada ) {
 
 					elf = collada.scene;
@@ -59,10 +59,10 @@
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
 				directionalLight.position.set( 1, 1, 0 ).normalize();
 				scene.add( directionalLight );
 
@@ -104,7 +104,7 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( elf !== undefined ) {
 

examples/webgl_loader_collada_kinematics.html

@@ -21,17 +21,17 @@
 			import { TWEEN } from './jsm/libs/tween.module.min.js';
 			import { ColladaLoader } from './jsm/loaders/ColladaLoader.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
-			var particleLight;
-			var dae;
+			let camera, scene, renderer;
+			let particleLight;
+			let dae;
 
-			var kinematics;
-			var kinematicsTween;
-			var tweenParameters = {};
+			let kinematics;
+			let kinematicsTween;
+			const tweenParameters = {};
 
-			var loader = new ColladaLoader();
+			const loader = new ColladaLoader();
 			// loader.load( './models/collada/kawada-hironx.dae', function ( collada ) {
 			loader.load( './models/collada/abb_irb52_7_120.dae', function ( collada ) {
 
@@ -70,7 +70,7 @@
 
 				// Grid
 
-				var grid = new THREE.GridHelper( 20, 20, 0x888888, 0x444444 );
+				const grid = new THREE.GridHelper( 20, 20, 0x888888, 0x444444 );
 				scene.add( grid );
 
 				// Add the COLLADA
@@ -82,10 +82,10 @@
 
 				// Lights
 
-				var light = new THREE.HemisphereLight( 0xffeeee, 0x111122 );
+				const light = new THREE.HemisphereLight( 0xffeeee, 0x111122 );
 				scene.add( light );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.3 );
+				const pointLight = new THREE.PointLight( 0xffffff, 0.3 );
 				particleLight.add( pointLight );
 
 				renderer = new THREE.WebGLRenderer();
@@ -106,21 +106,21 @@
 
 			function setupTween() {
 
-				var duration = THREE.MathUtils.randInt( 1000, 5000 );
+				const duration = THREE.MathUtils.randInt( 1000, 5000 );
 
-				var target = {};
+				const target = {};
 
-				for ( var prop in kinematics.joints ) {
+				for ( const prop in kinematics.joints ) {
 
 					if ( kinematics.joints.hasOwnProperty( prop ) ) {
 
 						if ( ! kinematics.joints[ prop ].static ) {
 
-							var joint = kinematics.joints[ prop ];
+							const joint = kinematics.joints[ prop ];
 
-							var old = tweenParameters[ prop ];
+							const old = tweenParameters[ prop ];
 
-							var position = old ? old : joint.zeroPosition;
+							const position = old ? old : joint.zeroPosition;
 
 							tweenParameters[ prop ] = position;
 
@@ -136,7 +136,7 @@
 
 				kinematicsTween.onUpdate( function ( object ) {
 
-					for ( var prop in kinematics.joints ) {
+					for ( const prop in kinematics.joints ) {
 
 						if ( kinematics.joints.hasOwnProperty( prop ) ) {
 
@@ -181,7 +181,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.0001;
+				const timer = Date.now() * 0.0001;
 
 				camera.position.x = Math.cos( timer ) * 20;
 				camera.position.y = 10;

examples/webgl_loader_collada_skinning.html

@@ -23,8 +23,8 @@
 			import { ColladaLoader } from './jsm/loaders/ColladaLoader.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container, stats, clock, controls;
-			var camera, scene, renderer, mixer;
+			let container, stats, clock, controls;
+			let camera, scene, renderer, mixer;
 
 			init();
 			animate();
@@ -42,11 +42,11 @@
 
 				// collada
 
-				var loader = new ColladaLoader();
+				const loader = new ColladaLoader();
 				loader.load( './models/collada/stormtrooper/stormtrooper.dae', function ( collada ) {
 
-					var animations = collada.animations;
-					var avatar = collada.scene;
+					const animations = collada.animations;
+					const avatar = collada.scene;
 
 					avatar.traverse( function ( node ) {
 
@@ -67,15 +67,15 @@
 
 				//
 
-				var gridHelper = new THREE.GridHelper( 10, 20, 0x888888, 0x444444 );
+				const gridHelper = new THREE.GridHelper( 10, 20, 0x888888, 0x444444 );
 				scene.add( gridHelper );
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				scene.add( camera );
 				camera.add( pointLight );
 
@@ -126,7 +126,7 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( mixer !== undefined ) {
 

examples/webgl_loader_draco.html

@@ -19,12 +19,12 @@
 
 		import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
-		var camera, scene, renderer;
+		let camera, scene, renderer;
 
-		var container = document.querySelector( '#container' );
+		const container = document.querySelector( '#container' );
 
 		// Configure and create Draco decoder.
-		var dracoLoader = new DRACOLoader();
+		const dracoLoader = new DRACOLoader();
 		dracoLoader.setDecoderPath( 'js/libs/draco/' );
 		dracoLoader.setDecoderConfig( { type: 'js' } );
 
@@ -41,7 +41,7 @@
 			scene.fog = new THREE.Fog( 0x443333, 1, 4 );
 
 			// Ground
-			var plane = new THREE.Mesh(
+			const plane = new THREE.Mesh(
 				new THREE.PlaneBufferGeometry( 8, 8 ),
 				new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
 			);
@@ -51,22 +51,22 @@
 			scene.add( plane );
 
 			// Lights
-			var light = new THREE.HemisphereLight( 0x443333, 0x111122 );
-			scene.add( light );
+			const hemiLight = new THREE.HemisphereLight( 0x443333, 0x111122 );
+			scene.add( hemiLight );
 
-			var light = new THREE.SpotLight();
-			light.angle = Math.PI / 16;
-			light.penumbra = 0.5;
-			light.castShadow = true;
-			light.position.set( - 1, 1, 1 );
-			scene.add( light );
+			const spotLight = new THREE.SpotLight();
+			spotLight.angle = Math.PI / 16;
+			spotLight.penumbra = 0.5;
+			spotLight.castShadow = true;
+			spotLight.position.set( - 1, 1, 1 );
+			scene.add( spotLight );
 
 			dracoLoader.load( 'models/draco/bunny.drc', function ( geometry ) {
 
 				geometry.computeVertexNormals();
 
-				var material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
-				var mesh = new THREE.Mesh( geometry, material );
+				const material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
+				const mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
@@ -106,7 +106,7 @@
 
 		function render() {
 
-			var timer = Date.now() * 0.0003;
+			const timer = Date.now() * 0.0003;
 
 			camera.position.x = Math.sin( timer ) * 0.5;
 			camera.position.z = Math.cos( timer ) * 0.5;

examples/webgl_loader_fbx.html

@@ -22,19 +22,18 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
-			var container, stats, controls;
-			var camera, scene, renderer, light;
+			let camera, scene, renderer, stats;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
-			var mixer;
+			let mixer;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -44,39 +43,39 @@
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
 
-				light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
-				light.position.set( 0, 200, 0 );
-				scene.add( light );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				hemiLight.position.set( 0, 200, 0 );
+				scene.add( hemiLight );
 
-				light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 200, 100 );
-				light.castShadow = true;
-				light.shadow.camera.top = 180;
-				light.shadow.camera.bottom = - 100;
-				light.shadow.camera.left = - 120;
-				light.shadow.camera.right = 120;
-				scene.add( light );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				dirLight.position.set( 0, 200, 100 );
+				dirLight.castShadow = true;
+				dirLight.shadow.camera.top = 180;
+				dirLight.shadow.camera.bottom = - 100;
+				dirLight.shadow.camera.left = - 120;
+				dirLight.shadow.camera.right = 120;
+				scene.add( dirLight );
 
-				// scene.add( new CameraHelper( light.shadow.camera ) );
+				// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
 
 				// ground
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
-				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				scene.add( grid );
 
 				// model
-				var loader = new FBXLoader();
+				const loader = new FBXLoader();
 				loader.load( 'models/fbx/Samba Dancing.fbx', function ( object ) {
 
 					mixer = new THREE.AnimationMixer( object );
 
-					var action = mixer.clipAction( object.animations[ 0 ] );
+					const action = mixer.clipAction( object.animations[ 0 ] );
 					action.play();
 
 					object.traverse( function ( child ) {
@@ -100,7 +99,7 @@
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 100, 0 );
 				controls.update();
 
@@ -127,7 +126,7 @@
 
 				requestAnimationFrame( animate );
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgl_loader_fbx_nurbs.html

@@ -21,15 +21,14 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
-			var container, stats, controls;
-			var camera, scene, renderer, light;
+			let camera, scene, renderer, stats;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -37,16 +36,16 @@
 
 				scene = new THREE.Scene();
 
-				light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
-				light.position.set( 0, 1, 0 );
-				scene.add( light );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				hemiLight.position.set( 0, 1, 0 );
+				scene.add( hemiLight );
 
-				light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 1, 0 );
-				scene.add( light );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				dirLight.position.set( 0, 1, 0 );
+				scene.add( dirLight );
 
 				// grid
-				var gridHelper = new THREE.GridHelper( 28, 28, 0x303030, 0x303030 );
+				const gridHelper = new THREE.GridHelper( 28, 28, 0x303030, 0x303030 );
 				scene.add( gridHelper );
 
 				// stats
@@ -54,7 +53,7 @@
 				container.appendChild( stats.dom );
 
 				// model
-				var loader = new FBXLoader();
+				const loader = new FBXLoader();
 				loader.load( 'models/fbx/nurbs.fbx', function ( object ) {
 
 					scene.add( object );
@@ -66,7 +65,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 12, 0 );
 				controls.update();
 

examples/webgl_loader_gcode.html

@@ -19,15 +19,14 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GCodeLoader } from './jsm/loaders/GCodeLoader.js';
 
-			var container;
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			render();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -35,7 +34,7 @@
 
 				scene = new THREE.Scene();
 
-				var loader = new GCodeLoader();
+				const loader = new GCodeLoader();
 				loader.load( 'models/gcode/benchy.gcode', function ( object ) {
 
 					object.position.set( - 100, - 20, 100 );
@@ -50,7 +49,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render ); // use if there is no animation loop
 				controls.minDistance = 10;
 				controls.maxDistance = 100;

examples/webgl_loader_gltf.html

@@ -24,15 +24,14 @@
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 			import { RoughnessMipmapper } from './jsm/utils/RoughnessMipmapper.js';
 
-			var container, controls;
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			render();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
@@ -45,7 +44,7 @@
 					.setPath( 'textures/equirectangular/' )
 					.load( 'royal_esplanade_1k.hdr', function ( texture ) {
 
-						var envMap = pmremGenerator.fromEquirectangular( texture ).texture;
+						const envMap = pmremGenerator.fromEquirectangular( texture ).texture;
 
 						scene.background = envMap;
 						scene.environment = envMap;
@@ -58,9 +57,9 @@
 						// model
 
 						// use of RoughnessMipmapper is optional
-						var roughnessMipmapper = new RoughnessMipmapper( renderer );
+						const roughnessMipmapper = new RoughnessMipmapper( renderer );
 
-						var loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
+						const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
 						loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
 
 							gltf.scene.traverse( function ( child ) {
@@ -92,10 +91,10 @@
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
-				controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render ); // use if there is no animation loop
 				controls.minDistance = 2;
 				controls.maxDistance = 10;

examples/webgl_loader_gltf_extensions.html

@@ -25,13 +25,13 @@
 			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			var orbitControls;
-			var camera, scene, renderer, loader;
-			var gltf, background, envMap, mixer, gui, extensionControls;
+			let orbitControls;
+			let camera, scene, renderer, loader;
+			let gltf, background, envMap, mixer, gui, extensionControls;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
-			var scenes = {
+			const scenes = {
 				Boombox: {
 					name: 'BoomBox (PBR)',
 					url: './models/gltf/BoomBox/%s/BoomBox.gltf',
@@ -137,7 +137,7 @@
 				},
 			};
 
-			var state = {
+			const state = {
 				scene: Object.keys( scenes )[ 0 ],
 				extension: scenes[ Object.keys( scenes )[ 0 ] ].extensions[ 0 ],
 				playAnimation: true
@@ -176,14 +176,14 @@
 
 					} );
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
 			}
 
 			function initScene( sceneInfo ) {
 
-				var descriptionEl = document.getElementById( 'description' );
+				const descriptionEl = document.getElementById( 'description' );
 
 				if ( sceneInfo.author && sceneInfo.authorURL ) {
 
@@ -197,14 +197,14 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.001, 1000 );
 				scene.add( camera );
 
-				var spot1;
+				let spot1;
 
 				if ( sceneInfo.addLights ) {
 
-					var ambient = new THREE.AmbientLight( 0x222222 );
+					const ambient = new THREE.AmbientLight( 0x222222 );
 					scene.add( ambient );
 
-					var directionalLight = new THREE.DirectionalLight( 0xdddddd, 4 );
+					const directionalLight = new THREE.DirectionalLight( 0xdddddd, 4 );
 					directionalLight.position.set( 0, 0, 1 ).normalize();
 					scene.add( directionalLight );
 
@@ -241,8 +241,8 @@
 
 				if ( sceneInfo.addGround ) {
 
-					var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xFFFFFF } );
-					var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 512, 512 ), groundMaterial );
+					const groundMaterial = new THREE.MeshPhongMaterial( { color: 0xFFFFFF } );
+					const ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 512, 512 ), groundMaterial );
 					ground.receiveShadow = !! sceneInfo.shadows;
 
 					if ( sceneInfo.groundPos ) {
@@ -263,13 +263,13 @@
 
 				loader = new GLTFLoader();
 
-				var dracoLoader = new DRACOLoader();
+				const dracoLoader = new DRACOLoader();
 				dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 				loader.setDRACOLoader( dracoLoader );
 
 				loader.setDDSLoader( new DDSLoader() );
 
-				var url = sceneInfo.url.replace( /%s/g, state.extension );
+				let url = sceneInfo.url.replace( /%s/g, state.extension );
 
 				if ( state.extension === 'glTF-Binary' ) {
 
@@ -277,13 +277,13 @@
 
 				}
 
-				var loadStartTime = performance.now();
+				const loadStartTime = performance.now();
 
 				loader.load( url, function ( data ) {
 
 					gltf = data;
 
-					var object = gltf.scene;
+					const object = gltf.scene;
 
 					console.info( 'Load time: ' + ( performance.now() - loadStartTime ).toFixed( 2 ) + ' ms.' );
 
@@ -347,15 +347,15 @@
 
 					} );
 
-					var animations = gltf.animations;
+					const animations = gltf.animations;
 
 					if ( animations && animations.length ) {
 
 						mixer = new THREE.AnimationMixer( object );
 
-						for ( var i = 0; i < animations.length; i ++ ) {
+						for ( let i = 0; i < animations.length; i ++ ) {
 
-							var animation = animations[ i ];
+							const animation = animations[ i ];
 
 							// There's .3333 seconds junk at the tail of the Monster animation that
 							// keeps it from looping cleanly. Clip it at 3 seconds
@@ -365,7 +365,7 @@
 
 							}
 
-							var action = mixer.clipAction( animation );
+							const action = mixer.clipAction( animation );
 
 							if ( state.playAnimation ) action.play();
 
@@ -416,10 +416,10 @@
 				gui = new GUI( { width: 330 } );
 				gui.domElement.parentElement.style.zIndex = 101;
 
-				var sceneCtrl = gui.add( state, 'scene', Object.keys( scenes ) );
+				const sceneCtrl = gui.add( state, 'scene', Object.keys( scenes ) );
 				sceneCtrl.onChange( reload );
 
-				var animCtrl = gui.add( state, 'playAnimation' );
+				const animCtrl = gui.add( state, 'playAnimation' );
 				animCtrl.onChange( toggleAnimations );
 
 				updateGUI();
@@ -430,7 +430,7 @@
 
 				if ( extensionControls ) extensionControls.remove();
 
-				var sceneInfo = scenes[ state.scene ];
+				const sceneInfo = scenes[ state.scene ];
 
 				if ( sceneInfo.extensions.indexOf( state.extension ) === - 1 ) {
 
@@ -445,10 +445,10 @@
 
 			function toggleAnimations() {
 
-				for ( var i = 0; i < gltf.animations.length; i ++ ) {
+				for ( let i = 0; i < gltf.animations.length; i ++ ) {
 
-					var clip = gltf.animations[ i ];
-					var action = mixer.existingAction( clip );
+					const clip = gltf.animations[ i ];
+					const action = mixer.existingAction( clip );
 
 					state.playAnimation ? action.play() : action.stop();
 

examples/webgl_loader_imagebitmap.html

@@ -15,10 +15,8 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var container;
-
-			var camera, scene, renderer;
-			var group, cubes;
+			let camera, scene, renderer;
+			let group, cubes;
 
 			init();
 			animate();
@@ -29,8 +27,8 @@
 					.setOptions( { imageOrientation: 'none' } )
 					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function ( imageBitmap ) {
 
-						var texture = new THREE.CanvasTexture( imageBitmap );
-						var material = new THREE.MeshBasicMaterial( { map: texture } );
+						const texture = new THREE.CanvasTexture( imageBitmap );
+						const material = new THREE.MeshBasicMaterial( { map: texture } );
 
 						/* ImageBitmap should be disposed when done with it
 						   Can't be done until it's actually uploaded to WebGLTexture */
@@ -57,19 +55,19 @@
 					.setCrossOrigin( '*' )
 					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function ( image ) {
 
-						var texture = new THREE.CanvasTexture( image );
-						var material = new THREE.MeshBasicMaterial( { color: 0xff8888, map: texture } );
+						const texture = new THREE.CanvasTexture( image );
+						const material = new THREE.MeshBasicMaterial( { color: 0xff8888, map: texture } );
 						addCube( material );
 
 					} );
 
 			}
 
-			var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+			const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 
 			function addCube( material ) {
 
-				var cube = new THREE.Mesh( geometry, material );
+				const cube = new THREE.Mesh( geometry, material );
 				cube.position.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 				cube.rotation.set( Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI );
 				cubes.add( cube );
@@ -78,7 +76,7 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				// CAMERA

examples/webgl_loader_kmz.html

@@ -19,7 +19,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { KMZLoader } from './jsm/loaders/KMZLoader.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 
@@ -28,7 +28,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x999999 );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0.5, 1.0, 0.5 ).normalize();
 
 				scene.add( light );
@@ -40,7 +40,7 @@
 
 				scene.add( camera );
 
-				var grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
+				const grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
 				scene.add( grid );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -48,7 +48,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var loader = new KMZLoader();
+				const loader = new KMZLoader();
 				loader.load( './models/kmz/Box.kmz', function ( kmz ) {
 
 					kmz.scene.position.y = 0.5;
@@ -57,7 +57,7 @@
 
 				} );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.update();
 

examples/webgl_loader_ldraw.html

@@ -29,17 +29,17 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { LDrawLoader } from './jsm/loaders/LDrawLoader.js';
 
-			var container, progressBarDiv;
+			let container, progressBarDiv;
 
-			var camera, scene, renderer, controls, gui, guiData;
+			let camera, scene, renderer, controls, gui, guiData;
 
-			var modelFileList, model, textureCube;
+			let model, textureCube;
 
-			var envMapActivated = false;
+			let envMapActivated = false;
 
-			var ldrawPath = 'models/ldraw/officialLibrary/';
+			const ldrawPath = 'models/ldraw/officialLibrary/';
 
-			var modelFileList = {
+			const modelFileList = {
 				'Car': 'models/car.ldr_Packed.mpd',
 				'Lunar Vehicle': 'models/1621-1-LunarMPVVehicle.mpd_Packed.mpd',
 				'Radar Truck': 'models/889-1-RadarTruck.mpd_Packed.mpd',
@@ -75,10 +75,10 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xdeebed );
 
-				var ambientLight = new THREE.AmbientLight( 0xdeebed, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xdeebed, 0.4 );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( - 1000, 1200, 1500 );
 				scene.add( directionalLight );
 
@@ -139,8 +139,7 @@
 
 						}
 
-					}
-					else if ( c.isGroup ) {
+					} else if ( c.isGroup ) {
 
 						// Hide objects with construction step > gui setting
 						c.visible = c.userData.constructionStep <= guiData.constructionStep;
@@ -164,7 +163,7 @@
 				updateProgressBar( 0 );
 				showProgressBar();
 
-				var lDrawLoader = new LDrawLoader();
+				const lDrawLoader = new LDrawLoader();
 				lDrawLoader.separateObjects = guiData.separateObjects;
 				lDrawLoader.smoothNormals = guiData.smoothNormals;
 				lDrawLoader
@@ -186,15 +185,15 @@
 
 						// Adjust materials
 
-						var materials = lDrawLoader.materials;
+						const materials = lDrawLoader.materials;
 
 						if ( envMapActivated ) {
 
 							if ( ! textureCube ) {
 
 								// Envmap texture
-								var r = "textures/cube/Bridge2/";
-								var urls = [ r + "posx.jpg", r + "negx.jpg",
+								const r = "textures/cube/Bridge2/";
+								const urls = [ r + "posx.jpg", r + "negx.jpg",
 									r + "posy.jpg", r + "negy.jpg",
 									r + "posz.jpg", r + "negz.jpg" ];
 								textureCube = new THREE.CubeTextureLoader().load( urls );
@@ -202,9 +201,9 @@
 
 							}
 
-							for ( var i = 0, n = materials.length; i < n; i ++ ) {
+							for ( let i = 0, n = materials.length; i < n; i ++ ) {
 
-								var material = materials[ i ];
+								const material = materials[ i ];
 
 								if ( material.userData.canHaveEnvMap ) {
 
@@ -222,9 +221,9 @@
 
 						// Adjust camera and light
 
-						var bbox = new THREE.Box3().setFromObject( model );
-						var size = bbox.getSize( new THREE.Vector3() );
-						var radius = Math.max( size.x, Math.max( size.y, size.z ) ) * 0.5;
+						const bbox = new THREE.Box3().setFromObject( model );
+						const size = bbox.getSize( new THREE.Vector3() );
+						const radius = Math.max( size.x, Math.max( size.y, size.z ) ) * 0.5;
 
 						if ( resetCamera ) {
 
@@ -256,6 +255,7 @@
 				if ( gui ) {
 
 					gui.destroy();
+
 				}
 
 				gui = new GUI();
@@ -266,7 +266,7 @@
 
 				} );
 
-				gui.add( guiData, 'separateObjects' ).name( 'Separate Objects' ).onChange( function ( value ) {
+				gui.add( guiData, 'separateObjects' ).name( 'Separate Objects' ).onChange( function () {
 
 					reloadObject( false );
 
@@ -274,26 +274,26 @@
 
 				if ( guiData.separateObjects ) {
 
-					if ( model.userData.numConstructionSteps > 1  ) {
+					if ( model.userData.numConstructionSteps > 1 ) {
 
 						gui.add( guiData, 'constructionStep', 0, model.userData.numConstructionSteps - 1 ).step( 1 ).name( 'Construction step' ).onChange( updateObjectsVisibility );
 
-					}
-					else {
+					} else {
 
 						gui.add( guiData, 'noConstructionSteps' ).name( 'Construction step' ).onChange( updateObjectsVisibility );
 
 					}
+
 				}
 
-				gui.add( guiData, 'envMapActivated' ).name( 'Env. map' ).onChange( function changeEnvMap ( value ) {
+				gui.add( guiData, 'envMapActivated' ).name( 'Env. map' ).onChange( function changeEnvMap( value ) {
 
 					envMapActivated = value;
 					reloadObject( false );
 
 				} );
 
-				gui.add( guiData, 'smoothNormals' ).name( 'Smooth Normals' ).onChange( function changeNormals ( value ) {
+				gui.add( guiData, 'smoothNormals' ).name( 'Smooth Normals' ).onChange( function changeNormals() {
 
 					reloadObject( false );
 
@@ -333,7 +333,7 @@
 
 			function onError() {
 
-				var message = "Error loading model";
+				const message = "Error loading model";
 				progressBarDiv.innerText = message;
 				console.log( message );
 

examples/webgl_loader_lwo.html

@@ -22,12 +22,13 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { LWOLoader } from './jsm/loaders/LWOLoader.js';
 
-			var container, controls;
-			var camera, scene, renderer;
+			let camera, scene, renderer;
+
+			init();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200 );
@@ -36,45 +37,45 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
 
-				var ambientLight = new THREE.AmbientLight( 0xaaaaaa, 1.75 );
+				const ambientLight = new THREE.AmbientLight( 0xaaaaaa, 1.75 );
 				scene.add( ambientLight );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
-				light.position.set( 0, 200, 100 );
-				light.castShadow = true;
-				light.shadow.camera.top = 180;
-				light.shadow.camera.bottom = - 100;
-				light.shadow.camera.left = - 120;
-				light.shadow.camera.right = 120;
-				scene.add( light );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 1 );
+				light1.position.set( 0, 200, 100 );
+				light1.castShadow = true;
+				light1.shadow.camera.top = 180;
+				light1.shadow.camera.bottom = - 100;
+				light1.shadow.camera.left = - 120;
+				light1.shadow.camera.right = 120;
+				scene.add( light1 );
 
-				light = new THREE.DirectionalLight( 0xffffff, 0.7 );
-				light.position.set( - 100, 200, - 100 );
-				scene.add( light );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 0.7 );
+				light2.position.set( - 100, 200, - 100 );
+				scene.add( light2 );
 
-				light = new THREE.DirectionalLight( 0xffffff, 0.4 );
-				light.position.set( 100, - 200, 100 );
-				scene.add( light );
+				const light3 = new THREE.DirectionalLight( 0xffffff, 0.4 );
+				light3.position.set( 100, - 200, 100 );
+				scene.add( light3 );
 
-				light = new THREE.DirectionalLight( 0xffffff, 1 );
-				light.position.set( - 100, - 100, 100 );
-				scene.add( light );
+				const light4 = new THREE.DirectionalLight( 0xffffff, 1 );
+				light4.position.set( - 100, - 100, 100 );
+				scene.add( light4 );
 
-				var grid = new THREE.GridHelper( 200, 20, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 200, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.3;
 				grid.material.transparent = true;
 				scene.add( grid );
 
-				var loader = new LWOLoader();
+				const loader = new LWOLoader();
 				loader.load( 'models/lwo/Objects/LWO3/Demo.lwo', function ( object ) {
 
-					var phong = object.meshes[ 0 ];
+					const phong = object.meshes[ 0 ];
 					phong.position.set( - 2, 12, 0 );
 
-					var standard = object.meshes[ 1 ];
+					const standard = object.meshes[ 1 ];
 					standard.position.set( 2, 12, 0 );
 
-					var rocket = object.meshes[ 2 ];
+					const rocket = object.meshes[ 2 ];
 					rocket.position.set( 0, 10.5, - 1 );
 
 					scene.add( phong, standard, rocket );
@@ -90,7 +91,7 @@
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
-				controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 1.33, 10, - 6.7 );
 				controls.update();
 
@@ -113,8 +114,6 @@
 
 			}
 
-			init();
-
 		</script>
 
 	</body>

examples/webgl_loader_md2.html

@@ -24,25 +24,27 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { MD2Character } from './jsm/misc/MD2Character.js';
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
+			let SCREEN_WIDTH = window.innerWidth;
+			let SCREEN_HEIGHT = window.innerHeight;
 
-			var container, camera, scene, renderer;
+			let container, camera, scene, renderer;
 
-			var character;
+			let character;
 
-			var gui, playbackConfig = {
+			let gui;
+
+			const playbackConfig = {
 
 				speed: 1.0,
 				wireframe: false
 
 			};
 
-			var controls;
+			let controls;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
-			var stats;
+			let stats;
 
 			init();
 			animate();
@@ -67,37 +69,37 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 5, 1000 );
-				light.position.set( 200, 250, 500 );
-				light.angle = 0.5;
-				light.penumbra = 0.5;
+				const light1 = new THREE.SpotLight( 0xffffff, 5, 1000 );
+				light1.position.set( 200, 250, 500 );
+				light1.angle = 0.5;
+				light1.penumbra = 0.5;
 
-				light.castShadow = true;
-				light.shadow.mapSize.width = 1024;
-				light.shadow.mapSize.height = 1024;
+				light1.castShadow = true;
+				light1.shadow.mapSize.width = 1024;
+				light1.shadow.mapSize.height = 1024;
 
-				// scene.add( new CameraHelper( light.shadow.camera ) );
-				scene.add( light );
+				// scene.add( new THREE.CameraHelper( light1.shadow.camera ) );
+				scene.add( light1 );
 
-				var light = new THREE.SpotLight( 0xffffff, 5, 1000 );
-				light.position.set( - 100, 350, 350 );
-				light.angle = 0.5;
-				light.penumbra = 0.5;
+				const light2 = new THREE.SpotLight( 0xffffff, 5, 1000 );
+				light2.position.set( - 100, 350, 350 );
+				light2.angle = 0.5;
+				light2.penumbra = 0.5;
 
-				light.castShadow = true;
-				light.shadow.mapSize.width = 1024;
-				light.shadow.mapSize.height = 1024;
+				light2.castShadow = true;
+				light2.shadow.mapSize.width = 1024;
+				light2.shadow.mapSize.height = 1024;
 
-				// scene.add( new CameraHelper( light.shadow.camera ) );
-				scene.add( light );
+				// scene.add( new THREE.CameraHelper( light2.shadow.camera ) );
+				scene.add( light2 );
 
 				//  GROUND
 
-				var gt = new THREE.TextureLoader().load( "textures/terrain/grasslight-big.jpg" );
-				var gg = new THREE.PlaneBufferGeometry( 2000, 2000 );
-				var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
+				const gt = new THREE.TextureLoader().load( "textures/terrain/grasslight-big.jpg" );
+				const gg = new THREE.PlaneBufferGeometry( 2000, 2000 );
+				const gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
 
-				var ground = new THREE.Mesh( gg, gm );
+				const ground = new THREE.Mesh( gg, gm );
 				ground.rotation.x = - Math.PI / 2;
 				ground.material.map.repeat.set( 8, 8 );
 				ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
@@ -151,7 +153,7 @@
 
 				// CHARACTER
 
-				var config = {
+				const config = {
 
 					baseUrl: "models/md2/ratamahatta/",
 
@@ -209,7 +211,7 @@
 
 			function labelize( text ) {
 
-				var parts = text.split( "." );
+				const parts = text.split( "." );
 
 				if ( parts.length > 1 ) {
 
@@ -226,9 +228,9 @@
 
 			function setupWeaponsGUI( character ) {
 
-				var folder = gui.addFolder( "Weapons" );
+				const folder = gui.addFolder( "Weapons" );
 
-				var generateCallback = function ( index ) {
+				const generateCallback = function ( index ) {
 
 					return function () {
 
@@ -238,11 +240,11 @@
 
 				};
 
-				var guiItems = [];
+				const guiItems = [];
 
-				for ( var i = 0; i < character.weapons.length; i ++ ) {
+				for ( let i = 0; i < character.weapons.length; i ++ ) {
 
-					var name = character.weapons[ i ].name;
+					const name = character.weapons[ i ].name;
 
 					playbackConfig[ name ] = generateCallback( i );
 					guiItems[ i ] = folder.add( playbackConfig, name ).name( labelize( name ) );
@@ -255,9 +257,9 @@
 
 			function setupSkinsGUI( character ) {
 
-				var folder = gui.addFolder( "Skins" );
+				const folder = gui.addFolder( "Skins" );
 
-				var generateCallback = function ( index ) {
+				const generateCallback = function ( index ) {
 
 					return function () {
 
@@ -267,11 +269,11 @@
 
 				};
 
-				var guiItems = [];
+				const guiItems = [];
 
-				for ( var i = 0; i < character.skinsBody.length; i ++ ) {
+				for ( let i = 0; i < character.skinsBody.length; i ++ ) {
 
-					var name = character.skinsBody[ i ].name;
+					const name = character.skinsBody[ i ].name;
 
 					playbackConfig[ name ] = generateCallback( i );
 					guiItems[ i ] = folder.add( playbackConfig, name ).name( labelize( name ) );
@@ -284,9 +286,9 @@
 
 			function setupGUIAnimations( character ) {
 
-				var folder = gui.addFolder( "Animations" );
+				const folder = gui.addFolder( "Animations" );
 
-				var generateCallback = function ( animationClip ) {
+				const generateCallback = function ( animationClip ) {
 
 					return function () {
 
@@ -296,12 +298,12 @@
 
 				};
 
-				var i = 0, guiItems = [];
-				var animations = character.meshBody.geometry.animations;
+				const guiItems = [];
+				const animations = character.meshBody.geometry.animations;
 
-				for ( var i = 0; i < animations.length; i ++ ) {
+				for ( let i = 0; i < animations.length; i ++ ) {
 
-					var clip = animations[ i ];
+					const clip = animations[ i ];
 
 					playbackConfig[ clip.name ] = generateCallback( clip );
 					guiItems[ i ] = folder.add( playbackConfig, clip.name, clip.name );
@@ -325,7 +327,7 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				character.update( delta );
 

examples/webgl_loader_md2_control.html

@@ -33,18 +33,18 @@
 			import { MD2CharacterComplex } from './jsm/misc/MD2CharacterComplex.js';
 			import { Gyroscope } from './jsm/misc/Gyroscope.js';
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
+			let SCREEN_WIDTH = window.innerWidth;
+			let SCREEN_HEIGHT = window.innerHeight;
 
-			var container, stats;
-			var camera, scene, renderer;
+			let container, stats;
+			let camera, scene, renderer;
 
-			var characters = [];
-			var nCharacters = 0;
+			const characters = [];
+			let nCharacters = 0;
 
-			var cameraControls;
+			let cameraControls;
 
-			var controls = {
+			const controls = {
 
 				moveForward: false,
 				moveBackward: false,
@@ -53,7 +53,7 @@
 
 			};
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -80,7 +80,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 2.25 );
+				const light = new THREE.DirectionalLight( 0xffffff, 2.25 );
 				light.position.set( 200, 450, 500 );
 
 				light.castShadow = true;
@@ -97,16 +97,16 @@
 				light.shadow.camera.bottom = - 350;
 
 				scene.add( light );
-				// scene.add( new CameraHelper( light.shadow.camera ) );
+				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
 
 				//  GROUND
 
-				var gt = new THREE.TextureLoader().load( "textures/terrain/grasslight-big.jpg" );
-				var gg = new THREE.PlaneBufferGeometry( 16000, 16000 );
-				var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
+				const gt = new THREE.TextureLoader().load( "textures/terrain/grasslight-big.jpg" );
+				const gg = new THREE.PlaneBufferGeometry( 16000, 16000 );
+				const gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
 
-				var ground = new THREE.Mesh( gg, gm );
+				const ground = new THREE.Mesh( gg, gm );
 				ground.rotation.x = - Math.PI / 2;
 				ground.material.map.repeat.set( 64, 64 );
 				ground.material.map.wrapS = THREE.RepeatWrapping;
@@ -150,7 +150,7 @@
 
 				// CHARACTER
 
-				var configOgro = {
+				const configOgro = {
 
 					baseUrl: "models/md2/ogro/",
 
@@ -174,32 +174,32 @@
 
 				};
 
-				var nRows = 1;
-				var nSkins = configOgro.skins.length;
+				const nRows = 1;
+				const nSkins = configOgro.skins.length;
 
 				nCharacters = nSkins * nRows;
 
-				for ( var i = 0; i < nCharacters; i ++ ) {
+				for ( let i = 0; i < nCharacters; i ++ ) {
 
-					var character = new MD2CharacterComplex();
+					const character = new MD2CharacterComplex();
 					character.scale = 3;
 					character.controls = controls;
 					characters.push( character );
 
 				}
 
-				var baseCharacter = new MD2CharacterComplex();
+				const baseCharacter = new MD2CharacterComplex();
 				baseCharacter.scale = 3;
 
 				baseCharacter.onLoadComplete = function () {
 
-					var k = 0;
+					let k = 0;
 
-					for ( var j = 0; j < nRows; j ++ ) {
+					for ( let j = 0; j < nRows; j ++ ) {
 
-						for ( var i = 0; i < nSkins; i ++ ) {
+						for ( let i = 0; i < nSkins; i ++ ) {
 
-							var cloneCharacter = characters[ k ];
+							const cloneCharacter = characters[ k ];
 
 							cloneCharacter.shareParts( baseCharacter );
 
@@ -220,7 +220,7 @@
 
 					}
 
-					var gyro = new Gyroscope();
+					const gyro = new Gyroscope();
 					gyro.add( camera );
 					gyro.add( light, light.target );
 
@@ -307,9 +307,9 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
-				for ( var i = 0; i < nCharacters; i ++ ) {
+				for ( let i = 0; i < nCharacters; i ++ ) {
 
 					characters[ i ].update( delta );
 

examples/webgl_loader_mdd.html

@@ -18,7 +18,7 @@
 
 			import { MDDLoader } from './jsm/loaders/MDDLoader.js';
 
-			var camera, scene, renderer, mixer, clock;
+			let camera, scene, renderer, mixer, clock;
 
 			init();
 
@@ -34,19 +34,19 @@
 
 				//
 
-				var loader = new MDDLoader();
+				const loader = new MDDLoader();
 				loader.load( 'models/mdd/cube.mdd', function ( result ) {
 
 					const morphTargets = result.morphTargets;
 					const clip = result.clip;
 					// clip.optimize(); // optional
 
-					var geometry = new THREE.BoxBufferGeometry();
+					const geometry = new THREE.BoxBufferGeometry();
 					geometry.morphAttributes.position = morphTargets; // apply morph targets
 
-					var material = new THREE.MeshNormalMaterial( { morphTargets: true } );
+					const material = new THREE.MeshNormalMaterial( { morphTargets: true } );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					scene.add( mesh );
 
 					mixer = new THREE.AnimationMixer( mesh );
@@ -80,7 +80,7 @@
 
 				requestAnimationFrame( animate );
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgl_loader_mmd.html

@@ -39,12 +39,12 @@
 			import { MMDLoader } from './jsm/loaders/MMDLoader.js';
 			import { MMDAnimationHelper } from './jsm/animation/MMDAnimationHelper.js';
 
-			var container, stats;
+			let stats;
 
-			var mesh, camera, scene, renderer, effect;
-			var helper, ikHelper, physicsHelper;
+			let mesh, camera, scene, renderer, effect;
+			let helper, ikHelper, physicsHelper;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			Ammo().then( function ( AmmoLib ) {
 
@@ -58,7 +58,7 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -69,14 +69,14 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				var gridHelper = new THREE.PolarGridHelper( 30, 10 );
+				const gridHelper = new THREE.PolarGridHelper( 30, 10 );
 				gridHelper.position.y = - 10;
 				scene.add( gridHelper );
 
-				var ambient = new THREE.AmbientLight( 0x666666 );
+				const ambient = new THREE.AmbientLight( 0x666666 );
 				scene.add( ambient );
 
-				var directionalLight = new THREE.DirectionalLight( 0x887766 );
+				const directionalLight = new THREE.DirectionalLight( 0x887766 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
@@ -100,7 +100,7 @@
 
 					if ( xhr.lengthComputable ) {
 
-						var percentComplete = xhr.loaded / xhr.total * 100;
+						const percentComplete = xhr.loaded / xhr.total * 100;
 						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
 
 					}
@@ -108,14 +108,14 @@
 				}
 
 
-				var modelFile = 'models/mmd/miku/miku_v2.pmd';
-				var vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];
+				const modelFile = 'models/mmd/miku/miku_v2.pmd';
+				const vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];
 
 				helper = new MMDAnimationHelper( {
 					afterglow: 2.0
 				} );
 
-				var loader = new MMDLoader();
+				const loader = new MMDLoader();
 
 				loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
 
@@ -140,38 +140,16 @@
 
 				}, onProgress, null );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 10;
 				controls.maxDistance = 100;
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var phongMaterials;
-				var originalMaterials;
-
-				function makePhongMaterials( materials ) {
-
-					var array = [];
-
-					for ( var i = 0, il = materials.length; i < il; i ++ ) {
-
-						var m = new THREE.MeshPhongMaterial();
-						m.copy( materials[ i ] );
-						m.needsUpdate = true;
-
-						array.push( m );
-
-					}
-
-					phongMaterials = array;
-
-				}
-
 				function initGui() {
 
-					var api = {
+					const api = {
 						'animation': true,
-						'gradient mapping': true,
 						'ik': true,
 						'outline': true,
 						'physics': true,
@@ -179,7 +157,7 @@
 						'show rigid bodies': false
 					};
 
-					var gui = new GUI();
+					const gui = new GUI();
 
 					gui.add( api, 'animation' ).onChange( function () {
 
@@ -187,23 +165,6 @@
 
 					} );
 
-					gui.add( api, 'gradient mapping' ).onChange( function () {
-
-						if ( originalMaterials === undefined ) originalMaterials = mesh.material;
-						if ( phongMaterials === undefined ) makePhongMaterials( mesh.material );
-
-						if ( api[ 'gradient mapping' ] ) {
-
-							mesh.material = originalMaterials;
-
-						} else {
-
-							mesh.material = phongMaterials;
-
-						}
-
-					} );
-
 					gui.add( api, 'ik' ).onChange( function () {
 
 						helper.enable( 'ik', api[ 'ik' ] );

examples/webgl_loader_mmd_audio.html

@@ -39,16 +39,14 @@
 			import { MMDLoader } from './jsm/loaders/MMDLoader.js';
 			import { MMDAnimationHelper } from './jsm/animation/MMDAnimationHelper.js';
 
-			var container;
+			let mesh, camera, scene, renderer, effect;
+			let helper;
 
-			var mesh, camera, scene, renderer, effect;
-			var helper;
+			let ready = false;
 
-			var ready = false;
+			const clock = new THREE.Clock();
 
-			var clock = new THREE.Clock();
-
-			var startButton = document.getElementById( 'startButton' );
+			const startButton = document.getElementById( 'startButton' );
 			startButton.addEventListener( 'click', function () {
 
 				Ammo().then( function () {
@@ -62,10 +60,10 @@
 
 			function init() {
 
-				var overlay = document.getElementById( 'overlay' );
+				const overlay = document.getElementById( 'overlay' );
 				overlay.remove();
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -77,14 +75,14 @@
 
 				scene.add( new THREE.PolarGridHelper( 30, 10 ) );
 
-				var listener = new THREE.AudioListener();
+				const listener = new THREE.AudioListener();
 				camera.add( listener );
 				scene.add( camera );
 
-				var ambient = new THREE.AmbientLight( 0x666666 );
+				const ambient = new THREE.AmbientLight( 0x666666 );
 				scene.add( ambient );
 
-				var directionalLight = new THREE.DirectionalLight( 0x887766 );
+				const directionalLight = new THREE.DirectionalLight( 0x887766 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
@@ -103,22 +101,22 @@
 
 					if ( xhr.lengthComputable ) {
 
-						var percentComplete = xhr.loaded / xhr.total * 100;
+						const percentComplete = xhr.loaded / xhr.total * 100;
 						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
 
 					}
 
 				}
 
-				var modelFile = 'models/mmd/miku/miku_v2.pmd';
-				var vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];
-				var cameraFiles = [ 'models/mmd/vmds/wavefile_camera.vmd' ];
-				var audioFile = 'models/mmd/audios/wavefile_short.mp3';
-				var audioParams = { delayTime: 160 * 1 / 30 };
+				const modelFile = 'models/mmd/miku/miku_v2.pmd';
+				const vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];
+				const cameraFiles = [ 'models/mmd/vmds/wavefile_camera.vmd' ];
+				const audioFile = 'models/mmd/audios/wavefile_short.mp3';
+				const audioParams = { delayTime: 160 * 1 / 30 };
 
 				helper = new MMDAnimationHelper();
 
-				var loader = new MMDLoader();
+				const loader = new MMDLoader();
 
 				loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
 
@@ -137,7 +135,7 @@
 
 						new THREE.AudioLoader().load( audioFile, function ( buffer ) {
 
-							var audio = new THREE.Audio( listener ).setBuffer( buffer );
+							const audio = new THREE.Audio( listener ).setBuffer( buffer );
 
 							helper.add( audio, audioParams );
 							scene.add( mesh );

examples/webgl_loader_mmd_pose.html

@@ -37,12 +37,10 @@
 			import { MMDLoader } from './jsm/loaders/MMDLoader.js';
 			import { MMDAnimationHelper } from './jsm/animation/MMDAnimationHelper.js';
 
-			var container;
+			let camera, scene, renderer, effect;
+			let mesh, helper;
 
-			var camera, scene, renderer, effect;
-			var mesh, helper;
-
-			var vpds = [];
+			const vpds = [];
 
 			Ammo().then( function ( AmmoLib ) {
 
@@ -55,7 +53,7 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -66,10 +64,10 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				var ambient = new THREE.AmbientLight( 0x666666 );
+				const ambient = new THREE.AmbientLight( 0x666666 );
 				scene.add( ambient );
 
-				var directionalLight = new THREE.DirectionalLight( 0x887766 );
+				const directionalLight = new THREE.DirectionalLight( 0x887766 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
@@ -88,15 +86,15 @@
 
 					if ( xhr.lengthComputable ) {
 
-						var percentComplete = xhr.loaded / xhr.total * 100;
+						const percentComplete = xhr.loaded / xhr.total * 100;
 						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
 
 					}
 
 				}
 
-				var modelFile = 'models/mmd/miku/miku_v2.pmd';
-				var vpdFiles = [
+				const modelFile = 'models/mmd/miku/miku_v2.pmd';
+				const vpdFiles = [
 					'models/mmd/vpds/01.vpd',
 					'models/mmd/vpds/02.vpd',
 					'models/mmd/vpds/03.vpd',
@@ -112,7 +110,7 @@
 
 				helper = new MMDAnimationHelper();
 
-				var loader = new MMDLoader();
+				const loader = new MMDLoader();
 
 				loader.load( modelFile, function ( object ) {
 
@@ -121,11 +119,11 @@
 
 					scene.add( mesh );
 
-					var vpdIndex = 0;
+					let vpdIndex = 0;
 
 					function loadVpd() {
 
-						var vpdFile = vpdFiles[ vpdIndex ];
+						const vpdFile = vpdFiles[ vpdIndex ];
 
 						loader.loadVPD( vpdFile, false, function ( vpd ) {
 
@@ -157,15 +155,15 @@
 
 				function initGui() {
 
-					var gui = new GUI();
+					const gui = new GUI();
 
-					var dictionary = mesh.morphTargetDictionary;
+					const dictionary = mesh.morphTargetDictionary;
 
-					var controls = {};
-					var keys = [];
+					const controls = {};
+					const keys = [];
 
-					var poses = gui.addFolder( 'Poses' );
-					var morphs = gui.addFolder( 'Morphs' );
+					const poses = gui.addFolder( 'Poses' );
+					const morphs = gui.addFolder( 'Morphs' );
 
 					function getBaseName( s ) {
 
@@ -175,7 +173,7 @@
 
 					function initControls() {
 
-						for ( var key in dictionary ) {
+						for ( const key in dictionary ) {
 
 							controls[ key ] = 0.0;
 
@@ -183,7 +181,7 @@
 
 						controls.pose = - 1;
 
-						for ( var i = 0; i < vpdFiles.length; i ++ ) {
+						for ( let i = 0; i < vpdFiles.length; i ++ ) {
 
 							controls[ getBaseName( vpdFiles[ i ] ) ] = false;
 
@@ -193,7 +191,7 @@
 
 					function initKeys() {
 
-						for ( var key in dictionary ) {
+						for ( const key in dictionary ) {
 
 							keys.push( key );
 
@@ -203,9 +201,9 @@
 
 					function initPoses() {
 
-						var files = { default: - 1 };
+						const files = { default: - 1 };
 
-						for ( var i = 0; i < vpdFiles.length; i ++ ) {
+						for ( let i = 0; i < vpdFiles.length; i ++ ) {
 
 							files[ getBaseName( vpdFiles[ i ] ) ] = i;
 
@@ -217,7 +215,7 @@
 
 					function initMorphs() {
 
-						for ( var key in dictionary ) {
+						for ( const key in dictionary ) {
 
 							morphs.add( controls, key, 0.0, 1.0, 0.01 ).onChange( onChangeMorph );
 
@@ -227,10 +225,10 @@
 
 					function onChangeMorph() {
 
-						for ( var i = 0; i < keys.length; i ++ ) {
+						for ( let i = 0; i < keys.length; i ++ ) {
 
-							var key = keys[ i ];
-							var value = controls[ key ];
+							const key = keys[ i ];
+							const value = controls[ key ];
 							mesh.morphTargetInfluences[ i ] = value;
 
 						}
@@ -239,7 +237,7 @@
 
 					function onChangePose() {
 
-						var index = parseInt( controls.pose );
+						const index = parseInt( controls.pose );
 
 						if ( index === - 1 ) {
 

examples/webgl_loader_nodes.html

@@ -25,15 +25,16 @@
 				import { NodeFrame } from './jsm/nodes/core/NodeFrame.js';
 				import { NodeMaterial } from './jsm/nodes/materials/NodeMaterial.js';
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
-				var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
-				var frame = new NodeFrame();
-				var teapot, mesh, cloud;
-				var controls;
-				var gui;
+				let renderer, scene, camera;
+				const clock = new THREE.Clock(), fov = 50;
+				const frame = new NodeFrame();
+				let teapot, mesh, cloud;
+				let controls;
+				let gui;
 
-				var param = { load: 'caustic' };
+				const param = { load: 'caustic' };
 
 				window.addEventListener( 'load', init );
 
@@ -61,13 +62,13 @@
 
 					scene.add( new THREE.AmbientLight( 0x464646 ) );
 
-					var light = new THREE.DirectionalLight( 0xffddcc, 1 );
-					light.position.set( 1, 0.75, 0.5 );
-					scene.add( light );
+					const light1 = new THREE.DirectionalLight( 0xffddcc, 1 );
+					light1.position.set( 1, 0.75, 0.5 );
+					scene.add( light1 );
 
-					var light = new THREE.DirectionalLight( 0xccccff, 1 );
-					light.position.set( - 1, 0.75, - 0.5 );
-					scene.add( light );
+					const light2 = new THREE.DirectionalLight( 0xccccff, 1 );
+					light2.position.set( - 1, 0.75, - 0.5 );
+					scene.add( light2 );
 
 					teapot = new TeapotBufferGeometry( 15, 18 );
 
@@ -106,7 +107,7 @@
 
 				function addGui( name, value, callback, isColor, min, max ) {
 
-					var node;
+					let node;
 
 					param[ name ] = value;
 
@@ -147,15 +148,15 @@
 
 					clearGui();
 
-					var url = "nodes/" + param.load + ".json";
+					const url = "nodes/" + param.load + ".json";
 
-					var library = {
+					const library = {
 						"cloud": cloud
 					};
 
-					var loader = new NodeMaterialLoader( undefined, library ).load( url, function () {
+					const loader = new NodeMaterialLoader( undefined, library ).load( url, function () {
 
-						var time = loader.getObjectByName( "time" );
+						const time = loader.getObjectByName( "time" );
 
 						if ( time ) {
 
@@ -182,7 +183,7 @@
 
 				function onWindowResize() {
 
-					var width = window.innerWidth, height = window.innerHeight;
+					const width = window.innerWidth, height = window.innerHeight;
 
 					camera.aspect = width / height;
 					camera.updateProjectionMatrix();
@@ -193,7 +194,7 @@
 
 				function animate() {
 
-					var delta = clock.getDelta();
+					const delta = clock.getDelta();
 
 					// update material animation and/or gpu calcs (pre-renderer)
 					if ( mesh.material instanceof NodeMaterial ) frame.update( delta ).updateNode( mesh.material );

examples/webgl_loader_nrrd.html

@@ -39,7 +39,7 @@
 			import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';
 			import { VTKLoader } from './jsm/loaders/VTKLoader.js';
 
-			var container,
+			let container,
 				stats,
 				camera,
 				controls,
@@ -65,42 +65,36 @@
 
 				// light
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000 , 1 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				dirLight.position.set( 200, 200, 200 );
 				scene.add( dirLight );
 
-				var loader = new NRRDLoader();
+				const loader = new NRRDLoader();
 				loader.load( "models/nrrd/I.nrrd", function ( volume ) {
 
-					var geometry,
-						material,
-						sliceZ,
-						sliceY,
-						sliceX;
-
 					//box helper to see the extend of the volume
-					var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
-					var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-					var cube = new THREE.Mesh( geometry, material );
+					const geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
+					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+					const cube = new THREE.Mesh( geometry, material );
 					cube.visible = false;
-					var box = new THREE.BoxHelper( cube );
+					const box = new THREE.BoxHelper( cube );
 					scene.add( box );
 					box.applyMatrix4( volume.matrix );
 					scene.add( cube );
 
 					//z plane
-					sliceZ = volume.extractSlice( 'z', Math.floor( volume.RASDimensions[ 2 ] / 4 ) );
+					const sliceZ = volume.extractSlice( 'z', Math.floor( volume.RASDimensions[ 2 ] / 4 ) );
 					scene.add( sliceZ.mesh );
 
 					//y plane
-					sliceY = volume.extractSlice( 'y', Math.floor( volume.RASDimensions[ 1 ] / 2 ) );
+					const sliceY = volume.extractSlice( 'y', Math.floor( volume.RASDimensions[ 1 ] / 2 ) );
 					scene.add( sliceY.mesh );
 
 					//x plane
-					sliceX = volume.extractSlice( 'x', Math.floor( volume.RASDimensions[ 0 ] / 2 ) );
+					const sliceX = volume.extractSlice( 'x', Math.floor( volume.RASDimensions[ 0 ] / 2 ) );
 					scene.add( sliceX.mesh );
 
 					gui.add( sliceX, "index", 0, volume.RASDimensions[ 0 ], 1 ).name( "indexX" ).onChange( function () {
@@ -142,16 +136,16 @@
 
 				} );
 
-				var vtkmaterial = new THREE.MeshLambertMaterial( { wireframe: false, morphTargets: false, side: THREE.DoubleSide, color: 0xff0000 } );
+				const vtkmaterial = new THREE.MeshLambertMaterial( { wireframe: false, morphTargets: false, side: THREE.DoubleSide, color: 0xff0000 } );
 
-				var vtkloader = new VTKLoader();
+				const vtkloader = new VTKLoader();
 				vtkloader.load( "models/vtk/liver.vtk", function ( geometry ) {
 
 					geometry.computeVertexNormals();
 
-					var mesh = new THREE.Mesh( geometry, vtkmaterial );
+					const mesh = new THREE.Mesh( geometry, vtkmaterial );
 					scene.add( mesh );
-					var visibilityControl = {
+					const visibilityControl = {
 						visible: true
 					};
 					gui.add( visibilityControl, "visible" ).name( "Model Visible" ).onChange( function () {
@@ -182,7 +176,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				setupInset();
 
@@ -222,8 +216,7 @@
 
 			function setupInset() {
 
-				var insetWidth = 150,
-					insetHeight = 150;
+				const insetWidth = 150, insetHeight = 150;
 				container2 = document.getElementById( 'inset' );
 				container2.width = insetWidth;
 				container2.height = insetHeight;

examples/webgl_loader_obj.html

@@ -18,16 +18,16 @@
 
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
-			var container;
+			let container;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
-			var object;
+			let object;
 
 			init();
 			animate();
@@ -45,10 +45,10 @@
 
 				scene = new THREE.Scene();
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -67,7 +67,7 @@
 
 				}
 
-				var manager = new THREE.LoadingManager( loadModel );
+				const manager = new THREE.LoadingManager( loadModel );
 
 				manager.onProgress = function ( item, loaded, total ) {
 
@@ -77,9 +77,8 @@
 
 				// texture
 
-				var textureLoader = new THREE.TextureLoader( manager );
-
-				var texture = textureLoader.load( 'textures/uv_grid_opengl.jpg' );
+				const textureLoader = new THREE.TextureLoader( manager );
+				const texture = textureLoader.load( 'textures/uv_grid_opengl.jpg' );
 
 				// model
 
@@ -87,7 +86,7 @@
 
 					if ( xhr.lengthComputable ) {
 
-						var percentComplete = xhr.loaded / xhr.total * 100;
+						const percentComplete = xhr.loaded / xhr.total * 100;
 						console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );
 
 					}
@@ -96,8 +95,7 @@
 
 				function onError() {}
 
-				var loader = new OBJLoader( manager );
-
+				const loader = new OBJLoader( manager );
 				loader.load( 'models/obj/male02/male02.obj', function ( obj ) {
 
 					object = obj;

examples/webgl_loader_obj2.html

@@ -62,6 +62,7 @@
 
 
 			const OBJLoader2Example = function ( elementToBindTo ) {
+
 				this.renderer = null;
 				this.canvas = elementToBindTo;
 				this.aspectRatio = 1;
@@ -79,6 +80,7 @@
 				this.cameraTarget = this.cameraDefaults.posCameraTarget;
 
 				this.controls = null;
+
 			};
 
 			OBJLoader2Example.prototype = {
@@ -86,6 +88,7 @@
 				constructor: OBJLoader2Example,
 
 				initGL: function () {
+
 					this.renderer = new THREE.WebGLRenderer( {
 						canvas: this.canvas,
 						antialias: true,
@@ -99,9 +102,9 @@
 					this.resetCamera();
 					this.controls = new TrackballControls( this.camera, this.renderer.domElement );
 
-					let ambientLight = new THREE.AmbientLight( 0x404040 );
-					let directionalLight1 = new THREE.DirectionalLight( 0xC0C090 );
-					let directionalLight2 = new THREE.DirectionalLight( 0xC0C090 );
+					const ambientLight = new THREE.AmbientLight( 0x404040 );
+					const directionalLight1 = new THREE.DirectionalLight( 0xC0C090 );
+					const directionalLight2 = new THREE.DirectionalLight( 0xC0C090 );
 
 					directionalLight1.position.set( - 100, - 50, 100 );
 					directionalLight2.position.set( 100, 50, - 100 );
@@ -110,86 +113,111 @@
 					this.scene.add( directionalLight2 );
 					this.scene.add( ambientLight );
 
-					let helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
+					const helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
 					this.scene.add( helper );
+
 				},
 
 				initContent: function () {
-					let modelName = 'female02';
+
+					const modelName = 'female02';
 					this._reportProgress( { detail: { text: 'Loading: ' + modelName } } );
 
 
-					let scope = this;
-					let objLoader2 = new OBJLoader2();
-					let callbackOnLoad = function ( object3d ) {
+					const scope = this;
+					const objLoader2 = new OBJLoader2();
+					const callbackOnLoad = function ( object3d ) {
+
 						scope.scene.add( object3d );
 						console.log( 'Loading complete: ' + modelName );
 						scope._reportProgress( { detail: { text: '' } } );
+
 					};
 
-					let onLoadMtl = function ( mtlParseResult ) {
+					const onLoadMtl = function ( mtlParseResult ) {
+
 						objLoader2.setModelName( modelName );
 						objLoader2.setLogging( true, true );
 						objLoader2.addMaterials( MtlObjBridge.addMaterialsFromMtlLoader( mtlParseResult ), true );
 						objLoader2.load( 'models/obj/female02/female02.obj', callbackOnLoad, null, null, null );
+
 					};
-					let mtlLoader = new MTLLoader();
+
+					const mtlLoader = new MTLLoader();
 					mtlLoader.load( 'models/obj/female02/female02.mtl', onLoadMtl );
+
 				},
 
 				_reportProgress: function ( event ) {
+
 					let output = '';
 					if ( event.detail !== null && event.detail !== undefined && event.detail.text ) {
 
 						output = event.detail.text;
 
 					}
+
 					console.log( 'Progress: ' + output );
 					document.getElementById( 'feedback' ).innerHTML = output;
+
 				},
 
 				resizeDisplayGL: function () {
+
 					this.controls.handleResize();
 
 					this.recalcAspectRatio();
 					this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );
 
 					this.updateCamera();
+
 				},
 
 				recalcAspectRatio: function () {
-					this.aspectRatio = (this.canvas.offsetHeight === 0) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
+
+					this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
+
 				},
 
 				resetCamera: function () {
+
 					this.camera.position.copy( this.cameraDefaults.posCamera );
 					this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );
 
 					this.updateCamera();
+
 				},
 
 				updateCamera: function () {
+
 					this.camera.aspect = this.aspectRatio;
 					this.camera.lookAt( this.cameraTarget );
 					this.camera.updateProjectionMatrix();
+
 				},
 
 				render: function () {
-					if ( !this.renderer.autoClear ) this.renderer.clear();
+
+					if ( ! this.renderer.autoClear ) this.renderer.clear();
 					this.controls.update();
 					this.renderer.render( this.scene, this.camera );
+
 				}
 			};
 
-			let app = new OBJLoader2Example( document.getElementById( 'example' ) );
+			const app = new OBJLoader2Example( document.getElementById( 'example' ) );
+
+			const resizeWindow = function () {
 
-			let resizeWindow = function () {
 				app.resizeDisplayGL();
+
 			};
 
-			let render = function () {
+			const render = function () {
+
 				requestAnimationFrame( render );
 				app.render();
+
 			};
 
 			window.addEventListener( 'resize', resizeWindow, false );

examples/webgl_loader_obj2_options.html

@@ -63,6 +63,7 @@
 			import { LoadedMeshUserOverride } from "./jsm/loaders/obj2/shared/MeshReceiver.js";
 
 			const WWOBJLoader2Example = function ( elementToBindTo ) {
+
 				this.renderer = null;
 				this.canvas = elementToBindTo;
 				this.aspectRatio = 1;
@@ -88,6 +89,7 @@
 
 				this.cube = null;
 				this.pivot = null;
+
 			};
 
 			WWOBJLoader2Example.prototype = {
@@ -95,6 +97,7 @@
 				constructor: WWOBJLoader2Example,
 
 				initGL: function () {
+
 					this.renderer = new THREE.WebGLRenderer( {
 						canvas: this.canvas,
 						antialias: true,
@@ -108,22 +111,22 @@
 					this.resetCamera();
 					this.controls = new TrackballControls( this.camera, this.renderer.domElement );
 
-					let ambientLight = new THREE.AmbientLight( 0x404040 );
-					let directionalLight1 = new THREE.DirectionalLight( 0xC0C090 );
-					let directionalLight2 = new THREE.DirectionalLight( 0xC0C090 );
+					const ambientLight = new THREE.AmbientLight( 0x404040 );
+					const directionalLight1 = new THREE.DirectionalLight( 0xC0C090 );
+					const directionalLight2 = new THREE.DirectionalLight( 0xC0C090 );
 
-					directionalLight1.position.set( -100, -50, 100 );
-					directionalLight2.position.set( 100, 50, -100 );
+					directionalLight1.position.set( - 100, - 50, 100 );
+					directionalLight2.position.set( 100, 50, - 100 );
 
 					this.scene.add( directionalLight1 );
 					this.scene.add( directionalLight2 );
 					this.scene.add( ambientLight );
 
-					let helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
+					const helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
 					this.scene.add( helper );
 
-					let geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
-					let material = new THREE.MeshNormalMaterial();
+					const geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
+					const material = new THREE.MeshNormalMaterial();
 					this.cube = new THREE.Mesh( geometry, material );
 					this.cube.position.set( 0, 0, 0 );
 					this.scene.add( this.cube );
@@ -131,25 +134,29 @@
 					this.pivot = new THREE.Object3D();
 					this.pivot.name = 'Pivot';
 					this.scene.add( this.pivot );
+
 				},
 
 				useParseMain: function () {
-					let modelName = 'female02';
+
+					const modelName = 'female02';
 					this._reportProgress( { detail: { text: 'Loading: ' + modelName } } );
 
-					let objLoader2 = new OBJLoader2()
+					const objLoader2 = new OBJLoader2()
 						.setModelName( modelName );
 
-					let scope = this;
-					function onLoadMtl ( mtlParseResult ) {
+					const scope = this;
+					function onLoadMtl( mtlParseResult ) {
+
 						objLoader2.addMaterials( MtlObjBridge.addMaterialsFromMtlLoader( mtlParseResult ), true );
 
-						let fileLoader = new THREE.FileLoader();
+						const fileLoader = new THREE.FileLoader();
 						fileLoader.setPath( '' );
 						fileLoader.setResponseType( 'arraybuffer' );
 						fileLoader.load( 'models/obj/female02/female02.obj',
-							function ( content, message ) {
-								let local = new THREE.Object3D();
+							function ( content ) {
+
+								const local = new THREE.Object3D();
 								local.name = 'Pivot_female02';
 								local.position.set( 75, 0, 0 );
 								scope.pivot.add( local );
@@ -157,138 +164,165 @@
 
 								scope._reportProgress( { detail: { text: 'Loading of ' + modelName + ' completed: OBJLoader2#pase: Parsing completed' } } );
 								scope.finalize();
+
 							}
 						);
+
 					}
 
-					let mtlLoader = new MTLLoader();
+					const mtlLoader = new MTLLoader();
 					mtlLoader.load( 'models/obj/female02/female02.mtl', onLoadMtl );
+
 				},
 
 				useParseParallel: function () {
-					let modelName = 'female02_vertex' ;
+
+					const modelName = 'female02_vertex';
 					this._reportProgress( { detail: { text: 'Loading: ' + modelName } } );
 
-					let local = new THREE.Object3D();
+					const local = new THREE.Object3D();
 					local.name = 'Pivot_female02_vertex';
-					local.position.set( -75, 0, 0 );
+					local.position.set( - 75, 0, 0 );
 					this.pivot.add( local );
 
-					let scope = this;
+					const scope = this;
 					function callbackOnLoad( object3d, message ) {
+
 						local.add( object3d );
 						scope._reportProgress( { detail: { text: 'Loading of ' + modelName + ' completed: ' + message } } );
 						scope.finalize();
+
 					}
 
-					let materials = {
+					const materials = {
 						tester: new THREE.MeshStandardMaterial()
 					};
 
-					let objLoader2Parallel = new OBJLoader2Parallel()
+					const objLoader2Parallel = new OBJLoader2Parallel()
 						.setModelName( modelName )
 						.setJsmWorker( this.useJsmWorker, new URL( OBJLoader2Parallel.DEFAULT_JSM_WORKER_PATH, window.location.href ) )
 						.setCallbackOnLoad( callbackOnLoad )
 						.addMaterials( materials, true );
 
-					let fileLoader = new THREE.FileLoader();
+					const fileLoader = new THREE.FileLoader();
 					fileLoader.setPath( '' );
 					fileLoader.setResponseType( 'arraybuffer' );
 					fileLoader.load( 'models/obj/female02/female02_vertex_colors.obj',
 						function ( content ) {
+
 							objLoader2Parallel.parse( content );
+
 						}
 					);
+
 				},
 
 				useLoadMain: function () {
-					let modelName = 'male02';
+
+					const modelName = 'male02';
 					this._reportProgress( { detail: { text: 'Loading: ' + modelName } } );
 
-					let objLoader2 = new OBJLoader2()
-					.setModelName( modelName )
-					.setUseIndices( true );
+					const objLoader2 = new OBJLoader2()
+						.setModelName( modelName )
+						.setUseIndices( true );
+
+					const scope = this;
+					function callbackOnLoad( object3d, message ) {
 
-					let scope = this;
-					function callbackOnLoad ( object3d, message ) {
-						let local = new THREE.Object3D();
+						const local = new THREE.Object3D();
 						local.name = 'Pivot_male02';
-						local.position.set( 0, 0, -75 );
+						local.position.set( 0, 0, - 75 );
 						scope.pivot.add( local );
 						local.add( object3d );
 
 						scope._reportProgress( { detail: { text: 'Loading of ' + modelName + ' completed: ' + message } } );
 						scope.finalize();
+
 					}
 
-					function onLoadMtl ( mtlParseResult ) {
+					function onLoadMtl( mtlParseResult ) {
+
 						objLoader2.addMaterials( MtlObjBridge.addMaterialsFromMtlLoader( mtlParseResult ), true );
 						objLoader2.load( 'models/obj/male02/male02.obj', callbackOnLoad, null, null, null );
+
 					}
 
-					let mtlLoader = new MTLLoader();
+					const mtlLoader = new MTLLoader();
 					mtlLoader.load( 'models/obj/male02/male02.mtl', onLoadMtl );
+
 				},
 
 				useLoadParallel: function () {
-					let modelName = 'WaltHead';
+
+					const modelName = 'WaltHead';
 					this._reportProgress( { detail: { text: 'Loading: ' + modelName } } );
 
-					let local = new THREE.Object3D();
+					const local = new THREE.Object3D();
 					local.name = 'Pivot_WaltHead';
-					local.position.set( -175, 50, 0 );
-					let scale = 0.5;
+					local.position.set( - 175, 50, 0 );
+					const scale = 0.5;
 					local.scale.set( scale, scale, scale );
 					this.pivot.add( local );
 
-					let objLoader2Parallel = new OBJLoader2Parallel()
+					const objLoader2Parallel = new OBJLoader2Parallel()
 						.setModelName( modelName )
 						.setJsmWorker( this.useJsmWorker, new URL( OBJLoader2Parallel.DEFAULT_JSM_WORKER_PATH, window.location.href ) );
 
-					let scope = this;
-					function callbackOnLoad ( object3d, message ) {
+					const scope = this;
+					function callbackOnLoad( object3d, message ) {
+
 						local.add( object3d );
 						scope._reportProgress( { detail: { text: 'Loading of ' + modelName + ' completed: ' + message } } );
 						scope.finalize();
+
 					}
-					function onLoadMtl ( mtlParseResult ) {
+
+					function onLoadMtl( mtlParseResult ) {
+
 						objLoader2Parallel.addMaterials( MtlObjBridge.addMaterialsFromMtlLoader( mtlParseResult ), true );
 						objLoader2Parallel.load( 'models/obj/walt/WaltHead.obj', callbackOnLoad );
+
 					}
 
-					let mtlLoader = new MTLLoader();
+					const mtlLoader = new MTLLoader();
 					mtlLoader.load( 'models/obj/walt/WaltHead.mtl', onLoadMtl );
+
 				},
 
 				useLoadMainFallback: function () {
-					let local = new THREE.Object3D();
+
+					const local = new THREE.Object3D();
 					local.name = 'Pivot_Cerberus';
 					local.position.set( 0, 0, 100 );
-					let scale = 50;
+					const scale = 50;
 					local.scale.set( scale, scale, scale );
 					this.pivot.add( local );
 
-					let objLoader2Parallel = new OBJLoader2Parallel()
+					const objLoader2Parallel = new OBJLoader2Parallel()
 						.setModelName( local.name )
 						.setExecuteParallel( false );
 
-					let scope = this;
-					function callbackOnLoad ( object3d, message ) {
+					const scope = this;
+					function callbackOnLoad( object3d, message ) {
+
 						local.add( object3d );
 						scope._reportProgress( { detail: { text: 'Loading of ' + objLoader2Parallel.modelName + ' completed: ' + message } } );
 						scope.finalize();
+
 					}
 
 					objLoader2Parallel.load( 'models/obj/cerberus/Cerberus.obj', callbackOnLoad );
+
 				},
 
 				useLoadParallelMeshAlter: function () {
-					let local = new THREE.Object3D();
-					local.position.set( 175, -100, 0 );
+
+					const local = new THREE.Object3D();
+					local.position.set( 175, - 100, 0 );
 					local.name = 'Pivot_ninjaHead';
 					this.pivot.add( local );
 
-					let objLoader2Parallel = new OBJLoader2Parallel()
+					const objLoader2Parallel = new OBJLoader2Parallel()
 						.setModelName( local.name )
 						.setJsmWorker( this.useJsmWorker, new URL( OBJLoader2Parallel.DEFAULT_JSM_WORKER_PATH, window.location.href ) )
 						.setBaseObject3d( local );
@@ -296,77 +330,97 @@
 					// Configure WorkerExecutionSupport to not disregard worker after execution
 					objLoader2Parallel.getWorkerExecutionSupport().setTerminateWorkerOnLoad( false );
 
-					function callbackMeshAlter ( event ) {
-						let override = new LoadedMeshUserOverride( false, true );
+					function callbackMeshAlter( event ) {
+
+						const override = new LoadedMeshUserOverride( false, true );
 
-						let mesh = new THREE.Mesh( event.detail.bufferGeometry, event.detail.material );
+						const mesh = new THREE.Mesh( event.detail.bufferGeometry, event.detail.material );
 						mesh.name = event.detail.meshName;
-						let helper = new VertexNormalsHelper( mesh, 2, 0x00ff00 );
+						const helper = new VertexNormalsHelper( mesh, 2, 0x00ff00 );
 						helper.name = 'VertexNormalsHelper';
 
 						override.addMesh( mesh );
 						override.addMesh( helper );
 
 						return override;
+
 					}
+
 					objLoader2Parallel.setCallbackOnMeshAlter( callbackMeshAlter );
 
-					let scope = this;
-					function callbackOnLoad ( object3d, message ) {
+					const scope = this;
+					function callbackOnLoad( object3d, message ) {
+
 						scope._reportProgress( { detail: { text: 'Loading of ' + objLoader2Parallel.modelName + ' completed: ' + message } } );
 						scope.finalize();
+
 					}
 
 					objLoader2Parallel.load( 'models/obj/ninja/ninjaHead_Low.obj', callbackOnLoad );
+
 				},
 
 				finalize: function () {
-					this.loadCount--;
+
+					this.loadCount --;
 					if ( this.loadCount === 0 ) {
 
 						this._reportProgress( { detail: { text: '' } } );
 
 					}
+
 				},
 
-				_reportProgress: function( event ) {
+				_reportProgress: function ( event ) {
+
 					let output = '';
 					if ( event.detail !== null && event.detail !== undefined && event.detail.text ) {
 
 						output = event.detail.text;
 
 					}
+
 					console.log( 'Progress: ' + output );
 					document.getElementById( 'feedback' ).innerHTML = output;
+
 				},
 
 				resizeDisplayGL: function () {
+
 					this.controls.handleResize();
 
 					this.recalcAspectRatio();
 					this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );
 
 					this.updateCamera();
+
 				},
 
 				recalcAspectRatio: function () {
+
 					this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
+
 				},
 
 				resetCamera: function () {
+
 					this.camera.position.copy( this.cameraDefaults.posCamera );
 					this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );
 
 					this.updateCamera();
+
 				},
 
 				updateCamera: function () {
+
 					this.camera.aspect = this.aspectRatio;
 					this.camera.lookAt( this.cameraTarget );
 					this.camera.updateProjectionMatrix();
+
 				},
 
 				render: function () {
+
 					if ( ! this.renderer.autoClear ) this.renderer.clear();
 
 					this.controls.update();
@@ -375,43 +429,60 @@
 					this.cube.rotation.y += 0.05;
 
 					this.renderer.render( this.scene, this.camera );
+
 				},
 
 				alterShading: function () {
-					let scope = this;
+
+					const scope = this;
 					scope.flatShading = ! scope.flatShading;
-					console.log( scope.flatShading ? 'Enabling flat shading' : 'Enabling smooth shading');
+					console.log( scope.flatShading ? 'Enabling flat shading' : 'Enabling smooth shading' );
 
 					scope.traversalFunction = function ( material ) {
+
 						material.flatShading = scope.flatShading;
 						material.needsUpdate = true;
+
 					};
-					function scopeTraverse ( object3d ) {
+
+					function scopeTraverse( object3d ) {
+
 						scope.traverseScene( object3d );
+
 					}
+
 					scope.pivot.traverse( scopeTraverse );
+
 				},
 
 				alterDouble: function () {
-					let scope = this;
+
+					const scope = this;
 					scope.doubleSide = ! scope.doubleSide;
-					console.log( scope.doubleSide ? 'Enabling THREE.DoubleSide materials' : 'Enabling THREE.FrontSide materials');
+					console.log( scope.doubleSide ? 'Enabling THREE.DoubleSide materials' : 'Enabling THREE.FrontSide materials' );
 
 					scope.traversalFunction = function ( material ) {
+
 						material.side = scope.doubleSide ? THREE.DoubleSide : THREE.FrontSide;
+
 					};
 
-					function scopeTraverse ( object3d ) {
+					function scopeTraverse( object3d ) {
+
 						scope.traverseScene( object3d );
+
 					}
+
 					scope.pivot.traverse( scopeTraverse );
+
 				},
 
 				traverseScene: function ( object3d ) {
+
 					if ( Array.isArray( object3d.material ) ) {
 
-						let materials = object3d.material.materials;
-						for ( let name in materials ) {
+						const materials = object3d.material.materials;
+						for ( const name in materials ) {
 
 							if ( materials.hasOwnProperty( name ) )	this.traversalFunction( materials[ name ] );
 
@@ -422,9 +493,11 @@
 						this.traversalFunction( object3d.material );
 
 					}
+
 				},
 
 				executeLoading: function () {
+
 					// Load a file with OBJLoader2.parse on main
 					this.useParseMain();
 
@@ -442,14 +515,14 @@
 
 					// Load a file with OBJLoader2Parallel.load in parallel in worker and add normals during onMeshAlter
 					this.useLoadParallelMeshAlter();
+
 				}
 
 			};
 
-			let app = new WWOBJLoader2Example( document.getElementById( 'example' ) );
+			const app = new WWOBJLoader2Example( document.getElementById( 'example' ) );
 
-			let handleExecuteLoading;
-			let wwObjLoader2Control = {
+			const wwObjLoader2Control = {
 				flatShading: app.flatShading,
 				doubleSide: app.doubleSide,
 				useJsmWorker: app.useJsmWorker,
@@ -465,7 +538,7 @@
 					elementHandle.domElement.parentElement.style.opacity = 0.5;
 
 				},
-				executeLoading: function() {
+				executeLoading: function () {
 
 					app.executeLoading();
 					this.disableElement( handleExecuteLoading );
@@ -473,34 +546,40 @@
 				},
 			};
 
-			let menuDiv = document.getElementById( 'dat' );
-			let gui = new GUI( {
+			const menuDiv = document.getElementById( 'dat' );
+			const gui = new GUI( {
 				autoPlace: false,
 				width: 320
 			} );
 			menuDiv.appendChild( gui.domElement );
 
-			let folderRenderingOptions = gui.addFolder( 'Rendering Options' );
-			let controlFlat = folderRenderingOptions.add( wwObjLoader2Control, 'flatShading' ).name( 'Flat Shading' );
-			controlFlat.onChange( function( value ) {
+			const folderRenderingOptions = gui.addFolder( 'Rendering Options' );
+			const controlFlat = folderRenderingOptions.add( wwObjLoader2Control, 'flatShading' ).name( 'Flat Shading' );
+			controlFlat.onChange( function ( value ) {
+
 				console.log( 'Setting flatShading to: ' + value );
 				app.alterShading();
-			});
 
-			let controlDouble = folderRenderingOptions.add( wwObjLoader2Control, 'doubleSide' ).name( 'Double Side Materials' );
-			controlDouble.onChange( function( value ) {
+			} );
+
+			const controlDouble = folderRenderingOptions.add( wwObjLoader2Control, 'doubleSide' ).name( 'Double Side Materials' );
+			controlDouble.onChange( function ( value ) {
+
 				console.log( 'Setting doubleSide to: ' + value );
 				app.alterDouble();
-			});
 
-			let folderObjLoader2ParallelOptions = gui.addFolder( 'OBJLoader2Parallel Options' );
-			let controlJsmWorker = folderObjLoader2ParallelOptions.add( wwObjLoader2Control, 'useJsmWorker' ).name( 'Use Module Workers' );
-			controlJsmWorker.onChange( function( value ) {
+			} );
+
+			const folderObjLoader2ParallelOptions = gui.addFolder( 'OBJLoader2Parallel Options' );
+			const controlJsmWorker = folderObjLoader2ParallelOptions.add( wwObjLoader2Control, 'useJsmWorker' ).name( 'Use Module Workers' );
+			controlJsmWorker.onChange( function ( value ) {
+
 				console.log( 'Setting useJsmWorker to: ' + value );
 				app.useJsmWorker = value;
-			});
-			let folderExecution = gui.addFolder( 'Execution' );
-			handleExecuteLoading = folderExecution.add( wwObjLoader2Control, 'executeLoading' ).name( 'Run' );
+
+			} );
+			const folderExecution = gui.addFolder( 'Execution' );
+			const handleExecuteLoading = folderExecution.add( wwObjLoader2Control, 'executeLoading' ).name( 'Run' );
 			handleExecuteLoading.domElement.id = 'startButton';
 			folderRenderingOptions.open();
 			folderObjLoader2ParallelOptions.open();
@@ -508,14 +587,19 @@
 
 
 			// init three.js example application
-			function resizeWindow () {
+			function resizeWindow() {
+
 				app.resizeDisplayGL();
+
 			}
 
-			function render () {
+			function render() {
+
 				requestAnimationFrame( render );
 				app.render();
+
 			}
+
 			window.addEventListener( 'resize', resizeWindow, false );
 
 			console.log( 'Starting initialisation phase...' );

examples/webgl_loader_obj_mtl.html

@@ -20,14 +20,12 @@
 			import { MTLLoader } from './jsm/loaders/MTLLoader.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
-			var container;
+			let camera, scene, renderer;
 
-			var camera, scene, renderer;
+			let mouseX = 0, mouseY = 0;
 
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 
 			init();
@@ -36,7 +34,7 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -46,29 +44,29 @@
 
 				scene = new THREE.Scene();
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
 				// model
 
-				var onProgress = function ( xhr ) {
+				const onProgress = function ( xhr ) {
 
 					if ( xhr.lengthComputable ) {
 
-						var percentComplete = xhr.loaded / xhr.total * 100;
+						const percentComplete = xhr.loaded / xhr.total * 100;
 						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
 
 					}
 
 				};
 
-				var onError = function () { };
+				const onError = function () { };
 
-				var manager = new THREE.LoadingManager();
+				const manager = new THREE.LoadingManager();
 				manager.addHandler( /\.dds$/i, new DDSLoader() );
 
 				// comment in the following line and import TGALoader if your asset uses TGA textures

examples/webgl_loader_pcd.html

@@ -24,8 +24,8 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { PCDLoader } from './jsm/loaders/PCDLoader.js';
 
-			var container, stats;
-			var camera, controls, scene, renderer;
+			let container, stats;
+			let camera, controls, scene, renderer;
 
 			init();
 			animate();
@@ -46,11 +46,11 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var loader = new PCDLoader();
+				const loader = new PCDLoader();
 				loader.load( './models/pcd/binary/Zaghetto.pcd', function ( points ) {
 
 					scene.add( points );
-					var center = points.geometry.boundingSphere.center;
+					const center = points.geometry.boundingSphere.center;
 					controls.target.set( center.x, center.y, center.z );
 					controls.update();
 
@@ -91,7 +91,7 @@
 
 			function keyboard( ev ) {
 
-				var points = scene.getObjectByName( 'Zaghetto.pcd' );
+				const points = scene.getObjectByName( 'Zaghetto.pcd' );
 
 				switch ( ev.key || String.fromCharCode( ev.keyCode || ev.charCode ) ) {
 

examples/webgl_loader_pdb.html

@@ -50,12 +50,12 @@
 			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
 			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
 
-			var camera, scene, renderer, labelRenderer;
-			var controls;
+			let camera, scene, renderer, labelRenderer;
+			let controls;
 
-			var root;
+			let root;
 
-			var MOLECULES = {
+			const MOLECULES = {
 				"Ethanol": "ethanol.pdb",
 				"Aspirin": "aspirin.pdb",
 				"Caffeine": "caffeine.pdb",
@@ -75,10 +75,10 @@
 				"Graphite": "graphite.pdb"
 			};
 
-			var loader = new PDBLoader();
-			var offset = new THREE.Vector3();
+			const loader = new PDBLoader();
+			const offset = new THREE.Vector3();
 
-			var menu = document.getElementById( 'menu' );
+			const menu = document.getElementById( 'menu' );
 
 			init();
 			animate();
@@ -92,13 +92,13 @@
 				camera.position.z = 1000;
 				scene.add( camera );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 0.8 );
-				light.position.set( 1, 1, 1 );
-				scene.add( light );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				light1.position.set( 1, 1, 1 );
+				scene.add( light1 );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 0.5 );
-				light.position.set( - 1, - 1, 1 );
-				scene.add( light );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				light2.position.set( - 1, - 1, 1 );
+				scene.add( light2 );
 
 				root = new THREE.Group();
 				scene.add( root );
@@ -148,13 +148,13 @@
 
 			function createMenu() {
 
-				for ( var m in MOLECULES ) {
+				for ( const m in MOLECULES ) {
 
-					var button = document.createElement( 'button' );
+					const button = document.createElement( 'button' );
 					button.innerHTML = m;
 					menu.appendChild( button );
 
-					var url = 'models/pdb/' + MOLECULES[ m ];
+					const url = 'models/pdb/' + MOLECULES[ m ];
 
 					button.addEventListener( 'click', generateButtonCallback( url ), false );
 
@@ -168,19 +168,19 @@
 
 				while ( root.children.length > 0 ) {
 
-					var object = root.children[ 0 ];
+					const object = root.children[ 0 ];
 					object.parent.remove( object );
 
 				}
 
 				loader.load( url, function ( pdb ) {
 
-					var geometryAtoms = pdb.geometryAtoms;
-					var geometryBonds = pdb.geometryBonds;
-					var json = pdb.json;
+					const geometryAtoms = pdb.geometryAtoms;
+					const geometryBonds = pdb.geometryBonds;
+					const json = pdb.json;
 
-					var boxGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
-					var sphereGeometry = new THREE.IcosahedronBufferGeometry( 1, 3 );
+					const boxGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+					const sphereGeometry = new THREE.IcosahedronBufferGeometry( 1, 3 );
 
 					geometryAtoms.computeBoundingBox();
 					geometryAtoms.boundingBox.getCenter( offset ).negate();
@@ -188,13 +188,13 @@
 					geometryAtoms.translate( offset.x, offset.y, offset.z );
 					geometryBonds.translate( offset.x, offset.y, offset.z );
 
-					var positions = geometryAtoms.getAttribute( 'position' );
-					var colors = geometryAtoms.getAttribute( 'color' );
+					let positions = geometryAtoms.getAttribute( 'position' );
+					const colors = geometryAtoms.getAttribute( 'color' );
 
-					var position = new THREE.Vector3();
-					var color = new THREE.Color();
+					const position = new THREE.Vector3();
+					const color = new THREE.Color();
 
-					for ( var i = 0; i < positions.count; i ++ ) {
+					for ( let i = 0; i < positions.count; i ++ ) {
 
 						position.x = positions.getX( i );
 						position.y = positions.getY( i );
@@ -204,22 +204,22 @@
 						color.g = colors.getY( i );
 						color.b = colors.getZ( i );
 
-						var material = new THREE.MeshPhongMaterial( { color: color } );
+						const material = new THREE.MeshPhongMaterial( { color: color } );
 
-						var object = new THREE.Mesh( sphereGeometry, material );
+						const object = new THREE.Mesh( sphereGeometry, material );
 						object.position.copy( position );
 						object.position.multiplyScalar( 75 );
 						object.scale.multiplyScalar( 25 );
 						root.add( object );
 
-						var atom = json.atoms[ i ];
+						const atom = json.atoms[ i ];
 
-						var text = document.createElement( 'div' );
+						const text = document.createElement( 'div' );
 						text.className = 'label';
 						text.style.color = 'rgb(' + atom[ 3 ][ 0 ] + ',' + atom[ 3 ][ 1 ] + ',' + atom[ 3 ][ 2 ] + ')';
 						text.textContent = atom[ 4 ];
 
-						var label = new CSS2DObject( text );
+						const label = new CSS2DObject( text );
 						label.position.copy( object.position );
 						root.add( label );
 
@@ -227,10 +227,10 @@
 
 					positions = geometryBonds.getAttribute( 'position' );
 
-					var start = new THREE.Vector3();
-					var end = new THREE.Vector3();
+					const start = new THREE.Vector3();
+					const end = new THREE.Vector3();
 
-					for ( var i = 0; i < positions.count; i += 2 ) {
+					for ( let i = 0; i < positions.count; i += 2 ) {
 
 						start.x = positions.getX( i );
 						start.y = positions.getY( i );
@@ -243,7 +243,7 @@
 						start.multiplyScalar( 75 );
 						end.multiplyScalar( 75 );
 
-						var object = new THREE.Mesh( boxGeometry, new THREE.MeshPhongMaterial( 0xffffff ) );
+						const object = new THREE.Mesh( boxGeometry, new THREE.MeshPhongMaterial( 0xffffff ) );
 						object.position.copy( start );
 						object.position.lerp( end, 0.5 );
 						object.scale.set( 5, 5, start.distanceTo( end ) );
@@ -277,7 +277,7 @@
 				requestAnimationFrame( animate );
 				controls.update();
 
-				var time = Date.now() * 0.0004;
+				const time = Date.now() * 0.0004;
 
 				root.rotation.x = time;
 				root.rotation.y = time * 0.7;

examples/webgl_loader_ply.html

@@ -21,9 +21,9 @@
 
 			import { PLYLoader } from './jsm/loaders/PLYLoader.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, cameraTarget, scene, renderer;
+			let camera, cameraTarget, scene, renderer;
 
 			init();
 			animate();
@@ -45,7 +45,7 @@
 
 				// Ground
 
-				var plane = new THREE.Mesh(
+				const plane = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 40, 40 ),
 					new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
 				);
@@ -58,13 +58,13 @@
 
 				// PLY file
 
-				var loader = new PLYLoader();
+				const loader = new PLYLoader();
 				loader.load( './models/ply/ascii/dolphins.ply', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 
-					var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.y = - 0.2;
 					mesh.position.z = 0.3;
@@ -82,8 +82,8 @@
 
 					geometry.computeVertexNormals();
 
-					var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = - 0.2;
 					mesh.position.y = - 0.02;
@@ -128,13 +128,13 @@
 
 			function addShadowedLight( x, y, z, color, intensity ) {
 
-				var directionalLight = new THREE.DirectionalLight( color, intensity );
+				const directionalLight = new THREE.DirectionalLight( color, intensity );
 				directionalLight.position.set( x, y, z );
 				scene.add( directionalLight );
 
 				directionalLight.castShadow = true;
 
-				var d = 1;
+				const d = 1;
 				directionalLight.shadow.camera.left = - d;
 				directionalLight.shadow.camera.right = d;
 				directionalLight.shadow.camera.top = d;
@@ -170,7 +170,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.0005;
+				const timer = Date.now() * 0.0005;
 
 				camera.position.x = Math.sin( timer ) * 2.5;
 				camera.position.z = Math.cos( timer ) * 2.5;

examples/webgl_loader_prwm.html

@@ -35,15 +35,12 @@
 
 			import { PRWMLoader } from './jsm/loaders/PRWMLoader.js';
 
-			var container;
+			let camera, scene, renderer;
 
-			var camera, scene, renderer;
-
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let mouseX = 0, mouseY = 0;
 
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -52,7 +49,7 @@
 			function init() {
 
 				document.getElementById( 'endianness' ).innerHTML = PRWMLoader.isBigEndianPlatform() ? 'big-endian' : 'little-endian';
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -62,25 +59,25 @@
 
 				scene = new THREE.Scene();
 
-				var ambient = new THREE.AmbientLight( 0x101030 );
+				const ambient = new THREE.AmbientLight( 0x101030 );
 				scene.add( ambient );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
+				const directionalLight = new THREE.DirectionalLight( 0xffeedd );
 				directionalLight.position.set( 0, 0, 1 );
 				scene.add( directionalLight );
 
 				// model
 
-				var loader = new PRWMLoader();
-				var material = new THREE.MeshPhongMaterial( {} );
-				var busy = false;
-				var mesh = null;
+				const loader = new PRWMLoader();
+				const material = new THREE.MeshPhongMaterial( {} );
+				let busy = false;
+				let mesh = null;
 
-				var onProgress = function ( xhr ) {
+				const onProgress = function ( xhr ) {
 
 					if ( xhr.lengthComputable ) {
 
-						var percentComplete = xhr.loaded / xhr.total * 100;
+						const percentComplete = xhr.loaded / xhr.total * 100;
 						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
 
 						if ( xhr.loaded === xhr.total ) {
@@ -94,7 +91,7 @@
 
 				};
 
-				var onError = function () {
+				const onError = function () {
 
 					busy = false;
 

examples/webgl_loader_stl.html

@@ -21,9 +21,9 @@
 
 			import { STLLoader } from './jsm/loaders/STLLoader.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, cameraTarget, scene, renderer;
+			let camera, cameraTarget, scene, renderer;
 
 			init();
 			animate();
@@ -42,10 +42,9 @@
 				scene.background = new THREE.Color( 0x72645b );
 				scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
 
-
 				// Ground
 
-				var plane = new THREE.Mesh(
+				const plane = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 40, 40 ),
 					new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
 				);
@@ -58,11 +57,11 @@
 
 				// ASCII file
 
-				var loader = new STLLoader();
+				const loader = new STLLoader();
 				loader.load( './models/stl/ascii/slotted_disk.stl', function ( geometry ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.set( 0, - 0.25, 0.6 );
 					mesh.rotation.set( 0, - Math.PI / 2, 0 );
@@ -78,11 +77,11 @@
 
 				// Binary files
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
+				const material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
 
 				loader.load( './models/stl/binary/pr2_head_pan.stl', function ( geometry ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.set( 0, - 0.37, - 0.6 );
 					mesh.rotation.set( - Math.PI / 2, 0, 0 );
@@ -97,7 +96,7 @@
 
 				loader.load( './models/stl/binary/pr2_head_tilt.stl', function ( geometry ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.set( 0.136, - 0.37, - 0.6 );
 					mesh.rotation.set( - Math.PI / 2, 0.3, 0 );
@@ -113,14 +112,15 @@
 				// Colored binary STL
 				loader.load( './models/stl/binary/colored.stl', function ( geometry ) {
 
-					var meshMaterial = material;
+					let meshMaterial = material;
+
 					if ( geometry.hasColors ) {
 
 						meshMaterial = new THREE.MeshPhongMaterial( { opacity: geometry.alpha, vertexColors: true } );
 
 					}
 
-					var mesh = new THREE.Mesh( geometry, meshMaterial );
+					const mesh = new THREE.Mesh( geometry, meshMaterial );
 
 					mesh.position.set( 0.5, 0.2, 0 );
 					mesh.rotation.set( - Math.PI / 2, Math.PI / 2, 0 );
@@ -164,13 +164,13 @@
 
 			function addShadowedLight( x, y, z, color, intensity ) {
 
-				var directionalLight = new THREE.DirectionalLight( color, intensity );
+				const directionalLight = new THREE.DirectionalLight( color, intensity );
 				directionalLight.position.set( x, y, z );
 				scene.add( directionalLight );
 
 				directionalLight.castShadow = true;
 
-				var d = 1;
+				const d = 1;
 				directionalLight.shadow.camera.left = - d;
 				directionalLight.shadow.camera.right = d;
 				directionalLight.shadow.camera.top = d;
@@ -203,7 +203,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.0005;
+				const timer = Date.now() * 0.0005;
 
 				camera.position.x = Math.cos( timer ) * 3;
 				camera.position.z = Math.sin( timer ) * 3;

examples/webgl_loader_svg.html

@@ -29,7 +29,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { SVGLoader } from './jsm/loaders/SVGLoader.js';
 
-			var renderer, stats, scene, camera, gui, guiData;
+			let renderer, stats, scene, camera, gui, guiData;
 
 			init();
 			animate();
@@ -38,7 +38,7 @@
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				//
 
@@ -54,7 +54,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.screenSpacePanning = true;
 
 				//
@@ -134,32 +134,32 @@
 
 				//
 
-				var helper = new THREE.GridHelper( 160, 10 );
+				const helper = new THREE.GridHelper( 160, 10 );
 				helper.rotation.x = Math.PI / 2;
 				scene.add( helper );
 
 				//
 
-				var loader = new SVGLoader();
+				const loader = new SVGLoader();
 
 				loader.load( url, function ( data ) {
 
-					var paths = data.paths;
+					const paths = data.paths;
 
-					var group = new THREE.Group();
+					const group = new THREE.Group();
 					group.scale.multiplyScalar( 0.25 );
 					group.position.x = - 70;
 					group.position.y = 70;
 					group.scale.y *= - 1;
 
-					for ( var i = 0; i < paths.length; i ++ ) {
+					for ( let i = 0; i < paths.length; i ++ ) {
 
-						var path = paths[ i ];
+						const path = paths[ i ];
 
-						var fillColor = path.userData.style.fill;
+						const fillColor = path.userData.style.fill;
 						if ( guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none' ) {
 
-							var material = new THREE.MeshBasicMaterial( {
+							const material = new THREE.MeshBasicMaterial( {
 								color: new THREE.Color().setStyle( fillColor ),
 								opacity: path.userData.style.fillOpacity,
 								transparent: path.userData.style.fillOpacity < 1,
@@ -168,14 +168,14 @@
 								wireframe: guiData.fillShapesWireframe
 							} );
 
-							var shapes = path.toShapes( true );
+							const shapes = path.toShapes( true );
 
-							for ( var j = 0; j < shapes.length; j ++ ) {
+							for ( let j = 0; j < shapes.length; j ++ ) {
 
-								var shape = shapes[ j ];
+								const shape = shapes[ j ];
 
-								var geometry = new THREE.ShapeBufferGeometry( shape );
-								var mesh = new THREE.Mesh( geometry, material );
+								const geometry = new THREE.ShapeBufferGeometry( shape );
+								const mesh = new THREE.Mesh( geometry, material );
 
 								group.add( mesh );
 
@@ -183,11 +183,11 @@
 
 						}
 
-						var strokeColor = path.userData.style.stroke;
+						const strokeColor = path.userData.style.stroke;
 
 						if ( guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none' ) {
 
-							var material = new THREE.MeshBasicMaterial( {
+							const material = new THREE.MeshBasicMaterial( {
 								color: new THREE.Color().setStyle( strokeColor ),
 								opacity: path.userData.style.strokeOpacity,
 								transparent: path.userData.style.strokeOpacity < 1,
@@ -196,15 +196,15 @@
 								wireframe: guiData.strokesWireframe
 							} );
 
-							for ( var j = 0, jl = path.subPaths.length; j < jl; j ++ ) {
+							for ( let j = 0, jl = path.subPaths.length; j < jl; j ++ ) {
 
-								var subPath = path.subPaths[ j ];
+								const subPath = path.subPaths[ j ];
 
-								var geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
+								const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
 
 								if ( geometry ) {
 
-									var mesh = new THREE.Mesh( geometry, material );
+									const mesh = new THREE.Mesh( geometry, material );
 
 									group.add( mesh );
 

examples/webgl_loader_texture_basis.html

@@ -19,10 +19,10 @@
 
 			import { BasisTextureLoader } from './jsm/loaders/BasisTextureLoader.js';
 
-			var camera, scene, renderer;
-			var mesh;
+			let camera, scene, renderer;
+			let mesh;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -40,14 +40,14 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
-				var material = new THREE.MeshBasicMaterial();
+				const geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				const material = new THREE.MeshBasicMaterial();
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				scene.add( mesh );
 
-				var loader = new BasisTextureLoader();
+				const loader = new BasisTextureLoader();
 				loader.setTranscoderPath( 'js/libs/basis/' );
 				loader.detectSupport( renderer );
 				loader.load( 'textures/compressed/PavingStones.basis', function ( texture ) {
@@ -79,7 +79,7 @@
 
 				requestAnimationFrame( animate );
 
-				var delta = clock.getDelta() * 0.5;
+				const delta = clock.getDelta() * 0.5;
 
 				mesh.rotation.x += delta;
 				mesh.rotation.y += delta;

examples/webgl_loader_texture_dds.html

@@ -19,8 +19,8 @@
 
 			import { DDSLoader } from './jsm/loaders/DDSLoader.js';
 
-			var camera, scene, renderer;
-			var meshes = [];
+			let camera, scene, renderer;
+			const meshes = [];
 
 			init();
 			animate();
@@ -32,7 +32,7 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				const geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 
 				/*
 				This is how compressed textures are supposed to be used:
@@ -42,29 +42,29 @@
 				DXT5 - RGBA - transparent textures with full alpha range
 				*/
 
-				var loader = new DDSLoader();
+				const loader = new DDSLoader();
 
-				var map1 = loader.load( 'textures/compressed/disturb_dxt1_nomip.dds' );
+				const map1 = loader.load( 'textures/compressed/disturb_dxt1_nomip.dds' );
 				map1.minFilter = map1.magFilter = THREE.LinearFilter;
 				map1.anisotropy = 4;
 
-				var map2 = loader.load( 'textures/compressed/disturb_dxt1_mip.dds' );
+				const map2 = loader.load( 'textures/compressed/disturb_dxt1_mip.dds' );
 				map2.anisotropy = 4;
 
-				var map3 = loader.load( 'textures/compressed/hepatica_dxt3_mip.dds' );
+				const map3 = loader.load( 'textures/compressed/hepatica_dxt3_mip.dds' );
 				map3.anisotropy = 4;
 
-				var map4 = loader.load( 'textures/compressed/explosion_dxt5_mip.dds' );
+				const map4 = loader.load( 'textures/compressed/explosion_dxt5_mip.dds' );
 				map4.anisotropy = 4;
 
-				var map5 = loader.load( 'textures/compressed/disturb_argb_nomip.dds' );
+				const map5 = loader.load( 'textures/compressed/disturb_argb_nomip.dds' );
 				map5.minFilter = map5.magFilter = THREE.LinearFilter;
 				map5.anisotropy = 4;
 
-				var map6 = loader.load( 'textures/compressed/disturb_argb_mip.dds' );
+				const map6 = loader.load( 'textures/compressed/disturb_argb_mip.dds' );
 				map6.anisotropy = 4;
 
-				var cubemap1 = loader.load( 'textures/compressed/Mountains.dds', function ( texture ) {
+				const cubemap1 = loader.load( 'textures/compressed/Mountains.dds', function ( texture ) {
 
 					texture.magFilter = THREE.LinearFilter;
 					texture.minFilter = THREE.LinearFilter;
@@ -73,7 +73,7 @@
 
 				} );
 
-				var cubemap2 = loader.load( 'textures/compressed/Mountains_argb_mip.dds', function ( texture ) {
+				const cubemap2 = loader.load( 'textures/compressed/Mountains_argb_mip.dds', function ( texture ) {
 
 					texture.magFilter = THREE.LinearFilter;
 					texture.minFilter = THREE.LinearFilter;
@@ -82,7 +82,7 @@
 
 				} );
 
-				var cubemap3 = loader.load( 'textures/compressed/Mountains_argb_nomip.dds', function ( texture ) {
+				const cubemap3 = loader.load( 'textures/compressed/Mountains_argb_nomip.dds', function ( texture ) {
 
 					texture.magFilter = THREE.LinearFilter;
 					texture.minFilter = THREE.LinearFilter;
@@ -91,17 +91,16 @@
 
 				} );
 
-				var material1 = new THREE.MeshBasicMaterial( { map: map1, envMap: cubemap1 } );
-				var material2 = new THREE.MeshBasicMaterial( { map: map2 } );
-				var material3 = new THREE.MeshBasicMaterial( { map: map3, alphaTest: 0.5, side: THREE.DoubleSide } );
-				var material4 = new THREE.MeshBasicMaterial( { map: map4, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
-				var material5 = new THREE.MeshBasicMaterial( { envMap: cubemap2 } );
-				var material6 = new THREE.MeshBasicMaterial( { envMap: cubemap3 } );
-				var material7 = new THREE.MeshBasicMaterial( { map: map5 } );
-				var material8 = new THREE.MeshBasicMaterial( { map: map6 } );
+				const material1 = new THREE.MeshBasicMaterial( { map: map1, envMap: cubemap1 } );
+				const material2 = new THREE.MeshBasicMaterial( { map: map2 } );
+				const material3 = new THREE.MeshBasicMaterial( { map: map3, alphaTest: 0.5, side: THREE.DoubleSide } );
+				const material4 = new THREE.MeshBasicMaterial( { map: map4, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
+				const material5 = new THREE.MeshBasicMaterial( { envMap: cubemap2 } );
+				const material6 = new THREE.MeshBasicMaterial( { envMap: cubemap3 } );
+				const material7 = new THREE.MeshBasicMaterial( { map: map5 } );
+				const material8 = new THREE.MeshBasicMaterial( { map: map6 } );
 
-
-				var mesh = new THREE.Mesh( new THREE.TorusBufferGeometry( 100, 50, 32, 16 ), material1 );
+				let mesh = new THREE.Mesh( new THREE.TorusBufferGeometry( 100, 50, 32, 16 ), material1 );
 				mesh.position.x = - 600;
 				mesh.position.y = - 200;
 				scene.add( mesh );
@@ -171,11 +170,11 @@
 
 				requestAnimationFrame( animate );
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
-				for ( var i = 0; i < meshes.length; i ++ ) {
+				for ( let i = 0; i < meshes.length; i ++ ) {
 
-					var mesh = meshes[ i ];
+					const mesh = meshes[ i ];
 					mesh.rotation.x = time;
 					mesh.rotation.y = time;
 

examples/webgl_loader_texture_exr.html

@@ -21,11 +21,11 @@
 
 			import { EXRLoader } from './jsm/loaders/EXRLoader.js';
 
-			var params = {
+			const params = {
 				exposure: 2.0
 			};
 
-			var renderer, scene, camera;
+			let renderer, scene, camera;
 
 			init();
 
@@ -43,7 +43,7 @@
 
 				scene = new THREE.Scene();
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
 				camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
 
@@ -61,11 +61,11 @@
 						//texture.minFilter = LinearFilter;
 						//texture.magFilter = LinearFilter;
 
-						var material = new THREE.MeshBasicMaterial( { map: texture } );
+						const material = new THREE.MeshBasicMaterial( { map: texture } );
 
-						var quad = new THREE.PlaneBufferGeometry( 1.5 * textureData.width / textureData.height, 1.5 );
+						const quad = new THREE.PlaneBufferGeometry( 1.5 * textureData.width / textureData.height, 1.5 );
 
-						var mesh = new THREE.Mesh( quad, material );
+						const mesh = new THREE.Mesh( quad, material );
 
 						scene.add( mesh );
 
@@ -75,7 +75,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'exposure', 0, 4, 0.01 ).onChange( render );
 				gui.open();
@@ -88,9 +88,9 @@
 
 			function onWindowResize() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
-				var frustumHeight = camera.top - camera.bottom;
+				const frustumHeight = camera.top - camera.bottom;
 
 				camera.left = - frustumHeight * aspect / 2;
 				camera.right = frustumHeight * aspect / 2;

examples/webgl_loader_texture_hdr.html

@@ -21,11 +21,11 @@
 
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			var params = {
+			const params = {
 				exposure: 2.0
 			};
 
-			var renderer, scene, camera;
+			let renderer, scene, camera;
 
 			init();
 
@@ -43,7 +43,7 @@
 
 				scene = new THREE.Scene();
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
 				camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
 
@@ -54,11 +54,11 @@
 						//console.log( textureData );
 						//console.log( texture );
 
-						var material = new THREE.MeshBasicMaterial( { map: texture } );
+						const material = new THREE.MeshBasicMaterial( { map: texture } );
 
-						var quad = new THREE.PlaneBufferGeometry( 1.5 * textureData.width / textureData.height, 1.5 );
+						const quad = new THREE.PlaneBufferGeometry( 1.5 * textureData.width / textureData.height, 1.5 );
 
-						var mesh = new THREE.Mesh( quad, material );
+						const mesh = new THREE.Mesh( quad, material );
 
 						scene.add( mesh );
 
@@ -68,7 +68,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'exposure', 0, 4, 0.01 ).onChange( render );
 				gui.open();
@@ -81,9 +81,9 @@
 
 			function onWindowResize() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
-				var frustumHeight = camera.top - camera.bottom;
+				const frustumHeight = camera.top - camera.bottom;
 
 				camera.left = - frustumHeight * aspect / 2;
 				camera.right = frustumHeight * aspect / 2;

examples/webgl_loader_texture_ktx.html

@@ -33,8 +33,8 @@
 	ASTC_4x4, ASTC8x8 - transparent textures with full alpha range
 	*/
 
-	var camera, scene, renderer;
-	var meshes = [];
+	let camera, scene, renderer;
+	const meshes = [];
 
 	init();
 	animate();
@@ -46,7 +46,7 @@
 		renderer.setSize( window.innerWidth, window.innerHeight );
 		document.body.appendChild( renderer.domElement );
 
-		var formats = {
+		const formats = {
 			astc: renderer.extensions.has( 'WEBGL_compressed_texture_astc' ),
 			etc1: renderer.extensions.has( 'WEBGL_compressed_texture_etc1' ),
 			s3tc: renderer.extensions.has( 'WEBGL_compressed_texture_s3tc' ),
@@ -58,11 +58,11 @@
 
 		scene = new THREE.Scene();
 
-		var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
-		var material1, material2;
+		const geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+		let material1, material2;
 
 		// TODO: add cubemap support
-		var loader = new KTXLoader();
+		const loader = new KTXLoader();
 
 		if ( formats.pvrtc ) {
 
@@ -125,10 +125,10 @@
 
 		}
 
-		var x = - meshes.length / 2 * 150;
-		for ( var i = 0; i < meshes.length; ++ i, x += 300 ) {
+		let x = - meshes.length / 2 * 150;
+		for ( let i = 0; i < meshes.length; ++ i, x += 300 ) {
 
-			var mesh = meshes[ i ];
+			const mesh = meshes[ i ];
 			mesh.position.x = x;
 			mesh.position.y = 0;
 			scene.add( mesh );
@@ -152,11 +152,11 @@
 
 		requestAnimationFrame( animate );
 
-		var time = Date.now() * 0.001;
+		const time = Date.now() * 0.001;
 
-		for ( var i = 0; i < meshes.length; i ++ ) {
+		for ( let i = 0; i < meshes.length; i ++ ) {
 
-			var mesh = meshes[ i ];
+			const mesh = meshes[ i ];
 			mesh.rotation.x = time;
 			mesh.rotation.y = time;
 

examples/webgl_loader_texture_ktx2.html

@@ -23,35 +23,35 @@
 			import { KTX2Loader } from './jsm/loaders/KTX2Loader.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var width = window.innerWidth;
-			var height = window.innerHeight;
+			const width = window.innerWidth;
+			const height = window.innerHeight;
 
-			var renderer = new THREE.WebGLRenderer( { antialias: true } );
+			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setSize( width, height );
 			renderer.outputEncoding = THREE.sRGBEncoding;
 			document.body.appendChild( renderer.domElement );
 
-			var scene = new THREE.Scene();
+			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0x202020 );
 
-			var camera = new THREE.PerspectiveCamera( 60, width / height, 0.1, 100 );
+			const camera = new THREE.PerspectiveCamera( 60, width / height, 0.1, 100 );
 			camera.position.set( 2, 1.5, 1 );
 			camera.lookAt( scene.position );
 			scene.add( camera );
 
-			var controls = new OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.autoRotate = true;
 
 			// PlaneBufferGeometry UVs assume flipY=true, which compressed textures don't support.
-			var geometry = flipY( new THREE.PlaneBufferGeometry() );
-			var material = new THREE.MeshBasicMaterial( {
+			const geometry = flipY( new THREE.PlaneBufferGeometry() );
+			const material = new THREE.MeshBasicMaterial( {
 				color: 0xFFFFFF,
 				side: THREE.DoubleSide
 			} );
-			var mesh = new THREE.Mesh( geometry, material );
+			const mesh = new THREE.Mesh( geometry, material );
 			scene.add( mesh );
 
-			var formatStrings = {
+			const formatStrings = {
 				[ THREE.RGBAFormat ]: "RGBA32",
 				[ THREE.RGBA_ASTC_4x4_Format ]: "RGBA_ASTC_4x4",
 				[ THREE.RGB_S3TC_DXT1_Format ]: "RGB_S3TC_DXT1",
@@ -91,8 +91,8 @@
 
 			window.addEventListener( 'resize', () => {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -103,9 +103,9 @@
 			/** Correct UVs to be compatible with `flipY=false` textures. */
 			function flipY( geometry ) {
 
-				var uv = geometry.attributes.uv;
+				const uv = geometry.attributes.uv;
 
-				for ( var i = 0; i < uv.count; i ++ ) {
+				for ( let i = 0; i < uv.count; i ++ ) {
 
 					uv.setY( i, 1 - uv.getY( i ) );
 

examples/webgl_loader_texture_pvrtc.html

@@ -18,8 +18,8 @@
 
 			import { PVRLoader } from './jsm/loaders/PVRLoader.js';
 
-			var camera, scene, renderer;
-			var meshes = [];
+			let camera, scene, renderer;
+			const meshes = [];
 
 			init();
 			animate();
@@ -31,11 +31,11 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				const geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 
 				//
 
-				var onCube1Loaded = function ( texture ) {
+				const onCube1Loaded = function ( texture ) {
 
 					texture.magFilter = THREE.LinearFilter;
 					texture.minFilter = THREE.LinearFilter;
@@ -44,7 +44,7 @@
 
 				};
 
-				var onCube2Loaded = function ( texture ) {
+				const onCube2Loaded = function ( texture ) {
 
 					texture.magFilter = THREE.LinearFilter;
 					// texture.minFilter = LinearMipmapNearestFilter;
@@ -56,16 +56,16 @@
 
 				//
 
-				var loader = new PVRLoader();
+				const loader = new PVRLoader();
 
-				var disturb_4bpp_rgb = loader.load( 'textures/compressed/disturb_4bpp_rgb.pvr' );
-				var disturb_4bpp_rgb_v3 = loader.load( 'textures/compressed/disturb_4bpp_rgb_v3.pvr' );
-				var disturb_4bpp_rgb_mips = loader.load( 'textures/compressed/disturb_4bpp_rgb_mips.pvr' );
-				var disturb_2bpp_rgb = loader.load( 'textures/compressed/disturb_2bpp_rgb.pvr' );
-				var flare_4bpp_rgba = loader.load( 'textures/compressed/flare_4bpp_rgba.pvr' );
-				var flare_2bpp_rgba = loader.load( 'textures/compressed/flare_2bpp_rgba.pvr' );
-				var park3_cube_nomip_4bpp_rgb = loader.load( 'textures/compressed/park3_cube_nomip_4bpp_rgb.pvr', onCube1Loaded );
-				var park3_cube_mip_2bpp_rgb_v3 = loader.load( 'textures/compressed/park3_cube_mip_2bpp_rgb_v3.pvr', onCube2Loaded );
+				const disturb_4bpp_rgb = loader.load( 'textures/compressed/disturb_4bpp_rgb.pvr' );
+				const disturb_4bpp_rgb_v3 = loader.load( 'textures/compressed/disturb_4bpp_rgb_v3.pvr' );
+				const disturb_4bpp_rgb_mips = loader.load( 'textures/compressed/disturb_4bpp_rgb_mips.pvr' );
+				const disturb_2bpp_rgb = loader.load( 'textures/compressed/disturb_2bpp_rgb.pvr' );
+				const flare_4bpp_rgba = loader.load( 'textures/compressed/flare_4bpp_rgba.pvr' );
+				const flare_2bpp_rgba = loader.load( 'textures/compressed/flare_2bpp_rgba.pvr' );
+				const park3_cube_nomip_4bpp_rgb = loader.load( 'textures/compressed/park3_cube_nomip_4bpp_rgb.pvr', onCube1Loaded );
+				const park3_cube_mip_2bpp_rgb_v3 = loader.load( 'textures/compressed/park3_cube_mip_2bpp_rgb_v3.pvr', onCube2Loaded );
 
 				disturb_2bpp_rgb.minFilter =
 				disturb_2bpp_rgb.magFilter =
@@ -78,19 +78,19 @@
 				flare_2bpp_rgba.minFilter =
 				flare_2bpp_rgba.magFilter = THREE.LinearFilter;
 
-				var material1 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb } );
-				var material2 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_mips } );
-				var material3 = new THREE.MeshBasicMaterial( { map: disturb_2bpp_rgb } );
-				var material4 = new THREE.MeshBasicMaterial( { map: flare_4bpp_rgba, side: THREE.DoubleSide, depthTest: false, transparent: true } );
-				var material5 = new THREE.MeshBasicMaterial( { map: flare_2bpp_rgba, side: THREE.DoubleSide, depthTest: false, transparent: true } );
-				var material6 = new THREE.MeshBasicMaterial( { envMap: park3_cube_nomip_4bpp_rgb } );
-				var material8 = new THREE.MeshBasicMaterial( { envMap: park3_cube_mip_2bpp_rgb_v3 } );
+				const material1 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb } );
+				const material2 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_mips } );
+				const material3 = new THREE.MeshBasicMaterial( { map: disturb_2bpp_rgb } );
+				const material4 = new THREE.MeshBasicMaterial( { map: flare_4bpp_rgba, side: THREE.DoubleSide, depthTest: false, transparent: true } );
+				const material5 = new THREE.MeshBasicMaterial( { map: flare_2bpp_rgba, side: THREE.DoubleSide, depthTest: false, transparent: true } );
+				const material6 = new THREE.MeshBasicMaterial( { envMap: park3_cube_nomip_4bpp_rgb } );
+				const material8 = new THREE.MeshBasicMaterial( { envMap: park3_cube_mip_2bpp_rgb_v3 } );
 
-				var material7 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_v3 } );
+				const material7 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_v3 } );
 
 				//
 
-				var mesh = new THREE.Mesh( geometry, material1 );
+				let mesh = new THREE.Mesh( geometry, material1 );
 				mesh.position.x = - 500;
 				mesh.position.y = 200;
 				scene.add( mesh );
@@ -126,7 +126,7 @@
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				var torus = new THREE.TorusBufferGeometry( 100, 50, 32, 24 );
+				const torus = new THREE.TorusBufferGeometry( 100, 50, 32, 24 );
 
 				mesh = new THREE.Mesh( torus, material6 );
 				mesh.position.x = 166;
@@ -164,11 +164,11 @@
 
 				requestAnimationFrame( animate );
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
-				for ( var i = 0; i < meshes.length; i ++ ) {
+				for ( let i = 0; i < meshes.length; i ++ ) {
 
-					var mesh = meshes[ i ];
+					const mesh = meshes[ i ];
 					mesh.rotation.x = time;
 					mesh.rotation.y = time;
 

examples/webgl_loader_texture_rgbm.html

@@ -18,11 +18,11 @@
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var params = {
+			const params = {
 				exposure: 2.0
 			};
 
-			var renderer, scene, camera;
+			let renderer, scene, camera;
 
 			init();
 
@@ -40,7 +40,7 @@
 
 				scene = new THREE.Scene();
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
 				camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
 
@@ -52,11 +52,11 @@
 					texture.magFilter = THREE.LinearFilter;
 					texture.flipY = true;
 
-					var material = new THREE.MeshBasicMaterial( { map: texture } );
+					const material = new THREE.MeshBasicMaterial( { map: texture } );
 
-					var quad = new THREE.PlaneBufferGeometry( 1.5 * texture.width / texture.height, 1.5 );
+					const quad = new THREE.PlaneBufferGeometry( 1.5 * texture.width / texture.height, 1.5 );
 
-					var mesh = new THREE.Mesh( quad, material );
+					const mesh = new THREE.Mesh( quad, material );
 
 					scene.add( mesh );
 
@@ -66,7 +66,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'exposure', 0, 4, 0.01 ).onChange( render );
 				gui.open();
@@ -79,9 +79,9 @@
 
 			function onWindowResize() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
-				var frustumHeight = camera.top - camera.bottom;
+				const frustumHeight = camera.top - camera.bottom;
 
 				camera.left = - frustumHeight * aspect / 2;
 				camera.right = frustumHeight * aspect / 2;

examples/webgl_loader_texture_tga.html

@@ -20,14 +20,14 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { TGALoader } from './jsm/loaders/TGALoader.js';
 
-			var camera, scene, renderer, stats;
+			let camera, scene, renderer, stats;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
@@ -37,35 +37,35 @@
 
 				//
 
-				var loader = new TGALoader();
-				var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
+				const loader = new TGALoader();
+				const geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
 
 				// add box 1 - grey8 texture
 
-				var texture1 = loader.load( 'textures/crate_grey8.tga' );
-				var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
+				const texture1 = loader.load( 'textures/crate_grey8.tga' );
+				const material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
 
-				var mesh1 = new THREE.Mesh( geometry, material1 );
+				const mesh1 = new THREE.Mesh( geometry, material1 );
 				mesh1.position.x = - 50;
 
 				scene.add( mesh1 );
 
 				// add box 2 - tga texture
 
-				var texture2 = loader.load( 'textures/crate_color8.tga' );
-				var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
+				const texture2 = loader.load( 'textures/crate_color8.tga' );
+				const material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
 
-				var mesh2 = new THREE.Mesh( geometry, material2 );
+				const mesh2 = new THREE.Mesh( geometry, material2 );
 				mesh2.position.x = 50;
 
 				scene.add( mesh2 );
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
 				scene.add( ambientLight );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
@@ -78,7 +78,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableZoom = false;
 
 				//

examples/webgl_loader_ttf.html

@@ -18,29 +18,29 @@
 
 			import { TTFLoader } from './jsm/loaders/TTFLoader.js';
 
-			var container;
-			var camera, cameraTarget, scene, renderer;
-			var group, textMesh1, textMesh2, textGeo, material;
-			var firstLetter = true;
+			let container;
+			let camera, cameraTarget, scene, renderer;
+			let group, textMesh1, textMesh2, textGeo, material;
+			let firstLetter = true;
 
-			var text = 'three.js',
-				height = 20,
+			let text = 'three.js';
+			const height = 20,
 				size = 70,
 				hover = 30,
 				curveSegments = 4,
 				bevelThickness = 2,
 				bevelSize = 1.5;
 
-			var font = null;
-			var mirror = true;
+			let font = null;
+			const mirror = true;
 
-			var targetRotation = 0;
-			var targetRotationOnPointerDown = 0;
+			let targetRotation = 0;
+			let targetRotationOnPointerDown = 0;
 
-			var pointerX = 0;
-			var pointerXOnPointerDown = 0;
+			let pointerX = 0;
+			let pointerXOnPointerDown = 0;
 
-			var windowHalfX = window.innerWidth / 2;
+			let windowHalfX = window.innerWidth / 2;
 
 			init();
 			animate();
@@ -65,11 +65,11 @@
 
 				// LIGHTS
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
 				dirLight.position.set( 0, 0, 1 ).normalize();
 				scene.add( dirLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 1.5 );
+				const pointLight = new THREE.PointLight( 0xffffff, 1.5 );
 				pointLight.position.set( 0, 100, 90 );
 				pointLight.color.setHSL( Math.random(), 1, 0.5 );
 				scene.add( pointLight );
@@ -81,7 +81,7 @@
 
 				scene.add( group );
 
-				var loader = new TTFLoader();
+				const loader = new TTFLoader();
 
 				loader.load( 'fonts/ttf/kenpixel.ttf', function ( json ) {
 
@@ -90,7 +90,7 @@
 
 				} );
 
-				var plane = new THREE.Mesh(
+				const plane = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 10000, 10000 ),
 					new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } )
 				);
@@ -137,7 +137,7 @@
 
 				}
 
-				var keyCode = event.keyCode;
+				const keyCode = event.keyCode;
 
 				// backspace
 
@@ -156,7 +156,7 @@
 
 			function onDocumentKeyPress( event ) {
 
-				var keyCode = event.which;
+				const keyCode = event.which;
 
 				// backspace
 
@@ -166,7 +166,7 @@
 
 				} else {
 
-					var ch = String.fromCharCode( keyCode );
+					const ch = String.fromCharCode( keyCode );
 					text += ch;
 
 					refreshText();
@@ -194,7 +194,7 @@
 				textGeo.computeBoundingBox();
 				textGeo.computeVertexNormals();
 
-				var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+				const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
 				textMesh1 = new THREE.Mesh( textGeo, material );
 

examples/webgl_loader_vox.html

@@ -19,9 +19,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { VOXLoader } from './jsm/loaders/VOXLoader.js';
 
-			var container;
-
-			var camera, controls, scene, renderer;
+			let camera, controls, scene, renderer;
 
 			init();
 			animate();
@@ -36,14 +34,14 @@
 
 				// light
 
-				var hemiLight = new THREE.HemisphereLight( 0x888888, 0x000000, 1 );
+				const hemiLight = new THREE.HemisphereLight( 0x888888, 0x000000, 1 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.75 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.75 );
 				dirLight.position.set( 1.5, 3, 2.5 );
 				scene.add( dirLight );
 
-				var loader = new VOXLoader();
+				const loader = new VOXLoader();
 				loader.load( 'models/vox/monu10.vox', function ( chunks ) {
 
 					const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
@@ -52,7 +50,7 @@
 					const color = new THREE.Color();
 					const matrix = new THREE.Matrix4();
 
-					for ( var i = 0; i < chunks.length; i ++ ) {
+					for ( let i = 0; i < chunks.length; i ++ ) {
 
 						const chunk = chunks[ i ];
 
@@ -66,7 +64,7 @@
 						mesh.scale.setScalar( 0.0015 );
 						scene.add( mesh );
 
-						for ( var j = 0, k = 0; j < data.length; j += 4, k ++ ) {
+						for ( let j = 0, k = 0; j < data.length; j += 4, k ++ ) {
 
 							const x = data[ j + 0 ] - size.x / 2;
 							const y = data[ j + 1 ] - size.y / 2;
@@ -93,7 +91,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 				container.appendChild( renderer.domElement );
 
@@ -123,7 +121,7 @@
 
 				const context = canvas.getContext( '2d' );
 
-				for ( var c = 0; c < 256; c ++ ) {
+				for ( let c = 0; c < 256; c ++ ) {
 
 					const x = c % 8;
 					const y = Math.floor( c / 8 );

examples/webgl_loader_vrm.html

@@ -24,8 +24,8 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { VRMLoader } from './jsm/loaders/VRMLoader.js';
 
-			var container, stats, controls;
-			var camera, scene, renderer, light;
+			let container, stats, controls;
+			let camera, scene, renderer, light;
 
 			init();
 			animate();
@@ -45,7 +45,7 @@
 				scene.add( light );
 
 				// model
-				var loader = new VRMLoader();
+				const loader = new VRMLoader();
 				loader.load( 'models/vrm/Alicia/AliciaSolid.vrm', function ( vrm ) {
 
 					// VRMLoader doesn't support VRM Unlit extension yet so
@@ -56,9 +56,9 @@
 
 							if ( Array.isArray( object.material ) ) {
 
-								for ( var i = 0, il = object.material.length; i < il; i ++ ) {
+								for ( let i = 0, il = object.material.length; i < il; i ++ ) {
 
-									var material = new THREE.MeshBasicMaterial();
+									const material = new THREE.MeshBasicMaterial();
 									THREE.Material.prototype.copy.call( material, object.material[ i ] );
 									material.color.copy( object.material[ i ].color );
 									material.map = object.material[ i ].map;
@@ -71,7 +71,7 @@
 
 							} else {
 
-								var material = new THREE.MeshBasicMaterial();
+								const material = new THREE.MeshBasicMaterial();
 								THREE.Material.prototype.copy.call( material, object.material );
 								material.color.copy( object.material.color );
 								material.map = object.material.map;

examples/webgl_loader_vrml.html

@@ -22,13 +22,13 @@
 			import { VRMLLoader } from './jsm/loaders/VRMLLoader.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var camera, scene, renderer, stats, controls, loader;
+			let camera, scene, renderer, stats, controls, loader;
 
-			var params = {
+			const params = {
 				asset: 'house'
 			};
 
-			var assets = [
+			const assets = [
 				'creaseAngle',
 				'crystal',
 				'house',
@@ -44,7 +44,7 @@
 				'points',
 			];
 
-			var vrmlScene;
+			let vrmlScene;
 
 			init();
 			animate();
@@ -59,10 +59,10 @@
 
 				// light
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				dirLight.position.set( 200, 200, 200 );
 				scene.add( dirLight );
 
@@ -94,7 +94,7 @@
 
 				//
 
-				var gui = new GUI( { width: 300 } );
+				const gui = new GUI( { width: 300 } );
 				gui.add( params, 'asset', assets ).onChange( function ( value ) {
 
 					if ( vrmlScene ) {

examples/webgl_loader_vtk.html

@@ -23,9 +23,9 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { VTKLoader } from './jsm/loaders/VTKLoader.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, controls, scene, renderer;
+			let camera, controls, scene, renderer;
 
 			init();
 			animate();
@@ -41,35 +41,35 @@
 
 				// light
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				dirLight.position.set( 2, 2, 2 );
 				scene.add( dirLight );
 
-				var loader = new VTKLoader();
+				const loader = new VTKLoader();
 				loader.load( "models/vtk/bunny.vtk", function ( geometry ) {
 
 					geometry.center();
 					geometry.computeVertexNormals();
 
-					var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set( - 0.075, 0.005, 0 );
 					mesh.scale.multiplyScalar( 0.2 );
 					scene.add( mesh );
 
 				} );
 
-				var loader1 = new VTKLoader();
+				const loader1 = new VTKLoader();
 				loader1.load( 'models/vtk/cube_ascii.vtp', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 					geometry.center();
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.set( - 0.025, 0, 0 );
 					mesh.scale.multiplyScalar( 0.01 );
@@ -79,14 +79,14 @@
 
 				} );
 
-				var loader2 = new VTKLoader();
+				const loader2 = new VTKLoader();
 				loader2.load( 'models/vtk/cube_binary.vtp', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 					geometry.center();
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.set( 0.025, 0, 0 );
 					mesh.scale.multiplyScalar( 0.01 );
@@ -96,14 +96,14 @@
 
 				} );
 
-				var loader3 = new VTKLoader();
+				const loader3 = new VTKLoader();
 				loader3.load( 'models/vtk/cube_no_compression.vtp', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 					geometry.center();
 
-					var material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.set( 0.075, 0, 0 );
 					mesh.scale.multiplyScalar( 0.01 );

examples/webgl_loader_x.html

@@ -27,30 +27,30 @@
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 		import { XLoader } from './jsm/loaders/XLoader.js';
 
-		var container, stats, controls;
-		var camera, scene, renderer;
-		var clock = new THREE.Clock();
-		var manager = null;
+		let container, stats, controls;
+		let camera, scene, renderer;
+		const clock = new THREE.Clock();
+		let manager = null;
 
-		var skeletonHelper = null;
-		var animates = [];
-		var actions = [];
-		var Models = [];
+		let skeletonHelper = null;
+		const animates = [];
+		const actions = [];
+		const Models = [];
 
-		init();
-
-		var onProgress = function ( xhr ) {
+		const onProgress = function ( xhr ) {
 
 			if ( xhr.lengthComputable ) {
 
-				var percentComplete = xhr.loaded / xhr.total * 100;
+				const percentComplete = xhr.loaded / xhr.total * 100;
 				console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
 
 			}
 
 		};
 
-		var onError = function () {};
+		const onError = function () {};
+
+		init();
 
 		function init() {
 
@@ -62,7 +62,7 @@
 
 			// grid
 
-			var gridHelper = new THREE.GridHelper( 14, 1, 0x303030, 0x303030 );
+			const gridHelper = new THREE.GridHelper( 14, 1, 0x303030, 0x303030 );
 			scene.add( gridHelper );
 
 			// stats
@@ -84,11 +84,11 @@
 			controls.target.set( 0, 5, 0 );
 			controls.update();
 
-			var light = new THREE.DirectionalLight( 0xffffff, 1 );
+			const light = new THREE.DirectionalLight( 0xffffff, 1 );
 			light.position.set( 10, 100, - 10 ).normalize();
 			scene.add( light );
 
-			var light2 = new THREE.DirectionalLight( 0x777666, 1 );
+			const light2 = new THREE.DirectionalLight( 0x777666, 1 );
 			light2.position.set( - 1, - 1, - 1 ).normalize();
 			scene.add( light2 );
 
@@ -105,7 +105,7 @@
 
 			};
 
-			var loader = new XLoader( manager );
+			const loader = new XLoader( manager );
 
 			actions[ 0 ] = {};
 
@@ -113,9 +113,9 @@
 
 			loader.load( [ 'models/xfile/SSR06_model.x' ], function ( object ) {
 
-				for ( var i = 0; i < object.models.length; i ++ ) {
+				for ( let i = 0; i < object.models.length; i ++ ) {
 
-					var model = object.models[ i ];
+					const model = object.models[ i ];
 
 					model.scale.x *= - 1;
 
@@ -144,7 +144,7 @@
 
 			//
 
-			var animationSelection = document.getElementById( 'mech1_anime' );
+			const animationSelection = document.getElementById( 'mech1_anime' );
 			animationSelection.addEventListener( 'change', mech1_changeAnime );
 
 		}
@@ -161,11 +161,11 @@
 
 			requestAnimationFrame( animate );
 
-			var delta = clock.getDelta();
+			const delta = clock.getDelta();
 
 			if ( animates != null && animates.length > 0 ) {
 
-				for ( var i = 0; i < animates.length; i ++ ) {
+				for ( let i = 0; i < animates.length; i ++ ) {
 
 					animates[ i ].update( delta * 1000 );
 
@@ -197,7 +197,7 @@
 
 			} else {
 
-				var loader2 = new XLoader( manager );
+				const loader2 = new XLoader( manager );
 				loader2.load( [ 'models/xfile/' + animeName + '.x', { putPos: false, putScl: false } ], function () {
 
 					// !! important!
@@ -235,7 +235,7 @@
 
 		function mech1_changeAnime( event ) {
 
-			var val = event.target.value;
+			const val = event.target.value;
 
 			loadAnimation( val, 0, function () {
 

examples/webgl_materials.html

@@ -17,19 +17,19 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let stats;
 
-			var camera, scene, renderer;
-			var pointLight;
+			let camera, scene, renderer;
+			let pointLight;
 
-			var objects = [], materials = [];
+			const objects = [], materials = [];
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -39,13 +39,13 @@
 
 				// Grid
 
-				var helper = new THREE.GridHelper( 1000, 40, 0x303030, 0x303030 );
+				const helper = new THREE.GridHelper( 1000, 40, 0x303030, 0x303030 );
 				helper.position.y = - 75;
 				scene.add( helper );
 
 				// Materials
 
-				var texture = new THREE.Texture( generateTexture() );
+				const texture = new THREE.Texture( generateTexture() );
 				texture.needsUpdate = true;
 
 				materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
@@ -64,9 +64,9 @@
 
 				// Spheres geometry
 
-				var geometry = new THREE.SphereBufferGeometry( 70, 32, 16 );
+				const geometry = new THREE.SphereBufferGeometry( 70, 32, 16 );
 
-				for ( var i = 0, l = materials.length; i < l; i ++ ) {
+				for ( let i = 0, l = materials.length; i < l; i ++ ) {
 
 					addMesh( geometry, materials[ i ] );
 
@@ -76,7 +76,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x111111 ) );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
 
 				directionalLight.position.x = Math.random() - 0.5;
 				directionalLight.position.y = Math.random() - 0.5;
@@ -110,7 +110,7 @@
 
 			function addMesh( geometry, material ) {
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 
 				mesh.position.x = ( objects.length % 4 ) * 200 - 400;
 				mesh.position.z = Math.floor( objects.length / 4 ) * 200 - 200;
@@ -136,19 +136,19 @@
 
 			function generateTexture() {
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 256;
 				canvas.height = 256;
 
-				var context = canvas.getContext( '2d' );
-				var image = context.getImageData( 0, 0, 256, 256 );
+				const context = canvas.getContext( '2d' );
+				const image = context.getImageData( 0, 0, 256, 256 );
 
-				var x = 0, y = 0;
+				let x = 0, y = 0;
 
-				for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
+				for ( let i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
 
 					x = j % 256;
-					y = x == 0 ? y + 1 : y;
+					y = ( x === 0 ) ? y + 1 : y;
 
 					image.data[ i ] = 255;
 					image.data[ i + 1 ] = 255;
@@ -176,16 +176,16 @@
 
 			function render() {
 
-				var timer = 0.0001 * Date.now();
+				const timer = 0.0001 * Date.now();
 
 				camera.position.x = Math.cos( timer ) * 1000;
 				camera.position.z = Math.sin( timer ) * 1000;
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+				for ( let i = 0, l = objects.length; i < l; i ++ ) {
 
-					var object = objects[ i ];
+					const object = objects[ i ];
 
 					object.rotation.x += 0.01;
 					object.rotation.y += 0.005;

examples/webgl_materials_blending.html

@@ -18,10 +18,10 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
-			var mapBg;
+			let camera, scene, renderer;
+			let mapBg;
 
-			var textureLoader = new THREE.TextureLoader();
+			const textureLoader = new THREE.TextureLoader();
 
 			init();
 			animate();
@@ -39,8 +39,8 @@
 
 				// BACKGROUND
 
-				var canvas = document.createElement( 'canvas' );
-				var ctx = canvas.getContext( '2d' );
+				const canvas = document.createElement( 'canvas' );
+				const ctx = canvas.getContext( '2d' );
 				canvas.width = canvas.height = 128;
 				ctx.fillStyle = '#ddd';
 				ctx.fillRect( 0, 0, 128, 128 );
@@ -58,20 +58,20 @@
 				mapBg.repeat.set( 128, 64 );
 
 				/*
-				var mapBg = textureLoader.load( 'textures/disturb.jpg' );
+				let mapBg = textureLoader.load( 'textures/disturb.jpg' );
 				mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
 				mapBg.repeat.set( 8, 4 );
 				*/
 
-				var materialBg = new THREE.MeshBasicMaterial( { map: mapBg } );
+				const materialBg = new THREE.MeshBasicMaterial( { map: mapBg } );
 
-				var meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
+				const meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
 				meshBg.position.set( 0, 0, - 1 );
 				scene.add( meshBg );
 
 				// OBJECTS
 
-				var blendings = [
+				const blendings = [
 					{ name: 'No', constant: THREE.NoBlending },
 					{ name: 'Normal', constant: THREE.NormalBlending },
 					{ name: 'Additive', constant: THREE.AdditiveBlending },
@@ -79,14 +79,14 @@
 					{ name: 'Multiply', constant: THREE.MultiplyBlending }
 				];
 
-				var map0 = textureLoader.load( 'textures/uv_grid_opengl.jpg' );
-				var map1 = textureLoader.load( 'textures/sprite0.jpg' );
-				var map2 = textureLoader.load( 'textures/sprite0.png' );
-				var map3 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
-				var map4 = textureLoader.load( 'textures/lensflare/lensflare0_alpha.png' );
+				const map0 = textureLoader.load( 'textures/uv_grid_opengl.jpg' );
+				const map1 = textureLoader.load( 'textures/sprite0.jpg' );
+				const map2 = textureLoader.load( 'textures/sprite0.png' );
+				const map3 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
+				const map4 = textureLoader.load( 'textures/lensflare/lensflare0_alpha.png' );
 
-				var geo1 = new THREE.PlaneBufferGeometry( 100, 100 );
-				var geo2 = new THREE.PlaneBufferGeometry( 100, 25 );
+				const geo1 = new THREE.PlaneBufferGeometry( 100, 100 );
+				const geo2 = new THREE.PlaneBufferGeometry( 100, 25 );
 
 				addImageRow( map0, 300 );
 				addImageRow( map1, 150 );
@@ -96,23 +96,23 @@
 
 				function addImageRow( map, y ) {
 
-					for ( var i = 0; i < blendings.length; i ++ ) {
+					for ( let i = 0; i < blendings.length; i ++ ) {
 
-						var blending = blendings[ i ];
+						const blending = blendings[ i ];
 
-						var material = new THREE.MeshBasicMaterial( { map: map } );
+						const material = new THREE.MeshBasicMaterial( { map: map } );
 						material.transparent = true;
 						material.blending = blending.constant;
 
-						var x = ( i - blendings.length / 2 ) * 110;
-						var z = 0;
+						const x = ( i - blendings.length / 2 ) * 110;
+						const z = 0;
 
-						var mesh = new THREE.Mesh( geo1, material );
+						let mesh = new THREE.Mesh( geo1, material );
 						mesh.position.set( x, y, z );
 						scene.add( mesh );
 
 
-						var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blending.name ) );
+						mesh = new THREE.Mesh( geo2, generateLabelMaterial( blending.name ) );
 						mesh.position.set( x, y - 75, z );
 						scene.add( mesh );
 
@@ -137,8 +137,8 @@
 
 			function onWindowResize() {
 
-				var SCREEN_WIDTH = window.innerWidth;
-				var SCREEN_HEIGHT = window.innerHeight;
+				const SCREEN_WIDTH = window.innerWidth;
+				const SCREEN_HEIGHT = window.innerHeight;
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
@@ -150,8 +150,8 @@
 
 			function generateLabelMaterial( text ) {
 
-				var canvas = document.createElement( 'canvas' );
-				var ctx = canvas.getContext( '2d' );
+				const canvas = document.createElement( 'canvas' );
+				const ctx = canvas.getContext( '2d' );
 				canvas.width = 128;
 				canvas.height = 32;
 
@@ -162,9 +162,9 @@
 				ctx.font = '12pt arial bold';
 				ctx.fillText( text, 10, 22 );
 
-				var map = new THREE.CanvasTexture( canvas );
+				const map = new THREE.CanvasTexture( canvas );
 
-				var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
+				const material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
 
 				return material;
 
@@ -174,9 +174,9 @@
 
 				requestAnimationFrame( animate );
 
-				var time = Date.now() * 0.00025;
-				var ox = ( time * - 0.01 * mapBg.repeat.x ) % 1;
-				var oy = ( time * - 0.01 * mapBg.repeat.y ) % 1;
+				const time = Date.now() * 0.00025;
+				const ox = ( time * - 0.01 * mapBg.repeat.x ) % 1;
+				const oy = ( time * - 0.01 * mapBg.repeat.y ) % 1;
 
 				mapBg.offset.set( ox, oy );
 

examples/webgl_materials_blending_custom.html

@@ -80,16 +80,16 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var materialBg;
-			var materials = [];
+			let materialBg;
+			const materials = [];
 
-			var mapsPre = [];
-			var mapsNoPre = [];
+			const mapsPre = [];
+			const mapsNoPre = [];
 
-			var currentMaps = mapsNoPre;
-			var currentIndex = 4;
+			let currentMaps = mapsNoPre;
+			let currentIndex = 4;
 
 			init();
 			animate();
@@ -107,12 +107,12 @@
 
 				// TEXTURE LOADER
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
 				// BACKGROUND IMAGES
 
-				var canvas1 = document.createElement( 'canvas' );
-				var ctx1 = canvas1.getContext( '2d' );
+				const canvas1 = document.createElement( 'canvas' );
+				const ctx1 = canvas1.getContext( '2d' );
 				canvas1.width = canvas1.height = 128;
 				ctx1.fillStyle = '#eee';
 				ctx1.fillRect( 0, 0, 128, 128 );
@@ -127,8 +127,8 @@
 
 				document.getElementById( 'bg_1' ).appendChild( canvas1 );
 
-				var canvas2 = document.createElement( 'canvas' );
-				var ctx2 = canvas2.getContext( '2d' );
+				const canvas2 = document.createElement( 'canvas' );
+				const ctx2 = canvas2.getContext( '2d' );
 				canvas2.width = canvas2.height = 128;
 				ctx2.fillStyle = '#444';
 				ctx2.fillRect( 0, 0, 128, 128 );
@@ -143,31 +143,31 @@
 
 				document.getElementById( 'bg_2' ).appendChild( canvas2 );
 
-				var mapBg0 = new THREE.CanvasTexture( canvas1 );
+				const mapBg0 = new THREE.CanvasTexture( canvas1 );
 				mapBg0.wrapS = mapBg0.wrapT = THREE.RepeatWrapping;
 				mapBg0.repeat.set( 128, 64 );
 
-				var mapBg1 = new THREE.CanvasTexture( canvas2 );
+				const mapBg1 = new THREE.CanvasTexture( canvas2 );
 				mapBg1.wrapS = mapBg1.wrapT = THREE.RepeatWrapping;
 				mapBg1.repeat.set( 128, 64 );
 
-				var mapBg2 = textureLoader.load( 'textures/disturb.jpg' );
+				const mapBg2 = textureLoader.load( 'textures/disturb.jpg' );
 				mapBg2.wrapS = mapBg2.wrapT = THREE.RepeatWrapping;
 				mapBg2.repeat.set( 8, 4 );
 
-				var mapBg3 = textureLoader.load( 'textures/crate.gif' );
+				const mapBg3 = textureLoader.load( 'textures/crate.gif' );
 				mapBg3.wrapS = mapBg3.wrapT = THREE.RepeatWrapping;
 				mapBg3.repeat.set( 32, 16 );
 
-				var mapBg4 = textureLoader.load( 'textures/lava/lavatile.jpg' );
+				const mapBg4 = textureLoader.load( 'textures/lava/lavatile.jpg' );
 				mapBg4.wrapS = mapBg4.wrapT = THREE.RepeatWrapping;
 				mapBg4.repeat.set( 8, 4 );
 
-				var mapBg5 = textureLoader.load( 'textures/water.jpg' );
+				const mapBg5 = textureLoader.load( 'textures/water.jpg' );
 				mapBg5.wrapS = mapBg5.wrapT = THREE.RepeatWrapping;
 				mapBg5.repeat.set( 8, 4 );
 
-				var mapBg6 = textureLoader.load( 'textures/lava/cloud.png' );
+				const mapBg6 = textureLoader.load( 'textures/lava/cloud.png' );
 				mapBg6.wrapS = mapBg6.wrapT = THREE.RepeatWrapping;
 				mapBg6.repeat.set( 2, 1 );
 
@@ -175,26 +175,26 @@
 
 				materialBg = new THREE.MeshBasicMaterial( { map: mapBg1 } );
 
-				var meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
+				const meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
 				meshBg.position.set( 0, 0, - 1 );
 				scene.add( meshBg );
 
 				// FOREGROUND IMAGES
 
-				var images = [ 'textures/disturb.jpg',
-							   'textures/sprite0.jpg',
-							   'textures/sprite0.png',
-							   'textures/lensflare/lensflare0.png',
-							   'textures/lensflare/lensflare0_alpha.png',
-							   'textures/sprites/ball.png',
-							   'textures/sprites/snowflake7_alpha.png' ];
+				const images = [ 'textures/disturb.jpg',
+					'textures/sprite0.jpg',
+					'textures/sprite0.png',
+					'textures/lensflare/lensflare0.png',
+					'textures/lensflare/lensflare0_alpha.png',
+					'textures/sprites/ball.png',
+					'textures/sprites/snowflake7_alpha.png' ];
 
-				for ( var i = 0; i < images.length; i ++ ) {
+				for ( let i = 0; i < images.length; i ++ ) {
 
-					var map = textureLoader.load( images[ i ] );
+					const map = textureLoader.load( images[ i ] );
 					mapsNoPre.push( map );
 
-					var mapPre = textureLoader.load( images[ i ] );
+					const mapPre = textureLoader.load( images[ i ] );
 					mapPre.premultiplyAlpha = true;
 					mapPre.needsUpdate = true;
 					mapsPre.push( mapPre );
@@ -202,7 +202,7 @@
 				}
 
 				// FOREGROUND OBJECTS
-				var src = [
+				const src = [
 					{ name: 'Zero', constant: THREE.ZeroFactor },
 					{ name: 'One', constant: THREE.OneFactor },
 					{ name: 'SrcColor', constant: THREE.SrcColorFactor },
@@ -216,7 +216,7 @@
 					{ name: 'SrcAlphaSaturate', constant: THREE.SrcAlphaSaturateFactor }
 				];
 
-				var dst = [
+				const dst = [
 					{ name: 'Zero', constant: THREE.ZeroFactor },
 					{ name: 'One', constant: THREE.OneFactor },
 					{ name: 'SrcColor', constant: THREE.SrcColorFactor },
@@ -229,18 +229,18 @@
 					{ name: 'OneMinusDstColor', constant: THREE.OneMinusDstColorFactor }
 				];
 
-				var geo1 = new THREE.PlaneBufferGeometry( 100, 100 );
-				var geo2 = new THREE.PlaneBufferGeometry( 100, 25 );
+				const geo1 = new THREE.PlaneBufferGeometry( 100, 100 );
+				const geo2 = new THREE.PlaneBufferGeometry( 100, 25 );
 
-				for ( var i = 0; i < dst.length; i ++ ) {
+				for ( let i = 0; i < dst.length; i ++ ) {
 
-					var blendDst = dst[ i ];
+					const blendDst = dst[ i ];
 
-					for ( var j = 0; j < src.length; j ++ ) {
+					for ( let j = 0; j < src.length; j ++ ) {
 
-						var blendSrc = src[ j ];
+						const blendSrc = src[ j ];
 
-						var material = new THREE.MeshBasicMaterial( { map: currentMaps[ currentIndex ] } );
+						const material = new THREE.MeshBasicMaterial( { map: currentMaps[ currentIndex ] } );
 						material.transparent = true;
 
 						material.blending = THREE.CustomBlending;
@@ -248,11 +248,11 @@
 						material.blendDst = blendDst.constant;
 						material.blendEquation = THREE.AddEquation;
 
-						var x = ( j - src.length / 2 ) * 110;
-						var z = 0;
-						var y = ( i - dst.length / 2 ) * 110 + 50;
+						const x = ( j - src.length / 2 ) * 110;
+						const z = 0;
+						const y = ( i - dst.length / 2 ) * 110 + 50;
 
-						var mesh = new THREE.Mesh( geo1, material );
+						const mesh = new THREE.Mesh( geo1, material );
 						mesh.position.set( x, - y, z );
 						mesh.matrixAutoUpdate = false;
 						mesh.updateMatrix();
@@ -264,15 +264,15 @@
 
 				}
 
-				for ( var j = 0; j < src.length; j ++ ) {
+				for ( let j = 0; j < src.length; j ++ ) {
 
-					var blendSrc = src[ j ];
+					const blendSrc = src[ j ];
 
-					var x = ( j - src.length / 2 ) * 110;
-					var z = 0;
-					var y = ( 0 - dst.length / 2 ) * 110 + 50;
+					const x = ( j - src.length / 2 ) * 110;
+					const z = 0;
+					const y = ( 0 - dst.length / 2 ) * 110 + 50;
 
-					var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendSrc.name, 'rgba( 0, 150, 0, 1 )' ) );
+					const mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendSrc.name, 'rgba( 0, 150, 0, 1 )' ) );
 					mesh.position.set( x, - ( y - 70 ), z );
 					mesh.matrixAutoUpdate = false;
 					mesh.updateMatrix();
@@ -280,15 +280,15 @@
 
 				}
 
-				for ( var i = 0; i < dst.length; i ++ ) {
+				for ( let i = 0; i < dst.length; i ++ ) {
 
-					var blendDst = dst[ i ];
+					const blendDst = dst[ i ];
 
-					var x = ( 0 - src.length / 2 ) * 110 - 125;
-					var z = 0;
-					var y = ( i - dst.length / 2 ) * 110 + 165;
+					const x = ( 0 - src.length / 2 ) * 110 - 125;
+					const z = 0;
+					const y = ( i - dst.length / 2 ) * 110 + 165;
 
-					var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendDst.name, 'rgba( 150, 0, 0, 1 )' ) );
+					const mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendDst.name, 'rgba( 150, 0, 0, 1 )' ) );
 					mesh.position.set( x, - ( y - 120 ), z );
 					mesh.matrixAutoUpdate = false;
 					mesh.updateMatrix();
@@ -342,11 +342,11 @@
 
 			function addImgHandler( id, index ) {
 
-				var el = document.getElementById( id );
+				const el = document.getElementById( id );
 
 				el.addEventListener( 'click', function () {
 
-					for ( var i = 0; i < materials.length; i ++ ) {
+					for ( let i = 0; i < materials.length; i ++ ) {
 
 						materials[ i ].map = currentMaps[ index ];
 
@@ -360,11 +360,11 @@
 
 			function addEqHandler( id, eq ) {
 
-				var el = document.getElementById( id );
+				const el = document.getElementById( id );
 
 				el.addEventListener( 'click', function () {
 
-					for ( var i = 0; i < materials.length; i ++ ) {
+					for ( let i = 0; i < materials.length; i ++ ) {
 
 						materials[ i ].blendEquation = eq;
 
@@ -384,7 +384,7 @@
 
 			function addBgHandler( id, map ) {
 
-				var el = document.getElementById( id );
+				const el = document.getElementById( id );
 				el.addEventListener( 'click', function () {
 
 					materialBg.map = map;
@@ -395,12 +395,12 @@
 
 			function addPreHandler( id, marray ) {
 
-				var el = document.getElementById( id );
+				const el = document.getElementById( id );
 				el.addEventListener( 'click', function () {
 
 					currentMaps = marray;
 
-					for ( var i = 0; i < materials.length; i ++ ) {
+					for ( let i = 0; i < materials.length; i ++ ) {
 
 						materials[ i ].map = currentMaps[ currentIndex ];
 
@@ -430,8 +430,8 @@
 
 			function generateLabelMaterial( text, bg ) {
 
-				var canvas = document.createElement( 'canvas' );
-				var ctx = canvas.getContext( '2d' );
+				const canvas = document.createElement( 'canvas' );
+				const ctx = canvas.getContext( '2d' );
 				canvas.width = 128;
 				canvas.height = 32;
 
@@ -442,9 +442,9 @@
 				ctx.font = '12pt arial bold';
 				ctx.fillText( text, 8, 22 );
 
-				var map = new THREE.CanvasTexture( canvas );
+				const map = new THREE.CanvasTexture( canvas );
 
-				var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
+				const material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
 				return material;
 
 			}
@@ -453,9 +453,9 @@
 
 				requestAnimationFrame( animate );
 
-				var time = Date.now() * 0.00025;
-				var ox = ( time * - 0.01 * materialBg.map.repeat.x ) % 1;
-				var oy = ( time * - 0.01 * materialBg.map.repeat.y ) % 1;
+				const time = Date.now() * 0.00025;
+				const ox = ( time * - 0.01 * materialBg.map.repeat.x ) % 1;
+				const oy = ( time * - 0.01 * materialBg.map.repeat.y ) % 1;
 
 				materialBg.map.offset.set( ox, oy );
 

examples/webgl_materials_bumpmap.html

@@ -21,24 +21,24 @@
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var statsEnabled = true;
+			const statsEnabled = true;
 
-			var container, stats, loader;
+			let container, stats, loader;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var mesh;
+			let mesh;
 
-			var spotLight;
+			let spotLight;
 
-			var mouseX = 0;
-			var mouseY = 0;
+			let mouseX = 0;
+			let mouseY = 0;
 
-			var targetX = 0;
-			var targetY = 0;
+			let targetX = 0;
+			let targetY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			const windowHalfX = window.innerWidth / 2;
+			const windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -79,9 +79,9 @@
 
 				//
 
-				var mapHeight = new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
+				const mapHeight = new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0x552811,
 					specular: 0x222222,
 					shininess: 25,

examples/webgl_materials_car.html

@@ -44,15 +44,17 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
-			var camera, scene, renderer;
-			var stats;
+			let camera, scene, renderer;
+			let stats;
 
-			var grid, wheels = [];
-			var controls;
+			let grid;
+			let controls;
+
+			const wheels = [];
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -77,8 +79,8 @@
 				controls.target.set( 0, 0.5, 0 );
 				controls.update();
 
-				var environment = new RoomEnvironment();
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const environment = new RoomEnvironment();
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xeeeeee );
@@ -93,33 +95,33 @@
 
 				// materials
 
-				var bodyMaterial = new THREE.MeshPhysicalMaterial( {
+				const bodyMaterial = new THREE.MeshPhysicalMaterial( {
 					color: 0xff0000, metalness: 0.6, roughness: 0.4, clearcoat: 0.05, clearcoatRoughness: 0.05
 				} );
 
-				var detailsMaterial = new THREE.MeshStandardMaterial( {
+				const detailsMaterial = new THREE.MeshStandardMaterial( {
 					color: 0xffffff, metalness: 1.0, roughness: 0.5
 				} );
 
-				var glassMaterial = new THREE.MeshPhysicalMaterial( {
+				const glassMaterial = new THREE.MeshPhysicalMaterial( {
 					color: 0xffffff, metalness: 0, roughness: 0.1, transmission: 0.9, transparent: true
 				} );
 
-				var bodyColorInput = document.getElementById( 'body-color' );
+				const bodyColorInput = document.getElementById( 'body-color' );
 				bodyColorInput.addEventListener( 'input', function () {
 
 					bodyMaterial.color.set( this.value );
 
 				} );
 
-				var detailsColorInput = document.getElementById( 'details-color' );
+				const detailsColorInput = document.getElementById( 'details-color' );
 				detailsColorInput.addEventListener( 'input', function () {
 
 					detailsMaterial.color.set( this.value );
 
 				} );
 
-				var glassColorInput = document.getElementById( 'glass-color' );
+				const glassColorInput = document.getElementById( 'glass-color' );
 				glassColorInput.addEventListener( 'input', function () {
 
 					glassMaterial.color.set( this.value );
@@ -128,17 +130,17 @@
 
 				// Car
 
-				var shadow = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );
+				const shadow = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );
 
-				var dracoLoader = new DRACOLoader();
+				const dracoLoader = new DRACOLoader();
 				dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.setDRACOLoader( dracoLoader );
 
 				loader.load( 'models/gltf/ferrari.glb', function ( gltf ) {
 
-					var carModel = gltf.scene.children[ 0 ];
+					const carModel = gltf.scene.children[ 0 ];
 
 					carModel.getObjectByName( 'body' ).material = bodyMaterial;
 
@@ -158,7 +160,7 @@
 					);
 
 					// shadow
-					var mesh = new THREE.Mesh(
+					const mesh = new THREE.Mesh(
 						new THREE.PlaneBufferGeometry( 0.655 * 4, 1.3 * 4 ),
 						new THREE.MeshBasicMaterial( {
 							map: shadow, blending: THREE.MultiplyBlending, toneMapped: false, transparent: true
@@ -185,9 +187,9 @@
 
 			function render() {
 
-				var time = - performance.now() / 1000;
+				const time = - performance.now() / 1000;
 
-				for ( var i = 0; i < wheels.length; i ++ ) {
+				for ( let i = 0; i < wheels.length; i ++ ) {
 
 					wheels[ i ].rotation.x = time * Math.PI;
 

examples/webgl_materials_channels.html

@@ -23,31 +23,29 @@
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var stats;
+			let stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var params = {
+			const params = {
 				material: 'normal',
 				camera: 'perspective',
 				side: 'double'
 			};
 
-			var sides = {
+			const sides = {
 				'front': THREE.FrontSide,
 				'back': THREE.BackSide,
 				'double': THREE.DoubleSide
 			};
 
-			var cameraOrtho, cameraPerspective;
-			var controlsOrtho, controlsPerspective;
+			let cameraOrtho, cameraPerspective;
+			let controlsOrtho, controlsPerspective;
 
-			var mesh, materialStandard, materialDepthBasic, materialDepthRGBA, materialNormal;
+			let mesh, materialStandard, materialDepthBasic, materialDepthRGBA, materialNormal;
 
-			var height = 500; // of camera frustum
-
-			var SCALE = 2.436143; // from original model
-			var BIAS = - 0.428408; // from original model
+			const SCALE = 2.436143; // from original model
+			const BIAS = - 0.428408; // from original model
 
 			init();
 			animate();
@@ -56,7 +54,7 @@
 			// Init gui
 			function initGui() {
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( params, 'material', [ 'standard', 'normal', 'depthBasic', 'depthRGBA' ] );
 				gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
 				gui.add( params, 'side', [ 'front', 'back', 'double' ] );
@@ -65,7 +63,7 @@
 
 			function init() {
 
-				var container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				renderer = new THREE.WebGLRenderer();
@@ -77,11 +75,12 @@
 
 				scene = new THREE.Scene();
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 				cameraPerspective = new THREE.PerspectiveCamera( 45, aspect, 500, 3000 );
 				cameraPerspective.position.z = 1500;
 				scene.add( cameraPerspective );
 
+				const height = 500;
 				cameraOrtho = new THREE.OrthographicCamera( - height * aspect, height * aspect, height, - height, 1000, 2500 );
 				cameraOrtho.position.z = 1500;
 				scene.add( cameraOrtho );
@@ -102,27 +101,27 @@
 
 				// lights
 
-				var ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xff0000, 0.5 );
+				const pointLight = new THREE.PointLight( 0xff0000, 0.5 );
 				pointLight.position.z = 2500;
 				scene.add( pointLight );
 
-				var pointLight2 = new THREE.PointLight( 0xff6666, 1 );
+				const pointLight2 = new THREE.PointLight( 0xff6666, 1 );
 				camera.add( pointLight2 );
 
-				var pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
+				const pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
 				pointLight3.position.x = - 1000;
 				pointLight3.position.z = 1000;
 				scene.add( pointLight3 );
 
 				// textures
 
-				var textureLoader = new THREE.TextureLoader();
-				var normalMap = textureLoader.load( "models/obj/ninja/normal.png" );
-				var aoMap = textureLoader.load( "models/obj/ninja/ao.jpg" );
-				var displacementMap = textureLoader.load( "models/obj/ninja/displacement.jpg" );
+				const textureLoader = new THREE.TextureLoader();
+				const normalMap = textureLoader.load( "models/obj/ninja/normal.png" );
+				const aoMap = textureLoader.load( "models/obj/ninja/ao.jpg" );
+				const displacementMap = textureLoader.load( "models/obj/ninja/displacement.jpg" );
 
 				// material
 
@@ -181,10 +180,10 @@
 
 				//
 
-				var loader = new OBJLoader();
+				const loader = new OBJLoader();
 				loader.load( "models/obj/ninja/ninjaHead_Low.obj", function ( group ) {
 
-					var geometry = group.children[ 0 ].geometry;
+					const geometry = group.children[ 0 ].geometry;
 					geometry.attributes.uv2 = geometry.attributes.uv;
 					geometry.center();
 
@@ -208,9 +207,9 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
-				var aspect = window.innerWidth / window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
 				camera.aspect = aspect;
 
@@ -241,7 +240,7 @@
 
 				if ( mesh ) {
 
-					var material = mesh.material;
+					let material = mesh.material;
 
 					switch ( params.material ) {
 

examples/webgl_materials_compile.html

@@ -52,17 +52,18 @@
 				PhongNodeMaterial
 			} from './jsm/nodes/Nodes.js';
 
-			var container = document.getElementById( 'container' );
+			const container = document.getElementById( 'container' );
 
-			var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
-			var frame = new NodeFrame();
-			var teapot;
-			var controls;
-			var meshes = [];
+			let renderer, scene, camera;
+			const clock = new THREE.Clock(), fov = 50;
+			const frame = new NodeFrame();
+			let teapot;
+			let controls;
+			const meshes = [];
 
 			document.getElementById( "preload" ).addEventListener( 'click', function () {
 
-				var hash = document.location.hash.substr( 1 );
+				const hash = document.location.hash.substr( 1 );
 
 				if ( hash.length === 0 ) {
 
@@ -101,21 +102,21 @@
 
 				scene.add( new THREE.AmbientLight( 0x464646 ) );
 
-				var light = new THREE.DirectionalLight( 0xffddcc, 1 );
-				light.position.set( 1, 0.75, 0.5 );
-				scene.add( light );
+				const light1 = new THREE.DirectionalLight( 0xffddcc, 1 );
+				light1.position.set( 1, 0.75, 0.5 );
+				scene.add( light1 );
 
-				var light = new THREE.DirectionalLight( 0xccccff, 1 );
-				light.position.set( - 1, 0.75, - 0.5 );
-				scene.add( light );
+				const light2 = new THREE.DirectionalLight( 0xccccff, 1 );
+				light2.position.set( - 1, 0.75, - 0.5 );
+				scene.add( light2 );
 
 				teapot = new TeapotBufferGeometry( 15, 18 );
 
-				var itemsonrow = 10;
+				const itemsonrow = 10;
 
-				for ( var i = 0; i < itemsonrow * itemsonrow; i ++ ) {
+				for ( let i = 0; i < itemsonrow * itemsonrow; i ++ ) {
 
-					var mesh = new THREE.Mesh( teapot );
+					const mesh = new THREE.Mesh( teapot );
 
 					mesh.position.x = 50 * ( i % itemsonrow ) - 50 * itemsonrow / 2;
 					mesh.position.z = 50 * Math.floor( i / itemsonrow ) - 150;
@@ -127,7 +128,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var hash = document.location.hash.substr( 1 );
+				const hash = document.location.hash.substr( 1 );
 
 				if ( hash.length === 0 ) {
 
@@ -150,40 +151,40 @@
 
 				if ( mesh.material ) mesh.material.dispose();
 
-				var mtl = new PhongNodeMaterial();
+				const mtl = new PhongNodeMaterial();
 
-				var time = new TimerNode();
-				var speed = new FloatNode( Math.random() );
+				const time = new TimerNode();
+				const speed = new FloatNode( Math.random() );
 
-				var color = new ColorNode( Math.random() * 0xFFFFFF );
+				const color = new ColorNode( Math.random() * 0xFFFFFF );
 
-				var timeSpeed = new OperatorNode(
+				const timeSpeed = new OperatorNode(
 					time,
 					speed,
 					OperatorNode.MUL
 				);
 
-				var sinCycleInSecs = new OperatorNode(
+				const sinCycleInSecs = new OperatorNode(
 					timeSpeed,
 					new ConstNode( ConstNode.PI2 ),
 					OperatorNode.MUL
 				);
 
-				var cycle = new MathNode( sinCycleInSecs, MathNode.SIN );
+				const cycle = new MathNode( sinCycleInSecs, MathNode.SIN );
 
-				var cycleColor = new OperatorNode(
+				const cycleColor = new OperatorNode(
 					cycle,
 					color,
 					OperatorNode.MUL
 				);
 
-				var cos = new MathNode( cycleColor, MathNode.SIN );
+				const cos = new MathNode( cycleColor, MathNode.SIN );
 
 				mtl.color = new ColorNode( 0 );
 				mtl.emissive = cos;
 
 
-				var transformer = new ExpressionNode( "position + 0.0 * " + Math.random(), "vec3", [ ] );
+				const transformer = new ExpressionNode( "position + 0.0 * " + Math.random(), "vec3", [ ] );
 				mtl.transform = transformer;
 
 				// build shader ( ignore auto build )
@@ -196,7 +197,7 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth, height = window.innerHeight;
+				const width = window.innerWidth, height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -207,13 +208,13 @@
 
 			function animate() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				frame.update( delta );
 
-				for ( var i = 0; i < meshes.length; i ++ ) {
+				for ( let i = 0; i < meshes.length; i ++ ) {
 
-					var mesh = meshes[ i ];
+					const mesh = meshes[ i ];
 
 					frame.updateNode( mesh.material );
 

examples/webgl_materials_cubemap.html

@@ -23,11 +23,11 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var pointLight;
+			let pointLight;
 
 			init();
 			animate();
@@ -41,50 +41,50 @@
 				camera.position.z = 2000;
 
 				//cubemap
-				var path = 'textures/cube/SwedishRoyalCastle/';
-				var format = '.jpg';
-				var urls = [
+				const path = 'textures/cube/SwedishRoyalCastle/';
+				const format = '.jpg';
+				const urls = [
 					path + 'px' + format, path + 'nx' + format,
 					path + 'py' + format, path + 'ny' + format,
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
-				var refractionCube = new THREE.CubeTextureLoader().load( urls );
+				const reflectionCube = new THREE.CubeTextureLoader().load( urls );
+				const refractionCube = new THREE.CubeTextureLoader().load( urls );
 				refractionCube.mapping = THREE.CubeRefractionMapping;
 
 				scene = new THREE.Scene();
 				scene.background = reflectionCube;
 
 				//lights
-				var ambient = new THREE.AmbientLight( 0xffffff );
+				const ambient = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambient );
 
 				pointLight = new THREE.PointLight( 0xffffff, 2 );
 				scene.add( pointLight );
 
 				//materials
-				var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
-				var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, envMap: refractionCube, refractionRatio: 0.95 } );
-				var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } );
+				const cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
+				const cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, envMap: refractionCube, refractionRatio: 0.95 } );
+				const cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } );
 
 				//models
-				var objLoader = new OBJLoader();
+				const objLoader = new OBJLoader();
 
 				objLoader.setPath( 'models/obj/walt/' );
 				objLoader.load( 'WaltHead.obj', function ( object ) {
 
-					var head = object.children[ 0 ];
+					const head = object.children[ 0 ];
 
 					head.scale.multiplyScalar( 15 );
 					head.position.y = - 500;
 					head.material = cubeMaterial1;
 
-					var head2 = head.clone();
+					const head2 = head.clone();
 					head2.position.x = - 900;
 					head2.material = cubeMaterial2;
 
-					var head3 = head.clone();
+					const head3 = head.clone();
 					head3.position.x = 900;
 					head3.material = cubeMaterial3;
 
@@ -99,7 +99,7 @@
 				container.appendChild( renderer.domElement );
 
 				//controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableZoom = false;
 				controls.enablePan = false;
 				controls.minPolarAngle = Math.PI / 4;

examples/webgl_materials_cubemap_balls_reflection.html

@@ -16,17 +16,17 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var container;
+			let container;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var spheres = [];
+			const spheres = [];
 
-			var mouseX = 0;
-			var mouseY = 0;
+			let mouseX = 0;
+			let mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
@@ -46,12 +46,12 @@
 					.setPath( 'textures/cube/pisa/' )
 					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
 
-				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background } );
+				const geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
+				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background } );
 
-				for ( var i = 0; i < 500; i ++ ) {
+				for ( let i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
@@ -109,11 +109,11 @@
 
 			function render() {
 
-				var timer = 0.0001 * Date.now();
+				const timer = 0.0001 * Date.now();
 
-				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
+				for ( let i = 0, il = spheres.length; i < il; i ++ ) {
 
-					var sphere = spheres[ i ];
+					const sphere = spheres[ i ];
 
 					sphere.position.x = 5000 * Math.cos( timer + i );
 					sphere.position.y = 5000 * Math.sin( timer + i * 1.1 );

examples/webgl_materials_cubemap_balls_refraction.html

@@ -16,16 +16,16 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var container;
+			let container;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var spheres = [];
+			const spheres = [];
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
@@ -45,14 +45,14 @@
 					.setPath( 'textures/cube/Park3Med/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
-				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
+				const geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background, refractionRatio: 0.95 } );
+				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background, refractionRatio: 0.95 } );
 				material.envMap.mapping = THREE.CubeRefractionMapping;
 
-				for ( var i = 0; i < 500; i ++ ) {
+				for ( let i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
@@ -110,11 +110,11 @@
 
 			function render() {
 
-				var timer = 0.0001 * Date.now();
+				const timer = 0.0001 * Date.now();
 
-				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
+				for ( let i = 0, il = spheres.length; i < il; i ++ ) {
 
-					var sphere = spheres[ i ];
+					const sphere = spheres[ i ];
 
 					sphere.position.x = 5000 * Math.cos( timer + i );
 					sphere.position.y = 5000 * Math.sin( timer + i * 1.1 );

examples/webgl_materials_cubemap_dynamic.html

@@ -19,17 +19,17 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
-			var cube, sphere, torus, material;
+			let camera, scene, renderer;
+			let cube, sphere, torus, material;
 
-			var count = 0, cubeCamera1, cubeCamera2, cubeRenderTarget1, cubeRenderTarget2;
+			let count = 0, cubeCamera1, cubeCamera2, cubeRenderTarget1, cubeRenderTarget2;
 
-			var onPointerDownPointerX, onPointerDownPointerY, onPointerDownLon, onPointerDownLat;
+			let onPointerDownPointerX, onPointerDownPointerY, onPointerDownLon, onPointerDownLat;
 
-			var lon = 0, lat = 0;
-			var phi = 0, theta = 0;
+			let lon = 0, lat = 0;
+			let phi = 0, theta = 0;
 
-			var textureLoader = new THREE.TextureLoader();
+			const textureLoader = new THREE.TextureLoader();
 
 			textureLoader.load( 'textures/2294472375_24a3b8ef46_o.jpg', function ( texture ) {
 
@@ -140,7 +140,7 @@
 
 			function onDocumentMouseWheel( event ) {
 
-				var fov = camera.fov + event.deltaY * 0.05;
+				const fov = camera.fov + event.deltaY * 0.05;
 
 				camera.fov = THREE.MathUtils.clamp( fov, 10, 75 );
 
@@ -157,7 +157,7 @@
 
 			function render() {
 
-				var time = Date.now();
+				const time = Date.now();
 
 				lon += .15;
 

examples/webgl_materials_cubemap_mipmaps.html

@@ -21,9 +21,9 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container;
+			let container;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -31,14 +31,14 @@
 			//load customized cube texture
 			async function loadCubeTextureWithMipmaps() {
 
-				var path = 'textures/cube/angus/';
-				var format = '.jpg';
-				var mipmaps = [];
-				var maxLevel = 8;
+				const path = 'textures/cube/angus/';
+				const format = '.jpg';
+				const mipmaps = [];
+				const maxLevel = 8;
 
 				async function loadCubeTexture( urls ) {
 
-					return new Promise( function ( resolve, reject) {
+					return new Promise( function ( resolve ) {
 
 						new THREE.CubeTextureLoader().load( urls, function ( cubeTexture ) {
 
@@ -52,19 +52,19 @@
 				}
 
 				// load mipmaps
-				var pendings = [];
+				const pendings = [];
 
-				for ( var level = 0; level <= maxLevel; ++ level ) {
+				for ( let level = 0; level <= maxLevel; ++ level ) {
 
-					var urls = [];
+					const urls = [];
 
-					for ( var face = 0; face < 6; ++ face ) {
+					for ( let face = 0; face < 6; ++ face ) {
 
 						urls.push( path + 'cube_m0' + level + '_c0' + face + format );
 
 					}
 
-					let mipmapLevel = level;
+					const mipmapLevel = level;
 
 					pendings.push( loadCubeTexture( urls ).then( function ( cubeTexture ) {
 
@@ -76,7 +76,7 @@
 
 				await Promise.all( pendings );
 
-				var customizedCubeTexture = mipmaps.shift();
+				const customizedCubeTexture = mipmaps.shift();
 				customizedCubeTexture.mipmaps = mipmaps;
 				customizedCubeTexture.minFilter = THREE.LinearMipMapLinearFilter;
 				customizedCubeTexture.magFilter = THREE.LinearFilter;
@@ -100,13 +100,13 @@
 				loadCubeTextureWithMipmaps().then( function ( cubeTexture ) {
 
 					//model
-					var sphere = new THREE.SphereBufferGeometry( 100, 128, 128 );
+					const sphere = new THREE.SphereBufferGeometry( 100, 128, 128 );
 
 					//manual mipmaps
-					var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: cubeTexture } );
+					let material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: cubeTexture } );
 					material.name = 'manual mipmaps';
 
-					var mesh = new THREE.Mesh( sphere, material );
+					let mesh = new THREE.Mesh( sphere, material );
 					mesh.position.set( 100, 0, 0 );
 					scene.add( mesh );
 
@@ -115,7 +115,7 @@
 					material = material.clone();
 					material.name = 'auto mipmaps';
 
-					var autoCubeTexture = cubeTexture.clone();
+					const autoCubeTexture = cubeTexture.clone();
 					autoCubeTexture.mipmaps = [];
 					autoCubeTexture.generateMipmaps = true;
 					autoCubeTexture.needsUpdate = true;
@@ -135,7 +135,7 @@
 				container.appendChild( renderer.domElement );
 
 				//controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minPolarAngle = Math.PI / 4;
 				controls.maxPolarAngle = Math.PI / 1.5;
 

examples/webgl_materials_cubemap_refraction.html

@@ -22,16 +22,16 @@
 
 			import { PLYLoader } from './jsm/loaders/PLYLoader.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var pointLight;
+			let pointLight;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -46,15 +46,15 @@
 
 				//
 
-				var r = "textures/cube/Park3Med/";
+				const r = "textures/cube/Park3Med/";
 
-				var urls = [
+				const urls = [
 					r + "px.jpg", r + "nx.jpg",
 					r + "py.jpg", r + "ny.jpg",
 					r + "pz.jpg", r + "nz.jpg"
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				const textureCube = new THREE.CubeTextureLoader().load( urls );
 				textureCube.mapping = THREE.CubeRefractionMapping;
 
 				scene = new THREE.Scene();
@@ -62,7 +62,7 @@
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0xffffff );
+				const ambient = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambient );
 
 				pointLight = new THREE.PointLight( 0xffffff, 2 );
@@ -70,17 +70,17 @@
 
 				// light representation
 
-				var sphere = new THREE.SphereBufferGeometry( 100, 16, 8 );
+				const sphere = new THREE.SphereBufferGeometry( 100, 16, 8 );
 
-				var mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+				const mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 				mesh.scale.set( 0.05, 0.05, 0.05 );
 				pointLight.add( mesh );
 
 				// material samples
 
-				var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0xccddff, envMap: textureCube, refractionRatio: 0.98, reflectivity: 0.9 } );
-				var cubeMaterial2 = new THREE.MeshPhongMaterial( { color: 0xccfffd, envMap: textureCube, refractionRatio: 0.985 } );
-				var cubeMaterial1 = new THREE.MeshPhongMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.98 } );
+				const cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0xccddff, envMap: textureCube, refractionRatio: 0.98, reflectivity: 0.9 } );
+				const cubeMaterial2 = new THREE.MeshPhongMaterial( { color: 0xccfffd, envMap: textureCube, refractionRatio: 0.985 } );
+				const cubeMaterial1 = new THREE.MeshPhongMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.98 } );
 
 				//
 
@@ -92,7 +92,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var loader = new PLYLoader();
+				const loader = new PLYLoader();
 				loader.load( 'models/ply/binary/Lucy100k.ply', function ( geometry ) {
 
 					createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 );
@@ -123,18 +123,18 @@
 
 				geometry.computeVertexNormals();
 
-				var s = 1.5;
+				const s = 1.5;
 
-				var mesh = new THREE.Mesh( geometry, m1 );
+				let mesh = new THREE.Mesh( geometry, m1 );
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry, m2 );
+				mesh = new THREE.Mesh( geometry, m2 );
 				mesh.position.x = - 1500;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry, m3 );
+				mesh = new THREE.Mesh( geometry, m3 );
 				mesh.position.x = 1500;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
 				scene.add( mesh );
@@ -161,7 +161,7 @@
 
 			function render() {
 
-				var timer = - 0.0002 * Date.now();
+				const timer = - 0.0002 * Date.now();
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;

examples/webgl_materials_curvature.html

@@ -50,9 +50,9 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var ninjaMeshRaw, curvatureAttribute, bufferGeo;
+			let ninjaMeshRaw, curvatureAttribute, bufferGeo;
 
 			init();
 			animate();
@@ -60,8 +60,8 @@
 			//returns average of elements in a dictionary
 			function average( dict ) {
 
-				var sum = 0;
-				var length = 0;
+				let sum = 0;
+				let length = 0;
 
 				Object.keys( dict ).forEach( function ( key ) {
 
@@ -84,7 +84,7 @@
 			//filter the curvature array to only show concave values
 			function filterConcave( curvature ) {
 
-				for ( var i = 0; i < curvature.length; i ++ ) {
+				for ( let i = 0; i < curvature.length; i ++ ) {
 
 					curvature[ i ] = Math.abs( clamp( curvature[ i ], - 1, 0 ) );
 
@@ -95,7 +95,7 @@
 			//filter the curvature array to only show convex values
 			function filterConvex( curvature ) {
 
-				for ( var i = 0; i < curvature.length; i ++ ) {
+				for ( let i = 0; i < curvature.length; i ++ ) {
 
 					curvature[ i ] = clamp( curvature[ i ], 0, 1 );
 
@@ -106,7 +106,7 @@
 			//filter the curvature array to show both the concave and convex values
 			function filterBoth( curvature ) {
 
-				for ( var i = 0; i < curvature.length; i ++ ) {
+				for ( let i = 0; i < curvature.length; i ++ ) {
 
 					curvature[ i ] = Math.abs( curvature[ i ] );
 
@@ -130,11 +130,11 @@
 				renderer.autoClear = false;
 				document.body.appendChild( renderer.domElement );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 20;
 				controls.maxDistance = 100;
 
-				var loader = new OBJLoader();
+				const loader = new OBJLoader();
 				//load the obj
 				loader.load( 'models/obj/ninja/ninjaHead_Low.obj', function ( object ) {
 
@@ -144,48 +144,50 @@
 
 							bufferGeo = child.geometry;
 							bufferGeo.center();
-							var dict = {};
+							const dict = {};
 
-							for ( var i = 0; i < bufferGeo.attributes.position.count; i += 3 ) {
+							for ( let i = 0; i < bufferGeo.attributes.position.count; i += 3 ) {
 
 								//create a dictionary of every position, and its neighboring positions
-								var array = bufferGeo.attributes.position.array;
-								var normArray = bufferGeo.attributes.normal.array;
+								const array = bufferGeo.attributes.position.array;
+								const normArray = bufferGeo.attributes.normal.array;
 
-								var posA = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
-								var posB = new THREE.Vector3( array[ 3 * ( i + 1 ) ], array[ 3 * ( i + 1 ) + 1 ], array[ 3 * ( i + 1 ) + 2 ] );
-								var posC = new THREE.Vector3( array[ 3 * ( i + 2 ) ], array[ 3 * ( i + 2 ) + 1 ], array[ 3 * ( i + 2 ) + 2 ] );
+								const posA = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
+								const posB = new THREE.Vector3( array[ 3 * ( i + 1 ) ], array[ 3 * ( i + 1 ) + 1 ], array[ 3 * ( i + 1 ) + 2 ] );
+								const posC = new THREE.Vector3( array[ 3 * ( i + 2 ) ], array[ 3 * ( i + 2 ) + 1 ], array[ 3 * ( i + 2 ) + 2 ] );
 
-								var normA = new THREE.Vector3( normArray[ 3 * i ], normArray[ 3 * i + 1 ], normArray[ 3 * i + 2 ] ).normalize();
-								var normB = new THREE.Vector3( normArray[ 3 * ( i + 1 ) ], normArray[ 3 * ( i + 1 ) + 1 ], normArray[ 3 * ( i + 1 ) + 2 ] ).normalize();
-								var normC = new THREE.Vector3( normArray[ 3 * ( i + 2 ) ], normArray[ 3 * ( i + 2 ) + 1 ], normArray[ 3 * ( i + 2 ) + 2 ] ).normalize();
+								const normA = new THREE.Vector3( normArray[ 3 * i ], normArray[ 3 * i + 1 ], normArray[ 3 * i + 2 ] ).normalize();
+								const normB = new THREE.Vector3( normArray[ 3 * ( i + 1 ) ], normArray[ 3 * ( i + 1 ) + 1 ], normArray[ 3 * ( i + 1 ) + 2 ] ).normalize();
+								const normC = new THREE.Vector3( normArray[ 3 * ( i + 2 ) ], normArray[ 3 * ( i + 2 ) + 1 ], normArray[ 3 * ( i + 2 ) + 2 ] ).normalize();
 
-								var strA = posA.toArray().toString();
-								var strB = posB.toArray().toString();
-								var strC = posC.toArray().toString();
+								const strA = posA.toArray().toString();
+								const strB = posB.toArray().toString();
+								const strC = posC.toArray().toString();
 
-								var posB_A = new THREE.Vector3().subVectors( posB, posA );
-								var posB_C = new THREE.Vector3().subVectors( posB, posC );
-								var posC_A = new THREE.Vector3().subVectors( posC, posA );
+								const posB_A = new THREE.Vector3().subVectors( posB, posA );
+								const posB_C = new THREE.Vector3().subVectors( posB, posC );
+								const posC_A = new THREE.Vector3().subVectors( posC, posA );
 
-								var b2a = normB.dot( posB_A.normalize() );
-								var b2c = normB.dot( posB_C.normalize() );
-								var c2a = normC.dot( posC_A.normalize() );
+								const b2a = normB.dot( posB_A.normalize() );
+								const b2c = normB.dot( posB_C.normalize() );
+								const c2a = normC.dot( posC_A.normalize() );
 
-								var a2b = - normA.dot( posB_A.normalize() );
-								var c2b = - normC.dot( posB_C.normalize() );
-								var a2c = - normA.dot( posC_A.normalize() );
+								const a2b = - normA.dot( posB_A.normalize() );
+								const c2b = - normC.dot( posB_C.normalize() );
+								const a2c = - normA.dot( posC_A.normalize() );
 
 								if ( dict[ strA ] === undefined ) {
 
 									dict[ strA ] = {};
 
 								}
+
 								if ( dict[ strB ] === undefined ) {
 
 									dict[ strB ] = {};
 
 								}
+
 								if ( dict[ strC ] === undefined ) {
 
 									dict[ strC ] = {};
@@ -201,8 +203,8 @@
 
 							}
 
-							var curvatureDict = {};
-							var min = 10, max = 0;
+							let curvatureDict = {};
+							let min = 10, max = 0;
 
 							Object.keys( dict ).forEach( function ( key ) {
 
@@ -211,12 +213,12 @@
 							} );
 
 							//smoothing
-							var smoothCurvatureDict = Object.create( curvatureDict );
+							const smoothCurvatureDict = Object.create( curvatureDict );
 
 							Object.keys( dict ).forEach( function ( key ) {
 
-								var count = 0;
-								var sum = 0;
+								let count = 0;
+								let sum = 0;
 								Object.keys( dict[ key ] ).forEach( function ( key2 ) {
 
 									sum += smoothCurvatureDict[ key2 ];
@@ -232,17 +234,17 @@
 							// fit values to 0 and 1
 							Object.keys( curvatureDict ).forEach( function ( key ) {
 
-								var val = Math.abs( curvatureDict[ key ] );
+								const val = Math.abs( curvatureDict[ key ] );
 								if ( val < min ) min = val;
 								if ( val > max ) max = val;
 
 							} );
 
-							var range = ( max - min );
+							const range = ( max - min );
 
 							Object.keys( curvatureDict ).forEach( function ( key ) {
 
-								var val = Math.abs( curvatureDict[ key ] );
+								const val = Math.abs( curvatureDict[ key ] );
 								if ( curvatureDict[ key ] < 0 ) {
 
 									curvatureDict[ key ] = ( min - val ) / range;
@@ -257,11 +259,11 @@
 
 							curvatureAttribute = new Float32Array( bufferGeo.attributes.position.count );
 
-							for ( var i = 0; i < bufferGeo.attributes.position.count; i ++ ) {
+							for ( let i = 0; i < bufferGeo.attributes.position.count; i ++ ) {
 
-								array = bufferGeo.attributes.position.array;
-								var pos = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
-								var str = pos.toArray().toString();
+								const array = bufferGeo.attributes.position.array;
+								const pos = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
+								const str = pos.toArray().toString();
 								curvatureAttribute[ i ] = curvatureDict[ str ];
 
 							}
@@ -269,10 +271,10 @@
 							bufferGeo.setAttribute( 'curvature', new THREE.BufferAttribute( curvatureAttribute, 1 ) );
 
 							//starting filter is to show both concave and convex
-							var curvatureFiltered = new Float32Array( curvatureAttribute );
+							const curvatureFiltered = new Float32Array( curvatureAttribute );
 							filterBoth( curvatureFiltered );
 
-							var materialRaw = new THREE.ShaderMaterial( {
+							const materialRaw = new THREE.ShaderMaterial( {
 
 								vertexShader: document.getElementById( 'vertexShaderRaw' ).textContent,
 								fragmentShader: document.getElementById( 'fragmentShaderRaw' ).textContent
@@ -291,11 +293,11 @@
 
 
 				//init GUI
-				var params = {
+				const params = {
 
 					filterConvex: function () {
 
-						var curvatureFiltered = new Float32Array( curvatureAttribute );
+						const curvatureFiltered = new Float32Array( curvatureAttribute );
 						filterConvex( curvatureFiltered );
 						bufferGeo.attributes.curvature.array = curvatureFiltered;
 						bufferGeo.attributes.curvature.needsUpdate = true;
@@ -304,7 +306,7 @@
 					},
 					filterConcave: function () {
 
-						var curvatureFiltered = new Float32Array( curvatureAttribute );
+						const curvatureFiltered = new Float32Array( curvatureAttribute );
 						filterConcave( curvatureFiltered );
 						bufferGeo.attributes.curvature.array = curvatureFiltered;
 						bufferGeo.attributes.curvature.needsUpdate = true;
@@ -313,7 +315,7 @@
 					},
 					filterBoth: function () {
 
-						var curvatureFiltered = new Float32Array( curvatureAttribute );
+						const curvatureFiltered = new Float32Array( curvatureAttribute );
 						filterBoth( curvatureFiltered );
 						bufferGeo.attributes.curvature.array = curvatureFiltered;
 						bufferGeo.attributes.curvature.needsUpdate = true;
@@ -321,9 +323,9 @@
 					}
 				};
 
-				var gui = new GUI();
+				const gui = new GUI();
 
-				var topologyFolder = gui.addFolder( 'Topology' );
+				const topologyFolder = gui.addFolder( 'Topology' );
 				topologyFolder.add( params, 'filterConvex' );
 				topologyFolder.add( params, 'filterConcave' );
 				topologyFolder.add( params, 'filterBoth' );

examples/webgl_materials_displacementmap.html

@@ -23,10 +23,10 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
-			var stats;
+			let stats;
 
-			var camera, scene, renderer, controls;
-			var settings = {
+			let camera, scene, renderer, controls;
+			const settings = {
 				metalness: 1.0,
 				roughness: 0.4,
 				ambientIntensity: 0.2,
@@ -36,13 +36,13 @@
 				normalScale: 1.0
 			};
 
-			var mesh, material;
+			let mesh, material;
 
-			var pointLight, ambientLight;
+			let pointLight, ambientLight;
 
-			var height = 500; // of camera frustum
+			const height = 500; // of camera frustum
 
-			var r = 0.0;
+			let r = 0.0;
 
 			init();
 			animate();
@@ -51,8 +51,8 @@
 			// Init gui
 			function initGui() {
 
-				var gui = new GUI();
-				//var gui = gui.addFolder( "Material" );
+				const gui = new GUI();
+				//let gui = gui.addFolder( "Material" );
 				gui.add( settings, "metalness" ).min( 0 ).max( 1 ).onChange( function ( value ) {
 
 					material.metalness = value;
@@ -99,7 +99,7 @@
 
 			function init() {
 
-				var container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				renderer = new THREE.WebGLRenderer();
@@ -112,7 +112,7 @@
 
 				scene = new THREE.Scene();
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 				camera = new THREE.OrthographicCamera( - height * aspect, height * aspect, height, - height, 1, 10000 );
 				camera.position.z = 1500;
 				scene.add( camera );
@@ -130,33 +130,33 @@
 				pointLight.position.z = 2500;
 				scene.add( pointLight );
 
-				var pointLight2 = new THREE.PointLight( 0xff6666, 1 );
+				const pointLight2 = new THREE.PointLight( 0xff6666, 1 );
 				camera.add( pointLight2 );
 
-				var pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
+				const pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
 				pointLight3.position.x = - 1000;
 				pointLight3.position.z = 1000;
 				scene.add( pointLight3 );
 
 				// env map
 
-				var path = "textures/cube/SwedishRoyalCastle/";
-				var format = '.jpg';
-				var urls = [
+				const path = "textures/cube/SwedishRoyalCastle/";
+				const format = '.jpg';
+				const urls = [
 					path + 'px' + format, path + 'nx' + format,
 					path + 'py' + format, path + 'ny' + format,
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
+				const reflectionCube = new THREE.CubeTextureLoader().load( urls );
 				reflectionCube.encoding = THREE.sRGBEncoding;
 
 				// textures
 
-				var textureLoader = new THREE.TextureLoader();
-				var normalMap = textureLoader.load( "models/obj/ninja/normal.png" );
-				var aoMap = textureLoader.load( "models/obj/ninja/ao.jpg" );
-				var displacementMap = textureLoader.load( "models/obj/ninja/displacement.jpg" );
+				const textureLoader = new THREE.TextureLoader();
+				const normalMap = textureLoader.load( "models/obj/ninja/normal.png" );
+				const aoMap = textureLoader.load( "models/obj/ninja/ao.jpg" );
+				const displacementMap = textureLoader.load( "models/obj/ninja/displacement.jpg" );
 
 				// material
 
@@ -185,10 +185,10 @@
 
 				//
 
-				var loader = new OBJLoader();
+				const loader = new OBJLoader();
 				loader.load( "models/obj/ninja/ninjaHead_Low.obj", function ( group ) {
 
-					var geometry = group.children[ 0 ].geometry;
+					const geometry = group.children[ 0 ].geometry;
 					geometry.attributes.uv2 = geometry.attributes.uv;
 					geometry.center();
 
@@ -211,7 +211,7 @@
 
 			function onWindowResize() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
 				camera.left = - height * aspect;
 				camera.right = height * aspect;

examples/webgl_materials_envmaps.html

@@ -21,9 +21,9 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var controls, camera, scene, renderer;
-			var textureEquirec, textureCube;
-			var sphereMesh, sphereMaterial;
+			let controls, camera, scene, renderer;
+			let textureEquirec, textureCube;
+			let sphereMesh, sphereMaterial;
 
 			init();
 			animate();
@@ -41,18 +41,18 @@
 
 				// Lights
 
-				var ambient = new THREE.AmbientLight( 0xffffff );
+				const ambient = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambient );
 
 				// Textures
 
-				var loader = new THREE.CubeTextureLoader();
+				const loader = new THREE.CubeTextureLoader();
 				loader.setPath( 'textures/cube/Bridge2/' );
 
 				textureCube = loader.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
 				textureCube.encoding = THREE.sRGBEncoding;
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
 				textureEquirec = textureLoader.load( 'textures/2294472375_24a3b8ef46_o.jpg' );
 				textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
@@ -62,7 +62,7 @@
 
 				//
 
-				var geometry = new THREE.IcosahedronBufferGeometry( 400, 15 );
+				const geometry = new THREE.IcosahedronBufferGeometry( 400, 15 );
 				sphereMaterial = new THREE.MeshLambertMaterial( { envMap: textureCube } );
 				sphereMesh = new THREE.Mesh( geometry, sphereMaterial );
 				scene.add( sphereMesh );
@@ -83,7 +83,7 @@
 
 				//
 
-				var params = {
+				const params = {
 					Cube: function () {
 
 						scene.background = textureCube;
@@ -103,7 +103,7 @@
 					Refraction: false
 				};
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( params, 'Cube' );
 				gui.add( params, 'Equirectangular' );
 				gui.add( params, 'Refraction' ).onChange( function ( value ) {

examples/webgl_materials_envmaps_exr.html

@@ -21,7 +21,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { EXRLoader } from './jsm/loaders/EXRLoader.js';
 
-			var params = {
+			const params = {
 				envMap: 'EXR',
 				roughness: 0.0,
 				metalness: 0.0,
@@ -29,11 +29,11 @@
 				debug: false,
 			};
 
-			var container, stats;
-			var camera, scene, renderer, controls;
-			var torusMesh, planeMesh;
-			var pngCubeRenderTarget, exrCubeRenderTarget;
-			var pngBackground, exrBackground;
+			let container, stats;
+			let camera, scene, renderer, controls;
+			let torusMesh, planeMesh;
+			let pngCubeRenderTarget, exrCubeRenderTarget;
+			let pngBackground, exrBackground;
 
 			init();
 			animate();
@@ -52,8 +52,8 @@
 
 				//
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
-				var material = new THREE.MeshStandardMaterial( {
+				let geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
+				let material = new THREE.MeshStandardMaterial( {
 					metalness: params.roughness,
 					roughness: params.metalness,
 					envMapIntensity: 1.0
@@ -62,8 +62,8 @@
 				torusMesh = new THREE.Mesh( geometry, material );
 				scene.add( torusMesh );
 
-				var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
-				var material = new THREE.MeshBasicMaterial();
+				geometry = new THREE.PlaneBufferGeometry( 200, 200 );
+				material = new THREE.MeshBasicMaterial();
 
 				planeMesh = new THREE.Mesh( geometry, material );
 				planeMesh.position.y = - 50;
@@ -99,7 +99,7 @@
 
 				} );
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -119,7 +119,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'envMap', [ 'EXR', 'PNG' ] );
 				gui.add( params, 'roughness', 0, 1, 0.01 );
@@ -132,8 +132,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -157,8 +157,8 @@
 				torusMesh.material.roughness = params.roughness;
 				torusMesh.material.metalness = params.metalness;
 
-				var newEnvMap = torusMesh.material.envMap;
-				var background = scene.background;
+				let newEnvMap = torusMesh.material.envMap;
+				let background = scene.background;
 
 				switch ( params.envMap ) {
 

examples/webgl_materials_envmaps_hdr.html

@@ -24,7 +24,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
 
-			var params = {
+			const params = {
 				envMap: 'HDR',
 				roughness: 0.0,
 				metalness: 0.0,
@@ -32,44 +32,44 @@
 				debug: false
 			};
 
-			var container, stats;
-			var camera, scene, renderer, controls;
-			var torusMesh, planeMesh;
-			var generatedCubeRenderTarget, ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
-			var ldrCubeMap, hdrCubeMap, rgbmCubeMap;
+			let container, stats;
+			let camera, scene, renderer, controls;
+			let torusMesh, planeMesh;
+			let generatedCubeRenderTarget, ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
+			let ldrCubeMap, hdrCubeMap, rgbmCubeMap;
 
 			init();
 			animate();
 
 			function getEnvScene() {
 
-				var envScene = new THREE.Scene();
+				const envScene = new THREE.Scene();
 
-				var geometry = new THREE.BoxBufferGeometry();
+				const geometry = new THREE.BoxBufferGeometry();
 				geometry.deleteAttribute( 'uv' );
-				var roomMaterial = new THREE.MeshStandardMaterial( { metalness: 0, side: THREE.BackSide } );
-				var room = new THREE.Mesh( geometry, roomMaterial );
+				const roomMaterial = new THREE.MeshStandardMaterial( { metalness: 0, side: THREE.BackSide } );
+				const room = new THREE.Mesh( geometry, roomMaterial );
 				room.scale.setScalar( 10 );
 				envScene.add( room );
 
-				var mainLight = new THREE.PointLight( 0xffffff, 50, 0, 2 );
+				const mainLight = new THREE.PointLight( 0xffffff, 50, 0, 2 );
 				envScene.add( mainLight );
 
-				var lightMaterial = new THREE.MeshLambertMaterial( { color: 0x000000, emissive: 0xffffff, emissiveIntensity: 10 } );
+				const lightMaterial = new THREE.MeshLambertMaterial( { color: 0x000000, emissive: 0xffffff, emissiveIntensity: 10 } );
 
-				var light1 = new THREE.Mesh( geometry, lightMaterial );
+				const light1 = new THREE.Mesh( geometry, lightMaterial );
 				light1.material.color.setHex( 0xff0000 );
 				light1.position.set( - 5, 2, 0 );
 				light1.scale.set( 0.1, 1, 1 );
 				envScene.add( light1 );
 
-				var light2 = new THREE.Mesh( geometry, lightMaterial.clone() );
+				const light2 = new THREE.Mesh( geometry, lightMaterial.clone() );
 				light2.material.color.setHex( 0x00ff00 );
 				light2.position.set( 0, 5, 0 );
 				light2.scale.set( 1, 0.1, 1 );
 				envScene.add( light2 );
 
-				var light3 = new THREE.Mesh( geometry, lightMaterial.clone() );
+				const light3 = new THREE.Mesh( geometry, lightMaterial.clone() );
 				light3.material.color.setHex( 0x0000ff );
 				light3.position.set( 2, 1, 5 );
 				light3.scale.set( 1.5, 2, 0.1 );
@@ -96,9 +96,9 @@
 
 				//
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
-				//var geometry = new THREE.SphereBufferGeometry( 26, 64, 32 );
-				var material = new THREE.MeshStandardMaterial( {
+				let geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
+				// let geometry = new THREE.SphereBufferGeometry( 26, 64, 32 );
+				let material = new THREE.MeshStandardMaterial( {
 					color: 0xffffff,
 					metalness: params.metalness,
 					roughness: params.roughness
@@ -108,8 +108,8 @@
 				scene.add( torusMesh );
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
-				var material = new THREE.MeshBasicMaterial();
+				geometry = new THREE.PlaneBufferGeometry( 200, 200 );
+				material = new THREE.MeshBasicMaterial();
 
 				planeMesh = new THREE.Mesh( geometry, material );
 				planeMesh.position.y = - 50;
@@ -122,7 +122,7 @@
 
 				};
 
-				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
+				const hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
 				hdrCubeMap = new HDRCubeTextureLoader()
 					.setPath( './textures/cube/pisaHDR/' )
 					.setDataType( THREE.UnsignedByteType )
@@ -135,7 +135,7 @@
 
 					} );
 
-				var ldrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
+				const ldrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
 				ldrCubeMap = new THREE.CubeTextureLoader()
 					.setPath( './textures/cube/pisa/' )
 					.load( ldrUrls, function () {
@@ -147,7 +147,7 @@
 					} );
 
 
-				var rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
+				const rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
 				rgbmCubeMap = new THREE.CubeTextureLoader()
 					.setPath( './textures/cube/pisaRGBM16/' )
 					.load( rgbmUrls, function () {
@@ -162,10 +162,10 @@
 
 					} );
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileCubemapShader();
 
-				var envScene = getEnvScene();
+				const envScene = getEnvScene();
 				generatedCubeRenderTarget = pmremGenerator.fromScene( envScene, 0.04 );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -184,7 +184,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'envMap', [ 'Generated', 'LDR', 'HDR', 'RGBM16' ] );
 				gui.add( params, 'roughness', 0, 1, 0.01 );
@@ -197,8 +197,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -222,7 +222,7 @@
 				torusMesh.material.roughness = params.roughness;
 				torusMesh.material.metalness = params.metalness;
 
-				var renderTarget, cubeMap;
+				let renderTarget, cubeMap;
 
 				switch ( params.envMap ) {
 
@@ -245,7 +245,7 @@
 
 				}
 
-				var newEnvMap = renderTarget ? renderTarget.texture : null;
+				const newEnvMap = renderTarget ? renderTarget.texture : null;
 
 				if ( newEnvMap && newEnvMap !== torusMesh.material.envMap ) {
 

examples/webgl_materials_envmaps_hdr_nodes.html

@@ -26,7 +26,7 @@
 
 			import { MeshStandardNodeMaterial } from './jsm/nodes/Nodes.js';
 
-			var params = {
+			const params = {
 				envMap: 'HDR',
 				roughness: 0.0,
 				metalness: 0.0,
@@ -36,45 +36,45 @@
 				debug: false
 			};
 
-			var container, stats;
-			var camera, scene, renderer, controls;
-			var torusMesh, torusMeshNode, planeMesh;
-			var generatedCubeRenderTarget, ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
-			var ldrCubeMap, hdrCubeMap, rgbmCubeMap;
+			let container, stats;
+			let camera, scene, renderer, controls;
+			let torusMesh, torusMeshNode, planeMesh;
+			let generatedCubeRenderTarget, ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
+			let ldrCubeMap, hdrCubeMap, rgbmCubeMap;
 
 			init();
 			animate();
 
 			function getEnvScene() {
 
-				var envScene = new THREE.Scene();
+				const envScene = new THREE.Scene();
 
-				var geometry = new THREE.BoxBufferGeometry();
+				const geometry = new THREE.BoxBufferGeometry();
 				geometry.deleteAttribute( 'uv' );
-				var roomMaterial = new THREE.MeshStandardMaterial( { metalness: 0, side: THREE.BackSide } );
-				var room = new THREE.Mesh( geometry, roomMaterial );
+				const roomMaterial = new THREE.MeshStandardMaterial( { metalness: 0, side: THREE.BackSide } );
+				const room = new THREE.Mesh( geometry, roomMaterial );
 				room.scale.setScalar( 10 );
 				envScene.add( room );
 
-				var mainLight = new THREE.PointLight( 0xffffff, 50, 0, 2 );
+				const mainLight = new THREE.PointLight( 0xffffff, 50, 0, 2 );
 				envScene.add( mainLight );
 
-				var lightMaterial = new THREE.MeshLambertMaterial( { color: 0x000000, emissive: 0xffffff, emissiveIntensity: 10 } );
+				const lightMaterial = new THREE.MeshLambertMaterial( { color: 0x000000, emissive: 0xffffff, emissiveIntensity: 10 } );
 
-				var light1 = new THREE.Mesh( geometry, lightMaterial );
+				const light1 = new THREE.Mesh( geometry, lightMaterial );
 				light1.position.set( - 5, 2, 0 );
 				light1.scale.set( 0.1, 1, 1 );
 				envScene.add( light1 );
 
-				var light2 = new THREE.Mesh( geometry, lightMaterial );
+				const light2 = new THREE.Mesh( geometry, lightMaterial );
 				light2.position.set( 0, 5, 0 );
 				light2.scale.set( 1, 0.1, 1 );
 				envScene.add( light2 );
 
-				var light2 = new THREE.Mesh( geometry, lightMaterial );
-				light2.position.set( 2, 1, 5 );
-				light2.scale.set( 1.5, 2, 0.1 );
-				envScene.add( light2 );
+				const light3 = new THREE.Mesh( geometry, lightMaterial );
+				light3.position.set( 2, 1, 5 );
+				light3.scale.set( 1.5, 2, 0.1 );
+				envScene.add( light3 );
 
 				return envScene;
 
@@ -96,10 +96,9 @@
 
 				//
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
-				var material;
+				let geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
 
-				material = new THREE.MeshStandardMaterial();
+				let material = new THREE.MeshStandardMaterial();
 				material.color = new THREE.Color( 0xffffff );
 				material.roughness = params.metalness;
 				material.metalness = params.roguhness;
@@ -115,8 +114,8 @@
 				torusMeshNode = new THREE.Mesh( geometry, material );
 				scene.add( torusMeshNode );
 
-				var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
-				var material = new THREE.MeshBasicMaterial();
+				geometry = new THREE.PlaneBufferGeometry( 200, 200 );
+				material = new THREE.MeshBasicMaterial();
 
 				planeMesh = new THREE.Mesh( geometry, material );
 				planeMesh.position.y = - 50;
@@ -129,7 +128,7 @@
 
 				};
 
-				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
+				const hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
 				hdrCubeMap = new HDRCubeTextureLoader()
 					.setPath( './textures/cube/pisaHDR/' )
 					.setDataType( THREE.UnsignedByteType )
@@ -142,7 +141,7 @@
 
 					} );
 
-				var ldrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
+				const ldrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
 				ldrCubeMap = new THREE.CubeTextureLoader()
 					.setPath( './textures/cube/pisa/' )
 					.load( ldrUrls, function () {
@@ -154,7 +153,7 @@
 					} );
 
 
-				var rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
+				const rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
 				rgbmCubeMap = new THREE.CubeTextureLoader()
 					.setPath( './textures/cube/pisaRGBM16/' )
 					.load( rgbmUrls, function () {
@@ -169,10 +168,10 @@
 
 					} );
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileCubemapShader();
 
-				var envScene = getEnvScene();
+				const envScene = getEnvScene();
 				generatedCubeRenderTarget = pmremGenerator.fromScene( envScene, 0.04 );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -191,7 +190,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'envMap', [ 'Generated', 'LDR', 'HDR', 'RGBM16' ] );
 				gui.add( params, 'roughness', 0, 1, 0.01 );
@@ -206,8 +205,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -237,7 +236,7 @@
 				torusMeshNode.material.roughness = params.roughness;
 				torusMeshNode.material.metalness = params.metalness;
 
-				var renderTarget, cubeMap;
+				let renderTarget, cubeMap;
 
 				switch ( params.envMap ) {
 
@@ -260,7 +259,7 @@
 
 				}
 
-				var newEnvMap = renderTarget ? renderTarget.texture : null;
+				const newEnvMap = renderTarget ? renderTarget.texture : null;
 
 				if ( newEnvMap && newEnvMap !== torusMesh.material.envMap ) {
 

examples/webgl_materials_envmaps_parallax.html

@@ -23,7 +23,7 @@
 			import { RectAreaLightUniformsLib } from './jsm/lights/RectAreaLightUniformsLib.js';
 
 			// shader injection for box projected cube environment mapping
-			var worldposReplace = /* glsl */`
+			const worldposReplace = /* glsl */`
 			#define BOX_PROJECTED_ENV_MAP
 
 			#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
@@ -39,7 +39,7 @@
 			#endif
 			`;
 
-			var envmapPhysicalParsReplace = /* glsl */`
+			const envmapPhysicalParsReplace = /* glsl */`
 			#if defined( USE_ENVMAP )
 
 				#define BOX_PROJECTED_ENV_MAP
@@ -181,26 +181,26 @@
 			`;
 
 			// scene size
-			var WIDTH = window.innerWidth;
-			var HEIGHT = window.innerHeight;
+			const WIDTH = window.innerWidth;
+			const HEIGHT = window.innerHeight;
 
 			// camera
-			var VIEW_ANGLE = 45;
-			var ASPECT = WIDTH / HEIGHT;
-			var NEAR = 1;
-			var FAR = 800;
+			const VIEW_ANGLE = 45;
+			const ASPECT = WIDTH / HEIGHT;
+			const NEAR = 1;
+			const FAR = 800;
 
-			var camera, cubeCamera, scene, renderer;
+			let camera, cubeCamera, scene, renderer;
 
-			var cameraControls;
+			let cameraControls;
 
-			var groundPlane, wallMat;
+			let groundPlane, wallMat;
 
 			init();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				// renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -209,11 +209,11 @@
 				container.appendChild( renderer.domElement );
 
 				// gui controls
-				var gui = new GUI();
-				var params = {
+				const gui = new GUI();
+				const params = {
 					'box projected': true
 				};
-				var bpcemGui = gui.add( params, 'box projected' );
+				const bpcemGui = gui.add( params, 'box projected' );
 
 				bpcemGui.onChange( function ( value ) {
 
@@ -247,7 +247,7 @@
 
 				// cube camera for environment map
 
-				var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 512, {
+				const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 512, {
 					format: THREE.RGBFormat,
 					generateMipmaps: true,
 					minFilter: THREE.LinearMipmapLinearFilter
@@ -258,19 +258,19 @@
 				scene.add( cubeCamera );
 
 				// ground floor ( with box projected environment mapping )
-				var loader = new THREE.TextureLoader();
-				var rMap = loader.load( 'textures/lava/lavatile.jpg' );
+				const loader = new THREE.TextureLoader();
+				const rMap = loader.load( 'textures/lava/lavatile.jpg' );
 				rMap.wrapS = THREE.RepeatWrapping;
 				rMap.wrapT = THREE.RepeatWrapping;
 				rMap.repeat.set( 2, 1 );
 
-				var defaultMat = new THREE.MeshPhysicalMaterial( {
+				const defaultMat = new THREE.MeshPhysicalMaterial( {
 					roughness: 1,
 					envMap: cubeRenderTarget.texture,
 					roughnessMap: rMap
 				} );
 
-				var boxProjectedMat = new THREE.MeshPhysicalMaterial( {
+				const boxProjectedMat = new THREE.MeshPhysicalMaterial( {
 					color: new THREE.Color( '#ffffff' ),
 					roughness: 1,
 					envMap: cubeRenderTarget.texture,
@@ -304,12 +304,12 @@
 				scene.add( groundPlane );
 
 				// walls
-				var diffuseTex = loader.load( 'textures/brick_diffuse.jpg', function () {
+				const diffuseTex = loader.load( 'textures/brick_diffuse.jpg', function () {
 
 					updateCubeMap();
 
 				} );
-				var bumpTex = loader.load( 'textures/brick_bump.jpg', function () {
+				const bumpTex = loader.load( 'textures/brick_bump.jpg', function () {
 
 					updateCubeMap();
 
@@ -321,61 +321,61 @@
 					bumpScale: 0.3,
 				} );
 
-				var planeGeo = new THREE.PlaneBufferGeometry( 100, 100 );
+				const planeGeo = new THREE.PlaneBufferGeometry( 100, 100 );
 
-				var planeBack1 = new THREE.Mesh( planeGeo, wallMat );
+				const planeBack1 = new THREE.Mesh( planeGeo, wallMat );
 				planeBack1.position.z = - 50;
 				planeBack1.position.x = - 50;
 				scene.add( planeBack1 );
 
-				var planeBack2 = new THREE.Mesh( planeGeo, wallMat );
+				const planeBack2 = new THREE.Mesh( planeGeo, wallMat );
 				planeBack2.position.z = - 50;
 				planeBack2.position.x = 50;
 				scene.add( planeBack2 );
 
-				var planeFront1 = new THREE.Mesh( planeGeo, wallMat );
+				const planeFront1 = new THREE.Mesh( planeGeo, wallMat );
 				planeFront1.position.z = 50;
 				planeFront1.position.x = - 50;
 				planeFront1.rotateY( Math.PI );
 				scene.add( planeFront1 );
 
-				var planeFront2 = new THREE.Mesh( planeGeo, wallMat );
+				const planeFront2 = new THREE.Mesh( planeGeo, wallMat );
 				planeFront2.position.z = 50;
 				planeFront2.position.x = 50;
 				planeFront2.rotateY( Math.PI );
 				scene.add( planeFront2 );
 
-				var planeRight = new THREE.Mesh( planeGeo, wallMat );
+				const planeRight = new THREE.Mesh( planeGeo, wallMat );
 				planeRight.position.x = 100;
 				planeRight.rotateY( - Math.PI / 2 );
 				scene.add( planeRight );
 
-				var planeLeft = new THREE.Mesh( planeGeo, wallMat );
+				const planeLeft = new THREE.Mesh( planeGeo, wallMat );
 				planeLeft.position.x = - 100;
 				planeLeft.rotateY( Math.PI / 2 );
 				scene.add( planeLeft );
 
 				//lights
-				var width = 50;
-				var height = 50;
-				var intensity = 10;
+				const width = 50;
+				const height = 50;
+				const intensity = 10;
 
 				RectAreaLightUniformsLib.init();
 
-				var blueRectLight = new THREE.RectAreaLight( 0xf3aaaa, intensity, width, height );
+				const blueRectLight = new THREE.RectAreaLight( 0xf3aaaa, intensity, width, height );
 				blueRectLight.position.set( 99, 5, 0 );
 				blueRectLight.lookAt( 0, 5, 0 );
 				scene.add( blueRectLight );
 
-				var blueRectLightHelper = new RectAreaLightHelper( blueRectLight );
+				const blueRectLightHelper = new RectAreaLightHelper( blueRectLight );
 				blueRectLight.add( blueRectLightHelper );
 
-				var redRectLight = new THREE.RectAreaLight( 0x9aaeff, intensity, width, height );
+				const redRectLight = new THREE.RectAreaLight( 0x9aaeff, intensity, width, height );
 				redRectLight.position.set( - 99, 5, 0 );
 				redRectLight.lookAt( 0, 5, 0 );
 				scene.add( redRectLight );
 
-				var redRectLightHelper = new RectAreaLightHelper( redRectLight );
+				const redRectLightHelper = new RectAreaLightHelper( redRectLight );
 				redRectLight.add( redRectLightHelper );
 
 				render();

examples/webgl_materials_envmaps_pmrem_nodes.html

@@ -49,7 +49,7 @@
 				TextureCubeNode
 			} from './jsm/nodes/Nodes.js';
 
-			var params = {
+			const params = {
 				roughness: 0.0,
 				metalness: 0.0,
 				exposure: 1.0,
@@ -58,11 +58,11 @@
 				debug: false
 			};
 
-			var container, stats;
-			var camera, scene, renderer, controls;
-			var nodeMaterial, nodeTexture, nodeTextureIntensity, torusMesh, planeMesh;
-			var hdrCubeRenderTarget;
-			var hdrCubeMap;
+			let container, stats;
+			let camera, scene, renderer, controls;
+			let nodeMaterial, nodeTexture, nodeTextureIntensity, torusMesh, planeMesh;
+			let hdrCubeRenderTarget;
+			let hdrCubeMap;
 
 			init();
 			animate();
@@ -82,7 +82,7 @@
 
 				//
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
+				const geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
 
 				nodeMaterial = new StandardNodeMaterial();
 				nodeMaterial.color.value = new THREE.Color( 0xffffff );
@@ -103,7 +103,7 @@
 				planeMesh.rotation.x = - Math.PI * 0.5;
 				scene.add( planeMesh );
 
-				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
+				const hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
 				hdrCubeMap = new HDRCubeTextureLoader()
 					.setPath( './textures/cube/pisaHDR/' )
 					.setDataType( THREE.UnsignedByteType )
@@ -124,7 +124,7 @@
 
 					} );
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileCubemapShader();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -143,7 +143,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'roughness', 0, 1, 0.01 );
 				gui.add( params, 'metalness', 0, 1, 0.01 );
@@ -157,8 +157,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();

examples/webgl_materials_grass.html

@@ -13,7 +13,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -26,13 +26,13 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x003300 );
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-				var texture = new THREE.CanvasTexture( generateTexture() );
+				const texture = new THREE.CanvasTexture( generateTexture() );
 
-				for ( var i = 0; i < 15; i ++ ) {
+				for ( let i = 0; i < 15; i ++ ) {
 
-					var material = new THREE.MeshBasicMaterial( {
+					const material = new THREE.MeshBasicMaterial( {
 						color: new THREE.Color().setHSL( 0.3, 0.75, ( i / 15 ) * 0.4 + 0.1 ),
 						map: texture,
 						depthTest: false,
@@ -40,7 +40,7 @@
 						transparent: true
 					} );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.y = i * 0.25;
 					mesh.rotation.x = - Math.PI / 2;
@@ -73,13 +73,13 @@
 
 			function generateTexture() {
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 512;
 				canvas.height = 512;
 
-				var context = canvas.getContext( '2d' );
+				const context = canvas.getContext( '2d' );
 
-				for ( var i = 0; i < 20000; i ++ ) {
+				for ( let i = 0; i < 20000; i ++ ) {
 
 					context.fillStyle = 'hsl(0,0%,' + ( Math.random() * 50 + 50 ) + '%)';
 					context.beginPath();
@@ -107,16 +107,16 @@
 
 			function render() {
 
-				var time = Date.now() / 6000;
+				const time = Date.now() / 6000;
 
 				camera.position.x = 80 * Math.cos( time );
 				camera.position.z = 80 * Math.sin( time );
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
+				for ( let i = 0, l = scene.children.length; i < l; i ++ ) {
 
-					var mesh = scene.children[ i ];
+					const mesh = scene.children[ i ];
 					mesh.position.x = Math.sin( time * 4 ) * i * i * 0.005;
 					mesh.position.z = Math.cos( time * 6 ) * i * i * 0.005;
 

examples/webgl_materials_lightmap.html

@@ -50,11 +50,11 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
+			const SCREEN_WIDTH = window.innerWidth;
+			const SCREEN_HEIGHT = window.innerHeight;
 
-			var container, stats;
-			var camera, scene, renderer;
+			let container, stats;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -75,7 +75,7 @@
 
 				// LIGHTS
 
-				var light = new THREE.DirectionalLight( 0xaabbff, 0.3 );
+				const light = new THREE.DirectionalLight( 0xaabbff, 0.3 );
 				light.position.x = 300;
 				light.position.y = 250;
 				light.position.z = - 500;
@@ -83,9 +83,9 @@
 
 				// SKYDOME
 
-				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
-				var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
-				var uniforms = {
+				const vertexShader = document.getElementById( 'vertexShader' ).textContent;
+				const fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
+				const uniforms = {
 					topColor: { value: new THREE.Color( 0x0077ff ) },
 					bottomColor: { value: new THREE.Color( 0xffffff ) },
 					offset: { value: 400 },
@@ -93,15 +93,15 @@
 				};
 				uniforms.topColor.value.copy( light.color );
 
-				var skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
-				var skyMat = new THREE.ShaderMaterial( {
+				const skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
+				const skyMat = new THREE.ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: vertexShader,
 					fragmentShader: fragmentShader,
 					side: THREE.BackSide
 				} );
 
-				var sky = new THREE.Mesh( skyGeo, skyMat );
+				const sky = new THREE.Mesh( skyGeo, skyMat );
 				scene.add( sky );
 
 				// RENDERER
@@ -114,7 +114,7 @@
 
 				// CONTROLS
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.maxPolarAngle = 0.9 * Math.PI / 2;
 				controls.enableZoom = false;
 
@@ -125,7 +125,7 @@
 
 				// MODEL
 
-				var loader = new THREE.ObjectLoader();
+				const loader = new THREE.ObjectLoader();
 				loader.load( "models/json/lightmap/lightmap.json", function ( object ) {
 
 					scene.add( object );

examples/webgl_materials_matcap.html

@@ -22,9 +22,9 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { EXRLoader } from './jsm/loaders/EXRLoader.js';
 
-			var mesh, renderer, scene, camera;
+			let mesh, renderer, scene, camera;
 
-			var API = {
+			const API = {
 				color: 0xffffff, // sRGB
 				exposure: 1.0
 			};
@@ -53,24 +53,24 @@
 				camera.position.set( 0, 0, 13 );
 
 				// controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.enableZoom = false;
 				controls.enablePan = false;
 
 				// manager
-				var manager = new THREE.LoadingManager( render );
+				const manager = new THREE.LoadingManager( render );
 
 				// matcap
-				var loader = new EXRLoader( manager )
+				const loaderEXR = new EXRLoader( manager )
 					.setDataType( THREE.UnsignedByteType ); // default: FloatType
 
-				var matcap = loader.load( 'textures/matcaps/040full.exr' );
+				const matcap = loaderEXR.load( 'textures/matcaps/040full.exr' );
 
 				// normalmap
-				var loader = new THREE.TextureLoader( manager );
+				const loader = new THREE.TextureLoader( manager );
 
-				var normalmap = loader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' );
+				const normalmap = loader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' );
 
 				// model
 				new GLTFLoader( manager ).load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
@@ -91,7 +91,7 @@
 				} );
 
 				// gui
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.addColor( API, 'color' )
 					.listen()
@@ -162,7 +162,7 @@
 
 				function imgCallback( event ) {
 
-					var texture = new THREE.Texture( event.target );
+					const texture = new THREE.Texture( event.target );
 
 					texture.encoding = THREE.sRGBEncoding;
 
@@ -170,7 +170,7 @@
 
 				}
 
-				var img = new Image();
+				const img = new Image();
 
 				img.onload = imgCallback;
 
@@ -180,15 +180,15 @@
 
 			function handleEXR( event ) {
 
-				var contents = event.target.result;
+				const contents = event.target.result;
 
-				var loader = new EXRLoader();
+				const loader = new EXRLoader();
 
 				loader.setDataType( THREE.UnsignedByteType ); // default: FloatType
 
-				var texData = loader.parse( contents );
+				const texData = loader.parse( contents );
 
-				var texture = new THREE.DataTexture();
+				const texture = new THREE.DataTexture();
 
 				texture.image.width = texData.width;
 				texture.image.height = texData.height;
@@ -226,12 +226,12 @@
 
 			function loadFile( file ) {
 
-				var filename = file.name;
-				var extension = filename.split( '.' ).pop().toLowerCase();
+				const filename = file.name;
+				const extension = filename.split( '.' ).pop().toLowerCase();
 
 				if ( extension === 'exr' ) {
 
-					var reader = new FileReader();
+					const reader = new FileReader();
 
 					reader.addEventListener( 'load', function ( event ) {
 
@@ -243,7 +243,7 @@
 
 				} else { // 'jpg', 'png'
 
-					var reader = new FileReader();
+					const reader = new FileReader();
 
 					reader.addEventListener( 'load', function ( event ) {
 

examples/webgl_materials_modified.html

@@ -22,7 +22,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var camera, scene, renderer, stats;
+			let camera, scene, renderer, stats;
 
 			init();
 			animate();
@@ -34,17 +34,17 @@
 
 				scene = new THREE.Scene();
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
-					var geometry = gltf.scene.children[ 0 ].geometry;
+					const geometry = gltf.scene.children[ 0 ].geometry;
 
-					var mesh = new THREE.Mesh( geometry, buildTwistMaterial( 2.0 ) );
+					let mesh = new THREE.Mesh( geometry, buildTwistMaterial( 2.0 ) );
 					mesh.position.x = - 3.5;
 					mesh.position.y = - 0.5;
 					scene.add( mesh );
 
-					var mesh = new THREE.Mesh( geometry, buildTwistMaterial( - 2.0 ) );
+					mesh = new THREE.Mesh( geometry, buildTwistMaterial( - 2.0 ) );
 					mesh.position.x = 3.5;
 					mesh.position.y = - 0.5;
 					scene.add( mesh );
@@ -56,7 +56,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 10;
 				controls.maxDistance = 50;
 
@@ -73,7 +73,7 @@
 
 			function buildTwistMaterial( amount ) {
 
-				var material = new THREE.MeshNormalMaterial();
+				const material = new THREE.MeshNormalMaterial();
 				material.onBeforeCompile = function ( shader ) {
 
 					shader.uniforms.time = { value: 0 };
@@ -111,8 +111,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();

examples/webgl_materials_normalmap.html

@@ -28,24 +28,24 @@
 			import { FXAAShader } from './jsm/shaders/FXAAShader.js';
 			import { GammaCorrectionShader } from './jsm/shaders/GammaCorrectionShader.js';
 
-			var container, stats, loader;
+			let container, stats, loader;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var mesh;
+			let mesh;
 
-			var directionalLight, pointLight, ambientLight;
+			let directionalLight, pointLight, ambientLight;
 
-			var mouseX = 0;
-			var mouseY = 0;
+			let mouseX = 0;
+			let mouseY = 0;
 
-			var targetX = 0;
-			var targetY = 0;
+			let targetX = 0;
+			let targetY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			const windowHalfX = window.innerWidth / 2;
+			const windowHalfY = window.innerHeight / 2;
 
-			var composer, effectFXAA;
+			let composer, effectFXAA;
 
 			init();
 			animate();
@@ -75,17 +75,17 @@
 				directionalLight.position.set( 1, - 0.5, - 1 );
 				scene.add( directionalLight );
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
-				var diffuseMap = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
+				const diffuseMap = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
 				diffuseMap.encoding = THREE.sRGBEncoding;
 
-				var specularMap = textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" );
+				const specularMap = textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" );
 				specularMap.encoding = THREE.sRGBEncoding;
 
-				var normalMap = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
+				const normalMap = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xdddddd,
 					specular: 0x222222,
 					shininess: 35,
@@ -116,12 +116,12 @@
 
 				renderer.autoClear = false;
 
-				var renderModel = new RenderPass( scene, camera );
+				const renderModel = new RenderPass( scene, camera );
 
-				var effectBleach = new ShaderPass( BleachBypassShader );
-				var effectColor = new ShaderPass( ColorCorrectionShader );
+				const effectBleach = new ShaderPass( BleachBypassShader );
+				const effectColor = new ShaderPass( ColorCorrectionShader );
 				effectFXAA = new ShaderPass( FXAAShader );
-				var gammaCorrection = new ShaderPass( GammaCorrectionShader );
+				const gammaCorrection = new ShaderPass( GammaCorrectionShader );
 
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
 
@@ -160,8 +160,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();

examples/webgl_materials_normalmap_object_space.html

@@ -22,7 +22,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var renderer, scene, camera;
+			let renderer, scene, camera;
 
 			init();
 
@@ -44,7 +44,7 @@
 				scene.add( camera );
 
 				// controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 10;
 				controls.maxDistance = 50;
@@ -54,7 +54,7 @@
 				scene.add( new THREE.AmbientLight( 0xffffff, .2 ) );
 
 				// light
-				var light = new THREE.PointLight( 0xffffff, 1.5 );
+				const light = new THREE.PointLight( 0xffffff, 1.5 );
 				camera.add( light );
 
 				// model

examples/webgl_materials_parallaxmap.html

@@ -26,9 +26,9 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ParallaxShader } from './jsm/shaders/ParallaxShader.js';
 
-			var camera, scene, material, renderer, stats;
+			let camera, scene, material, renderer, stats;
 
-			var effectController = {
+			const effectController = {
 				'mode': 'relief',
 				'scale': 0.005,
 				'minLayers': 20,
@@ -41,7 +41,7 @@
 
 			function init() {
 
-				var container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
@@ -50,9 +50,9 @@
 
 				//
 
-				var shader = ParallaxShader;
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-				var parameters = {
+				const shader = ParallaxShader;
+				const uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+				const parameters = {
 					fragmentShader: shader.fragmentShader,
 					vertexShader: shader.vertexShader,
 					uniforms: uniforms
@@ -60,7 +60,7 @@
 
 				//
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
 				material = new THREE.ShaderMaterial( parameters );
 				material.map = textureLoader.load( 'textures/brick_diffuse.jpg' );
@@ -72,8 +72,8 @@
 
 				//
 
-				var geometry = new THREE.BoxBufferGeometry( 1.0, 1.0, 1.0 );
-				var mesh = new THREE.Mesh( geometry, material );
+				const geometry = new THREE.BoxBufferGeometry( 1.0, 1.0, 1.0 );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
@@ -86,7 +86,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1;
 				controls.maxDistance = 5;
 
@@ -103,7 +103,7 @@
 
 			function guiChanged() {
 
-				var uniforms = material.uniforms;
+				const uniforms = material.uniforms;
 
 				uniforms[ 'parallaxScale' ].value = - 1.0 * effectController.scale;
 				uniforms[ 'parallaxMinLayers' ].value = effectController.minLayers;
@@ -117,7 +117,7 @@
 
 			function initGUI() {
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( effectController, 'mode', Object.keys( ParallaxShader.modes ) ).onChange( guiChanged );
 				gui.add( effectController, 'scale', 0.0, 0.01, 0.001 ).onChange( guiChanged );

examples/webgl_materials_physical_clearcoat.html

@@ -22,12 +22,12 @@
 
 			import { FlakesTexture } from './jsm/textures/FlakesTexture.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var particleLight;
-			var group;
+			let particleLight;
+			let group;
 
 			init();
 			animate();
@@ -51,41 +51,41 @@
 					.load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
 						function ( hdrCubeMap ) {
 
-							var hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
+							const hdrCubeRenderTarget = pmremGenerator.fromCubemap( hdrCubeMap );
 							hdrCubeMap.dispose();
 							pmremGenerator.dispose();
 
-							var geometry = new THREE.SphereBufferGeometry( 80, 64, 32 );
+							const geometry = new THREE.SphereBufferGeometry( 80, 64, 32 );
 
-							var textureLoader = new THREE.TextureLoader();
+							const textureLoader = new THREE.TextureLoader();
 
-							var diffuse = textureLoader.load( "textures/carbon/Carbon.png" );
+							const diffuse = textureLoader.load( "textures/carbon/Carbon.png" );
 							diffuse.encoding = THREE.sRGBEncoding;
 							diffuse.wrapS = THREE.RepeatWrapping;
 							diffuse.wrapT = THREE.RepeatWrapping;
 							diffuse.repeat.x = 10;
 							diffuse.repeat.y = 10;
 
-							var normalMap = textureLoader.load( "textures/carbon/Carbon_Normal.png" );
+							const normalMap = textureLoader.load( "textures/carbon/Carbon_Normal.png" );
 							normalMap.wrapS = THREE.RepeatWrapping;
 							normalMap.wrapT = THREE.RepeatWrapping;
 
-							var normalMap2 = textureLoader.load( "textures/water/Water_1_M_Normal.jpg" );
+							const normalMap2 = textureLoader.load( "textures/water/Water_1_M_Normal.jpg" );
 
-							var normalMap3 = new THREE.CanvasTexture( new FlakesTexture() );
+							const normalMap3 = new THREE.CanvasTexture( new FlakesTexture() );
 							normalMap3.wrapS = THREE.RepeatWrapping;
 							normalMap3.wrapT = THREE.RepeatWrapping;
 							normalMap3.repeat.x = 10;
 							normalMap3.repeat.y = 6;
 							normalMap3.anisotropy = 16;
 
-							var normalMap4 = textureLoader.load( "textures/golfball.jpg" );
+							const normalMap4 = textureLoader.load( "textures/golfball.jpg" );
 
-							var clearcoatNormaMap = textureLoader.load( "textures/pbr/Scratched_gold/Scratched_gold_01_1K_Normal.png" );
+							const clearcoatNormaMap = textureLoader.load( "textures/pbr/Scratched_gold/Scratched_gold_01_1K_Normal.png" );
 
 							// car paint
 
-							var material = new THREE.MeshPhysicalMaterial( {
+							let material = new THREE.MeshPhysicalMaterial( {
 								clearcoat: 1.0,
 								clearcoatRoughness: 0.1,
 								metalness: 0.9,
@@ -95,28 +95,28 @@
 								normalScale: new THREE.Vector2( 0.15, 0.15 )
 							} );
 
-							var mesh = new THREE.Mesh( geometry, material );
+							let mesh = new THREE.Mesh( geometry, material );
 							mesh.position.x = - 100;
 							mesh.position.y = 100;
 							group.add( mesh );
 
 							// fibers
 
-							var material = new THREE.MeshPhysicalMaterial( {
+							material = new THREE.MeshPhysicalMaterial( {
 								roughness: 0.5,
 								clearcoat: 1.0,
 								clearcoatRoughness: 0.1,
 								map: diffuse,
 								normalMap: normalMap
 							} );
-							var mesh = new THREE.Mesh( geometry, material );
+							mesh = new THREE.Mesh( geometry, material );
 							mesh.position.x = 100;
 							mesh.position.y = 100;
 							group.add( mesh );
 
 							// golf
 
-							var material = new THREE.MeshPhysicalMaterial( {
+							material = new THREE.MeshPhysicalMaterial( {
 								metalness: 0.0,
 								roughness: 0.1,
 								clearcoat: 1.0,
@@ -126,14 +126,14 @@
 								// y scale is negated to compensate for normal map handedness.
 								clearcoatNormalScale: new THREE.Vector2( 2.0, - 2.0 )
 							} );
-							var mesh = new THREE.Mesh( geometry, material );
+							mesh = new THREE.Mesh( geometry, material );
 							mesh.position.x = - 100;
 							mesh.position.y = - 100;
 							group.add( mesh );
 
 							// clearcoat + normalmap
 
-							var material = new THREE.MeshPhysicalMaterial( {
+							material = new THREE.MeshPhysicalMaterial( {
 								clearcoat: 1.0,
 								metalness: 1.0,
 								color: 0xff0000,
@@ -144,7 +144,7 @@
 								// y scale is negated to compensate for normal map handedness.
 								clearcoatNormalScale: new THREE.Vector2( 2.0, - 2.0 )
 							} );
-							var mesh = new THREE.Mesh( geometry, material );
+							mesh = new THREE.Mesh( geometry, material );
 							mesh.position.x = 100;
 							mesh.position.y = - 100;
 							group.add( mesh );
@@ -184,7 +184,7 @@
 
 				//
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
 				//
@@ -204,8 +204,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -228,15 +228,15 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.00025;
+				const timer = Date.now() * 0.00025;
 
 				particleLight.position.x = Math.sin( timer * 7 ) * 300;
 				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 				particleLight.position.z = Math.cos( timer * 3 ) * 300;
 
-				for ( var i = 0; i < group.children.length; i ++ ) {
+				for ( let i = 0; i < group.children.length; i ++ ) {
 
-					var child = group.children[ i ];
+					const child = group.children[ i ];
 					child.rotation.y += 0.005;
 
 				}

examples/webgl_materials_physical_reflectivity.html

@@ -25,8 +25,8 @@
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			var container, stats;
-			var params = {
+			let container, stats;
+			const params = {
 				projection: 'normal',
 				autoRotate: true,
 				reflectivity: 1.0,
@@ -34,9 +34,11 @@
 				exposure: 1.0,
 				gemColor: 'Green'
 			};
-			var camera, scene, renderer, objects = [];
-			var gemBackMaterial, gemFrontMaterial;
-			var hdrCubeRenderTarget;
+			let camera, scene, renderer;
+			let gemBackMaterial, gemFrontMaterial;
+			let hdrCubeRenderTarget;
+
+			const objects = [];
 
 			init();
 			animate();
@@ -79,14 +81,14 @@
 					premultipliedAlpha: true
 				} );
 
-				var manager = new THREE.LoadingManager();
+				const manager = new THREE.LoadingManager();
 				manager.onProgress = function ( item, loaded, total ) {
 
 					console.log( item, loaded, total );
 
 				};
 
-				var loader = new OBJLoader( manager );
+				const loader = new OBJLoader( manager );
 				loader.load( 'models/obj/emerald.obj', function ( object ) {
 
 					object.traverse( function ( child ) {
@@ -94,10 +96,10 @@
 						if ( child instanceof THREE.Mesh ) {
 
 							child.material = gemBackMaterial;
-							var second = child.clone();
+							const second = child.clone();
 							second.material = gemFrontMaterial;
 
-							var parent = new THREE.Group();
+							const parent = new THREE.Group();
 							parent.add( second );
 							parent.add( child );
 							scene.add( parent );
@@ -126,27 +128,27 @@
 
 					} );
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
 				// Lights
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var pointLight1 = new THREE.PointLight( 0xffffff );
+				const pointLight1 = new THREE.PointLight( 0xffffff );
 				pointLight1.position.set( 150, 10, 0 );
 				pointLight1.castShadow = false;
 				scene.add( pointLight1 );
 
-				var pointLight2 = new THREE.PointLight( 0xffffff );
+				const pointLight2 = new THREE.PointLight( 0xffffff );
 				pointLight2.position.set( - 150, 0, 0 );
 				scene.add( pointLight2 );
 
-				var pointLight3 = new THREE.PointLight( 0xffffff );
+				const pointLight3 = new THREE.PointLight( 0xffffff );
 				pointLight3.position.set( 0, - 10, - 150 );
 				scene.add( pointLight3 );
 
-				var pointLight4 = new THREE.PointLight( 0xffffff );
+				const pointLight4 = new THREE.PointLight( 0xffffff );
 				pointLight4.position.set( 0, 0, 150 );
 				scene.add( pointLight4 );
 
@@ -160,13 +162,13 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 20;
 				controls.maxDistance = 200;
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'reflectivity', 0, 1 );
 				gui.add( params, 'exposure', 0.1, 2 );
@@ -178,8 +180,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -206,7 +208,7 @@
 
 					gemFrontMaterial.reflectivity = gemBackMaterial.reflectivity = params.reflectivity;
 
-					var newColor = gemBackMaterial.color;
+					let newColor = gemBackMaterial.color;
 					switch ( params.gemColor ) {
 
 						case 'Blue': newColor = new THREE.Color( 0x000088 ); break;
@@ -215,9 +217,9 @@
 						case 'White': newColor = new THREE.Color( 0x888888 ); break;
 						case 'Black': newColor = new THREE.Color( 0x0f0f0f ); break;
 
-		}
-					gemBackMaterial.color = gemFrontMaterial.color = newColor;
+					}
 
+					gemBackMaterial.color = gemFrontMaterial.color = newColor;
 
 				}
 
@@ -227,14 +229,14 @@
 
 				if ( params.autoRotate ) {
 
-					for ( var i = 0, l = objects.length; i < l; i ++ ) {
+					for ( let i = 0, l = objects.length; i < l; i ++ ) {
 
-						var object = objects[ i ];
+						const object = objects[ i ];
 						object.rotation.y += 0.005;
 
 					}
 
-	}
+				}
 
 				renderer.render( scene, camera );
 

examples/webgl_materials_physical_sheen.html

@@ -28,11 +28,11 @@
 			import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
 			// Graphics variables
-			var camera, controls, scene, renderer, stats;
-			var directionalLight;
-			var mesh, sphere, material, nodeMaterial;
+			let camera, controls, scene, renderer, stats;
+			let directionalLight;
+			let mesh, sphere, material, nodeMaterial;
 
-			var params = {
+			const params = {
 				nodeMaterial: true,
 				color: new THREE.Color( 255, 0, 127 ),
 				sheenBRDF: true,
@@ -44,7 +44,7 @@
 			// model
 			new FBXLoader().load( 'models/fbx/cloth.fbx', function ( loadedModel ) {
 
-				mesh = loadedModel.children[0];
+				mesh = loadedModel.children[ 0 ];
 
 				init();
 
@@ -80,11 +80,11 @@
 					new THREE.SphereBufferGeometry( 1, 100, 100 ),
 					material
 				);
-				scene.add(sphere);
+				scene.add( sphere );
 
 				camera.position.set( - 12, 7, 4 );
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -114,23 +114,23 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				function onUpdate() {
 
 					mesh.material = sphere.material = params.nodeMaterial
-					? nodeMaterial
-					: material;
+						? nodeMaterial
+						: material;
 
 					material.sheen = params.sheenBRDF
-					? new THREE.Color()
-					: null;
+						? new THREE.Color()
+						: null;
 
 					material.needsUpdate = true;
 
 					nodeMaterial.sheen = params.sheenBRDF
-					? new Nodes.ColorNode( material.sheen )
-					: undefined;
+						? new Nodes.ColorNode( material.sheen )
+						: undefined;
 
 					nodeMaterial.needsCompile = true;
 

examples/webgl_materials_physical_transmission.html

@@ -21,7 +21,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			var params = {
+			const params = {
 				color: 0xffffff,
 				transmission: 0.90,
 				envMapIntensity: 1,
@@ -29,17 +29,16 @@
 				exposure: 1
 			};
 
-			var container, stats;
-			var camera, scene, renderer;
+			let container, stats;
+			let camera, scene, renderer;
 
-			var hdrCubeRenderTarget;
-			var spotLight1, spotLight2;
-			var mesh1, mesh2;
+			let hdrCubeRenderTarget;
+			let mesh1, mesh2;
 
-			var hdrEquirect = new RGBELoader()
+			const hdrEquirect = new RGBELoader()
 				.setDataType( THREE.UnsignedByteType )
 				.setPath( 'textures/equirectangular/' )
-				.load( 'royal_esplanade_1k.hdr', function ( texture ) {
+				.load( 'royal_esplanade_1k.hdr', function () {
 
 					init();
 					animate();
@@ -70,7 +69,7 @@
 
 				//
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
 				hdrEquirect.dispose();
 				pmremGenerator.dispose();
@@ -79,15 +78,15 @@
 
 				//
 
-				var geometry = new THREE.SphereBufferGeometry( 20, 64, 32 );
+				const geometry = new THREE.SphereBufferGeometry( 20, 64, 32 );
 
-				var texture = new THREE.CanvasTexture( generateTexture() );
+				const texture = new THREE.CanvasTexture( generateTexture() );
 				texture.magFilter = THREE.NearestFilter;
 				texture.wrapT = THREE.RepeatWrapping;
 				texture.wrapS = THREE.RepeatWrapping;
 				texture.repeat.set( 1, 3.5 );
 
-				var material = new THREE.MeshPhysicalMaterial( {
+				const material = new THREE.MeshPhysicalMaterial( {
 					color: params.color,
 					metalness: 0,
 					roughness: 0,
@@ -97,19 +96,19 @@
 					envMapIntensity: params.envMapIntensity,
 					depthWrite: false,
 					transmission: params.transmission, // use material.transmission for glass materials
-					opacity: 1,                        // set material.opacity to 1 when material.transmission is non-zero
+					opacity: 1, // set material.opacity to 1 when material.transmission is non-zero
 					transparent: true
 				} );
 
-				var material1 = new THREE.MeshPhysicalMaterial().copy( material );
+				const material1 = new THREE.MeshPhysicalMaterial().copy( material );
 
-				var material1b = new THREE.MeshPhysicalMaterial().copy( material );
+				const material1b = new THREE.MeshPhysicalMaterial().copy( material );
 				material1b.side = THREE.BackSide;
 
-				var material2 = new THREE.MeshPhysicalMaterial().copy( material );
+				const material2 = new THREE.MeshPhysicalMaterial().copy( material );
 				material2.premultipliedAlpha = true;
 
-				var material2b = new THREE.MeshPhysicalMaterial().copy( material );
+				const material2b = new THREE.MeshPhysicalMaterial().copy( material );
 				material2b.premultipliedAlpha = true;
 				material2b.side = THREE.BackSide;
 
@@ -117,7 +116,7 @@
 				mesh1.position.x = - 30.0;
 				scene.add( mesh1 );
 
-				var mesh = new THREE.Mesh( geometry, material1b );
+				let mesh = new THREE.Mesh( geometry, material1b );
 				mesh.renderOrder = - 1;
 				mesh1.add( mesh );
 
@@ -125,18 +124,18 @@
 				mesh2.position.x = 30.0;
 				scene.add( mesh2 );
 
-				var mesh = new THREE.Mesh( geometry, material2b );
+				mesh = new THREE.Mesh( geometry, material2b );
 				mesh.renderOrder = - 1;
 				mesh2.add( mesh );
 
 				//
 
-				spotLight1 = new THREE.SpotLight( 0xffffff, params.lightIntensity );
+				const spotLight1 = new THREE.SpotLight( 0xffffff, params.lightIntensity );
 				spotLight1.position.set( 100, 200, 100 );
 				spotLight1.angle = Math.PI / 6;
 				scene.add( spotLight1 );
 
-				spotLight2 = new THREE.SpotLight( 0xffffff, params.lightIntensity );
+				const spotLight2 = new THREE.SpotLight( 0xffffff, params.lightIntensity );
 				spotLight2.position.set( - 100, - 200, - 100 );
 				spotLight2.angle = Math.PI / 6;
 				scene.add( spotLight2 );
@@ -146,7 +145,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 10;
 				controls.maxDistance = 150;
 
@@ -154,7 +153,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.addColor( params, 'color' )
 					.onChange( function () {
@@ -204,8 +203,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -218,11 +217,11 @@
 
 			function generateTexture() {
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 2;
 				canvas.height = 2;
 
-				var context = canvas.getContext( '2d' );
+				const context = canvas.getContext( '2d' );
 				context.fillStyle = 'white';
 				context.fillRect( 0, 1, 2, 1 );
 
@@ -234,7 +233,7 @@
 
 				requestAnimationFrame( animate );
 
-				var t = performance.now();
+				const t = performance.now();
 
 				mesh1.rotation.x = mesh2.rotation.x = t * 0.0002;
 				mesh1.rotation.z = mesh2.rotation.z = - t * 0.0002;

examples/webgl_materials_shaders_fresnel.html

@@ -19,16 +19,16 @@
 
 			import { FresnelShader } from './jsm/shaders/FresnelShader.js';
 
-			var container;
+			let container;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var spheres = [];
+			const spheres = [];
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
@@ -45,37 +45,37 @@
 
 				//
 
-				var path = "textures/cube/Park2/";
-				var format = '.jpg';
-				var urls = [
+				const path = "textures/cube/Park2/";
+				const format = '.jpg';
+				const urls = [
 					path + 'posx' + format, path + 'negx' + format,
 					path + 'posy' + format, path + 'negy' + format,
 					path + 'posz' + format, path + 'negz' + format
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				const textureCube = new THREE.CubeTextureLoader().load( urls );
 
 				scene = new THREE.Scene();
 				scene.background = textureCube;
 
 				//
 
-				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
+				const geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
-				var shader = FresnelShader;
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+				const shader = FresnelShader;
+				const uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
 				uniforms[ "tCube" ].value = textureCube;
 
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: shader.vertexShader,
 					fragmentShader: shader.fragmentShader
 				} );
 
-				for ( var i = 0; i < 500; i ++ ) {
+				for ( let i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
@@ -133,16 +133,16 @@
 
 			function render() {
 
-				var timer = 0.0001 * Date.now();
+				const timer = 0.0001 * Date.now();
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, il = spheres.length; i < il; i ++ ) {
+				for ( let i = 0, il = spheres.length; i < il; i ++ ) {
 
-					var sphere = spheres[ i ];
+					const sphere = spheres[ i ];
 
 					sphere.position.x = 5000 * Math.cos( timer + i );
 					sphere.position.y = 5000 * Math.sin( timer + i * 1.1 );

examples/webgl_materials_standard.html

@@ -23,11 +23,11 @@
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			var statsEnabled = true;
+			const statsEnabled = true;
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer, controls;
+			let camera, scene, renderer, controls;
 
 			init();
 			animate();
@@ -61,19 +61,19 @@
 
 				//
 
-				var material = new THREE.MeshStandardMaterial();
+				const material = new THREE.MeshStandardMaterial();
 
 				new OBJLoader()
 					.setPath( 'models/obj/cerberus/' )
 					.load( 'Cerberus.obj', function ( group ) {
 
-						var loader = new THREE.TextureLoader()
+						const loader = new THREE.TextureLoader()
 							.setPath( 'models/obj/cerberus/' );
 
 						material.roughness = 1; // attenuates roughnessMap
 						material.metalness = 1; // attenuates metalnessMap
 
-						var diffuseMap = loader.load( 'Cerberus_A.jpg' );
+						const diffuseMap = loader.load( 'Cerberus_A.jpg' );
 						diffuseMap.encoding = THREE.sRGBEncoding;
 						material.map = diffuseMap;
 						// roughness is in G channel, metalness is in B channel
@@ -106,7 +106,7 @@
 					.setPath( 'textures/equirectangular/' )
 					.load( 'venice_sunset_1k.hdr', function ( hdrEquirect ) {
 
-						var hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
+						const hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
 						hdrEquirect.dispose();
 						pmremGenerator.dispose();
 
@@ -115,7 +115,7 @@
 
 					} );
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
 				//

examples/webgl_materials_subsurface_scattering.html

@@ -24,9 +24,9 @@
 		import { SubsurfaceScatteringShader } from './jsm/shaders/SubsurfaceScatteringShader.js';
 		import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
-		var container, stats;
-		var camera, scene, renderer;
-		var model;
+		let container, stats;
+		let camera, scene, renderer;
+		let model;
 
 		init();
 		animate();
@@ -45,18 +45,18 @@
 
 			scene.add( new THREE.AmbientLight( 0x888888 ) );
 
-			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.03 );
+			const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.03 );
 			directionalLight.position.set( 0.0, 0.5, 0.5 ).normalize();
 			scene.add( directionalLight );
 
-			var pointLight1 = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888888 } ) );
+			const pointLight1 = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888888 } ) );
 			pointLight1.add( new THREE.PointLight( 0x888888, 7.0, 300 ) );
 			scene.add( pointLight1 );
 			pointLight1.position.x = 0;
 			pointLight1.position.y = - 50;
 			pointLight1.position.z = 350;
 
-			var pointLight2 = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888800 } ) );
+			const pointLight2 = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888800 } ) );
 			pointLight2.add( new THREE.PointLight( 0x888800, 1.0, 500 ) );
 			scene.add( pointLight2 );
 			pointLight2.position.x = - 100;
@@ -74,7 +74,7 @@
 			stats = new Stats();
 			container.appendChild( stats.dom );
 
-			var controls = new OrbitControls( camera, container );
+			const controls = new OrbitControls( camera, container );
 			controls.minDistance = 500;
 			controls.maxDistance = 3000;
 
@@ -86,13 +86,13 @@
 
 		function initMaterial() {
 
-			var loader = new THREE.TextureLoader();
-			var imgTexture = loader.load( 'models/fbx/white.jpg' );
-			var thicknessTexture = loader.load( 'models/fbx/bunny_thickness.jpg' );
+			const loader = new THREE.TextureLoader();
+			const imgTexture = loader.load( 'models/fbx/white.jpg' );
+			const thicknessTexture = loader.load( 'models/fbx/bunny_thickness.jpg' );
 			imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
-			var shader = SubsurfaceScatteringShader;
-			var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+			const shader = SubsurfaceScatteringShader;
+			const uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
 			uniforms[ 'map' ].value = imgTexture;
 
@@ -107,7 +107,7 @@
 			uniforms[ 'thicknessPower' ].value = 2.0;
 			uniforms[ 'thicknessScale' ].value = 16.0;
 
-			var material = new THREE.ShaderMaterial( {
+			const material = new THREE.ShaderMaterial( {
 				uniforms: uniforms,
 				vertexShader: shader.vertexShader,
 				fragmentShader: shader.fragmentShader,
@@ -117,8 +117,8 @@
 
 			// LOADER
 
-			var loader = new FBXLoader();
-			loader.load( 'models/fbx/stanford-bunny.fbx', function ( object ) {
+			const loaderFBX = new FBXLoader();
+			loaderFBX.load( 'models/fbx/stanford-bunny.fbx', function ( object ) {
 
 				model = object.children[ 0 ];
 				model.position.set( 0, 0, 10 );
@@ -134,9 +134,9 @@
 
 		function initGUI( uniforms ) {
 
-			var gui = new GUI();
+			const gui = new GUI();
 
-			var ThicknessControls = function () {
+			const ThicknessControls = function () {
 
 				this.distortion = uniforms[ 'thicknessDistortion' ].value;
 				this.ambient = uniforms[ 'thicknessAmbient' ].value;
@@ -146,8 +146,8 @@
 
 			};
 
-			var thicknessControls = new ThicknessControls();
-			var thicknessFolder = gui.addFolder( 'Thickness Control' );
+			const thicknessControls = new ThicknessControls();
+			const thicknessFolder = gui.addFolder( 'Thickness Control' );
 
 			thicknessFolder.add( thicknessControls, 'distortion' ).min( 0.01 ).max( 1 ).step( 0.01 ).onChange( function () {
 

examples/webgl_materials_texture_anisotropy.html

@@ -59,17 +59,17 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
+			const SCREEN_WIDTH = window.innerWidth;
+			const SCREEN_HEIGHT = window.innerHeight;
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene1, scene2, renderer;
+			let camera, scene1, scene2, renderer;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			const windowHalfX = window.innerWidth / 2;
+			const windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -98,29 +98,29 @@
 				scene1.add( new THREE.AmbientLight( 0xeef0ff ) );
 				scene2.add( new THREE.AmbientLight( 0xeef0ff ) );
 
-				var light1 = new THREE.DirectionalLight( 0xffffff, 2 );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 2 );
 				light1.position.set( 1, 1, 1 );
 				scene1.add( light1 );
 
-				var light2 = new THREE.DirectionalLight( 0xffffff, 2 );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 2 );
 				light2.position.set( 1, 1, 1 );
 				scene2.add( light2 );
 
 				// GROUND
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
-				var maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
+				const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
 
-				var texture1 = textureLoader.load( "textures/crate.gif" );
-				var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
+				const texture1 = textureLoader.load( "textures/crate.gif" );
+				const material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
 
 				texture1.anisotropy = maxAnisotropy;
 				texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping;
 				texture1.repeat.set( 512, 512 );
 
-				var texture2 = textureLoader.load( "textures/crate.gif" );
-				var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
+				const texture2 = textureLoader.load( "textures/crate.gif" );
+				const material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
 
 				texture2.anisotropy = 1;
 				texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
@@ -140,13 +140,13 @@
 
 				//
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-				var mesh1 = new THREE.Mesh( geometry, material1 );
+				const mesh1 = new THREE.Mesh( geometry, material1 );
 				mesh1.rotation.x = - Math.PI / 2;
 				mesh1.scale.set( 1000, 1000, 1000 );
 
-				var mesh2 = new THREE.Mesh( geometry, material2 );
+				const mesh2 = new THREE.Mesh( geometry, material2 );
 				mesh2.rotation.x = - Math.PI / 2;
 				mesh2.scale.set( 1000, 1000, 1000 );
 

examples/webgl_materials_texture_canvas.html

@@ -29,8 +29,8 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer, mesh, material;
-			var drawStartPos = new THREE.Vector2();
+			let camera, scene, renderer, mesh, material;
+			const drawStartPos = new THREE.Vector2();
 
 			init();
 			setupCanvasDrawing();
@@ -63,8 +63,8 @@
 
 				// get canvas and context
 
-				var drawingCanvas = document.getElementById( 'drawing-canvas' );
-				var drawingContext = drawingCanvas.getContext( '2d' );
+				const drawingCanvas = document.getElementById( 'drawing-canvas' );
+				const drawingContext = drawingCanvas.getContext( '2d' );
 
 				// draw white background
 
@@ -77,7 +77,7 @@
 
 				// set the variable to keep track of when to draw
 
-				var paint = false;
+				let paint = false;
 
 				// add canvas event listeners
 				drawingCanvas.addEventListener( 'pointerdown', function ( e ) {

examples/webgl_materials_texture_filters.html

@@ -47,17 +47,17 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
+			const SCREEN_WIDTH = window.innerWidth;
+			const SCREEN_HEIGHT = window.innerHeight;
 
-			var container;
+			let container;
 
-			var camera, scene, scene2, renderer;
+			let camera, scene, scene2, renderer;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			const windowHalfX = window.innerWidth / 2;
+			const windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -81,8 +81,8 @@
 
 				// GROUND
 
-				var imageCanvas = document.createElement( "canvas" ),
-					context = imageCanvas.getContext( "2d" );
+				const imageCanvas = document.createElement( "canvas" );
+				const context = imageCanvas.getContext( "2d" );
 
 				imageCanvas.width = imageCanvas.height = 128;
 
@@ -93,34 +93,34 @@
 				context.fillRect( 0, 0, 64, 64 );
 				context.fillRect( 64, 64, 64, 64 );
 
-				var textureCanvas = new THREE.CanvasTexture( imageCanvas );
+				const textureCanvas = new THREE.CanvasTexture( imageCanvas );
 				textureCanvas.repeat.set( 1000, 1000 );
 				textureCanvas.wrapS = THREE.RepeatWrapping;
 				textureCanvas.wrapT = THREE.RepeatWrapping;
 
-				var textureCanvas2 = textureCanvas.clone();
+				const textureCanvas2 = textureCanvas.clone();
 				textureCanvas2.magFilter = THREE.NearestFilter;
 				textureCanvas2.minFilter = THREE.NearestFilter;
 
-				var	materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } );
-				var materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
+				const	materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } );
+				const materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-				var meshCanvas = new THREE.Mesh( geometry, materialCanvas );
+				const meshCanvas = new THREE.Mesh( geometry, materialCanvas );
 				meshCanvas.rotation.x = - Math.PI / 2;
 				meshCanvas.scale.set( 1000, 1000, 1000 );
 
-				var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
+				const meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
 				meshCanvas2.rotation.x = - Math.PI / 2;
 				meshCanvas2.scale.set( 1000, 1000, 1000 );
 
 
 				// PAINTING
 
-				var callbackPainting = function () {
+				const callbackPainting = function () {
 
-					var image = texturePainting.image;
+					const image = texturePainting.image;
 
 					texturePainting2.image = image;
 					texturePainting2.needsUpdate = true;
@@ -128,9 +128,9 @@
 					scene.add( meshCanvas );
 					scene2.add( meshCanvas2 );
 
-					var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
-					var mesh = new THREE.Mesh( geometry, materialPainting );
-					var mesh2 = new THREE.Mesh( geometry, materialPainting2 );
+					const geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+					const mesh = new THREE.Mesh( geometry, materialPainting );
+					const mesh2 = new THREE.Mesh( geometry, materialPainting2 );
 
 					addPainting( scene, mesh );
 					addPainting( scene2, mesh2 );
@@ -142,13 +142,13 @@
 
 						zscene.add( zmesh );
 
-						var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
+						const meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
 						meshFrame.position.z = - 10.0;
 						meshFrame.scale.x = 1.1 * image.width / 100;
 						meshFrame.scale.y = 1.1 * image.height / 100;
 						zscene.add( meshFrame );
 
-						var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
+						const meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
 						meshShadow.position.y = - 1.1 * image.height / 2;
 						meshShadow.position.z = - 1.1 * image.height / 2;
 						meshShadow.rotation.x = - Math.PI / 2;
@@ -156,7 +156,7 @@
 						meshShadow.scale.y = 1.1 * image.height / 100;
 						zscene.add( meshShadow );
 
-						var floorHeight = - 1.117 * image.height / 2;
+						const floorHeight = - 1.117 * image.height / 2;
 						meshCanvas.position.y = meshCanvas2.position.y = floorHeight;
 
 					}
@@ -164,10 +164,10 @@
 
 				};
 
-				var texturePainting = new THREE.TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting );
-				var texturePainting2 = new THREE.Texture();
-				var materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );
-				var materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
+				const texturePainting = new THREE.TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting );
+				const texturePainting2 = new THREE.Texture();
+				const materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );
+				const materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
 
 				texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
 				texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter;

examples/webgl_materials_texture_manualmipmap.html

@@ -47,17 +47,17 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
+			const SCREEN_WIDTH = window.innerWidth;
+			const SCREEN_HEIGHT = window.innerHeight;
 
-			var container;
+			let container;
 
-			var camera, scene1, scene2, renderer;
+			let camera, scene1, scene2, renderer;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			const windowHalfX = window.innerWidth / 2;
+			const windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -83,8 +83,8 @@
 
 				function mipmap( size, color ) {
 
-					var imageCanvas = document.createElement( "canvas" ),
-						context = imageCanvas.getContext( "2d" );
+					const imageCanvas = document.createElement( "canvas" );
+					const context = imageCanvas.getContext( "2d" );
 
 					imageCanvas.width = imageCanvas.height = size;
 
@@ -98,8 +98,8 @@
 
 				}
 
-				var canvas = mipmap( 128, '#f00' );
-				var textureCanvas1 = new THREE.CanvasTexture( canvas );
+				const canvas = mipmap( 128, '#f00' );
+				const textureCanvas1 = new THREE.CanvasTexture( canvas );
 				textureCanvas1.mipmaps[ 0 ] = canvas;
 				textureCanvas1.mipmaps[ 1 ] = mipmap( 64, '#0f0' );
 				textureCanvas1.mipmaps[ 2 ] = mipmap( 32, '#00f' );
@@ -112,29 +112,29 @@
 				textureCanvas1.wrapS = THREE.RepeatWrapping;
 				textureCanvas1.wrapT = THREE.RepeatWrapping;
 
-				var textureCanvas2 = textureCanvas1.clone();
+				const textureCanvas2 = textureCanvas1.clone();
 				textureCanvas2.magFilter = THREE.NearestFilter;
 				textureCanvas2.minFilter = THREE.NearestMipmapNearestFilter;
 
-				var materialCanvas1 = new THREE.MeshBasicMaterial( { map: textureCanvas1 } );
-				var materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
+				const materialCanvas1 = new THREE.MeshBasicMaterial( { map: textureCanvas1 } );
+				const materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-				var meshCanvas1 = new THREE.Mesh( geometry, materialCanvas1 );
+				const meshCanvas1 = new THREE.Mesh( geometry, materialCanvas1 );
 				meshCanvas1.rotation.x = - Math.PI / 2;
 				meshCanvas1.scale.set( 1000, 1000, 1000 );
 
-				var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
+				const meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
 				meshCanvas2.rotation.x = - Math.PI / 2;
 				meshCanvas2.scale.set( 1000, 1000, 1000 );
 
 
 				// PAINTING
 
-				var callbackPainting = function () {
+				const callbackPainting = function () {
 
-					var image = texturePainting1.image;
+					const image = texturePainting1.image;
 
 					texturePainting2.image = image;
 					texturePainting2.needsUpdate = true;
@@ -142,9 +142,9 @@
 					scene1.add( meshCanvas1 );
 					scene2.add( meshCanvas2 );
 
-					var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
-					var mesh1 = new THREE.Mesh( geometry, materialPainting1 );
-					var mesh2 = new THREE.Mesh( geometry, materialPainting2 );
+					const geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+					const mesh1 = new THREE.Mesh( geometry, materialPainting1 );
+					const mesh2 = new THREE.Mesh( geometry, materialPainting2 );
 
 					addPainting( scene1, mesh1 );
 					addPainting( scene2, mesh2 );
@@ -156,13 +156,13 @@
 
 						zscene.add( zmesh );
 
-						var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
+						const meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
 						meshFrame.position.z = - 10.0;
 						meshFrame.scale.x = 1.1 * image.width / 100;
 						meshFrame.scale.y = 1.1 * image.height / 100;
 						zscene.add( meshFrame );
 
-						var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
+						const meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
 						meshShadow.position.y = - 1.1 * image.height / 2;
 						meshShadow.position.z = - 1.1 * image.height / 2;
 						meshShadow.rotation.x = - Math.PI / 2;
@@ -170,7 +170,7 @@
 						meshShadow.scale.y = 1.1 * image.height / 100;
 						zscene.add( meshShadow );
 
-						var floorHeight = - 1.117 * image.height / 2;
+						const floorHeight = - 1.117 * image.height / 2;
 						meshCanvas1.position.y = meshCanvas2.position.y = floorHeight;
 
 					}
@@ -178,10 +178,10 @@
 
 				};
 
-				var texturePainting1 = new THREE.TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting );
-				var texturePainting2 = new THREE.Texture();
-				var materialPainting1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting1 } );
-				var materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
+				const texturePainting1 = new THREE.TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting );
+				const texturePainting2 = new THREE.Texture();
+				const materialPainting1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting1 } );
+				const materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
 
 				texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
 				texturePainting1.minFilter = texturePainting1.magFilter = THREE.LinearFilter;

examples/webgl_materials_texture_partialupdate.html

@@ -17,7 +17,11 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer, clock, dataTexture, diffuseMap;
+			let camera, scene, renderer, clock, dataTexture, diffuseMap;
+
+			let last = 0;
+			const position = new THREE.Vector2();
+			const color = new THREE.Color();
 
 			init();
 
@@ -30,23 +34,23 @@
 
 				clock = new THREE.Clock();
 
-				var loader = new THREE.TextureLoader();
+				const loader = new THREE.TextureLoader();
 				diffuseMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg', animate );
 				diffuseMap.minFilter = THREE.LinearFilter;
 				diffuseMap.generateMipmaps = false;
 
-				var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
-				var material = new THREE.MeshBasicMaterial( { map: diffuseMap } );
+				const geometry = new THREE.PlaneBufferGeometry( 2, 2 );
+				const material = new THREE.MeshBasicMaterial( { map: diffuseMap } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
 
-				var width = 32;
-				var height = 32;
+				const width = 32;
+				const height = 32;
 
-				var data = new Uint8Array( width * height * 3 );
+				const data = new Uint8Array( width * height * 3 );
 				dataTexture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
 
 				//
@@ -71,14 +75,11 @@
 
 			}
 
-			var last = 0;
-			var position = new THREE.Vector2();
-
 			function animate() {
 
 				requestAnimationFrame( animate );
 
-				var elapsedTime = clock.getElapsedTime();
+				const elapsedTime = clock.getElapsedTime();
 
 				if ( elapsedTime - last > 0.1 ) {
 
@@ -101,24 +102,22 @@
 
 			}
 
-			var color = new THREE.Color();
-
 			function updateDataTexture( texture ) {
 
-				var size = texture.image.width * texture.image.height;
-				var data = texture.image.data;
+				const size = texture.image.width * texture.image.height;
+				const data = texture.image.data;
 
 				// generate a random color and update texture data
 
 				color.setHex( Math.random() * 0xffffff );
 
-				var r = Math.floor( color.r * 255 );
-				var g = Math.floor( color.g * 255 );
-				var b = Math.floor( color.b * 255 );
+				const r = Math.floor( color.r * 255 );
+				const g = Math.floor( color.g * 255 );
+				const b = Math.floor( color.b * 255 );
 
-				for ( var i = 0; i < size; i ++ ) {
+				for ( let i = 0; i < size; i ++ ) {
 
-					var stride = i * 3;
+					const stride = i * 3;
 
 					data[ stride ] = r;
 					data[ stride + 1 ] = g;

examples/webgl_materials_texture_rotation.html

@@ -19,11 +19,11 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var mesh, renderer, scene, camera;
+			let mesh, renderer, scene, camera;
 
-			var gui;
+			let gui;
 
-			var API = {
+			const API = {
 				offsetX: 0,
 				offsetY: 0,
 				repeatX: 0.25,
@@ -48,13 +48,13 @@
 				camera.position.set( 10, 15, 25 );
 				scene.add( camera );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 20;
 				controls.maxDistance = 50;
 				controls.maxPolarAngle = Math.PI / 2;
 
-				var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
+				const geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 
 				new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg', function ( texture ) {
 
@@ -63,7 +63,7 @@
 
 					//texture.matrixAutoUpdate = false; // default true; set to false to update texture.matrix manually
 
-					var material = new THREE.MeshBasicMaterial( { map: texture } );
+					const material = new THREE.MeshBasicMaterial( { map: texture } );
 
 					mesh = new THREE.Mesh( geometry, material );
 					scene.add( mesh );
@@ -100,7 +100,7 @@
 
 			function updateUvTransform() {
 
-				var texture = mesh.material.map;
+				const texture = mesh.material.map;
 
 				if ( texture.matrixAutoUpdate === true ) {
 

examples/webgl_materials_variations_basic.html

@@ -19,12 +19,12 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
-			var particleLight;
+			let camera, scene, renderer;
+			let particleLight;
 
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 				init( font );
@@ -42,7 +42,7 @@
 
 				//
 
-				var reflectionCube = new THREE.CubeTextureLoader()
+				const reflectionCube = new THREE.CubeTextureLoader()
 					.setPath( 'textures/cube/SwedishRoyalCastle/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 				reflectionCube.encoding = THREE.sRGBEncoding;
@@ -52,35 +52,35 @@
 
 				// Materials
 
-				var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
+				let imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
 				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 				imgTexture.encoding = THREE.sRGBEncoding;
 				imgTexture.anisotropy = 16;
 				imgTexture = null;
 
-				var cubeWidth = 400;
-				var numberOfSphersPerSide = 5;
-				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
-				var stepSize = 1.0 / numberOfSphersPerSide;
+				const cubeWidth = 400;
+				const numberOfSphersPerSide = 5;
+				const sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
+				const stepSize = 1.0 / numberOfSphersPerSide;
 
-				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
+				const geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-				for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
+				for ( let alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
-					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
+					for ( let beta = 0; beta <= 1.0; beta += stepSize ) {
 
-						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+						for ( let gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
-							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
+							const diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
 
-							var material = new THREE.MeshBasicMaterial( {
+							const material = new THREE.MeshBasicMaterial( {
 								map: imgTexture,
 								color: diffuseColor,
 								reflectivity: beta,
 								envMap: alpha < 0.5 ? reflectionCube : null
 							} );
 
-							var mesh = new THREE.Mesh( geometry, material );
+							const mesh = new THREE.Mesh( geometry, material );
 
 							mesh.position.x = alpha * 400 - 200;
 							mesh.position.y = beta * 400 - 200;
@@ -96,7 +96,7 @@
 
 				function addLabel( name, location ) {
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
+					const textGeo = new THREE.TextBufferGeometry( name, {
 
 						font: font,
 
@@ -106,8 +106,8 @@
 
 					} );
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
+					const textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+					const textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
 
@@ -132,11 +132,11 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+				const pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 				particleLight.add( pointLight );
 
 				//
@@ -152,7 +152,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 200;
 				controls.maxDistance = 2000;
 
@@ -182,7 +182,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.00025;
+				const timer = Date.now() * 0.00025;
 
 				//camera.position.x = Math.cos( timer ) * 800;
 				//camera.position.z = Math.sin( timer ) * 800;

examples/webgl_materials_variations_lambert.html

@@ -19,12 +19,12 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
-			var particleLight;
+			let camera, scene, renderer;
+			let particleLight;
 
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 				init( font );
@@ -42,7 +42,7 @@
 
 				//
 
-				var reflectionCube = new THREE.CubeTextureLoader()
+				const reflectionCube = new THREE.CubeTextureLoader()
 					.setPath( 'textures/cube/SwedishRoyalCastle/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 				reflectionCube.encoding = THREE.sRGBEncoding;
@@ -52,35 +52,35 @@
 
 				// Materials
 
-				var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
+				let imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
 				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 				imgTexture.encoding = THREE.sRGBEncoding;
 				imgTexture.anisotropy = 16;
 				imgTexture = null;
 
-				var cubeWidth = 400;
-				var numberOfSphersPerSide = 5;
-				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
-				var stepSize = 1.0 / numberOfSphersPerSide;
+				const cubeWidth = 400;
+				const numberOfSphersPerSide = 5;
+				const sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
+				const stepSize = 1.0 / numberOfSphersPerSide;
 
-				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
+				const geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-				for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
+				for ( let alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
-					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
+					for ( let beta = 0; beta <= 1.0; beta += stepSize ) {
 
-						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+						for ( let gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
-							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
+							const diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
 
-							var material = new THREE.MeshLambertMaterial( {
+							const material = new THREE.MeshLambertMaterial( {
 								map: imgTexture,
 								color: diffuseColor,
 								reflectivity: beta,
 								envMap: alpha < 0.5 ? reflectionCube : null
 							} );
 
-							var mesh = new THREE.Mesh( geometry, material );
+							const mesh = new THREE.Mesh( geometry, material );
 
 							mesh.position.x = alpha * 400 - 200;
 							mesh.position.y = beta * 400 - 200;
@@ -96,7 +96,7 @@
 
 				function addLabel( name, location ) {
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
+					const textGeo = new THREE.TextBufferGeometry( name, {
 
 						font: font,
 
@@ -106,8 +106,8 @@
 
 					} );
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
+					const textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+					const textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
 
@@ -132,11 +132,11 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+				const pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 				particleLight.add( pointLight );
 
 				//
@@ -152,7 +152,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 200;
 				controls.maxDistance = 2000;
 
@@ -182,7 +182,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.00025;
+				const timer = Date.now() * 0.00025;
 
 				//camera.position.x = Math.cos( timer ) * 800;
 				//camera.position.z = Math.sin( timer ) * 800;

examples/webgl_materials_variations_phong.html

@@ -19,12 +19,12 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
-			var particleLight;
+			let camera, scene, renderer;
+			let particleLight;
 
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 				init( font );
@@ -42,7 +42,7 @@
 
 				//
 
-				var reflectionCube = new THREE.CubeTextureLoader()
+				const reflectionCube = new THREE.CubeTextureLoader()
 					.setPath( 'textures/cube/SwedishRoyalCastle/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 				reflectionCube.encoding = THREE.sRGBEncoding;
@@ -52,34 +52,34 @@
 
 				// Materials
 
-				var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
+				let imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
 				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 				imgTexture.encoding = THREE.sRGBEncoding;
 				imgTexture.anisotropy = 16;
 				imgTexture = null;
 
-				var bumpScale = 1;
-				var cubeWidth = 400;
-				var numberOfSphersPerSide = 5;
-				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
-				var stepSize = 1.0 / numberOfSphersPerSide;
+				const bumpScale = 1;
+				const cubeWidth = 400;
+				const numberOfSphersPerSide = 5;
+				const sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
+				const stepSize = 1.0 / numberOfSphersPerSide;
 
-				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
+				const geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-				for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
+				for ( let alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
 
-					var specularShininess = Math.pow( 2, alpha * 10 );
+					const specularShininess = Math.pow( 2, alpha * 10 );
 
-					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
+					for ( let beta = 0; beta <= 1.0; beta += stepSize ) {
 
-						var specularColor = new THREE.Color( beta * 0.2, beta * 0.2, beta * 0.2 );
+						const specularColor = new THREE.Color( beta * 0.2, beta * 0.2, beta * 0.2 );
 
-						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+						for ( let gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 							// basic monochromatic energy preservation
-							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 );
+							const diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 );
 
-							var material = new THREE.MeshPhongMaterial( {
+							const material = new THREE.MeshPhongMaterial( {
 								map: imgTexture,
 								bumpMap: imgTexture,
 								bumpScale: bumpScale,
@@ -90,7 +90,7 @@
 								envMap: alphaIndex % 2 === 0 ? null : reflectionCube
 							} );
 
-							var mesh = new THREE.Mesh( geometry, material );
+							const mesh = new THREE.Mesh( geometry, material );
 
 							mesh.position.x = alpha * 400 - 200;
 							mesh.position.y = beta * 400 - 200;
@@ -106,7 +106,7 @@
 
 				function addLabel( name, location ) {
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
+					const textGeo = new THREE.TextBufferGeometry( name, {
 
 						font: font,
 
@@ -116,8 +116,8 @@
 
 					} );
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
+					const textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+					const textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
 
@@ -139,11 +139,11 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+				const pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 				particleLight.add( pointLight );
 
 				//
@@ -159,7 +159,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 200;
 				controls.maxDistance = 2000;
 
@@ -190,7 +190,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.00025;
+				const timer = Date.now() * 0.00025;
 
 				//camera.position.x = Math.cos( timer ) * 800;
 				//camera.position.z = Math.sin( timer ) * 800;

examples/webgl_materials_variations_physical.html

@@ -21,12 +21,12 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
-			var particleLight;
+			let camera, scene, renderer;
+			let particleLight;
 
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 				init( font );
@@ -46,7 +46,7 @@
 
 				scene = new THREE.Scene();
 
-				var hdrCubeRenderTarget = null;
+				let hdrCubeRenderTarget = null;
 
 				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
@@ -59,24 +59,24 @@
 
 						// Materials
 
-						var cubeWidth = 400;
-						var numberOfSphersPerSide = 5;
-						var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
-						var stepSize = 1.0 / numberOfSphersPerSide;
+						const cubeWidth = 400;
+						const numberOfSphersPerSide = 5;
+						const sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
+						const stepSize = 1.0 / numberOfSphersPerSide;
 
-						var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
+						const geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-						var index = 0;
+						let index = 0;
 
-						for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
+						for ( let alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
-							for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
+							for ( let beta = 0; beta <= 1.0; beta += stepSize ) {
 
-								for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+								for ( let gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
-									var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, 0.25 );
+									const diffuseColor = new THREE.Color().setHSL( alpha, 0.5, 0.25 );
 
-									var material = new THREE.MeshPhysicalMaterial( {
+									const material = new THREE.MeshPhysicalMaterial( {
 										color: diffuseColor,
 										metalness: 0,
 										roughness: 0.5,
@@ -88,7 +88,7 @@
 
 									index ++;
 
-									var mesh = new THREE.Mesh( geometry, material );
+									const mesh = new THREE.Mesh( geometry, material );
 
 									mesh.position.x = alpha * 400 - 200;
 									mesh.position.y = beta * 400 - 200;
@@ -97,9 +97,11 @@
 									scene.add( mesh );
 
 								}
+
 								index ++;
 
 							}
+
 							index ++;
 
 						}
@@ -110,7 +112,7 @@
 
 				function addLabel( name, location ) {
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
+					const textGeo = new THREE.TextBufferGeometry( name, {
 
 						font: font,
 
@@ -120,8 +122,8 @@
 
 					} );
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
+					const textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+					const textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
 
@@ -143,11 +145,11 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+				const pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 				particleLight.add( pointLight );
 
 				//
@@ -163,7 +165,7 @@
 
 				//
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
 				//
@@ -171,7 +173,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 200;
 				controls.maxDistance = 2000;
 
@@ -201,7 +203,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.00025;
+				const timer = Date.now() * 0.00025;
 
 				//camera.position.x = Math.cos( timer ) * 800;
 				//camera.position.z = Math.sin( timer ) * 800;

examples/webgl_materials_variations_standard.html

@@ -21,12 +21,12 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
-			var particleLight;
+			let camera, scene, renderer;
+			let particleLight;
 
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 				init( font );
@@ -44,11 +44,11 @@
 
 				scene = new THREE.Scene();
 
-				var hdrCubeRenderTarget = null;
+				let hdrCubeRenderTarget = null;
 
 				// Materials
 
-				var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
+				let imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
 				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 				imgTexture.anisotropy = 16;
 				imgTexture = null;
@@ -62,26 +62,26 @@
 						hdrEquirect.dispose();
 						pmremGenerator.dispose();
 
-						var bumpScale = 1;
-						var cubeWidth = 400;
-						var numberOfSphersPerSide = 5;
-						var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
-						var stepSize = 1.0 / numberOfSphersPerSide;
+						const bumpScale = 1;
+						const cubeWidth = 400;
+						const numberOfSphersPerSide = 5;
+						const sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
+						const stepSize = 1.0 / numberOfSphersPerSide;
 
-						var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
+						const geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-						var index = 0;
+						let index = 0;
 
-						for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
+						for ( let alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
-							for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
+							for ( let beta = 0; beta <= 1.0; beta += stepSize ) {
 
-								for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+								for ( let gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 									// basic monochromatic energy preservation
-									var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
+									const diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
 
-									var material = new THREE.MeshStandardMaterial( {
+									const material = new THREE.MeshStandardMaterial( {
 										map: imgTexture,
 										bumpMap: imgTexture,
 										bumpScale: bumpScale,
@@ -93,7 +93,7 @@
 
 									index ++;
 
-									var mesh = new THREE.Mesh( geometry, material );
+									const mesh = new THREE.Mesh( geometry, material );
 
 									mesh.position.x = alpha * 400 - 200;
 									mesh.position.y = beta * 400 - 200;
@@ -115,7 +115,7 @@
 
 				function addLabel( name, location ) {
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
+					const textGeo = new THREE.TextBufferGeometry( name, {
 
 						font: font,
 
@@ -125,8 +125,8 @@
 
 					} );
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
+					const textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+					const textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
 
@@ -148,11 +148,11 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+				const pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 				particleLight.add( pointLight );
 
 				//
@@ -168,7 +168,7 @@
 
 				//
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
 				//
@@ -176,7 +176,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 200;
 				controls.maxDistance = 2000;
 
@@ -206,7 +206,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.00025;
+				const timer = Date.now() * 0.00025;
 
 				//camera.position.x = Math.cos( timer ) * 800;
 				//camera.position.z = Math.sin( timer ) * 800;

examples/webgl_materials_variations_toon.html

@@ -20,12 +20,12 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { OutlineEffect } from './jsm/effects/OutlineEffect.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer, effect;
-			var particleLight;
+			let camera, scene, renderer, effect;
+			let particleLight;
 
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 				init( font );
@@ -48,41 +48,41 @@
 
 				// Materials
 
-				var cubeWidth = 400;
-				var numberOfSphersPerSide = 5;
-				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
-				var stepSize = 1.0 / numberOfSphersPerSide;
+				const cubeWidth = 400;
+				const numberOfSphersPerSide = 5;
+				const sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
+				const stepSize = 1.0 / numberOfSphersPerSide;
 
-				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
+				const geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
-				for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
+				for ( let alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
 
-					var colors = new Uint8Array( alphaIndex + 2 );
+					const colors = new Uint8Array( alphaIndex + 2 );
 
-					for ( var c = 0; c <= colors.length; c ++ ) {
+					for ( let c = 0; c <= colors.length; c ++ ) {
 
 						colors[ c ] = ( c / colors.length ) * 256;
 
 					}
 
-					var gradientMap = new THREE.DataTexture( colors, colors.length, 1, THREE.LuminanceFormat );
+					const gradientMap = new THREE.DataTexture( colors, colors.length, 1, THREE.LuminanceFormat );
 					gradientMap.minFilter = THREE.NearestFilter;
 					gradientMap.magFilter = THREE.NearestFilter;
 					gradientMap.generateMipmaps = false;
 
-					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
+					for ( let beta = 0; beta <= 1.0; beta += stepSize ) {
 
-						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
+						for ( let gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 							// basic monochromatic energy preservation
-							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 );
+							const diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 );
 
-							var material = new THREE.MeshToonMaterial( {
+							const material = new THREE.MeshToonMaterial( {
 								color: diffuseColor,
 								gradientMap: gradientMap
 							} );
 
-							var mesh = new THREE.Mesh( geometry, material );
+							const mesh = new THREE.Mesh( geometry, material );
 
 							mesh.position.x = alpha * 400 - 200;
 							mesh.position.y = beta * 400 - 200;
@@ -98,7 +98,7 @@
 
 				function addLabel( name, location ) {
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
+					const textGeo = new THREE.TextBufferGeometry( name, {
 
 						font: font,
 
@@ -108,8 +108,8 @@
 
 					} );
 
-					var textMaterial = new THREE.MeshBasicMaterial();
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
+					const textMaterial = new THREE.MeshBasicMaterial();
+					const textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
 
@@ -131,7 +131,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x888888 ) );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+				const pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 				particleLight.add( pointLight );
 
 				//
@@ -149,7 +149,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 200;
 				controls.maxDistance = 2000;
 
@@ -180,7 +180,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.00025;
+				const timer = Date.now() * 0.00025;
 
 				particleLight.position.x = Math.sin( timer * 7 ) * 300;
 				particleLight.position.y = Math.cos( timer * 5 ) * 400;