Merge pull request #20505 from Mugen87/dev51

Examples: More clean up.

examples/webgl_instancing_dynamic.html

@@ -15,12 +15,12 @@
 			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;
-			var amount = parseInt( window.location.search.substr( 1 ) ) || 10;
-			var count = Math.pow( amount, 3 );
-			var dummy = new THREE.Object3D();
+			let mesh;
+			const amount = parseInt( window.location.search.substr( 1 ) ) || 10;
+			const count = Math.pow( amount, 3 );
+			const dummy = new THREE.Object3D();
 
 			init();
 			animate();
@@ -33,15 +33,15 @@
 
 				scene = new THREE.Scene();
 
-				var loader = new THREE.BufferGeometryLoader();
+				const loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 					geometry.scale( 0.5, 0.5, 0.5 );
 
-					var material = new THREE.MeshNormalMaterial();
+					const material = new THREE.MeshNormalMaterial();
 					// check overdraw
-					// var material = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.1, transparent: true } );
+					// let material = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.1, transparent: true } );
 
 					mesh = new THREE.InstancedMesh( geometry, material, count );
 					mesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage ); // will be updated every frame
@@ -49,7 +49,7 @@
 
 					//
 
-					var gui = new GUI();
+					const gui = new GUI();
 					gui.add( mesh, 'count', 0, count );
 
 				} );
