Merge pull request #20503 from Mugen87/dev51

Examples: More clean up.

examples/webgl_animation_cloth.html

@@ -42,48 +42,48 @@
 			// http://cg.alexandra.dk/tag/spring-mass-system/
 			// Real-time Cloth Animation http://www.darwin3d.com/gamedev/articles/col0599.pdf
 
-			var params = {
+			const params = {
 				enableWind: true,
 				showBall: false,
 				togglePins: togglePins
 			};
 
-			var DAMPING = 0.03;
-			var DRAG = 1 - DAMPING;
-			var MASS = 0.1;
-			var restDistance = 25;
+			const DAMPING = 0.03;
+			const DRAG = 1 - DAMPING;
+			const MASS = 0.1;
+			const restDistance = 25;
 
-			var xSegs = 10;
-			var ySegs = 10;
+			const xSegs = 10;
+			const ySegs = 10;
 
-			var clothFunction = plane( restDistance * xSegs, restDistance * ySegs );
+			const clothFunction = plane( restDistance * xSegs, restDistance * ySegs );
 
-			var cloth = new Cloth( xSegs, ySegs );
+			const cloth = new Cloth( xSegs, ySegs );
 
-			var GRAVITY = 981 * 1.4;
-			var gravity = new THREE.Vector3( 0, - GRAVITY, 0 ).multiplyScalar( MASS );
+			const GRAVITY = 981 * 1.4;
+			const gravity = new THREE.Vector3( 0, - GRAVITY, 0 ).multiplyScalar( MASS );
 
 
-			var TIMESTEP = 18 / 1000;
-			var TIMESTEP_SQ = TIMESTEP * TIMESTEP;
+			const TIMESTEP = 18 / 1000;
+			const TIMESTEP_SQ = TIMESTEP * TIMESTEP;
 
-			var pins = [];
+			let pins = [];
 
-			var windForce = new THREE.Vector3( 0, 0, 0 );
+			const windForce = new THREE.Vector3( 0, 0, 0 );
 
-			var ballPosition = new THREE.Vector3( 0, - 45, 0 );
-			var ballSize = 60; //40
+			const ballPosition = new THREE.Vector3( 0, - 45, 0 );
+			const ballSize = 60; //40
 
-			var tmpForce = new THREE.Vector3();
+			const tmpForce = new THREE.Vector3();
 
 
 			function plane( width, height ) {
 
 				return function ( u, v, target ) {
 
-					var x = ( u - 0.5 ) * width;
-					var y = ( v + 0.5 ) * height;
-					var z = 0;
+					const x = ( u - 0.5 ) * width;
+					const y = ( v + 0.5 ) * height;
+					const z = 0;
 
 					target.set( x, y, z );
 
@@ -125,7 +125,7 @@
 
 			Particle.prototype.integrate = function ( timesq ) {
 
-				var newPos = this.tmp.subVectors( this.position, this.previous );
+				const newPos = this.tmp.subVectors( this.position, this.previous );
 				newPos.multiplyScalar( DRAG ).add( this.position );
 				newPos.add( this.a.multiplyScalar( timesq ) );
 
@@ -138,15 +138,15 @@
 			};
 
 
-			var diff = new THREE.Vector3();
+			const diff = new THREE.Vector3();
 
 			function satisfyConstraints( p1, p2, distance ) {
 
 				diff.subVectors( p2.position, p1.position );
-				var currentDist = diff.length();
+				const currentDist = diff.length();
 				if ( currentDist === 0 ) return; // prevents division by 0
-				var correction = diff.multiplyScalar( 1 - distance / currentDist );
-				var correctionHalf = correction.multiplyScalar( 0.5 );
+				const correction = diff.multiplyScalar( 1 - distance / currentDist );
+				const correctionHalf = correction.multiplyScalar( 0.5 );
 				p1.position.add( correctionHalf );
 				p2.position.sub( correctionHalf );
 
@@ -160,15 +160,13 @@
 				this.w = w;
 				this.h = h;
 
-				var particles = [];
-				var constraints = [];
-
-				var u, v;
+				const particles = [];
+				const constraints = [];
 
 				// Create particles
-				for ( v = 0; v <= h; v ++ ) {
+				for ( let v = 0; v <= h; v ++ ) {
 
-					for ( u = 0; u <= w; u ++ ) {
+					for ( let u = 0; u <= w; u ++ ) {
 
 						particles.push(
 							new Particle( u / w, v / h, 0, MASS )
@@ -180,9 +178,9 @@
 
 				// Structural
 
-				for ( v = 0; v < h; v ++ ) {
+				for ( let v = 0; v < h; v ++ ) {
 
-					for ( u = 0; u < w; u ++ ) {
+					for ( let u = 0; u < w; u ++ ) {
 
 						constraints.push( [
 							particles[ index( u, v ) ],
@@ -200,7 +198,7 @@
 
 				}
 
-				for ( u = w, v = 0; v < h; v ++ ) {
+				for ( let u = w, v = 0; v < h; v ++ ) {
 
 					constraints.push( [
 						particles[ index( u, v ) ],
@@ -211,7 +209,7 @@
 
 				}
 
-				for ( v = h, u = 0; u < w; u ++ ) {
+				for ( let v = h, u = 0; u < w; u ++ ) {
 
 					constraints.push( [
 						particles[ index( u, v ) ],
@@ -226,7 +224,7 @@
 				// the relaxed constraints model seems to be just fine
 				// using structural springs.
 				// Shear
-				// var diagonalDist = Math.sqrt(restDistance * restDistance * 2);
+				// const diagonalDist = Math.sqrt(restDistance * restDistance * 2);
 
 
 				// for (v=0;v<h;v++) {
@@ -263,28 +261,26 @@
 
 			function simulate( now ) {
 
-				var windStrength = Math.cos( now / 7000 ) * 20 + 40;
+				const windStrength = Math.cos( now / 7000 ) * 20 + 40;
 
 				windForce.set( Math.sin( now / 2000 ), Math.cos( now / 3000 ), Math.sin( now / 1000 ) );
 				windForce.normalize();
 				windForce.multiplyScalar( windStrength );
 
-				var i, j, il, particles, particle, constraints, constraint;
-
 				// Aerodynamics forces
 
-				if ( params.enableWind ) {
+				const particles = cloth.particles;
 
-					var indx;
-					var normal = new THREE.Vector3();
-					var indices = clothGeometry.index;
-					var normals = clothGeometry.attributes.normal;
+				if ( params.enableWind ) {
 
-					particles = cloth.particles;
+					let indx;
+					const normal = new THREE.Vector3();
+					const indices = clothGeometry.index;
+					const normals = clothGeometry.attributes.normal;
 
-					for ( i = 0, il = indices.count; i < il; i += 3 ) {
+					for ( let i = 0, il = indices.count; i < il; i += 3 ) {
 
-						for ( j = 0; j < 3; j ++ ) {
+						for ( let j = 0; j < 3; j ++ ) {
 
 							indx = indices.getX( i + j );
 							normal.fromBufferAttribute( normals, indx );
@@ -297,9 +293,9 @@
 
 				}
 
-				for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
+				for ( let i = 0, il = particles.length; i < il; i ++ ) {
 
-					particle = particles[ i ];
+					const particle = particles[ i ];
 					particle.addForce( gravity );
 
 					particle.integrate( TIMESTEP_SQ );
@@ -308,12 +304,12 @@
 
 				// Start Constraints
 
-				constraints = cloth.constraints;
-				il = constraints.length;
+				const constraints = cloth.constraints;
+				const il = constraints.length;
 
-				for ( i = 0; i < il; i ++ ) {
+				for ( let i = 0; i < il; i ++ ) {
 
-					constraint = constraints[ i ];
+					const constraint = constraints[ i ];
 					satisfyConstraints( constraint[ 0 ], constraint[ 1 ], constraint[ 2 ] );
 
 				}
@@ -327,10 +323,10 @@
 
 					sphere.visible = true;
 
-					for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
+					for ( let i = 0, il = particles.length; i < il; i ++ ) {
 
-						particle = particles[ i ];
-						var pos = particle.position;
+						const particle = particles[ i ];
+						const pos = particle.position;
 						diff.subVectors( pos, ballPosition );
 						if ( diff.length() < ballSize ) {
 
@@ -351,10 +347,10 @@
 
 				// Floor Constraints
 
-				for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
+				for ( let i = 0, il = particles.length; i < il; i ++ ) {
 
-					particle = particles[ i ];
-					pos = particle.position;
+					const particle = particles[ i ];
+					const pos = particle.position;
 					if ( pos.y < - 250 ) {
 
 						pos.y = - 250;
@@ -365,10 +361,10 @@
 
 				// Pin Constraints
 
-				for ( i = 0, il = pins.length; i < il; i ++ ) {
+				for ( let i = 0, il = pins.length; i < il; i ++ ) {
 
-					var xy = pins[ i ];
-					var p = particles[ xy ];
+					const xy = pins[ i ];
+					const p = particles[ xy ];
 					p.position.copy( p.original );
 					p.previous.copy( p.original );
 
@@ -379,8 +375,8 @@
 
 			/* testing cloth simulation */
 
-			var pinsFormation = [];
-			var pins = [ 6 ];
+			const pinsFormation = [];
+			pins = [ 6 ];
 
 			pinsFormation.push( pins );
 
@@ -404,12 +400,12 @@
 
 			}
 
-			var container, stats;
-			var camera, scene, renderer;
+			let container, stats;
+			let camera, scene, renderer;
 
-			var clothGeometry;
-			var sphere;
-			var object;
+			let clothGeometry;
+			let sphere;
+			let object;
 
 			init();
 			animate( 0 );
@@ -434,7 +430,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
-				var light = new THREE.DirectionalLight( 0xdfebff, 1 );
+				const light = new THREE.DirectionalLight( 0xdfebff, 1 );
 				light.position.set( 50, 200, 100 );
 				light.position.multiplyScalar( 1.3 );
 
@@ -443,7 +439,7 @@
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
 
-				var d = 300;
+				const d = 300;
 
 				light.shadow.camera.left = - d;
 				light.shadow.camera.right = d;
@@ -456,11 +452,11 @@
 
 				// cloth material
 
-				var loader = new THREE.TextureLoader();
-				var clothTexture = loader.load( 'textures/patterns/circuit_pattern.png' );
+				const loader = new THREE.TextureLoader();
+				const clothTexture = loader.load( 'textures/patterns/circuit_pattern.png' );
 				clothTexture.anisotropy = 16;
 
-				var clothMaterial = new THREE.MeshLambertMaterial( {
+				const clothMaterial = new THREE.MeshLambertMaterial( {
 					map: clothTexture,
 					side: THREE.DoubleSide,
 					alphaTest: 0.5
@@ -485,8 +481,8 @@
 
 				// sphere
 
-				var ballGeo = new THREE.SphereBufferGeometry( ballSize, 32, 16 );
-				var ballMaterial = new THREE.MeshLambertMaterial();
+				const ballGeo = new THREE.SphereBufferGeometry( ballSize, 32, 16 );
+				const ballMaterial = new THREE.MeshLambertMaterial();
 
 				sphere = new THREE.Mesh( ballGeo, ballMaterial );
 				sphere.castShadow = true;
@@ -496,15 +492,15 @@
 
 				// ground
 
-				var groundTexture = loader.load( 'textures/terrain/grasslight-big.jpg' );
+				const groundTexture = loader.load( 'textures/terrain/grasslight-big.jpg' );
 				groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
 				groundTexture.repeat.set( 25, 25 );
 				groundTexture.anisotropy = 16;
 				groundTexture.encoding = THREE.sRGBEncoding;
 
-				var groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
+				const groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
+				let mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
 				mesh.position.y = - 250;
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
@@ -512,39 +508,39 @@
 
 				// poles
 
-				var poleGeo = new THREE.BoxBufferGeometry( 5, 375, 5 );
-				var poleMat = new THREE.MeshLambertMaterial();
+				const poleGeo = new THREE.BoxBufferGeometry( 5, 375, 5 );
+				const poleMat = new THREE.MeshLambertMaterial();
 
-				var mesh = new THREE.Mesh( poleGeo, poleMat );
+				mesh = new THREE.Mesh( poleGeo, poleMat );
 				mesh.position.x = - 125;
 				mesh.position.y = - 62;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( poleGeo, poleMat );
+				mesh = new THREE.Mesh( poleGeo, poleMat );
 				mesh.position.x = 125;
 				mesh.position.y = - 62;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 255, 5, 5 ), poleMat );
+				mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 255, 5, 5 ), poleMat );
 				mesh.position.y = - 250 + ( 750 / 2 );
 				mesh.position.x = 0;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var gg = new THREE.BoxBufferGeometry( 10, 10, 10 );
-				var mesh = new THREE.Mesh( gg, poleMat );
+				const gg = new THREE.BoxBufferGeometry( 10, 10, 10 );
+				mesh = new THREE.Mesh( gg, poleMat );
 				mesh.position.y = - 250;
 				mesh.position.x = 125;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( gg, poleMat );
+				mesh = new THREE.Mesh( gg, poleMat );
 				mesh.position.y = - 250;
 				mesh.position.x = - 125;
 				mesh.receiveShadow = true;
@@ -564,7 +560,7 @@
 				renderer.shadowMap.enabled = true;
 
 				// controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.maxPolarAngle = Math.PI * 0.5;
 				controls.minDistance = 1000;
 				controls.maxDistance = 5000;
@@ -580,7 +576,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( params, 'enableWind' ).name( 'Enable wind' );
 				gui.add( params, 'showBall' ).name( 'Show ball' );
 				gui.add( params, 'togglePins' ).name( 'Toggle pins' );
@@ -588,7 +584,7 @@
 
 				if ( typeof TESTING !== 'undefined' ) {
 
-					for ( var i = 0; i < 50; i ++ ) {
+					for ( let i = 0; i < 50; i ++ ) {
 
 						simulate( 500 - 10 * i );
 
@@ -622,11 +618,11 @@
 
 			function render() {
 
-				var p = cloth.particles;
+				const p = cloth.particles;
 
-				for ( var i = 0, il = p.length; i < il; i ++ ) {
+				for ( let i = 0, il = p.length; i < il; i ++ ) {
 
-					var v = p[ i ].position;
+					const v = p[ i ].position;
 
 					clothGeometry.attributes.position.setXYZ( i, v.x, v.y, v.z );
 
@@ -644,4 +640,4 @@
 
 		</script>
 	</body>
-</html>
+</html>

examples/webgl_animation_keyframes.html

@@ -37,28 +37,27 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
-			var scene, camera, dirLight, stats;
-			var renderer, mixer, controls;
+			let mixer;
 
-			var clock = new THREE.Clock();
-			var container = document.getElementById( 'container' );
+			const clock = new THREE.Clock();
+			const container = document.getElementById( 'container' );
 
-			stats = new Stats();
+			const stats = new Stats();
 			container.appendChild( stats.dom );
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.outputEncoding = THREE.sRGBEncoding;
 			container.appendChild( renderer.domElement );
 
-			scene = new THREE.Scene();
+			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xbfe3dd );
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 			camera.position.set( 5, 2, 8 );
 
-			controls = new OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.target.set( 0, 0.5, 0 );
 			controls.update();
 			controls.enablePan = false;
@@ -66,27 +65,27 @@
 
 			scene.add( new THREE.HemisphereLight( 0xffffff, 0x000000, 0.4 ) );
 
-			dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+			const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
 			dirLight.position.set( 5, 2, 8 );
 			scene.add( dirLight );
 
 			// envmap
-			var path = 'textures/cube/Park2/';
-			var format = '.jpg';
-			var envMap = new THREE.CubeTextureLoader().load( [
+			const path = 'textures/cube/Park2/';
+			const format = '.jpg';
+			const envMap = new THREE.CubeTextureLoader().load( [
 				path + 'posx' + format, path + 'negx' + format,
 				path + 'posy' + format, path + 'negy' + format,
 				path + 'posz' + format, path + 'negz' + format
 			] );
 
-			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/LittlestTokyo.glb', function ( gltf ) {
 
-				var model = gltf.scene;
+				const model = gltf.scene;
 				model.position.set( 1, 1, 0 );
 				model.scale.set( 0.01, 0.01, 0.01 );
 				model.traverse( function ( child ) {
@@ -123,7 +122,7 @@
 
 				requestAnimationFrame( animate );
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				mixer.update( delta );
 

examples/webgl_animation_multiple.html

@@ -24,11 +24,11 @@
 			//////////////////////////////
 			// Global objects
 			//////////////////////////////
-			var worldScene = null; // THREE.Scene where it all will be rendered
-			var renderer = null;
-			var camera = null;
-			var clock = null;
-			var mixers = []; // All the THREE.AnimationMixer objects for all the animations in the scene
+			let worldScene = null; // THREE.Scene where it all will be rendered
+			let renderer = null;
+			let camera = null;
+			let clock = null;
+			const mixers = []; // All the THREE.AnimationMixer objects for all the animations in the scene
 			//////////////////////////////
 
 
@@ -40,7 +40,7 @@
 			// A model may have multiple SkinnedMesh objects as well as several rigs (armatures). Units will define which
 			// meshes, armatures and animations to use. We will load the whole scene for each object and clone it for each unit.
 			// Models are from https://www.mixamo.com/
-			var MODELS = [
+			const MODELS = [
 				{ name: "Soldier" },
 				{ name: "Parrot" },
 				// { name: "RiflePunch" },
@@ -48,7 +48,7 @@
 
 			// Here we define instances of the models that we want to place in the scene, their position, scale and the animations
 			// that must be played.
-			var UNITS = [
+			const UNITS = [
 				{
 					modelName: "Soldier", // Will use the 3D model from file models/gltf/Soldier.glb
 					meshName: "vanguard_Mesh", // Name of the main mesh to animate
@@ -91,7 +91,7 @@
 			//////////////////////////////
 			// The main setup happens here
 			//////////////////////////////
-			var numLoadedModels = 0;
+			let numLoadedModels = 0;
 			initScene();
 			initRenderer();
 			loadModels();
@@ -109,9 +109,9 @@
 			 */
 			function loadModels() {
 
-				for ( var i = 0; i < MODELS.length; ++ i ) {
+				for ( let i = 0; i < MODELS.length; ++ i ) {
 
-					var m = MODELS[ i ];
+					const m = MODELS[ i ];
 
 					loadGltfModel( m, function () {
 
@@ -136,25 +136,25 @@
 			 */
 			function instantiateUnits() {
 
-				var numSuccess = 0;
+				let numSuccess = 0;
 
-				for ( var i = 0; i < UNITS.length; ++ i ) {
+				for ( let i = 0; i < UNITS.length; ++ i ) {
 
-					var u = UNITS[ i ];
-					var model = getModelByName( u.modelName );
+					const u = UNITS[ i ];
+					const model = getModelByName( u.modelName );
 
 					if ( model ) {
 
-						var clonedScene = SkeletonUtils.clone( model.scene );
+						const clonedScene = SkeletonUtils.clone( model.scene );
 
 						if ( clonedScene ) {
 
 							// THREE.Scene is cloned properly, let's find one mesh and launch animation for it
-							var clonedMesh = clonedScene.getObjectByName( u.meshName );
+							const clonedMesh = clonedScene.getObjectByName( u.meshName );
 
 							if ( clonedMesh ) {
 
-								var mixer = startAnimation( clonedMesh, model.animations, u.animationName );
+								const mixer = startAnimation( clonedMesh, model.animations, u.animationName );
 
 								// Save the animation mixer in the list, will need it in the animation loop
 								mixers.push( mixer );
@@ -211,12 +211,12 @@
 			 */
 			function startAnimation( skinnedMesh, animations, animationName ) {
 
-				var mixer = new THREE.AnimationMixer( skinnedMesh );
-				var clip = THREE.AnimationClip.findByName( animations, animationName );
+				const mixer = new THREE.AnimationMixer( skinnedMesh );
+				const clip = THREE.AnimationClip.findByName( animations, animationName );
 
 				if ( clip ) {
 
-					var action = mixer.clipAction( clip );
+					const action = mixer.clipAction( clip );
 					action.play();
 
 				}
@@ -232,7 +232,7 @@
 			 */
 			function getModelByName( name ) {
 
-				for ( var i = 0; i < MODELS.length; ++ i ) {
+				for ( let i = 0; i < MODELS.length; ++ i ) {
 
 					if ( MODELS[ i ].name === name ) {
 
@@ -253,12 +253,12 @@
 			 */
 			function loadGltfModel( model, onLoaded ) {
 
-				var loader = new GLTFLoader();
-				var modelName = "models/gltf/" + model.name + ".glb";
+				const loader = new GLTFLoader();
+				const modelName = "models/gltf/" + model.name + ".glb";
 
 				loader.load( modelName, function ( gltf ) {
 
-					var scene = gltf.scene;
+					const scene = gltf.scene;
 
 					model.animations = gltf.animations;
 					model.scene = scene;
@@ -292,11 +292,11 @@
 
 				// Get the time elapsed since the last frame
 
-				var mixerUpdateDelta = clock.getDelta();
+				const mixerUpdateDelta = clock.getDelta();
 
 				// Update all the animation frames
 
-				for ( var i = 0; i < mixers.length; ++ i ) {
+				for ( let i = 0; i < mixers.length; ++ i ) {
 
 					mixers[ i ].update( mixerUpdateDelta );
 
@@ -316,7 +316,7 @@
 			 */
 			function initRenderer() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -342,11 +342,11 @@
 				worldScene.background = new THREE.Color( 0xa0a0a0 );
 				worldScene.fog = new THREE.Fog( 0xa0a0a0, 10, 22 );
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 20, 0 );
 				worldScene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( - 3, 10, - 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 10;
@@ -358,7 +358,7 @@
 				worldScene.add( dirLight );
 
 				// ground
-				var groundMesh = new THREE.Mesh(
+				const groundMesh = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 40, 40 ),
 					new THREE.MeshPhongMaterial( {
 						color: 0x999999,

examples/webgl_animation_skinning_additive_blending.html

@@ -36,12 +36,12 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var scene, renderer, camera, stats;
-			var model, skeleton, mixer, clock;
+			let scene, renderer, camera, stats;
+			let model, skeleton, mixer, clock;
 
-			var crossFadeControls = [];
+			const crossFadeControls = [];
 
-			var currentBaseAction = 'idle';
+			let currentBaseAction = 'idle';
 			const allActions = [];
 			const baseActions = {
 				idle: { weight: 1 },
@@ -54,24 +54,24 @@
 				agree: { weight: 0 },
 				headShake: { weight: 0 }
 			};
-			var panelSettings, numAnimations;
+			let panelSettings, numAnimations;
 
 			init();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				clock = new THREE.Clock();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( 3, 10, 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 2;
@@ -84,12 +84,12 @@
 
 				// ground
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( 'models/gltf/Xbot.glb', function ( gltf ) {
 
 					model = gltf.scene;
@@ -105,7 +105,7 @@
 					skeleton.visible = false;
 					scene.add( skeleton );
 
-					var animations = gltf.animations;
+					const animations = gltf.animations;
 					mixer = new THREE.AnimationMixer( model );
 
 					numAnimations = animations.length;
@@ -160,7 +160,7 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100 );
 				camera.position.set( - 1, 2, 3 );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.enablePan = false;
 				controls.enableZoom = false;
 				controls.target.set( 0, 1, 0 );
@@ -175,11 +175,11 @@
 
 			function createPanel() {
 
-				var panel = new GUI( { width: 310 } );
+				const panel = new GUI( { width: 310 } );
 
-				var folder1 = panel.addFolder( 'Base Actions' );
-				var folder2 = panel.addFolder( 'Additive Action Weights' );
-				var folder3 = panel.addFolder( 'General Speed' );
+				const folder1 = panel.addFolder( 'Base Actions' );
+				const folder2 = panel.addFolder( 'Additive Action Weights' );
+				const folder3 = panel.addFolder( 'General Speed' );
 
 				panelSettings = {
 					'modify time scale': 1.0
@@ -404,7 +404,7 @@
 
 				// Get the time elapsed since the last frame, used for mixer update
 
-				var mixerUpdateDelta = clock.getDelta();
+				const mixerUpdateDelta = clock.getDelta();
 
 				// Update the animation mixer, the stats panel, and render this frame
 

examples/webgl_animation_skinning_blending.html

@@ -41,23 +41,23 @@
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var scene, renderer, camera, stats;
-			var model, skeleton, mixer, clock;
+			let scene, renderer, camera, stats;
+			let model, skeleton, mixer, clock;
 
-			var crossFadeControls = [];
+			const crossFadeControls = [];
 
-			var idleAction, walkAction, runAction;
-			var idleWeight, walkWeight, runWeight;
-			var actions, settings;
+			let idleAction, walkAction, runAction;
+			let idleWeight, walkWeight, runWeight;
+			let actions, settings;
 
-			var singleStepMode = false;
-			var sizeOfNextStep = 0;
+			let singleStepMode = false;
+			let sizeOfNextStep = 0;
 
 			init();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 1, 2, - 3 );
@@ -69,11 +69,11 @@
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( - 3, 10, - 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 2;
@@ -88,12 +88,12 @@
 
 				// ground
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( 'models/gltf/Soldier.glb', function ( gltf ) {
 
 					model = gltf.scene;
@@ -118,7 +118,7 @@
 
 					//
 
-					var animations = gltf.animations;
+					const animations = gltf.animations;
 
 					mixer = new THREE.AnimationMixer( model );
 
@@ -150,14 +150,14 @@
 
 			function createPanel() {
 
-				var panel = new GUI( { width: 310 } );
+				const panel = new GUI( { width: 310 } );
 
-				var folder1 = panel.addFolder( 'Visibility' );
-				var folder2 = panel.addFolder( 'Activation/Deactivation' );
-				var folder3 = panel.addFolder( 'Pausing/Stepping' );
-				var folder4 = panel.addFolder( 'Crossfading' );
-				var folder5 = panel.addFolder( 'Blend Weights' );
-				var folder6 = panel.addFolder( 'General Speed' );
+				const folder1 = panel.addFolder( 'Visibility' );
+				const folder2 = panel.addFolder( 'Activation/Deactivation' );
+				const folder3 = panel.addFolder( 'Pausing/Stepping' );
+				const folder4 = panel.addFolder( 'Crossfading' );
+				const folder5 = panel.addFolder( 'Blend Weights' );
+				const folder6 = panel.addFolder( 'General Speed' );
 
 				settings = {
 					'show model': true,
@@ -357,7 +357,7 @@
 
 				// Switch default / custom crossfade duration (according to the user's choice)
 
-				var duration = setCrossFadeDuration( defaultDuration );
+				const duration = setCrossFadeDuration( defaultDuration );
 
 				// Make sure that we don't go on in singleStepMode, and that all actions are unpaused
 
@@ -508,7 +508,7 @@
 
 				// Get the time elapsed since the last frame, used for mixer update (if not in single step mode)
 
-				var mixerUpdateDelta = clock.getDelta();
+				let mixerUpdateDelta = clock.getDelta();
 
 				// If in single step mode, make one step and then do nothing (until the user clicks again)
 

examples/webgl_animation_skinning_morph.html

@@ -43,10 +43,10 @@
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var container, stats, clock, gui, mixer, actions, activeAction, previousAction;
-			var camera, scene, renderer, model, face;
+			let container, stats, clock, gui, mixer, actions, activeAction, previousAction;
+			let camera, scene, renderer, model, face;
 
-			var api = { state: 'Walking' };
+			const api = { state: 'Walking' };
 
 			init();
 			animate();
@@ -68,28 +68,28 @@
 
 				// lights
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
-				light.position.set( 0, 20, 0 );
-				scene.add( light );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				hemiLight.position.set( 0, 20, 0 );
+				scene.add( hemiLight );
 
-				light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 20, 10 );
-				scene.add( light );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				dirLight.position.set( 0, 20, 10 );
+				scene.add( dirLight );
 
 				// 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;
 				scene.add( mesh );
 
-				var grid = new THREE.GridHelper( 200, 40, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 200, 40, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				scene.add( grid );
 
 				// model
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( 'models/gltf/RobotExpressive/RobotExpressive.glb', function ( gltf ) {
 
 					model = gltf.scene;
@@ -119,8 +119,8 @@
 
 			function createGUI( model, animations ) {
 
-				var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];
-				var emotes = [ 'Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp' ];
+				const states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];
+				const emotes = [ 'Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp' ];
 
 				gui = new GUI();
 
@@ -128,10 +128,10 @@
 
 				actions = {};
 
-				for ( var i = 0; i < animations.length; i ++ ) {
+				for ( let i = 0; i < animations.length; i ++ ) {
 
-					var clip = animations[ i ];
-					var action = mixer.clipAction( clip );
+					const clip = animations[ i ];
+					const action = mixer.clipAction( clip );
 					actions[ clip.name ] = action;
 
 					if ( emotes.indexOf( clip.name ) >= 0 || states.indexOf( clip.name ) >= 4 ) {
@@ -145,9 +145,9 @@
 
 				// states
 
-				var statesFolder = gui.addFolder( 'States' );
+				const statesFolder = gui.addFolder( 'States' );
 
-				var clipCtrl = statesFolder.add( api, 'state' ).options( states );
+				const clipCtrl = statesFolder.add( api, 'state' ).options( states );
 
 				clipCtrl.onChange( function () {
 
@@ -159,7 +159,7 @@
 
 				// emotes
 
-				var emoteFolder = gui.addFolder( 'Emotes' );
+				const emoteFolder = gui.addFolder( 'Emotes' );
 
 				function createEmoteCallback( name ) {
 
@@ -183,7 +183,7 @@
 
 				}
 
-				for ( var i = 0; i < emotes.length; i ++ ) {
+				for ( let i = 0; i < emotes.length; i ++ ) {
 
 					createEmoteCallback( emotes[ i ] );
 
@@ -195,10 +195,10 @@
 
 				face = model.getObjectByName( 'Head_4' );
 
-				var expressions = Object.keys( face.morphTargetDictionary );
-				var expressionFolder = gui.addFolder( 'Expressions' );
+				const expressions = Object.keys( face.morphTargetDictionary );
+				const expressionFolder = gui.addFolder( 'Expressions' );
 
-				for ( var i = 0; i < expressions.length; i ++ ) {
+				for ( let i = 0; i < expressions.length; i ++ ) {
 
 					expressionFolder.add( face.morphTargetInfluences, i, 0, 1, 0.01 ).name( expressions[ i ] );
 
@@ -244,7 +244,7 @@
 
 			function animate() {
 
-				var dt = clock.getDelta();
+				const dt = clock.getDelta();
 
 				if ( mixer ) mixer.update( dt );
 

examples/webgl_buffergeometry.html

@@ -17,11 +17,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var mesh;
+			let mesh;
 
 			init();
 			animate();
@@ -43,55 +43,55 @@
 
 				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
-				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
 				//
 
-				var triangles = 160000;
+				const triangles = 160000;
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
-				var positions = [];
-				var normals = [];
-				var colors = [];
+				const positions = [];
+				const normals = [];
+				const colors = [];
 
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				var n = 800, n2 = n / 2;	// triangles spread in the cube
-				var d = 12, d2 = d / 2;	// individual triangle size
+				const n = 800, n2 = n / 2;	// triangles spread in the cube
+				const d = 12, d2 = d / 2;	// individual triangle size
 
-				var pA = new THREE.Vector3();
-				var pB = new THREE.Vector3();
-				var pC = new THREE.Vector3();
+				const pA = new THREE.Vector3();
+				const pB = new THREE.Vector3();
+				const pC = new THREE.Vector3();
 
-				var cb = new THREE.Vector3();
-				var ab = new THREE.Vector3();
+				const cb = new THREE.Vector3();
+				const ab = new THREE.Vector3();
 
-				for ( var i = 0; i < triangles; i ++ ) {
+				for ( let i = 0; i < triangles; i ++ ) {
 
 					// positions
 
-					var x = Math.random() * n - n2;
-					var y = Math.random() * n - n2;
-					var z = Math.random() * n - n2;
+					const x = Math.random() * n - n2;
+					const y = Math.random() * n - n2;
+					const z = Math.random() * n - n2;
 
-					var ax = x + Math.random() * d - d2;
-					var ay = y + Math.random() * d - d2;
-					var az = z + Math.random() * d - d2;
+					const ax = x + Math.random() * d - d2;
+					const ay = y + Math.random() * d - d2;
+					const az = z + Math.random() * d - d2;
 
-					var bx = x + Math.random() * d - d2;
-					var by = y + Math.random() * d - d2;
-					var bz = z + Math.random() * d - d2;
+					const bx = x + Math.random() * d - d2;
+					const by = y + Math.random() * d - d2;
+					const bz = z + Math.random() * d - d2;
 
-					var cx = x + Math.random() * d - d2;
-					var cy = y + Math.random() * d - d2;
-					var cz = z + Math.random() * d - d2;
+					const cx = x + Math.random() * d - d2;
+					const cy = y + Math.random() * d - d2;
+					const cz = z + Math.random() * d - d2;
 
 					positions.push( ax, ay, az );
 					positions.push( bx, by, bz );
@@ -109,9 +109,9 @@
 
 					cb.normalize();
 
-					var nx = cb.x;
-					var ny = cb.y;
-					var nz = cb.z;
+					const nx = cb.x;
+					const ny = cb.y;
+					const nz = cb.z;
 
 					normals.push( nx, ny, nz );
 					normals.push( nx, ny, nz );
@@ -119,9 +119,9 @@
 
 					// colors
 
-					var vx = ( x / n ) + 0.5;
-					var vy = ( y / n ) + 0.5;
-					var vz = ( z / n ) + 0.5;
+					const vx = ( x / n ) + 0.5;
+					const vy = ( y / n ) + 0.5;
+					const vz = ( z / n ) + 0.5;
 
 					color.setRGB( vx, vy, vz );
 
@@ -143,7 +143,7 @@
 
 				geometry.computeBoundingSphere();
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
 					side: THREE.DoubleSide, vertexColors: true
 				} );
@@ -193,7 +193,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;
 				mesh.rotation.y = time * 0.5;

examples/webgl_buffergeometry_compression.html

@@ -23,16 +23,16 @@
 			import { TeapotBufferGeometry } from './jsm/geometries/TeapotBufferGeometry.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var statsEnabled = true;
+			const statsEnabled = true;
 
-			var container, stats, gui;
+			let container, stats, gui;
 
-			var camera, scene, renderer, controls;
+			let camera, scene, renderer, controls;
 
-			var lights = [];
+			const lights = [];
 
 			// options
-			var data = {
+			const data = {
 				"model": "Icosahedron",
 				"wireframe": false,
 				"texture": false,
@@ -45,17 +45,17 @@
 
 				"totalGPUMemory": "0 bytes"
 			};
-			var memoryDisplay;
+			let memoryDisplay;
 
 			// geometry params
-			var radius = 100;
+			const radius = 100;
 
 			// materials
-			var lineMaterial = new THREE.LineBasicMaterial( { color: 0xaaaaaa, transparent: true, opacity: 0.8 } );
-			var meshMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x111111 } );
+			const lineMaterial = new THREE.LineBasicMaterial( { color: 0xaaaaaa, transparent: true, opacity: 0.8 } );
+			const meshMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x111111 } );
 
 			// texture
-			var texture = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
+			const texture = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 			texture.wrapS = THREE.RepeatWrapping;
 			texture.wrapT = THREE.RepeatWrapping;
 
@@ -106,10 +106,10 @@
 
 				//
 
-				var geom = newGeometry( data );
+				let geom = newGeometry( data );
 
-				var mesh = new THREE.Mesh( geom, meshMaterial );
-				var lineSegments = new THREE.LineSegments( new THREE.WireframeGeometry( geom ), lineMaterial );
+				const mesh = new THREE.Mesh( geom, meshMaterial );
+				const lineSegments = new THREE.LineSegments( new THREE.WireframeGeometry( geom ), lineMaterial );
 				lineSegments.visible = data.wireframe;
 
 				scene.add( mesh );
@@ -156,7 +156,7 @@
 
 				}
 
-				var folder = gui.addFolder( 'Scene' );
+				let folder = gui.addFolder( 'Scene' );
 				folder.add( data, 'model', [ "Icosahedron", "Cylinder", "TorusKnot", "Teapot" ] ).onChange( generateGeometry );
 				folder.add( data, 'wireframe', false ).onChange( updateLineSegments );
 				folder.add( data, 'texture', false ).onChange( generateGeometry );
@@ -210,7 +210,7 @@
 
 				lights.forEach( light => {
 
-					var direction = light.position.clone();
+					const direction = light.position.clone();
 					direction.applyAxisAngle( new THREE.Vector3( 1, 1, 0 ), data.rotationSpeed / 180 * Math.PI );
 					light.position.add( direction.sub( light.position ) );
 

examples/webgl_buffergeometry_constructed_from_geometry.html

@@ -20,7 +20,7 @@
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
-			var camera, scene, renderer, controls, stats;
+			let camera, scene, renderer, controls, stats;
 
 			init();
 			animate();
@@ -45,7 +45,7 @@
 
 				scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
 
-				var light = new THREE.PointLight( 0xffffff, 0.7 );
+				const light = new THREE.PointLight( 0xffffff, 0.7 );
 				camera.add( light );
 
 				createScene();
@@ -59,8 +59,8 @@
 
 			function createGeometry() {
 
-				var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
-				var x = 0, y = 0;
+				const heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
+				const x = 0, y = 0;
 
 				heartShape.moveTo( x + 25, y + 25 );
 				heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
@@ -70,7 +70,7 @@
 				heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
 				heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
 
-				var extrudeSettings = {
+				const extrudeSettings = {
 					depth: 16,
 					bevelEnabled: true,
 					bevelSegments: 1,
@@ -79,7 +79,7 @@
 					bevelThickness: 1
 				};
 
-				var geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
+				const geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
 				geometry.rotateX( Math.PI );
 				geometry.scale( 0.4, 0.4, 0.4 );
 
@@ -89,25 +89,25 @@
 
 			function createScene() {
 
-				var bufferGeometry = new THREE.BufferGeometry();
+				const bufferGeometry = new THREE.BufferGeometry();
 
-				var radius = 125;
-				var count = 80;
+				const radius = 125;
+				const count = 80;
 
-				var positions = [];
-				var normals = [];
-				var colors = [];
+				const positions = [];
+				const normals = [];
+				const colors = [];
 
-				var vector = new THREE.Vector3();
+				const vector = new THREE.Vector3();
 
-				var color = new THREE.Color( 0xffffff );
-				var heartGeometry = createGeometry();
-				var geometry = new THREE.Geometry();
+				const color = new THREE.Color( 0xffffff );
+				const heartGeometry = createGeometry();
+				const geometry = new THREE.Geometry();
 
-				for ( var i = 1, l = count; i <= l; i ++ ) {
+				for ( let i = 1, l = count; i <= l; i ++ ) {
 
-					var phi = Math.acos( - 1 + ( 2 * i ) / l );
-					var theta = Math.sqrt( l * Math.PI ) * phi;
+					const phi = Math.acos( - 1 + ( 2 * i ) / l );
+					const theta = Math.sqrt( l * Math.PI ) * phi;
 
 					vector.setFromSphericalCoords( radius, phi, theta );
 
@@ -157,9 +157,9 @@
 				bufferGeometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
 				bufferGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				var material = new THREE.MeshPhongMaterial( { shininess: 80, vertexColors: true } );
+				const material = new THREE.MeshPhongMaterial( { shininess: 80, vertexColors: true } );
 
-				var mesh = new THREE.Mesh( bufferGeometry, material );
+				const mesh = new THREE.Mesh( bufferGeometry, material );
 				scene.add( mesh );
 
 			}

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -52,11 +52,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var renderer, scene, camera, stats;
+			let renderer, scene, camera, stats;
 
-			var particleSystem, uniforms, geometry;
+			let particleSystem, uniforms, geometry;
 
-			var particles = 100000;
+			const particles = 100000;
 
 			init();
 			animate();
@@ -74,7 +74,7 @@
 
 				};
 
-				var shaderMaterial = new THREE.ShaderMaterial( {
+				const shaderMaterial = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
@@ -88,17 +88,17 @@
 				} );
 
 
-				var radius = 200;
+				const radius = 200;
 
 				geometry = new THREE.BufferGeometry();
 
-				var positions = [];
-				var colors = [];
-				var sizes = [];
+				const positions = [];
+				const colors = [];
+				const sizes = [];
 
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				for ( var i = 0; i < particles; i ++ ) {
+				for ( let i = 0; i < particles; i ++ ) {
 
 					positions.push( ( Math.random() * 2 - 1 ) * radius );
 					positions.push( ( Math.random() * 2 - 1 ) * radius );
@@ -124,7 +124,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -156,13 +156,13 @@
 
 			function render() {
 
-				var time = Date.now() * 0.005;
+				const time = Date.now() * 0.005;
 
 				particleSystem.rotation.z = 0.01 * time;
 
-				var sizes = geometry.attributes.size.array;
+				const sizes = geometry.attributes.size.array;
 
-				for ( var i = 0; i < particles; i ++ ) {
+				for ( let i = 0; i < particles; i ++ ) {
 
 					sizes[ i ] = 10 * ( 1 + Math.sin( 0.1 * i + time ) );
 

examples/webgl_buffergeometry_drawrange.html

@@ -23,22 +23,22 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var group;
-			var container, stats;
-			var particlesData = [];
-			var camera, scene, renderer;
-			var positions, colors;
-			var particles;
-			var pointCloud;
-			var particlePositions;
-			var linesMesh;
-
-			var maxParticleCount = 1000;
-			var particleCount = 500;
-			var r = 800;
-			var rHalf = r / 2;
-
-			var effectController = {
+			let group;
+			let container, stats;
+			const particlesData = [];
+			let camera, scene, renderer;
+			let positions, colors;
+			let particles;
+			let pointCloud;
+			let particlePositions;
+			let linesMesh;
+
+			const maxParticleCount = 1000;
+			let particleCount = 500;
+			const r = 800;
+			const rHalf = r / 2;
+
+			const effectController = {
 				showDots: true,
 				showLines: true,
 				minDistance: 150,
@@ -52,7 +52,7 @@
 
 			function initGUI() {
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( effectController, "showDots" ).onChange( function ( value ) {
 
@@ -85,7 +85,7 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
 				camera.position.z = 1750;
 
-				var controls = new OrbitControls( camera, container );
+				const controls = new OrbitControls( camera, container );
 				controls.minDistance = 1000;
 				controls.maxDistance = 3000;
 
@@ -95,18 +95,18 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( r, r, r ) ) );
+				const helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( r, r, r ) ) );
 				helper.material.color.setHex( 0x101010 );
 				helper.material.blending = THREE.AdditiveBlending;
 				helper.material.transparent = true;
 				group.add( helper );
 
-				var segments = maxParticleCount * maxParticleCount;
+				const segments = maxParticleCount * maxParticleCount;
 
 				positions = new Float32Array( segments * 3 );
 				colors = new Float32Array( segments * 3 );
 
-				var pMaterial = new THREE.PointsMaterial( {
+				const pMaterial = new THREE.PointsMaterial( {
 					color: 0xFFFFFF,
 					size: 3,
 					blending: THREE.AdditiveBlending,
@@ -117,11 +117,11 @@
 				particles = new THREE.BufferGeometry();
 				particlePositions = new Float32Array( maxParticleCount * 3 );
 
-				for ( var i = 0; i < maxParticleCount; i ++ ) {
+				for ( let i = 0; i < maxParticleCount; i ++ ) {
 
-					var x = Math.random() * r - r / 2;
-					var y = Math.random() * r - r / 2;
-					var z = Math.random() * r - r / 2;
+					const x = Math.random() * r - r / 2;
+					const y = Math.random() * r - r / 2;
+					const z = Math.random() * r - r / 2;
 
 					particlePositions[ i * 3 ] = x;
 					particlePositions[ i * 3 + 1 ] = y;
@@ -142,7 +142,7 @@
 				pointCloud = new THREE.Points( particles, pMaterial );
 				group.add( pointCloud );
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setUsage( THREE.DynamicDrawUsage ) );
 				geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setUsage( THREE.DynamicDrawUsage ) );
@@ -151,7 +151,7 @@
 
 				geometry.setDrawRange( 0, 0 );
 
-				var material = new THREE.LineBasicMaterial( {
+				const material = new THREE.LineBasicMaterial( {
 					vertexColors: true,
 					blending: THREE.AdditiveBlending,
 					transparent: true
@@ -189,17 +189,17 @@
 
 			function animate() {
 
-				var vertexpos = 0;
-				var colorpos = 0;
-				var numConnected = 0;
+				let vertexpos = 0;
+				let colorpos = 0;
+				let numConnected = 0;
 
-				for ( var i = 0; i < particleCount; i ++ )
+				for ( let i = 0; i < particleCount; i ++ )
 					particlesData[ i ].numConnections = 0;
 
-				for ( var i = 0; i < particleCount; i ++ ) {
+				for ( let i = 0; i < particleCount; i ++ ) {
 
 					// get the particle
-					var particleData = particlesData[ i ];
+					const particleData = particlesData[ i ];
 
 					particlePositions[ i * 3 ] += particleData.velocity.x;
 					particlePositions[ i * 3 + 1 ] += particleData.velocity.y;
@@ -218,23 +218,23 @@
 						continue;
 
 					// Check collision
-					for ( var j = i + 1; j < particleCount; j ++ ) {
+					for ( let j = i + 1; j < particleCount; j ++ ) {
 
-						var particleDataB = particlesData[ j ];
+						const particleDataB = particlesData[ j ];
 						if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections )
 							continue;
 
-						var dx = particlePositions[ i * 3 ] - particlePositions[ j * 3 ];
-						var dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ];
-						var dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ];
-						var dist = Math.sqrt( dx * dx + dy * dy + dz * dz );
+						const dx = particlePositions[ i * 3 ] - particlePositions[ j * 3 ];
+						const dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ];
+						const dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ];
+						const dist = Math.sqrt( dx * dx + dy * dy + dz * dz );
 
 						if ( dist < effectController.minDistance ) {
 
 							particleData.numConnections ++;
 							particleDataB.numConnections ++;
 
-							var alpha = 1.0 - dist / effectController.minDistance;
+							const alpha = 1.0 - dist / effectController.minDistance;
 
 							positions[ vertexpos ++ ] = particlePositions[ i * 3 ];
 							positions[ vertexpos ++ ] = particlePositions[ i * 3 + 1 ];
@@ -276,7 +276,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				group.rotation.y = time * 0.1;
 				renderer.render( scene, camera );

examples/webgl_buffergeometry_glbufferattribute.html

@@ -17,14 +17,14 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var points;
+			let points;
 
-			var particles = 300000;
-			var drawCount = 10000;
+			const particles = 300000;
+			let drawCount = 10000;
 
 			init();
 			animate();
@@ -52,32 +52,32 @@
 
 				//
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
-				var positions = [];
-				var positions2 = [];
-				var colors = [];
+				const positions = [];
+				const positions2 = [];
+				const colors = [];
 
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				var n = 1000, n2 = n / 2; // particles spread in the cube
+				const n = 1000, n2 = n / 2; // particles spread in the cube
 
-				for ( var i = 0; i < particles; i ++ ) {
+				for ( let i = 0; i < particles; i ++ ) {
 
 					// positions
 
-					var x = Math.random() * n - n2;
-					var y = Math.random() * n - n2;
-					var z = Math.random() * n - n2;
+					const x = Math.random() * n - n2;
+					const y = Math.random() * n - n2;
+					const z = Math.random() * n - n2;
 
 					positions.push( x, y, z );
 					positions2.push( z * 0.3, x * 0.3, y * 0.3 );
 
 					// colors
 
-					var vx = ( x / n ) + 0.5;
-					var vy = ( y / n ) + 0.5;
-					var vz = ( z / n ) + 0.5;
+					const vx = ( x / n ) + 0.5;
+					const vy = ( y / n ) + 0.5;
+					const vz = ( z / n ) + 0.5;
 
 					color.setRGB( vx, vy, vz );
 
@@ -85,27 +85,27 @@
 
 				}
 
-				var gl = renderer.getContext();
+				const gl = renderer.getContext();
 
-				var pos = gl.createBuffer();
+				const pos = gl.createBuffer();
 				gl.bindBuffer( gl.ARRAY_BUFFER, pos );
 				gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( positions ), gl.STATIC_DRAW );
 
-				var pos2 = gl.createBuffer();
+				const pos2 = gl.createBuffer();
 				gl.bindBuffer( gl.ARRAY_BUFFER, pos2 );
 				gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( positions2 ), gl.STATIC_DRAW );
 
-				var rgb = gl.createBuffer();
+				const rgb = gl.createBuffer();
 				gl.bindBuffer( gl.ARRAY_BUFFER, rgb );
 				gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( colors ), gl.STATIC_DRAW );
 
-				var posAttr1 = new THREE.GLBufferAttribute( pos, gl.FLOAT, 3, 4, particles );
-				var posAttr2 = new THREE.GLBufferAttribute( pos2, gl.FLOAT, 3, 4, particles );
+				const posAttr1 = new THREE.GLBufferAttribute( pos, gl.FLOAT, 3, 4, particles );
+				const posAttr2 = new THREE.GLBufferAttribute( pos2, gl.FLOAT, 3, 4, particles );
 				geometry.setAttribute( 'position', posAttr1 );
 
 				setInterval( function () {
 
-					var attr = geometry.getAttribute( 'position' );
+					const attr = geometry.getAttribute( 'position' );
 
 					geometry.setAttribute( 'position', ( attr === posAttr1 ) ? posAttr2 : posAttr1 );
 
@@ -115,7 +115,7 @@
 
 				//
 
-				var material = new THREE.PointsMaterial( { size: 15, vertexColors: THREE.VertexColors } );
+				const material = new THREE.PointsMaterial( { size: 15, vertexColors: THREE.VertexColors } );
 
 				points = new THREE.Points( geometry, material );
 
@@ -161,7 +161,7 @@
 				drawCount = ( Math.max( 5000, drawCount ) + Math.floor( 500 * Math.random() ) ) % particles;
 				points.geometry.setDrawRange( 0, drawCount );
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				points.rotation.x = time * 0.1;
 				points.rotation.y = time * 0.2;

examples/webgl_buffergeometry_indexed.html

@@ -18,9 +18,9 @@
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var camera, scene, renderer, stats;
+			let camera, scene, renderer, stats;
 
-			var mesh;
+			let mesh;
 
 			init();
 			animate();
@@ -37,40 +37,40 @@
 
 				//
 
-				var light = new THREE.HemisphereLight();
+				const light = new THREE.HemisphereLight();
 				scene.add( light );
 
 				//
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
-				var indices = [];
+				const indices = [];
 
-				var vertices = [];
-				var normals = [];
-				var colors = [];
+				const vertices = [];
+				const normals = [];
+				const colors = [];
 
-				var size = 20;
-				var segments = 10;
+				const size = 20;
+				const segments = 10;
 
-				var halfSize = size / 2;
-				var segmentSize = size / segments;
+				const halfSize = size / 2;
+				const segmentSize = size / segments;
 
 				// generate vertices, normals and color data for a simple grid geometry
 
-				for ( var i = 0; i <= segments; i ++ ) {
+				for ( let i = 0; i <= segments; i ++ ) {
 
-					var y = ( i * segmentSize ) - halfSize;
+					const y = ( i * segmentSize ) - halfSize;
 
-					for ( var j = 0; j <= segments; j ++ ) {
+					for ( let j = 0; j <= segments; j ++ ) {
 
-						var x = ( j * segmentSize ) - halfSize;
+						const x = ( j * segmentSize ) - halfSize;
 
 						vertices.push( x, - y, 0 );
 						normals.push( 0, 0, 1 );
 
-						var r = ( x / size ) + 0.5;
-						var g = ( y / size ) + 0.5;
+						const r = ( x / size ) + 0.5;
+						const g = ( y / size ) + 0.5;
 
 						colors.push( r, g, 1 );
 
@@ -80,14 +80,14 @@
 
 				// generate indices (data for element array buffer)
 
-				for ( var i = 0; i < segments; i ++ ) {
+				for ( let i = 0; i < segments; i ++ ) {
 
-					for ( var j = 0; j < segments; j ++ ) {
+					for ( let j = 0; j < segments; j ++ ) {
 
-						var a = i * ( segments + 1 ) + ( j + 1 );
-						var b = i * ( segments + 1 ) + j;
-						var c = ( i + 1 ) * ( segments + 1 ) + j;
-						var d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );
+						const a = i * ( segments + 1 ) + ( j + 1 );
+						const b = i * ( segments + 1 ) + j;
+						const c = ( i + 1 ) * ( segments + 1 ) + j;
+						const d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );
 
 						// generate two faces (triangles) per iteration
 
@@ -105,7 +105,7 @@
 				geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
 				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					side: THREE.DoubleSide,
 					vertexColors: true
 				} );
@@ -127,7 +127,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( material, 'wireframe' );
 
 				//
@@ -158,7 +158,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;
 				mesh.rotation.y = time * 0.5;

examples/webgl_buffergeometry_instancing.html

@@ -72,9 +72,9 @@
 		import Stats from './jsm/libs/stats.module.js';
 		import { GUI } from './jsm/libs/dat.gui.module.js';
 
-		var container, stats;
+		let container, stats;
 
-		var camera, scene, renderer;
+		let camera, scene, renderer;
 
 		init();
 		animate();
@@ -90,15 +90,15 @@
 
 			// geometry
 
-			var vector = new THREE.Vector4();
+			const vector = new THREE.Vector4();
 
-			var instances = 50000;
+			const instances = 50000;
 
-			var positions = [];
-			var offsets = [];
-			var colors = [];
-			var orientationsStart = [];
-			var orientationsEnd = [];
+			const positions = [];
+			const offsets = [];
+			const colors = [];
+			const orientationsStart = [];
+			const orientationsEnd = [];
 
 			positions.push( 0.025, - 0.025, 0 );
 			positions.push( - 0.025, 0.025, 0 );
@@ -106,7 +106,7 @@
 
 			// instanced attributes
 
-			for ( var i = 0; i < instances; i ++ ) {
+			for ( let i = 0; i < instances; i ++ ) {
 
 				// offsets
 
@@ -132,7 +132,7 @@
 
 			}
 
-			var geometry = new THREE.InstancedBufferGeometry();
+			const geometry = new THREE.InstancedBufferGeometry();
 			geometry.instanceCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
 
 			geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
@@ -144,7 +144,7 @@
 
 			// material
 
-			var material = new THREE.RawShaderMaterial( {
+			const material = new THREE.RawShaderMaterial( {
 
 				uniforms: {
 					"time": { value: 1.0 },
@@ -159,7 +159,7 @@
 
 			//
 
-			var mesh = new THREE.Mesh( geometry, material );
+			const mesh = new THREE.Mesh( geometry, material );
 			scene.add( mesh );
 
 			//
@@ -178,7 +178,7 @@
 
 			//
 
-			var gui = new GUI( { width: 350 } );
+			const gui = new GUI( { width: 350 } );
 			gui.add( geometry, 'instanceCount', 0, instances );
 
 			//
@@ -214,9 +214,9 @@
 
 		function render() {
 
-			var time = performance.now();
+			const time = performance.now();
 
-			var object = scene.children[ 0 ];
+			const object = scene.children[ 0 ];
 
 			object.rotation.y = time * 0.0005;
 			object.material.uniforms[ "time" ].value = time * 0.005;

examples/webgl_buffergeometry_instancing_billboards.html

@@ -75,10 +75,10 @@
 
 		import Stats from './jsm/libs/stats.module.js';
 
-		var container, stats;
+		let container, stats;
 
-		var camera, scene, renderer;
-		var geometry, material, mesh;
+		let camera, scene, renderer;
+		let geometry, material, mesh;
 
 		function init() {
 
@@ -99,17 +99,17 @@
 
 			scene = new THREE.Scene();
 
-			var circleGeometry = new THREE.CircleBufferGeometry( 1, 6 );
+			const circleGeometry = new THREE.CircleBufferGeometry( 1, 6 );
 
 			geometry = new THREE.InstancedBufferGeometry();
 			geometry.index = circleGeometry.index;
 			geometry.attributes = circleGeometry.attributes;
 
-			var particleCount = 75000;
+			const particleCount = 75000;
 
-			var translateArray = new Float32Array( particleCount * 3 );
+			const translateArray = new Float32Array( particleCount * 3 );
 
-			for ( var i = 0, i3 = 0, l = particleCount; i < l; i ++, i3 += 3 ) {
+			for ( let i = 0, i3 = 0, l = particleCount; i < l; i ++, i3 += 3 ) {
 
 				translateArray[ i3 + 0 ] = Math.random() * 2 - 1;
 				translateArray[ i3 + 1 ] = Math.random() * 2 - 1;
@@ -167,7 +167,7 @@
 
 		function render() {
 
-			var time = performance.now() * 0.0005;
+			const time = performance.now() * 0.0005;
 
 			material.uniforms[ "time" ].value = time;
 

examples/webgl_buffergeometry_instancing_interleaved.html

@@ -19,16 +19,16 @@
 
 		import Stats from './jsm/libs/stats.module.js';
 
-		var container, stats;
-		var camera, scene, renderer, mesh;
+		let container, stats;
+		let camera, scene, renderer, mesh;
 
-		var instances = 5000;
-		var lastTime = 0;
+		const instances = 5000;
+		let lastTime = 0;
 
-		var moveQ = new THREE.Quaternion( 0.5, 0.5, 0.5, 0.0 ).normalize();
-		var tmpQ = new THREE.Quaternion();
-		var tmpM = new THREE.Matrix4();
-		var currentM = new THREE.Matrix4();
+		const moveQ = new THREE.Quaternion( 0.5, 0.5, 0.5, 0.0 ).normalize();
+		const tmpQ = new THREE.Quaternion();
+		const tmpM = new THREE.Matrix4();
+		const currentM = new THREE.Matrix4();
 
 		init();
 		animate();
@@ -44,11 +44,11 @@
 
 			// geometry
 
-			var geometry = new THREE.InstancedBufferGeometry();
+			const geometry = new THREE.InstancedBufferGeometry();
 
 			// per mesh data x,y,z,w,u,v,s,t for 4-element alignment
 			// only use x,y,z and u,v; but x, y, z, nx, ny, nz, u, v would be a good layout
-			var vertexBuffer = new THREE.InterleavedBuffer( new Float32Array( [
+			const vertexBuffer = new THREE.InterleavedBuffer( new Float32Array( [
 				// Front
 				- 1, 1, 1, 0, 0, 0, 0, 0,
 				1, 1, 1, 0, 1, 0, 0, 0,
@@ -82,13 +82,13 @@
 			] ), 8 );
 
 			// Use vertexBuffer, starting at offset 0, 3 items in position attribute
-			var positions = new THREE.InterleavedBufferAttribute( vertexBuffer, 3, 0 );
+			const positions = new THREE.InterleavedBufferAttribute( vertexBuffer, 3, 0 );
 			geometry.setAttribute( 'position', positions );
 			// Use vertexBuffer, starting at offset 4, 2 items in uv attribute
-			var uvs = new THREE.InterleavedBufferAttribute( vertexBuffer, 2, 4 );
+			const uvs = new THREE.InterleavedBufferAttribute( vertexBuffer, 2, 4 );
 			geometry.setAttribute( 'uv', uvs );
 
-			var indices = new Uint16Array( [
+			const indices = new Uint16Array( [
 				0, 2, 1,
 				2, 3, 1,
 				4, 6, 5,
@@ -107,21 +107,21 @@
 
 			// material
 
-			var material = new THREE.MeshBasicMaterial();
+			const material = new THREE.MeshBasicMaterial();
 			material.map = new THREE.TextureLoader().load( 'textures/crate.gif' );
 			material.map.flipY = false;
 
 			// per instance data
 
-			var matrix = new THREE.Matrix4();
-			var offset = new THREE.Vector3();
-			var orientation = new THREE.Quaternion();
-			var scale = new THREE.Vector3( 1, 1, 1 );
-			var x, y, z, w;
+			const matrix = new THREE.Matrix4();
+			const offset = new THREE.Vector3();
+			const orientation = new THREE.Quaternion();
+			const scale = new THREE.Vector3( 1, 1, 1 );
+			let x, y, z, w;
 
 			mesh = new THREE.InstancedMesh( geometry, material, instances );
 
-			for ( var i = 0; i < instances; i ++ ) {
+			for ( let i = 0; i < instances; i ++ ) {
 
 				// offsets
 
@@ -191,15 +191,15 @@
 
 		function render() {
 
-			var time = performance.now();
+			const time = performance.now();
 
 			mesh.rotation.y = time * 0.00005;
 
-			var delta = ( time - lastTime ) / 5000;
+			const delta = ( time - lastTime ) / 5000;
 			tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
 			tmpM.makeRotationFromQuaternion( tmpQ );
 
-			for ( var i = 0, il = instances; i < il; i ++ ) {
+			for ( let i = 0, il = instances; i < il; i ++ ) {
 
 				mesh.getMatrixAt( i, currentM );
 				currentM.multiply( tmpM );

examples/webgl_buffergeometry_lines.html

@@ -18,17 +18,17 @@
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var container, stats, clock;
+			let container, stats, clock;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var line;
+			let line;
 
-			var segments = 10000;
-			var r = 800;
-			var t = 0;
+			const segments = 10000;
+			const r = 800;
+			let t = 0;
 
-			var params = {
+			const params = {
 				morphTargets: false
 			};
 
@@ -48,17 +48,17 @@
 
 				clock = new THREE.Clock();
 
-				var geometry = new THREE.BufferGeometry();
-				var material = new THREE.LineBasicMaterial( { vertexColors: true, morphTargets: true } );
+				const geometry = new THREE.BufferGeometry();
+				const material = new THREE.LineBasicMaterial( { vertexColors: true, morphTargets: true } );
 
-				var positions = [];
-				var colors = [];
+				const positions = [];
+				const colors = [];
 
-				for ( var i = 0; i < segments; i ++ ) {
+				for ( let i = 0; i < segments; i ++ ) {
 
-					var x = Math.random() * r - r / 2;
-					var y = Math.random() * r - r / 2;
-					var z = Math.random() * r - r / 2;
+					const x = Math.random() * r - r / 2;
+					const y = Math.random() * r - r / 2;
+					const z = Math.random() * r - r / 2;
 
 					// positions
 
@@ -97,7 +97,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( params, 'morphTargets' );
 				gui.open();
 
@@ -130,8 +130,8 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
-				var time = clock.getElapsedTime();
+				const delta = clock.getDelta();
+				const time = clock.getElapsedTime();
 
 				line.rotation.x = time * 0.25;
 				line.rotation.y = time * 0.5;
@@ -149,19 +149,19 @@
 
 			function generateMorphTargets( geometry ) {
 
-				var data = [];
+				const data = [];
 
-				for ( var i = 0; i < segments; i ++ ) {
+				for ( let i = 0; i < segments; i ++ ) {
 
-					var x = Math.random() * r - r / 2;
-					var y = Math.random() * r - r / 2;
-					var z = Math.random() * r - r / 2;
+					const x = Math.random() * r - r / 2;
+					const y = Math.random() * r - r / 2;
+					const z = Math.random() * r - r / 2;
 
 					data.push( x, y, z );
 
 				}
 
-				var morphTarget = new THREE.Float32BufferAttribute( data, 3 );
+				const morphTarget = new THREE.Float32BufferAttribute( data, 3 );
 				morphTarget.name = 'target1';
 
 				geometry.morphAttributes.position = [ morphTarget ];

examples/webgl_buffergeometry_lines_indexed.html

@@ -18,11 +18,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var parent_node;
+			let parent_node;
 
 			init();
 			animate();
@@ -36,19 +36,19 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BufferGeometry();
-				var material = new THREE.LineBasicMaterial( { vertexColors: true } );
+				const geometry = new THREE.BufferGeometry();
+				const material = new THREE.LineBasicMaterial( { vertexColors: true } );
 
-				var indices = [];
-				var positions = [];
-				var colors = [];
+				const indices = [];
+				const positions = [];
+				const colors = [];
 
-				var next_positions_index = 0;
+				let next_positions_index = 0;
 
 				//
 
-				var iteration_count = 4;
-				var rangle = 60 * Math.PI / 180.0;
+				const iteration_count = 4;
+				const rangle = 60 * Math.PI / 180.0;
 
 				function add_vertex( v ) {
 
@@ -67,7 +67,7 @@
 
 					if ( -- depth < 0 ) {
 
-						var i = next_positions_index - 1; // p0 already there
+						const i = next_positions_index - 1; // p0 already there
 						add_vertex( p4 );
 						indices.push( i, i + 1 );
 
@@ -75,17 +75,17 @@
 
 					}
 
-					var v = p4.clone().sub( p0 );
-					var v_tier = v.clone().multiplyScalar( 1 / 3 );
-					var p1 = p0.clone().add( v_tier );
+					const v = p4.clone().sub( p0 );
+					const v_tier = v.clone().multiplyScalar( 1 / 3 );
+					const p1 = p0.clone().add( v_tier );
 
-					var angle = Math.atan2( v.y, v.x ) + rangle;
-					var length = v_tier.length();
-					var p2 = p1.clone();
+					const angle = Math.atan2( v.y, v.x ) + rangle;
+					const length = v_tier.length();
+					const p2 = p1.clone();
 					p2.x += Math.cos( angle ) * length;
 					p2.y += Math.sin( angle ) * length;
 
-					var p3 = p0.clone().add( v_tier ).add( v_tier );
+					const p3 = p0.clone().add( v_tier ).add( v_tier );
 
 					snowflake_iteration( p0, p1, depth );
 					snowflake_iteration( p1, p2, depth );
@@ -96,11 +96,11 @@
 
 				function snowflake( points, loop, x_offset ) {
 
-					for ( var iteration = 0; iteration != iteration_count; iteration ++ ) {
+					for ( let iteration = 0; iteration != iteration_count; iteration ++ ) {
 
 						add_vertex( points[ 0 ] );
 
-						for ( var p_index = 0, p_count = points.length - 1; p_index != p_count; p_index ++ ) {
+						for ( let p_index = 0, p_count = points.length - 1; p_index != p_count; p_index ++ ) {
 
 							snowflake_iteration( points[ p_index ], points[ p_index + 1 ], iteration );
 
@@ -110,7 +110,7 @@
 
 						// translate input curve for next iteration
 
-						for ( var p_index = 0, p_count = points.length; p_index != p_count; p_index ++ ) {
+						for ( let p_index = 0, p_count = points.length; p_index != p_count; p_index ++ ) {
 
 							points[ p_index ].x += x_offset;
 
@@ -120,7 +120,8 @@
 
 				}
 
-				var y = 0;
+				let y = 0;
+
 				snowflake(
 					[
 						new THREE.Vector3( 0, y, 0 ),
@@ -173,7 +174,7 @@
 				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 				geometry.computeBoundingSphere();
 
-				var lineSegments = new THREE.LineSegments( geometry, material );
+				const lineSegments = new THREE.LineSegments( geometry, material );
 				lineSegments.position.x -= 1200;
 				lineSegments.position.y -= 1200;
 
@@ -222,7 +223,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				parent_node.rotation.z = time * 0.5;
 

examples/webgl_buffergeometry_morphtargets.html

@@ -21,7 +21,7 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container, camera, scene, renderer, mesh;
+			let container, camera, scene, renderer, mesh;
 
 			function init() {
 
@@ -35,12 +35,12 @@
 				camera.position.z = 10;
 				scene.add( camera );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 1 );
+				const pointLight = new THREE.PointLight( 0xffffff, 1 );
 				camera.add( pointLight );
 
-				var geometry = createGeometry();
+				const geometry = createGeometry();
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xff0000,
 					flatShading: true,
 					morphTargets: true
@@ -61,7 +61,7 @@
 				} );
 				container.appendChild( renderer.domElement );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableZoom = false;
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -70,28 +70,28 @@
 
 			function createGeometry() {
 
-				var geometry = new THREE.BoxBufferGeometry( 2, 2, 2, 32, 32, 32 );
+				const geometry = new THREE.BoxBufferGeometry( 2, 2, 2, 32, 32, 32 );
 
 				// create an empty array to  hold targets for the attribute we want to morph
 				// morphing positions and normals is supported
 				geometry.morphAttributes.position = [];
 
 				// the original positions of the cube's vertices
-				var positions = geometry.attributes.position.array;
+				const positions = geometry.attributes.position.array;
 
 				// for the first morph target we'll move the cube's vertices onto the surface of a sphere
-				var spherePositions = [];
+				const spherePositions = [];
 
 				// for the second morph target, we'll twist the cubes vertices
-				var twistPositions = [];
-				var direction = new THREE.Vector3( 1, 0, 0 ).normalize();
-				var vertex = new THREE.Vector3();
+				const twistPositions = [];
+				const direction = new THREE.Vector3( 1, 0, 0 ).normalize();
+				const vertex = new THREE.Vector3();
 
-				for ( var i = 0; i < positions.length; i += 3 ) {
+				for ( let i = 0; i < positions.length; i += 3 ) {
 
-					var x = positions[ i ];
-					var y = positions[ i + 1 ];
-					var z = positions[ i + 2 ];
+					const x = positions[ i ];
+					const y = positions[ i + 1 ];
+					const z = positions[ i + 2 ];
 
 					spherePositions.push(
 
@@ -121,12 +121,12 @@
 			function initGUI() {
 
 				// Set up dat.GUI to control targets
-				var params = {
+				const params = {
 					Spherify: 0,
 					Twist: 0,
 				};
-				var gui = new GUI();
-				var folder = gui.addFolder( 'Morph Targets' );
+				const gui = new GUI();
+				const folder = gui.addFolder( 'Morph Targets' );
 
 				folder.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 

examples/webgl_buffergeometry_points.html

@@ -17,11 +17,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var points;
+			let points;
 
 			init();
 			animate();
@@ -41,32 +41,32 @@
 
 				//
 
-				var particles = 500000;
+				const particles = 500000;
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
-				var positions = [];
-				var colors = [];
+				const positions = [];
+				const colors = [];
 
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				var n = 1000, n2 = n / 2; // particles spread in the cube
+				const n = 1000, n2 = n / 2; // particles spread in the cube
 
-				for ( var i = 0; i < particles; i ++ ) {
+				for ( let i = 0; i < particles; i ++ ) {
 
 					// positions
 
-					var x = Math.random() * n - n2;
-					var y = Math.random() * n - n2;
-					var z = Math.random() * n - n2;
+					const x = Math.random() * n - n2;
+					const y = Math.random() * n - n2;
+					const z = Math.random() * n - n2;
 
 					positions.push( x, y, z );
 
 					// colors
 
-					var vx = ( x / n ) + 0.5;
-					var vy = ( y / n ) + 0.5;
-					var vz = ( z / n ) + 0.5;
+					const vx = ( x / n ) + 0.5;
+					const vy = ( y / n ) + 0.5;
+					const vz = ( z / n ) + 0.5;
 
 					color.setRGB( vx, vy, vz );
 
@@ -81,7 +81,7 @@
 
 				//
 
-				var material = new THREE.PointsMaterial( { size: 15, vertexColors: true } );
+				const material = new THREE.PointsMaterial( { size: 15, vertexColors: true } );
 
 				points = new THREE.Points( geometry, material );
 				scene.add( points );
@@ -127,7 +127,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				points.rotation.x = time * 0.25;
 				points.rotation.y = time * 0.5;

examples/webgl_buffergeometry_points_interleaved.html

@@ -17,11 +17,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var points;
+			let points;
 
 			init();
 			animate();
@@ -39,32 +39,32 @@
 
 				//
 
-				var particles = 500000;
+				const particles = 500000;
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
 				// create a generic buffer of binary data (a single particle has 16 bytes of data)
 
-				var arrayBuffer = new ArrayBuffer( particles * 16 );
+				const arrayBuffer = new ArrayBuffer( particles * 16 );
 
 				// the following typed arrays share the same buffer
 
-				var interleavedFloat32Buffer = new Float32Array( arrayBuffer );
-				var interleavedUint8Buffer = new Uint8Array( arrayBuffer );
+				const interleavedFloat32Buffer = new Float32Array( arrayBuffer );
+				const interleavedUint8Buffer = new Uint8Array( arrayBuffer );
 
 				//
 
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				var n = 1000, n2 = n / 2; // particles spread in the cube
+				const n = 1000, n2 = n / 2; // particles spread in the cube
 
-				for ( var i = 0; i < interleavedFloat32Buffer.length; i += 4 ) {
+				for ( let i = 0; i < interleavedFloat32Buffer.length; i += 4 ) {
 
 					// position (first 12 bytes)
 
-					var x = Math.random() * n - n2;
-					var y = Math.random() * n - n2;
-					var z = Math.random() * n - n2;
+					const x = Math.random() * n - n2;
+					const y = Math.random() * n - n2;
+					const z = Math.random() * n - n2;
 
 					interleavedFloat32Buffer[ i + 0 ] = x;
 					interleavedFloat32Buffer[ i + 1 ] = y;
@@ -72,13 +72,13 @@
 
 					// color (last 4 bytes)
 
-					var vx = ( x / n ) + 0.5;
-					var vy = ( y / n ) + 0.5;
-					var vz = ( z / n ) + 0.5;
+					const vx = ( x / n ) + 0.5;
+					const vy = ( y / n ) + 0.5;
+					const vz = ( z / n ) + 0.5;
 
 					color.setRGB( vx, vy, vz );
 
-					var j = ( i + 3 ) * 4;
+					const j = ( i + 3 ) * 4;
 
 					interleavedUint8Buffer[ j + 0 ] = color.r * 255;
 					interleavedUint8Buffer[ j + 1 ] = color.g * 255;
@@ -87,15 +87,15 @@
 
 				}
 
-				var interleavedBuffer32 = new THREE.InterleavedBuffer( interleavedFloat32Buffer, 4 );
-				var interleavedBuffer8 = new THREE.InterleavedBuffer( interleavedUint8Buffer, 16 );
+				const interleavedBuffer32 = new THREE.InterleavedBuffer( interleavedFloat32Buffer, 4 );
+				const interleavedBuffer8 = new THREE.InterleavedBuffer( interleavedUint8Buffer, 16 );
 
 				geometry.setAttribute( 'position', new THREE.InterleavedBufferAttribute( interleavedBuffer32, 3, 0, false ) );
 				geometry.setAttribute( 'color', new THREE.InterleavedBufferAttribute( interleavedBuffer8, 3, 12, true ) );
 
 				//
 
-				var material = new THREE.PointsMaterial( { size: 15, vertexColors: true } );
+				const material = new THREE.PointsMaterial( { size: 15, vertexColors: true } );
 
 				points = new THREE.Points( geometry, material );
 				scene.add( points );
@@ -141,7 +141,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				points.rotation.x = time * 0.25;
 				points.rotation.y = time * 0.5;

examples/webgl_buffergeometry_rawshader.html

@@ -63,9 +63,9 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -82,14 +82,14 @@
 
 				// geometry
 				// nr of triangles with 3 vertices per triangle
-				var vertexCount = 200 * 3;
+				const vertexCount = 200 * 3;
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
-				var positions = [];
-				var colors = [];
+				const positions = [];
+				const colors = [];
 
-				for ( var i = 0; i < vertexCount; i ++ ) {
+				for ( let i = 0; i < vertexCount; i ++ ) {
 
 					// adding x,y,z
 					positions.push( Math.random() - 0.5 );
@@ -104,8 +104,8 @@
 
 				}
 
-				var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
-				var colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
+				const positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
+				const colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
 
 				colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
 
@@ -114,7 +114,7 @@
 
 				// material
 
-				var material = new THREE.RawShaderMaterial( {
+				const material = new THREE.RawShaderMaterial( {
 
 					uniforms: {
 						time: { value: 1.0 }
@@ -126,7 +126,7 @@
 
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();
@@ -163,9 +163,9 @@
 
 			function render() {
 
-				var time = performance.now();
+				const time = performance.now();
 
-				var object = scene.children[ 0 ];
+				const object = scene.children[ 0 ];
 
 				object.rotation.y = time * 0.0005;
 				object.material.uniforms.time.value = time * 0.005;

examples/webgl_buffergeometry_selective_draw.html

@@ -52,11 +52,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var camera, scene, renderer, stats;
-			var geometry, mesh;
-			var numLat = 100;
-			var numLng = 200;
-			var numLinesCulled = 0;
+			let camera, scene, renderer, stats;
+			let geometry, mesh;
+			const numLat = 100;
+			const numLng = 200;
+			let numLinesCulled = 0;
 
 			init();
 			animate();
@@ -82,10 +82,10 @@
 
 				addLines( 1.0 );
 
-				var hideLinesButton = document.getElementById( 'hideLines' );
+				const hideLinesButton = document.getElementById( 'hideLines' );
 				hideLinesButton.addEventListener( 'click', hideLines );
 
-				var showAllLinesButton = document.getElementById( 'showAllLines' );
+				const showAllLinesButton = document.getElementById( 'showAllLines' );
 				showAllLinesButton.addEventListener( 'click', showAllLines );
 
 			}
@@ -93,18 +93,18 @@
 			function addLines( radius ) {
 
 				geometry = new THREE.BufferGeometry();
-				var linePositions = new Float32Array( numLat * numLng * 3 * 2 );
-				var lineColors = new Float32Array( numLat * numLng * 3 * 2 );
-				var visible = new Float32Array( numLat * numLng * 2 );
+				const linePositions = new Float32Array( numLat * numLng * 3 * 2 );
+				const lineColors = new Float32Array( numLat * numLng * 3 * 2 );
+				const visible = new Float32Array( numLat * numLng * 2 );
 
-				for ( var i = 0; i < numLat; ++ i ) {
+				for ( let i = 0; i < numLat; ++ i ) {
 
-					for ( var j = 0; j < numLng; ++ j ) {
+					for ( let j = 0; j < numLng; ++ j ) {
 
-						var lat = ( Math.random() * Math.PI ) / 50.0 + i / numLat * Math.PI;
-						var lng = ( Math.random() * Math.PI ) / 50.0 + j / numLng * 2 * Math.PI;
+						const lat = ( Math.random() * Math.PI ) / 50.0 + i / numLat * Math.PI;
+						const lng = ( Math.random() * Math.PI ) / 50.0 + j / numLng * 2 * Math.PI;
 
-						var index = i * numLng + j;
+						const index = i * numLng + j;
 
 						linePositions[ index * 6 + 0 ] = 0;
 						linePositions[ index * 6 + 1 ] = 0;
@@ -113,7 +113,7 @@
 						linePositions[ index * 6 + 4 ] = radius * Math.cos( lat );
 						linePositions[ index * 6 + 5 ] = radius * Math.sin( lat ) * Math.sin( lng );
 
-						var color = new THREE.Color( 0xffffff );
+						const color = new THREE.Color( 0xffffff );
 
 						color.setHSL( lat / Math.PI, 1.0, 0.2 );
 						lineColors[ index * 6 + 0 ] = color.r;
@@ -139,7 +139,7 @@
 
 				geometry.computeBoundingSphere();
 
-				var shaderMaterial = new THREE.ShaderMaterial( {
+				const shaderMaterial = new THREE.ShaderMaterial( {
 
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent
@@ -154,14 +154,14 @@
 
 			function updateCount() {
 
-				var str = '1 draw call, ' + numLat * numLng + ' lines, ' + numLinesCulled + ' culled (<a target="_blank" href="http://callum.com">author</a>)';
+				const str = '1 draw call, ' + numLat * numLng + ' lines, ' + numLinesCulled + ' culled (<a target="_blank" href="http://callum.com">author</a>)';
 				document.getElementById( 'title' ).innerHTML = str.replace( /\B(?=(\d{3})+(?!\d))/g, "," );
 
 			}
 
 			function hideLines() {
 
-				for ( var i = 0; i < geometry.attributes.visible.array.length; i += 2 ) {
+				for ( let i = 0; i < geometry.attributes.visible.array.length; i += 2 ) {
 
 					if ( Math.random() > 0.75 ) {
 
@@ -188,7 +188,7 @@
 
 				numLinesCulled = 0;
 
-				for ( var i = 0; i < geometry.attributes.visible.array.length; i += 2 ) {
+				for ( let i = 0; i < geometry.attributes.visible.array.length; i += 2 ) {
 
 					geometry.attributes.visible.array[ i + 0 ] = 1;
 					geometry.attributes.visible.array[ i + 1 ] = 1;
@@ -210,11 +210,11 @@
 
 			}
 
-			function animate( time ) {
+			function animate() {
 
 				requestAnimationFrame( animate );
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;
 				mesh.rotation.y = time * 0.5;

examples/webgl_buffergeometry_uint.html

@@ -17,11 +17,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var mesh;
+			let mesh;
 
 			init();
 			animate();
@@ -43,55 +43,55 @@
 
 				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
-				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
 				//
 
-				var triangles = 500000;
+				const triangles = 500000;
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
-				var positions = [];
-				var normals = [];
-				var colors = [];
+				const positions = [];
+				const normals = [];
+				const colors = [];
 
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				var n = 800, n2 = n / 2;	// triangles spread in the cube
-				var d = 12, d2 = d / 2;	// individual triangle size
+				const n = 800, n2 = n / 2;	// triangles spread in the cube
+				const d = 12, d2 = d / 2;	// individual triangle size
 
-				var pA = new THREE.Vector3();
-				var pB = new THREE.Vector3();
-				var pC = new THREE.Vector3();
+				const pA = new THREE.Vector3();
+				const pB = new THREE.Vector3();
+				const pC = new THREE.Vector3();
 
-				var cb = new THREE.Vector3();
-				var ab = new THREE.Vector3();
+				const cb = new THREE.Vector3();
+				const ab = new THREE.Vector3();
 
-				for ( var i = 0; i < triangles; i ++ ) {
+				for ( let i = 0; i < triangles; i ++ ) {
 
 					// positions
 
-					var x = Math.random() * n - n2;
-					var y = Math.random() * n - n2;
-					var z = Math.random() * n - n2;
+					const x = Math.random() * n - n2;
+					const y = Math.random() * n - n2;
+					const z = Math.random() * n - n2;
 
-					var ax = x + Math.random() * d - d2;
-					var ay = y + Math.random() * d - d2;
-					var az = z + Math.random() * d - d2;
+					const ax = x + Math.random() * d - d2;
+					const ay = y + Math.random() * d - d2;
+					const az = z + Math.random() * d - d2;
 
-					var bx = x + Math.random() * d - d2;
-					var by = y + Math.random() * d - d2;
-					var bz = z + Math.random() * d - d2;
+					const bx = x + Math.random() * d - d2;
+					const by = y + Math.random() * d - d2;
+					const bz = z + Math.random() * d - d2;
 
-					var cx = x + Math.random() * d - d2;
-					var cy = y + Math.random() * d - d2;
-					var cz = z + Math.random() * d - d2;
+					const cx = x + Math.random() * d - d2;
+					const cy = y + Math.random() * d - d2;
+					const cz = z + Math.random() * d - d2;
 
 					positions.push( ax, ay, az );
 					positions.push( bx, by, bz );
@@ -109,9 +109,9 @@
 
 					cb.normalize();
 
-					var nx = cb.x;
-					var ny = cb.y;
-					var nz = cb.z;
+					const nx = cb.x;
+					const ny = cb.y;
+					const nz = cb.z;
 
 					normals.push( nx * 32767, ny * 32767, nz * 32767 );
 					normals.push( nx * 32767, ny * 32767, nz * 32767 );
@@ -119,9 +119,9 @@
 
 					// colors
 
-					var vx = ( x / n ) + 0.5;
-					var vy = ( y / n ) + 0.5;
-					var vz = ( z / n ) + 0.5;
+					const vx = ( x / n ) + 0.5;
+					const vy = ( y / n ) + 0.5;
+					const vz = ( z / n ) + 0.5;
 
 					color.setRGB( vx, vy, vz );
 
@@ -131,9 +131,9 @@
 
 				}
 
-				var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
-				var normalAttribute = new THREE.Int16BufferAttribute( normals, 3 );
-				var colorAttribute = new THREE.Uint8BufferAttribute( colors, 3 );
+				const positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
+				const normalAttribute = new THREE.Int16BufferAttribute( normals, 3 );
+				const colorAttribute = new THREE.Uint8BufferAttribute( colors, 3 );
 
 				normalAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
 				colorAttribute.normalized = true;
@@ -144,7 +144,7 @@
 
 				geometry.computeBoundingSphere();
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
 					side: THREE.DoubleSide, vertexColors: true
 				} );
@@ -194,7 +194,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;
 				mesh.rotation.y = time * 0.5;

examples/webgl_camera.html

@@ -22,16 +22,16 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-			var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+			let SCREEN_WIDTH = window.innerWidth;
+			let SCREEN_HEIGHT = window.innerHeight;
+			let aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
-			var container, stats;
-			var camera, scene, renderer, mesh;
-			var cameraRig, activeCamera, activeHelper;
-			var cameraPerspective, cameraOrtho;
-			var cameraPerspectiveHelper, cameraOrthoHelper;
-			var frustumSize = 600;
+			let container, stats;
+			let camera, scene, renderer, mesh;
+			let cameraRig, activeCamera, activeHelper;
+			let cameraPerspective, cameraOrtho;
+			let cameraPerspectiveHelper, cameraOrthoHelper;
+			const frustumSize = 600;
 
 			init();
 			animate();
@@ -85,14 +85,14 @@
 				);
 				scene.add( mesh );
 
-				var mesh2 = new THREE.Mesh(
+				const mesh2 = new THREE.Mesh(
 					new THREE.SphereBufferGeometry( 50, 16, 8 ),
 					new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } )
 				);
 				mesh2.position.y = 150;
 				mesh.add( mesh2 );
 
-				var mesh3 = new THREE.Mesh(
+				const mesh3 = new THREE.Mesh(
 					new THREE.SphereBufferGeometry( 5, 16, 8 ),
 					new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } )
 				);
@@ -101,10 +101,10 @@
 
 				//
 
-				var geometry = new THREE.BufferGeometry();
-				var vertices = [];
+				const geometry = new THREE.BufferGeometry();
+				const vertices = [];
 
-				for ( var i = 0; i < 10000; i ++ ) {
+				for ( let i = 0; i < 10000; i ++ ) {
 
 					vertices.push( THREE.MathUtils.randFloatSpread( 2000 ) ); // x
 					vertices.push( THREE.MathUtils.randFloatSpread( 2000 ) ); // y
@@ -114,7 +114,7 @@
 
 				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-				var particles = new THREE.Points( geometry, new THREE.PointsMaterial( { color: 0x888888 } ) );
+				const particles = new THREE.Points( geometry, new THREE.PointsMaterial( { color: 0x888888 } ) );
 				scene.add( particles );
 
 				//
@@ -200,7 +200,7 @@
 
 			function render() {
 
-				var r = Date.now() * 0.0005;
+				const r = Date.now() * 0.0005;
 
 				mesh.position.x = 700 * Math.cos( r );
 				mesh.position.z = 700 * Math.sin( r );

examples/webgl_camera_array.html

@@ -12,27 +12,27 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
-			var mesh;
-			var AMOUNT = 6;
+			let camera, scene, renderer;
+			let mesh;
+			const AMOUNT = 6;
 
 			init();
 			animate();
 
 			function init() {
 
-				var ASPECT_RATIO = window.innerWidth / window.innerHeight;
+				const ASPECT_RATIO = window.innerWidth / window.innerHeight;
 
-				var WIDTH = ( window.innerWidth / AMOUNT ) * window.devicePixelRatio;
-				var HEIGHT = ( window.innerHeight / AMOUNT ) * window.devicePixelRatio;
+				const WIDTH = ( window.innerWidth / AMOUNT ) * window.devicePixelRatio;
+				const HEIGHT = ( window.innerHeight / AMOUNT ) * window.devicePixelRatio;
 
-				var cameras = [];
+				const cameras = [];
 
-				for ( var y = 0; y < AMOUNT; y ++ ) {
+				for ( let y = 0; y < AMOUNT; y ++ ) {
 
-					for ( var x = 0; x < AMOUNT; x ++ ) {
+					for ( let x = 0; x < AMOUNT; x ++ ) {
 
-						var subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
+						const subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
 						subcamera.viewport = new THREE.Vector4( Math.floor( x * WIDTH ), Math.floor( y * HEIGHT ), Math.ceil( WIDTH ), Math.ceil( HEIGHT ) );
 						subcamera.position.x = ( x / AMOUNT ) - 0.5;
 						subcamera.position.y = 0.5 - ( y / AMOUNT );
@@ -53,24 +53,24 @@
 
 				scene.add( new THREE.AmbientLight( 0x222244 ) );
 
-				var light = new THREE.DirectionalLight();
+				const light = new THREE.DirectionalLight();
 				light.position.set( 0.5, 0.5, 1 );
 				light.castShadow = true;
 				light.shadow.camera.zoom = 4; // tighter shadow map
 				scene.add( light );
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x000066 } );
+				const geometryBackground = new THREE.PlaneBufferGeometry( 100, 100 );
+				const materialBackground = new THREE.MeshPhongMaterial( { color: 0x000066 } );
 
-				var background = new THREE.Mesh( geometry, material );
+				const background = new THREE.Mesh( geometryBackground, materialBackground );
 				background.receiveShadow = true;
 				background.position.set( 0, 0, - 1 );
 				scene.add( background );
 
-				var geometry = new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 32 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
+				const geometryCylinder = new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 32 );
+				const materialCylinder = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometryCylinder, materialCylinder );
 				mesh.castShadow = true;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
@@ -89,18 +89,18 @@
 
 			function onWindowResize() {
 
-				var ASPECT_RATIO = window.innerWidth / window.innerHeight;
-				var WIDTH = ( window.innerWidth / AMOUNT ) * window.devicePixelRatio;
-				var HEIGHT = ( window.innerHeight / AMOUNT ) * window.devicePixelRatio;
+				const ASPECT_RATIO = window.innerWidth / window.innerHeight;
+				const WIDTH = ( window.innerWidth / AMOUNT ) * window.devicePixelRatio;
+				const HEIGHT = ( window.innerHeight / AMOUNT ) * window.devicePixelRatio;
 
 				camera.aspect = ASPECT_RATIO;
 				camera.updateProjectionMatrix();
 
-				for ( var y = 0; y < AMOUNT; y ++ ) {
+				for ( let y = 0; y < AMOUNT; y ++ ) {
 
-					for ( var x = 0; x < AMOUNT; x ++ ) {
+					for ( let x = 0; x < AMOUNT; x ++ ) {
 
-						var subcamera = camera.cameras[ AMOUNT * y + x ];
+						const subcamera = camera.cameras[ AMOUNT * y + x ];
 
 						subcamera.viewport.set(
 							Math.floor( x * WIDTH ),

examples/webgl_camera_cinematic.html

@@ -30,10 +30,12 @@
 
 			import { CinematicCamera } from './jsm/cameras/CinematicCamera.js';
 
-			var camera, scene, raycaster, renderer, stats;
+			let camera, scene, raycaster, renderer, stats;
 
-			var mouse = new THREE.Vector2(), INTERSECTED;
-			var radius = 100, theta = 0;
+			const mouse = new THREE.Vector2();
+			let INTERSECTED;
+			const radius = 100;
+			let theta = 0;
 
 			init();
 			animate();
@@ -49,15 +51,15 @@
 
 				scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 0.35 );
+				const light = new THREE.DirectionalLight( 0xffffff, 0.35 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				const geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 
-				for ( var i = 0; i < 1500; i ++ ) {
+				for ( let i = 0; i < 1500; i ++ ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 					object.position.x = Math.random() * 800 - 400;
 					object.position.y = Math.random() * 800 - 400;
@@ -81,7 +83,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var effectController = {
+				const effectController = {
 
 					focalLength: 15,
 					// jsDepthCalculation: true,
@@ -109,9 +111,9 @@
 
 				};
 
-				var matChanger = function ( ) {
+				const matChanger = function ( ) {
 
-					for ( var e in effectController ) {
+					for ( const e in effectController ) {
 
 						if ( e in camera.postprocessing.bokeh_uniforms ) {
 
@@ -130,7 +132,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( effectController, 'focalLength', 1, 135, 0.01 ).onChange( matChanger );
 				gui.add( effectController, 'fstop', 1.8, 22, 0.01 ).onChange( matChanger );
@@ -186,11 +188,11 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersects = raycaster.intersectObjects( scene.children );
+				const intersects = raycaster.intersectObjects( scene.children );
 
 				if ( intersects.length > 0 ) {
 
-					var targetDistance = intersects[ 0 ].distance;
+					const targetDistance = intersects[ 0 ].distance;
 
 					camera.focusAt( targetDistance ); // using Cinematic camera focusAt method
 

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -69,21 +69,21 @@
 			import Stats from './jsm/libs/stats.module.js';
 
 			// 1 micrometer to 100 billion light years in one scene, with 1 unit = 1 meter?  preposterous!  and yet...
-			var NEAR = 1e-6, FAR = 1e27;
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-			var screensplit = .25, screensplit_right = 0;
-			var mouse = [ .5, .5 ];
-			var zoompos = - 100, minzoomspeed = .015;
-			var zoomspeed = minzoomspeed;
+			const NEAR = 1e-6, FAR = 1e27;
+			let SCREEN_WIDTH = window.innerWidth;
+			let SCREEN_HEIGHT = window.innerHeight;
+			let screensplit = .25, screensplit_right = 0;
+			const mouse = [ .5, .5 ];
+			let zoompos = - 100, minzoomspeed = .015;
+			let zoomspeed = minzoomspeed;
 
-			var container, border, stats;
-			var objects = {};
+			let container, border, stats;
+			const objects = {};
 
 			// Generate a number of text labels, from 1µm in size up to 100,000,000 light years
 			// Try to use some descriptive real-world examples of objects at each scale
 
-			var labeldata = [
+			const labeldata = [
 				{ size: .01, scale: 0.0001, label: "microscopic (1µm)" }, // FIXME - triangulating text fails at this size, so we scale instead
 				{ size: .01, scale: 0.1, label: "minuscule (1mm)" },
 				{ size: .01, scale: 1.0, label: "tiny (1cm)" },
@@ -107,10 +107,10 @@
 
 				container = document.getElementById( 'container' );
 
-				var loader = new THREE.FontLoader();
+				const loader = new THREE.FontLoader();
 				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
-					var scene = initScene( font );
+					const scene = initScene( font );
 
 					// Initialize two copies of the same scene, one with normal z-buffer and one with logarithmic z-buffer
 					objects.normal = initView( scene, 'normal', false );
@@ -135,12 +135,12 @@
 
 			function initView( scene, name, logDepthBuf ) {
 
-				var framecontainer = document.getElementById( 'container_' + name );
+				const framecontainer = document.getElementById( 'container_' + name );
 
-				var camera = new THREE.PerspectiveCamera( 50, screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
+				const camera = new THREE.PerspectiveCamera( 50, screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
 				scene.add( camera );
 
-				var renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: logDepthBuf } );
+				const renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: logDepthBuf } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH / 2, SCREEN_HEIGHT );
 				renderer.domElement.style.position = "relative";
@@ -153,28 +153,28 @@
 
 			function initScene( font ) {
 
-				var scene = new THREE.Scene();
+				const scene = new THREE.Scene();
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 100, 100, 100 );
 				scene.add( light );
 
-				var materialargs = {
+				const materialargs = {
 					color: 0xffffff,
 					specular: 0x050505,
 					shininess: 50,
 					emissive: 0x000000
 				};
 
-				var geometry = new THREE.SphereBufferGeometry( 0.5, 24, 12 );
+				const geometry = new THREE.SphereBufferGeometry( 0.5, 24, 12 );
 
-				for ( var i = 0; i < labeldata.length; i ++ ) {
+				for ( let i = 0; i < labeldata.length; i ++ ) {
 
-					var scale = labeldata[ i ].scale || 1;
+					const scale = labeldata[ i ].scale || 1;
 
-					var labelgeo = new THREE.TextBufferGeometry( labeldata[ i ].label, {
+					const labelgeo = new THREE.TextBufferGeometry( labeldata[ i ].label, {
 						font: font,
 						size: labeldata[ i ].size,
 						height: labeldata[ i ].size / 2
@@ -187,19 +187,19 @@
 
 					materialargs.color = new THREE.Color().setHSL( Math.random(), 0.5, 0.5 );
 
-					var material = new THREE.MeshPhongMaterial( materialargs );
+					const material = new THREE.MeshPhongMaterial( materialargs );
 
-					var group = new THREE.Group();
+					const group = new THREE.Group();
 					group.position.z = - labeldata[ i ].size * scale;
 					scene.add( group );
 
-					var textmesh = new THREE.Mesh( labelgeo, material );
+					const textmesh = new THREE.Mesh( labelgeo, material );
 					textmesh.scale.set( scale, scale, scale );
 					textmesh.position.z = - labeldata[ i ].size * scale;
 					textmesh.position.y = labeldata[ i ].size / 4 * scale;
 					group.add( textmesh );
 
-					var dotmesh = new THREE.Mesh( geometry, material );
+					const dotmesh = new THREE.Mesh( geometry, material );
 					dotmesh.position.y = - labeldata[ i ].size / 4 * scale;
 					dotmesh.scale.multiplyScalar( labeldata[ i ].size * scale );
 					group.add( dotmesh );
@@ -245,12 +245,12 @@
 			function render() {
 
 				// Put some limits on zooming
-				var minzoom = labeldata[ 0 ].size * labeldata[ 0 ].scale * 1;
-				var maxzoom = labeldata[ labeldata.length - 1 ].size * labeldata[ labeldata.length - 1 ].scale * 100;
-				var damping = ( Math.abs( zoomspeed ) > minzoomspeed ? .95 : 1.0 );
+				const minzoom = labeldata[ 0 ].size * labeldata[ 0 ].scale * 1;
+				const maxzoom = labeldata[ labeldata.length - 1 ].size * labeldata[ labeldata.length - 1 ].scale * 100;
+				let damping = ( Math.abs( zoomspeed ) > minzoomspeed ? .95 : 1.0 );
 
 				// Zoom out faster the further out you go
-				var zoom = THREE.MathUtils.clamp( Math.pow( Math.E, zoompos ), minzoom, maxzoom );
+				const zoom = THREE.MathUtils.clamp( Math.pow( Math.E, zoompos ), minzoom, maxzoom );
 				zoompos = Math.log( zoom );
 
 				// Slow down quickly at the zoom limits
@@ -322,9 +322,9 @@
 
 			function onMouseWheel( ev ) {
 
-				var amount = ev.deltaY;
+				const amount = ev.deltaY;
 				if ( amount === 0 ) return;
-				var dir = amount / Math.abs( amount );
+				const dir = amount / Math.abs( amount );
 				zoomspeed = dir / 10;
 
 				// Slow down default zoom speed after user starts zooming, to give them more control

examples/webgl_clipping.html

@@ -17,7 +17,7 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, scene, renderer, startTime, object, stats;
+			let camera, scene, renderer, startTime, object, stats;
 
 			init();
 			animate();
@@ -34,7 +34,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x505050 ) );
 
-				var spotLight = new THREE.SpotLight( 0xffffff );
+				const spotLight = new THREE.SpotLight( 0xffffff );
 				spotLight.angle = Math.PI / 5;
 				spotLight.penumbra = 0.2;
 				spotLight.position.set( 2, 3, 3 );
@@ -45,7 +45,7 @@
 				spotLight.shadow.mapSize.height = 1024;
 				scene.add( spotLight );
 
-				var dirLight = new THREE.DirectionalLight( 0x55505a, 1 );
+				const dirLight = new THREE.DirectionalLight( 0x55505a, 1 );
 				dirLight.position.set( 0, 3, 0 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.near = 1;
@@ -62,12 +62,12 @@
 
 				// ***** Clipping planes: *****
 
-				var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 );
-				var globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
+				const localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 );
+				const globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
 
 				// Geometry
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0x80ee10,
 					shininess: 100,
 					side: THREE.DoubleSide,
@@ -78,13 +78,13 @@
 
 				} );
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
+				const geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
 
 				object = new THREE.Mesh( geometry, material );
 				object.castShadow = true;
 				scene.add( object );
 
-				var ground = new THREE.Mesh(
+				const ground = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 9, 9, 1, 1 ),
 					new THREE.MeshPhongMaterial( { color: 0xa0adaf, shininess: 150 } )
 				);
@@ -108,20 +108,20 @@
 				document.body.appendChild( renderer.domElement );
 
 				// ***** Clipping setup (renderer): *****
-				var globalPlanes = [ globalPlane ],
+				const globalPlanes = [ globalPlane ],
 					Empty = Object.freeze( [] );
 				renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes
 				renderer.localClippingEnabled = true;
 
 				// Controls
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 1, 0 );
 				controls.update();
 
 				// GUI
 
-				var gui = new GUI(),
+				const gui = new GUI(),
 					folderLocal = gui.addFolder( 'Local Clipping' ),
 					propsLocal = {
 
@@ -211,8 +211,8 @@
 
 			function animate() {
 
-				var currentTime = Date.now();
-				var time = ( currentTime - startTime ) / 1000;
+				const currentTime = Date.now();
+				const time = ( currentTime - startTime ) / 1000;
 
 				requestAnimationFrame( animate );
 

examples/webgl_clipping_advanced.html

@@ -22,12 +22,12 @@
 				// creates a clipping volume from a convex triangular mesh
 				// specified by the arrays 'vertices' and 'indices'
 
-				var n = indices.length / 3,
+				const n = indices.length / 3,
 					result = new Array( n );
 
-				for ( var i = 0, j = 0; i < n; ++ i, j += 3 ) {
+				for ( let i = 0, j = 0; i < n; ++ i, j += 3 ) {
 
-					var a = vertices[ indices[ j ] ],
+					const a = vertices[ indices[ j ] ],
 						b = vertices[ indices[ j + 1 ] ],
 						c = vertices[ indices[ j + 2 ] ];
 
@@ -44,9 +44,9 @@
 
 				// creates an array of n uninitialized plane objects
 
-				var result = new Array( n );
+				const result = new Array( n );
 
-				for ( var i = 0; i !== n; ++ i )
+				for ( let i = 0; i !== n; ++ i )
 					result[ i ] = new THREE.Plane();
 
 				return result;
@@ -57,18 +57,18 @@
 
 				// sets an array of existing planes to transformed 'planesIn'
 
-				for ( var i = 0, n = planesIn.length; i !== n; ++ i )
+				for ( let i = 0, n = planesIn.length; i !== n; ++ i )
 					planesOut[ i ].copy( planesIn[ i ] ).applyMatrix4( matrix );
 
 			}
 
 			function cylindricalPlanes( n, innerRadius ) {
 
-				var result = createPlanes( n );
+				const result = createPlanes( n );
 
-				for ( var i = 0; i !== n; ++ i ) {
+				for ( let i = 0; i !== n; ++ i ) {
 
-					var plane = result[ i ],
+					const plane = result[ i ],
 						angle = i * Math.PI * 2 / n;
 
 					plane.normal.set(
@@ -82,18 +82,18 @@
 
 			}
 
-			var planeToMatrix = ( function () {
+			const planeToMatrix = ( function () {
 
 				// creates a matrix that aligns X/Y to a given plane
 
 				// temporaries:
-				var xAxis = new THREE.Vector3(),
+				const xAxis = new THREE.Vector3(),
 					yAxis = new THREE.Vector3(),
 					trans = new THREE.Vector3();
 
 				return function planeToMatrix( plane ) {
 
-					var zAxis = plane.normal,
+					const zAxis = plane.normal,
 						matrix = new THREE.Matrix4();
 
 					// Hughes & Moeller '99
@@ -125,7 +125,7 @@
 
 			// A regular tetrahedron for the clipping volume:
 
-			var Vertices = [
+			const Vertices = [
 					new THREE.Vector3( + 1, 0, + Math.SQRT1_2 ),
 					new THREE.Vector3( - 1, 0, + Math.SQRT1_2 ),
 					new THREE.Vector3( 0, + 1, - Math.SQRT1_2 ),
@@ -144,7 +144,7 @@
 				Empty = Object.freeze( [] );
 
 
-			var camera, scene, renderer, startTime, stats,
+			let camera, scene, renderer, startTime, stats,
 
 				object, clipMaterial,
 				volumeVisualization,
@@ -163,7 +163,7 @@
 
 				scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
 
-				var spotLight = new THREE.SpotLight( 0xffffff, 0.5 );
+				const spotLight = new THREE.SpotLight( 0xffffff, 0.5 );
 				spotLight.angle = Math.PI / 5;
 				spotLight.penumbra = 0.2;
 				spotLight.position.set( 2, 3, 3 );
@@ -174,7 +174,7 @@
 				spotLight.shadow.mapSize.height = 1024;
 				scene.add( spotLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				dirLight.position.set( 0, 2, 0 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.near = 1;
@@ -202,13 +202,13 @@
 
 				object = new THREE.Group();
 
-				var geometry = new THREE.BoxBufferGeometry( 0.18, 0.18, 0.18 );
+				const geometry = new THREE.BoxBufferGeometry( 0.18, 0.18, 0.18 );
 
-				for ( var z = - 2; z <= 2; ++ z )
-					for ( var y = - 2; y <= 2; ++ y )
-						for ( var x = - 2; x <= 2; ++ x ) {
+				for ( let z = - 2; z <= 2; ++ z )
+					for ( let y = - 2; y <= 2; ++ y )
+						for ( let x = - 2; x <= 2; ++ x ) {
 
-							var mesh = new THREE.Mesh( geometry, clipMaterial );
+							const mesh = new THREE.Mesh( geometry, clipMaterial );
 							mesh.position.set( x / 5, y / 5, z / 5 );
 							mesh.castShadow = true;
 							object.add( mesh );
@@ -218,17 +218,16 @@
 				scene.add( object );
 
 
-				var planeGeometry =
-						new THREE.PlaneBufferGeometry( 3, 3, 1, 1 ),
+				const planeGeometry = new THREE.PlaneBufferGeometry( 3, 3, 1, 1 ),
 
 					color = new THREE.Color();
 
 				volumeVisualization = new THREE.Group();
 				volumeVisualization.visible = false;
 
-				for ( var i = 0, n = Planes.length; i !== n; ++ i ) {
+				for ( let i = 0, n = Planes.length; i !== n; ++ i ) {
 
-					var material = new THREE.MeshBasicMaterial( {
+					const material = new THREE.MeshBasicMaterial( {
 						color: color.setHSL( i / n, 0.5, 0.5 ).getHex(),
 						side: THREE.DoubleSide,
 
@@ -249,7 +248,7 @@
 
 					} );
 
-					var mesh = new THREE.Mesh( planeGeometry, material );
+					const mesh = new THREE.Mesh( planeGeometry, material );
 					mesh.matrixAutoUpdate = false;
 
 					volumeVisualization.add( mesh );
@@ -259,7 +258,7 @@
 				scene.add( volumeVisualization );
 
 
-				var ground = new THREE.Mesh( planeGeometry,
+				const ground = new THREE.Mesh( planeGeometry,
 					new THREE.MeshPhongMaterial( {
 						color: 0xa0adaf, shininess: 10 } ) );
 				ground.rotation.x = - Math.PI / 2;
@@ -269,7 +268,7 @@
 
 				// Renderer
 
-				var container = document.body;
+				const container = document.body;
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.shadowMap.enabled = true;
@@ -289,7 +288,7 @@
 
 				// Controls
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1;
 				controls.maxDistance = 8;
 				controls.target.set( 0, 1, 0 );
@@ -297,7 +296,7 @@
 
 				// GUI
 
-				var gui = new GUI(),
+				const gui = new GUI(),
 					folder = gui.addFolder( "Local Clipping" ),
 					props = {
 						get 'Enabled'() {
@@ -375,19 +374,19 @@
 
 				// set the orientation of an object based on a world matrix
 
-				var parent = object.parent;
+				const parent = object.parent;
 				scene.updateMatrixWorld();
 				object.matrix.getInverse( parent.matrixWorld );
 				object.applyMatrix4( matrix );
 
 			}
 
-			var transform = new THREE.Matrix4(),
+			const transform = new THREE.Matrix4(),
 				tmpMatrix = new THREE.Matrix4();
 
 			function animate() {
 
-				var currentTime = Date.now(),
+				const currentTime = Date.now(),
 					time = ( currentTime - startTime ) / 1000;
 
 				requestAnimationFrame( animate );
@@ -399,16 +398,16 @@
 				object.updateMatrix();
 				transform.copy( object.matrix );
 
-				var bouncy = Math.cos( time * .5 ) * 0.5 + 0.7;
+				const bouncy = Math.cos( time * .5 ) * 0.5 + 0.7;
 				transform.multiply(
 					tmpMatrix.makeScale( bouncy, bouncy, bouncy ) );
 
 				assignTransformedPlanes(
 					clipMaterial.clippingPlanes, Planes, transform );
 
-				var planeMeshes = volumeVisualization.children;
+				const planeMeshes = volumeVisualization.children;
 
-				for ( var i = 0, n = planeMeshes.length; i !== n; ++ i ) {
+				for ( let i = 0, n = planeMeshes.length; i !== n; ++ i ) {
 
 					tmpMatrix.multiplyMatrices( transform, PlaneMatrices[ i ] );
 					setObjectWorldMatrix( planeMeshes[ i ], tmpMatrix );
@@ -417,8 +416,7 @@
 
 				transform.makeRotationY( time * 0.1 );
 
-				assignTransformedPlanes(
-					globalClippingPlanes, GlobalClippingPlanes, transform );
+				assignTransformedPlanes( globalClippingPlanes, GlobalClippingPlanes, transform );
 
 				stats.begin();
 				renderer.render( scene, camera );

examples/webgl_clipping_intersection.html

@@ -16,15 +16,15 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var params = {
+			const params = {
 				clipIntersection: true,
 				planeConstant: 0,
 				showHelpers: false
 			};
 
-			var clipPlanes = [
+			const clipPlanes = [
 				new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 ),
 				new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ),
 				new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), 0 )
@@ -47,28 +47,28 @@
 
 				camera.position.set( - 1.5, 2.5, 3.0 );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render ); // use only if there is no animation loop
 				controls.minDistance = 1;
 				controls.maxDistance = 10;
 				controls.enablePan = false;
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1.5 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1.5 );
 				light.position.set( - 1.25, 1, 1.25 );
 				scene.add( light );
 
-				// var helper = new CameraHelper( light.shadow.camera );
+				// const helper = new CameraHelper( light.shadow.camera );
 				// scene.add( helper );
 
 				//
 
-				var group = new THREE.Group();
+				const group = new THREE.Group();
 
-				for ( var i = 1; i <= 30; i += 2 ) {
+				for ( let i = 1; i <= 30; i += 2 ) {
 
-					var geometry = new THREE.SphereBufferGeometry( i / 30, 48, 24 );
+					const geometry = new THREE.SphereBufferGeometry( i / 30, 48, 24 );
 
-					var material = new THREE.MeshLambertMaterial( {
+					const material = new THREE.MeshLambertMaterial( {
 
 						color: new THREE.Color().setHSL( Math.random(), 0.5, 0.5 ),
 						side: THREE.DoubleSide,
@@ -85,7 +85,7 @@
 
 				// helpers
 
-				var helpers = new THREE.Group();
+				const helpers = new THREE.Group();
 				helpers.add( new THREE.PlaneHelper( clipPlanes[ 0 ], 2, 0xff0000 ) );
 				helpers.add( new THREE.PlaneHelper( clipPlanes[ 1 ], 2, 0x00ff00 ) );
 				helpers.add( new THREE.PlaneHelper( clipPlanes[ 2 ], 2, 0x0000ff ) );
@@ -94,13 +94,13 @@
 
 				// gui
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'clipIntersection' ).name( 'clip intersection' ).onChange( function ( value ) {
 
-					var children = group.children;
+					const children = group.children;
 
-					for ( var i = 0; i < children.length; i ++ ) {
+					for ( let i = 0; i < children.length; i ++ ) {
 
 						children[ i ].material.clipIntersection = value;
 
@@ -112,7 +112,7 @@
 
 				gui.add( params, 'planeConstant', - 1, 1 ).step( 0.01 ).name( 'plane constant' ).onChange( function ( value ) {
 
-					for ( var j = 0; j < clipPlanes.length; j ++ ) {
+					for ( let j = 0; j < clipPlanes.length; j ++ ) {
 
 						clipPlanes[ j ].constant = value;
 

examples/webgl_clipping_stencil.html

@@ -16,11 +16,11 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import Stats from './jsm/libs/stats.module.js';
 
-			var camera, scene, renderer, object, stats;
-			var planes, planeObjects, planeHelpers;
-			var clock;
+			let camera, scene, renderer, object, stats;
+			let planes, planeObjects, planeHelpers;
+			let clock;
 
-			var params = {
+			const params = {
 
 				animate: true,
 				planeX: {
@@ -53,8 +53,8 @@
 
 			function createPlaneStencilGroup( geometry, plane, renderOrder ) {
 
-				var group = new THREE.Group();
-				var baseMat = new THREE.MeshBasicMaterial();
+				const group = new THREE.Group();
+				const baseMat = new THREE.MeshBasicMaterial();
 				baseMat.depthWrite = false;
 				baseMat.depthTest = false;
 				baseMat.colorWrite = false;
@@ -62,26 +62,26 @@
 				baseMat.stencilFunc = THREE.AlwaysStencilFunc;
 
 				// back faces
-				var mat0 = baseMat.clone();
+				const mat0 = baseMat.clone();
 				mat0.side = THREE.BackSide;
 				mat0.clippingPlanes = [ plane ];
 				mat0.stencilFail = THREE.IncrementWrapStencilOp;
 				mat0.stencilZFail = THREE.IncrementWrapStencilOp;
 				mat0.stencilZPass = THREE.IncrementWrapStencilOp;
 
-				var mesh0 = new THREE.Mesh( geometry, mat0 );
+				const mesh0 = new THREE.Mesh( geometry, mat0 );
 				mesh0.renderOrder = renderOrder;
 				group.add( mesh0 );
 
 				// front faces
-				var mat1 = baseMat.clone();
+				const mat1 = baseMat.clone();
 				mat1.side = THREE.FrontSide;
 				mat1.clippingPlanes = [ plane ];
 				mat1.stencilFail = THREE.DecrementWrapStencilOp;
 				mat1.stencilZFail = THREE.DecrementWrapStencilOp;
 				mat1.stencilZPass = THREE.DecrementWrapStencilOp;
 
-				var mesh1 = new THREE.Mesh( geometry, mat1 );
+				const mesh1 = new THREE.Mesh( geometry, mat1 );
 				mesh1.renderOrder = renderOrder;
 
 				group.add( mesh1 );
@@ -101,7 +101,7 @@
 
 				scene.add( new THREE.AmbientLight( 0xffffff, 0.5 ) );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				dirLight.position.set( 5, 10, 7.5 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.right = 2;
@@ -127,21 +127,22 @@
 
 				} );
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.15, 220, 60 );
+				const geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.15, 220, 60 );
 				object = new THREE.Group();
 				scene.add( object );
 
 				// Set up clip plane rendering
 				planeObjects = [];
-				var planeGeom = new THREE.PlaneBufferGeometry( 4, 4 );
-				for ( var i = 0; i < 3; i ++ ) {
+				const planeGeom = new THREE.PlaneBufferGeometry( 4, 4 );
 
-					var poGroup = new THREE.Group();
-					var plane = planes[ i ];
-					var stencilGroup = createPlaneStencilGroup( geometry, plane, i + 1 );
+				for ( let i = 0; i < 3; i ++ ) {
+
+					const poGroup = new THREE.Group();
+					const plane = planes[ i ];
+					const stencilGroup = createPlaneStencilGroup( geometry, plane, i + 1 );
 
 					// plane is clipped by the other clipping planes
-					var planeMat =
+					const planeMat =
 						new THREE.MeshStandardMaterial( {
 
 							color: 0xE91E63,
@@ -157,12 +158,13 @@
 							stencilZPass: THREE.ReplaceStencilOp,
 
 						} );
-					var po = new THREE.Mesh( planeGeom, planeMat );
+					const po = new THREE.Mesh( planeGeom, planeMat );
 					po.onAfterRender = function ( renderer ) {
 
 						renderer.clearStencil();
 
 					};
+
 					po.renderOrder = i + 1.1;
 
 					object.add( stencilGroup );
@@ -172,7 +174,7 @@
 
 				}
 
-				var material = new THREE.MeshStandardMaterial( {
+				const material = new THREE.MeshStandardMaterial( {
 
 					color: 0xFFC107,
 					metalness: 0.1,
@@ -184,13 +186,13 @@
 				} );
 
 				// add the color
-				var clippedColorFront = new THREE.Mesh( geometry, material );
+				const clippedColorFront = new THREE.Mesh( geometry, material );
 				clippedColorFront.castShadow = true;
 				clippedColorFront.renderOrder = 6;
 				object.add( clippedColorFront );
 
 
-				var ground = new THREE.Mesh(
+				const ground = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 9, 9, 1, 1 ),
 					new THREE.ShadowMaterial( { color: 0, opacity: 0.25, side: THREE.DoubleSide } )
 				);
@@ -216,16 +218,16 @@
 				renderer.localClippingEnabled = true;
 
 				// Controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 2;
 				controls.maxDistance = 20;
 				controls.update();
 
 				// GUI
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( params, 'animate' );
 
-				var planeX = gui.addFolder( 'planeX' );
+				const planeX = gui.addFolder( 'planeX' );
 				planeX.add( params.planeX, 'displayHelper' ).onChange( v => planeHelpers[ 0 ].visible = v );
 				planeX.add( params.planeX, 'constant' ).min( - 1 ).max( 1 ).onChange( d => planes[ 0 ].constant = d );
 				planeX.add( params.planeX, 'negated' ).onChange( () => {
@@ -236,7 +238,7 @@
 				} );
 				planeX.open();
 
-				var planeY = gui.addFolder( 'planeY' );
+				const planeY = gui.addFolder( 'planeY' );
 				planeY.add( params.planeY, 'displayHelper' ).onChange( v => planeHelpers[ 1 ].visible = v );
 				planeY.add( params.planeY, 'constant' ).min( - 1 ).max( 1 ).onChange( d => planes[ 1 ].constant = d );
 				planeY.add( params.planeY, 'negated' ).onChange( () => {
@@ -247,7 +249,7 @@
 				} );
 				planeY.open();
 
-				var planeZ = gui.addFolder( 'planeZ' );
+				const planeZ = gui.addFolder( 'planeZ' );
 				planeZ.add( params.planeZ, 'displayHelper' ).onChange( v => planeHelpers[ 2 ].visible = v );
 				planeZ.add( params.planeZ, 'constant' ).min( - 1 ).max( 1 ).onChange( d => planes[ 2 ].constant = d );
 				planeZ.add( params.planeZ, 'negated' ).onChange( () => {
@@ -271,7 +273,7 @@
 
 			function animate() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				requestAnimationFrame( animate );
 
@@ -282,10 +284,10 @@
 
 				}
 
-				for ( var i = 0; i < planeObjects.length; i ++ ) {
+				for ( let i = 0; i < planeObjects.length; i ++ ) {
 
-					var plane = planes[ i ];
-					var po = planeObjects[ i ];
+					const plane = planes[ i ];
+					const po = planeObjects[ i ];
 					plane.coplanarPoint( po.position );
 					po.lookAt(
 						po.position.x - plane.normal.x,

examples/webgl_custom_attributes.html

@@ -62,11 +62,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var renderer, scene, camera, stats;
+			let renderer, scene, camera, stats;
 
-			var sphere, uniforms;
+			let sphere, uniforms;
 
-			var displacement, noise;
+			let displacement, noise;
 
 			init();
 			animate();
@@ -89,7 +89,7 @@
 
 				uniforms[ "colorTexture" ].value.wrapS = uniforms[ "colorTexture" ].value.wrapT = THREE.RepeatWrapping;
 
-				var shaderMaterial = new THREE.ShaderMaterial( {
+				const shaderMaterial = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
@@ -98,14 +98,14 @@
 				} );
 
 
-				var radius = 50, segments = 128, rings = 64;
+				const radius = 50, segments = 128, rings = 64;
 
-				var geometry = new THREE.SphereBufferGeometry( radius, segments, rings );
+				const geometry = new THREE.SphereBufferGeometry( radius, segments, rings );
 
 				displacement = new Float32Array( geometry.attributes.position.count );
 				noise = new Float32Array( geometry.attributes.position.count );
 
-				for ( var i = 0; i < displacement.length; i ++ ) {
+				for ( let i = 0; i < displacement.length; i ++ ) {
 
 					noise[ i ] = Math.random() * 5;
 
@@ -120,7 +120,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -152,14 +152,14 @@
 
 			function render() {
 
-				var time = Date.now() * 0.01;
+				const time = Date.now() * 0.01;
 
 				sphere.rotation.y = sphere.rotation.z = 0.01 * time;
 
 				uniforms[ "amplitude" ].value = 2.5 * Math.sin( sphere.rotation.y * 0.125 );
 				uniforms[ "color" ].value.offsetHSL( 0.0005, 0, 0 );
 
-				for ( var i = 0; i < displacement.length; i ++ ) {
+				for ( let i = 0; i < displacement.length; i ++ ) {
 
 					displacement[ i ] = Math.sin( 0.1 * i + time );
 

examples/webgl_custom_attributes_lines.html

@@ -53,11 +53,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var renderer, scene, camera, stats;
+			let renderer, scene, camera, stats;
 
-			var line, uniforms;
+			let line, uniforms;
 
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
 				init( font );
@@ -81,7 +81,7 @@
 
 				};
 
-				var shaderMaterial = new THREE.ShaderMaterial( {
+				const shaderMaterial = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
@@ -93,7 +93,7 @@
 				} );
 
 
-				var geometry = new THREE.TextBufferGeometry( 'three.js', {
+				const geometry = new THREE.TextBufferGeometry( 'three.js', {
 
 					font: font,
 
@@ -110,17 +110,17 @@
 
 				geometry.center();
 
-				var count = geometry.attributes.position.count;
+				const count = geometry.attributes.position.count;
 
-				var displacement = new THREE.Float32BufferAttribute( count * 3, 3 );
+				const displacement = new THREE.Float32BufferAttribute( count * 3, 3 );
 				geometry.setAttribute( 'displacement', displacement );
 
-				var customColor = new THREE.Float32BufferAttribute( count * 3, 3 );
+				const customColor = new THREE.Float32BufferAttribute( count * 3, 3 );
 				geometry.setAttribute( 'customColor', customColor );
 
-				var color = new THREE.Color( 0xffffff );
+				const color = new THREE.Color( 0xffffff );
 
-				for ( var i = 0, l = customColor.count; i < l; i ++ ) {
+				for ( let i = 0, l = customColor.count; i < l; i ++ ) {
 
 					color.setHSL( i / l, 0.5, 0.5 );
 					color.toArray( customColor.array, i * customColor.itemSize );
@@ -135,7 +135,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -167,17 +167,17 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				line.rotation.y = 0.25 * time;
 
 				uniforms.amplitude.value = Math.sin( 0.5 * time );
 				uniforms.color.value.offsetHSL( 0.0005, 0, 0 );
 
-				var attributes = line.geometry.attributes;
-				var array = attributes.displacement.array;
+				const attributes = line.geometry.attributes;
+				const array = attributes.displacement.array;
 
-				for ( var i = 0, l = array.length; i < l; i += 3 ) {
+				for ( let i = 0, l = array.length; i < l; i += 3 ) {
 
 					array[ i ] += 0.3 * ( 0.5 - Math.random() );
 					array[ i + 1 ] += 0.3 * ( 0.5 - Math.random() );

examples/webgl_custom_attributes_points.html

@@ -54,12 +54,12 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var renderer, scene, camera, stats;
+			let renderer, scene, camera, stats;
 
-			var sphere;
+			let sphere;
 
-			var WIDTH = window.innerWidth;
-			var HEIGHT = window.innerHeight;
+			const WIDTH = window.innerWidth;
+			const HEIGHT = window.innerHeight;
 
 			init();
 			animate();
@@ -71,17 +71,17 @@
 
 				scene = new THREE.Scene();
 
-				var amount = 100000;
-				var radius = 200;
+				const amount = 100000;
+				const radius = 200;
 
-				var positions = new Float32Array( amount * 3 );
-				var colors = new Float32Array( amount * 3 );
-				var sizes = new Float32Array( amount );
+				const positions = new Float32Array( amount * 3 );
+				const colors = new Float32Array( amount * 3 );
+				const sizes = new Float32Array( amount );
 
-				var vertex = new THREE.Vector3();
-				var color = new THREE.Color( 0xffffff );
+				const vertex = new THREE.Vector3();
+				const color = new THREE.Color( 0xffffff );
 
-				for ( var i = 0; i < amount; i ++ ) {
+				for ( let i = 0; i < amount; i ++ ) {
 
 					vertex.x = ( Math.random() * 2 - 1 ) * radius;
 					vertex.y = ( Math.random() * 2 - 1 ) * radius;
@@ -104,14 +104,14 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 				geometry.setAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
 				geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
 
 				//
 
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 
 					uniforms: {
 						color: { value: new THREE.Color( 0xffffff ) },
@@ -137,7 +137,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -169,14 +169,14 @@
 
 			function render() {
 
-				var time = Date.now() * 0.005;
+				const time = Date.now() * 0.005;
 
 				sphere.rotation.z = 0.01 * time;
 
-				var geometry = sphere.geometry;
-				var attributes = geometry.attributes;
+				const geometry = sphere.geometry;
+				const attributes = geometry.attributes;
 
-				for ( var i = 0; i < attributes.size.array.length; i ++ ) {
+				for ( let i = 0; i < attributes.size.array.length; i ++ ) {
 
 					attributes.size.array[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );
 

examples/webgl_custom_attributes_points2.html

@@ -55,11 +55,11 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var renderer, scene, camera, stats;
-			var sphere, length1;
+			let renderer, scene, camera, stats;
+			let sphere, length1;
 
-			var WIDTH = window.innerWidth;
-			var HEIGHT = window.innerHeight;
+			const WIDTH = window.innerWidth;
+			const HEIGHT = window.innerHeight;
 
 			init();
 			animate();
@@ -71,25 +71,24 @@
 
 				scene = new THREE.Scene();
 
-				var radius = 100, segments = 68, rings = 38;
+				const radius = 100, segments = 68, rings = 38;
 
-				var vertices1 = new THREE.SphereGeometry( radius, segments, rings ).vertices;
-				var vertices2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 ).vertices;
+				const vertices1 = new THREE.SphereGeometry( radius, segments, rings ).vertices;
+				const vertices2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 ).vertices;
 
 				length1 = vertices1.length;
 
-				var vertices = vertices1.concat( vertices2 );
+				const vertices = vertices1.concat( vertices2 );
 
-				var positions = new Float32Array( vertices.length * 3 );
-				var colors = new Float32Array( vertices.length * 3 );
-				var sizes = new Float32Array( vertices.length );
+				const positions = new Float32Array( vertices.length * 3 );
+				const colors = new Float32Array( vertices.length * 3 );
+				const sizes = new Float32Array( vertices.length );
 
-				var vertex;
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				for ( var i = 0, l = vertices.length; i < l; i ++ ) {
+				for ( let i = 0, l = vertices.length; i < l; i ++ ) {
 
-					vertex = vertices[ i ];
+					const vertex = vertices[ i ];
 					vertex.toArray( positions, i * 3 );
 
 					if ( i < length1 ) {
@@ -108,18 +107,18 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 				geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
 				geometry.setAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
 
 				//
 
-				var texture = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
+				const texture = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
 				texture.wrapS = THREE.RepeatWrapping;
 				texture.wrapT = THREE.RepeatWrapping;
 
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 
 					uniforms: {
 						color: { value: new THREE.Color( 0xffffff ) },
@@ -142,7 +141,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -165,27 +164,27 @@
 
 			function sortPoints() {
 
-				var vector = new THREE.Vector3();
+				const vector = new THREE.Vector3();
 
 				// Model View Projection matrix
 
-				var matrix = new THREE.Matrix4();
+				const matrix = new THREE.Matrix4();
 				matrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 				matrix.multiply( sphere.matrixWorld );
 
 				//
 
-				var geometry = sphere.geometry;
+				const geometry = sphere.geometry;
 
-				var index = geometry.getIndex();
-				var positions = geometry.getAttribute( 'position' ).array;
-				var length = positions.length / 3;
+				let index = geometry.getIndex();
+				const positions = geometry.getAttribute( 'position' ).array;
+				const length = positions.length / 3;
 
 				if ( index === null ) {
 
-					var array = new Uint16Array( length );
+					const array = new Uint16Array( length );
 
-					for ( var i = 0; i < length; i ++ ) {
+					for ( let i = 0; i < length; i ++ ) {
 
 						array[ i ] = i;
 
@@ -197,9 +196,9 @@
 
 				}
 
-				var sortArray = [];
+				const sortArray = [];
 
-				for ( var i = 0; i < length; i ++ ) {
+				for ( let i = 0; i < length; i ++ ) {
 
 					vector.fromArray( positions, i * 3 );
 					vector.applyMatrix4( matrix );
@@ -216,9 +215,9 @@
 
 				sortArray.sort( numericalSort );
 
-				var indices = index.array;
+				const indices = index.array;
 
-				for ( var i = 0; i < length; i ++ ) {
+				for ( let i = 0; i < length; i ++ ) {
 
 					indices[ i ] = sortArray[ i ][ 1 ];
 
@@ -239,15 +238,15 @@
 
 			function render() {
 
-				var time = Date.now() * 0.005;
+				const time = Date.now() * 0.005;
 
 				sphere.rotation.y = 0.02 * time;
 				sphere.rotation.z = 0.02 * time;
 
-				var geometry = sphere.geometry;
-				var attributes = geometry.attributes;
+				const geometry = sphere.geometry;
+				const attributes = geometry.attributes;
 
-				for ( var i = 0; i < attributes.size.array.length; i ++ ) {
+				for ( let i = 0; i < attributes.size.array.length; i ++ ) {
 
 					if ( i < length1 ) {
 

examples/webgl_custom_attributes_points3.html

@@ -63,14 +63,14 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var renderer, scene, camera, stats;
+			let renderer, scene, camera, stats;
 
-			var object;
+			let object;
 
-			var vertices1;
+			let vertices1;
 
-			var WIDTH = window.innerWidth;
-			var HEIGHT = window.innerHeight;
+			const WIDTH = window.innerWidth;
+			const HEIGHT = window.innerHeight;
 
 			init();
 			animate();
@@ -82,12 +82,13 @@
 
 				scene = new THREE.Scene();
 
-				var radius = 100, inner = 0.6 * radius;
-				var vertices = [];
+				let radius = 100;
+				const inner = 0.6 * radius;
+				const vertices = [];
 
-				for ( var i = 0; i < 100000; i ++ ) {
+				for ( let i = 0; i < 100000; i ++ ) {
 
-					var vertex = new THREE.Vector3();
+					const vertex = new THREE.Vector3();
 					vertex.x = Math.random() * 2 - 1;
 					vertex.y = Math.random() * 2 - 1;
 					vertex.z = Math.random() * 2 - 1;
@@ -104,13 +105,13 @@
 				vertices1 = vertices.length;
 
 				radius = 200;
-				var geometry2 = new THREE.BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
+				const geometry2 = new THREE.BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
 
-				var matrix = new THREE.Matrix4();
-				var position = new THREE.Vector3();
-				var rotation = new THREE.Euler();
-				var quaternion = new THREE.Quaternion();
-				var scale = new THREE.Vector3( 1, 1, 1 );
+				const matrix = new THREE.Matrix4();
+				const position = new THREE.Vector3();
+				const rotation = new THREE.Euler();
+				const quaternion = new THREE.Quaternion();
+				const scale = new THREE.Vector3( 1, 1, 1 );
 
 				function addGeo( geo, x, y, z, ry ) {
 
@@ -121,7 +122,7 @@
 
 					for ( var i = 0, l = geo.vertices.length; i < l; i ++ ) {
 
-						var vertex = geo.vertices[ i ];
+						const vertex = geo.vertices[ i ];
 						vertices.push( vertex.clone().applyMatrix4( matrix ) );
 
 					}
@@ -144,23 +145,22 @@
 
 				// corner edges
 
-				var geometry3 = new THREE.BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
+				const geometry3 = new THREE.BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
 
 				addGeo( geometry3, 110, 0, 110, 0 );
 				addGeo( geometry3, 110, 0, - 110, 0 );
 				addGeo( geometry3, - 110, 0, 110, 0 );
 				addGeo( geometry3, - 110, 0, - 110, 0 );
 
-				var positions = new Float32Array( vertices.length * 3 );
-				var colors = new Float32Array( vertices.length * 3 );
-				var sizes = new Float32Array( vertices.length );
+				const positions = new Float32Array( vertices.length * 3 );
+				const colors = new Float32Array( vertices.length * 3 );
+				const sizes = new Float32Array( vertices.length );
 
-				var vertex;
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				for ( var i = 0; i < vertices.length; i ++ ) {
+				for ( let i = 0; i < vertices.length; i ++ ) {
 
-					vertex = vertices[ i ];
+					const vertex = vertices[ i ];
 					vertex.toArray( positions, i * 3 );
 
 					if ( i < vertices1 ) {
@@ -179,18 +179,18 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 				geometry.setAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
 				geometry.setAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
 
 				//
 
-				var texture = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
+				const texture = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
 				texture.wrapS = THREE.RepeatWrapping;
 				texture.wrapT = THREE.RepeatWrapping;
 
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 
 					uniforms: {
 						amplitude: { value: 1.0 },
@@ -213,7 +213,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -245,14 +245,14 @@
 
 			function render() {
 
-				var time = Date.now() * 0.01;
+				const time = Date.now() * 0.01;
 
 				object.rotation.y = object.rotation.z = 0.02 * time;
 
-				var geometry = object.geometry;
-				var attributes = geometry.attributes;
+				const geometry = object.geometry;
+				const attributes = geometry.attributes;
 
-				for ( var i = 0; i < attributes.size.array.length; i ++ ) {
+				for ( let i = 0; i < attributes.size.array.length; i ++ ) {
 
 					if ( i < vertices1 ) {
 

examples/webgl_decals.html

@@ -25,26 +25,26 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { DecalGeometry } from './jsm/geometries/DecalGeometry.js';
 
-			var container = document.getElementById( 'container' );
+			const container = document.getElementById( 'container' );
 
-			var renderer, scene, camera, stats;
-			var mesh;
-			var raycaster;
-			var line;
+			let renderer, scene, camera, stats;
+			let mesh;
+			let raycaster;
+			let line;
 
-			var intersection = {
+			const intersection = {
 				intersects: false,
 				point: new THREE.Vector3(),
 				normal: new THREE.Vector3()
 			};
-			var mouse = new THREE.Vector2();
-			var intersects = [];
+			const mouse = new THREE.Vector2();
+			const intersects = [];
 
-			var textureLoader = new THREE.TextureLoader();
-			var decalDiffuse = textureLoader.load( 'textures/decal/decal-diffuse.png' );
-			var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
+			const textureLoader = new THREE.TextureLoader();
+			const decalDiffuse = textureLoader.load( 'textures/decal/decal-diffuse.png' );
+			const decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
 
-			var decalMaterial = new THREE.MeshPhongMaterial( {
+			const decalMaterial = new THREE.MeshPhongMaterial( {
 				specular: 0x444444,
 				map: decalDiffuse,
 				normalMap: decalNormal,
@@ -58,13 +58,13 @@
 				wireframe: false
 			} );
 
-			var decals = [];
-			var mouseHelper;
-			var position = new THREE.Vector3();
-			var orientation = new THREE.Euler();
-			var size = new THREE.Vector3( 10, 10, 10 );
+			const decals = [];
+			let mouseHelper;
+			const position = new THREE.Vector3();
+			const orientation = new THREE.Euler();
+			const size = new THREE.Vector3( 10, 10, 10 );
 
-			var params = {
+			const params = {
 				minScale: 10,
 				maxScale: 20,
 				rotate: true,
@@ -93,21 +93,21 @@
 				camera.position.z = 120;
 				camera.target = new THREE.Vector3();
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 50;
 				controls.maxDistance = 200;
 
 				scene.add( new THREE.AmbientLight( 0x443333 ) );
 
-				var light = new THREE.DirectionalLight( 0xffddcc, 1 );
-				light.position.set( 1, 0.75, 0.5 );
-				scene.add( light );
+				const dirLight1 = new THREE.DirectionalLight( 0xffddcc, 1 );
+				dirLight1.position.set( 1, 0.75, 0.5 );
+				scene.add( dirLight1 );
 
-				var light = new THREE.DirectionalLight( 0xccccff, 1 );
-				light.position.set( - 1, 0.75, - 0.5 );
-				scene.add( light );
+				const dirLight2 = new THREE.DirectionalLight( 0xccccff, 1 );
+				dirLight2.position.set( - 1, 0.75, - 0.5 );
+				scene.add( dirLight2 );
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setFromPoints( [ new THREE.Vector3(), new THREE.Vector3() ] );
 
 				line = new THREE.Line( geometry, new THREE.LineBasicMaterial() );
@@ -123,7 +123,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var moved = false;
+				let moved = false;
 
 				controls.addEventListener( 'change', function () {
 
@@ -173,11 +173,11 @@
 
 					if ( intersects.length > 0 ) {
 
-						var p = intersects[ 0 ].point;
+						const p = intersects[ 0 ].point;
 						mouseHelper.position.copy( p );
 						intersection.point.copy( p );
 
-						var n = intersects[ 0 ].face.normal.clone();
+						const n = intersects[ 0 ].face.normal.clone();
 						n.transformDirection( mesh.matrixWorld );
 						n.multiplyScalar( 10 );
 						n.add( intersects[ 0 ].point );
@@ -185,7 +185,7 @@
 						intersection.normal.copy( intersects[ 0 ].face.normal );
 						mouseHelper.lookAt( n );
 
-						var positions = line.geometry.attributes.position;
+						const positions = line.geometry.attributes.position;
 						positions.setXYZ( 0, p.x, p.y, p.z );
 						positions.setXYZ( 1, n.x, n.y, n.z );
 						positions.needsUpdate = true;
@@ -202,7 +202,7 @@
 
 				}
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'minScale', 1, 30 );
 				gui.add( params, 'maxScale', 1, 30 );
@@ -217,7 +217,7 @@
 
 			function loadLeePerrySmith() {
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
@@ -244,13 +244,13 @@
 
 				if ( params.rotate ) orientation.z = Math.random() * 2 * Math.PI;
 
-				var scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
+				const scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
 				size.set( scale, scale, scale );
 
-				var material = decalMaterial.clone();
+				const material = decalMaterial.clone();
 				material.color.setHex( Math.random() * 0xffffff );
 
-				var m = new THREE.Mesh( new DecalGeometry( mesh, position, orientation, size ), material );
+				const m = new THREE.Mesh( new DecalGeometry( mesh, position, orientation, size ), material );
 
 				decals.push( m );
 				scene.add( m );
@@ -265,7 +265,7 @@
 
 				} );
 
-				decals = [];
+				decals.length = 0;
 
 			}
 

examples/webgl_depth_texture.html

@@ -71,18 +71,18 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, scene, renderer, controls, stats;
-			var target;
-			var postScene, postCamera, postMaterial;
-			var supportsExtension = true;
+			let camera, scene, renderer, controls, stats;
+			let target;
+			let postScene, postCamera, postMaterial;
+			let supportsExtension = true;
 
-			var params = {
+			const params = {
 				format: THREE.DepthFormat,
 				type: THREE.UnsignedShortType
 			};
 
-			var formats = { DepthFormat: THREE.DepthFormat, DepthStencilFormat: THREE.DepthStencilFormat };
-			var types = { UnsignedShortType: THREE.UnsignedShortType, UnsignedIntType: THREE.UnsignedIntType, UnsignedInt248Type: THREE.UnsignedInt248Type };
+			const formats = { DepthFormat: THREE.DepthFormat, DepthStencilFormat: THREE.DepthStencilFormat };
+			const types = { UnsignedShortType: THREE.UnsignedShortType, UnsignedIntType: THREE.UnsignedIntType, UnsignedInt248Type: THREE.UnsignedInt248Type };
 
 			init();
 			animate();
@@ -127,7 +127,7 @@
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				//
-				var gui = new GUI( { width: 300 } );
+				const gui = new GUI( { width: 300 } );
 
 				gui.add( params, 'format', formats ).onChange( setupRenderTarget );
 				gui.add( params, 'type', types ).onChange( setupRenderTarget );
@@ -139,8 +139,8 @@
 
 				if ( target ) target.dispose();
 
-				var format = parseFloat( params.format );
-				var type = parseFloat( params.type );
+				const format = parseFloat( params.format );
+				const type = parseFloat( params.type );
 
 				target = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
 				target.texture.format = THREE.RGBFormat;
@@ -169,8 +169,8 @@
 						tDepth: { value: null }
 					}
 				} );
-				var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
-				var postQuad = new THREE.Mesh( postPlane, postMaterial );
+				const postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
+				const postQuad = new THREE.Mesh( postPlane, postMaterial );
 				postScene = new THREE.Scene();
 				postScene.add( postQuad );
 
@@ -180,19 +180,19 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
-				var material = new THREE.MeshBasicMaterial( { color: 'blue' } );
+				const geometry = new THREE.TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
+				const material = new THREE.MeshBasicMaterial( { color: 'blue' } );
 
-				var count = 50;
-				var scale = 5;
+				const count = 50;
+				const scale = 5;
 
-				for ( var i = 0; i < count; i ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
-					var r = Math.random() * 2.0 * Math.PI;
-					var z = ( Math.random() * 2.0 ) - 1.0;
-					var zScale = Math.sqrt( 1.0 - z * z ) * scale;
+					const r = Math.random() * 2.0 * Math.PI;
+					const z = ( Math.random() * 2.0 ) - 1.0;
+					const zScale = Math.sqrt( 1.0 - z * z ) * scale;
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set(
 						Math.cos( r ) * zScale,
 						Math.sin( r ) * zScale,
@@ -207,11 +207,11 @@
 
 			function onWindowResize() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 				camera.aspect = aspect;
 				camera.updateProjectionMatrix();
 
-				var dpr = renderer.getPixelRatio();
+				const dpr = renderer.getPixelRatio();
 				target.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_effects_anaglyph.html

@@ -18,15 +18,15 @@
 
 			import { AnaglyphEffect } from './jsm/effects/AnaglyphEffect.js';
 
-			var container, camera, scene, renderer, effect;
+			let container, camera, scene, renderer, effect;
 
-			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 );
 
@@ -42,25 +42,25 @@
 				camera.position.z = 3;
 				camera.focalLength = 3;
 
-				var path = "textures/cube/pisa/";
-				var format = '.png';
-				var urls = [
+				const path = "textures/cube/pisa/";
+				const format = '.png';
+				const urls = [
 					path + 'px' + format, path + 'nx' + format,
 					path + 'py' + format, path + 'ny' + format,
 					path + 'pz' + format, path + 'nz' + 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( 0.1, 32, 16 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
+				const geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
+				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
 
-				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() * 10 - 5;
 					mesh.position.y = Math.random() * 10 - 5;
@@ -80,8 +80,8 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 
-				var width = window.innerWidth || 2;
-				var height = window.innerHeight || 2;
+				const width = window.innerWidth || 2;
+				const height = window.innerHeight || 2;
 
 				effect = new AnaglyphEffect( renderer );
 				effect.setSize( width, height );
@@ -123,16 +123,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 = 5 * Math.cos( timer + i );
 					sphere.position.y = 5 * Math.sin( timer + i * 1.1 );

examples/webgl_effects_ascii.html

@@ -17,11 +17,11 @@
 			import { AsciiEffect } from './jsm/effects/AsciiEffect.js';
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
-			var camera, controls, scene, renderer, effect;
+			let camera, controls, scene, renderer, effect;
 
-			var sphere, plane;
+			let sphere, plane;
 
-			var start = Date.now();
+			const start = Date.now();
 
 			init();
 			animate();
@@ -35,13 +35,13 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0, 0, 0 );
 
-				var light = new THREE.PointLight( 0xffffff );
-				light.position.set( 500, 500, 500 );
-				scene.add( light );
+				const pointLight1 = new THREE.PointLight( 0xffffff );
+				pointLight1.position.set( 500, 500, 500 );
+				scene.add( pointLight1 );
 
-				var light = new THREE.PointLight( 0xffffff, 0.25 );
-				light.position.set( - 500, - 500, - 500 );
-				scene.add( light );
+				const pointLight2 = new THREE.PointLight( 0xffffff, 0.25 );
+				pointLight2.position.set( - 500, - 500, - 500 );
+				scene.add( pointLight2 );
 
 				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshPhongMaterial( { flatShading: true } ) );
 				scene.add( sphere );
@@ -96,7 +96,7 @@
 
 			function render() {
 
-				var timer = Date.now() - start;
+				const timer = Date.now() - start;
 
 				sphere.position.y = Math.abs( Math.sin( timer * 0.002 ) ) * 150;
 				sphere.rotation.x = timer * 0.0003;

examples/webgl_effects_parallaxbarrier.html

@@ -19,15 +19,15 @@
 
 			import { ParallaxBarrierEffect } from './jsm/effects/ParallaxBarrierEffect.js';
 
-			var container, camera, scene, renderer, effect;
+			let container, camera, scene, renderer, effect;
 
-			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 );
 
@@ -43,25 +43,25 @@
 				camera.position.z = 3;
 				camera.focalLength = 3;
 
-				var path = "textures/cube/pisa/";
-				var format = '.png';
-				var urls = [
+				const path = "textures/cube/pisa/";
+				const format = '.png';
+				const urls = [
 					path + 'px' + format, path + 'nx' + format,
 					path + 'py' + format, path + 'ny' + format,
 					path + 'pz' + format, path + 'nz' + 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( 0.1, 32, 16 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
+				const geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
+				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
 
-				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() * 10 - 5;
 					mesh.position.y = Math.random() * 10 - 5;
@@ -81,8 +81,8 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 
-				var width = window.innerWidth || 2;
-				var height = window.innerHeight || 2;
+				const width = window.innerWidth || 2;
+				const height = window.innerHeight || 2;
 
 				effect = new ParallaxBarrierEffect( renderer );
 				effect.setSize( width, height );
@@ -124,16 +124,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 = 5 * Math.cos( timer + i );
 					sphere.position.y = 5 * Math.sin( timer + i * 1.1 );

examples/webgl_effects_peppersghost.html

@@ -19,10 +19,10 @@
 
 			import { PeppersGhostEffect } from './jsm/effects/PeppersGhostEffect.js';
 
-			var container;
+			let container;
 
-			var camera, scene, renderer, effect;
-			var group;
+			let camera, scene, renderer, effect;
+			let group;
 
 			init();
 			animate();
@@ -41,16 +41,15 @@
 
 				// Cube
 
-				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
-				geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
+				const geometry = new THREE.BoxBufferGeometry().toNonIndexed(); // ensure unique vertices for each triangle
 
-				var position = geometry.attributes.position;
-				var colors = [];
-				var color = new THREE.Color();
+				const position = geometry.attributes.position;
+				const colors = [];
+				const color = new THREE.Color();
 
 				// generate for each side of the cube a different color
 
-				for ( var i = 0; i < position.count; i += 6 ) {
+				for ( let i = 0; i < position.count; i += 6 ) {
 
 					color.setHex( Math.random() * 0xffffff );
 
@@ -70,11 +69,11 @@
 
 				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				var material = new THREE.MeshBasicMaterial( { vertexColors: true } );
+				const material = new THREE.MeshBasicMaterial( { vertexColors: true } );
 
-				for ( var i = 0; i < 10; i ++ ) {
+				for ( let i = 0; i < 10; i ++ ) {
 
-					var cube = new THREE.Mesh( geometry, material );
+					const cube = new THREE.Mesh( geometry, material );
 					cube.position.x = Math.random() * 2 - 1;
 					cube.position.y = Math.random() * 2 - 1;
 					cube.position.z = Math.random() * 2 - 1;

examples/webgl_effects_stereo.html

@@ -18,14 +18,14 @@
 
 			import { StereoEffect } from './jsm/effects/StereoEffect.js';
 
-			var container, camera, scene, renderer, effect;
+			let container, camera, scene, renderer, effect;
 
-			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,18 +45,18 @@
 					.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 textureCube = new THREE.CubeTextureLoader()
+				const textureCube = new THREE.CubeTextureLoader()
 					.setPath( 'textures/cube/Park3Med/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 				textureCube.mapping = THREE.CubeRefractionMapping;
 
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
+				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
 
-				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;
 					mesh.position.z = Math.random() * 10000 - 5000;
@@ -113,15 +113,15 @@
 
 			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_framebuffer_texture.html

@@ -41,15 +41,15 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, scene, renderer;
-			var mesh, sprite, texture;
+			let camera, scene, renderer;
+			let mesh, sprite, texture;
 
-			var cameraOrtho, sceneOrtho;
+			let cameraOrtho, sceneOrtho;
 
-			var dpr = window.devicePixelRatio;
+			const dpr = window.devicePixelRatio;
 
-			var textureSize = 128 * dpr;
-			var vector = new THREE.Vector2();
+			const textureSize = 128 * dpr;
+			const vector = new THREE.Vector2();
 
 			init();
 			animate();
@@ -58,8 +58,8 @@
 
 				//
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
 				camera.position.z = 20;
@@ -73,23 +73,23 @@
 
 				//
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
-				var material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
+				const geometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
+				const material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
 
 				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
-				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 );
 
 				//
 
-				var data = new Uint8Array( textureSize * textureSize * 3 );
+				const data = new Uint8Array( textureSize * textureSize * 3 );
 
 				texture = new THREE.DataTexture( data, textureSize, textureSize, THREE.RGBFormat );
 				texture.minFilter = THREE.NearestFilter;
@@ -97,7 +97,7 @@
 
 				//
 
-				var spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
+				const spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
 				sprite = new THREE.Sprite( spriteMaterial );
 				sprite.scale.set( textureSize, textureSize, 1 );
 				sceneOrtho.add( sprite );
@@ -114,8 +114,8 @@
 
 				//
 
-				var selection = document.getElementById( 'selection' );
-				var controls = new OrbitControls( camera, selection );
+				const selection = document.getElementById( 'selection' );
+				const controls = new OrbitControls( camera, selection );
 				controls.enablePan = false;
 
 				//
@@ -126,8 +126,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();
@@ -146,11 +146,11 @@
 
 			function updateSpritePosition() {
 
-				var halfWidth = window.innerWidth / 2;
-				var halfHeight = window.innerHeight / 2;
+				const halfWidth = window.innerWidth / 2;
+				const halfHeight = window.innerHeight / 2;
 
-				var halfImageWidth = textureSize / 2;
-				var halfImageHeight = textureSize / 2;
+				const halfImageWidth = textureSize / 2;
+				const halfImageHeight = textureSize / 2;
 
 				sprite.position.set( - halfWidth + halfImageWidth, halfHeight - halfImageHeight, 1 );
 

examples/webgl_furnace_test.html

@@ -19,13 +19,13 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var scene, camera, renderer, radianceMap;
+			let scene, camera, renderer, radianceMap;
 
 			function init() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
-				var aspect = width / height;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+				const aspect = width / height;
 
 				// renderer
 
@@ -69,13 +69,13 @@
 
 			function createObjects() {
 
-				var geometry = new THREE.SphereBufferGeometry( 0.4, 32, 32 );
+				const geometry = new THREE.SphereBufferGeometry( 0.4, 32, 32 );
 
-				for ( var x = 0; x <= 10; x ++ ) {
+				for ( let x = 0; x <= 10; x ++ ) {
 
-					for ( var y = 0; y <= 10; y ++ ) {
+					for ( let y = 0; y <= 10; y ++ ) {
 
-						var material = new THREE.MeshPhysicalMaterial( {
+						const material = new THREE.MeshPhysicalMaterial( {
 							roughness: x / 10,
 							metalness: y / 10,
 							color: 0xffffff,
@@ -84,7 +84,7 @@
 							reflectivity: 1
 						} );
 
-						var mesh = new THREE.Mesh( geometry, material );
+						const mesh = new THREE.Mesh( geometry, material );
 						mesh.position.x = x - 5;
 						mesh.position.y = 5 - y;
 						scene.add( mesh );
@@ -99,10 +99,10 @@
 
 				return new Promise( function ( resolve ) {
 
-					var envScene = new THREE.Scene();
+					const envScene = new THREE.Scene();
 					envScene.background = new THREE.Color( 0xcccccc );
 
-					var pmremGenerator = new THREE.PMREMGenerator( renderer );
+					const pmremGenerator = new THREE.PMREMGenerator( renderer );
 					radianceMap = pmremGenerator.fromScene( envScene ).texture;
 					pmremGenerator.dispose();
 
@@ -116,8 +116,8 @@
 
 			function onResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();

examples/webgl_geometries.html

@@ -16,7 +16,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var camera, scene, renderer, stats;
+			let camera, scene, renderer, stats;
 
 			init();
 			animate();
@@ -28,20 +28,20 @@
 
 				scene = new THREE.Scene();
 
-				var object;
+				let object;
 
-				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 );
 
-				var map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
+				const map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
 
-				var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
+				const material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
 
 				//
 
@@ -85,9 +85,9 @@
 				object.position.set( - 300, 0, - 200 );
 				scene.add( object );
 
-				var points = [];
+				const points = [];
 
-				for ( var i = 0; i < 50; i ++ ) {
+				for ( let i = 0; i < 50; i ++ ) {
 
 					points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
 
@@ -143,7 +143,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.0001;
+				const timer = Date.now() * 0.0001;
 
 				camera.position.x = Math.cos( timer ) * 800;
 				camera.position.z = Math.sin( timer ) * 800;

examples/webgl_geometries_parametric.html

@@ -20,14 +20,14 @@
 			import { Curves } from './jsm/curves/CurveExtras.js';
 			import { ParametricGeometries } from './jsm/geometries/ParametricGeometries.js';
 
-			var camera, scene, renderer, stats;
+			let camera, scene, renderer, stats;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.y = 400;
@@ -36,24 +36,24 @@
 
 				//
 
-				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 );
 
 				//
 
-				var map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
+				const map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
 
-				var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
+				const material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
 
 				//
 
-				var geometry, object;
+				let geometry, object;
 
 				geometry = new THREE.ParametricBufferGeometry( ParametricGeometries.plane( 100, 100 ), 10, 10 );
 				geometry.center();
@@ -75,11 +75,11 @@
 
 				//
 
-				var GrannyKnot = new Curves.GrannyKnot();
+				const GrannyKnot = new Curves.GrannyKnot();
 
-				var torus = new ParametricGeometries.TorusKnotGeometry( 50, 10, 50, 20, 2, 3 );
-				var sphere = new ParametricGeometries.SphereGeometry( 50, 20, 10 );
-				var tube = new ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true );
+				let torus = new ParametricGeometries.TorusKnotGeometry( 50, 10, 50, 20, 2, 3 );
+				let sphere = new ParametricGeometries.SphereGeometry( 50, 20, 10 );
+				let tube = new ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true );
 
 				torus = new THREE.BufferGeometry().fromGeometry( torus );
 				sphere = new THREE.BufferGeometry().fromGeometry( sphere );
@@ -132,7 +132,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.0001;
+				const timer = Date.now() * 0.0001;
 
 				camera.position.x = Math.cos( timer ) * 800;
 				camera.position.z = Math.sin( timer ) * 800;

examples/webgl_geometry_colors.html

@@ -26,14 +26,14 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			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;
 
 			init();
 			animate();
@@ -48,30 +48,30 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
 				// shadow
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 128;
 				canvas.height = 128;
 
-				var context = canvas.getContext( '2d' );
-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
+				const context = canvas.getContext( '2d' );
+				const gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 				gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
 				gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
 
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
+				const shadowTexture = new THREE.CanvasTexture( canvas );
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
+				const shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
+				const shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
-				var shadowMesh;
+				let shadowMesh;
 
 				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
@@ -90,25 +90,25 @@
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				var radius = 200;
+				const radius = 200;
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
+				const geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-				var count = geometry1.attributes.position.count;
+				const count = geometry1.attributes.position.count;
 				geometry1.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-				var geometry2 = geometry1.clone();
-				var geometry3 = geometry1.clone();
+				const geometry2 = geometry1.clone();
+				const geometry3 = geometry1.clone();
 
-				var color = new THREE.Color();
-				var positions1 = geometry1.attributes.position;
-				var positions2 = geometry2.attributes.position;
-				var positions3 = geometry3.attributes.position;
-				var colors1 = geometry1.attributes.color;
-				var colors2 = geometry2.attributes.color;
-				var colors3 = geometry3.attributes.color;
+				const color = new THREE.Color();
+				const positions1 = geometry1.attributes.position;
+				const positions2 = geometry2.attributes.position;
+				const positions3 = geometry3.attributes.position;
+				const colors1 = geometry1.attributes.color;
+				const colors2 = geometry2.attributes.color;
+				const colors3 = geometry3.attributes.color;
 
-				for ( var i = 0; i < count; i ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
 					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
 					colors1.setXYZ( i, color.r, color.g, color.b );
@@ -121,30 +121,30 @@
 
 				}
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xffffff,
 					flatShading: true,
 					vertexColors: true,
 					shininess: 0
 				} );
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
+				const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				var mesh = new THREE.Mesh( geometry1, material );
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+				let mesh = new THREE.Mesh( geometry1, material );
+				let wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = - 400;
 				mesh.rotation.x = - 1.87;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry2, material );
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry2, material );
+				wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = 400;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry3, material );
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry3, material );
+				wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
 				mesh.add( wireframe );
 				scene.add( mesh );
 

examples/webgl_geometry_colors_lookuptable.html

@@ -33,14 +33,14 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Lut } from './jsm/math/Lut.js';
 
-			var container;
+			let container;
 
-			var perpCamera, orthoCamera, renderer, lut;
+			let perpCamera, orthoCamera, renderer, lut;
 
-			var mesh, sprite;
-			var scene, uiScene;
+			let mesh, sprite;
+			let scene, uiScene;
 
-			var params;
+			let params;
 
 			init();
 
@@ -55,8 +55,8 @@
 
 				lut = new Lut();
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				perpCamera = new THREE.PerspectiveCamera( 60, width / height, 1, 100 );
 				perpCamera.position.set( 0, 0, 10 );
@@ -83,7 +83,7 @@
 				};
 				loadModel( );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 1 );
+				const pointLight = new THREE.PointLight( 0xffffff, 1 );
 				perpCamera.add( pointLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -94,10 +94,10 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var controls = new OrbitControls( perpCamera, renderer.domElement );
+				const controls = new OrbitControls( perpCamera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'colorMap', [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ] ).onChange( function () {
 
@@ -110,8 +110,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				perpCamera.aspect = width / height;
 				perpCamera.updateProjectionMatrix();
@@ -131,19 +131,21 @@
 
 			function loadModel( ) {
 
-				var loader = new THREE.BufferGeometryLoader();
+				const loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/pressure.json', function ( geometry ) {
 
 					geometry.center();
 					geometry.computeVertexNormals();
 
 					// default color attribute
-					var colors = [];
-					for ( var i = 0, n = geometry.attributes.position.count; i < n; ++ i ) {
+					const colors = [];
+
+					for ( let i = 0, n = geometry.attributes.position.count; i < n; ++ i ) {
 
 						colors.push( 1, 1, 1 );
 
 					}
+
 					geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 					mesh.geometry = geometry;
@@ -162,14 +164,15 @@
 				lut.setMax( 2000 );
 				lut.setMin( 0 );
 
-				var geometry = mesh.geometry;
-				var pressures = geometry.attributes.pressure;
-				var colors = geometry.attributes.color;
-				for ( var i = 0; i < pressures.array.length; i ++ ) {
+				const geometry = mesh.geometry;
+				const pressures = geometry.attributes.pressure;
+				const colors = geometry.attributes.color;
+
+				for ( let i = 0; i < pressures.array.length; i ++ ) {
 
-					var colorValue = pressures.array[ i ];
+					const colorValue = pressures.array[ i ];
 
-					var color = lut.getColor( colorValue );
+					const color = lut.getColor( colorValue );
 
 					if ( color === undefined ) {
 
@@ -185,7 +188,7 @@
 
 				colors.needsUpdate = true;
 
-				var map = sprite.material.map;
+				const map = sprite.material.map;
 				lut.updateCanvas( map.image );
 				map.needsUpdate = true;
 

examples/webgl_geometry_convex.html

@@ -17,7 +17,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ConvexBufferGeometry } from './jsm/geometries/ConvexGeometry.js';
 
-			var group, camera, scene, renderer;
+			let group, camera, scene, renderer;
 
 			init();
 			animate();
@@ -39,7 +39,7 @@
 
 				// controls
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 20;
 				controls.maxDistance = 50;
 				controls.maxPolarAngle = Math.PI / 2;
@@ -48,7 +48,7 @@
 
 				// light
 
-				var light = new THREE.PointLight( 0xffffff, 1 );
+				const light = new THREE.PointLight( 0xffffff, 1 );
 				camera.add( light );
 
 				// helper
@@ -57,23 +57,23 @@
 
 				// textures
 
-				var loader = new THREE.TextureLoader();
-				var texture = loader.load( 'textures/sprites/disc.png' );
+				const loader = new THREE.TextureLoader();
+				const texture = loader.load( 'textures/sprites/disc.png' );
 
 				group = new THREE.Group();
 				scene.add( group );
 
 				// points
 
-				var vertices = new THREE.DodecahedronGeometry( 10 ).vertices;
+				const vertices = new THREE.DodecahedronGeometry( 10 ).vertices;
 
-				for ( var i = 0; i < vertices.length; i ++ ) {
+				for ( let i = 0; i < vertices.length; i ++ ) {
 
 					//vertices[ i ].add( randomPoint().multiplyScalar( 2 ) ); // wiggle the points
 
 				}
 
-				var pointsMaterial = new THREE.PointsMaterial( {
+				const pointsMaterial = new THREE.PointsMaterial( {
 
 					color: 0x0080ff,
 					map: texture,
@@ -82,30 +82,30 @@
 
 				} );
 
-				var pointsGeometry = new THREE.BufferGeometry().setFromPoints( vertices );
+				const pointsGeometry = new THREE.BufferGeometry().setFromPoints( vertices );
 
-				var points = new THREE.Points( pointsGeometry, pointsMaterial );
+				const points = new THREE.Points( pointsGeometry, pointsMaterial );
 				group.add( points );
 
 				// convex hull
 
-				var meshMaterial = new THREE.MeshLambertMaterial( {
+				const meshMaterial = new THREE.MeshLambertMaterial( {
 					color: 0xffffff,
 					opacity: 0.5,
 					transparent: true
 				} );
 
-				var meshGeometry = new ConvexBufferGeometry( vertices );
+				const meshGeometry = new ConvexBufferGeometry( vertices );
 
-				var mesh = new THREE.Mesh( meshGeometry, meshMaterial );
-				mesh.material.side = THREE.BackSide; // back faces
-				mesh.renderOrder = 0;
-				group.add( mesh );
+				const mesh1 = new THREE.Mesh( meshGeometry, meshMaterial );
+				mesh1.material.side = THREE.BackSide; // back faces
+				mesh1.renderOrder = 0;
+				group.add( mesh1 );
 
-				var mesh = new THREE.Mesh( meshGeometry, meshMaterial.clone() );
-				mesh.material.side = THREE.FrontSide; // front faces
-				mesh.renderOrder = 1;
-				group.add( mesh );
+				const mesh2 = new THREE.Mesh( meshGeometry, meshMaterial.clone() );
+				mesh2.material.side = THREE.FrontSide; // front faces
+				mesh2.renderOrder = 1;
+				group.add( mesh2 );
 
 				//
 

examples/webgl_geometry_cube.html

@@ -12,8 +12,8 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
-			var mesh;
+			let camera, scene, renderer;
+			let mesh;
 
 			init();
 			animate();
@@ -25,10 +25,10 @@
 
 				scene = new THREE.Scene();
 
-				var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
+				const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				const geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				const material = new THREE.MeshBasicMaterial( { map: texture } );
 
 				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );

examples/webgl_geometry_dynamic.html

@@ -26,11 +26,11 @@
 
 			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 
-			var camera, controls, scene, renderer, stats;
+			let camera, controls, scene, renderer, stats;
 
-			var mesh, geometry, material, clock;
+			let mesh, geometry, material, clock;
 
-			var worldWidth = 128, worldDepth = 128;
+			const worldWidth = 128, worldDepth = 128;
 
 			init();
 			animate();
@@ -49,17 +49,17 @@
 				geometry = new THREE.PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
-				var position = geometry.attributes.position;
+				const position = geometry.attributes.position;
 				position.usage = THREE.DynamicDrawUsage;
 
-				for ( var i = 0; i < position.count; i ++ ) {
+				for ( let i = 0; i < position.count; i ++ ) {
 
-					var y = 35 * Math.sin( i / 2 );
+					const y = 35 * Math.sin( i / 2 );
 					position.setY( i, y );
 
 				}
 
-				var texture = new THREE.TextureLoader().load( 'textures/water.jpg' );
+				const texture = new THREE.TextureLoader().load( 'textures/water.jpg' );
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 				texture.repeat.set( 5, 5 );
 
@@ -111,14 +111,14 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
-				var time = clock.getElapsedTime() * 10;
+				const delta = clock.getDelta();
+				const time = clock.getElapsedTime() * 10;
 
-				var position = geometry.attributes.position;
+				const position = geometry.attributes.position;
 
-				for ( var i = 0; i < position.count; i ++ ) {
+				for ( let i = 0; i < position.count; i ++ ) {
 
-					var y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
+					const y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
 					position.setY( i, y );
 
 				}

examples/webgl_geometry_extrude_shapes.html

@@ -23,14 +23,14 @@
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
-			var camera, scene, renderer, controls;
+			let camera, scene, renderer, controls;
 
 			init();
 			animate();
 
 			function init() {
 
-				var info = document.createElement( 'div' );
+				const info = document.createElement( 'div' );
 				info.style.position = 'absolute';
 				info.style.top = '10px';
 				info.style.width = '100%';
@@ -57,13 +57,13 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var light = new THREE.PointLight( 0xffffff );
+				const light = new THREE.PointLight( 0xffffff );
 				light.position.copy( camera.position );
 				scene.add( light );
 
 				//
 
-				var closedSpline = new THREE.CatmullRomCurve3( [
+				const closedSpline = new THREE.CatmullRomCurve3( [
 					new THREE.Vector3( - 60, - 100, 60 ),
 					new THREE.Vector3( - 60, 20, 60 ),
 					new THREE.Vector3( - 60, 120, 60 ),
@@ -74,86 +74,86 @@
 				closedSpline.curveType = 'catmullrom';
 				closedSpline.closed = true;
 
-				var extrudeSettings = {
+				const extrudeSettings1 = {
 					steps: 100,
 					bevelEnabled: false,
 					extrudePath: closedSpline
 				};
 
 
-				var pts = [], count = 3;
+				const pts1 = [], count = 3;
 
-				for ( var i = 0; i < count; i ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
-					var l = 20;
+					const l = 20;
 
-					var a = 2 * i / count * Math.PI;
+					const a = 2 * i / count * Math.PI;
 
-					pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
+					pts1.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
 
 				}
 
-				var shape = new THREE.Shape( pts );
+				const shape1 = new THREE.Shape( pts1 );
 
-				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
+				const geometry1 = new THREE.ExtrudeBufferGeometry( shape1, extrudeSettings1 );
 
-				var material = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
+				const material1 = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh1 = new THREE.Mesh( geometry1, material1 );
 
-				scene.add( mesh );
+				scene.add( mesh1 );
 
 
 				//
 
 
-				var randomPoints = [];
+				const randomPoints = [];
 
-				for ( var i = 0; i < 10; i ++ ) {
+				for ( let i = 0; i < 10; i ++ ) {
 
 					randomPoints.push( new THREE.Vector3( ( i - 4.5 ) * 50, THREE.MathUtils.randFloat( - 50, 50 ), THREE.MathUtils.randFloat( - 50, 50 ) ) );
 
 				}
 
-				var randomSpline = new THREE.CatmullRomCurve3( randomPoints );
+				const randomSpline = new THREE.CatmullRomCurve3( randomPoints );
 
 				//
 
-				var extrudeSettings = {
+				const extrudeSettings2 = {
 					steps: 200,
 					bevelEnabled: false,
 					extrudePath: randomSpline
 				};
 
 
-				var pts = [], numPts = 5;
+				const pts2 = [], numPts = 5;
 
-				for ( var i = 0; i < numPts * 2; i ++ ) {
+				for ( let i = 0; i < numPts * 2; i ++ ) {
 
-					var l = i % 2 == 1 ? 10 : 20;
+					const l = i % 2 == 1 ? 10 : 20;
 
-					var a = i / numPts * Math.PI;
+					const a = i / numPts * Math.PI;
 
-					pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
+					pts2.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
 
 				}
 
-				var shape = new THREE.Shape( pts );
+				const shape2 = new THREE.Shape( pts2 );
 
-				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
+				const geometry2 = new THREE.ExtrudeBufferGeometry( shape2, extrudeSettings2 );
 
-				var material2 = new THREE.MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
+				const material2 = new THREE.MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
 
-				var mesh = new THREE.Mesh( geometry, material2 );
+				const mesh2 = new THREE.Mesh( geometry2, material2 );
 
-				scene.add( mesh );
+				scene.add( mesh2 );
 
 
 				//
 
-				var materials = [ material, material2 ];
+				const materials = [ material1, material2 ];
 
-				var extrudeSettings = {
+				const extrudeSettings3 = {
 					depth: 20,
 					steps: 1,
 					bevelEnabled: true,
@@ -162,13 +162,13 @@
 					bevelSegments: 1
 				};
 
-				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
+				const geometry3 = new THREE.ExtrudeBufferGeometry( shape2, extrudeSettings3 );
 
-				var mesh = new THREE.Mesh( geometry, materials );
+				const mesh3 = new THREE.Mesh( geometry3, materials );
 
-				mesh.position.set( 50, 100, 50 );
+				mesh3.position.set( 50, 100, 50 );
 
-				scene.add( mesh );
+				scene.add( mesh3 );
 
 			}
 

examples/webgl_geometry_extrude_shapes2.html

@@ -32,21 +32,23 @@
 
 			function d3threeD( exports ) {
 
-				var DEGS_TO_RADS = Math.PI / 180;
-				var DIGIT_0 = 48, DIGIT_9 = 57, COMMA = 44, SPACE = 32, PERIOD = 46, MINUS = 45;
+				const DEGS_TO_RADS = Math.PI / 180;
+				const DIGIT_0 = 48, DIGIT_9 = 57, COMMA = 44, SPACE = 32, PERIOD = 46, MINUS = 45;
 
 				exports.transformSVGPath = function transformSVGPath( pathStr ) {
 
-					var path = new THREE.ShapePath();
+					const path = new THREE.ShapePath();
 
-					var idx = 1, len = pathStr.length, activeCmd,
+					let idx = 1, activeCmd,
 						x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
 						x1 = 0, x2 = 0, y1 = 0, y2 = 0,
 						rx = 0, ry = 0, xar = 0, laf = 0, sf = 0, cx, cy;
 
+					const len = pathStr.length;
+
 					function eatNum() {
 
-						var sidx, c, isFloat = false, s;
+						let sidx, c, isFloat = false, s;
 
 						// eat delims
 
@@ -101,7 +103,7 @@
 
 					function nextIsNum() {
 
-						var c;
+						let c;
 
 						// do permanently eat any delims...
 
@@ -120,7 +122,7 @@
 
 					}
 
-					var canRepeat;
+					let canRepeat;
 					activeCmd = pathStr[ 0 ];
 
 					while ( idx <= len ) {
@@ -272,7 +274,7 @@
 
 								// step 2, using x2 as cx'
 
-								var norm = Math.sqrt( ( rx * rx * ry * ry - rx * rx * y1 * y1 - ry * ry * x1 * x1 ) /
+								let norm = Math.sqrt( ( rx * rx * ry * ry - rx * rx * y1 * y1 - ry * ry * x1 * x1 ) /
 									 ( rx * rx * y1 * y1 + ry * ry * x1 * x1 ) );
 
 								if ( laf === sf ) norm = - norm;
@@ -285,10 +287,10 @@
 								cx = Math.cos( xar ) * x2 - Math.sin( xar ) * y2 + ( x + nx ) / 2;
 								cy = Math.sin( xar ) * x2 + Math.cos( xar ) * y2 + ( y + ny ) / 2;
 
-								var u = new THREE.Vector2( 1, 0 );
-								var v = new THREE.Vector2( ( x1 - x2 ) / rx, ( y1 - y2 ) / ry );
+								const u = new THREE.Vector2( 1, 0 );
+								const v = new THREE.Vector2( ( x1 - x2 ) / rx, ( y1 - y2 ) / ry );
 
-								var startAng = Math.acos( u.dot( v ) / u.length() / v.length() );
+								let startAng = Math.acos( u.dot( v ) / u.length() / v.length() );
 
 								if ( ( ( u.x * v.y ) - ( u.y * v.x ) ) < 0 ) startAng = - startAng;
 
@@ -296,7 +298,7 @@
 								u.x = ( - x1 - x2 ) / rx;
 								u.y = ( - y1 - y2 ) / ry;
 
-								var deltaAng = Math.acos( v.dot( u ) / v.length() / u.length() );
+								let deltaAng = Math.acos( v.dot( u ) / v.length() / u.length() );
 
 								// This normalization ends up making our curves fail to triangulate...
 
@@ -328,39 +330,39 @@
 
 			}
 
-			var $d3g = {};
+			const $d3g = {};
 			d3threeD( $d3g );
 
 			/// Part from g0v/twgeojson
 			/// Graphic Engine and Geo Data Init Functions
 
-			var addGeoObject = function ( group, svgObject ) {
+			const addGeoObject = function ( group, svgObject ) {
 
-				var paths = svgObject.paths;
-				var depths = svgObject.depths;
-				var colors = svgObject.colors;
-				var center = svgObject.center;
+				const paths = svgObject.paths;
+				const depths = svgObject.depths;
+				const colors = svgObject.colors;
+				const center = svgObject.center;
 
-				for ( var i = 0; i < paths.length; i ++ ) {
+				for ( let i = 0; i < paths.length; i ++ ) {
 
-					var path = $d3g.transformSVGPath( paths[ i ] );
-					var color = new THREE.Color( colors[ i ] );
-					var material = new THREE.MeshLambertMaterial( {
+					const path = $d3g.transformSVGPath( paths[ i ] );
+					const color = new THREE.Color( colors[ i ] );
+					const material = new THREE.MeshLambertMaterial( {
 						color: color,
 						emissive: color
 					} );
-					var depth = depths[ i ];
-					var simpleShapes = path.toShapes( true );
+					const depth = depths[ i ];
+					const simpleShapes = path.toShapes( true );
 
-					for ( var j = 0; j < simpleShapes.length; j ++ ) {
+					for ( let j = 0; j < simpleShapes.length; j ++ ) {
 
-						var simpleShape = simpleShapes[ j ];
-						var shape3d = new THREE.ExtrudeBufferGeometry( simpleShape, {
+						const simpleShape = simpleShapes[ j ];
+						const shape3d = new THREE.ExtrudeBufferGeometry( simpleShape, {
 							depth: depth,
 							bevelEnabled: false
 						} );
 
-						var mesh = new THREE.Mesh( shape3d, material );
+						const mesh = new THREE.Mesh( shape3d, material );
 						mesh.rotation.x = Math.PI;
 						mesh.translateZ( - depth - 1 );
 						mesh.translateX( - center.x );
@@ -374,7 +376,7 @@
 
 			};
 
-			var renderer, stats, scene, camera;
+			let renderer, stats, scene, camera;
 
 			init();
 			animate();
@@ -383,7 +385,7 @@
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				//
 
@@ -397,27 +399,27 @@
 
 				//
 
-				var group = new THREE.Group();
+				const group = new THREE.Group();
 				scene.add( group );
 
 				//
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
 				directionalLight.position.set( 0.75, 0.75, 1.0 ).normalize();
 				scene.add( directionalLight );
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.2 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.2 );
 				scene.add( ambientLight );
 
 				//
 
-				var helper = new THREE.GridHelper( 160, 10 );
+				const helper = new THREE.GridHelper( 160, 10 );
 				helper.rotation.x = Math.PI / 2;
 				group.add( helper );
 
 				//
 
-				var obj = initSVGObject();
+				const obj = initSVGObject();
 				addGeoObject( group, obj );
 
 				//
@@ -429,7 +431,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 100;
 				controls.maxDistance = 1000;
 
@@ -446,7 +448,7 @@
 
 			function initSVGObject() {
 
-				var obj = {};
+				const obj = {};
 
 				/// The geo data from Taipei City, Keelung City, Taipei County in SVG form
 				obj.paths = [

examples/webgl_geometry_extrude_splines.html

@@ -33,17 +33,17 @@
 			import { Curves } from './jsm/curves/CurveExtras.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
+			let camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
 
-			var direction = new THREE.Vector3();
-			var binormal = new THREE.Vector3();
-			var normal = new THREE.Vector3();
-			var position = new THREE.Vector3();
-			var lookAt = new THREE.Vector3();
+			const direction = new THREE.Vector3();
+			const binormal = new THREE.Vector3();
+			const normal = new THREE.Vector3();
+			const position = new THREE.Vector3();
+			const lookAt = new THREE.Vector3();
 
-			var pipeSpline = new THREE.CatmullRomCurve3( [
+			const pipeSpline = new THREE.CatmullRomCurve3( [
 				new THREE.Vector3( 0, 10, - 10 ), new THREE.Vector3( 10, 0, - 10 ),
 				new THREE.Vector3( 20, 0, 0 ), new THREE.Vector3( 30, 0, 10 ),
 				new THREE.Vector3( 30, 0, 20 ), new THREE.Vector3( 20, 0, 30 ),
@@ -60,7 +60,7 @@
 				new THREE.Vector3( 90, 0, 0 ), new THREE.Vector3( 100, 0, 0 )
 			] );
 
-			var sampleClosedSpline = new THREE.CatmullRomCurve3( [
+			const sampleClosedSpline = new THREE.CatmullRomCurve3( [
 				new THREE.Vector3( 0, - 40, - 40 ),
 				new THREE.Vector3( 0, 40, - 40 ),
 				new THREE.Vector3( 0, 140, - 40 ),
@@ -72,7 +72,7 @@
 			sampleClosedSpline.closed = true;
 
 			// Keep a dictionary of Curve instances
-			var splines = {
+			const splines = {
 				GrannyKnot: new Curves.GrannyKnot(),
 				HeartCurve: new Curves.HeartCurve( 3.5 ),
 				VivianiCurve: new Curves.VivianiCurve( 70 ),
@@ -91,9 +91,9 @@
 				SampleClosedSpline: sampleClosedSpline
 			};
 
-			var parent, tubeGeometry, mesh;
+			let parent, tubeGeometry, mesh;
 
-			var params = {
+			const params = {
 				spline: 'GrannyKnot',
 				scale: 4,
 				extrusionSegments: 100,
@@ -104,9 +104,9 @@
 				cameraHelper: false,
 			};
 
-			var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
+			const material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
 
-			var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true, transparent: true } );
+			const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true, transparent: true } );
 
 			function addTube() {
 
@@ -117,7 +117,7 @@
 
 				}
 
-				var extrudePath = splines[ params.spline ];
+				const extrudePath = splines[ params.spline ];
 
 				tubeGeometry = new THREE.TubeBufferGeometry( extrudePath, params.extrusionSegments, 2, params.radiusSegments, params.closed );
 
@@ -139,7 +139,7 @@
 				// 3D shape
 
 				mesh = new THREE.Mesh( geometry, material );
-				var wireframe = new THREE.Mesh( geometry, wireframeMaterial );
+				const wireframe = new THREE.Mesh( geometry, wireframeMaterial );
 				mesh.add( wireframe );
 
 				parent.add( mesh );
@@ -172,7 +172,7 @@
 
 				// light
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
@@ -211,9 +211,9 @@
 
 				// dat.GUI
 
-				var gui = new GUI( { width: 300 } );
+				const gui = new GUI( { width: 300 } );
 
-				var folderGeometry = gui.addFolder( 'Geometry' );
+				const folderGeometry = gui.addFolder( 'Geometry' );
 				folderGeometry.add( params, 'spline', Object.keys( splines ) ).onChange( function () {
 
 					addTube();
@@ -241,7 +241,7 @@
 				} );
 				folderGeometry.open();
 
-				var folderCamera = gui.addFolder( 'Camera' );
+				const folderCamera = gui.addFolder( 'Camera' );
 				folderCamera.add( params, 'animationView' ).onChange( function () {
 
 					animateCamera();
@@ -259,7 +259,7 @@
 				} );
 				folderCamera.open();
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 100;
 				controls.maxDistance = 2000;
 
@@ -291,25 +291,25 @@
 
 				// animate camera along spline
 
-				var time = Date.now();
-				var looptime = 20 * 1000;
-				var t = ( time % looptime ) / looptime;
+				const time = Date.now();
+				const looptime = 20 * 1000;
+				const t = ( time % looptime ) / looptime;
 
 				tubeGeometry.parameters.path.getPointAt( t, position );
 				position.multiplyScalar( params.scale );
 
 				// interpolation
 
-				var segments = tubeGeometry.tangents.length;
-				var pickt = t * segments;
-				var pick = Math.floor( pickt );
-				var pickNext = ( pick + 1 ) % segments;
+				const segments = tubeGeometry.tangents.length;
+				const pickt = t * segments;
+				const pick = Math.floor( pickt );
+				const pickNext = ( pick + 1 ) % segments;
 
 				binormal.subVectors( tubeGeometry.binormals[ pickNext ], tubeGeometry.binormals[ pick ] );
 				binormal.multiplyScalar( pickt - pick ).add( tubeGeometry.binormals[ pick ] );
 
 				tubeGeometry.parameters.path.getTangentAt( t, direction );
-				var offset = 15;
+				const offset = 15;
 
 				normal.copy( binormal ).cross( direction );
 

examples/webgl_geometry_hierarchy.html

@@ -14,12 +14,12 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var camera, scene, renderer, stats, group;
+			let camera, scene, renderer, stats, group;
 
-			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();
@@ -33,14 +33,14 @@
 				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
 
-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
-				var material = new THREE.MeshNormalMaterial();
+				const geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
+				const material = new THREE.MeshNormalMaterial();
 
 				group = new THREE.Group();
 
-				for ( var i = 0; i < 1000; i ++ ) {
+				for ( let i = 0; i < 1000; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 2000 - 1000;
 					mesh.position.y = Math.random() * 2000 - 1000;
 					mesh.position.z = Math.random() * 2000 - 1000;
@@ -111,9 +111,9 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
-				var rx = Math.sin( time * 0.7 ) * 0.5,
+				const rx = Math.sin( time * 0.7 ) * 0.5,
 					ry = Math.sin( time * 0.3 ) * 0.5,
 					rz = Math.sin( time * 0.2 ) * 0.5;
 

examples/webgl_geometry_hierarchy2.html

@@ -14,12 +14,12 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var camera, scene, renderer, stats, root;
+			let camera, scene, renderer, stats, root;
 
-			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();
@@ -32,16 +32,17 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
-				var material = new THREE.MeshNormalMaterial();
+				const geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
+				const material = new THREE.MeshNormalMaterial();
 
 				root = new THREE.Mesh( geometry, material );
 				root.position.x = 1000;
 				scene.add( root );
 
-				var amount = 200, object, parent = root;
+				const amount = 200;
+				let object, parent = root;
 
-				for ( var i = 0; i < amount; i ++ ) {
+				for ( let i = 0; i < amount; i ++ ) {
 
 					object = new THREE.Mesh( geometry, material );
 					object.position.x = 100;
@@ -53,7 +54,7 @@
 
 				parent = root;
 
-				for ( var i = 0; i < amount; i ++ ) {
+				for ( let i = 0; i < amount; i ++ ) {
 
 					object = new THREE.Mesh( geometry, material );
 					object.position.x = - 100;
@@ -65,7 +66,7 @@
 
 				parent = root;
 
-				for ( var i = 0; i < amount; i ++ ) {
+				for ( let i = 0; i < amount; i ++ ) {
 
 					object = new THREE.Mesh( geometry, material );
 					object.position.y = - 100;
@@ -77,7 +78,7 @@
 
 				parent = root;
 
-				for ( var i = 0; i < amount; i ++ ) {
+				for ( let i = 0; i < amount; i ++ ) {
 
 					object = new THREE.Mesh( geometry, material );
 					object.position.y = 100;
@@ -89,7 +90,7 @@
 
 				parent = root;
 
-				for ( var i = 0; i < amount; i ++ ) {
+				for ( let i = 0; i < amount; i ++ ) {
 
 					object = new THREE.Mesh( geometry, material );
 					object.position.z = - 100;
@@ -101,7 +102,7 @@
 
 				parent = root;
 
-				for ( var i = 0; i < amount; i ++ ) {
+				for ( let i = 0; i < amount; i ++ ) {
 
 					object = new THREE.Mesh( geometry, material );
 					object.position.z = 100;
@@ -165,11 +166,11 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001 + 10000;
+				const time = Date.now() * 0.001 + 10000;
 
-				var rx = Math.sin( time * 0.7 ) * 0.2;
-				var ry = Math.sin( time * 0.3 ) * 0.1;
-				var rz = Math.sin( time * 0.2 ) * 0.1;
+				const rx = Math.sin( time * 0.7 ) * 0.2;
+				const ry = Math.sin( time * 0.3 ) * 0.1;
+				const rz = Math.sin( time * 0.2 ) * 0.1;
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

examples/webgl_geometry_minecraft.html

@@ -30,16 +30,16 @@
 			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, controls, scene, renderer;
+			let camera, controls, scene, renderer;
 
-			var worldWidth = 128, worldDepth = 128;
-			var worldHalfWidth = worldWidth / 2;
-			var worldHalfDepth = worldDepth / 2;
-			var data = generateHeight( worldWidth, worldDepth );
+			const worldWidth = 128, worldDepth = 128;
+			const worldHalfWidth = worldWidth / 2;
+			const worldHalfDepth = worldDepth / 2;
+			const data = generateHeight( worldWidth, worldDepth );
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -56,32 +56,32 @@
 
 				// sides
 
-				var matrix = new THREE.Matrix4();
+				const matrix = new THREE.Matrix4();
 
-				var pxGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const pxGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
 				pxGeometry.attributes.uv.array[ 1 ] = 0.5;
 				pxGeometry.attributes.uv.array[ 3 ] = 0.5;
 				pxGeometry.rotateY( Math.PI / 2 );
 				pxGeometry.translate( 50, 0, 0 );
 
-				var nxGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const nxGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
 				nxGeometry.attributes.uv.array[ 1 ] = 0.5;
 				nxGeometry.attributes.uv.array[ 3 ] = 0.5;
 				nxGeometry.rotateY( - Math.PI / 2 );
 				nxGeometry.translate( - 50, 0, 0 );
 
-				var pyGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const pyGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
 				pyGeometry.attributes.uv.array[ 5 ] = 0.5;
 				pyGeometry.attributes.uv.array[ 7 ] = 0.5;
 				pyGeometry.rotateX( - Math.PI / 2 );
 				pyGeometry.translate( 0, 50, 0 );
 
-				var pzGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const pzGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
 				pzGeometry.attributes.uv.array[ 1 ] = 0.5;
 				pzGeometry.attributes.uv.array[ 3 ] = 0.5;
 				pzGeometry.translate( 0, 0, 50 );
 
-				var nzGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const nzGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
 				nzGeometry.attributes.uv.array[ 1 ] = 0.5;
 				nzGeometry.attributes.uv.array[ 3 ] = 0.5;
 				nzGeometry.rotateY( Math.PI );
@@ -89,13 +89,13 @@
 
 				//
 
-				var geometries = [];
+				const geometries = [];
 
-				for ( var z = 0; z < worldDepth; z ++ ) {
+				for ( let z = 0; z < worldDepth; z ++ ) {
 
-					for ( var x = 0; x < worldWidth; x ++ ) {
+					for ( let x = 0; x < worldWidth; x ++ ) {
 
-						var h = getY( x, z );
+						const h = getY( x, z );
 
 						matrix.makeTranslation(
 							x * 100 - worldHalfWidth * 100,
@@ -103,10 +103,10 @@
 							z * 100 - worldHalfDepth * 100
 						);
 
-						var px = getY( x + 1, z );
-						var nx = getY( x - 1, z );
-						var pz = getY( x, z + 1 );
-						var nz = getY( x, z - 1 );
+						const px = getY( x + 1, z );
+						const nx = getY( x - 1, z );
+						const pz = getY( x, z + 1 );
+						const nz = getY( x, z - 1 );
 
 						geometries.push( pyGeometry.clone().applyMatrix4( matrix ) );
 
@@ -138,19 +138,19 @@
 
 				}
 
-				var geometry = BufferGeometryUtils.mergeBufferGeometries( geometries );
+				const geometry = BufferGeometryUtils.mergeBufferGeometries( geometries );
 				geometry.computeBoundingSphere();
 
-				var texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
+				const texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
 				texture.magFilter = THREE.NearestFilter;
 
-				var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } ) );
+				const mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } ) );
 				scene.add( mesh );
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
 				directionalLight.position.set( 1, 1, 0.5 ).normalize();
 				scene.add( directionalLight );
 
@@ -187,16 +187,18 @@
 
 			function generateHeight( width, height ) {
 
-				var data = [], perlin = new ImprovedNoise(),
-					size = width * height, quality = 2, z = Math.random() * 100;
+				const data = [], perlin = new ImprovedNoise(),
+					size = width * height, z = Math.random() * 100;
 
-				for ( var j = 0; j < 4; j ++ ) {
+				let quality = 2;
 
-					if ( j === 0 ) for ( var i = 0; i < size; i ++ ) data[ i ] = 0;
+				for ( let j = 0; j < 4; j ++ ) {
 
-					for ( var i = 0; i < size; i ++ ) {
+					if ( j === 0 ) for ( let i = 0; i < size; i ++ ) data[ i ] = 0;
 
-						var x = i % width, y = ( i / width ) | 0;
+					for ( let i = 0; i < size; i ++ ) {
+
+						const x = i % width, y = ( i / width ) | 0;
 						data[ i ] += perlin.noise( x / quality, y / quality, z ) * quality;
 
 

examples/webgl_geometry_minecraft_ao.html

@@ -31,16 +31,16 @@
 			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, controls, scene, renderer;
+			let camera, controls, scene, renderer;
 
-			var worldWidth = 200, worldDepth = 200;
-			var worldHalfWidth = worldWidth / 2;
-			var worldHalfDepth = worldDepth / 2;
-			var data = generateHeight( worldWidth, worldDepth );
+			const worldWidth = 200, worldDepth = 200;
+			const worldHalfWidth = worldWidth / 2;
+			const worldHalfDepth = worldDepth / 2;
+			const data = generateHeight( worldWidth, worldDepth );
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -58,12 +58,12 @@
 
 				// sides
 
-				var light = new THREE.Color( 0xffffff );
-				var shadow = new THREE.Color( 0x505050 );
+				const light = new THREE.Color( 0xffffff );
+				const shadow = new THREE.Color( 0x505050 );
 
-				var matrix = new THREE.Matrix4();
+				const matrix = new THREE.Matrix4();
 
-				var pxGeometry = new THREE.PlaneGeometry( 100, 100 );
+				const pxGeometry = new THREE.PlaneGeometry( 100, 100 );
 				pxGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
 				pxGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
 				pxGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
@@ -72,7 +72,7 @@
 				pxGeometry.rotateY( Math.PI / 2 );
 				pxGeometry.translate( 50, 0, 0 );
 
-				var nxGeometry = new THREE.PlaneGeometry( 100, 100 );
+				const nxGeometry = new THREE.PlaneGeometry( 100, 100 );
 				nxGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
 				nxGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
 				nxGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
@@ -81,7 +81,7 @@
 				nxGeometry.rotateY( - Math.PI / 2 );
 				nxGeometry.translate( - 50, 0, 0 );
 
-				var pyGeometry = new THREE.PlaneGeometry( 100, 100 );
+				const pyGeometry = new THREE.PlaneGeometry( 100, 100 );
 				pyGeometry.faces[ 0 ].vertexColors = [ light, light, light ];
 				pyGeometry.faces[ 1 ].vertexColors = [ light, light, light ];
 				pyGeometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].y = 0.5;
@@ -90,7 +90,7 @@
 				pyGeometry.rotateX( - Math.PI / 2 );
 				pyGeometry.translate( 0, 50, 0 );
 
-				var py2Geometry = new THREE.PlaneGeometry( 100, 100 );
+				const py2Geometry = new THREE.PlaneGeometry( 100, 100 );
 				py2Geometry.faces[ 0 ].vertexColors = [ light, light, light ];
 				py2Geometry.faces[ 1 ].vertexColors = [ light, light, light ];
 				py2Geometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].y = 0.5;
@@ -100,7 +100,7 @@
 				py2Geometry.rotateY( Math.PI / 2 );
 				py2Geometry.translate( 0, 50, 0 );
 
-				var pzGeometry = new THREE.PlaneGeometry( 100, 100 );
+				const pzGeometry = new THREE.PlaneGeometry( 100, 100 );
 				pzGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
 				pzGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
 				pzGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
@@ -108,7 +108,7 @@
 				pzGeometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].y = 0.5;
 				pzGeometry.translate( 0, 0, 50 );
 
-				var nzGeometry = new THREE.PlaneGeometry( 100, 100 );
+				const nzGeometry = new THREE.PlaneGeometry( 100, 100 );
 				nzGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
 				nzGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
 				nzGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
@@ -119,13 +119,13 @@
 
 				//
 
-				var geometry = new THREE.Geometry();
+				let geometry = new THREE.Geometry();
 
-				for ( var z = 0; z < worldDepth; z ++ ) {
+				for ( let z = 0; z < worldDepth; z ++ ) {
 
-					for ( var x = 0; x < worldWidth; x ++ ) {
+					for ( let x = 0; x < worldWidth; x ++ ) {
 
-						var h = getY( x, z );
+						const h = getY( x, z );
 
 						matrix.makeTranslation(
 							x * 100 - worldHalfWidth * 100,
@@ -133,29 +133,29 @@
 							z * 100 - worldHalfDepth * 100
 						);
 
-						var px = getY( x + 1, z );
-						var nx = getY( x - 1, z );
-						var pz = getY( x, z + 1 );
-						var nz = getY( x, z - 1 );
+						const px = getY( x + 1, z );
+						const nx = getY( x - 1, z );
+						const pz = getY( x, z + 1 );
+						const nz = getY( x, z - 1 );
 
-						var pxpz = getY( x + 1, z + 1 );
-						var nxpz = getY( x - 1, z + 1 );
-						var pxnz = getY( x + 1, z - 1 );
-						var nxnz = getY( x - 1, z - 1 );
+						const pxpz = getY( x + 1, z + 1 );
+						const nxpz = getY( x - 1, z + 1 );
+						const pxnz = getY( x + 1, z - 1 );
+						const nxnz = getY( x - 1, z - 1 );
 
-						var a = nx > h || nz > h || nxnz > h ? 0 : 1;
-						var b = nx > h || pz > h || nxpz > h ? 0 : 1;
-						var c = px > h || pz > h || pxpz > h ? 0 : 1;
-						var d = px > h || nz > h || pxnz > h ? 0 : 1;
+						const a = nx > h || nz > h || nxnz > h ? 0 : 1;
+						const b = nx > h || pz > h || nxpz > h ? 0 : 1;
+						const c = px > h || pz > h || pxpz > h ? 0 : 1;
+						const d = px > h || nz > h || pxnz > h ? 0 : 1;
 
 						if ( a + c > b + d ) {
 
-							var colors = py2Geometry.faces[ 0 ].vertexColors;
+							let colors = py2Geometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = b === 0 ? shadow : light;
 							colors[ 1 ] = c === 0 ? shadow : light;
 							colors[ 2 ] = a === 0 ? shadow : light;
 
-							var colors = py2Geometry.faces[ 1 ].vertexColors;
+							colors = py2Geometry.faces[ 1 ].vertexColors;
 							colors[ 0 ] = c === 0 ? shadow : light;
 							colors[ 1 ] = d === 0 ? shadow : light;
 							colors[ 2 ] = a === 0 ? shadow : light;
@@ -164,12 +164,12 @@
 
 						} else {
 
-							var colors = pyGeometry.faces[ 0 ].vertexColors;
+							let colors = pyGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = a === 0 ? shadow : light;
 							colors[ 1 ] = b === 0 ? shadow : light;
 							colors[ 2 ] = d === 0 ? shadow : light;
 
-							var colors = pyGeometry.faces[ 1 ].vertexColors;
+							colors = pyGeometry.faces[ 1 ].vertexColors;
 							colors[ 0 ] = b === 0 ? shadow : light;
 							colors[ 1 ] = c === 0 ? shadow : light;
 							colors[ 2 ] = d === 0 ? shadow : light;
@@ -180,11 +180,11 @@
 
 						if ( ( px != h && px != h + 1 ) || x == 0 ) {
 
-							var colors = pxGeometry.faces[ 0 ].vertexColors;
+							let colors = pxGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = pxpz > px && x > 0 ? shadow : light;
 							colors[ 2 ] = pxnz > px && x > 0 ? shadow : light;
 
-							var colors = pxGeometry.faces[ 1 ].vertexColors;
+							colors = pxGeometry.faces[ 1 ].vertexColors;
 							colors[ 2 ] = pxnz > px && x > 0 ? shadow : light;
 
 							geometry.merge( pxGeometry, matrix );
@@ -193,11 +193,11 @@
 
 						if ( ( nx != h && nx != h + 1 ) || x == worldWidth - 1 ) {
 
-							var colors = nxGeometry.faces[ 0 ].vertexColors;
+							let colors = nxGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = nxnz > nx && x < worldWidth - 1 ? shadow : light;
 							colors[ 2 ] = nxpz > nx && x < worldWidth - 1 ? shadow : light;
 
-							var colors = nxGeometry.faces[ 1 ].vertexColors;
+							colors = nxGeometry.faces[ 1 ].vertexColors;
 							colors[ 2 ] = nxpz > nx && x < worldWidth - 1 ? shadow : light;
 
 							geometry.merge( nxGeometry, matrix );
@@ -206,11 +206,11 @@
 
 						if ( ( pz != h && pz != h + 1 ) || z == worldDepth - 1 ) {
 
-							var colors = pzGeometry.faces[ 0 ].vertexColors;
+							let colors = pzGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = nxpz > pz && z < worldDepth - 1 ? shadow : light;
 							colors[ 2 ] = pxpz > pz && z < worldDepth - 1 ? shadow : light;
 
-							var colors = pzGeometry.faces[ 1 ].vertexColors;
+							colors = pzGeometry.faces[ 1 ].vertexColors;
 							colors[ 2 ] = pxpz > pz && z < worldDepth - 1 ? shadow : light;
 
 							geometry.merge( pzGeometry, matrix );
@@ -219,11 +219,11 @@
 
 						if ( ( nz != h && nz != h + 1 ) || z == 0 ) {
 
-							var colors = nzGeometry.faces[ 0 ].vertexColors;
+							let colors = nzGeometry.faces[ 0 ].vertexColors;
 							colors[ 0 ] = pxnz > nz && z > 0 ? shadow : light;
 							colors[ 2 ] = nxnz > nz && z > 0 ? shadow : light;
 
-							var colors = nzGeometry.faces[ 1 ].vertexColors;
+							colors = nzGeometry.faces[ 1 ].vertexColors;
 							colors[ 2 ] = nxnz > nz && z > 0 ? shadow : light;
 
 							geometry.merge( nzGeometry, matrix );
@@ -236,20 +236,20 @@
 
 				geometry = new THREE.BufferGeometry().fromGeometry( geometry );
 
-				var texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
+				const texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
 				texture.magFilter = THREE.NearestFilter;
 				texture.minFilter = THREE.LinearMipmapLinearFilter;
 
-				var mesh = new THREE.Mesh(
+				const mesh = new THREE.Mesh(
 					geometry,
 					new THREE.MeshLambertMaterial( { map: texture, vertexColors: true, side: THREE.DoubleSide } )
 				);
 				scene.add( mesh );
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
 				directionalLight.position.set( 1, 1, 0.5 ).normalize();
 				scene.add( directionalLight );
 
@@ -289,16 +289,18 @@
 
 			function generateHeight( width, height ) {
 
-				var data = [], perlin = new ImprovedNoise(),
-					size = width * height, quality = 2, z = Math.random() * 100;
+				const data = [], perlin = new ImprovedNoise(),
+					size = width * height, z = Math.random() * 100;
 
-				for ( var j = 0; j < 4; j ++ ) {
+				let quality = 2;
 
-					if ( j == 0 ) for ( var i = 0; i < size; i ++ ) data[ i ] = 0;
+				for ( let j = 0; j < 4; j ++ ) {
 
-					for ( var i = 0; i < size; i ++ ) {
+					if ( j == 0 ) for ( let i = 0; i < size; i ++ ) data[ i ] = 0;
 
-						var x = i % width, y = ( i / width ) | 0;
+					for ( let i = 0; i < size; i ++ ) {
+
+						const x = i % width, y = ( i / width ) | 0;
 						data[ i ] += perlin.noise( x / quality, y / quality, z ) * quality;
 
 					}

examples/webgl_geometry_normals.html

@@ -23,11 +23,11 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { VertexNormalsHelper } from './jsm/helpers/VertexNormalsHelper.js';
 
-			var container, stats, gui;
-			var camera, scene, renderer;
-			var mesh, geometry;
+			let container, stats, gui;
+			let camera, scene, renderer;
+			let mesh, geometry;
 
-			var geometries = [
+			const geometries = [
 				new THREE.BoxBufferGeometry( 200, 200, 200, 2, 2, 2 ),
 				new THREE.CircleBufferGeometry( 200, 32 ),
 				new THREE.CylinderBufferGeometry( 75, 75, 200, 8, 8 ),
@@ -40,11 +40,11 @@
 				new THREE.TorusKnotBufferGeometry( 64, 16 )
 			];
 
-			var options = {
+			const options = {
 				Geometry: 0
 			};
 
-			var material = new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
+			const material = new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
 
 			init();
 			animate();
@@ -64,13 +64,13 @@
 
 				geometry.computeBoundingSphere();
 
-				var scaleFactor = 160 / geometry.boundingSphere.radius;
+				const scaleFactor = 160 / geometry.boundingSphere.radius;
 				geometry.scale( scaleFactor, scaleFactor, scaleFactor );
 
 				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
-				var vertexNormalsHelper = new VertexNormalsHelper( mesh, 10 );
+				const vertexNormalsHelper = new VertexNormalsHelper( mesh, 10 );
 				mesh.add( vertexNormalsHelper );
 
 			}
@@ -100,7 +100,7 @@
 
 				//
 
-				var geometries = {
+				const geometries = {
 					BoxBufferGeometry: 0,
 					CircleBufferGeometry: 1,
 					CylinderBufferGeometry: 2,
@@ -122,7 +122,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableZoom = false;
 
 				//

examples/webgl_geometry_nurbs.html

@@ -29,18 +29,18 @@
 			import { NURBSCurve } from './jsm/curves/NURBSCurve.js';
 			import { NURBSSurface } from './jsm/curves/NURBSSurface.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
-			var group;
+			let camera, scene, renderer;
+			let group;
 
-			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();
@@ -58,7 +58,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x808080 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
@@ -68,17 +68,17 @@
 
 				// NURBS curve
 
-				var nurbsControlPoints = [];
-				var nurbsKnots = [];
-				var nurbsDegree = 3;
+				const nurbsControlPoints = [];
+				const nurbsKnots = [];
+				const nurbsDegree = 3;
 
-				for ( var i = 0; i <= nurbsDegree; i ++ ) {
+				for ( let i = 0; i <= nurbsDegree; i ++ ) {
 
 					nurbsKnots.push( 0 );
 
 				}
 
-				for ( var i = 0, j = 20; i < j; i ++ ) {
+				for ( let i = 0, j = 20; i < j; i ++ ) {
 
 					nurbsControlPoints.push(
 						new THREE.Vector4(
@@ -89,34 +89,34 @@
 						)
 					);
 
-					var knot = ( i + 1 ) / ( j - nurbsDegree );
+					const knot = ( i + 1 ) / ( j - nurbsDegree );
 					nurbsKnots.push( THREE.MathUtils.clamp( knot, 0, 1 ) );
 
 				}
 
-				var nurbsCurve = new NURBSCurve( nurbsDegree, nurbsKnots, nurbsControlPoints );
+				const nurbsCurve = new NURBSCurve( nurbsDegree, nurbsKnots, nurbsControlPoints );
 
-				var nurbsGeometry = new THREE.BufferGeometry();
+				const nurbsGeometry = new THREE.BufferGeometry();
 				nurbsGeometry.setFromPoints( nurbsCurve.getPoints( 200 ) );
 
-				var nurbsMaterial = new THREE.LineBasicMaterial( { color: 0x333333 } );
+				const nurbsMaterial = new THREE.LineBasicMaterial( { color: 0x333333 } );
 
-				var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
+				const nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
 				nurbsLine.position.set( 200, - 100, 0 );
 				group.add( nurbsLine );
 
-				var nurbsControlPointsGeometry = new THREE.BufferGeometry();
+				const nurbsControlPointsGeometry = new THREE.BufferGeometry();
 				nurbsControlPointsGeometry.setFromPoints( nurbsCurve.controlPoints );
 
-				var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { color: 0x333333, opacity: 0.25, transparent: true } );
+				const nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { color: 0x333333, opacity: 0.25, transparent: true } );
 
-				var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
+				const nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
 				nurbsControlPointsLine.position.copy( nurbsLine.position );
 				group.add( nurbsControlPointsLine );
 
 				// NURBS surface
 
-				var nsControlPoints = [
+				const nsControlPoints = [
 					[
 						new THREE.Vector4( - 200, - 200, 100, 1 ),
 						new THREE.Vector4( - 200, - 100, - 200, 1 ),
@@ -136,13 +136,13 @@
 						new THREE.Vector4( 200, 200, 100, 1 )
 					]
 				];
-				var degree1 = 2;
-				var degree2 = 3;
-				var knots1 = [ 0, 0, 0, 1, 1, 1 ];
-				var knots2 = [ 0, 0, 0, 0, 1, 1, 1, 1 ];
-				var nurbsSurface = new NURBSSurface( degree1, degree2, knots1, knots2, nsControlPoints );
+				const degree1 = 2;
+				const degree2 = 3;
+				const knots1 = [ 0, 0, 0, 1, 1, 1 ];
+				const knots2 = [ 0, 0, 0, 0, 1, 1, 1, 1 ];
+				const nurbsSurface = new NURBSSurface( degree1, degree2, knots1, knots2, nsControlPoints );
 
-				var map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
+				const map = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
 
@@ -152,9 +152,9 @@
 
 				}
 
-				var geometry = new THREE.ParametricBufferGeometry( getSurfacePoint, 20, 20 );
-				var material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );
-				var object = new THREE.Mesh( geometry, material );
+				const geometry = new THREE.ParametricBufferGeometry( getSurfacePoint, 20, 20 );
+				const material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );
+				const object = new THREE.Mesh( geometry, material );
 				object.position.set( - 200, 100, 0 );
 				object.scale.multiplyScalar( 1 );
 				group.add( object );

examples/webgl_geometry_shapes.html

@@ -22,19 +22,19 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var group;
+			let group;
 
-			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();
@@ -51,15 +51,15 @@
 				camera.position.set( 0, 150, 500 );
 				scene.add( camera );
 
-				var light = new THREE.PointLight( 0xffffff, 0.8 );
+				const light = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( light );
 
 				group = new THREE.Group();
 				group.position.y = 50;
 				scene.add( group );
 
-				var loader = new THREE.TextureLoader();
-				var texture = loader.load( "textures/uv_grid_opengl.jpg" );
+				const loader = new THREE.TextureLoader();
+				const texture = loader.load( "textures/uv_grid_opengl.jpg" );
 
 				// it's necessary to apply these settings in order to correctly display the texture on a shape geometry
 
@@ -71,9 +71,9 @@
 					// flat shape with texture
 					// note: default UVs generated by THREE.ShapeBufferGeometry are simply the x- and y-coordinates of the vertices
 
-					var geometry = new THREE.ShapeBufferGeometry( shape );
+					let geometry = new THREE.ShapeBufferGeometry( shape );
 
-					var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { side: THREE.DoubleSide, map: texture } ) );
+					let mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { side: THREE.DoubleSide, map: texture } ) );
 					mesh.position.set( x, y, z - 175 );
 					mesh.rotation.set( rx, ry, rz );
 					mesh.scale.set( s, s, s );
@@ -81,9 +81,9 @@
 
 					// flat shape
 
-					var geometry = new THREE.ShapeBufferGeometry( shape );
+					geometry = new THREE.ShapeBufferGeometry( shape );
 
-					var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color, side: THREE.DoubleSide } ) );
+					mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color, side: THREE.DoubleSide } ) );
 					mesh.position.set( x, y, z - 125 );
 					mesh.rotation.set( rx, ry, rz );
 					mesh.scale.set( s, s, s );
@@ -91,9 +91,9 @@
 
 					// extruded shape
 
-					var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
+					geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
 
-					var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color } ) );
+					mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color } ) );
 					mesh.position.set( x, y, z - 75 );
 					mesh.rotation.set( rx, ry, rz );
 					mesh.scale.set( s, s, s );
@@ -109,15 +109,15 @@
 
 					shape.autoClose = true;
 
-					var points = shape.getPoints();
-					var spacedPoints = shape.getSpacedPoints( 50 );
+					const points = shape.getPoints();
+					const spacedPoints = shape.getSpacedPoints( 50 );
 
-					var geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
-					var geometrySpacedPoints = new THREE.BufferGeometry().setFromPoints( spacedPoints );
+					const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
+					const geometrySpacedPoints = new THREE.BufferGeometry().setFromPoints( spacedPoints );
 
 					// solid line
 
-					var line = new THREE.Line( geometryPoints, new THREE.LineBasicMaterial( { color: color } ) );
+					let line = new THREE.Line( geometryPoints, new THREE.LineBasicMaterial( { color: color } ) );
 					line.position.set( x, y, z - 25 );
 					line.rotation.set( rx, ry, rz );
 					line.scale.set( s, s, s );
@@ -125,7 +125,7 @@
 
 					// line from equidistance sampled points
 
-					var line = new THREE.Line( geometrySpacedPoints, new THREE.LineBasicMaterial( { color: color } ) );
+					line = new THREE.Line( geometrySpacedPoints, new THREE.LineBasicMaterial( { color: color } ) );
 					line.position.set( x, y, z + 25 );
 					line.rotation.set( rx, ry, rz );
 					line.scale.set( s, s, s );
@@ -133,7 +133,7 @@
 
 					// vertices from real points
 
-					var particles = new THREE.Points( geometryPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
+					let particles = new THREE.Points( geometryPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
 					particles.position.set( x, y, z + 75 );
 					particles.rotation.set( rx, ry, rz );
 					particles.scale.set( s, s, s );
@@ -141,7 +141,7 @@
 
 					// equidistance sampled points
 
-					var particles = new THREE.Points( geometrySpacedPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
+					particles = new THREE.Points( geometrySpacedPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
 					particles.position.set( x, y, z + 125 );
 					particles.rotation.set( rx, ry, rz );
 					particles.scale.set( s, s, s );
@@ -152,7 +152,7 @@
 
 				// California
 
-				var californiaPts = [];
+				const californiaPts = [];
 
 				californiaPts.push( new THREE.Vector2( 610, 320 ) );
 				californiaPts.push( new THREE.Vector2( 450, 300 ) );
@@ -177,14 +177,14 @@
 				californiaPts.push( new THREE.Vector2( 600, 370 ) );
 				californiaPts.push( new THREE.Vector2( 610, 320 ) );
 
-				for ( var i = 0; i < californiaPts.length; i ++ ) californiaPts[ i ].multiplyScalar( 0.25 );
+				for ( let i = 0; i < californiaPts.length; i ++ ) californiaPts[ i ].multiplyScalar( 0.25 );
 
-				var californiaShape = new THREE.Shape( californiaPts );
+				const californiaShape = new THREE.Shape( californiaPts );
 
 
 				// Triangle
 
-				var triangleShape = new THREE.Shape()
+				const triangleShape = new THREE.Shape()
 					.moveTo( 80, 20 )
 					.lineTo( 40, 80 )
 					.lineTo( 120, 80 )
@@ -193,9 +193,9 @@
 
 				// Heart
 
-				var x = 0, y = 0;
+				const x = 0, y = 0;
 
-				var heartShape = new THREE.Shape() // From http://blog.burlock.org/html5/130-paths
+				const heartShape = new THREE.Shape() // From http://blog.burlock.org/html5/130-paths
 					.moveTo( x + 25, y + 25 )
 					.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y )
 					.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 )
@@ -207,9 +207,9 @@
 
 				// Square
 
-				var sqLength = 80;
+				const sqLength = 80;
 
-				var squareShape = new THREE.Shape()
+				const squareShape = new THREE.Shape()
 					.moveTo( 0, 0 )
 					.lineTo( 0, sqLength )
 					.lineTo( sqLength, sqLength )
@@ -218,7 +218,7 @@
 
 				// Rounded rectangle
 
-				var roundedRectShape = new THREE.Shape();
+				const roundedRectShape = new THREE.Shape();
 
 				( function roundedRect( ctx, x, y, width, height, radius ) {
 
@@ -237,7 +237,7 @@
 
 				// Track
 
-				var trackShape = new THREE.Shape()
+				const trackShape = new THREE.Shape()
 					.moveTo( 40, 40 )
 					.lineTo( 40, 160 )
 					.absarc( 60, 160, 20, Math.PI, 0, true )
@@ -247,8 +247,8 @@
 
 				// Circle
 
-				var circleRadius = 40;
-				var circleShape = new THREE.Shape()
+				const circleRadius = 40;
+				const circleShape = new THREE.Shape()
 					.moveTo( 0, circleRadius )
 					.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 )
 					.quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius )
@@ -258,9 +258,7 @@
 
 				// Fish
 
-				var x = y = 0;
-
-				var fishShape = new THREE.Shape()
+				const fishShape = new THREE.Shape()
 					.moveTo( x, y )
 					.quadraticCurveTo( x + 50, y - 80, x + 90, y - 10 )
 					.quadraticCurveTo( x + 100, y - 10, x + 115, y - 40 )
@@ -271,11 +269,11 @@
 
 				// Arc circle
 
-				var arcShape = new THREE.Shape()
+				const arcShape = new THREE.Shape()
 					.moveTo( 50, 10 )
 					.absarc( 10, 10, 40, 0, Math.PI * 2, false );
 
-				var holePath = new THREE.Path()
+				const holePath = new THREE.Path()
 					.moveTo( 20, 10 )
 					.absarc( 10, 10, 10, 0, Math.PI * 2, true );
 
@@ -284,19 +282,19 @@
 
 				// Smiley
 
-				var smileyShape = new THREE.Shape()
+				const smileyShape = new THREE.Shape()
 					.moveTo( 80, 40 )
 					.absarc( 40, 40, 40, 0, Math.PI * 2, false );
 
-				var smileyEye1Path = new THREE.Path()
+				const smileyEye1Path = new THREE.Path()
 					.moveTo( 35, 20 )
 					.absellipse( 25, 20, 10, 10, 0, Math.PI * 2, true );
 
-				var smileyEye2Path = new THREE.Path()
+				const smileyEye2Path = new THREE.Path()
 					.moveTo( 65, 20 )
 					.absarc( 55, 20, 10, 0, Math.PI * 2, true );
 
-				var smileyMouthPath = new THREE.Path()
+				const smileyMouthPath = new THREE.Path()
 					.moveTo( 20, 40 )
 					.quadraticCurveTo( 40, 60, 60, 40 )
 					.bezierCurveTo( 70, 45, 70, 50, 60, 60 )
@@ -310,17 +308,17 @@
 
 				// Spline shape
 
-				var splinepts = [];
+				const splinepts = [];
 				splinepts.push( new THREE.Vector2( 70, 20 ) );
 				splinepts.push( new THREE.Vector2( 80, 90 ) );
 				splinepts.push( new THREE.Vector2( - 30, 70 ) );
 				splinepts.push( new THREE.Vector2( 0, 0 ) );
 
-				var splineShape = new THREE.Shape()
+				const splineShape = new THREE.Shape()
 					.moveTo( 0, 0 )
 					.splineThru( splinepts );
 
-				var extrudeSettings = { depth: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
+				const extrudeSettings = { depth: 8, bevelEnabled: true, bevelSegments: 2, steps: 2, bevelSize: 1, bevelThickness: 1 };
 
 				// addShape( shape, color, x, y, z, rx, ry,rz, s );
 
@@ -338,7 +336,7 @@
 
 				addLineShape( arcShape.holes[ 0 ], 0x804000, 150, 0, 0, 0, 0, 0, 1 );
 
-				for ( var i = 0; i < smileyShape.holes.length; i += 1 ) {
+				for ( let i = 0; i < smileyShape.holes.length; i += 1 ) {
 
 					addLineShape( smileyShape.holes[ i ], 0xf000f0, - 200, 250, 0, 0, 0, Math.PI, 1 );
 

examples/webgl_geometry_spline_editor.html

@@ -34,9 +34,9 @@
 
 			String.prototype.format = function () {
 
-				var str = this;
+				let str = this;
 
-				for ( var i = 0; i < arguments.length; i ++ ) {
+				for ( let i = 0; i < arguments.length; i ++ ) {
 
 					str = str.replace( '{' + i + '}', arguments[ i ] );
 
@@ -46,26 +46,26 @@
 
 			};
 
-			var container, stats;
-			var camera, scene, renderer;
-			var splineHelperObjects = [];
-			var splinePointsLength = 4;
-			var positions = [];
-			var point = new THREE.Vector3();
+			let container, stats;
+			let camera, scene, renderer;
+			const splineHelperObjects = [];
+			let splinePointsLength = 4;
+			const positions = [];
+			const point = new THREE.Vector3();
 
-			var raycaster = new THREE.Raycaster();
-			var pointer = new THREE.Vector2();
-			var onUpPosition = new THREE.Vector2();
-			var onDownPosition = new THREE.Vector2();
+			const raycaster = new THREE.Raycaster();
+			const pointer = new THREE.Vector2();
+			const onUpPosition = new THREE.Vector2();
+			const onDownPosition = new THREE.Vector2();
 
-			var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
-			var transformControl;
+			const geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+			let transformControl;
 
-			var ARC_SEGMENTS = 200;
+			const ARC_SEGMENTS = 200;
 
-			var splines = {};
+			const splines = {};
 
-			var params = {
+			const params = {
 				uniform: true,
 				tension: 0.5,
 				centripetal: true,
@@ -90,7 +90,7 @@
 				scene.add( camera );
 
 				scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				const light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 1500, 200 );
 				light.angle = Math.PI * 0.2;
 				light.castShadow = true;
@@ -101,16 +101,16 @@
 				light.shadow.mapSize.height = 1024;
 				scene.add( light );
 
-				var planeGeometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
+				const planeGeometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
 				planeGeometry.rotateX( - Math.PI / 2 );
-				var planeMaterial = new THREE.ShadowMaterial( { opacity: 0.2 } );
+				const planeMaterial = new THREE.ShadowMaterial( { opacity: 0.2 } );
 
-				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+				const plane = new THREE.Mesh( planeGeometry, planeMaterial );
 				plane.position.y = - 200;
 				plane.receiveShadow = true;
 				scene.add( plane );
 
-				var helper = new THREE.GridHelper( 2000, 100 );
+				const helper = new THREE.GridHelper( 2000, 100 );
 				helper.position.y = - 199;
 				helper.material.opacity = 0.25;
 				helper.material.transparent = true;
@@ -125,7 +125,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'uniform' );
 				gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
@@ -142,7 +142,7 @@
 				gui.open();
 
 				// Controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.damping = 0.2;
 				controls.addEventListener( 'change', render );
 
@@ -169,24 +169,24 @@
 				 * Curves
 				 *********/
 
-				for ( var i = 0; i < splinePointsLength; i ++ ) {
+				for ( let i = 0; i < splinePointsLength; i ++ ) {
 
 					addSplineObject( positions[ i ] );
 
 				}
 
-				positions = [];
+				positions.length = 0;
 
-				for ( var i = 0; i < splinePointsLength; i ++ ) {
+				for ( let i = 0; i < splinePointsLength; i ++ ) {
 
 					positions.push( splineHelperObjects[ i ].position );
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ARC_SEGMENTS * 3 ), 3 ) );
 
-				var curve = new THREE.CatmullRomCurve3( positions );
+				let curve = new THREE.CatmullRomCurve3( positions );
 				curve.curveType = 'catmullrom';
 				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
 					color: 0xff0000,
@@ -213,9 +213,9 @@
 				curve.mesh.castShadow = true;
 				splines.chordal = curve;
 
-				for ( var k in splines ) {
+				for ( const k in splines ) {
 
-					var spline = splines[ k ];
+					const spline = splines[ k ];
 					scene.add( spline.mesh );
 
 				}
@@ -229,8 +229,8 @@
 
 			function addSplineObject( position ) {
 
-				var material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
-				var object = new THREE.Mesh( geometry, material );
+				const material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
+				const object = new THREE.Mesh( geometry, material );
 
 				if ( position ) {
 
@@ -283,16 +283,16 @@
 
 			function updateSplineOutline() {
 
-				for ( var k in splines ) {
+				for ( const k in splines ) {
 
-					var spline = splines[ k ];
+					const spline = splines[ k ];
 
-					var splineMesh = spline.mesh;
-					var position = splineMesh.geometry.attributes.position;
+					const splineMesh = spline.mesh;
+					const position = splineMesh.geometry.attributes.position;
 
-					for ( var i = 0; i < ARC_SEGMENTS; i ++ ) {
+					for ( let i = 0; i < ARC_SEGMENTS; i ++ ) {
 
-						var t = i / ( ARC_SEGMENTS - 1 );
+						const t = i / ( ARC_SEGMENTS - 1 );
 						spline.getPoint( t, point );
 						position.setXYZ( i, point.x, point.y, point.z );
 
@@ -306,17 +306,17 @@
 
 			function exportSpline() {
 
-				var strplace = [];
+				const strplace = [];
 
-				for ( var i = 0; i < splinePointsLength; i ++ ) {
+				for ( let i = 0; i < splinePointsLength; i ++ ) {
 
-					var p = splineHelperObjects[ i ].position;
+					const p = splineHelperObjects[ i ].position;
 					strplace.push( 'new THREE.Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) );
 
 				}
 
 				console.log( strplace.join( ',\n' ) );
-				var code = '[' + ( strplace.join( ',\n\t' ) ) + ']';
+				const code = '[' + ( strplace.join( ',\n\t' ) ) + ']';
 				prompt( 'copy and paste code', code );
 
 			}
@@ -335,7 +335,7 @@
 
 				}
 
-				for ( var i = 0; i < positions.length; i ++ ) {
+				for ( let i = 0; i < positions.length; i ++ ) {
 
 					positions[ i ].copy( new_positions[ i ] );
 
@@ -385,11 +385,11 @@
 
 				raycaster.setFromCamera( pointer, camera );
 
-				var intersects = raycaster.intersectObjects( splineHelperObjects );
+				const intersects = raycaster.intersectObjects( splineHelperObjects );
 
 				if ( intersects.length > 0 ) {
 
-					var object = intersects[ 0 ].object;
+					const object = intersects[ 0 ].object;
 
 					if ( object !== transformControl.object ) {
 

examples/webgl_geometry_teapot.html

@@ -21,37 +21,37 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { TeapotBufferGeometry } from './jsm/geometries/TeapotBufferGeometry.js';
 
-			var camera, scene, renderer;
-			var cameraControls;
-			var effectController;
-			var teapotSize = 400;
-			var ambientLight, light;
-
-			var tess = - 1;	// force initialization
-			var bBottom;
-			var bLid;
-			var bBody;
-			var bFitLid;
-			var bNonBlinn;
-			var shading;
-			var wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;
-
-			var teapot, textureCube;
+			let camera, scene, renderer;
+			let cameraControls;
+			let effectController;
+			const teapotSize = 400;
+			let ambientLight, light;
+
+			let tess = - 1;	// force initialization
+			let bBottom;
+			let bLid;
+			let bBody;
+			let bFitLid;
+			let bNonBlinn;
+			let shading;
+			let wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, reflectiveMaterial;
+
+			let teapot, textureCube;
 
 			// allocate these just once
-			var diffuseColor = new THREE.Color();
-			var specularColor = new THREE.Color();
+			const diffuseColor = new THREE.Color();
+			const specularColor = new THREE.Color();
 
 			init();
 			render();
 
 			function init() {
 
-				var container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var canvasWidth = window.innerWidth;
-				var canvasHeight = window.innerHeight;
+				const canvasWidth = window.innerWidth;
+				const canvasHeight = window.innerHeight;
 
 				// CAMERA
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
@@ -78,14 +78,14 @@
 				cameraControls.addEventListener( 'change', render );
 
 				// TEXTURE MAP
-				var textureMap = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
+				const textureMap = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 				textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
 				textureMap.anisotropy = 16;
 				textureMap.encoding = THREE.sRGBEncoding;
 
 				// REFLECTION MAP
-				var path = "textures/cube/pisa/";
-				var urls = [
+				const path = "textures/cube/pisa/";
+				const urls = [
 					path + "px.png", path + "nx.png",
 					path + "py.png", path + "ny.png",
 					path + "pz.png", path + "nz.png"
@@ -95,7 +95,7 @@
 				textureCube.encoding = THREE.sRGBEncoding;
 
 				// MATERIALS
-				var materialColor = new THREE.Color();
+				const materialColor = new THREE.Color();
 				materialColor.setRGB( 1.0, 1.0, 1.0 );
 
 				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
@@ -126,8 +126,8 @@
 
 			function onWindowResize() {
 
-				var canvasWidth = window.innerWidth;
-				var canvasHeight = window.innerHeight;
+				const canvasWidth = window.innerWidth;
+				const canvasHeight = window.innerHeight;
 
 				renderer.setSize( canvasWidth, canvasHeight );
 
@@ -170,9 +170,9 @@
 					newShading: "glossy"
 				};
 
-				var h;
+				let h;
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				// material (attributes)
 
@@ -306,7 +306,7 @@
 
 				}
 
-				var teapotGeometry = new TeapotBufferGeometry( teapotSize,
+				const teapotGeometry = new TeapotBufferGeometry( teapotSize,
 					tess,
 					effectController.bottom,
 					effectController.lid,

examples/webgl_geometry_terrain.html

@@ -29,16 +29,16 @@
 			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, controls, scene, renderer;
+			let camera, controls, scene, renderer;
 
-			var mesh, texture;
+			let mesh, texture;
 
-			var worldWidth = 256, worldDepth = 256,
+			const worldWidth = 256, worldDepth = 256,
 				worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -52,16 +52,16 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xbfd1e5 );
 
-				var data = generateHeight( worldWidth, worldDepth );
+				const data = generateHeight( worldWidth, worldDepth );
 
 				camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
 
-				var geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
+				const geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
-				var vertices = geometry.attributes.position.array;
+				const vertices = geometry.attributes.position.array;
 
-				for ( var i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
+				for ( let i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
 
 					vertices[ j + 1 ] = data[ i ] * 10;
 
@@ -105,14 +105,16 @@
 
 			function generateHeight( width, height ) {
 
-				var size = width * height, data = new Uint8Array( size ),
-					perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
+				const size = width * height, data = new Uint8Array( size ),
+					perlin = new ImprovedNoise(), z = Math.random() * 100;
 
-				for ( var j = 0; j < 4; j ++ ) {
+				let quality = 1;
 
-					for ( var i = 0; i < size; i ++ ) {
+				for ( let j = 0; j < 4; j ++ ) {
 
-						var x = i % width, y = ~ ~ ( i / width );
+					for ( let i = 0; i < size; i ++ ) {
+
+						const x = i % width, y = ~ ~ ( i / width );
 						data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );
 
 					}
@@ -127,14 +129,14 @@
 
 			function generateTexture( data, width, height ) {
 
-				var canvas, canvasScaled, context, image, imageData, vector3, sun, shade;
+				let context, image, imageData, shade;
 
-				vector3 = new THREE.Vector3( 0, 0, 0 );
+				const vector3 = new THREE.Vector3( 0, 0, 0 );
 
-				sun = new THREE.Vector3( 1, 1, 1 );
+				const sun = new THREE.Vector3( 1, 1, 1 );
 				sun.normalize();
 
-				canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = width;
 				canvas.height = height;
 
@@ -145,7 +147,7 @@
 				image = context.getImageData( 0, 0, canvas.width, canvas.height );
 				imageData = image.data;
 
-				for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
+				for ( let i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
 
 					vector3.x = data[ j - 2 ] - data[ j + 2 ];
 					vector3.y = 2;
@@ -164,7 +166,7 @@
 
 				// Scaled 4x
 
-				canvasScaled = document.createElement( 'canvas' );
+				const canvasScaled = document.createElement( 'canvas' );
 				canvasScaled.width = width * 4;
 				canvasScaled.height = height * 4;
 
@@ -175,9 +177,9 @@
 				image = context.getImageData( 0, 0, canvasScaled.width, canvasScaled.height );
 				imageData = image.data;
 
-				for ( var i = 0, l = imageData.length; i < l; i += 4 ) {
+				for ( let i = 0, l = imageData.length; i < l; i += 4 ) {
 
-					var v = ~ ~ ( Math.random() * 5 );
+					const v = ~ ~ ( Math.random() * 5 );
 
 					imageData[ i ] += v;
 					imageData[ i + 1 ] += v;

examples/webgl_geometry_terrain_fog.html

@@ -29,12 +29,12 @@
 			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
-			var container, stats;
-			var camera, controls, scene, renderer;
-			var mesh, texture;
+			let container, stats;
+			let camera, controls, scene, renderer;
+			let mesh, texture;
 
-			var worldWidth = 256, worldDepth = 256;
-			var clock = new THREE.Clock();
+			const worldWidth = 256, worldDepth = 256;
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -49,17 +49,17 @@
 				scene.background = new THREE.Color( 0xefd1b5 );
 				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
 
-				var data = generateHeight( worldWidth, worldDepth );
+				const data = generateHeight( worldWidth, worldDepth );
 
-				camera.position.set( 100,  800, -800);
-				camera.lookAt( -100, 810, -800 );
+				camera.position.set( 100, 800, - 800 );
+				camera.lookAt( - 100, 810, - 800 );
 
-				var geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
+				const geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
-				var vertices = geometry.attributes.position.array;
+				const vertices = geometry.attributes.position.array;
 
-				for ( var i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
+				for ( let i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
 
 					vertices[ j + 1 ] = data[ i ] * 10;
 
@@ -104,17 +104,24 @@
 
 			function generateHeight( width, height ) {
 
-				var seed = Math.PI / 4;
-				window.Math.random = function () { const x = Math.sin( seed ++ ) * 10000; return x - Math.floor( x ); };
+				let seed = Math.PI / 4;
+				window.Math.random = function () {
 
-				var size = width * height, data = new Uint8Array( size );
-				var perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
+					const x = Math.sin( seed ++ ) * 10000;
+					return x - Math.floor( x );
 
-				for ( var j = 0; j < 4; j ++ ) {
+				};
 
-					for ( var i = 0; i < size; i ++ ) {
+				const size = width * height, data = new Uint8Array( size );
+				const perlin = new ImprovedNoise(), z = Math.random() * 100;
 
-						var x = i % width, y = ~ ~ ( i / width );
+				let quality = 1;
+
+				for ( let j = 0; j < 4; j ++ ) {
+
+					for ( let i = 0; i < size; i ++ ) {
+
+						const x = i % width, y = ~ ~ ( i / width );
 						data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );
 
 					}
@@ -129,14 +136,14 @@
 
 			function generateTexture( data, width, height ) {
 
-				var canvas, canvasScaled, context, image, imageData, vector3, sun, shade;
+				let context, image, imageData, shade;
 
-				vector3 = new THREE.Vector3( 0, 0, 0 );
+				const vector3 = new THREE.Vector3( 0, 0, 0 );
 
-				sun = new THREE.Vector3( 1, 1, 1 );
+				const sun = new THREE.Vector3( 1, 1, 1 );
 				sun.normalize();
 
-				canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = width;
 				canvas.height = height;
 
@@ -147,7 +154,7 @@
 				image = context.getImageData( 0, 0, canvas.width, canvas.height );
 				imageData = image.data;
 
-				for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
+				for ( let i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
 
 					vector3.x = data[ j - 2 ] - data[ j + 2 ];
 					vector3.y = 2;
@@ -166,7 +173,7 @@
 
 				// Scaled 4x
 
-				canvasScaled = document.createElement( 'canvas' );
+				const canvasScaled = document.createElement( 'canvas' );
 				canvasScaled.width = width * 4;
 				canvasScaled.height = height * 4;
 
@@ -177,9 +184,9 @@
 				image = context.getImageData( 0, 0, canvasScaled.width, canvasScaled.height );
 				imageData = image.data;
 
-				for ( var i = 0, l = imageData.length; i < l; i += 4 ) {
+				for ( let i = 0, l = imageData.length; i < l; i += 4 ) {
 
-					var v = ~ ~ ( Math.random() * 5 );
+					const v = ~ ~ ( Math.random() * 5 );
 
 					imageData[ i ] += v;
 					imageData[ i + 1 ] += v;

examples/webgl_geometry_terrain_raycast.html

@@ -29,19 +29,19 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, controls, scene, renderer;
+			let camera, controls, scene, renderer;
 
-			var mesh, texture;
+			let mesh, texture;
 
-			var worldWidth = 256, worldDepth = 256,
+			const worldWidth = 256, worldDepth = 256,
 				worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
-			var helper;
+			let helper;
 
-			var raycaster = new THREE.Raycaster();
-			var mouse = new THREE.Vector2();
+			const raycaster = new THREE.Raycaster();
+			const mouse = new THREE.Vector2();
 
 			init();
 			animate();
@@ -68,19 +68,19 @@
 
 				//
 
-				var data = generateHeight( worldWidth, worldDepth );
+				const data = generateHeight( worldWidth, worldDepth );
 
 				controls.target.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] + 500;
 				camera.position.y = controls.target.y + 2000;
 				camera.position.x = 2000;
 				controls.update();
 
-				var geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
+				const geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
-				var vertices = geometry.attributes.position.array;
+				const vertices = geometry.attributes.position.array;
 
-				for ( var i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
+				for ( let i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
 
 					vertices[ j + 1 ] = data[ i ] * 10;
 
@@ -97,10 +97,10 @@
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				scene.add( mesh );
 
-				var geometry = new THREE.ConeBufferGeometry( 20, 100, 3 );
-				geometry.translate( 0, 50, 0 );
-				geometry.rotateX( Math.PI / 2 );
-				helper = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
+				const geometryHelper = new THREE.ConeBufferGeometry( 20, 100, 3 );
+				geometryHelper.translate( 0, 50, 0 );
+				geometryHelper.rotateX( Math.PI / 2 );
+				helper = new THREE.Mesh( geometryHelper, new THREE.MeshNormalMaterial() );
 				scene.add( helper );
 
 				container.addEventListener( 'mousemove', onMouseMove, false );
@@ -125,14 +125,16 @@
 
 			function generateHeight( width, height ) {
 
-				var size = width * height, data = new Uint8Array( size ),
-					perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
+				const size = width * height, data = new Uint8Array( size ),
+					perlin = new ImprovedNoise(), z = Math.random() * 100;
 
-				for ( var j = 0; j < 4; j ++ ) {
+				let quality = 1;
 
-					for ( var i = 0; i < size; i ++ ) {
+				for ( let j = 0; j < 4; j ++ ) {
 
-						var x = i % width, y = ~ ~ ( i / width );
+					for ( let i = 0; i < size; i ++ ) {
+
+						const x = i % width, y = ~ ~ ( i / width );
 						data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );
 
 					}
@@ -149,14 +151,14 @@
 
 				// bake lighting into texture
 
-				var canvas, canvasScaled, context, image, imageData, vector3, sun, shade;
+				let context, image, imageData, shade;
 
-				vector3 = new THREE.Vector3( 0, 0, 0 );
+				const vector3 = new THREE.Vector3( 0, 0, 0 );
 
-				sun = new THREE.Vector3( 1, 1, 1 );
+				const sun = new THREE.Vector3( 1, 1, 1 );
 				sun.normalize();
 
-				canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = width;
 				canvas.height = height;
 
@@ -167,7 +169,7 @@
 				image = context.getImageData( 0, 0, canvas.width, canvas.height );
 				imageData = image.data;
 
-				for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
+				for ( let i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
 
 					vector3.x = data[ j - 2 ] - data[ j + 2 ];
 					vector3.y = 2;
@@ -186,7 +188,7 @@
 
 				// Scaled 4x
 
-				canvasScaled = document.createElement( 'canvas' );
+				const canvasScaled = document.createElement( 'canvas' );
 				canvasScaled.width = width * 4;
 				canvasScaled.height = height * 4;
 
@@ -197,9 +199,9 @@
 				image = context.getImageData( 0, 0, canvasScaled.width, canvasScaled.height );
 				imageData = image.data;
 
-				for ( var i = 0, l = imageData.length; i < l; i += 4 ) {
+				for ( let i = 0, l = imageData.length; i < l; i += 4 ) {
 
-					var v = ~ ~ ( Math.random() * 5 );
+					const v = ~ ~ ( Math.random() * 5 );
 
 					imageData[ i ] += v;
 					imageData[ i + 1 ] += v;
@@ -237,7 +239,7 @@
 				raycaster.setFromCamera( mouse, camera );
 
 				// See if the ray from the camera into the world hits one of our meshes
-				var intersects = raycaster.intersectObject( mesh );
+				const intersects = raycaster.intersectObject( mesh );
 
 				// Toggle rotation bool for meshes that we clicked
 				if ( intersects.length > 0 ) {

examples/webgl_geometry_text.html

@@ -26,24 +26,16 @@
 
 			THREE.Cache.enabled = true;
 
-			var container, stats, permalink, hex;
+			let container, stats, permalink, hex;
 
-			var camera, cameraTarget, scene, renderer;
+			let camera, cameraTarget, scene, renderer;
 
-			var group, textMesh1, textMesh2, textGeo, materials;
+			let group, textMesh1, textMesh2, textGeo, materials;
 
-			var firstLetter = true;
+			let firstLetter = true;
 
-			var text = "three.js",
+			let text = "three.js",
 
-				height = 20,
-				size = 70,
-				hover = 30,
-
-				curveSegments = 4,
-
-				bevelThickness = 2,
-				bevelSize = 1.5,
 				bevelEnabled = true,
 
 				font = undefined,
@@ -51,9 +43,18 @@
 				fontName = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif
 				fontWeight = "bold"; // normal bold
 
-			var mirror = true;
+			const height = 20,
+				size = 70,
+				hover = 30,
+
+				curveSegments = 4,
+
+				bevelThickness = 2,
+				bevelSize = 1.5;
+
+			const mirror = true;
 
-			var fontMap = {
+			const fontMap = {
 
 				"helvetiker": 0,
 				"optimer": 1,
@@ -63,35 +64,35 @@
 
 			};
 
-			var weightMap = {
+			const weightMap = {
 
 				"regular": 0,
 				"bold": 1
 
 			};
 
-			var reverseFontMap = [];
-			var reverseWeightMap = [];
+			const reverseFontMap = [];
+			const reverseWeightMap = [];
 
-			for ( var i in fontMap ) reverseFontMap[ fontMap[ i ] ] = i;
-			for ( var i in weightMap ) reverseWeightMap[ weightMap[ i ] ] = i;
+			for ( const i in fontMap ) reverseFontMap[ fontMap[ i ] ] = i;
+			for ( const i in weightMap ) reverseWeightMap[ weightMap[ i ] ] = i;
 
-			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;
 
-			var fontIndex = 1;
+			let fontIndex = 1;
 
 			init();
 			animate();
 
 			function decimalToHex( d ) {
 
-				var hex = Number( d ).toString( 16 );
+				let hex = Number( d ).toString( 16 );
 				hex = "000000".substr( 0, 6 - hex.length ) + hex;
 				return hex.toUpperCase();
 
@@ -119,25 +120,25 @@
 
 				// 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 );
 				scene.add( pointLight );
 
 				// Get text from hash
 
-				var hash = document.location.hash.substr( 1 );
+				const hash = document.location.hash.substr( 1 );
 
 				if ( hash.length !== 0 ) {
 
-					var colorhash = hash.substring( 0, 6 );
-					var fonthash = hash.substring( 6, 7 );
-					var weighthash = hash.substring( 7, 8 );
-					var bevelhash = hash.substring( 8, 9 );
-					var texthash = hash.substring( 10 );
+					const colorhash = hash.substring( 0, 6 );
+					const fonthash = hash.substring( 6, 7 );
+					const weighthash = hash.substring( 7, 8 );
+					const bevelhash = hash.substring( 8, 9 );
+					const texthash = hash.substring( 10 );
 
 					hex = colorhash;
 					pointLight.color.setHex( parseInt( colorhash, 16 ) );
@@ -170,7 +171,7 @@
 
 				loadFont();
 
-				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 } )
 				);
@@ -269,7 +270,7 @@
 
 			function updatePermalink() {
 
-				var link = hex + fontMap[ fontName ] + weightMap[ fontWeight ] + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
+				const link = hex + fontMap[ fontName ] + weightMap[ fontWeight ] + boolToNum( bevelEnabled ) + "#" + encodeURI( text );
 
 				permalink.href = "#" + link;
 				window.location.hash = link;
@@ -285,7 +286,7 @@
 
 				}
 
-				var keyCode = event.keyCode;
+				const keyCode = event.keyCode;
 
 				// backspace
 
@@ -304,7 +305,7 @@
 
 			function onDocumentKeyPress( event ) {
 
-				var keyCode = event.which;
+				const keyCode = event.which;
 
 				// backspace
 
@@ -314,7 +315,7 @@
 
 				} else {
 
-					var ch = String.fromCharCode( keyCode );
+					const ch = String.fromCharCode( keyCode );
 					text += ch;
 
 					refreshText();
@@ -325,7 +326,7 @@
 
 			function loadFont() {
 
-				var loader = new THREE.FontLoader();
+				const loader = new THREE.FontLoader();
 				loader.load( 'fonts/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
 
 					font = response;
@@ -355,37 +356,37 @@
 				textGeo.computeBoundingBox();
 				textGeo.computeVertexNormals();
 
-				var triangle = new THREE.Triangle();
+				const triangle = new THREE.Triangle();
 
 				// "fix" side normals by removing z-component of normals for side faces
 				// (this doesn't work well for beveled geometry as then we lose nice curvature around z-axis)
 
 				if ( ! bevelEnabled ) {
 
-					var triangleAreaHeuristics = 0.1 * ( height * size );
+					const triangleAreaHeuristics = 0.1 * ( height * size );
 
-					for ( var i = 0; i < textGeo.faces.length; i ++ ) {
+					for ( let i = 0; i < textGeo.faces.length; i ++ ) {
 
-						var face = textGeo.faces[ i ];
+						const face = textGeo.faces[ i ];
 
 						if ( face.materialIndex == 1 ) {
 
-							for ( var j = 0; j < face.vertexNormals.length; j ++ ) {
+							for ( let j = 0; j < face.vertexNormals.length; j ++ ) {
 
 								face.vertexNormals[ j ].z = 0;
 								face.vertexNormals[ j ].normalize();
 
 							}
 
-							var va = textGeo.vertices[ face.a ];
-							var vb = textGeo.vertices[ face.b ];
-							var vc = textGeo.vertices[ face.c ];
+							const va = textGeo.vertices[ face.a ];
+							const vb = textGeo.vertices[ face.b ];
+							const vc = textGeo.vertices[ face.c ];
 
-							var s = triangle.set( va, vb, vc ).getArea();
+							const s = triangle.set( va, vb, vc ).getArea();
 
 							if ( s > triangleAreaHeuristics ) {
 
-								for ( var j = 0; j < face.vertexNormals.length; j ++ ) {
+								for ( let j = 0; j < face.vertexNormals.length; j ++ ) {
 
 									face.vertexNormals[ j ].copy( face.normal );
 
@@ -399,7 +400,7 @@
 
 				}
 
-				var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+				const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
 				textGeo = new THREE.BufferGeometry().fromGeometry( textGeo );
 

examples/webgl_geometry_text_shapes.html

@@ -26,7 +26,7 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -39,56 +39,54 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var loader = new THREE.FontLoader();
+				const loader = new THREE.FontLoader();
 				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
-					var xMid, text;
+					const color = 0x006699;
 
-					var color = 0x006699;
-
-					var matDark = new THREE.LineBasicMaterial( {
+					const matDark = new THREE.LineBasicMaterial( {
 						color: color,
 						side: THREE.DoubleSide
 					} );
 
-					var matLite = new THREE.MeshBasicMaterial( {
+					const matLite = new THREE.MeshBasicMaterial( {
 						color: color,
 						transparent: true,
 						opacity: 0.4,
 						side: THREE.DoubleSide
 					} );
 
-					var message = "   Three.js\nSimple text.";
+					const message = "   Three.js\nSimple text.";
 
-					var shapes = font.generateShapes( message, 100 );
+					const shapes = font.generateShapes( message, 100 );
 
-					var geometry = new THREE.ShapeBufferGeometry( shapes );
+					const geometry = new THREE.ShapeBufferGeometry( shapes );
 
 					geometry.computeBoundingBox();
 
-					xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
+					const xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
 
 					geometry.translate( xMid, 0, 0 );
 
 					// make shape ( N.B. edge view not visible )
 
-					text = new THREE.Mesh( geometry, matLite );
+					const text = new THREE.Mesh( geometry, matLite );
 					text.position.z = - 150;
 					scene.add( text );
 
 					// make line shape ( N.B. edge view remains visible )
 
-					var holeShapes = [];
+					const holeShapes = [];
 
-					for ( var i = 0; i < shapes.length; i ++ ) {
+					for ( let i = 0; i < shapes.length; i ++ ) {
 
-						var shape = shapes[ i ];
+						const shape = shapes[ i ];
 
 						if ( shape.holes && shape.holes.length > 0 ) {
 
-							for ( var j = 0; j < shape.holes.length; j ++ ) {
+							for ( let j = 0; j < shape.holes.length; j ++ ) {
 
-								var hole = shape.holes[ j ];
+								const hole = shape.holes[ j ];
 								holeShapes.push( hole );
 
 							}
@@ -99,18 +97,18 @@
 
 					shapes.push.apply( shapes, holeShapes );
 
-					var lineText = new THREE.Object3D();
+					const lineText = new THREE.Object3D();
 
-					for ( var i = 0; i < shapes.length; i ++ ) {
+					for ( let i = 0; i < shapes.length; i ++ ) {
 
-						var shape = shapes[ i ];
+						const shape = shapes[ i ];
 
-						var points = shape.getPoints();
-						var geometry = new THREE.BufferGeometry().setFromPoints( points );
+						const points = shape.getPoints();
+						const geometry = new THREE.BufferGeometry().setFromPoints( points );
 
 						geometry.translate( xMid, 0, 0 );
 
-						var lineMesh = new THREE.Line( geometry, matDark );
+						const lineMesh = new THREE.Line( geometry, matDark );
 						lineText.add( lineMesh );
 
 					}
@@ -124,7 +122,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.target.set( 0, 0, 0 );
 				controls.update();
 

examples/webgl_geometry_text_stroke.html

@@ -27,7 +27,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { SVGLoader } from './jsm/loaders/SVGLoader.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -40,56 +40,54 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var loader = new THREE.FontLoader();
+				const loader = new THREE.FontLoader();
 				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
-					var xMid, text;
+					const color = new THREE.Color( 0x006699 );
 
-					var color = new THREE.Color( 0x006699 );
-
-					var matDark = new THREE.MeshBasicMaterial( {
+					const matDark = new THREE.MeshBasicMaterial( {
 						color: color,
 						side: THREE.DoubleSide
 					} );
 
-					var matLite = new THREE.MeshBasicMaterial( {
+					const matLite = new THREE.MeshBasicMaterial( {
 						color: color,
 						transparent: true,
 						opacity: 0.4,
 						side: THREE.DoubleSide
 					} );
 
-					var message = "   Three.js\nStroke text.";
+					const message = "   Three.js\nStroke text.";
 
-					var shapes = font.generateShapes( message, 100 );
+					const shapes = font.generateShapes( message, 100 );
 
-					var geometry = new THREE.ShapeBufferGeometry( shapes );
+					const geometry = new THREE.ShapeBufferGeometry( shapes );
 
 					geometry.computeBoundingBox();
 
-					xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
+					const xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
 
 					geometry.translate( xMid, 0, 0 );
 
 					// make shape ( N.B. edge view not visible )
 
-					text = new THREE.Mesh( geometry, matLite );
+					const text = new THREE.Mesh( geometry, matLite );
 					text.position.z = - 150;
 					scene.add( text );
 
 					// make line shape ( N.B. edge view remains visible )
 
-					var holeShapes = [];
+					const holeShapes = [];
 
-					for ( var i = 0; i < shapes.length; i ++ ) {
+					for ( let i = 0; i < shapes.length; i ++ ) {
 
-						var shape = shapes[ i ];
+						const shape = shapes[ i ];
 
 						if ( shape.holes && shape.holes.length > 0 ) {
 
-							for ( var j = 0; j < shape.holes.length; j ++ ) {
+							for ( let j = 0; j < shape.holes.length; j ++ ) {
 
-								var hole = shape.holes[ j ];
+								const hole = shape.holes[ j ];
 								holeShapes.push( hole );
 
 							}
@@ -100,21 +98,21 @@
 
 					shapes.push.apply( shapes, holeShapes );
 
-					var style = SVGLoader.getStrokeStyle( 5, color.getStyle() );
+					const style = SVGLoader.getStrokeStyle( 5, color.getStyle() );
 
-					var strokeText = new THREE.Group();
+					const strokeText = new THREE.Group();
 
-					for ( var i = 0; i < shapes.length; i ++ ) {
+					for ( let i = 0; i < shapes.length; i ++ ) {
 
-						var shape = shapes[ i ];
+						const shape = shapes[ i ];
 
-						var points = shape.getPoints();
+						const points = shape.getPoints();
 
-						var geometry = SVGLoader.pointsToStroke( points, style );
+						const geometry = SVGLoader.pointsToStroke( points, style );
 
 						geometry.translate( xMid, 0, 0 );
 
-						var strokeMesh = new THREE.Mesh( geometry, matDark );
+						const strokeMesh = new THREE.Mesh( geometry, matDark );
 						strokeText.add( strokeMesh );
 
 					}
@@ -128,7 +126,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.target.set( 0, 0, 0 );
 				controls.update();
 

examples/webgl_gpgpu_birds.html

@@ -305,22 +305,22 @@
 			import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
 
 			/* TEXTURE WIDTH FOR SIMULATION */
-			var WIDTH = 32;
+			const WIDTH = 32;
 
-			var BIRDS = WIDTH * WIDTH;
+			const BIRDS = WIDTH * WIDTH;
 
 			// Custom Geometry - using 3 triangles each. No UVs, no normals currently.
-			var BirdGeometry = function () {
+			function BirdGeometry() {
 
-				var triangles = BIRDS * 3;
-				var points = triangles * 3;
+				const triangles = BIRDS * 3;
+				const points = triangles * 3;
 
 				THREE.BufferGeometry.call( this );
 
-				var vertices = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 );
-				var birdColors = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 );
-				var references = new THREE.BufferAttribute( new Float32Array( points * 2 ), 2 );
-				var birdVertex = new THREE.BufferAttribute( new Float32Array( points ), 1 );
+				const vertices = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 );
+				const birdColors = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 );
+				const references = new THREE.BufferAttribute( new Float32Array( points * 2 ), 2 );
+				const birdVertex = new THREE.BufferAttribute( new Float32Array( points ), 1 );
 
 				this.setAttribute( 'position', vertices );
 				this.setAttribute( 'birdColor', birdColors );
@@ -330,11 +330,11 @@
 				// this.setAttribute( 'normal', new Float32Array( points * 3 ), 3 );
 
 
-				var v = 0;
+				let v = 0;
 
 				function verts_push() {
 
-					for ( var i = 0; i < arguments.length; i ++ ) {
+					for ( let i = 0; i < arguments.length; i ++ ) {
 
 						vertices.array[ v ++ ] = arguments[ i ];
 
@@ -342,9 +342,9 @@
 
 				}
 
-				var wingsSpan = 20;
+				const wingsSpan = 20;
 
-				for ( var f = 0; f < BIRDS; f ++ ) {
+				for ( let f = 0; f < BIRDS; f ++ ) {
 
 					// Body
 					verts_push(
@@ -369,13 +369,13 @@
 
 				}
 
-				for ( var v = 0; v < triangles * 3; v ++ ) {
+				for ( let v = 0; v < triangles * 3; v ++ ) {
 
-					var i = ~ ~ ( v / 3 );
-					var x = ( i % WIDTH ) / WIDTH;
-					var y = ~ ~ ( i / WIDTH ) / WIDTH;
+					const i = ~ ~ ( v / 3 );
+					const x = ( i % WIDTH ) / WIDTH;
+					const y = ~ ~ ( i / WIDTH ) / WIDTH;
 
-					var c = new THREE.Color(
+					const c = new THREE.Color(
 						0x444444 +
 						~ ~ ( v / 9 ) / BIRDS * 0x666666
 					);
@@ -393,28 +393,28 @@
 
 				this.scale( 0.2, 0.2, 0.2 );
 
-			};
+			}
 
 			BirdGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
 
 
-			var container, stats;
-			var camera, scene, renderer;
-			var mouseX = 0, mouseY = 0;
+			let container, stats;
+			let camera, scene, renderer;
+			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 BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2;
+			const BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2;
 
-			var last = performance.now();
+			let last = performance.now();
 
-			var gpuCompute;
-			var velocityVariable;
-			var positionVariable;
-			var positionUniforms;
-			var velocityUniforms;
-			var birdUniforms;
+			let gpuCompute;
+			let velocityVariable;
+			let positionVariable;
+			let positionUniforms;
+			let velocityUniforms;
+			let birdUniforms;
 
 			init();
 			animate();
@@ -448,17 +448,17 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 
-				var effectController = {
+				const effectController = {
 					separation: 20.0,
 					alignment: 20.0,
 					cohesion: 20.0,
 					freedom: 0.75
 				};
 
-				var valuesChanger = function () {
+				const valuesChanger = function () {
 
 					velocityUniforms[ "separationDistance" ].value = effectController.separation;
 					velocityUniforms[ "alignmentDistance" ].value = effectController.alignment;
@@ -488,8 +488,8 @@
 
 				}
 
-				var dtPosition = gpuCompute.createTexture();
-				var dtVelocity = gpuCompute.createTexture();
+				const dtPosition = gpuCompute.createTexture();
+				const dtVelocity = gpuCompute.createTexture();
 				fillPositionTexture( dtPosition );
 				fillVelocityTexture( dtVelocity );
 
@@ -519,7 +519,7 @@
 				positionVariable.wrapS = THREE.RepeatWrapping;
 				positionVariable.wrapT = THREE.RepeatWrapping;
 
-				var error = gpuCompute.init();
+				const error = gpuCompute.init();
 
 				if ( error !== null ) {
 
@@ -537,7 +537,7 @@
 
 			function initBirds() {
 
-				var geometry = new BirdGeometry();
+				const geometry = new BirdGeometry();
 
 				// For Vertex and Fragment
 				birdUniforms = {
@@ -549,7 +549,7 @@
 				};
 
 				// THREE.ShaderMaterial
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 					uniforms: birdUniforms,
 					vertexShader: document.getElementById( 'birdVS' ).textContent,
 					fragmentShader: document.getElementById( 'birdFS' ).textContent,
@@ -557,7 +557,7 @@
 
 				} );
 
-				var birdMesh = new THREE.Mesh( geometry, material );
+				const birdMesh = new THREE.Mesh( geometry, material );
 				birdMesh.rotation.y = Math.PI / 2;
 				birdMesh.matrixAutoUpdate = false;
 				birdMesh.updateMatrix();
@@ -568,13 +568,13 @@
 
 			function fillPositionTexture( texture ) {
 
-				var theArray = texture.image.data;
+				const theArray = texture.image.data;
 
-				for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {
+				for ( let k = 0, kl = theArray.length; k < kl; k += 4 ) {
 
-					var x = Math.random() * BOUNDS - BOUNDS_HALF;
-					var y = Math.random() * BOUNDS - BOUNDS_HALF;
-					var z = Math.random() * BOUNDS - BOUNDS_HALF;
+					const x = Math.random() * BOUNDS - BOUNDS_HALF;
+					const y = Math.random() * BOUNDS - BOUNDS_HALF;
+					const z = Math.random() * BOUNDS - BOUNDS_HALF;
 
 					theArray[ k + 0 ] = x;
 					theArray[ k + 1 ] = y;
@@ -587,13 +587,13 @@
 
 			function fillVelocityTexture( texture ) {
 
-				var theArray = texture.image.data;
+				const theArray = texture.image.data;
 
-				for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {
+				for ( let k = 0, kl = theArray.length; k < kl; k += 4 ) {
 
-					var x = Math.random() - 0.5;
-					var y = Math.random() - 0.5;
-					var z = Math.random() - 0.5;
+					const x = Math.random() - 0.5;
+					const y = Math.random() - 0.5;
+					const z = Math.random() - 0.5;
 
 					theArray[ k + 0 ] = x * 10;
 					theArray[ k + 1 ] = y * 10;
@@ -638,8 +638,8 @@
 
 			function render() {
 
-				var now = performance.now();
-				var delta = ( now - last ) / 1000;
+				const now = performance.now();
+				let delta = ( now - last ) / 1000;
 
 				if ( delta > 1 ) delta = 1; // safety cap on large deltas
 				last = now;

examples/webgl_gpgpu_birds_gltf.html

@@ -214,12 +214,12 @@
 			import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
 
 			/* TEXTURE WIDTH FOR SIMULATION */
-			var WIDTH = 64;
-			var BIRDS = WIDTH * WIDTH;
+			const WIDTH = 64;
+			const BIRDS = WIDTH * WIDTH;
 
 			/* BAKE ANIMATION INTO TEXTURE and CREATE GEOMETRY FROM BASE MODEL */
-			var BirdGeometry = new THREE.BufferGeometry();
-			var textureAnimation, durationAnimation, birdMesh, materialShader, vertexPerBird;
+			const BirdGeometry = new THREE.BufferGeometry();
+			let textureAnimation, durationAnimation, birdMesh, materialShader, vertexPerBird;
 
 			function nextPowerOf2( n ) {
 
@@ -234,34 +234,34 @@
 
 			};
 
-			var gltfs = [ 'models/gltf/Parrot.glb', 'models/gltf/Flamingo.glb' ];
-			var colors = [ 0xccFFFF, 0xffdeff ];
-			var sizes = [ 0.2, 0.1 ];
-			var selectModel = Math.floor( Math.random() * gltfs.length );
+			const gltfs = [ 'models/gltf/Parrot.glb', 'models/gltf/Flamingo.glb' ];
+			const colors = [ 0xccFFFF, 0xffdeff ];
+			const sizes = [ 0.2, 0.1 ];
+			const selectModel = Math.floor( Math.random() * gltfs.length );
 			new GLTFLoader().load( gltfs[ selectModel ], function ( gltf ) {
 
-				var animations = gltf.animations;
+				const animations = gltf.animations;
 				durationAnimation = Math.round( animations[ 0 ].duration * 60 );
-				var birdGeo = gltf.scene.children[ 0 ].geometry;
-				var morphAttributes = birdGeo.morphAttributes.position;
-				var tHeight = nextPowerOf2( durationAnimation );
-				var tWidth = nextPowerOf2( birdGeo.getAttribute( 'position' ).count );
+				const birdGeo = gltf.scene.children[ 0 ].geometry;
+				const morphAttributes = birdGeo.morphAttributes.position;
+				const tHeight = nextPowerOf2( durationAnimation );
+				const tWidth = nextPowerOf2( birdGeo.getAttribute( 'position' ).count );
 				vertexPerBird = birdGeo.getAttribute( 'position' ).count;
-				var tData = new Float32Array( 3 * tWidth * tHeight );
+				const tData = new Float32Array( 3 * tWidth * tHeight );
 
-				for ( var i = 0; i < tWidth; i ++ ) {
+				for ( let i = 0; i < tWidth; i ++ ) {
 
-					for ( var j = 0; j < tHeight; j ++ ) {
+					for ( let j = 0; j < tHeight; j ++ ) {
 
-						var offset = j * tWidth * 3;
+						const offset = j * tWidth * 3;
 
-						var curMorph = Math.floor( j / durationAnimation * morphAttributes.length );
-						var nextMorph = ( Math.floor( j / durationAnimation * morphAttributes.length ) + 1 ) % morphAttributes.length;
-						var lerpAmount = j / durationAnimation * morphAttributes.length % 1;
+						const curMorph = Math.floor( j / durationAnimation * morphAttributes.length );
+						const nextMorph = ( Math.floor( j / durationAnimation * morphAttributes.length ) + 1 ) % morphAttributes.length;
+						const lerpAmount = j / durationAnimation * morphAttributes.length % 1;
 
 						if ( j < durationAnimation ) {
 
-							var d0, d1;
+							let d0, d1;
 
 							d0 = morphAttributes[ curMorph ].array[ i * 3 ];
 							d1 = morphAttributes[ nextMorph ].array[ i * 3 ];
@@ -287,33 +287,33 @@
 				textureAnimation = new THREE.DataTexture( tData, tWidth, tHeight, THREE.RGBFormat, THREE.FloatType );
 				textureAnimation.needsUpdate = true;
 
-				var vertices = [], color = [], reference = [], seeds = [], indices = [];
-				var totalVertices = birdGeo.getAttribute( 'position' ).count * 3 * BIRDS;
-				for ( var i = 0; i < totalVertices; i ++ ) {
+				const vertices = [], color = [], reference = [], seeds = [], indices = [];
+				const totalVertices = birdGeo.getAttribute( 'position' ).count * 3 * BIRDS;
+				for ( let i = 0; i < totalVertices; i ++ ) {
 
-					var bIndex = i % ( birdGeo.getAttribute( 'position' ).count * 3 );
+					const bIndex = i % ( birdGeo.getAttribute( 'position' ).count * 3 );
 					vertices.push( birdGeo.getAttribute( 'position' ).array[ bIndex ] );
 					color.push( birdGeo.getAttribute( 'color' ).array[ bIndex ] );
 
 				}
 
-				var r = Math.random();
-				for ( var i = 0; i < birdGeo.getAttribute( 'position' ).count * BIRDS; i ++ ) {
+				let r = Math.random();
+				for ( let i = 0; i < birdGeo.getAttribute( 'position' ).count * BIRDS; i ++ ) {
 
-					var bIndex = i % ( birdGeo.getAttribute( 'position' ).count );
-					var bird = Math.floor( i / birdGeo.getAttribute( 'position' ).count );
+					const bIndex = i % ( birdGeo.getAttribute( 'position' ).count );
+					const bird = Math.floor( i / birdGeo.getAttribute( 'position' ).count );
 					if ( bIndex == 0 ) r = Math.random();
-					var j = ~ ~ bird;
-					var x = ( j % WIDTH ) / WIDTH;
-					var y = ~ ~ ( j / WIDTH ) / WIDTH;
+					const j = ~ ~ bird;
+					const x = ( j % WIDTH ) / WIDTH;
+					const y = ~ ~ ( j / WIDTH ) / WIDTH;
 					reference.push( x, y, bIndex / tWidth, durationAnimation / tHeight );
 					seeds.push( bird, r, Math.random(), Math.random() );
 
 				}
 
-				for ( var i = 0; i < birdGeo.index.array.length * BIRDS; i ++ ) {
+				for ( let i = 0; i < birdGeo.index.array.length * BIRDS; i ++ ) {
 
-					var offset = Math.floor( i / birdGeo.index.array.length ) * ( birdGeo.getAttribute( 'position' ).count );
+					const offset = Math.floor( i / birdGeo.index.array.length ) * ( birdGeo.getAttribute( 'position' ).count );
 					indices.push( birdGeo.index.array[ i % birdGeo.index.array.length ] + offset );
 
 				}
@@ -331,22 +331,22 @@
 
 			} );
 
-			var container, stats;
-			var camera, scene, renderer;
-			var mouseX = 0, mouseY = 0;
+			let container, stats;
+			let camera, scene, renderer;
+			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 BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2;
+			const BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2;
 
-			var last = performance.now();
+			let last = performance.now();
 
-			var gpuCompute;
-			var velocityVariable;
-			var positionVariable;
-			var positionUniforms;
-			var velocityUniforms;
+			let gpuCompute;
+			let velocityVariable;
+			let positionVariable;
+			let positionUniforms;
+			let velocityUniforms;
 
 			function init() {
 
@@ -362,13 +362,13 @@
 
 				// LIGHTS
 
-				var hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 1.6 );
+				const hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 1.6 );
 				hemiLight.color.setHSL( 0.6, 1, 0.6 );
 				hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
 				hemiLight.position.set( 0, 50, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0x00CED1, 0.6 );
+				const dirLight = new THREE.DirectionalLight( 0x00CED1, 0.6 );
 				dirLight.color.setHSL( 0.1, 1, 0.95 );
 				dirLight.position.set( - 1, 1.75, 1 );
 				dirLight.position.multiplyScalar( 30 );
@@ -389,9 +389,9 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
-				var effectController = {
+				const effectController = {
 
 					separation: 20.0,
 					alignment: 20.0,
@@ -402,7 +402,7 @@
 
 				};
 
-				var valuesChanger = function () {
+				const valuesChanger = function () {
 
 					velocityUniforms[ "separationDistance" ].value = effectController.separation;
 					velocityUniforms[ "alignmentDistance" ].value = effectController.alignment;
@@ -436,8 +436,8 @@
 
 				}
 
-				var dtPosition = gpuCompute.createTexture();
-				var dtVelocity = gpuCompute.createTexture();
+				const dtPosition = gpuCompute.createTexture();
+				const dtVelocity = gpuCompute.createTexture();
 				fillPositionTexture( dtPosition );
 				fillVelocityTexture( dtVelocity );
 
@@ -467,7 +467,7 @@
 				positionVariable.wrapS = THREE.RepeatWrapping;
 				positionVariable.wrapT = THREE.RepeatWrapping;
 
-				var error = gpuCompute.init();
+				const error = gpuCompute.init();
 
 				if ( error !== null ) {
 
@@ -485,9 +485,9 @@
 
 			function initBirds() {
 
-				var geometry = BirdGeometry;
+				const geometry = BirdGeometry;
 
-				var m = new THREE.MeshStandardMaterial( {
+				const m = new THREE.MeshStandardMaterial( {
 					vertexColors: true,
 					flatShading: true,
 					roughness: 1,
@@ -503,9 +503,9 @@
 					shader.uniforms.size = { value: 0.1 };
 					shader.uniforms.delta = { value: 0.0 };
 
-					var token = '#define STANDARD';
+					let token = '#define STANDARD';
 
-					var insert = /* glsl */`
+					let insert = /* glsl */`
 						attribute vec4 reference;
 						attribute vec4 seeds;
 						attribute vec3 birdColor;
@@ -518,9 +518,9 @@
 
 					shader.vertexShader = shader.vertexShader.replace( token, token + insert );
 
-					var token = '#include <begin_vertex>';
+					token = '#include <begin_vertex>';
 
-					var insert = /* glsl */`
+					insert = /* glsl */`
 						vec4 tmpPos = texture2D( texturePosition, reference.xy );
 
 						vec3 pos = tmpPos.xyz;
@@ -569,13 +569,13 @@
 
 			function fillPositionTexture( texture ) {
 
-				var theArray = texture.image.data;
+				const theArray = texture.image.data;
 
-				for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {
+				for ( let k = 0, kl = theArray.length; k < kl; k += 4 ) {
 
-					var x = Math.random() * BOUNDS - BOUNDS_HALF;
-					var y = Math.random() * BOUNDS - BOUNDS_HALF;
-					var z = Math.random() * BOUNDS - BOUNDS_HALF;
+					const x = Math.random() * BOUNDS - BOUNDS_HALF;
+					const y = Math.random() * BOUNDS - BOUNDS_HALF;
+					const z = Math.random() * BOUNDS - BOUNDS_HALF;
 
 					theArray[ k + 0 ] = x;
 					theArray[ k + 1 ] = y;
@@ -588,13 +588,13 @@
 
 			function fillVelocityTexture( texture ) {
 
-				var theArray = texture.image.data;
+				const theArray = texture.image.data;
 
-				for ( var k = 0, kl = theArray.length; k < kl; k += 4 ) {
+				for ( let k = 0, kl = theArray.length; k < kl; k += 4 ) {
 
-					var x = Math.random() - 0.5;
-					var y = Math.random() - 0.5;
-					var z = Math.random() - 0.5;
+					const x = Math.random() - 0.5;
+					const y = Math.random() - 0.5;
+					const z = Math.random() - 0.5;
 
 					theArray[ k + 0 ] = x * 10;
 					theArray[ k + 1 ] = y * 10;
@@ -639,8 +639,8 @@
 
 			function render() {
 
-				var now = performance.now();
-				var delta = ( now - last ) / 1000;
+				const now = performance.now();
+				let delta = ( now - last ) / 1000;
 
 				if ( delta > 1 ) delta = 1; // safety cap on large deltas
 				last = now;

examples/webgl_gpgpu_protoplanet.html

@@ -241,23 +241,23 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
 
-			var isIE = /Trident/i.test( navigator.userAgent );
-			var isEdge = /Edge/i.test( navigator.userAgent );
+			const isIE = /Trident/i.test( navigator.userAgent );
+			const isEdge = /Edge/i.test( navigator.userAgent );
 
 			// Texture width for simulation (each texel is a debris particle)
-			var WIDTH = ( isIE || isEdge ) ? 4 : 64;
+			const WIDTH = ( isIE || isEdge ) ? 4 : 64;
 
-			var container, stats;
-			var camera, scene, renderer, geometry;
+			let container, stats;
+			let camera, scene, renderer, geometry;
 
-			var PARTICLES = WIDTH * WIDTH;
+			const PARTICLES = WIDTH * WIDTH;
 
-			var gpuCompute;
-			var velocityVariable;
-			var positionVariable;
-			var velocityUniforms;
-			var particleUniforms;
-			var effectController;
+			let gpuCompute;
+			let velocityVariable;
+			let positionVariable;
+			let velocityUniforms;
+			let particleUniforms;
+			let effectController;
 
 			init();
 			animate();
@@ -278,7 +278,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.minDistance = 100;
 				controls.maxDistance = 1000;
 
@@ -322,8 +322,8 @@
 
 				}
 
-				var dtPosition = gpuCompute.createTexture();
-				var dtVelocity = gpuCompute.createTexture();
+				const dtPosition = gpuCompute.createTexture();
+				const dtVelocity = gpuCompute.createTexture();
 
 				fillTextures( dtPosition, dtVelocity );
 
@@ -338,7 +338,7 @@
 				velocityUniforms[ "gravityConstant" ] = { value: 0.0 };
 				velocityUniforms[ "density" ] = { value: 0.0 };
 
-				var error = gpuCompute.init();
+				const error = gpuCompute.init();
 
 				if ( error !== null ) {
 
@@ -356,8 +356,8 @@
 
 			function restartSimulation() {
 
-				var dtPosition = gpuCompute.createTexture();
-				var dtVelocity = gpuCompute.createTexture();
+				const dtPosition = gpuCompute.createTexture();
+				const dtVelocity = gpuCompute.createTexture();
 
 				fillTextures( dtPosition, dtVelocity );
 
@@ -372,10 +372,10 @@
 
 				geometry = new THREE.BufferGeometry();
 
-				var positions = new Float32Array( PARTICLES * 3 );
-				var p = 0;
+				const positions = new Float32Array( PARTICLES * 3 );
+				let p = 0;
 
-				for ( var i = 0; i < PARTICLES; i ++ ) {
+				for ( let i = 0; i < PARTICLES; i ++ ) {
 
 					positions[ p ++ ] = ( Math.random() * 2 - 1 ) * effectController.radius;
 					positions[ p ++ ] = 0; //( Math.random() * 2 - 1 ) * effectController.radius;
@@ -383,12 +383,12 @@
 
 				}
 
-				var uvs = new Float32Array( PARTICLES * 2 );
+				const uvs = new Float32Array( PARTICLES * 2 );
 				p = 0;
 
-				for ( var j = 0; j < WIDTH; j ++ ) {
+				for ( let j = 0; j < WIDTH; j ++ ) {
 
-					for ( var i = 0; i < WIDTH; i ++ ) {
+					for ( let i = 0; i < WIDTH; i ++ ) {
 
 						uvs[ p ++ ] = i / ( WIDTH - 1 );
 						uvs[ p ++ ] = j / ( WIDTH - 1 );
@@ -408,7 +408,7 @@
 				};
 
 				// THREE.ShaderMaterial
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 					uniforms: particleUniforms,
 					vertexShader: document.getElementById( 'particleVertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'particleFragmentShader' ).textContent
@@ -416,7 +416,7 @@
 
 				material.extensions.drawBuffers = true;
 
-				var particles = new THREE.Points( geometry, material );
+				const particles = new THREE.Points( geometry, material );
 				particles.matrixAutoUpdate = false;
 				particles.updateMatrix();
 
@@ -426,21 +426,21 @@
 
 			function fillTextures( texturePosition, textureVelocity ) {
 
-				var posArray = texturePosition.image.data;
-				var velArray = textureVelocity.image.data;
+				const posArray = texturePosition.image.data;
+				const velArray = textureVelocity.image.data;
 
-				var radius = effectController.radius;
-				var height = effectController.height;
-				var exponent = effectController.exponent;
-				var maxMass = effectController.maxMass * 1024 / PARTICLES;
-				var maxVel = effectController.velocity;
-				var velExponent = effectController.velocityExponent;
-				var randVel = effectController.randVelocity;
+				const radius = effectController.radius;
+				const height = effectController.height;
+				const exponent = effectController.exponent;
+				const maxMass = effectController.maxMass * 1024 / PARTICLES;
+				const maxVel = effectController.velocity;
+				const velExponent = effectController.velocityExponent;
+				const randVel = effectController.randVelocity;
 
-				for ( var k = 0, kl = posArray.length; k < kl; k += 4 ) {
+				for ( let k = 0, kl = posArray.length; k < kl; k += 4 ) {
 
 					// Position
-					var x, y, z, rr;
+					let x, z, rr;
 
 					do {
 
@@ -452,20 +452,20 @@
 
 					rr = Math.sqrt( rr );
 
-					var rExp = radius * Math.pow( rr, exponent );
+					const rExp = radius * Math.pow( rr, exponent );
 
 					// Velocity
-					var vel = maxVel * Math.pow( rr, velExponent );
+					const vel = maxVel * Math.pow( rr, velExponent );
 
-					var vx = vel * z + ( Math.random() * 2 - 1 ) * randVel;
-					var vy = ( Math.random() * 2 - 1 ) * randVel * 0.05;
-					var vz = - vel * x + ( Math.random() * 2 - 1 ) * randVel;
+					const vx = vel * z + ( Math.random() * 2 - 1 ) * randVel;
+					const vy = ( Math.random() * 2 - 1 ) * randVel * 0.05;
+					const vz = - vel * x + ( Math.random() * 2 - 1 ) * randVel;
 
 					x *= rExp;
 					z *= rExp;
-					y = ( Math.random() * 2 - 1 ) * height;
+					const y = ( Math.random() * 2 - 1 ) * height;
 
-					var mass = Math.random() * maxMass + 1;
+					const mass = Math.random() * maxMass + 1;
 
 					// Fill in texture values
 					posArray[ k + 0 ] = x;
@@ -503,14 +503,14 @@
 
 			function initGUI() {
 
-				var gui = new GUI( { width: 300 } );
+				const gui = new GUI( { width: 300 } );
 
-				var folder1 = gui.addFolder( 'Dynamic parameters' );
+				const folder1 = gui.addFolder( 'Dynamic parameters' );
 
 				folder1.add( effectController, "gravityConstant", 0.0, 1000.0, 0.05 ).onChange( dynamicValuesChanger );
 				folder1.add( effectController, "density", 0.0, 10.0, 0.001 ).onChange( dynamicValuesChanger );
 
-				var folder2 = gui.addFolder( 'Static parameters' );
+				const folder2 = gui.addFolder( 'Static parameters' );
 
 				folder2.add( effectController, "radius", 10.0, 1000.0, 1.0 );
 				folder2.add( effectController, "height", 0.0, 50.0, 0.01 );
@@ -520,7 +520,7 @@
 				folder2.add( effectController, "velocityExponent", 0.0, 1.0, 0.01 );
 				folder2.add( effectController, "randVelocity", 0.0, 50.0, 0.1 );
 
-				var buttonRestart = {
+				const buttonRestart = {
 					restartSimulation: function () {
 
 						restartSimulation();

examples/webgl_gpgpu_water.html

@@ -257,34 +257,34 @@
 			import { SimplexNoise } from './jsm/math/SimplexNoise.js';
 
 			// Texture width for simulation
-			var WIDTH = 128;
+			const WIDTH = 128;
 
 			// Water size in system units
-			var BOUNDS = 512;
-			var BOUNDS_HALF = BOUNDS * 0.5;
-
-			var container, stats;
-			var camera, scene, renderer;
-			var mouseMoved = false;
-			var mouseCoords = new THREE.Vector2();
-			var raycaster = new THREE.Raycaster();
-
-			var waterMesh;
-			var meshRay;
-			var gpuCompute;
-			var heightmapVariable;
-			var waterUniforms;
-			var smoothShader;
-			var readWaterLevelShader;
-			var readWaterLevelRenderTarget;
-			var readWaterLevelImage;
-			var waterNormal = new THREE.Vector3();
-
-			var NUM_SPHERES = 5;
-			var spheres = [];
-			var spheresEnabled = true;
-
-			var simplex = new SimplexNoise();
+			const BOUNDS = 512;
+			const BOUNDS_HALF = BOUNDS * 0.5;
+
+			let container, stats;
+			let camera, scene, renderer;
+			let mouseMoved = false;
+			const mouseCoords = new THREE.Vector2();
+			const raycaster = new THREE.Raycaster();
+
+			let waterMesh;
+			let meshRay;
+			let gpuCompute;
+			let heightmapVariable;
+			let waterUniforms;
+			let smoothShader;
+			let readWaterLevelShader;
+			let readWaterLevelRenderTarget;
+			let readWaterLevelImage;
+			const waterNormal = new THREE.Vector3();
+
+			const NUM_SPHERES = 5;
+			const spheres = [];
+			let spheresEnabled = true;
+
+			const simplex = new SimplexNoise();
 
 			init();
 			animate();
@@ -300,11 +300,11 @@
 
 				scene = new THREE.Scene();
 
-				var sun = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
+				const sun = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
 				sun.position.set( 300, 400, 175 );
 				scene.add( sun );
 
-				var sun2 = new THREE.DirectionalLight( 0x40A040, 0.6 );
+				const sun2 = new THREE.DirectionalLight( 0x40A040, 0.6 );
 				sun2.position.set( - 100, 350, - 200 );
 				scene.add( sun2 );
 
@@ -334,20 +334,20 @@
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
-				var gui = new GUI();
+				const gui = new GUI();
 
-				var effectController = {
+				const effectController = {
 					mouseSize: 20.0,
 					viscosity: 0.98,
 					spheresEnabled: spheresEnabled
 				};
 
-				var valuesChanger = function () {
+				const valuesChanger = function () {
 
 					heightmapVariable.material.uniforms[ "mouseSize" ].value = effectController.mouseSize;
 					heightmapVariable.material.uniforms[ "viscosityConstant" ].value = effectController.viscosity;
 					spheresEnabled = effectController.spheresEnabled;
-					for ( var i = 0; i < NUM_SPHERES; i ++ ) {
+					for ( let i = 0; i < NUM_SPHERES; i ++ ) {
 
 						if ( spheres[ i ] ) {
 
@@ -362,7 +362,7 @@
 				gui.add( effectController, "mouseSize", 1.0, 100.0, 1.0 ).onChange( valuesChanger );
 				gui.add( effectController, "viscosity", 0.9, 0.999, 0.001 ).onChange( valuesChanger );
 				gui.add( effectController, "spheresEnabled", 0, 1, 1 ).onChange( valuesChanger );
-				var buttonSmooth = {
+				const buttonSmooth = {
 					smoothWater: function () {
 
 						smoothWater();
@@ -383,12 +383,12 @@
 
 			function initWater() {
 
-				var materialColor = 0x0040C0;
+				const materialColor = 0x0040C0;
 
-				var geometry = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );
+				const geometry = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );
 
 				// material: make a THREE.ShaderMaterial clone of THREE.MeshPhongMaterial, with customized vertex shader
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 					uniforms: THREE.UniformsUtils.merge( [
 						THREE.ShaderLib[ 'phong' ].uniforms,
 						{
@@ -427,7 +427,7 @@
 				scene.add( waterMesh );
 
 				// THREE.Mesh just for mouse raycasting
-				var geometryRay = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, 1, 1 );
+				const geometryRay = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, 1, 1 );
 				meshRay = new THREE.Mesh( geometryRay, new THREE.MeshBasicMaterial( { color: 0xFFFFFF, visible: false } ) );
 				meshRay.rotation.x = - Math.PI / 2;
 				meshRay.matrixAutoUpdate = false;
@@ -445,7 +445,7 @@
 
 				}
 
-				var heightmap0 = gpuCompute.createTexture();
+				const heightmap0 = gpuCompute.createTexture();
 
 				fillTexture( heightmap0 );
 
@@ -459,7 +459,7 @@
 				heightmapVariable.material.uniforms[ "heightCompensation" ] = { value: 0 };
 				heightmapVariable.material.defines.BOUNDS = BOUNDS.toFixed( 1 );
 
-				var error = gpuCompute.init();
+				const error = gpuCompute.init();
 				if ( error !== null ) {
 
 				    console.error( error );
@@ -500,14 +500,14 @@
 
 			function fillTexture( texture ) {
 
-				var waterMaxHeight = 10;
+				const waterMaxHeight = 10;
 
 				function noise( x, y ) {
 
-					var multR = waterMaxHeight;
-					var mult = 0.025;
-					var r = 0;
-					for ( var i = 0; i < 15; i ++ ) {
+					let multR = waterMaxHeight;
+					let mult = 0.025;
+					let r = 0;
+					for ( let i = 0; i < 15; i ++ ) {
 
 						r += multR * simplex.noise( x * mult, y * mult );
 						multR *= 0.53 + 0.025 * i;
@@ -519,15 +519,15 @@
 
 				}
 
-				var pixels = texture.image.data;
+				const pixels = texture.image.data;
 
-				var p = 0;
-				for ( var j = 0; j < WIDTH; j ++ ) {
+				let p = 0;
+				for ( let j = 0; j < WIDTH; j ++ ) {
 
-					for ( var i = 0; i < WIDTH; i ++ ) {
+					for ( let i = 0; i < WIDTH; i ++ ) {
 
-						var x = i * 128 / WIDTH;
-						var y = j * 128 / WIDTH;
+						const x = i * 128 / WIDTH;
+						const y = j * 128 / WIDTH;
 
 						pixels[ p + 0 ] = noise( x, y );
 						pixels[ p + 1 ] = pixels[ p + 0 ];
@@ -544,10 +544,10 @@
 
 			function smoothWater() {
 
-				var currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
-				var alternateRenderTarget = gpuCompute.getAlternateRenderTarget( heightmapVariable );
+				const currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
+				const alternateRenderTarget = gpuCompute.getAlternateRenderTarget( heightmapVariable );
 
-				for ( var i = 0; i < 10; i ++ ) {
+				for ( let i = 0; i < 10; i ++ ) {
 
 					smoothShader.uniforms[ "smoothTexture" ].value = currentRenderTarget.texture;
 					gpuCompute.doRenderTarget( smoothShader, alternateRenderTarget );
@@ -561,11 +561,11 @@
 
 			function createSpheres() {
 
-				var sphereTemplate = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 24, 12 ), new THREE.MeshPhongMaterial( { color: 0xFFFF00 } ) );
+				const sphereTemplate = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 24, 12 ), new THREE.MeshPhongMaterial( { color: 0xFFFF00 } ) );
 
-				for ( var i = 0; i < NUM_SPHERES; i ++ ) {
+				for ( let i = 0; i < NUM_SPHERES; i ++ ) {
 
-					var sphere = sphereTemplate;
+					let sphere = sphereTemplate;
 					if ( i < NUM_SPHERES - 1 ) {
 
 						sphere = sphereTemplate.clone();
@@ -587,29 +587,29 @@
 
 			function sphereDynamics() {
 
-				var currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
+				const currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
 
 				readWaterLevelShader.uniforms[ "levelTexture" ].value = currentRenderTarget.texture;
 
-				for ( var i = 0; i < NUM_SPHERES; i ++ ) {
+				for ( let i = 0; i < NUM_SPHERES; i ++ ) {
 
-					var sphere = spheres[ i ];
+					const sphere = spheres[ i ];
 
 					if ( sphere ) {
 
 						// Read water level and orientation
-						var u = 0.5 * sphere.position.x / BOUNDS_HALF + 0.5;
-						var v = 1 - ( 0.5 * sphere.position.z / BOUNDS_HALF + 0.5 );
+						const u = 0.5 * sphere.position.x / BOUNDS_HALF + 0.5;
+						const v = 1 - ( 0.5 * sphere.position.z / BOUNDS_HALF + 0.5 );
 						readWaterLevelShader.uniforms[ "point1" ].value.set( u, v );
 						gpuCompute.doRenderTarget( readWaterLevelShader, readWaterLevelRenderTarget );
 
 						renderer.readRenderTargetPixels( readWaterLevelRenderTarget, 0, 0, 4, 1, readWaterLevelImage );
-						var pixels = new Float32Array( readWaterLevelImage.buffer );
+						const pixels = new Float32Array( readWaterLevelImage.buffer );
 
 						// Get orientation
 						waterNormal.set( pixels[ 1 ], 0, - pixels[ 2 ] );
 
-						var pos = sphere.position;
+						const pos = sphere.position;
 
 						// Set height
 						pos.y = pixels[ 0 ];
@@ -686,21 +686,21 @@
 			function render() {
 
 				// Set uniforms: mouse interaction
-				var uniforms = heightmapVariable.material.uniforms;
+				const uniforms = heightmapVariable.material.uniforms;
 				if ( mouseMoved ) {
 
 					raycaster.setFromCamera( mouseCoords, camera );
 
-					var intersects = raycaster.intersectObject( meshRay );
+					const intersects = raycaster.intersectObject( meshRay );
 
 					if ( intersects.length > 0 ) {
 
-					    var point = intersects[ 0 ].point;
-					    uniforms[ "mousePos" ].value.set( point.x, point.z );
+						const point = intersects[ 0 ].point;
+						uniforms[ "mousePos" ].value.set( point.x, point.z );
 
 					} else {
 
-					    uniforms[ "mousePos" ].value.set( 10000, 10000 );
+						uniforms[ "mousePos" ].value.set( 10000, 10000 );
 
 					}
 

examples/webgl_helpers.html

@@ -22,10 +22,10 @@
 
 			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
-			var scene, renderer;
-			var camera, light;
-			var vnh;
-			var vth;
+			let scene, renderer;
+			let camera, light;
+			let vnh;
+			let vth;
 
 			init();
 			animate();
@@ -50,24 +50,24 @@
 
 				scene.add( new THREE.PointLightHelper( light, 15 ) );
 
-				var gridHelper = new THREE.GridHelper( 400, 40, 0x0000ff, 0x808080 );
+				const gridHelper = new THREE.GridHelper( 400, 40, 0x0000ff, 0x808080 );
 				gridHelper.position.y = - 150;
 				gridHelper.position.x = - 150;
 				scene.add( gridHelper );
 
-				var polarGridHelper = new THREE.PolarGridHelper( 200, 16, 8, 64, 0x0000ff, 0x808080 );
+				const polarGridHelper = new THREE.PolarGridHelper( 200, 16, 8, 64, 0x0000ff, 0x808080 );
 				polarGridHelper.position.y = - 150;
 				polarGridHelper.position.x = 200;
 				scene.add( polarGridHelper );
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
-					var mesh = gltf.scene.children[ 0 ];
+					const mesh = gltf.scene.children[ 0 ];
 
 					BufferGeometryUtils.computeTangents( mesh.geometry ); // generates bad data due to degenerate UVs
 
-					var group = new THREE.Group();
+					const group = new THREE.Group();
 					group.scale.multiplyScalar( 50 );
 					scene.add( group );
 
@@ -84,8 +84,8 @@
 
 					scene.add( new THREE.BoxHelper( mesh ) );
 
-					var wireframe = new THREE.WireframeGeometry( mesh.geometry );
-					var line = new THREE.LineSegments( wireframe );
+					const wireframe = new THREE.WireframeGeometry( mesh.geometry );
+					let line = new THREE.LineSegments( wireframe );
 					line.material.depthTest = false;
 					line.material.opacity = 0.25;
 					line.material.transparent = true;
@@ -93,8 +93,8 @@
 					group.add( line );
 					scene.add( new THREE.BoxHelper( line ) );
 
-					var edges = new THREE.EdgesGeometry( mesh.geometry );
-					var line = new THREE.LineSegments( edges );
+					const edges = new THREE.EdgesGeometry( mesh.geometry );
+					line = new THREE.LineSegments( edges );
 					line.material.depthTest = false;
 					line.material.opacity = 0.25;
 					line.material.transparent = true;
@@ -127,7 +127,7 @@
 
 				requestAnimationFrame( animate );
 
-				var time = - performance.now() * 0.0003;
+				const time = - performance.now() * 0.0003;
 
 				camera.position.x = 400 * Math.cos( time );
 				camera.position.z = 400 * Math.sin( time );