@@ -97,19 +97,19 @@
 
 				if ( mesh ) {
 
-					var time = Date.now() * 0.001;
+					const time = Date.now() * 0.001;
 
 					mesh.rotation.x = Math.sin( time / 4 );
 					mesh.rotation.y = Math.sin( time / 2 );
 
-					var i = 0;
-					var offset = ( amount - 1 ) / 2;
+					let i = 0;
+					const offset = ( amount - 1 ) / 2;
 
-					for ( var x = 0; x < amount; x ++ ) {
+					for ( let x = 0; x < amount; x ++ ) {
 
-						for ( var y = 0; y < amount; y ++ ) {
+						for ( let y = 0; y < amount; y ++ ) {
 
-							for ( var z = 0; z < amount; z ++ ) {
+							for ( let z = 0; z < amount; z ++ ) {
 
 								dummy.position.set( offset - x, offset - y, offset - z );
 								dummy.rotation.y = ( Math.sin( x / 4 + time ) + Math.sin( y / 4 + time ) + Math.sin( z / 4 + time ) );

examples/webgl_instancing_modified.html

@@ -18,14 +18,14 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var camera, scene, renderer, stats;
+			let camera, scene, renderer, stats;
 
-			var mesh;
+			let mesh;
 
-			var dummy = new THREE.Object3D();
+			const dummy = new THREE.Object3D();
 
-			var amount = 8;
-			var count = Math.pow( amount, 3 );
+			const amount = 8;
+			const count = Math.pow( amount, 3 );
 
 			init();
 			animate();
@@ -46,9 +46,9 @@
 
 				new THREE.BufferGeometryLoader().load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
 
-					var instanceColors = [];
+					const instanceColors = [];
 
-					for ( var i = 0; i < count; i ++ ) {
+					for ( let i = 0; i < count; i ++ ) {
 
 						instanceColors.push( Math.random() );
 						instanceColors.push( Math.random() );
@@ -70,25 +70,25 @@
 
 						texture.encoding = THREE.sRGBEncoding;
 
-						var material = new THREE.MeshMatcapMaterial( { color: 0xaaaaff, matcap: texture } );
+						const material = new THREE.MeshMatcapMaterial( { color: 0xaaaaff, matcap: texture } );
 
-						var colorParsChunk = [
+						const colorParsChunk = [
 							'attribute vec3 instanceColor;',
 							'varying vec3 vInstanceColor;',
 							'#include <common>'
 						].join( '\n' );
 
-						var instanceColorChunk = [
+						const instanceColorChunk = [
 							'#include <begin_vertex>',
 							'\tvInstanceColor = instanceColor;'
 						].join( '\n' );
 
-						var fragmentParsChunk = [
+						const fragmentParsChunk = [
 							'varying vec3 vInstanceColor;',
 							'#include <common>'
 						].join( '\n' );
 
-						var colorChunk = [
+						const colorChunk = [
 							'vec4 diffuseColor = vec4( diffuse * vInstanceColor, opacity );'
 						].join( '\n' );
 
@@ -154,19 +154,19 @@
 
 				if ( mesh ) {
 
-					var time = Date.now() * 0.001;
+					const time = Date.now() * 0.001;
 
 					mesh.rotation.x = Math.sin( time / 4 );
 					mesh.rotation.y = Math.sin( time / 2 );
 
-					var i = 0;
-					var offset = ( amount - 1 ) / 2;
+					let i = 0;
+					const offset = ( amount - 1 ) / 2;
 
-					for ( var x = 0; x < amount; x ++ ) {
+					for ( let x = 0; x < amount; x ++ ) {
 
-						for ( var y = 0; y < amount; y ++ ) {
+						for ( let y = 0; y < amount; y ++ ) {
 
-							for ( var z = 0; z < amount; z ++ ) {
+							for ( let z = 0; z < amount; z ++ ) {
 
 								dummy.position.set( offset - x, offset - y, offset - z );
 								dummy.rotation.y = ( Math.sin( x / 4 + time ) + Math.sin( y / 4 + time ) + Math.sin( z / 4 + time ) );

examples/webgl_instancing_performance.html

@@ -34,18 +34,18 @@
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 		import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
-		var container, stats, gui, guiStatsEl;
-		var camera, controls, scene, renderer, material;
+		let container, stats, gui, guiStatsEl;
+		let camera, controls, scene, renderer, material;
 
 		// gui
 
-		var Method = {
+		const Method = {
 			INSTANCED: 'INSTANCED',
 			MERGED: 'MERGED',
 			NAIVE: 'NAIVE'
 		};
 
-		var api = {
+		const api = {
 			method: Method.INSTANCED,
 			count: 1000
 		};
@@ -60,7 +60,7 @@
 
 		function clean() {
 
-			var meshes = [];
+			const meshes = [];
 
 			scene.traverse( function ( object ) {
 
@@ -68,9 +68,9 @@
 
 			} );
 
-			for ( var i = 0; i < meshes.length; i ++ ) {
+			for ( let i = 0; i < meshes.length; i ++ ) {
 
-				var mesh = meshes[ i ];
+				const mesh = meshes[ i ];
 				mesh.material.dispose();
 				mesh.geometry.dispose();
 
@@ -80,12 +80,12 @@
 
 		}
 
-		var randomizeMatrix = function () {
+		const randomizeMatrix = function () {
 
-			var position = new THREE.Vector3();
-			var rotation = new THREE.Euler();
-			var quaternion = new THREE.Quaternion();
-			var scale = new THREE.Vector3();
+			const position = new THREE.Vector3();
+			const rotation = new THREE.Euler();
+			const quaternion = new THREE.Quaternion();
+			const scale = new THREE.Vector3();
 
 			return function ( matrix ) {
 
@@ -120,7 +120,7 @@
 
 					geometry.computeVertexNormals();
 
-					console.time( api.method + ' (build)'  );
+					console.time( api.method + ' (build)' );
 
 					switch ( api.method ) {
 
@@ -140,16 +140,16 @@
 
 					console.timeEnd( api.method + ' (build)' );
 
-			} );
+				} );
 
 		}
 
 		function makeInstanced( geometry ) {
 
-			var matrix = new THREE.Matrix4();
-			var mesh = new THREE.InstancedMesh( geometry, material, api.count );
+			const matrix = new THREE.Matrix4();
+			const mesh = new THREE.InstancedMesh( geometry, material, api.count );
 
-			for ( var i = 0; i < api.count; i ++ ) {
+			for ( let i = 0; i < api.count; i ++ ) {
 
 				randomizeMatrix( matrix );
 				mesh.setMatrixAt( i, matrix );
@@ -160,7 +160,7 @@
 
 			//
 
-			var geometryByteLength = getGeometryByteLength( geometry );
+			const geometryByteLength = getGeometryByteLength( geometry );
 
 			guiStatsEl.innerHTML = [
 
@@ -173,22 +173,21 @@
 
 		function makeMerged( geometry ) {
 
-			var instanceGeometry;
-			var geometries = [];
-			var matrix = new THREE.Matrix4();
+			const geometries = [];
+			const matrix = new THREE.Matrix4();
 
-			for ( var i = 0; i < api.count; i ++ ) {
+			for ( let i = 0; i < api.count; i ++ ) {
 
 				randomizeMatrix( matrix );
 
-				var instanceGeometry = geometry.clone();
+				const instanceGeometry = geometry.clone();
 				instanceGeometry.applyMatrix4( matrix );
 
 				geometries.push( instanceGeometry );
 
 			}
 
-			var mergedGeometry = BufferGeometryUtils.mergeBufferGeometries( geometries );
+			const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries( geometries );
 
 			scene.add( new THREE.Mesh( mergedGeometry, material ) );
 
@@ -205,13 +204,13 @@
 
 		function makeNaive( geometry ) {
 
-			var matrix = new THREE.Matrix4();
+			const matrix = new THREE.Matrix4();
 
-			for ( var i = 0; i < api.count; i ++ ) {
+			for ( let i = 0; i < api.count; i ++ ) {
 
 				randomizeMatrix( matrix );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				mesh.applyMatrix4( matrix );
 
 				scene.add( mesh );
@@ -220,7 +219,7 @@
 
 			//
 
-			var geometryByteLength = getGeometryByteLength( geometry );
+			const geometryByteLength = getGeometryByteLength( geometry );
 
 			guiStatsEl.innerHTML = [
 
@@ -233,8 +232,8 @@
 
 		function init() {
 
-			var width = window.innerWidth;
-			var height = window.innerHeight;
+			const width = window.innerWidth;
+			const height = window.innerHeight;
 
 			// camera
 
@@ -272,7 +271,7 @@
 			gui.add( api, 'method', Method ).onChange( initMesh );
 			gui.add( api, 'count', 1, 10000 ).step( 1 ).onChange( initMesh );
 
-			var perfFolder = gui.addFolder( 'Performance' );
+			const perfFolder = gui.addFolder( 'Performance' );
 
 			guiStatsEl = document.createElement( 'li' );
 			guiStatsEl.classList.add( 'gui-stats' );
@@ -284,7 +283,7 @@
 
 			window.addEventListener( 'resize', onWindowResize, false );
 
-			Object.assign(window, {scene});
+			Object.assign( window, { scene } );
 
 		}
 
@@ -292,8 +291,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();
@@ -323,11 +322,11 @@
 
 		function getGeometryByteLength( geometry ) {
 
-			var total = 0;
+			let total = 0;
 
 			if ( geometry.index ) total += geometry.index.array.byteLength;
 
-			for ( var name in geometry.attributes ) {
+			for ( const name in geometry.attributes ) {
 
 				total += geometry.attributes[ name ].array.byteLength;
 
@@ -342,11 +341,11 @@
 
 			if ( bytes === 0 ) return '0 bytes';
 
-			var k = 1024;
-			var dm = decimals < 0 ? 0 : decimals;
-			var sizes = [ 'bytes', 'KB', 'MB' ];
+			const k = 1024;
+			const dm = decimals < 0 ? 0 : decimals;
+			const sizes = [ 'bytes', 'KB', 'MB' ];
 
-			var i = Math.floor( Math.log( bytes ) / Math.log( k ) );
+			const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
 
 			return parseFloat( ( bytes / Math.pow( k, i ) ).toFixed( dm ) ) + ' ' + sizes[ i ];
 

examples/webgl_instancing_raycast.html

@@ -15,16 +15,16 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from "./jsm/controls/OrbitControls.js";
 
-			var camera, scene, renderer, stats;
+			let camera, scene, renderer, stats;
 
-			var mesh;
-			var amount = parseInt( window.location.search.substr( 1 ) ) || 10;
-			var count = Math.pow( amount, 3 );
+			let mesh;
+			const amount = parseInt( window.location.search.substr( 1 ) ) || 10;
+			const count = Math.pow( amount, 3 );
 
-			var raycaster = new THREE.Raycaster();
-			var mouse = new THREE.Vector2( 1, 1 );
+			const raycaster = new THREE.Raycaster();
+			const mouse = new THREE.Vector2( 1, 1 );
 
-			var color = new THREE.Color();
+			const color = new THREE.Color();
 
 			init();
 			animate();
@@ -37,29 +37,29 @@
 
 				scene = new THREE.Scene();
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x000088 );
-				light.position.set( - 1, 1.5, 1 );
-				scene.add( light );
+				const light1 = new THREE.HemisphereLight( 0xffffff, 0x000088 );
+				light1.position.set( - 1, 1.5, 1 );
+				scene.add( light1 );
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x880000, 0.5 );
-				light.position.set( - 1, - 1.5, - 1 );
-				scene.add( light );
+				const light2 = new THREE.HemisphereLight( 0xffffff, 0x880000, 0.5 );
+				light2.position.set( - 1, - 1.5, - 1 );
+				scene.add( light2 );
 
-				var geometry = new THREE.IcosahedronGeometry( 0.5, 3 );
-				var material = new THREE.MeshPhongMaterial();
+				const geometry = new THREE.IcosahedronGeometry( 0.5, 3 );
+				const material = new THREE.MeshPhongMaterial();
 
 				mesh = new THREE.InstancedMesh( geometry, material, count );
 
-				var i = 0;
-				var offset = ( amount - 1 ) / 2;
+				let i = 0;
+				const offset = ( amount - 1 ) / 2;
 
-				var matrix = new THREE.Matrix4();
+				const matrix = new THREE.Matrix4();
 
-				for ( var x = 0; x < amount; x ++ ) {
+				for ( let x = 0; x < amount; x ++ ) {
 
-					for ( var y = 0; y < amount; y ++ ) {
+					for ( let y = 0; y < amount; y ++ ) {
 
-						for ( var z = 0; z < amount; z ++ ) {
+						for ( let z = 0; z < amount; z ++ ) {
 
 							matrix.setPosition( offset - x, offset - y, offset - z );
 
@@ -78,7 +78,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( mesh, 'count', 0, count );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -126,11 +126,11 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersection = raycaster.intersectObject( mesh );
+				const intersection = raycaster.intersectObject( mesh );
 
 				if ( intersection.length > 0 ) {
 
-					var instanceId = intersection[ 0 ].instanceId;
+					const instanceId = intersection[ 0 ].instanceId;
 
 					mesh.setColorAt( instanceId, color.setHex( Math.random() * 0xffffff ) );
 					mesh.instanceColor.needsUpdate = true;

examples/webgl_instancing_scatter.html

@@ -17,9 +17,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 api = {
+			const api = {
 
 				count: 2000,
 				distribution: 'random',
@@ -29,27 +29,27 @@
 
 			};
 
-			var stemMesh, blossomMesh;
-			var stemGeometry, blossomGeometry;
-			var stemMaterial, blossomMaterial;
+			let stemMesh, blossomMesh;
+			let stemGeometry, blossomGeometry;
+			let stemMaterial, blossomMaterial;
 
-			var sampler;
-			var count = api.count;
-			var ages = new Float32Array( count );
-			var scales = new Float32Array( count );
-			var dummy = new THREE.Object3D();
+			let sampler;
+			const count = api.count;
+			const ages = new Float32Array( count );
+			const scales = new Float32Array( count );
+			const dummy = new THREE.Object3D();
 
-			var _position = new THREE.Vector3();
-			var _normal = new THREE.Vector3();
-			var _scale = new THREE.Vector3();
+			const _position = new THREE.Vector3();
+			const _normal = new THREE.Vector3();
+			const _scale = new THREE.Vector3();
 
-			// var surfaceGeometry = new THREE.BoxBufferGeometry( 10, 10, 10 ).toNonIndexed();
-			var surfaceGeometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 ).toNonIndexed();
-			var surfaceMaterial = new THREE.MeshLambertMaterial( { color: api.surfaceColor, wireframe: false } );
-			var surface = new THREE.Mesh( surfaceGeometry, surfaceMaterial );
+			// let surfaceGeometry = new THREE.BoxBufferGeometry( 10, 10, 10 ).toNonIndexed();
+			const surfaceGeometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 ).toNonIndexed();
+			const surfaceMaterial = new THREE.MeshLambertMaterial( { color: api.surfaceColor, wireframe: false } );
+			const surface = new THREE.Mesh( surfaceGeometry, surfaceMaterial );
 
 			// Source: https://gist.github.com/gre/1650294
-			var easeOutCubic = function ( t ) {
+			const easeOutCubic = function ( t ) {
 
 				return ( -- t ) * t * t + 1;
 
@@ -57,18 +57,18 @@
 
 			// Scaling curve causes particles to grow quickly, ease gradually into full scale, then
 			// disappear quickly. More of the particle's lifetime is spent around full scale.
-			var scaleCurve = function ( t ) {
+			const scaleCurve = function ( t ) {
 
 				return Math.abs( easeOutCubic( ( t > 0.5 ? 1 - t : t ) * 2 ) );
 
 			};
 
-			var loader = new GLTFLoader();
+			const loader = new GLTFLoader();
 
 			loader.load( './models/gltf/Flower/Flower.glb', function ( gltf ) {
 
-				var _stemMesh = gltf.scene.getObjectByName( 'Stem' );
-				var _blossomMesh = gltf.scene.getObjectByName( 'Blossom' );
+				const _stemMesh = gltf.scene.getObjectByName( 'Stem' );
+				const _blossomMesh = gltf.scene.getObjectByName( 'Blossom' );
 
 				stemGeometry = new THREE.InstancedBufferGeometry();
 				blossomGeometry = new THREE.InstancedBufferGeometry();
@@ -76,7 +76,7 @@
 				THREE.BufferGeometry.prototype.copy.call( stemGeometry, _stemMesh.geometry );
 				THREE.BufferGeometry.prototype.copy.call( blossomGeometry, _blossomMesh.geometry );
 
-				var defaultTransform = new THREE.Matrix4()
+				const defaultTransform = new THREE.Matrix4()
 					.makeRotationX( Math.PI )
 					.multiply( new THREE.Matrix4().makeScale( 7, 7, 7 ) );
 
@@ -87,11 +87,11 @@
 				blossomMaterial = _blossomMesh.material;
 
 				// Assign random colors to the blossoms.
-				var _color = new THREE.Color();
-				var color = new Float32Array( count * 3 );
-				var blossomPalette = [ 0xF20587, 0xF2D479, 0xF2C879, 0xF2B077, 0xF24405 ];
+				const _color = new THREE.Color();
+				const color = new Float32Array( count * 3 );
+				const blossomPalette = [ 0xF20587, 0xF2D479, 0xF2C879, 0xF2B077, 0xF24405 ];
 
-				for ( var i = 0; i < count; i ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
 					_color.setHex( blossomPalette[ Math.floor( Math.random() * blossomPalette.length ) ] );
 					_color.toArray( color, i * 3 );
@@ -126,7 +126,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( api.backgroundColor );
 
-				var pointLight = new THREE.PointLight( 0xAA8899, 0.75 );
+				const pointLight = new THREE.PointLight( 0xAA8899, 0.75 );
 				pointLight.position.set( 50, - 25, 75 );
 				scene.add( pointLight );
 
@@ -141,7 +141,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( api, 'count', 0, count ).onChange( function () {
 
 					stemMesh.count = api.count;
@@ -184,7 +184,7 @@
 
 			function resample() {
 
-				var vertexCount = surface.geometry.getAttribute( 'position' ).count;
+				const vertexCount = surface.geometry.getAttribute( 'position' ).count;
 
 				console.info( 'Sampling ' + count + ' points from a surface with ' + vertexCount + ' vertices...' );
 
@@ -202,7 +202,7 @@
 
 				console.time( '.sample()' );
 
-				for ( var i = 0; i < count; i ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
 					ages[ i ] = Math.random();
 					scales[ i ] = scaleCurve( ages[ i ] );
@@ -252,7 +252,7 @@
 
 				// Update scale.
 
-				var prevScale = scales[ i ];
+				const prevScale = scales[ i ];
 				scales[ i ] = scaleCurve( ages[ i ] );
 				_scale.set( scales[ i ] / prevScale, scales[ i ] / prevScale, scales[ i ] / prevScale );
 
@@ -290,12 +290,12 @@
 
 				if ( stemMesh && blossomMesh ) {
 
-					var time = Date.now() * 0.001;
+					const time = Date.now() * 0.001;
 
 					scene.rotation.x = Math.sin( time / 4 );
 					scene.rotation.y = Math.sin( time / 2 );
 
-					for ( var i = 0; i < api.count; i ++ ) {
+					for ( let i = 0; i < api.count; i ++ ) {
 
 						updateParticle( i );
 

examples/webgl_interactive_buffergeometry.html

@@ -17,13 +17,13 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var raycaster, mouse;
+			let raycaster, mouse;
 
-			var mesh, line;
+			let mesh, line;
 
 			init();
 			animate();
@@ -45,55 +45,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 = 5000;
+				const triangles = 5000;
 
-				var geometry = new THREE.BufferGeometry();
+				let geometry = new THREE.BufferGeometry();
 
-				var positions = new Float32Array( triangles * 3 * 3 );
-				var normals = new Float32Array( triangles * 3 * 3 );
-				var colors = new Float32Array( triangles * 3 * 3 );
+				const positions = new Float32Array( triangles * 3 * 3 );
+				const normals = new Float32Array( triangles * 3 * 3 );
+				const colors = new Float32Array( triangles * 3 * 3 );
 
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				var n = 800, n2 = n / 2;	// triangles spread in the cube
-				var d = 120, d2 = d / 2;	// individual triangle size
+				const n = 800, n2 = n / 2;	// triangles spread in the cube
+				const d = 120, 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 < positions.length; i += 9 ) {
+				for ( let i = 0; i < positions.length; i += 9 ) {
 
 					// 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[ i ] = ax;
 					positions[ i + 1 ] = ay;
@@ -119,9 +119,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[ i ] = nx;
 					normals[ i + 1 ] = ny;
@@ -137,9 +137,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 );
 
@@ -163,7 +163,7 @@
 
 				geometry.computeBoundingSphere();
 
-				var material = new THREE.MeshPhongMaterial( {
+				let material = new THREE.MeshPhongMaterial( {
 					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
 					side: THREE.DoubleSide, vertexColors: true
 				} );
@@ -177,10 +177,10 @@
 
 				mouse = new THREE.Vector2();
 
-				var geometry = new THREE.BufferGeometry();
+				geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( 4 * 3 ), 3 ) );
 
-				var material = new THREE.LineBasicMaterial( { color: 0xffffff, transparent: true } );
+				material = new THREE.LineBasicMaterial( { color: 0xffffff, transparent: true } );
 
 				line = new THREE.Line( geometry, material );
 				scene.add( line );
@@ -235,22 +235,22 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.15;
 				mesh.rotation.y = time * 0.25;
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersects = raycaster.intersectObject( mesh );
+				const intersects = raycaster.intersectObject( mesh );
 
 				if ( intersects.length > 0 ) {
 
-					var intersect = intersects[ 0 ];
-					var face = intersect.face;
+					const intersect = intersects[ 0 ];
+					const face = intersect.face;
 
-					var linePosition = line.geometry.attributes.position;
-					var meshPosition = mesh.geometry.attributes.position;
+					const linePosition = line.geometry.attributes.position;
+					const meshPosition = mesh.geometry.attributes.position;
 
 					linePosition.copyAt( 0, meshPosition, face.a );
 					linePosition.copyAt( 1, meshPosition, face.b );

examples/webgl_interactive_cubes.html

@@ -27,11 +27,14 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
-			var camera, scene, raycaster, renderer;
+			let container, stats;
+			let camera, scene, raycaster, renderer;
 
-			var mouse = new THREE.Vector2(), INTERSECTED;
-			var radius = 100, theta = 0;
+			let INTERSECTED;
+			let theta = 0;
+
+			const mouse = new THREE.Vector2();
+			const radius = 100;
 
 			init();
 			animate();
@@ -46,15 +49,15 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 				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 < 2000; i ++ ) {
+				for ( let i = 0; i < 2000; 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;
@@ -134,7 +137,7 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersects = raycaster.intersectObjects( scene.children );
+				const intersects = raycaster.intersectObjects( scene.children );
 
 				if ( intersects.length > 0 ) {
 

examples/webgl_interactive_cubes_gpu.html

@@ -32,13 +32,15 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
-			var container, stats;
-			var camera, controls, scene, renderer;
-			var pickingData = [], pickingTexture, pickingScene;
-			var highlightBox;
+			let container, stats;
+			let camera, controls, scene, renderer;
+			let pickingTexture, pickingScene;
+			let highlightBox;
 
-			var mouse = new THREE.Vector2();
-			var offset = new THREE.Vector3( 10, 10, 10 );
+			const pickingData = [];
+
+			const mouse = new THREE.Vector2();
+			const offset = new THREE.Vector3( 10, 10, 10 );
 
 			init();
 			animate();
@@ -58,19 +60,19 @@
 
 				scene.add( new THREE.AmbientLight( 0x555555 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				const light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				scene.add( light );
 
-				var pickingMaterial = new THREE.MeshBasicMaterial( { vertexColors: true } );
-				var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true, shininess: 0	} );
+				const pickingMaterial = new THREE.MeshBasicMaterial( { vertexColors: true } );
+				const defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true, shininess: 0	} );
 
 				function applyVertexColors( geometry, color ) {
 
-					var position = geometry.attributes.position;
-					var colors = [];
+					const position = geometry.attributes.position;
+					const colors = [];
 
-					for ( var i = 0; i < position.count; i ++ ) {
+					for ( let i = 0; i < position.count; i ++ ) {
 
 						colors.push( color.r, color.g, color.b );
 
@@ -80,28 +82,28 @@
 
 				}
 
-				var geometriesDrawn = [];
-				var geometriesPicking = [];
+				const geometriesDrawn = [];
+				const geometriesPicking = [];
 
-				var matrix = new THREE.Matrix4();
-				var quaternion = new THREE.Quaternion();
-				var color = new THREE.Color();
+				const matrix = new THREE.Matrix4();
+				const quaternion = new THREE.Quaternion();
+				const color = new THREE.Color();
 
-				for ( var i = 0; i < 5000; i ++ ) {
+				for ( let i = 0; i < 5000; i ++ ) {
 
-					var geometry = new THREE.BoxBufferGeometry();
+					let geometry = new THREE.BoxBufferGeometry();
 
-					var position = new THREE.Vector3();
+					const position = new THREE.Vector3();
 					position.x = Math.random() * 10000 - 5000;
 					position.y = Math.random() * 6000 - 3000;
 					position.z = Math.random() * 8000 - 4000;
 
-					var rotation = new THREE.Euler();
+					const rotation = new THREE.Euler();
 					rotation.x = Math.random() * 2 * Math.PI;
 					rotation.y = Math.random() * 2 * Math.PI;
 					rotation.z = Math.random() * 2 * Math.PI;
 
-					var scale = new THREE.Vector3();
+					const scale = new THREE.Vector3();
 					scale.x = Math.random() * 200 + 100;
 					scale.y = Math.random() * 200 + 100;
 					scale.z = Math.random() * 200 + 100;
@@ -135,7 +137,7 @@
 
 				}
 
-				var objects = new THREE.Mesh( BufferGeometryUtils.mergeBufferGeometries( geometriesDrawn ), defaultMaterial );
+				const objects = new THREE.Mesh( BufferGeometryUtils.mergeBufferGeometries( geometriesDrawn ), defaultMaterial );
 				scene.add( objects );
 
 				pickingScene.add( new THREE.Mesh( BufferGeometryUtils.mergeBufferGeometries( geometriesPicking ), pickingMaterial ) );
@@ -204,7 +206,7 @@
 
 				//create buffer for reading single pixel
 
-				var pixelBuffer = new Uint8Array( 4 );
+				const pixelBuffer = new Uint8Array( 4 );
 
 				//read the pixel
 
@@ -212,8 +214,8 @@
 
 				//interpret the pixel as an ID
 
-				var id = ( pixelBuffer[ 0 ] << 16 ) | ( pixelBuffer[ 1 ] << 8 ) | ( pixelBuffer[ 2 ] );
-				var data = pickingData[ id ];
+				const id = ( pixelBuffer[ 0 ] << 16 ) | ( pixelBuffer[ 1 ] << 8 ) | ( pixelBuffer[ 2 ] );
+				const data = pickingData[ id ];
 
 				if ( data ) {
 

examples/webgl_interactive_cubes_ortho.html

@@ -27,12 +27,15 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
-			var camera, scene, raycaster, renderer;
+			let container, stats;
+			let camera, scene, raycaster, renderer;
 
-			var mouse = new THREE.Vector2(), INTERSECTED;
-			var radius = 500, theta = 0;
-			var frustumSize = 1000;
+			let theta = 0;
+			let INTERSECTED;
+
+			const mouse = new THREE.Vector2();
+			const radius = 500;
+			const frustumSize = 1000;
 
 			init();
 			animate();
@@ -42,21 +45,21 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 				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 < 2000; i ++ ) {
+				for ( let i = 0; i < 2000; 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;
@@ -94,7 +97,7 @@
 
 			function onWindowResize() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
 				camera.left = - frustumSize * aspect / 2;
 				camera.right = frustumSize * aspect / 2;
@@ -142,7 +145,7 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersects = raycaster.intersectObjects( scene.children );
+				const intersects = raycaster.intersectObjects( scene.children );
 
 				if ( intersects.length > 0 ) {
 

examples/webgl_interactive_lines.html

@@ -23,11 +23,12 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
-			var camera, scene, raycaster, renderer, parentTransform, sphereInter;
+			let container, stats;
+			let camera, scene, raycaster, renderer, parentTransform, sphereInter;
 
-			var mouse = new THREE.Vector2();
-			var radius = 100, theta = 0;
+			const mouse = new THREE.Vector2();
+			const radius = 100;
+			let theta = 0;
 
 			init();
 			animate();
@@ -37,7 +38,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var info = document.createElement( 'div' );
+				const info = document.createElement( 'div' );
 				info.style.position = 'absolute';
 				info.style.top = '10px';
 				info.style.width = '100%';
@@ -50,20 +51,20 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var geometry = new THREE.SphereBufferGeometry( 5 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
+				const geometry = new THREE.SphereBufferGeometry( 5 );
+				const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
 				sphereInter = new THREE.Mesh( geometry, material );
 				sphereInter.visible = false;
 				scene.add( sphereInter );
 
-				var lineGeometry = new THREE.BufferGeometry();
-				var points = [];
+				const lineGeometry = new THREE.BufferGeometry();
+				const points = [];
 
-				var point = new THREE.Vector3();
-				var direction = new THREE.Vector3();
+				const point = new THREE.Vector3();
+				const direction = new THREE.Vector3();
 
-				for ( var i = 0; i < 50; i ++ ) {
+				for ( let i = 0; i < 50; i ++ ) {
 
 					direction.x += Math.random() - 0.5;
 					direction.y += Math.random() - 0.5;
@@ -90,11 +91,11 @@
 				parentTransform.scale.y = Math.random() + 0.5;
 				parentTransform.scale.z = Math.random() + 0.5;
 
-				for ( var i = 0; i < 50; i ++ ) {
+				for ( let i = 0; i < 50; i ++ ) {
 
-					var object;
+					let object;
 
-					var lineMaterial = new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff } );
+					const lineMaterial = new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff } );
 
 					if ( Math.random() > 0.5 ) {
 
@@ -187,7 +188,7 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersects = raycaster.intersectObjects( parentTransform.children, true );
+				const intersects = raycaster.intersectObjects( parentTransform.children, true );
 
 				if ( intersects.length > 0 ) {
 

examples/webgl_interactive_points.html

@@ -57,21 +57,21 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var renderer, scene, camera, stats;
+			let renderer, scene, camera, stats;
 
-			var particles;
+			let particles;
 
-			var PARTICLE_SIZE = 20;
+			const PARTICLE_SIZE = 20;
 
-			var raycaster, intersects;
-			var mouse, INTERSECTED;
+			let raycaster, intersects;
+			let mouse, INTERSECTED;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				scene = new THREE.Scene();
 
@@ -80,16 +80,16 @@
 
 				//
 
-				var vertices = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 ).vertices;
+				const vertices = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 ).vertices;
 
-				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();
+				let vertex;
+				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 ];
 					vertex.toArray( positions, i * 3 );
@@ -101,14 +101,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 ) },
@@ -182,8 +182,8 @@
 				particles.rotation.x += 0.0005;
 				particles.rotation.y += 0.001;
 
-				var geometry = particles.geometry;
-				var attributes = geometry.attributes;
+				const geometry = particles.geometry;
+				const attributes = geometry.attributes;
 
 				raycaster.setFromCamera( mouse, camera );
 

examples/webgl_interactive_raycasting_points.html

@@ -17,49 +17,51 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var renderer, scene, camera, stats;
-			var pointclouds;
-			var raycaster;
-			var mouse = new THREE.Vector2();
-			var intersection = null;
-			var spheres = [];
-			var spheresIndex = 0;
-			var clock;
-
-			var threshold = 0.1;
-			var pointSize = 0.05;
-			var width = 80;
-			var length = 160;
-			var rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
+			let renderer, scene, camera, stats;
+			let pointclouds;
+			let raycaster;
+			let intersection = null;
+			let spheresIndex = 0;
+			let clock;
+			let toggle = 0;
+
+			const mouse = new THREE.Vector2();
+			const spheres = [];
+
+			const threshold = 0.1;
+			const pointSize = 0.05;
+			const width = 80;
+			const length = 160;
+			const rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
 
 			init();
 			animate();
 
 			function generatePointCloudGeometry( color, width, length ) {
 
-				var geometry = new THREE.BufferGeometry();
-				var numPoints = width * length;
+				const geometry = new THREE.BufferGeometry();
+				const numPoints = width * length;
 
-				var positions = new Float32Array( numPoints * 3 );
-				var colors = new Float32Array( numPoints * 3 );
+				const positions = new Float32Array( numPoints * 3 );
+				const colors = new Float32Array( numPoints * 3 );
 
-				var k = 0;
+				let k = 0;
 
-				for ( var i = 0; i < width; i ++ ) {
+				for ( let i = 0; i < width; i ++ ) {
 
-					for ( var j = 0; j < length; j ++ ) {
+					for ( let j = 0; j < length; j ++ ) {
 
-						var u = i / width;
-						var v = j / length;
-						var x = u - 0.5;
-						var y = ( Math.cos( u * Math.PI * 4 ) + Math.sin( v * Math.PI * 8 ) ) / 20;
-						var z = v - 0.5;
+						const u = i / width;
+						const v = j / length;
+						const x = u - 0.5;
+						const y = ( Math.cos( u * Math.PI * 4 ) + Math.sin( v * Math.PI * 8 ) ) / 20;
+						const z = v - 0.5;
 
 						positions[ 3 * k ] = x;
 						positions[ 3 * k + 1 ] = y;
 						positions[ 3 * k + 2 ] = z;
 
-						var intensity = ( y + 0.1 ) * 5;
+						const intensity = ( y + 0.1 ) * 5;
 						colors[ 3 * k ] = color.r * intensity;
 						colors[ 3 * k + 1 ] = color.g * intensity;
 						colors[ 3 * k + 2 ] = color.b * intensity;
@@ -80,8 +82,8 @@
 
 			function generatePointcloud( color, width, length ) {
 
-				var geometry = generatePointCloudGeometry( color, width, length );
-				var material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
+				const geometry = generatePointCloudGeometry( color, width, length );
+				const material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
 
 				return new THREE.Points( geometry, material );
 
@@ -89,15 +91,15 @@
 
 			function generateIndexedPointcloud( color, width, length ) {
 
-				var geometry = generatePointCloudGeometry( color, width, length );
-				var numPoints = width * length;
-				var indices = new Uint16Array( numPoints );
+				const geometry = generatePointCloudGeometry( color, width, length );
+				const numPoints = width * length;
+				const indices = new Uint16Array( numPoints );
 
-				var k = 0;
+				let k = 0;
 
-				for ( var i = 0; i < width; i ++ ) {
+				for ( let i = 0; i < width; i ++ ) {
 
-					for ( var j = 0; j < length; j ++ ) {
+					for ( let j = 0; j < length; j ++ ) {
 
 						indices[ k ] = k;
 						k ++;
@@ -108,7 +110,7 @@
 
 				geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
 
-				var material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
+				const material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
 
 				return new THREE.Points( geometry, material );
 
@@ -116,15 +118,15 @@
 
 			function generateIndexedWithOffsetPointcloud( color, width, length ) {
 
-				var geometry = generatePointCloudGeometry( color, width, length );
-				var numPoints = width * length;
-				var indices = new Uint16Array( numPoints );
+				const geometry = generatePointCloudGeometry( color, width, length );
+				const numPoints = width * length;
+				const indices = new Uint16Array( numPoints );
 
-				var k = 0;
+				let k = 0;
 
-				for ( var i = 0; i < width; i ++ ) {
+				for ( let i = 0; i < width; i ++ ) {
 
-					for ( var j = 0; j < length; j ++ ) {
+					for ( let j = 0; j < length; j ++ ) {
 
 						indices[ k ] = k;
 						k ++;
@@ -136,7 +138,7 @@
 				geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
 				geometry.addGroup( 0, indices.length );
 
-				var material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
+				const material = new THREE.PointsMaterial( { size: pointSize, vertexColors: true } );
 
 				return new THREE.Points( geometry, material );
 
@@ -144,7 +146,7 @@
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				scene = new THREE.Scene();
 
@@ -157,17 +159,17 @@
 
 				//
 
-				var pcBuffer = generatePointcloud( new THREE.Color( 1, 0, 0 ), width, length );
+				const pcBuffer = generatePointcloud( new THREE.Color( 1, 0, 0 ), width, length );
 				pcBuffer.scale.set( 5, 10, 10 );
 				pcBuffer.position.set( - 5, 0, 0 );
 				scene.add( pcBuffer );
 
-				var pcIndexed = generateIndexedPointcloud( new THREE.Color( 0, 1, 0 ), width, length );
+				const pcIndexed = generateIndexedPointcloud( new THREE.Color( 0, 1, 0 ), width, length );
 				pcIndexed.scale.set( 5, 10, 10 );
 				pcIndexed.position.set( 0, 0, 0 );
 				scene.add( pcIndexed );
 
-				var pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0, 1, 1 ), width, length );
+				const pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0, 1, 1 ), width, length );
 				pcIndexedOffset.scale.set( 5, 10, 10 );
 				pcIndexedOffset.position.set( 5, 0, 0 );
 				scene.add( pcIndexedOffset );
@@ -176,12 +178,12 @@
 
 				//
 
-				var sphereGeometry = new THREE.SphereBufferGeometry( 0.1, 32, 32 );
-				var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
+				const sphereGeometry = new THREE.SphereBufferGeometry( 0.1, 32, 32 );
+				const sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
-				for ( var i = 0; i < 40; i ++ ) {
+				for ( let i = 0; i < 40; i ++ ) {
 
-					var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+					const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
 					scene.add( sphere );
 					spheres.push( sphere );
 
@@ -238,8 +240,6 @@
 
 			}
 
-			var toggle = 0;
-
 			function render() {
 
 				camera.applyMatrix4( rotateY );
@@ -247,7 +247,7 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersections = raycaster.intersectObjects( pointclouds );
+				const intersections = raycaster.intersectObjects( pointclouds );
 				intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;
 
 				if ( toggle > 0.02 && intersection !== null ) {
@@ -260,9 +260,9 @@
 
 				}
 
-				for ( var i = 0; i < spheres.length; i ++ ) {
+				for ( let i = 0; i < spheres.length; i ++ ) {
 
-					var sphere = spheres[ i ];
+					const sphere = spheres[ i ];
 					sphere.scale.multiplyScalar( 0.98 );
 					sphere.scale.clampScalar( 0.01, 1 );
 

examples/webgl_interactive_voxelpainter.html

@@ -26,14 +26,14 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
-			var plane;
-			var mouse, raycaster, isShiftDown = false;
+			let camera, scene, renderer;
+			let plane;
+			let mouse, raycaster, isShiftDown = false;
 
-			var rollOverMesh, rollOverMaterial;
-			var cubeGeo, cubeMaterial;
+			let rollOverMesh, rollOverMaterial;
+			let cubeGeo, cubeMaterial;
 
-			var objects = [];
+			const objects = [];
 
 			init();
 			render();
@@ -49,7 +49,7 @@
 
 				// roll-over helpers
 
-				var rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
+				const rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
 				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
 				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
 				scene.add( rollOverMesh );
@@ -61,7 +61,7 @@
 
 				// grid
 
-				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				const gridHelper = new THREE.GridHelper( 1000, 20 );
 				scene.add( gridHelper );
 
 				//
@@ -69,7 +69,7 @@
 				raycaster = new THREE.Raycaster();
 				mouse = new THREE.Vector2();
 
-				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
+				const geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
 				geometry.rotateX( - Math.PI / 2 );
 
 				plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
@@ -79,10 +79,10 @@
 
 				// lights
 
-				var ambientLight = new THREE.AmbientLight( 0x606060 );
+				const ambientLight = new THREE.AmbientLight( 0x606060 );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff );
 				directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
 				scene.add( directionalLight );
 
@@ -119,11 +119,11 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersects = raycaster.intersectObjects( objects );
+				const intersects = raycaster.intersectObjects( objects );
 
 				if ( intersects.length > 0 ) {
 
-					var intersect = intersects[ 0 ];
+					const intersect = intersects[ 0 ];
 
 					rollOverMesh.position.copy( intersect.point ).add( intersect.face.normal );
 					rollOverMesh.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
@@ -142,11 +142,11 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersects = raycaster.intersectObjects( objects );
+				const intersects = raycaster.intersectObjects( objects );
 
 				if ( intersects.length > 0 ) {
 
-					var intersect = intersects[ 0 ];
+					const intersect = intersects[ 0 ];
 
 					// delete cube
 
@@ -164,7 +164,7 @@
 
 					} else {
 
-						var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
+						const voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
 						voxel.position.copy( intersect.point ).add( intersect.face.normal );
 						voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
 						scene.add( voxel );

examples/webgl_layers.html

@@ -28,10 +28,11 @@
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var container, stats;
-			var camera, scene, renderer;
+			let container, stats;
+			let camera, scene, renderer;
 
-			var radius = 100, theta = 0;
+			let theta = 0;
+			const radius = 100;
 
 			init();
 			animate();
@@ -49,7 +50,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var light = new THREE.PointLight( 0xffffff, 1 );
+				const light = new THREE.PointLight( 0xffffff, 1 );
 				light.layers.enable( 0 );
 				light.layers.enable( 1 );
 				light.layers.enable( 2 );
@@ -57,15 +58,14 @@
 				scene.add( camera );
 				camera.add( light );
 
-				var colors = [ 0xff0000, 0x00ff00, 0x0000ff ];
-				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
-				var layer;
+				const colors = [ 0xff0000, 0x00ff00, 0x0000ff ];
+				const geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 
-				for ( var i = 0; i < 300; i ++ ) {
+				for ( let i = 0; i < 300; i ++ ) {
 
-					layer = ( i % 3 );
+					const layer = ( i % 3 );
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: colors[ layer ] } ) );
+					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: colors[ layer ] } ) );
 
 					object.position.x = Math.random() * 800 - 400;
 					object.position.y = Math.random() * 800 - 400;
@@ -93,33 +93,33 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var layers = {
+				const layers = {
 
-					'toggle red': function() {
+					'toggle red': function () {
 
 						camera.layers.toggle( 0 );
 
 					},
 
-					'toggle green': function() {
+					'toggle green': function () {
 
 						camera.layers.toggle( 1 );
 
 					},
 
-					'toggle blue': function() {
+					'toggle blue': function () {
 
 						camera.layers.toggle( 2 );
 
 					},
 
-					'enable all': function() {
+					'enable all': function () {
 
 						camera.layers.enableAll();
 
 					},
 
-					'disable all': function() {
+					'disable all': function () {
 
 						camera.layers.disableAll();
 
@@ -129,7 +129,7 @@
 
 				//
 				// Init gui
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( layers, 'toggle red' );
 				gui.add( layers, 'toggle green' );
 				gui.add( layers, 'toggle blue' );

examples/webgl_lensflares.html

@@ -23,12 +23,12 @@
 			import { FlyControls } from './jsm/controls/FlyControls.js';
 			import { Lensflare, LensflareElement } from './jsm/objects/Lensflare.js';
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
-			var controls;
+			let camera, scene, renderer;
+			let controls;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -51,14 +51,14 @@
 
 				// world
 
-				var s = 250;
+				const s = 250;
 
-				var geometry = new THREE.BoxBufferGeometry( s, s, s );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 50 } );
+				const geometry = new THREE.BoxBufferGeometry( s, s, s );
+				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 50 } );
 
-				for ( var i = 0; i < 3000; i ++ ) {
+				for ( let i = 0; i < 3000; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = 8000 * ( 2.0 * Math.random() - 1.0 );
 					mesh.position.y = 8000 * ( 2.0 * Math.random() - 1.0 );
@@ -78,16 +78,16 @@
 
 				// lights
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.05 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.05 );
 				dirLight.position.set( 0, - 1, 0 ).normalize();
 				dirLight.color.setHSL( 0.1, 0.7, 0.5 );
 				scene.add( dirLight );
 
 				// lensflares
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
-				var textureFlare0 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
-				var textureFlare3 = textureLoader.load( 'textures/lensflare/lensflare3.png' );
+				const textureFlare0 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
+				const textureFlare3 = textureLoader.load( 'textures/lensflare/lensflare3.png' );
 
 				addLight( 0.55, 0.9, 0.5, 5000, 0, - 1000 );
 				addLight( 0.08, 0.8, 0.5, 0, 0, - 1000 );
@@ -95,12 +95,12 @@
 
 				function addLight( h, s, l, x, y, z ) {
 
-					var light = new THREE.PointLight( 0xffffff, 1.5, 2000 );
+					const light = new THREE.PointLight( 0xffffff, 1.5, 2000 );
 					light.color.setHSL( h, s, l );
 					light.position.set( x, y, z );
 					scene.add( light );
 
-					var lensflare = new Lensflare();
+					const lensflare = new Lensflare();
 					lensflare.addElement( new LensflareElement( textureFlare0, 700, 0, light.color ) );
 					lensflare.addElement( new LensflareElement( textureFlare3, 60, 0.6 ) );
 					lensflare.addElement( new LensflareElement( textureFlare3, 70, 0.7 ) );
@@ -163,7 +163,7 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				controls.update( delta );
 				renderer.render( scene, camera );

examples/webgl_lightningstrike.html

@@ -25,24 +25,24 @@
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { OutlinePass } from './jsm/postprocessing/OutlinePass.js';
 
-			var container, stats;
+			let container, stats;
 
-			var scene, renderer, composer, gui;
+			let scene, renderer, composer, gui;
 
-			var currentSceneIndex = 0;
+			let currentSceneIndex = 0;
 
-			var currentTime = 0;
+			let currentTime = 0;
 
-			var sceneCreators = [
+			const sceneCreators = [
 				createConesScene,
 				createPlasmaBallScene,
 				createStormScene
 			];
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
-			var raycaster = new THREE.Raycaster();
-			var mouse = new THREE.Vector2();
+			const raycaster = new THREE.Raycaster();
+			const mouse = new THREE.Vector2();
 
 			init();
 			animate();
@@ -100,7 +100,7 @@
 
 				gui = new GUI( { width: 350 } );
 
-				var sceneFolder = gui.addFolder( "Scene" );
+				const sceneFolder = gui.addFolder( "Scene" );
 
 				scene.userData.sceneIndex = currentSceneIndex;
 
@@ -117,7 +117,7 @@
 
 				sceneFolder.open();
 
-				var graphicsFolder = gui.addFolder( "Graphics" );
+				const graphicsFolder = gui.addFolder( "Graphics" );
 
 				graphicsFolder.add( scene.userData, "outlineEnabled" ).name( "Glow enabled" );
 
@@ -144,7 +144,7 @@
 
 				graphicsFolder.open();
 
-				var rayFolder = gui.addFolder( "Ray parameters" );
+				const rayFolder = gui.addFolder( "Ray parameters" );
 
 				rayFolder.add( scene.userData.rayParams, 'straightness', 0, 1 ).name( 'Straightness' );
 				rayFolder.add( scene.userData.rayParams, 'roughness', 0, 1 ).name( 'Roughness' );
@@ -160,7 +160,7 @@
 
 					// Parameters which need to recreate the ray after modification
 
-					var raySlowFolder = gui.addFolder( "Ray parameters (slow)" );
+					const raySlowFolder = gui.addFolder( "Ray parameters (slow)" );
 
 					raySlowFolder.add( scene.userData.rayParams, 'ramification', 0, 15 ).step( 1 ).name( 'Ramification' ).onFinishChange( function () {
 
@@ -215,7 +215,7 @@
 
 			function createOutline( scene, objectsArray, visibleColor ) {
 
-				var outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, scene.userData.camera, objectsArray );
+				const outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, scene.userData.camera, objectsArray );
 				outlinePass.edgeStrength = 2.5;
 				outlinePass.edgeGlow = 0.7;
 				outlinePass.edgeThickness = 2.8;
@@ -233,7 +233,7 @@
 
 			function createConesScene() {
 
-				var scene = new THREE.Scene();
+				const scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x050505 );
 
 				scene.userData.canGoBackwardsInTime = true;
@@ -245,32 +245,32 @@
 				scene.userData.lightningColor = new THREE.Color( 0xB0FFFF );
 				scene.userData.outlineColor = new THREE.Color( 0x00FFFF );
 
-				var posLight = new THREE.PointLight( 0x00ffff, 1, 5000, 2 );
+				const posLight = new THREE.PointLight( 0x00ffff, 1, 5000, 2 );
 				scene.add( posLight );
 
 				// Ground
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200000, 200000 ), new THREE.MeshPhongMaterial( { color: 0xC0C0C0, shininess: 0 } ) );
+				const ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200000, 200000 ), new THREE.MeshPhongMaterial( { color: 0xC0C0C0, shininess: 0 } ) );
 				ground.rotation.x = - Math.PI * 0.5;
 				scene.add( ground );
 
 				// Cones
 
-				var conesDistance = 1000;
-				var coneHeight = 200;
-				var coneHeightHalf = coneHeight * 0.5;
+				const conesDistance = 1000;
+				const coneHeight = 200;
+				const coneHeightHalf = coneHeight * 0.5;
 
 				posLight.position.set( 0, ( conesDistance + coneHeight ) * 0.5, 0 );
 				posLight.color = scene.userData.outlineColor;
 
 				scene.userData.camera.position.set( 5 * coneHeight, 4 * coneHeight, 18 * coneHeight );
 
-				var coneMesh1 = new THREE.Mesh( new THREE.ConeBufferGeometry( coneHeight, coneHeight, 30, 1, false ), new THREE.MeshPhongMaterial( { color: 0xFFFF00, emissive: 0x1F1F00 } ) );
+				const coneMesh1 = new THREE.Mesh( new THREE.ConeBufferGeometry( coneHeight, coneHeight, 30, 1, false ), new THREE.MeshPhongMaterial( { color: 0xFFFF00, emissive: 0x1F1F00 } ) );
 				coneMesh1.rotation.x = Math.PI;
 				coneMesh1.position.y = conesDistance + coneHeight;
 				scene.add( coneMesh1 );
 
-				var coneMesh2 = new THREE.Mesh( coneMesh1.geometry.clone(), new THREE.MeshPhongMaterial( { color: 0xFF2020, emissive: 0x1F0202 } ) );
+				const coneMesh2 = new THREE.Mesh( coneMesh1.geometry.clone(), new THREE.MeshPhongMaterial( { color: 0xFF2020, emissive: 0x1F0202 } ) );
 				coneMesh2.position.y = coneHeightHalf;
 				scene.add( coneMesh2 );
 
@@ -303,9 +303,9 @@
 
 				};
 
-				var lightningStrike;
-				var lightningStrikeMesh;
-				var outlineMeshArray = [];
+				let lightningStrike;
+				let lightningStrikeMesh;
+				const outlineMeshArray = [];
 
 				scene.userData.recreateRay = function () {
 
@@ -335,7 +335,7 @@
 
 				// Controls
 
-				var controls = new OrbitControls( scene.userData.camera, renderer.domElement );
+				const controls = new OrbitControls( scene.userData.camera, renderer.domElement );
 				controls.target.y = ( conesDistance + coneHeight ) * 0.5;
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.05;
@@ -377,27 +377,27 @@
 
 			function createPlasmaBallScene() {
 
-				var scene = new THREE.Scene();
+				const scene = new THREE.Scene();
 
 				scene.userData.canGoBackwardsInTime = true;
 
 				scene.userData.camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 100, 50000 );
 
-				var ballScene = new THREE.Scene();
+				const ballScene = new THREE.Scene();
 				ballScene.background = new THREE.Color( 0x454545 );
 
 				// Lights
 
-				var ambientLight = new THREE.AmbientLight( 0x444444 );
+				const ambientLight = new THREE.AmbientLight( 0x444444 );
 				ballScene.add( ambientLight );
 				scene.add( ambientLight );
 
-				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				light1.position.set( 1, 1, 1 );
 				ballScene.add( light1 );
 				scene.add( light1 );
 
-				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light2.position.set( - 0.5, 1, 0.2 );
 				ballScene.add( light2 );
 				scene.add( light2 );
@@ -409,16 +409,16 @@
 
 				scene.userData.lightningMaterial = new THREE.MeshBasicMaterial( { color: scene.userData.lightningColor, side: THREE.DoubleSide } );
 
-				var r = "textures/cube/Bridge2/";
-				var urls = [ r + "posx.jpg", r + "negx.jpg",
+				const r = "textures/cube/Bridge2/";
+				const urls = [ r + "posx.jpg", r + "negx.jpg",
 							 r + "posy.jpg", r + "negy.jpg",
 							 r + "posz.jpg", r + "negz.jpg" ];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				const textureCube = new THREE.CubeTextureLoader().load( urls );
 				textureCube.mapping = THREE.CubeReflectionMapping;
 				textureCube.encoding = THREE.sRGBEncoding;
 
-				var sphereMaterial = new THREE.MeshPhysicalMaterial( {
+				const sphereMaterial = new THREE.MeshPhysicalMaterial( {
 					transparent: true,
 					transmission: .96,
 					depthWrite: false,
@@ -428,37 +428,37 @@
 					envMap: textureCube
 				} );
 
-				var sphereHeight = 300;
-				var sphereRadius = 200;
+				const sphereHeight = 300;
+				const sphereRadius = 200;
 
 				scene.userData.camera.position.set( 5 * sphereRadius, 2 * sphereHeight, 6 * sphereRadius );
 
-				var sphereMesh = new THREE.Mesh( new THREE.SphereBufferGeometry( sphereRadius, 80, 40 ), sphereMaterial );
+				const sphereMesh = new THREE.Mesh( new THREE.SphereBufferGeometry( sphereRadius, 80, 40 ), sphereMaterial );
 				sphereMesh.position.set( 0, sphereHeight, 0 );
 				ballScene.add( sphereMesh );
 
-				var sphere = new THREE.Sphere( sphereMesh.position, sphereRadius );
+				const sphere = new THREE.Sphere( sphereMesh.position, sphereRadius );
 
-				var spherePlasma = new THREE.Mesh( new THREE.SphereBufferGeometry( sphereRadius * 0.05, 24, 12 ), scene.userData.lightningMaterial );
+				const spherePlasma = new THREE.Mesh( new THREE.SphereBufferGeometry( sphereRadius * 0.05, 24, 12 ), scene.userData.lightningMaterial );
 				spherePlasma.position.copy( sphereMesh.position );
 				spherePlasma.scale.y = 0.6;
 				scene.add( spherePlasma );
 
-				var post = new THREE.Mesh(
+				const post = new THREE.Mesh(
 					new THREE.CylinderBufferGeometry( sphereRadius * 0.06, sphereRadius * 0.06, sphereHeight, 6, 1, true ),
 					new THREE.MeshLambertMaterial( { color: 0x020202 } )
 				);
 				post.position.y = sphereHeight * 0.5 - sphereRadius * 0.05 * 1.2;
 				scene.add( post );
 
-				var box = new THREE.Mesh( new THREE.BoxBufferGeometry( sphereHeight * 0.5, sphereHeight * 0.1, sphereHeight * 0.5 ), post.material );
+				const box = new THREE.Mesh( new THREE.BoxBufferGeometry( sphereHeight * 0.5, sphereHeight * 0.1, sphereHeight * 0.5 ), post.material );
 				box.position.y = sphereHeight * 0.05 * 0.5;
 				scene.add( box );
 
-				var rayDirection = new THREE.Vector3();
-				var rayLength = 0;
-				var vec1 = new THREE.Vector3();
-				var vec2 = new THREE.Vector3();
+				const rayDirection = new THREE.Vector3();
+				let rayLength = 0;
+				const vec1 = new THREE.Vector3();
+				const vec2 = new THREE.Vector3();
 
 				scene.userData.rayParams = {
 
@@ -489,11 +489,13 @@
 
 						vec1.subVectors( childSubray.pos1, lightningStrike.rayParameters.sourceOffset );
 						vec2.set( 0, 0, 0 );
+
 						if ( lightningStrike.randomGenerator.random() < 0.7 ) {
 
 							vec2.copy( rayDirection ).multiplyScalar( rayLength * 1.0865 );
 
 						}
+
 						vec1.add( vec2 ).setLength( rayLength );
 						childSubray.pos1.addVectors( vec1, lightningStrike.rayParameters.sourceOffset );
 
@@ -501,9 +503,9 @@
 
 				};
 
-				var lightningStrike;
-				var lightningStrikeMesh;
-				var outlineMeshArray = [];
+				let lightningStrike;
+				let lightningStrikeMesh;
+				const outlineMeshArray = [];
 
 				scene.userData.recreateRay = function () {
 
@@ -532,11 +534,11 @@
 
 				composer.addPass( new RenderPass( ballScene, scene.userData.camera ) );
 
-				var rayPass = new RenderPass( scene, scene.userData.camera );
+				const rayPass = new RenderPass( scene, scene.userData.camera );
 				rayPass.clear = false;
 				composer.addPass( rayPass );
 
-				var outlinePass = createOutline( scene, outlineMeshArray, scene.userData.outlineColor );
+				const outlinePass = createOutline( scene, outlineMeshArray, scene.userData.outlineColor );
 
 				scene.userData.render = function ( time ) {
 
@@ -556,7 +558,7 @@
 
 				// Controls
 
-				var controls = new OrbitControls( scene.userData.camera, renderer.domElement );
+				const controls = new OrbitControls( scene.userData.camera, renderer.domElement );
 				controls.target.copy( sphereMesh.position );
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.05;
@@ -577,13 +579,13 @@
 
 				}
 
-				var intersection = new THREE.Vector3();
+				const intersection = new THREE.Vector3();
 
 				function checkIntersection() {
 
 					raycaster.setFromCamera( mouse, scene.userData.camera );
 
-					var result = raycaster.ray.intersectSphere( sphere, intersection );
+					const result = raycaster.ray.intersectSphere( sphere, intersection );
 
 					if ( result !== null ) {
 
@@ -601,7 +603,7 @@
 
 			function createStormScene() {
 
-				var scene = new THREE.Scene();
+				const scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x050505 );
 
 				scene.userData.canGoBackwardsInTime = false;
@@ -612,21 +614,21 @@
 
 				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 posLight = new THREE.PointLight( 0x00ffff );
+				const posLight = new THREE.PointLight( 0x00ffff );
 				posLight.position.set( 0, 100, 0 );
 				scene.add( posLight );
 
 				// Ground
 
-				var GROUND_SIZE = 1000;
+				const GROUND_SIZE = 1000;
 
 				scene.userData.camera.position.set( 0, 0.2, 1.6 ).multiplyScalar( GROUND_SIZE * 0.5 );
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( GROUND_SIZE, GROUND_SIZE ), new THREE.MeshLambertMaterial( { color: 0x072302 } ) );
+				const ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( GROUND_SIZE, GROUND_SIZE ), new THREE.MeshLambertMaterial( { color: 0x072302 } ) );
 				ground.rotation.x = - Math.PI * 0.5;
 				scene.add( ground );
 
@@ -637,10 +639,10 @@
 
 				scene.userData.lightningMaterial = new THREE.MeshBasicMaterial( { color: scene.userData.lightningColor } );
 
-				var rayDirection = new THREE.Vector3( 0, - 1, 0 );
-				var rayLength = 0;
-				var vec1 = new THREE.Vector3();
-				var vec2 = new THREE.Vector3();
+				const rayDirection = new THREE.Vector3( 0, - 1, 0 );
+				let rayLength = 0;
+				const vec1 = new THREE.Vector3();
+				const vec2 = new THREE.Vector3();
 
 				scene.userData.rayParams = {
 
@@ -670,10 +672,10 @@
 
 						rayLength = lightningStrike.rayParameters.sourceOffset.y;
 						vec1.subVectors( childSubray.pos1, lightningStrike.rayParameters.sourceOffset );
-						var proj = rayDirection.dot( vec1 );
+						const proj = rayDirection.dot( vec1 );
 						vec2.copy( rayDirection ).multiplyScalar( proj );
 						vec1.sub( vec2 );
-						var scale = proj / rayLength > 0.5 ? rayLength / proj : 1;
+						const scale = proj / rayLength > 0.5 ? rayLength / proj : 1;
 						vec2.multiplyScalar( scale );
 						vec1.add( vec2 );
 						childSubray.pos1.addVectors( vec1, lightningStrike.rayParameters.sourceOffset );
@@ -683,10 +685,10 @@
 				};
 
 				// Black star mark
-				var starVertices = [];
-				var prevPoint = new THREE.Vector3( 0, 0, 1 );
-				var currPoint = new THREE.Vector3();
-				for ( var i = 1; i <= 16; i ++ ) {
+				const starVertices = [];
+				const prevPoint = new THREE.Vector3( 0, 0, 1 );
+				const currPoint = new THREE.Vector3();
+				for ( let i = 1; i <= 16; i ++ ) {
 
 					currPoint.set( Math.sin( 2 * Math.PI * i / 16 ), 0, Math.cos( 2 * Math.PI * i / 16 ) );
 
@@ -704,14 +706,14 @@
 
 				}
 
-				var starGeometry = new THREE.BufferGeometry();
+				const starGeometry = new THREE.BufferGeometry();
 				starGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( starVertices, 3 ) );
-				var starMesh = new THREE.Mesh( starGeometry, new THREE.MeshBasicMaterial( { color: 0x020900 } ) );
+				const starMesh = new THREE.Mesh( starGeometry, new THREE.MeshBasicMaterial( { color: 0x020900 } ) );
 				starMesh.scale.multiplyScalar( 6 );
 
 				//
 
-				var storm = new LightningStorm( {
+				const storm = new LightningStorm( {
 
 					size: GROUND_SIZE,
 					minHeight: 90,
@@ -726,7 +728,7 @@
 					onLightningDown: function ( lightning ) {
 
 						// Add black star mark at ray strike
-						var star1 = starMesh.clone();
+						const star1 = starMesh.clone();
 						star1.position.copy( lightning.rayParameters.destOffset );
 						star1.position.y = 0.05;
 						star1.rotation.y = 2 * Math.PI * Math.random();
@@ -746,7 +748,7 @@
 
 				// Controls
 
-				var controls = new OrbitControls( scene.userData.camera, renderer.domElement );
+				const controls = new OrbitControls( scene.userData.camera, renderer.domElement );
 				controls.target.y = GROUND_SIZE * 0.05;
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.05;

examples/webgl_lightprobe.html

@@ -21,15 +21,15 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { LightProbeGenerator } from './jsm/lights/LightProbeGenerator.js';
 
-			var mesh, renderer, scene, camera;
+			let mesh, renderer, scene, camera;
 
-			var gui;
+			let gui;
 
-			var lightProbe;
-			var directionalLight;
+			let lightProbe;
+			let directionalLight;
 
 			// linear color space
-			var API = {
+			const API = {
 				lightProbeIntensity: 1.0,
 				directionalLightIntensity: 0.2,
 				envMapIntensity: 1
@@ -58,7 +58,7 @@
 				camera.position.set( 0, 0, 30 );
 
 				// controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 10;
 				controls.maxDistance = 50;
@@ -74,7 +74,7 @@
 				scene.add( directionalLight );
 
 				// envmap
-				var genCubeUrls = function ( prefix, postfix ) {
+				const genCubeUrls = function ( prefix, postfix ) {
 
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
@@ -84,7 +84,7 @@
 
 				};
 
-				var urls = genCubeUrls( 'textures/cube/pisa/', '.png' );
+				const urls = genCubeUrls( 'textures/cube/pisa/', '.png' );
 
 				new THREE.CubeTextureLoader().load( urls, function ( cubeTexture ) {
 
@@ -94,10 +94,10 @@
 
 					lightProbe.copy( LightProbeGenerator.fromCubeTexture( cubeTexture ) );
 
-					var geometry = new THREE.SphereBufferGeometry( 5, 64, 32 );
-					//var geometry = new TorusKnotBufferGeometry( 4, 1.5, 256, 32, 2, 3 );
+					const geometry = new THREE.SphereBufferGeometry( 5, 64, 32 );
+					//const geometry = new TorusKnotBufferGeometry( 4, 1.5, 256, 32, 2, 3 );
 
-					var material = new THREE.MeshStandardMaterial( {
+					const material = new THREE.MeshStandardMaterial( {
 						color: 0xffffff,
 						metalness: 0,
 						roughness: 0,
@@ -121,7 +121,7 @@
 
 				gui.domElement.style.userSelect = 'none';
 
-				var fl = gui.addFolder( 'Intensity' );
+				const fl = gui.addFolder( 'Intensity' );
 
 				fl.add( API, 'lightProbeIntensity', 0, 1, 0.02 )
 					.name( 'light probe' )

examples/webgl_lightprobe_cubecamera.html

@@ -20,9 +20,9 @@
 			import { LightProbeHelper } from './jsm/helpers/LightProbeHelper.js';
 			import { LightProbeGenerator } from './jsm/lights/LightProbeGenerator.js';
 
-			var renderer, scene, camera, cubeCamera;
+			let renderer, scene, camera, cubeCamera;
 
-			var lightProbe;
+			let lightProbe;
 
 			init();
 
@@ -42,7 +42,7 @@
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 30 );
 
-				var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 256, {
+				const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 256, {
 					encoding: THREE.sRGBEncoding, // since gamma is applied during rendering, the cubeCamera renderTarget texture encoding must be sRGBEncoding
 					format: THREE.RGBAFormat
 				} );
@@ -50,7 +50,7 @@
 				cubeCamera = new THREE.CubeCamera( 1, 1000, cubeRenderTarget );
 
 				// controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 10;
 				controls.maxDistance = 50;
@@ -61,7 +61,7 @@
 				scene.add( lightProbe );
 
 				// envmap
-				var genCubeUrls = function ( prefix, postfix ) {
+				const genCubeUrls = function ( prefix, postfix ) {
 
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
@@ -71,7 +71,7 @@
 
 				};
 
-				var urls = genCubeUrls( 'textures/cube/pisa/', '.png' );
+				const urls = genCubeUrls( 'textures/cube/pisa/', '.png' );
 
 				new THREE.CubeTextureLoader().load( urls, function ( cubeTexture ) {
 

examples/webgl_lights_hemisphere.html

@@ -66,18 +66,18 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 
-			var camera, scene, renderer, dirLight, dirLightHelper, hemiLight, hemiLightHelper;
-			var mixers = [];
-			var stats;
+			let camera, scene, renderer;
+			const mixers = [];
+			let stats;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.set( 0, 0, 250 );
@@ -88,18 +88,18 @@
 
 				// LIGHTS
 
-				hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.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 );
 
-				hemiLightHelper = new THREE.HemisphereLightHelper( hemiLight, 10 );
+				const hemiLightHelper = new THREE.HemisphereLightHelper( hemiLight, 10 );
 				scene.add( hemiLightHelper );
 
 				//
 
-				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
 				dirLight.color.setHSL( 0.1, 1, 0.95 );
 				dirLight.position.set( - 1, 1.75, 1 );
 				dirLight.position.multiplyScalar( 30 );
@@ -110,7 +110,7 @@
 				dirLight.shadow.mapSize.width = 2048;
 				dirLight.shadow.mapSize.height = 2048;
 
-				var d = 50;
+				const d = 50;
 
 				dirLight.shadow.camera.left = - d;
 				dirLight.shadow.camera.right = d;
@@ -120,16 +120,16 @@
 				dirLight.shadow.camera.far = 3500;
 				dirLight.shadow.bias = - 0.0001;
 
-				dirLightHelper = new THREE.DirectionalLightHelper( dirLight, 10 );
+				const dirLightHelper = new THREE.DirectionalLightHelper( dirLight, 10 );
 				scene.add( dirLightHelper );
 
 				// GROUND
 
-				var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
-				var groundMat = new THREE.MeshLambertMaterial( { color: 0xffffff } );
+				const groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
+				const groundMat = new THREE.MeshLambertMaterial( { color: 0xffffff } );
 				groundMat.color.setHSL( 0.095, 1, 0.75 );
 
-				var ground = new THREE.Mesh( groundGeo, groundMat );
+				const ground = new THREE.Mesh( groundGeo, groundMat );
 				ground.position.y = - 33;
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
@@ -137,9 +137,9 @@
 
 				// SKYDOME
 
-				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
-				var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
-				var uniforms = {
+				const vertexShader = document.getElementById( 'vertexShader' ).textContent;
+				const fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
+				const uniforms = {
 					"topColor": { value: new THREE.Color( 0x0077ff ) },
 					"bottomColor": { value: new THREE.Color( 0xffffff ) },
 					"offset": { value: 33 },
@@ -149,26 +149,26 @@
 
 				scene.fog.color.copy( uniforms[ "bottomColor" ].value );
 
-				var skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
-				var skyMat = new THREE.ShaderMaterial( {
+				const skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
+				const skyMat = new THREE.ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: vertexShader,
 					fragmentShader: fragmentShader,
 					side: THREE.BackSide
 				} );
 
-				var sky = new THREE.Mesh( skyGeo, skyMat );
+				const sky = new THREE.Mesh( skyGeo, skyMat );
 				scene.add( sky );
 
 				// MODEL
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 
 				loader.load( 'models/gltf/Flamingo.glb', function ( gltf ) {
 
-					var mesh = gltf.scene.children[ 0 ];
+					const mesh = gltf.scene.children[ 0 ];
 
-					var s = 0.35;
+					const s = 0.35;
 					mesh.scale.set( s, s, s );
 					mesh.position.y = 15;
 					mesh.rotation.y = - 1;
@@ -178,7 +178,7 @@
 
 					scene.add( mesh );
 
-					var mixer = new THREE.AnimationMixer( mesh );
+					const mixer = new THREE.AnimationMixer( mesh );
 					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
 					mixers.push( mixer );
 
@@ -202,7 +202,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var hemisphereButton = document.getElementById( 'hemisphereButton' );
+				const hemisphereButton = document.getElementById( 'hemisphereButton' );
 				hemisphereButton.addEventListener( 'click', function () {
 
 					hemiLight.visible = ! hemiLight.visible;
@@ -210,7 +210,7 @@
 
 				} );
 
-				var directionalButton = document.getElementById( 'directionalButton' );
+				const directionalButton = document.getElementById( 'directionalButton' );
 				directionalButton.addEventListener( 'click', function () {
 
 					dirLight.visible = ! dirLight.visible;
@@ -242,9 +242,9 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
-				for ( var i = 0; i < mixers.length; i ++ ) {
+				for ( let i = 0; i < mixers.length; i ++ ) {
 
 					mixers[ i ].update( delta );
 

examples/webgl_lights_physical.html

@@ -24,13 +24,14 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, scene, renderer,
-				bulbLight, bulbMat, hemiLight, stats;
-			var ballMat, cubeMat, floorMat;
+			let camera, scene, renderer, bulbLight, bulbMat, hemiLight, stats;
+			let ballMat, cubeMat, floorMat;
+
+			let previousShadowMap = false;
 
 
 			// ref for lumens: http://www.power-sure.com/lumens.htm
-			var bulbLuminousPowers = {
+			const bulbLuminousPowers = {
 				"110000 lm (1000W)": 110000,
 				"3500 lm (300W)": 3500,
 				"1700 lm (100W)": 1700,
@@ -42,7 +43,7 @@
 			};
 
 			// ref for solar irradiances: https://en.wikipedia.org/wiki/Lux
-			var hemiLuminousIrradiances = {
+			const hemiLuminousIrradiances = {
 				"0.0001 lx (Moonless Night)": 0.0001,
 				"0.002 lx (Night Airglow)": 0.002,
 				"0.5 lx (Full Moon)": 0.5,
@@ -56,7 +57,7 @@
 				"50000 lx (Direct Sun)": 50000
 			};
 
-			var params = {
+			const params = {
 				shadows: true,
 				exposure: 0.68,
 				bulbPower: Object.keys( bulbLuminousPowers )[ 4 ],
@@ -68,7 +69,7 @@
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -81,7 +82,7 @@
 
 				scene = new THREE.Scene();
 
-				var bulbGeometry = new THREE.SphereBufferGeometry( 0.02, 16, 8 );
+				const bulbGeometry = new THREE.SphereBufferGeometry( 0.02, 16, 8 );
 				bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
 
 				bulbMat = new THREE.MeshStandardMaterial( {
@@ -103,7 +104,7 @@
 					metalness: 0.2,
 					bumpScale: 0.0005
 				} );
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 				textureLoader.load( "textures/hardwood2_diffuse.jpg", function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
@@ -114,7 +115,7 @@
 					floorMat.map = map;
 					floorMat.needsUpdate = true;
 
-	} );
+				} );
 				textureLoader.load( "textures/hardwood2_bump.jpg", function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
@@ -124,7 +125,7 @@
 					floorMat.bumpMap = map;
 					floorMat.needsUpdate = true;
 
-	} );
+				} );
 				textureLoader.load( "textures/hardwood2_roughness.jpg", function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
@@ -134,7 +135,7 @@
 					floorMat.roughnessMap = map;
 					floorMat.needsUpdate = true;
 
-	} );
+				} );
 
 				cubeMat = new THREE.MeshStandardMaterial( {
 					roughness: 0.7,
@@ -152,7 +153,7 @@
 					cubeMat.map = map;
 					cubeMat.needsUpdate = true;
 
-	} );
+				} );
 				textureLoader.load( "textures/brick_bump.jpg", function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
@@ -162,7 +163,7 @@
 					cubeMat.bumpMap = map;
 					cubeMat.needsUpdate = true;
 
-	} );
+				} );
 
 				ballMat = new THREE.MeshStandardMaterial( {
 					color: 0xffffff,
@@ -176,7 +177,7 @@
 					ballMat.map = map;
 					ballMat.needsUpdate = true;
 
-	} );
+				} );
 				textureLoader.load( "textures/planets/earth_specular_2048.jpg", function ( map ) {
 
 					map.anisotropy = 4;
@@ -184,33 +185,33 @@
 					ballMat.metalnessMap = map;
 					ballMat.needsUpdate = true;
 
-	} );
+				} );
 
-				var floorGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
-				var floorMesh = new THREE.Mesh( floorGeometry, floorMat );
+				const floorGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
+				const floorMesh = new THREE.Mesh( floorGeometry, floorMat );
 				floorMesh.receiveShadow = true;
 				floorMesh.rotation.x = - Math.PI / 2.0;
 				scene.add( floorMesh );
 
-				var ballGeometry = new THREE.SphereBufferGeometry( 0.25, 32, 32 );
-				var ballMesh = new THREE.Mesh( ballGeometry, ballMat );
+				const ballGeometry = new THREE.SphereBufferGeometry( 0.25, 32, 32 );
+				const ballMesh = new THREE.Mesh( ballGeometry, ballMat );
 				ballMesh.position.set( 1, 0.25, 1 );
 				ballMesh.rotation.y = Math.PI;
 				ballMesh.castShadow = true;
 				scene.add( ballMesh );
 
-				var boxGeometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
-				var boxMesh = new THREE.Mesh( boxGeometry, cubeMat );
+				const boxGeometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
+				const boxMesh = new THREE.Mesh( boxGeometry, cubeMat );
 				boxMesh.position.set( - 0.5, 0.25, - 1 );
 				boxMesh.castShadow = true;
 				scene.add( boxMesh );
 
-				var boxMesh2 = new THREE.Mesh( boxGeometry, cubeMat );
+				const boxMesh2 = new THREE.Mesh( boxGeometry, cubeMat );
 				boxMesh2.position.set( 0, 0.25, - 5 );
 				boxMesh2.castShadow = true;
 				scene.add( boxMesh2 );
 
-				var boxMesh3 = new THREE.Mesh( boxGeometry, cubeMat );
+				const boxMesh3 = new THREE.Mesh( boxGeometry, cubeMat );
 				boxMesh3.position.set( 7, 0.25, 0 );
 				boxMesh3.castShadow = true;
 				scene.add( boxMesh3 );
@@ -226,14 +227,14 @@
 				container.appendChild( renderer.domElement );
 
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1;
 				controls.maxDistance = 20;
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'hemiIrradiance', Object.keys( hemiLuminousIrradiances ) );
 				gui.add( params, 'bulbPower', Object.keys( bulbLuminousPowers ) );
@@ -241,7 +242,7 @@
 				gui.add( params, 'shadows' );
 				gui.open();
 
-}
+			}
 
 			function onWindowResize() {
 
@@ -262,13 +263,12 @@
 
 			}
 
-			var previousShadowMap = false;
-
 			function render() {
 
 				renderer.toneMappingExposure = Math.pow( params.exposure, 5.0 ); // to allow for very bright scenes.
 				renderer.shadowMap.enabled = params.shadows;
 				bulbLight.castShadow = params.shadows;
+
 				if ( params.shadows !== previousShadowMap ) {
 
 					ballMat.needsUpdate = true;
@@ -276,12 +276,13 @@
 					floorMat.needsUpdate = true;
 					previousShadowMap = params.shadows;
 
-	}
+				}
+
 				bulbLight.power = bulbLuminousPowers[ params.bulbPower ];
 				bulbMat.emissiveIntensity = bulbLight.intensity / Math.pow( 0.02, 2.0 ); // convert from intensity to irradiance at bulb surface
 
 				hemiLight.intensity = hemiLuminousIrradiances[ params.hemiIrradiance ];
-				var time = Date.now() * 0.0005;
+				const time = Date.now() * 0.0005;
 
 				bulbLight.position.y = Math.cos( time ) * 0.75 + 1.25;
 

examples/webgl_lights_pointlights.html

@@ -21,11 +21,11 @@
 
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
-			var camera, scene, renderer,
+			let camera, scene, renderer,
 				light1, light2, light3, light4,
 				object, stats;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -39,7 +39,7 @@
 
 				//model
 
-				var loader = new OBJLoader();
+				const loader = new OBJLoader();
 				loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {
 
 					object = obj;
@@ -49,7 +49,7 @@
 
 				} );
 
-				var sphere = new THREE.SphereBufferGeometry( 0.5, 16, 8 );
+				const sphere = new THREE.SphereBufferGeometry( 0.5, 16, 8 );
 
 				//lights
 
@@ -105,8 +105,8 @@
 
 			function render() {
 
-				var time = Date.now() * 0.0005;
-				var delta = clock.getDelta();
+				const time = Date.now() * 0.0005;
+				const delta = clock.getDelta();
 
 				if ( object ) object.rotation.y -= 0.5 * delta;
 

examples/webgl_lights_pointlights2.html

@@ -21,19 +21,19 @@
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
-			var camera, scene, renderer, controls;
-			var light1, light2, light3, light4, light5, light6;
+			let camera, scene, renderer, controls;
+			let light1, light2, light3, light4, light5, light6;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
-			var stats;
+			let stats;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				// CAMERA
 
@@ -49,32 +49,32 @@
 
 				// TEXTURES
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
-				var texture = textureLoader.load( "textures/disturb.jpg" );
+				const texture = textureLoader.load( "textures/disturb.jpg" );
 				texture.repeat.set( 20, 10 );
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 				texture.encoding = THREE.sRGBEncoding;
 
 				// MATERIALS
 
-				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture } );
-				var objectMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0.5, metalness: 1.0 } );
+				const groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture } );
+				const objectMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0.5, metalness: 1.0 } );
 
 				// GROUND
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 800, 400, 2, 2 ), groundMaterial );
+				const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 800, 400, 2, 2 ), groundMaterial );
 				mesh.position.y = - 5;
 				mesh.rotation.x = - Math.PI / 2;
 				scene.add( mesh );
 
 				// OBJECTS
 
-				var objectGeometry = new THREE.TorusBufferGeometry( 1.5, 0.4, 8, 16 );
+				const objectGeometry = new THREE.TorusBufferGeometry( 1.5, 0.4, 8, 16 );
 
-				for ( var i = 0; i < 5000; i ++ ) {
+				for ( let i = 0; i < 5000; i ++ ) {
 
-					var mesh = new THREE.Mesh( objectGeometry, objectMaterial );
+					const mesh = new THREE.Mesh( objectGeometry, objectMaterial );
 
 					mesh.position.x = 400 * ( 0.5 - Math.random() );
 					mesh.position.y = 50 * ( 0.5 - Math.random() ) + 25;
@@ -91,13 +91,13 @@
 
 				// LIGHTS
 
-				var intensity = 2.5;
-				var distance = 100;
-				var decay = 2.0;
+				const intensity = 2.5;
+				const distance = 100;
+				const decay = 2.0;
 
-				var c1 = 0xff0040, c2 = 0x0040ff, c3 = 0x80ff80, c4 = 0xffaa00, c5 = 0x00ffaa, c6 = 0xff1100;
+				const c1 = 0xff0040, c2 = 0x0040ff, c3 = 0x80ff80, c4 = 0xffaa00, c5 = 0x00ffaa, c6 = 0xff1100;
 
-				var sphere = new THREE.SphereBufferGeometry( 0.25, 16, 8 );
+				const sphere = new THREE.SphereBufferGeometry( 0.25, 16, 8 );
 
 				light1 = new THREE.PointLight( c1, intensity, distance, decay );
 				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c1 } ) ) );
@@ -123,7 +123,7 @@
 				light6.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c6 } ) ) );
 				scene.add( light6 );
 
-				var dlight = new THREE.DirectionalLight( 0xffffff, 0.05 );
+				const dlight = new THREE.DirectionalLight( 0xffffff, 0.05 );
 				dlight.position.set( 0.5, 1, 0 ).normalize();
 				scene.add( dlight );
 
@@ -182,8 +182,8 @@
 
 			function render() {
 
-				var time = Date.now() * 0.00025;
-				var d = 150;
+				const time = Date.now() * 0.00025;
+				const d = 150;
 
 				light1.position.x = Math.sin( time * 0.7 ) * d;
 				light1.position.z = Math.cos( time * 0.3 ) * d;

examples/webgl_lights_rectarealight.html

@@ -24,14 +24,14 @@
 			import { RectAreaLightHelper } from './jsm/helpers/RectAreaLightHelper.js';
 			import { RectAreaLightUniformsLib } from './jsm/lights/RectAreaLightUniformsLib.js';
 
-			var renderer, scene, camera;
+			let renderer, scene, camera;
 
-			var origin = new THREE.Vector3();
+			const origin = new THREE.Vector3();
 
-			var rectLight, rectLightHelper;
+			let rectLight, rectLightHelper;
 
-			var param = {};
-			var stats;
+			let param = {};
+			let stats;
 
 			init();
 			animate();
@@ -68,7 +68,7 @@
 
 				scene = new THREE.Scene();
 
-				var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
+				const ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
 				scene.add( ambient );
 
 				RectAreaLightUniformsLib.init();
@@ -80,42 +80,42 @@
 				rectLightHelper = new RectAreaLightHelper( rectLight );
 				rectLight.add( rectLightHelper );
 
-				var geoFloor = new THREE.BoxBufferGeometry( 2000, 0.1, 2000 );
-				var matStdFloor = new THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } );
-				var mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor );
+				const geoFloor = new THREE.BoxBufferGeometry( 2000, 0.1, 2000 );
+				const matStdFloor = new THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } );
+				const mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor );
 				scene.add( mshStdFloor );
 
-				var matStdObjects = new THREE.MeshStandardMaterial( { color: 0xA00000, roughness: 0, metalness: 0 } );
+				const matStdObjects = new THREE.MeshStandardMaterial( { color: 0xA00000, roughness: 0, metalness: 0 } );
 
-				var geoBox = new THREE.BoxBufferGeometry( Math.PI, Math.sqrt( 2 ), Math.E );
-				var mshStdBox = new THREE.Mesh( geoBox, matStdObjects );
+				const geoBox = new THREE.BoxBufferGeometry( Math.PI, Math.sqrt( 2 ), Math.E );
+				const mshStdBox = new THREE.Mesh( geoBox, matStdObjects );
 				mshStdBox.position.set( 0, 5, 0 );
 				mshStdBox.rotation.set( 0, Math.PI / 2.0, 0 );
 				mshStdBox.castShadow = true;
 				mshStdBox.receiveShadow = true;
 				scene.add( mshStdBox );
 
-				var geoSphere = new THREE.SphereBufferGeometry( 1.5, 32, 32 );
-				var mshStdSphere = new THREE.Mesh( geoSphere, matStdObjects );
+				const geoSphere = new THREE.SphereBufferGeometry( 1.5, 32, 32 );
+				const mshStdSphere = new THREE.Mesh( geoSphere, matStdObjects );
 				mshStdSphere.position.set( - 5, 5, 0 );
 				mshStdSphere.castShadow = true;
 				mshStdSphere.receiveShadow = true;
 				scene.add( mshStdSphere );
 
-				var geoKnot = new THREE.TorusKnotBufferGeometry( 1.5, 0.5, 100, 16 );
-				var mshStdKnot = new THREE.Mesh( geoKnot, matStdObjects );
+				const geoKnot = new THREE.TorusKnotBufferGeometry( 1.5, 0.5, 100, 16 );
+				const mshStdKnot = new THREE.Mesh( geoKnot, matStdObjects );
 				mshStdKnot.position.set( 5, 5, 0 );
 				mshStdKnot.castShadow = true;
 				mshStdKnot.receiveShadow = true;
 				scene.add( mshStdKnot );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.copy( mshStdBox.position );
 				controls.update();
 
 				// GUI
 
-				var gui = new GUI( { width: 300 } );
+				const gui = new GUI( { width: 300 } );
 				gui.open();
 
 				param = {
@@ -133,7 +133,7 @@
 
 				gui.add( param, 'motion' );
 
-				var lightFolder = gui.addFolder( 'Light' );
+				const lightFolder = gui.addFolder( 'Light' );
 
 				lightFolder.add( param, 'width', 1, 20 ).step( 0.1 ).onChange( function ( val ) {
 
@@ -167,7 +167,7 @@
 
 				lightFolder.open();
 
-				var standardFolder = gui.addFolder( 'Standard Material' );
+				const standardFolder = gui.addFolder( 'Standard Material' );
 
 				standardFolder.addColor( param, 'floor color' ).onChange( function ( val ) {
 
@@ -224,17 +224,17 @@
 
 				if ( param.motion ) {
 
-					var t = ( Date.now() / 2000 );
+					const t = ( Date.now() / 2000 );
 
 					// move light in circle around center
 					// change light height with sine curve
 
-					var r = 15.0;
+					const r = 15.0;
 
-					var lx = r * Math.cos( t );
-					var lz = r * Math.sin( t );
+					const lx = r * Math.cos( t );
+					const lz = r * Math.sin( t );
 
-					var ly = 5.0 + 5.0 * Math.sin( t / 3.0 );
+					const ly = 5.0 + 5.0 * Math.sin( t / 3.0 );
 
 					rectLight.position.set( lx, ly, lz );
 					rectLight.lookAt( origin );

examples/webgl_lights_spotlight.html

@@ -20,11 +20,11 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var renderer, scene, camera;
+			let renderer, scene, camera;
 
-			var spotLight, lightHelper, shadowCameraHelper;
+			let spotLight, lightHelper, shadowCameraHelper;
 
-			var gui;
+			let gui;
 
 			function init() {
 
@@ -43,13 +43,13 @@
 				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 160, 40, 10 );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 20;
 				controls.maxDistance = 500;
 				controls.enablePan = false;
 
-				var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
+				const ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
 				scene.add( ambient );
 
 				spotLight = new THREE.SpotLight( 0xffffff, 1 );
@@ -75,11 +75,11 @@
 
 				//
 
-				var material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering: true } );
+				let material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering: true } );
 
-				var geometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
+				let geometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				let mesh = new THREE.Mesh( geometry, material );
 				mesh.position.set( 0, - 1, 0 );
 				mesh.rotation.x = - Math.PI * 0.5;
 				mesh.receiveShadow = true;
@@ -87,11 +87,11 @@
 
 				//
 
-				var material = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
+				material = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
 
-				var geometry = new THREE.CylinderBufferGeometry( 5, 5, 2, 32, 1, false );
+				geometry = new THREE.CylinderBufferGeometry( 5, 5, 2, 32, 1, false );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				mesh.position.set( 0, 5, 0 );
 				mesh.castShadow = true;
 				scene.add( mesh );
@@ -125,7 +125,7 @@
 
 				gui = new GUI();
 
-				var params = {
+				const params = {
 					'light color': spotLight.color.getHex(),
 					intensity: spotLight.intensity,
 					distance: spotLight.distance,

examples/webgl_lights_spotlights.html

@@ -21,32 +21,32 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
-			var renderer = new THREE.WebGLRenderer();
+			const renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 
-			var camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 2000 );
+			const camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 2000 );
 
-			var controls = new OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 
-			var scene = new THREE.Scene();
+			const scene = new THREE.Scene();
 
-			var matFloor = new THREE.MeshPhongMaterial();
-			var matBox = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
+			const matFloor = new THREE.MeshPhongMaterial();
+			const matBox = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
 
-			var geoFloor = new THREE.PlaneBufferGeometry( 2000, 2000 );
-			var geoBox = new THREE.BoxBufferGeometry( 3, 1, 2 );
+			const geoFloor = new THREE.PlaneBufferGeometry( 2000, 2000 );
+			const geoBox = new THREE.BoxBufferGeometry( 3, 1, 2 );
 
-			var mshFloor = new THREE.Mesh( geoFloor, matFloor );
+			const mshFloor = new THREE.Mesh( geoFloor, matFloor );
 			mshFloor.rotation.x = - Math.PI * 0.5;
-			var mshBox = new THREE.Mesh( geoBox, matBox );
+			const mshBox = new THREE.Mesh( geoBox, matBox );
 
-			var ambient = new THREE.AmbientLight( 0x111111 );
+			const ambient = new THREE.AmbientLight( 0x111111 );
 
-			var spotLight1 = createSpotlight( 0xFF7F00 );
-			var spotLight2 = createSpotlight( 0x00FF7F );
-			var spotLight3 = createSpotlight( 0x7F00FF );
+			const spotLight1 = createSpotlight( 0xFF7F00 );
+			const spotLight2 = createSpotlight( 0x00FF7F );
+			const spotLight3 = createSpotlight( 0x7F00FF );
 
-			var lightHelper1, lightHelper2, lightHelper3;
+			let lightHelper1, lightHelper2, lightHelper3;
 
 			function init() {
 
@@ -91,7 +91,7 @@
 
 			function createSpotlight( color ) {
 
-				var newObj = new THREE.SpotLight( color, 2 );
+				const newObj = new THREE.SpotLight( color, 2 );
 
 				newObj.castShadow = true;
 				newObj.angle = 0.3;

examples/webgl_lines_colors.html

@@ -19,12 +19,12 @@
 
 			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -43,27 +43,27 @@
 
 				//
 
-				var hilbertPoints = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+				const hilbertPoints = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var geometry1 = new THREE.BufferGeometry();
-				var geometry2 = new THREE.BufferGeometry();
-				var geometry3 = new THREE.BufferGeometry();
+				const geometry1 = new THREE.BufferGeometry();
+				const geometry2 = new THREE.BufferGeometry();
+				const geometry3 = new THREE.BufferGeometry();
 
-				var subdivisions = 6;
+				const subdivisions = 6;
 
-				var vertices = [];
-				var colors1 = [];
-				var colors2 = [];
-				var colors3 = [];
+				let vertices = [];
+				let colors1 = [];
+				let colors2 = [];
+				let colors3 = [];
 
-				var point = new THREE.Vector3();
-				var color = new THREE.Color();
+				const point = new THREE.Vector3();
+				const color = new THREE.Color();
 
-				var spline = new THREE.CatmullRomCurve3( hilbertPoints );
+				const spline = new THREE.CatmullRomCurve3( hilbertPoints );
 
-				for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
+				for ( let i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
 
-					var t = i / ( hilbertPoints.length * subdivisions );
+					const t = i / ( hilbertPoints.length * subdivisions );
 					spline.getPoint( t, point );
 
 					vertices.push( point.x, point.y, point.z );
@@ -89,18 +89,18 @@
 
 				//
 
-				var geometry4 = new THREE.BufferGeometry();
-				var geometry5 = new THREE.BufferGeometry();
-				var geometry6 = new THREE.BufferGeometry();
+				const geometry4 = new THREE.BufferGeometry();
+				const geometry5 = new THREE.BufferGeometry();
+				const geometry6 = new THREE.BufferGeometry();
 
 				vertices = [];
 				colors1 = [];
 				colors2 = [];
 				colors3 = [];
 
-				for ( var i = 0; i < hilbertPoints.length; i ++ ) {
+				for ( let i = 0; i < hilbertPoints.length; i ++ ) {
 
-					var point = hilbertPoints[ i ];
+					const point = hilbertPoints[ i ];
 
 					vertices.push( point.x, point.y, point.z );
 
@@ -127,9 +127,10 @@
 
 				var	material = new THREE.LineBasicMaterial( { color: 0xffffff, vertexColors: true } );
 
-				var line, p, scale = 0.3, d = 225;
+				let line, p;
+				const scale = 0.3, d = 225;
 
-				var parameters = [
+				const parameters = [
 					[ material, scale * 1.5, [ - d, - d / 2, 0 ], geometry1 ],
 					[ material, scale * 1.5, [ 0, - d / 2, 0 ], geometry2 ],
 					[ material, scale * 1.5, [ d, - d / 2, 0 ], geometry3 ],
@@ -139,7 +140,7 @@
 					[ material, scale * 1.5, [ d, d / 2, 0 ], geometry6 ],
 				];
 
-				for ( var i = 0; i < parameters.length; i ++ ) {
+				for ( let i = 0; i < parameters.length; i ++ ) {
 
 					p = parameters[ i ];
 					line = new THREE.Line( p[ 3 ], p[ 0 ] );
@@ -201,11 +202,11 @@
 
 				camera.lookAt( scene.position );
 
-				var time = Date.now() * 0.0005;
+				const time = Date.now() * 0.0005;
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
+				for ( let i = 0; i < scene.children.length; i ++ ) {
 
-					var object = scene.children[ i ];
+					const object = scene.children[ i ];
 
 					if ( object.isLine ) {
 

examples/webgl_lines_dashed.html

@@ -19,10 +19,10 @@
 
 			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
 
-			var renderer, scene, camera, stats;
-			var objects = [];
+			let renderer, scene, camera, stats;
+			const objects = [];
 
-			var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
+			const WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
 
 			init();
 			animate();
@@ -36,24 +36,24 @@
 				scene.background = new THREE.Color( 0x111111 );
 				scene.fog = new THREE.Fog( 0x111111, 150, 200 );
 
-				var subdivisions = 6;
-				var recursion = 1;
+				const subdivisions = 6;
+				const recursion = 1;
 
-				var points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
-				var spline = new THREE.CatmullRomCurve3( points );
+				const points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
+				const spline = new THREE.CatmullRomCurve3( points );
 
-				var samples = spline.getPoints( points.length * subdivisions );
-				var geometrySpline = new THREE.BufferGeometry().setFromPoints( samples );
+				const samples = spline.getPoints( points.length * subdivisions );
+				const geometrySpline = new THREE.BufferGeometry().setFromPoints( samples );
 
-				var line = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ) );
+				const line = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ) );
 				line.computeLineDistances();
 
 				objects.push( line );
 				scene.add( line );
 
-				var geometryBox = box( 50, 50, 50 );
+				const geometryBox = box( 50, 50, 50 );
 
-				var lineSegments = new THREE.LineSegments( geometryBox, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1 } ) );
+				const lineSegments = new THREE.LineSegments( geometryBox, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1 } ) );
 				lineSegments.computeLineDistances();
 
 				objects.push( lineSegments );
@@ -63,7 +63,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();
@@ -81,8 +81,8 @@
 				height = height * 0.5,
 				depth = depth * 0.5;
 
-				var geometry = new THREE.BufferGeometry();
-				var position = [];
+				const geometry = new THREE.BufferGeometry();
+				const position = [];
 
 				position.push(
 					- width, - height, - depth,
@@ -148,7 +148,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				scene.traverse( function ( object ) {
 

examples/webgl_lines_fat.html

@@ -26,15 +26,15 @@
 			import { LineGeometry } from './jsm/lines/LineGeometry.js';
 			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
 
-			var line, renderer, scene, camera, camera2, controls;
-			var line1;
-			var matLine, matLineBasic, matLineDashed;
-			var stats;
-			var gui;
+			let line, renderer, scene, camera, camera2, controls;
+			let line1;
+			let matLine, matLineBasic, matLineDashed;
+			let stats;
+			let gui;
 
 			// viewport
-			var insetWidth;
-			var insetHeight;
+			let insetWidth;
+			let insetHeight;
 
 			init();
 			animate();
@@ -62,19 +62,19 @@
 
 				// Position and THREE.Color Data
 
-				var positions = [];
-				var colors = [];
+				const positions = [];
+				const colors = [];
 
-				var points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+				const points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var spline = new THREE.CatmullRomCurve3( points );
-				var divisions = Math.round( 12 * points.length );
-				var point = new THREE.Vector3();
-				var color = new THREE.Color();
+				const spline = new THREE.CatmullRomCurve3( points );
+				const divisions = Math.round( 12 * points.length );
+				const point = new THREE.Vector3();
+				const color = new THREE.Color();
 
-				for ( var i = 0, l = divisions; i < l; i ++ ) {
+				for ( let i = 0, l = divisions; i < l; i ++ ) {
 
-					var t = i / l;
+					const t = i / l;
 
 					spline.getPoint( t, point );
 					positions.push( point.x, point.y, point.z );
@@ -87,7 +87,7 @@
 
 				// Line2 ( LineGeometry, LineMaterial )
 
-				var geometry = new LineGeometry();
+				const geometry = new LineGeometry();
 				geometry.setPositions( positions );
 				geometry.setColors( colors );
 
@@ -109,7 +109,7 @@
 
 				// THREE.Line ( THREE.BufferGeometry, THREE.LineBasicMaterial ) - rendered with gl.LINE_STRIP
 
-				var geo = new THREE.BufferGeometry();
+				const geo = new THREE.BufferGeometry();
 				geo.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 				geo.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
@@ -195,7 +195,7 @@
 
 				gui = new GUI();
 
-				var param = {
+				const param = {
 					'line type': 0,
 					'width (px)': 5,
 					'dashed': false,
@@ -203,7 +203,6 @@
 					'dash / gap': 1
 				};
 
-
 				gui.add( param, 'line type', { 'LineGeometry': 0, 'gl.LINE': 1 } ).onChange( function ( val ) {
 
 					switch ( val ) {

examples/webgl_lines_fat_wireframe.html

@@ -25,15 +25,15 @@
 			import { Wireframe } from './jsm/lines/Wireframe.js';
 			import { WireframeGeometry2 } from './jsm/lines/WireframeGeometry2.js';
 
-			var wireframe, renderer, scene, camera, camera2, controls;
-			var wireframe1;
-			var matLine, matLineBasic, matLineDashed;
-			var stats;
-			var gui;
+			let wireframe, renderer, scene, camera, camera2, controls;
+			let wireframe1;
+			let matLine, matLineBasic, matLineDashed;
+			let stats;
+			let gui;
 
 			// viewport
-			var insetWidth;
-			var insetHeight;
+			let insetWidth;
+			let insetHeight;
 
 			init();
 			animate();
@@ -61,9 +61,9 @@
 
 				// Wireframe ( WireframeGeometry2, LineMaterial )
 
-				var geo = new THREE.IcosahedronBufferGeometry( 20, 1 );
+				let geo = new THREE.IcosahedronBufferGeometry( 20, 1 );
 
-				var geometry = new WireframeGeometry2( geo );
+				const geometry = new WireframeGeometry2( geo );
 
 				matLine = new LineMaterial( {
 
@@ -166,7 +166,7 @@
 
 				gui = new GUI();
 
-				var param = {
+				const param = {
 					'line type': 0,
 					'width (px)': 5,
 					'dashed': false,

examples/webgl_lines_sphere.html

@@ -16,12 +16,12 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var SCREEN_WIDTH = window.innerWidth,
+			const SCREEN_WIDTH = window.innerWidth,
 				SCREEN_HEIGHT = window.innerHeight,
 
-				r = 450,
+				r = 450;
 
-				mouseY = 0,
+			let mouseY = 0,
 
 				windowHalfY = window.innerHeight / 2,
 
@@ -37,19 +37,18 @@
 
 				scene = new THREE.Scene();
 
-				var i, line, material, p,
-					parameters = [[ 0.25, 0xff7700, 1 ], [ 0.5, 0xff9900, 1 ], [ 0.75, 0xffaa00, 0.75 ], [ 1, 0xffaa00, 0.5 ], [ 1.25, 0x000833, 0.8 ],
-							       [ 3.0, 0xaaaaaa, 0.75 ], [ 3.5, 0xffffff, 0.5 ], [ 4.5, 0xffffff, 0.25 ], [ 5.5, 0xffffff, 0.125 ]];
+				const parameters = [[ 0.25, 0xff7700, 1 ], [ 0.5, 0xff9900, 1 ], [ 0.75, 0xffaa00, 0.75 ], [ 1, 0xffaa00, 0.5 ], [ 1.25, 0x000833, 0.8 ],
+					[ 3.0, 0xaaaaaa, 0.75 ], [ 3.5, 0xffffff, 0.5 ], [ 4.5, 0xffffff, 0.25 ], [ 5.5, 0xffffff, 0.125 ]];
 
-				var geometry = createGeometry();
+				const geometry = createGeometry();
 
-				for ( i = 0; i < parameters.length; ++ i ) {
+				for ( let i = 0; i < parameters.length; ++ i ) {
 
-					p = parameters[ i ];
+					const p = parameters[ i ];
 
-					material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ] } );
+					const material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ] } );
 
-					line = new THREE.LineSegments( geometry, material );
+					const line = new THREE.LineSegments( geometry, material );
 					line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
 					line.userData.originalScale = p[ 0 ];
 					line.rotation.y = Math.random() * Math.PI;
@@ -74,7 +73,7 @@
 
 				setInterval( function () {
 
-					var geometry = createGeometry();
+					const geometry = createGeometry();
 
 					scene.traverse( function ( object ) {
 
@@ -93,12 +92,12 @@
 
 			function createGeometry() {
 
-				var geometry = new THREE.BufferGeometry();
-				var vertices = [];
+				const geometry = new THREE.BufferGeometry();
+				const vertices = [];
 
-				var vertex = new THREE.Vector3();
+				const vertex = new THREE.Vector3();
 
-				for ( var i = 0; i < 1500; i ++ ) {
+				for ( let i = 0; i < 1500; i ++ ) {
 
 					vertex.x = Math.random() * 2 - 1;
 					vertex.y = Math.random() * 2 - 1;
@@ -156,11 +155,11 @@
 
 				renderer.render( scene, camera );
 
-				var time = Date.now() * 0.0001;
+				const time = Date.now() * 0.0001;
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
+				for ( let i = 0; i < scene.children.length; i ++ ) {
 
-					var object = scene.children[ i ];
+					const object = scene.children[ i ];
 
 					if ( object.isLine ) {
 
@@ -168,7 +167,7 @@
 
 						if ( i < 5 ) {
 
-							var scale = object.userData.originalScale * ( i / 5 + 1 ) * ( 1 + 0.5 * Math.sin( 7 * time ) );
+							const scale = object.userData.originalScale * ( i / 5 + 1 ) * ( 1 + 0.5 * Math.sin( 7 * time ) );
 
 							object.scale.x = object.scale.y = object.scale.z = scale;
 

examples/webgl_lod.html

@@ -18,11 +18,11 @@
 
 			import { FlyControls } from './jsm/controls/FlyControls.js';
 
-			var container;
+			let container;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer, controls;
 
-			var controls, clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -38,15 +38,15 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
 
-				var light = new THREE.PointLight( 0xff2200 );
-				light.position.set( 0, 0, 0 );
-				scene.add( light );
+				const pointLight = new THREE.PointLight( 0xff2200 );
+				pointLight.position.set( 0, 0, 0 );
+				scene.add( pointLight );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 0, 1 ).normalize();
-				scene.add( light );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				dirLight.position.set( 0, 0, 1 ).normalize();
+				scene.add( dirLight );
 
-				var geometry = [
+				const geometry = [
 
 					[ new THREE.IcosahedronBufferGeometry( 100, 16 ), 50 ],
 					[ new THREE.IcosahedronBufferGeometry( 100, 8 ), 300 ],
@@ -56,17 +56,15 @@
 
 				];
 
-				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: true } );
+				const material = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: true } );
 
-				var i, j, mesh, lod;
+				for ( let j = 0; j < 1000; j ++ ) {
 
-				for ( j = 0; j < 1000; j ++ ) {
+					const lod = new THREE.LOD();
 
-					lod = new THREE.LOD();
+					for ( let i = 0; i < geometry.length; i ++ ) {
 
-					for ( i = 0; i < geometry.length; i ++ ) {
-
-						mesh = new THREE.Mesh( geometry[ i ][ 0 ], material );
+						const mesh = new THREE.Mesh( geometry[ i ][ 0 ], material );
 						mesh.scale.set( 1.5, 1.5, 1.5 );
 						mesh.updateMatrix();
 						mesh.matrixAutoUpdate = false;

examples/webgl_marchingcubes.html

@@ -26,20 +26,20 @@
 		import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
 		import { ToonShader1, ToonShader2, ToonShaderHatching, ToonShaderDotted } from './jsm/shaders/ToonShader.js';
 
-		var container, stats;
+		let container, stats;
 
-		var camera, scene, renderer;
+		let camera, scene, renderer;
 
-		var materials, current_material;
+		let materials, current_material;
 
-		var light, pointLight, ambientLight;
+		let light, pointLight, ambientLight;
 
-		var effect, resolution;
+		let effect, resolution;
 
-		var effectController;
+		let effectController;
 
-		var time = 0;
-		var clock = new THREE.Clock();
+		let time = 0;
+		const clock = new THREE.Clock();
 
 		init();
 		animate();
@@ -99,7 +99,7 @@
 
 			// CONTROLS
 
-			var controls = new OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.minDistance = 500;
 			controls.maxDistance = 5000;
 
@@ -133,32 +133,32 @@
 
 			// environment map
 
-			var path = "textures/cube/SwedishRoyalCastle/";
-			var format = '.jpg';
-			var urls = [
+			const path = "textures/cube/SwedishRoyalCastle/";
+			const format = '.jpg';
+			const urls = [
 				path + 'px' + format, path + 'nx' + format,
 				path + 'py' + format, path + 'ny' + format,
 				path + 'pz' + format, path + 'nz' + format
 			];
 
-			var cubeTextureLoader = new THREE.CubeTextureLoader();
+			const cubeTextureLoader = new THREE.CubeTextureLoader();
 
-			var reflectionCube = cubeTextureLoader.load( urls );
-			var refractionCube = cubeTextureLoader.load( urls );
+			const reflectionCube = cubeTextureLoader.load( urls );
+			const refractionCube = cubeTextureLoader.load( urls );
 			refractionCube.mapping = THREE.CubeRefractionMapping;
 
 			// toons
 
-			var toonMaterial1 = createShaderMaterial( ToonShader1, light, ambientLight );
-			var toonMaterial2 = createShaderMaterial( ToonShader2, light, ambientLight );
-			var hatchingMaterial = createShaderMaterial( ToonShaderHatching, light, ambientLight );
-			var dottedMaterial = createShaderMaterial( ToonShaderDotted, light, ambientLight );
+			const toonMaterial1 = createShaderMaterial( ToonShader1, light, ambientLight );
+			const toonMaterial2 = createShaderMaterial( ToonShader2, light, ambientLight );
+			const hatchingMaterial = createShaderMaterial( ToonShaderHatching, light, ambientLight );
+			const dottedMaterial = createShaderMaterial( ToonShaderDotted, light, ambientLight );
 
-			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;
 
-			var materials = {
+			const materials = {
 
 				"chrome": {
 					m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
@@ -233,12 +233,12 @@
 
 		function createShaderMaterial( shader, light, ambientLight ) {
 
-			var u = THREE.UniformsUtils.clone( shader.uniforms );
+			const u = THREE.UniformsUtils.clone( shader.uniforms );
 
-			var vs = shader.vertexShader;
-			var fs = shader.fragmentShader;
+			const vs = shader.vertexShader;
+			const fs = shader.fragmentShader;
 
-			var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
+			const material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
 
 			material.uniforms[ "uDirLightPos" ].value = light.position;
 			material.uniforms[ "uDirLightColor" ].value = light.color;
@@ -253,18 +253,18 @@
 
 		function setupGui() {
 
-			var createHandler = function ( id ) {
+			const createHandler = function ( id ) {
 
 				return function () {
 
-					var mat_old = materials[ current_material ];
+					const mat_old = materials[ current_material ];
 					mat_old.h = m_h.getValue();
 					mat_old.s = m_s.getValue();
 					mat_old.l = m_l.getValue();
 
 					current_material = id;
 
-					var mat = materials[ id ];
+					const mat = materials[ id ];
 					effect.material = mat.m;
 
 					m_h.setValue( mat.h );
@@ -307,15 +307,15 @@
 
 			};
 
-			var h, m_h, m_s, m_l;
+			let h;
 
-			var gui = new GUI();
+			const gui = new GUI();
 
 			// material (type)
 
 			h = gui.addFolder( "Materials" );
 
-			for ( var m in materials ) {
+			for ( const m in materials ) {
 
 				effectController[ m ] = createHandler( m );
 				h.add( effectController, m ).name( m );
@@ -326,9 +326,9 @@
 
 			h = gui.addFolder( "Material color" );
 
-			m_h = h.add( effectController, "hue", 0.0, 1.0, 0.025 );
-			m_s = h.add( effectController, "saturation", 0.0, 1.0, 0.025 );
-			m_l = h.add( effectController, "lightness", 0.0, 1.0, 0.025 );
+			const m_h = h.add( effectController, "hue", 0.0, 1.0, 0.025 );
+			const m_s = h.add( effectController, "saturation", 0.0, 1.0, 0.025 );
+			const m_l = h.add( effectController, "lightness", 0.0, 1.0, 0.025 );
 
 			// light (point)
 
@@ -369,8 +369,7 @@
 
 			// fill the field with some metaballs
 
-			var i, ballx, bally, ballz, subtract, strength;
-			var rainbow = [
+			const rainbow = [
 				new THREE.Color( 0xff0000 ),
 				new THREE.Color( 0xff7f00 ),
 				new THREE.Color( 0xffff00 ),
@@ -379,14 +378,14 @@
 				new THREE.Color( 0x4b0082 ),
 				new THREE.Color( 0x9400d3 )
 			];
-			subtract = 12;
-			strength = 1.2 / ( ( Math.sqrt( numblobs ) - 1 ) / 4 + 1 );
+			const subtract = 12;
+			const strength = 1.2 / ( ( Math.sqrt( numblobs ) - 1 ) / 4 + 1 );
 
-			for ( i = 0; i < numblobs; i ++ ) {
+			for ( let i = 0; i < numblobs; i ++ ) {
 
-				ballx = Math.sin( i + 1.26 * time * ( 1.03 + 0.5 * Math.cos( 0.21 * i ) ) ) * 0.27 + 0.5;
-				bally = Math.abs( Math.cos( i + 1.12 * time * Math.cos( 1.22 + 0.1424 * i ) ) ) * 0.77; // dip into the floor
-				ballz = Math.cos( i + 1.32 * time * 0.1 * Math.sin( ( 0.92 + 0.53 * i ) ) ) * 0.27 + 0.5;
+				const ballx = Math.sin( i + 1.26 * time * ( 1.03 + 0.5 * Math.cos( 0.21 * i ) ) ) * 0.27 + 0.5;
+				const bally = Math.abs( Math.cos( i + 1.12 * time * Math.cos( 1.22 + 0.1424 * i ) ) ) * 0.77; // dip into the floor
+				const ballz = Math.cos( i + 1.32 * time * 0.1 * Math.sin( ( 0.92 + 0.53 * i ) ) ) * 0.27 + 0.5;
 
 				if ( current_material === 'multiColors' ) {
 
@@ -419,7 +418,7 @@
 
 		function render() {
 
-			var delta = clock.getDelta();
+			const delta = clock.getDelta();
 
 			time += delta * effectController.speed * 0.5;