Examples: More clean up.

examples/webgl2_buffergeometry_attributes_integer.html

@@ -33,11 +33,13 @@
 
 			uniform sampler2D uTextures[ 3 ];
 
+			out vec4 outColor;
+
 			void main()	{
 
-				if ( vIndex == 0 ) gl_FragColor = texture( uTextures[ 0 ], vUv );
-				else if ( vIndex == 1 ) gl_FragColor = texture( uTextures[ 1 ], vUv );
-				else if ( vIndex == 2 ) gl_FragColor = texture( uTextures[ 2 ], vUv );
+				if ( vIndex == 0 ) outColor = texture( uTextures[ 0 ], vUv );
+				else if ( vIndex == 1 ) outColor = texture( uTextures[ 1 ], vUv );
+				else if ( vIndex == 2 ) outColor = texture( uTextures[ 2 ], vUv );
 
 			}
 		</script>
@@ -46,7 +48,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer, mesh;
+			let camera, scene, renderer, mesh;
 
 			init();
 			animate();
@@ -62,36 +64,36 @@
 
 				// geometry
 
-				var triangles = 10000;
+				const triangles = 10000;
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
-				var positions = [];
-				var uvs = [];
-				var textureIndices = [];
+				const positions = [];
+				const uvs = [];
+				const textureIndices = [];
 
-				var n = 800, n2 = n / 2; // triangles spread in the cube
-				var d = 50, d2 = d / 2; // individual triangle size
+				const n = 800, n2 = n / 2; // triangles spread in the cube
+				const d = 50, d2 = d / 2; // individual triangle size
 
-				for ( var i = 0; i < triangles; i ++ ) {
+				for ( let i = 0; i < triangles; i ++ ) {
 
 					// positions
 
-					var x = Math.random() * n - n2;
-					var y = Math.random() * n - n2;
-					var z = Math.random() * n - n2;
+					const x = Math.random() * n - n2;
+					const y = Math.random() * n - n2;
+					const z = Math.random() * n - n2;
 
-					var ax = x + Math.random() * d - d2;
-					var ay = y + Math.random() * d - d2;
-					var az = z + Math.random() * d - d2;
+					const ax = x + Math.random() * d - d2;
+					const ay = y + Math.random() * d - d2;
+					const az = z + Math.random() * d - d2;
 
-					var bx = x + Math.random() * d - d2;
-					var by = y + Math.random() * d - d2;
-					var bz = z + Math.random() * d - d2;
+					const bx = x + Math.random() * d - d2;
+					const by = y + Math.random() * d - d2;
+					const bz = z + Math.random() * d - d2;
 
-					var cx = x + Math.random() * d - d2;
-					var cy = y + Math.random() * d - d2;
-					var cz = z + Math.random() * d - d2;
+					const cx = x + Math.random() * d - d2;
+					const cy = y + Math.random() * d - d2;
+					const cz = z + Math.random() * d - d2;
 
 					positions.push( ax, ay, az );
 					positions.push( bx, by, bz );
@@ -105,7 +107,7 @@
 
 					// texture indices
 
-					var t = i % 3;
+					const t = i % 3;
 					textureIndices.push( t, t, t );
 
 				}
@@ -118,13 +120,13 @@
 
 				// material
 
-				var loader = new THREE.TextureLoader();
+				const loader = new THREE.TextureLoader();
 
-				var map1 = loader.load( 'textures/crate.gif' );
-				var map2 = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
-				var map3 = loader.load( 'textures/terrain/grasslight-big.jpg' );
+				const map1 = loader.load( 'textures/crate.gif' );
+				const map2 = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
+				const map3 = loader.load( 'textures/terrain/grasslight-big.jpg' );
 
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 					uniforms: {
 						uTextures: {
 							value: [ map1, map2, map3 ]
@@ -132,7 +134,8 @@
 					},
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-					side: THREE.DoubleSide
+					side: THREE.DoubleSide,
+					glslVersion: THREE.GLSL3
 				} );
 
 				// mesh
@@ -152,7 +155,7 @@
 
 				requestAnimationFrame( animate );
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				mesh.rotation.x = time * 0.25;
 				mesh.rotation.y = time * 0.5;

examples/webgl2_materials_texture2darray.html

@@ -31,12 +31,14 @@
 	in vec2 vUv;
 	uniform int depth;
 
+	out vec4 outColor;
+
 	void main() {
 
 		vec4 color = texture( diffuse, vec3( vUv, depth ) );
 
 		// lighten a bit
-		gl_FragColor = vec4( color.rrr * 1.5, 1.0 );
+		outColor = vec4( color.rrr * 1.5, 1.0 );
 
 	}
 	</script>
@@ -64,19 +66,19 @@
 
 			}
 
-			var camera, scene, mesh, renderer, stats;
+			let camera, scene, mesh, renderer, stats;
 
-			var planeWidth = 50;
-			var planeHeight = 50;
+			const planeWidth = 50;
+			const planeHeight = 50;
 
-			var depthStep = 0.4;
+			let depthStep = 0.4;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
@@ -90,24 +92,25 @@
 					.setResponseType( 'arraybuffer' )
 					.load( 'textures/3d/head256x256x109.zip', function ( data ) {
 
-						var zip = new JSZip( data );
-						var array = zip.files[ 'head256x256x109' ].asUint8Array();
+						const zip = new JSZip( data );
+						const array = zip.files[ 'head256x256x109' ].asUint8Array();
 
-						var texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
+						const texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
 						texture.format = THREE.RedFormat;
 						texture.type = THREE.UnsignedByteType;
 
-						var material = new THREE.ShaderMaterial( {
+						const material = new THREE.ShaderMaterial( {
 							uniforms: {
 								diffuse: { value: texture },
 								depth: { value: 55 },
 								size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
 							},
 							vertexShader: document.getElementById( 'vs' ).textContent.trim(),
-							fragmentShader: document.getElementById( 'fs' ).textContent.trim()
+							fragmentShader: document.getElementById( 'fs' ).textContent.trim(),
+							glslVersion: THREE.GLSL3
 						} );
 
-						var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
+						const geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
 
 						mesh = new THREE.Mesh( geometry, material );
 
@@ -144,7 +147,7 @@
 
 				if ( mesh ) {
 
-					var value = mesh.material.uniforms[ "depth" ].value;
+					let value = mesh.material.uniforms[ "depth" ].value;
 
 					value += depthStep;
 

examples/webgl2_materials_texture3d.html

@@ -28,7 +28,7 @@
 
 		}
 
-		var renderer,
+		let renderer,
 			scene,
 			camera,
 			controls,
@@ -49,8 +49,8 @@
 			document.body.appendChild( renderer.domElement );
 
 			// Create camera (The volume renderer does not work very well with perspective yet)
-			var h = 512; // frustum height
-			var aspect = window.innerWidth / window.innerHeight;
+			const h = 512; // frustum height
+			const aspect = window.innerWidth / window.innerHeight;
 			camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
 			camera.position.set( 0, 0, 128 );
 			camera.up.set( 0, 0, 1 ); // In our data, z is up
@@ -66,11 +66,11 @@
 			// scene.add( new AxesHelper( 128 ) );
 
 			// Lighting is baked into the shader a.t.m.
-			// var dirLight = new DirectionalLight( 0xffffff );
+			// let dirLight = new DirectionalLight( 0xffffff );
 
 			// The gui for interaction
 			volconfig = { clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis' };
-			var gui = new GUI();
+			const gui = new GUI();
 			gui.add( volconfig, 'clim1', 0, 1, 0.01 ).onChange( updateUniforms );
 			gui.add( volconfig, 'clim2', 0, 1, 0.01 ).onChange( updateUniforms );
 			gui.add( volconfig, 'colormap', { gray: 'gray', viridis: 'viridis' } ).onChange( updateUniforms );
@@ -84,7 +84,7 @@
 				// THREEJS will select R32F (33326) based on the THREE.RedFormat and THREE.FloatType.
 				// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
 				// TODO: look the dtype up in the volume metadata
-				var texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
+				const texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
 				texture.format = THREE.RedFormat;
 				texture.type = THREE.FloatType;
 				texture.minFilter = texture.magFilter = THREE.LinearFilter;
@@ -97,9 +97,9 @@
 				};
 
 				// Material
-				var shader = VolumeRenderShader1;
+				const shader = VolumeRenderShader1;
 
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+				const uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
 				uniforms[ "u_data" ].value = texture;
 				uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
@@ -116,10 +116,10 @@
 				} );
 
 				// THREE.Mesh
-				var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
+				const geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
 				geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				render();
@@ -145,9 +145,9 @@
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			var aspect = window.innerWidth / window.innerHeight;
+			const aspect = window.innerWidth / window.innerHeight;
 
-			var frustumHeight = camera.top - camera.bottom;
+			const frustumHeight = camera.top - camera.bottom;
 
 			camera.left = - frustumHeight * aspect / 2;
 			camera.right = frustumHeight * aspect / 2;

examples/webgl2_multisampled_renderbuffers.html

@@ -49,9 +49,9 @@
 
 			}
 
-			var camera, scene, renderer, clock, group, container;
+			let camera, renderer, clock, group, container;
 
-			var composer1, composer2;
+			let composer1, composer2;
 
 			init();
 			animate();
@@ -63,7 +63,7 @@
 				camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 2000 );
 				camera.position.z = 500;
 
-				scene = new THREE.Scene();
+				const scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );
 
@@ -71,7 +71,7 @@
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x222222, 1.5 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x222222, 1.5 );
 				hemiLight.position.set( 1, 1, 1 );
 				scene.add( hemiLight );
 
@@ -79,13 +79,13 @@
 
 				group = new THREE.Group();
 
-				var geometry = new THREE.SphereBufferGeometry( 10, 64, 40 );
-				var material = new THREE.MeshLambertMaterial( { color: 0xee0808 } );
-				var material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+				const geometry = new THREE.SphereBufferGeometry( 10, 64, 40 );
+				const material = new THREE.MeshLambertMaterial( { color: 0xee0808 } );
+				const material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-				for ( var i = 0; i < 10; i ++ ) {
+				for ( let i = 0; i < 10; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 600 - 300;
 					mesh.position.y = Math.random() * 600 - 300;
 					mesh.position.z = Math.random() * 600 - 300;
@@ -94,7 +94,7 @@
 					mesh.scale.setScalar( Math.random() * 5 + 5 );
 					group.add( mesh );
 
-					var mesh2 = new THREE.Mesh( geometry, material2 );
+					const mesh2 = new THREE.Mesh( geometry, material2 );
 					mesh2.position.copy( mesh.position );
 					mesh2.rotation.copy( mesh.rotation );
 					mesh2.scale.copy( mesh.scale );
@@ -114,15 +114,15 @@
 
 				//
 
-				var parameters = {
+				const parameters = {
 					format: THREE.RGBFormat
 				};
 
-				var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
-				var renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, parameters );
+				const size = renderer.getDrawingBufferSize( new THREE.Vector2() );
+				const renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, parameters );
 
-				var renderPass = new RenderPass( scene, camera );
-				var copyPass = new ShaderPass( CopyShader );
+				const renderPass = new RenderPass( scene, camera );
+				const copyPass = new ShaderPass( CopyShader );
 
 				//
 
@@ -157,7 +157,7 @@
 
 				requestAnimationFrame( animate );
 
-				var halfWidth = container.offsetWidth / 2;
+				const halfWidth = container.offsetWidth / 2;
 
 				group.rotation.y += clock.getDelta() * 0.1;
 

examples/webgl_materials_nodes.html

@@ -27,18 +27,19 @@
 
 			import * as Nodes from './jsm/nodes/Nodes.js';
 
-			var container = document.getElementById( 'container' );
-
-			var renderer, scene, lightGroup, camera, clock = new THREE.Clock(), fov = 50;
-			var frame = new Nodes.NodeFrame();
-			var teapot, mesh;
-			var controls;
-			var move = false;
-			var rtTexture, rtMaterial;
-			var gui;
-			var library = {};
-			var serialized = false;
-			var textures = {
+			const container = document.getElementById( 'container' );
+
+			let renderer, scene, lightGroup, camera;
+			const clock = new THREE.Clock(), fov = 50;
+			const frame = new Nodes.NodeFrame();
+			let teapot, mesh;
+			let controls;
+			let move = false;
+			let rtTexture, rtMaterial;
+			let gui;
+			const library = {};
+			let serialized = false;
+			const textures = {
 				brick: { url: 'textures/brick_diffuse.jpg' },
 				grass: { url: 'textures/terrain/grasslight-big.jpg' },
 				grassNormal: { url: 'textures/terrain/grasslight-big-nm.jpg' },
@@ -48,11 +49,11 @@
 				spherical: { url: 'textures/envmap.png' }
 			};
 
-			var param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'mesh-standard' };
+			const param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'mesh-standard' };
 
 			function getTexture( name ) {
 
-				var texture = textures[ name ].texture;
+				let texture = textures[ name ].texture;
 
 				if ( ! texture ) {
 
@@ -67,7 +68,7 @@
 
 			}
 
-			var premTexture, pmremCube;
+			let premTexture, pmremCube;
 
 			function updatePREM( textureCube ) {
 
@@ -75,11 +76,11 @@
 
 				if ( ! pmremCube || ! renderer ) return;
 
-				var minFilter = pmremCube.minFilter;
-				var magFilter = pmremCube.magFilter;
-				var generateMipmaps = pmremCube.generateMipmaps;
+				const minFilter = pmremCube.minFilter;
+				const magFilter = pmremCube.magFilter;
+				const generateMipmaps = pmremCube.generateMipmaps;
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				premTexture = pmremGenerator.fromCubemap( pmremCube ).texture;
 				pmremGenerator.dispose();
 
@@ -92,17 +93,17 @@
 
 			}
 
-			var cubemap = function () {
+			const cubemap = function () {
 
-				var path = "textures/cube/Park2/";
-				var format = '.jpg';
-				var urls = [
+				const path = "textures/cube/Park2/";
+				const format = '.jpg';
+				const urls = [
 					path + 'posx' + format, path + 'negx' + format,
 					path + 'posy' + format, path + 'negy' + format,
 					path + 'posz' + format, path + 'negz' + format
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls, updatePREM );
+				const textureCube = new THREE.CubeTextureLoader().load( urls, updatePREM );
 
 				library[ textureCube.uuid ] = textureCube;
 
@@ -137,7 +138,7 @@
 				lightGroup = new THREE.Group();
 				scene.add( lightGroup );
 
-				var light;
+				let light;
 
 				lightGroup.add( new THREE.AmbientLight( 0x464646 ) );
 
@@ -236,7 +237,7 @@
 
 			function addGui( name, value, callback, isColor, min, max ) {
 
-				var node;
+				let node;
 
 				param[ name ] = value;
 
@@ -3260,7 +3261,7 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth, height = window.innerHeight;
+				const width = window.innerWidth, height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -3286,18 +3287,18 @@
 
 				// gui
 
-				var div = document.getElementById( 'serialize' );
+				const div = document.getElementById( 'serialize' );
 				div.textContent = "Serialize and apply";
 
 			}
 
 			function serialize() {
 
-				var json = mesh.material.toJSON();
+				const json = mesh.material.toJSON();
 
 				// replace uuid to url (facilitates the load of textures using url otherside uuid) e.g:
 
-				var cloud = getTexture( "cloud" );
+				const cloud = getTexture( "cloud" );
 
 				NodeMaterialLoaderUtils.replaceUUID( json, cloud, "cloud" );
 
@@ -3305,7 +3306,7 @@
 
 				// --
 
-				var jsonStr = JSON.stringify( json );
+				const jsonStr = JSON.stringify( json );
 
 				console.log( jsonStr );
 
@@ -3318,7 +3319,7 @@
 
 				// gui
 
-				var div = document.getElementById( 'serialize' );
+				const div = document.getElementById( 'serialize' );
 				div.textContent = "Click to reset - JSON Generate: " + ( jsonStr.length / 1024 ).toFixed( 3 ) + "kB";
 
 				if ( gui ) gui.destroy();
@@ -3329,7 +3330,7 @@
 
 			function animate() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( move ) {
 

examples/webgl_shading_physical.html

@@ -22,23 +22,25 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var container, stats;
+			let stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var mesh;
+			let mesh;
 
-			var controls;
+			let controls;
 
-			var cubeCamera;
+			let cubeCamera;
 
-			var sunLight, pointLight, ambientLight;
+			let sunLight, pointLight, ambientLight;
 
-			var mixer;
+			let mixer;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
-			var gui, shadowCameraHelper, shadowConfig = {
+			let gui, shadowCameraHelper;
+
+			const shadowConfig = {
 
 				shadowCameraVisible: false,
 				shadowCameraNear: 750,
@@ -52,7 +54,7 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				// CAMERA
@@ -67,7 +69,7 @@
 
 				// CUBE CAMERA
 
-				var cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, {
+				const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, {
 					format: THREE.RGBFormat,
 					generateMipmaps: true,
 					minFilter: THREE.LinearMipmapLinearFilter,
@@ -76,36 +78,36 @@
 				cubeCamera = new THREE.CubeCamera( 1, 10000, cubeRenderTarget );
 
 				// TEXTURES
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
-				var textureSquares = textureLoader.load( "textures/patterns/bright_squares256.png" );
+				const textureSquares = textureLoader.load( "textures/patterns/bright_squares256.png" );
 				textureSquares.repeat.set( 50, 50 );
 				textureSquares.wrapS = textureSquares.wrapT = THREE.RepeatWrapping;
 				textureSquares.magFilter = THREE.NearestFilter;
 				textureSquares.encoding = THREE.sRGBEncoding;
 
-				var textureNoiseColor = textureLoader.load( "textures/disturb.jpg" );
+				const textureNoiseColor = textureLoader.load( "textures/disturb.jpg" );
 				textureNoiseColor.repeat.set( 1, 1 );
 				textureNoiseColor.wrapS = textureNoiseColor.wrapT = THREE.RepeatWrapping;
 				textureNoiseColor.encoding = THREE.sRGBEncoding;
 
-				var textureLava = textureLoader.load( "textures/lava/lavatile.jpg" );
+				const textureLava = textureLoader.load( "textures/lava/lavatile.jpg" );
 				textureLava.repeat.set( 6, 2 );
 				textureLava.wrapS = textureLava.wrapT = THREE.RepeatWrapping;
 				textureLava.encoding = THREE.sRGBEncoding;
 
 				// GROUND
 
-				var groundMaterial = new THREE.MeshPhongMaterial( {
+				const groundMaterial = new THREE.MeshPhongMaterial( {
 					shininess: 80,
 					color: 0xffffff,
 					specular: 0xffffff,
 					map: textureSquares
 				} );
 
-				var planeGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const planeGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-				var ground = new THREE.Mesh( planeGeometry, groundMaterial );
+				const ground = new THREE.Mesh( planeGeometry, groundMaterial );
 				ground.position.set( 0, 0, 0 );
 				ground.rotation.x = - Math.PI / 2;
 				ground.scale.set( 1000, 1000, 1000 );
@@ -114,15 +116,15 @@
 
 				// MATERIALS
 
-				var materialLambert = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
-				var materialPhong = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
-				var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeRenderTarget.texture } );
+				const materialLambert = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
+				const materialPhong = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
+				const materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeRenderTarget.texture } );
 
 				// OBJECTS
 
-				var sphereGeometry = new THREE.SphereBufferGeometry( 100, 64, 32 );
-				var torusGeometry = new THREE.TorusBufferGeometry( 240, 60, 32, 64 );
-				var cubeGeometry = new THREE.BoxBufferGeometry( 150, 150, 150 );
+				const sphereGeometry = new THREE.SphereBufferGeometry( 100, 64, 32 );
+				const torusGeometry = new THREE.TorusBufferGeometry( 240, 60, 32, 64 );
+				const cubeGeometry = new THREE.BoxBufferGeometry( 150, 150, 150 );
 
 				addObject( torusGeometry, materialPhong, 0, 100, 0, 0 );
 				addObject( cubeGeometry, materialLambert, 350, 75, 300, 0 );
@@ -132,7 +134,7 @@
 
 				function addObjectColor( geometry, color, x, y, z, ry ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
+					const material = new THREE.MeshPhongMaterial( { color: 0xffffff } );
 
 					return addObject( geometry, material, x, y, z, ry );
 
@@ -140,7 +142,7 @@
 
 				function addObject( geometry, material, x, y, z, ry ) {
 
-					var tmpMesh = new THREE.Mesh( geometry, material );
+					const tmpMesh = new THREE.Mesh( geometry, material );
 
 					tmpMesh.material.color.offsetHSL( 0.1, - 0.1, 0 );
 
@@ -157,9 +159,9 @@
 
 				}
 
-				var bigCube = new THREE.BoxBufferGeometry( 50, 500, 50 );
-				var midCube = new THREE.BoxBufferGeometry( 50, 200, 50 );
-				var smallCube = new THREE.BoxBufferGeometry( 100, 100, 100 );
+				const bigCube = new THREE.BoxBufferGeometry( 50, 500, 50 );
+				const midCube = new THREE.BoxBufferGeometry( 50, 200, 50 );
+				const smallCube = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
 				addObjectColor( bigCube, 0xff0000, - 500, 250, 0, 0 );
 				addObjectColor( smallCube, 0xff0000, - 500, 50, - 150, 0 );
@@ -180,17 +182,17 @@
 
 				// MORPHS
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 
 				loader.load( "models/gltf/SittingBox.glb", function ( gltf ) {
 
-					var mesh = gltf.scene.children[ 0 ];
+					const mesh = gltf.scene.children[ 0 ];
 
 					mixer = new THREE.AnimationMixer( mesh );
 
 					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 10 ).play();
 
-					var s = 200;
+					const s = 200;
 					mesh.scale.set( s, s, s );
 
 					mesh.castShadow = true;
@@ -270,7 +272,7 @@
 
 				// SHADOW
 
-				var shadowGUI = gui.addFolder( "Shadow" );
+				const shadowGUI = gui.addFolder( "Shadow" );
 
     		shadowGUI.add( shadowConfig, 'shadowCameraVisible' ).onChange( function () {
 
@@ -333,7 +335,7 @@
 
 				// update
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				controls.update();
 

examples/webgl_shadow_contact.html

@@ -28,15 +28,15 @@
 			import { HorizontalBlurShader } from './jsm/shaders/HorizontalBlurShader.js';
 			import { VerticalBlurShader } from './jsm/shaders/VerticalBlurShader.js';
 
-			var camera, scene, renderer, stats, gui;
+			let camera, scene, renderer, stats, gui;
 
-			var meshes = [];
+			const meshes = [];
 
 			const PLANE_WIDTH = 2.5;
 			const PLANE_HEIGHT = 2.5;
 			const CAMERA_HEIGHT = 0.3;
 
-			var state = {
+			const state = {
 				shadow: {
 					blur: 3.5,
 					darkness: 1,
@@ -49,9 +49,9 @@
 				showWireframe: false,
 			};
 
-			var shadowGroup, renderTarget, renderTargetBlur, shadowCamera, cameraHelper, depthMaterial, horizontalBlurMaterial, verticalBlurMaterial;
+			let shadowGroup, renderTarget, renderTargetBlur, shadowCamera, cameraHelper, depthMaterial, horizontalBlurMaterial, verticalBlurMaterial;
 
-			var plane, blurPlane, fillPlane;
+			let plane, blurPlane, fillPlane;
 
 			init();
 			animate();
@@ -71,20 +71,20 @@
 
 				// add the example meshes
 
-				var geometries = [
+				const geometries = [
 					new THREE.BoxBufferGeometry( 0.4, 0.4, 0.4 ),
 					new THREE.IcosahedronBufferGeometry( 0.3 ),
 					new THREE.TorusKnotBufferGeometry( 0.4, 0.05, 256, 24, 1, 3 )
 				];
 
-				var material = new THREE.MeshNormalMaterial();
+				const material = new THREE.MeshNormalMaterial();
 
-				for ( var i = 0, l = geometries.length; i < l; i ++ ) {
+				for ( let i = 0, l = geometries.length; i < l; i ++ ) {
 
-					var angle = ( i / l ) * Math.PI * 2;
+					const angle = ( i / l ) * Math.PI * 2;
 
-					var geometry = geometries[ i ];
-					var mesh = new THREE.Mesh( geometry, material );
+					const geometry = geometries[ i ];
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.y = 0.1;
 					mesh.position.x = Math.cos( angle ) / 2.0;
 					mesh.position.z = Math.sin( angle ) / 2.0;
@@ -110,13 +110,13 @@
 
 
 				// make a plane and make it face up
-				var planeGeometry = new THREE.PlaneBufferGeometry( PLANE_WIDTH, PLANE_HEIGHT ).rotateX( Math.PI / 2 );
-				var material = new THREE.MeshBasicMaterial( {
+				const planeGeometry = new THREE.PlaneBufferGeometry( PLANE_WIDTH, PLANE_HEIGHT ).rotateX( Math.PI / 2 );
+				const planeMaterial = new THREE.MeshBasicMaterial( {
 					map: renderTarget.texture,
 					opacity: state.shadow.opacity,
 					transparent: true,
 				} );
-				plane = new THREE.Mesh( planeGeometry, material );
+				plane = new THREE.Mesh( planeGeometry, planeMaterial );
 				shadowGroup.add( plane );
 
 				// the y from the texture is flipped!
@@ -128,12 +128,12 @@
 				shadowGroup.add( blurPlane );
 
 				// the plane with the color of the ground
-				var material = new THREE.MeshBasicMaterial( {
+				const fillPlaneMaterial = new THREE.MeshBasicMaterial( {
 					color: state.plane.color,
 					opacity: state.plane.opacity,
 					transparent: true,
 				} );
-				fillPlane = new THREE.Mesh( planeGeometry, material );
+				fillPlane = new THREE.Mesh( planeGeometry, fillPlaneMaterial );
 				fillPlane.rotateX( Math.PI );
 				fillPlane.position.y -= 0.00001;
 				shadowGroup.add( fillPlane );
@@ -173,9 +173,9 @@
 				//
 
 				gui = new GUI();
-				var shadowFolder = gui.addFolder( 'shadow' );
+				const shadowFolder = gui.addFolder( 'shadow' );
 				shadowFolder.open();
-				var planeFolder = gui.addFolder( 'plane' );
+				const planeFolder = gui.addFolder( 'plane' );
 				planeFolder.open();
 
 
@@ -278,7 +278,7 @@
 				//
 
 				// remove the background
-				var initialBackground = scene.background;
+				const initialBackground = scene.background;
 				scene.background = null;
 
 				// force the depthMaterial to everything

examples/webgl_shadowmap.html

@@ -25,25 +25,27 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { ShadowMapViewer } from './jsm/utils/ShadowMapViewer.js';
 
-			var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
+			const SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-			var FLOOR = - 250;
+			let SCREEN_WIDTH = window.innerWidth;
+			let SCREEN_HEIGHT = window.innerHeight;
+			const FLOOR = - 250;
 
-			var camera, controls, scene, renderer;
-			var container, stats;
+			let camera, controls, scene, renderer;
+			let container, stats;
 
-			var NEAR = 10, FAR = 3000;
+			const NEAR = 10, FAR = 3000;
 
-			var mixer, morphs = [];
+			let mixer;
 
-			var light;
-			var lightShadowMapViewer;
+			const morphs = [];
 
-			var clock = new THREE.Clock();
+			let light;
+			let lightShadowMapViewer;
 
-			var showHUD = false;
+			const clock = new THREE.Clock();
+
+			let showHUD = false;
 
 			init();
 			animate();
@@ -67,7 +69,7 @@
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0x444444 );
+				const ambient = new THREE.AmbientLight( 0x444444 );
 				scene.add( ambient );
 
 				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 5, 0.3 );
@@ -166,10 +168,10 @@
 
 				// GROUND
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
-				var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffb851 } );
+				const geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffb851 } );
 
-				var ground = new THREE.Mesh( geometry, planeMaterial );
+				const ground = new THREE.Mesh( geometry, planeMaterial );
 
 				ground.position.set( 0, FLOOR, 0 );
 				ground.rotation.x = - Math.PI / 2;
@@ -182,10 +184,10 @@
 
 				// TEXT
 
-				var loader = new THREE.FontLoader();
+				const loader = new THREE.FontLoader();
 				loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
-					var textGeo = new THREE.TextBufferGeometry( "THREE.JS", {
+					const textGeo = new THREE.TextBufferGeometry( "THREE.JS", {
 
 						font: font,
 
@@ -200,11 +202,11 @@
 					} );
 
 					textGeo.computeBoundingBox();
-					var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+					const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
-					var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
+					const textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
 
-					var mesh = new THREE.Mesh( textGeo, textMaterial );
+					const mesh = new THREE.Mesh( textGeo, textMaterial );
 					mesh.position.x = centerOffset;
 					mesh.position.y = FLOOR + 67;
 
@@ -217,25 +219,25 @@
 
 				// CUBES
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
+				const cubes1 = new THREE.Mesh( new THREE.BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
 
-				mesh.position.y = FLOOR - 50;
-				mesh.position.z = 20;
+				cubes1.position.y = FLOOR - 50;
+				cubes1.position.z = 20;
 
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
+				cubes1.castShadow = true;
+				cubes1.receiveShadow = true;
 
-				scene.add( mesh );
+				scene.add( cubes1 );
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
+				const cubes2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
 
-				mesh.position.y = FLOOR - 50;
-				mesh.position.z = 20;
+				cubes2.position.y = FLOOR - 50;
+				cubes2.position.z = 20;
 
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
+				cubes2.castShadow = true;
+				cubes2.receiveShadow = true;
 
-				scene.add( mesh );
+				scene.add( cubes2 );
 
 				// MORPHS
 
@@ -272,13 +274,13 @@
 
 				}
 
-				var loader = new GLTFLoader();
+				const gltfloader = new GLTFLoader();
 
-				loader.load( "models/gltf/Horse.glb", function ( gltf ) {
+				gltfloader.load( "models/gltf/Horse.glb", function ( gltf ) {
 
-					var mesh = gltf.scene.children[ 0 ];
+					const mesh = gltf.scene.children[ 0 ];
 
-					var clip = gltf.animations[ 0 ];
+					const clip = gltf.animations[ 0 ];
 
 					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, 300, true );
 					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, 450, true );
@@ -290,28 +292,28 @@
 
 				} );
 
-				loader.load( "models/gltf/Flamingo.glb", function ( gltf ) {
+				gltfloader.load( "models/gltf/Flamingo.glb", function ( gltf ) {
 
-					var mesh = gltf.scene.children[ 0 ];
-					var clip = gltf.animations[ 0 ];
+					const mesh = gltf.scene.children[ 0 ];
+					const clip = gltf.animations[ 0 ];
 
 					addMorph( mesh, clip, 500, 1, 500 - Math.random() * 500, FLOOR + 350, 40 );
 
 				} );
 
-				loader.load( "models/gltf/Stork.glb", function ( gltf ) {
+				gltfloader.load( "models/gltf/Stork.glb", function ( gltf ) {
 
-					var mesh = gltf.scene.children[ 0 ];
-					var clip = gltf.animations[ 0 ];
+					const mesh = gltf.scene.children[ 0 ];
+					const clip = gltf.animations[ 0 ];
 
 					addMorph( mesh, clip, 350, 1, 500 - Math.random() * 500, FLOOR + 350, 340 );
 
 				} );
 
-				loader.load( "models/gltf/Parrot.glb", function ( gltf ) {
+				gltfloader.load( "models/gltf/Parrot.glb", function ( gltf ) {
 
-					var mesh = gltf.scene.children[ 0 ];
-					var clip = gltf.animations[ 0 ];
+					const mesh = gltf.scene.children[ 0 ];
+					const clip = gltf.animations[ 0 ];
 
 					addMorph( mesh, clip, 450, 0.5, 500 - Math.random() * 500, FLOOR + 300, 700 );
 
@@ -330,13 +332,13 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				mixer.update( delta );
 
-				for ( var i = 0; i < morphs.length; i ++ ) {
+				for ( let i = 0; i < morphs.length; i ++ ) {
 
-					var morph = morphs[ i ];
+					const morph = morphs[ i ];
 
 					morph.position.x += morph.speed * delta;
 

examples/webgl_shadowmap_csm.html

@@ -23,9 +23,9 @@
 			import { CSM } from './jsm/csm/CSM.js';
 			import { CSMHelper } from './jsm/csm/CSMHelper.js';
 
-			var renderer, scene, camera, orthoCamera, controls, csm, csmHelper;
+			let renderer, scene, camera, orthoCamera, controls, csm, csmHelper;
 
-			var params = {
+			const params = {
 				orthographic: false,
 				fade: false,
 				far: 1000,
@@ -49,8 +49,8 @@
 
 			function updateOrthoCamera() {
 
-				var size = controls.target.distanceTo( camera.position );
-				var aspect = camera.aspect;
+				const size = controls.target.distanceTo( camera.position );
+				const aspect = camera.aspect;
 
 				orthoCamera.left = size * aspect / - 2;
 				orthoCamera.right = size * aspect / 2;
@@ -64,6 +64,7 @@
 			}
 
 			function init() {
+
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( '#454e61' );
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 5000 );
@@ -78,13 +79,13 @@
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.maxPolarAngle = Math.PI / 2;
 				camera.position.set( 60, 60, 0 );
-				controls.target = new THREE.Vector3( -100, 10, 0 );
+				controls.target = new THREE.Vector3( - 100, 10, 0 );
 				controls.update();
 
-				var ambientLight = new THREE.AmbientLight( 0xffffff, 0.5 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.5 );
 				scene.add( ambientLight );
 
-				csm = new CSM({
+				csm = new CSM( {
 					maxFar: params.far,
 					cascades: 4,
 					mode: params.mode,
@@ -98,33 +99,33 @@
 				csmHelper.visible = false;
 				scene.add( csmHelper );
 
-				var floorMaterial = new THREE.MeshPhongMaterial( { color: '#252a34' } );
+				const floorMaterial = new THREE.MeshPhongMaterial( { color: '#252a34' } );
 				csm.setupMaterial( floorMaterial );
 
-				var floor = new THREE.Mesh( new THREE.PlaneBufferGeometry( 10000, 10000, 8, 8 ), floorMaterial );
+				const floor = new THREE.Mesh( new THREE.PlaneBufferGeometry( 10000, 10000, 8, 8 ), floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.castShadow = true;
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				var material1 = new THREE.MeshPhongMaterial( { color: '#08d9d6' } );
+				const material1 = new THREE.MeshPhongMaterial( { color: '#08d9d6' } );
 				csm.setupMaterial( material1 );
 
-				var material2 = new THREE.MeshPhongMaterial( { color: '#ff2e63' } );
+				const material2 = new THREE.MeshPhongMaterial( { color: '#ff2e63' } );
 				csm.setupMaterial( material2 );
 
-				var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
+				const geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 
-				for ( var i = 0; i < 40; i ++ ) {
+				for ( let i = 0; i < 40; i ++ ) {
 
-					var cube1 = new THREE.Mesh( geometry, i % 2 === 0 ? material1 : material2 );
+					const cube1 = new THREE.Mesh( geometry, i % 2 === 0 ? material1 : material2 );
 					cube1.castShadow = true;
 					cube1.receiveShadow = true;
 					scene.add( cube1 );
 					cube1.position.set( - i * 25, 20, 30 );
 					cube1.scale.y = Math.random() * 2 + 6;
 
-					var cube2 = new THREE.Mesh( geometry, i % 2 === 0 ? material2 : material1 );
+					const cube2 = new THREE.Mesh( geometry, i % 2 === 0 ? material2 : material1 );
 					cube2.castShadow = true;
 					cube2.receiveShadow = true;
 					scene.add( cube2 );
@@ -133,7 +134,7 @@
 
 				}
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'orthographic' ).onChange( function ( value ) {
 
@@ -142,7 +143,7 @@
 
 				} );
 
-				gui.add( params, 'fade' ).onChange( function ( value ) { 
+				gui.add( params, 'fade' ).onChange( function ( value ) {
 
 					csm.fade = value;
 					csm.updateFrustums();
@@ -189,7 +190,7 @@
 
 				gui.add( params, 'lightNear', 1, 10000 ).name( 'light near' ).onChange( function ( value ) {
 
-					for ( var i = 0; i < csm.lights.length; i ++ ) {
+					for ( let i = 0; i < csm.lights.length; i ++ ) {
 
 						csm.lights[ i ].shadow.camera.near = value;
 						csm.lights[ i ].shadow.camera.updateProjectionMatrix();
@@ -200,7 +201,7 @@
 
 				gui.add( params, 'lightFar', 1, 10000 ).name( 'light far' ).onChange( function ( value ) {
 
-					for ( var i = 0; i < csm.lights.length; i ++ ) {
+					for ( let i = 0; i < csm.lights.length; i ++ ) {
 
 						csm.lights[ i ].shadow.camera.far = value;
 						csm.lights[ i ].shadow.camera.updateProjectionMatrix();
@@ -210,22 +211,22 @@
 				} );
 
 				const helperFolder = gui.addFolder( 'helper' );
-				
+
 				helperFolder.add( csmHelper, 'visible' );
 
-				helperFolder.add( csmHelper, 'displayFrustum' ).onChange( function () { 
+				helperFolder.add( csmHelper, 'displayFrustum' ).onChange( function () {
 
 					csmHelper.updateVisibility();
 
 				} );
 
-				helperFolder.add( csmHelper, 'displayPlanes' ).onChange( function () { 
+				helperFolder.add( csmHelper, 'displayPlanes' ).onChange( function () {
 
 					csmHelper.updateVisibility();
 
 				} );
 
-				helperFolder.add( csmHelper, 'displayShadowBounds' ).onChange( function () { 
+				helperFolder.add( csmHelper, 'displayShadowBounds' ).onChange( function () {
 
 					csmHelper.updateVisibility();
 
@@ -234,7 +235,7 @@
 				helperFolder.add( params, 'autoUpdateHelper' ).name( 'auto update' );
 
 				helperFolder.add( params, 'updateHelper' ).name( 'update' );
-				
+
 				helperFolder.open();
 
 				window.addEventListener( 'resize', function () {
@@ -247,7 +248,8 @@
 
 					renderer.setSize( window.innerWidth, window.innerHeight );
 
-				}, false);
+				}, false );
+
 			}
 
 			function animate() {
@@ -262,20 +264,23 @@
 
 					updateOrthoCamera();
 					csm.updateFrustums();
+
 					if ( params.autoUpdateHelper ) {
-						
+
 						csmHelper.update();
-					
+
 					}
+
 					renderer.render( scene, orthoCamera );
 
 				} else {
-	
+
 					if ( params.autoUpdateHelper ) {
-						
+
 						csmHelper.update();
-					
+
 					}
+
 					renderer.render( scene, camera );
 
 				}

examples/webgl_shadowmap_pcss.html

@@ -122,17 +122,17 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container, stats;
-			var camera, scene, renderer;
+			let stats;
+			let camera, scene, renderer;
 
-			var group;
+			let group;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				// scene
@@ -158,7 +158,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
-				var light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
+				const light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
 				light.position.set( 2, 8, 4 );
 
 				light.castShadow = true;
@@ -176,13 +176,13 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				var geometry = new THREE.SphereBufferGeometry( 0.3, 20, 20 );
+				const geometry = new THREE.SphereBufferGeometry( 0.3, 20, 20 );
 
-				for ( var i = 0; i < 20; i ++ ) {
+				for ( let i = 0; i < 20; i ++ ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff } );
+					const material = new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff } );
 
-					var sphere = new THREE.Mesh( geometry, material );
+					const sphere = new THREE.Mesh( geometry, material );
 					sphere.position.x = Math.random() - 0.5;
 					sphere.position.z = Math.random() - 0.5;
 					sphere.position.normalize();
@@ -196,24 +196,24 @@
 
 				// ground
 
-				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0x404040, specular: 0x111111 } );
+				const groundMaterial = new THREE.MeshPhongMaterial( { color: 0x404040, specular: 0x111111 } );
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000, 8, 8 ), groundMaterial );
-				mesh.rotation.x = - Math.PI / 2;
-				mesh.receiveShadow = true;
-				scene.add( mesh );
+				const ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000, 8, 8 ), groundMaterial );
+				ground.rotation.x = - Math.PI / 2;
+				ground.receiveShadow = true;
+				scene.add( ground );
 
 				// column
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 4, 1 ), groundMaterial );
-				mesh.position.y = 2;
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
-				scene.add( mesh );
+				const column = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 4, 1 ), groundMaterial );
+				column.position.y = 2;
+				column.castShadow = true;
+				column.receiveShadow = true;
+				scene.add( column );
 
 				// overwrite shadowmap code
 
-				var shader = THREE.ShaderChunk.shadowmap_pars_fragment;
+				let shader = THREE.ShaderChunk.shadowmap_pars_fragment;
 
 				shader = shader.replace(
 					'#ifdef USE_SHADOWMAP',
@@ -242,7 +242,7 @@
 				renderer.shadowMap.enabled = true;
 
 				// controls
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.maxPolarAngle = Math.PI * 0.5;
 				controls.minDistance = 10;
 				controls.maxDistance = 75;
@@ -275,7 +275,7 @@
 
 			function animate() {
 
-				var time = performance.now() / 1000;
+				const time = performance.now() / 1000;
 
 				group.traverse( function ( child ) {
 

examples/webgl_shadowmap_performance.html

@@ -23,24 +23,24 @@
 			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
+			const SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-			var FLOOR = - 250;
+			let SCREEN_WIDTH = window.innerWidth;
+			let SCREEN_HEIGHT = window.innerHeight;
+			const FLOOR = - 250;
 
-			var ANIMATION_GROUPS = 25;
+			const ANIMATION_GROUPS = 25;
 
-			var camera, controls, scene, renderer;
-			var container, stats;
+			let camera, controls, scene, renderer;
+			let stats;
 
-			var NEAR = 5, FAR = 3000;
+			const NEAR = 5, FAR = 3000;
 
-			var morph, morphs = [], mixer, animGroups = [];
+			let morph, mixer;
 
-			var light;
+			const morphs = [], animGroups = [];
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -48,7 +48,7 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				// CAMERA
@@ -64,10 +64,10 @@
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0x444444 );
+				const ambient = new THREE.AmbientLight( 0x444444 );
 				scene.add( ambient );
 
-				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 5, 0.3 );
+				const light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 5, 0.3 );
 				light.position.set( 0, 1500, 1000 );
 				light.target.position.set( 0, 0, 0 );
 
@@ -138,10 +138,10 @@
 
 				// GROUND
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
-				var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffb851 } );
+				const geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				const planeMaterial = new THREE.MeshPhongMaterial( { color: 0xffb851 } );
 
-				var ground = new THREE.Mesh( geometry, planeMaterial );
+				const ground = new THREE.Mesh( geometry, planeMaterial );
 
 				ground.position.set( 0, FLOOR, 0 );
 				ground.rotation.x = - Math.PI / 2;
@@ -154,10 +154,10 @@
 
 				// TEXT
 
-				var loader = new THREE.FontLoader();
+				const loader = new THREE.FontLoader();
 				loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
-					var textGeo = new THREE.TextBufferGeometry( "THREE.JS", {
+					const textGeo = new THREE.TextBufferGeometry( "THREE.JS", {
 
 						font: font,
 
@@ -172,11 +172,11 @@
 					} );
 
 					textGeo.computeBoundingBox();
-					var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+					const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
-					var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
+					const textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xffffff } );
 
-					var mesh = new THREE.Mesh( textGeo, textMaterial );
+					const mesh = new THREE.Mesh( textGeo, textMaterial );
 					mesh.position.x = centerOffset;
 					mesh.position.y = FLOOR + 67;
 
@@ -189,31 +189,31 @@
 
 				// CUBES
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
+				const cubes1 = new THREE.Mesh( new THREE.BoxBufferGeometry( 1500, 220, 150 ), planeMaterial );
 
-				mesh.position.y = FLOOR - 50;
-				mesh.position.z = 20;
+				cubes1.position.y = FLOOR - 50;
+				cubes1.position.z = 20;
 
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
+				cubes1.castShadow = true;
+				cubes1.receiveShadow = true;
 
-				scene.add( mesh );
+				scene.add( cubes1 );
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
+				const cubes2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 1600, 170, 250 ), planeMaterial );
 
-				mesh.position.y = FLOOR - 50;
-				mesh.position.z = 20;
+				cubes2.position.y = FLOOR - 50;
+				cubes2.position.z = 20;
 
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
+				cubes2.castShadow = true;
+				cubes2.receiveShadow = true;
 
-				scene.add( mesh );
+				scene.add( cubes2 );
 
 				mixer = new THREE.AnimationMixer( scene );
 
-				for ( var i = 0; i !== ANIMATION_GROUPS; ++ i ) {
+				for ( let i = 0; i !== ANIMATION_GROUPS; ++ i ) {
 
-					var group = new THREE.AnimationObjectGroup();
+					const group = new THREE.AnimationObjectGroup();
 					animGroups.push( group );
 
 				}
@@ -235,15 +235,15 @@
 
 					if ( massOptimization ) {
 
-						var index = Math.floor( Math.random() * ANIMATION_GROUPS ),
+						const index = Math.floor( Math.random() * ANIMATION_GROUPS ),
 							animGroup = animGroups[ index ];
 
 						animGroup.add( mesh );
 
 						if ( ! mixer.existingAction( clip, animGroup ) ) {
 
-							var randomness = 0.6 * Math.random() - 0.3;
-							var phase = ( index + randomness ) / ANIMATION_GROUPS;
+							const randomness = 0.6 * Math.random() - 0.3;
+							const phase = ( index + randomness ) / ANIMATION_GROUPS;
 
 							mixer.clipAction( clip, animGroup ).
 								setDuration( duration ).
@@ -273,14 +273,13 @@
 
 				}
 
-				var loader = new GLTFLoader();
+				const gltfLoader = new GLTFLoader();
+				gltfLoader.load( "models/gltf/Horse.glb", function ( gltf ) {
 
-				loader.load( "models/gltf/Horse.glb", function ( gltf ) {
+					const mesh = gltf.scene.children[ 0 ];
+					const clip = gltf.animations[ 0 ];
 
-					var mesh = gltf.scene.children[ 0 ];
-					var clip = gltf.animations[ 0 ];
-
-					for ( var i = - 600; i < 601; i += 2 ) {
+					for ( let i = - 600; i < 601; i += 2 ) {
 
 						addMorph( mesh, clip, 550, 1, 100 - Math.random() * 3000, FLOOR, i, true, true );
 
@@ -304,11 +303,11 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 
-				for ( var i = 0; i < morphs.length; i ++ ) {
+				for ( let i = 0; i < morphs.length; i ++ ) {
 
 					morph = morphs[ i ];
 

examples/webgl_shadowmap_pointlight.html

@@ -19,8 +19,8 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, scene, renderer, stats;
-			var pointLight, pointLight2;
+			let camera, scene, renderer, stats;
+			let pointLight, pointLight2;
 
 			init();
 			animate();
@@ -37,46 +37,46 @@
 
 				function createLight( color ) {
 
-					var intensity = 1.5;
+					const intensity = 1.5;
 
-					var pointLight = new THREE.PointLight( color, intensity, 20 );
-					pointLight.castShadow = true;
-					pointLight.shadow.camera.near = 1;
-					pointLight.shadow.camera.far = 60;
-					pointLight.shadow.bias = - 0.005; // reduces self-shadowing on double-sided objects
+					const light = new THREE.PointLight( color, intensity, 20 );
+					light.castShadow = true;
+					light.shadow.camera.near = 1;
+					light.shadow.camera.far = 60;
+					light.shadow.bias = - 0.005; // reduces self-shadowing on double-sided objects
 
-					var geometry = new THREE.SphereBufferGeometry( 0.3, 12, 6 );
-					var material = new THREE.MeshBasicMaterial( { color: color } );
+					let geometry = new THREE.SphereBufferGeometry( 0.3, 12, 6 );
+					let material = new THREE.MeshBasicMaterial( { color: color } );
 					material.color.multiplyScalar( intensity );
-					var sphere = new THREE.Mesh( geometry, material );
-					pointLight.add( sphere );
+					let sphere = new THREE.Mesh( geometry, material );
+					light.add( sphere );
 
-					var texture = new THREE.CanvasTexture( generateTexture() );
+					const texture = new THREE.CanvasTexture( generateTexture() );
 					texture.magFilter = THREE.NearestFilter;
 					texture.wrapT = THREE.RepeatWrapping;
 					texture.wrapS = THREE.RepeatWrapping;
 					texture.repeat.set( 1, 4.5 );
 
-					var geometry = new THREE.SphereBufferGeometry( 2, 32, 8 );
-					var material = new THREE.MeshPhongMaterial( {
+					geometry = new THREE.SphereBufferGeometry( 2, 32, 8 );
+					material = new THREE.MeshPhongMaterial( {
 						side: THREE.DoubleSide,
 						alphaMap: texture,
 						alphaTest: 0.5
 					} );
 
-					var sphere = new THREE.Mesh( geometry, material );
+					sphere = new THREE.Mesh( geometry, material );
 					sphere.castShadow = true;
 					sphere.receiveShadow = true;
-					pointLight.add( sphere );
+					light.add( sphere );
 
 					// custom distance material
-					var distanceMaterial = new THREE.MeshDistanceMaterial( {
+					const distanceMaterial = new THREE.MeshDistanceMaterial( {
 						alphaMap: material.alphaMap,
 						alphaTest: material.alphaTest
 					} );
 					sphere.customDistanceMaterial = distanceMaterial;
 
-					return pointLight;
+					return light;
 
 				}
 
@@ -87,16 +87,16 @@
 				scene.add( pointLight2 );
 				//
 
-				var geometry = new THREE.BoxBufferGeometry( 30, 30, 30 );
+				const geometry = new THREE.BoxBufferGeometry( 30, 30, 30 );
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xa0adaf,
 					shininess: 10,
 					specular: 0x111111,
 					side: THREE.BackSide
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				mesh.position.y = 10;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
@@ -110,7 +110,7 @@
 				renderer.shadowMap.type = THREE.BasicShadowMap;
 				document.body.appendChild( renderer.domElement );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 10, 0 );
 				controls.update();
 
@@ -134,11 +134,11 @@
 
 			function generateTexture() {
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 2;
 				canvas.height = 2;
 
-				var context = canvas.getContext( '2d' );
+				const context = canvas.getContext( '2d' );
 				context.fillStyle = 'white';
 				context.fillRect( 0, 1, 2, 1 );
 
@@ -155,7 +155,7 @@
 
 			function render() {
 
-				var time = performance.now() * 0.001;
+				let time = performance.now() * 0.001;
 
 				pointLight.position.x = Math.sin( time * 0.6 ) * 9;
 				pointLight.position.y = Math.sin( time * 0.7 ) * 9 + 6;

examples/webgl_shadowmap_viewer.html

@@ -20,10 +20,10 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ShadowMapViewer } from './jsm/utils/ShadowMapViewer.js';
 
-			var camera, scene, renderer, clock, stats;
-			var dirLight, spotLight;
-			var torusKnot, cube;
-			var dirLightShadowMapViewer, spotLightShadowMapViewer;
+			let camera, scene, renderer, clock, stats;
+			let dirLight, spotLight;
+			let torusKnot, cube;
+			let dirLightShadowMapViewer, spotLightShadowMapViewer;
 
 			init();
 			animate();
@@ -82,8 +82,8 @@
 				scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
 
 				// Geometry
-				var geometry = new THREE.TorusKnotBufferGeometry( 25, 8, 75, 20 );
-				var material = new THREE.MeshPhongMaterial( {
+				let geometry = new THREE.TorusKnotBufferGeometry( 25, 8, 75, 20 );
+				let material = new THREE.MeshPhongMaterial( {
 					color: 0xff0000,
 					shininess: 150,
 					specular: 0x222222
@@ -96,21 +96,21 @@
 				torusKnot.receiveShadow = true;
 				scene.add( torusKnot );
 
-				var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
+				geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
 				cube = new THREE.Mesh( geometry, material );
 				cube.position.set( 8, 3, 8 );
 				cube.castShadow = true;
 				cube.receiveShadow = true;
 				scene.add( cube );
 
-				var geometry = new THREE.BoxBufferGeometry( 10, 0.15, 10 );
-				var material = new THREE.MeshPhongMaterial( {
+				geometry = new THREE.BoxBufferGeometry( 10, 0.15, 10 );
+				material = new THREE.MeshPhongMaterial( {
 					color: 0xa0adaf,
 					shininess: 150,
 					specular: 0x111111
 				} );
 
-				var ground = new THREE.Mesh( geometry, material );
+				const ground = new THREE.Mesh( geometry, material );
 				ground.scale.multiplyScalar( 3 );
 				ground.castShadow = false;
 				ground.receiveShadow = true;
@@ -135,7 +135,7 @@
 				renderer.shadowMap.type = THREE.BasicShadowMap;
 
 				// Mouse control
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 2, 0 );
 				controls.update();
 
@@ -148,7 +148,7 @@
 
 			function resizeShadowMapViewers() {
 
-				var size = window.innerWidth * 0.15;
+				const size = window.innerWidth * 0.15;
 
 				dirLightShadowMapViewer.position.x = 10;
 				dirLightShadowMapViewer.position.y = 10;
@@ -199,7 +199,7 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				renderScene();
 				renderShadowMapViewers();

examples/webgl_shadowmap_vsm.html

@@ -20,9 +20,9 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, scene, renderer, clock, stats;
-			var dirLight, spotLight;
-			var torusKnot, dirGroup;
+			let camera, scene, renderer, clock, stats;
+			let dirLight, spotLight;
+			let torusKnot, dirGroup;
 
 			init();
 			animate();
@@ -31,11 +31,11 @@
 
 				initScene();
 				initMisc();
-				
+
 				// Init gui
-				var gui = new GUI();
+				const gui = new GUI();
 
-				var config = {
+				const config = {
 					'Spotlight Radius': 4,
 					'Directional light Radius': 4,
 				};
@@ -79,7 +79,7 @@
 				spotLight.shadow.camera.far = 200;
 				spotLight.shadow.mapSize.width = 256;
 				spotLight.shadow.mapSize.height = 256;
-				spotLight.shadow.bias = -0.002;
+				spotLight.shadow.bias = - 0.002;
 				spotLight.shadow.radius = 4;
 				scene.add( spotLight );
 
@@ -97,7 +97,7 @@
 				dirLight.shadow.mapSize.width = 512;
 				dirLight.shadow.mapSize.height = 512;
 				dirLight.shadow.radius = 4;
-				dirLight.shadow.bias = -0.0005;
+				dirLight.shadow.bias = - 0.0005;
 				scene.add( dirLight );
 
 				dirGroup = new THREE.Group();
@@ -106,8 +106,8 @@
 
 				// Geometry
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 25, 8, 75, 20 );
-				var material = new THREE.MeshPhongMaterial( {
+				const geometry = new THREE.TorusKnotBufferGeometry( 25, 8, 75, 20 );
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0x999999,
 					shininess: 0,
 					specular: 0x222222
@@ -120,34 +120,34 @@
 				torusKnot.receiveShadow = true;
 				scene.add( torusKnot );
 
-				var geometry = new THREE.CylinderBufferGeometry( 0.75, 0.75, 7, 32 );
+				const cylinderGeometry = new THREE.CylinderBufferGeometry( 0.75, 0.75, 7, 32 );
 
-				var pillar1 = new THREE.Mesh( geometry, material );
+				const pillar1 = new THREE.Mesh( cylinderGeometry, material );
 				pillar1.position.set( 10, 3.5, 10 );
 				pillar1.castShadow = true;
 				pillar1.receiveShadow = true;
 
-				var pillar2 = pillar1.clone();
-				pillar2.position.set( 10, 3.5, -10 );
-				var pillar3 = pillar1.clone();
-				pillar3.position.set( -10, 3.5, 10 );
-				var pillar4 = pillar1.clone();
-				pillar4.position.set( -10, 3.5, -10 );
+				const pillar2 = pillar1.clone();
+				pillar2.position.set( 10, 3.5, - 10 );
+				const pillar3 = pillar1.clone();
+				pillar3.position.set( - 10, 3.5, 10 );
+				const pillar4 = pillar1.clone();
+				pillar4.position.set( - 10, 3.5, - 10 );
 
 				scene.add( pillar1 );
 				scene.add( pillar2 );
 				scene.add( pillar3 );
 				scene.add( pillar4 );
 
-				var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
-				var material = new THREE.MeshPhongMaterial( {
+				const planeGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
+				const planeMaterial = new THREE.MeshPhongMaterial( {
 					color: 0x999999,
 					shininess: 0,
 					specular: 0x111111
 				} );
 
-				var ground = new THREE.Mesh( geometry, material );
-				ground.rotation.x = -Math.PI/2;
+				const ground = new THREE.Mesh( planeGeometry, planeMaterial );
+				ground.rotation.x = - Math.PI / 2;
 				ground.scale.multiplyScalar( 3 );
 				ground.castShadow = true;
 				ground.receiveShadow = true;
@@ -161,12 +161,12 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.VSMShadowMap;		
+				renderer.shadowMap.type = THREE.VSMShadowMap;
 
 				renderer.setClearColor( 0xCCCCCC, 1 );
 
 				// Mouse control
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 2, 0 );
 				controls.update();
 
@@ -203,8 +203,8 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
-				var time = clock.elapsedTime;
+				const delta = clock.getDelta();
+				const time = clock.elapsedTime;
 
 				renderScene();
 
@@ -213,7 +213,7 @@
 				torusKnot.rotation.z += 1 * delta;
 
 				dirGroup.rotation.y += 0.7 * delta;
-				dirLight.position.z = 17 + Math.sin(time*0.001)*5;
+				dirLight.position.z = 17 + Math.sin( time * 0.001 ) * 5;
 
 			}
 

examples/webgl_shadowmesh.html

@@ -20,36 +20,36 @@
 
 			import { ShadowMesh } from './jsm/objects/ShadowMesh.js';
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-
-			var scene = new THREE.Scene();
-			var camera = new THREE.PerspectiveCamera( 55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
-			var clock = new THREE.Clock();
-			var renderer = new THREE.WebGLRenderer();
-
-			var sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 1 );
-			var useDirectionalLight = true;
-			var arrowHelper1, arrowHelper2, arrowHelper3;
-			var arrowDirection = new THREE.Vector3();
-			var arrowPosition1 = new THREE.Vector3();
-			var arrowPosition2 = new THREE.Vector3();
-			var arrowPosition3 = new THREE.Vector3();
-			var groundMesh;
-			var lightSphere, lightHolder;
-			var pyramid, pyramidShadow;
-			var sphere, sphereShadow;
-			var cube, cubeShadow;
-			var cylinder, cylinderShadow;
-			var torus, torusShadow;
-			var normalVector = new THREE.Vector3( 0, 1, 0 );
-			var planeConstant = 0.01; // this value must be slightly higher than the groundMesh's y position of 0.0
-			var groundPlane = new THREE.Plane( normalVector, planeConstant );
-			var lightPosition4D = new THREE.Vector4();
-			var verticalAngle = 0;
-			var horizontalAngle = 0;
-			var frameTime = 0;
-			var TWO_PI = Math.PI * 2;
+			let SCREEN_WIDTH = window.innerWidth;
+			let SCREEN_HEIGHT = window.innerHeight;
+
+			const scene = new THREE.Scene();
+			const camera = new THREE.PerspectiveCamera( 55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
+			const clock = new THREE.Clock();
+			const renderer = new THREE.WebGLRenderer();
+
+			const sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 1 );
+			let useDirectionalLight = true;
+			let arrowHelper1, arrowHelper2, arrowHelper3;
+			const arrowDirection = new THREE.Vector3();
+			const arrowPosition1 = new THREE.Vector3();
+			const arrowPosition2 = new THREE.Vector3();
+			const arrowPosition3 = new THREE.Vector3();
+			let groundMesh;
+			let lightSphere, lightHolder;
+			let pyramid, pyramidShadow;
+			let sphere, sphereShadow;
+			let cube, cubeShadow;
+			let cylinder, cylinderShadow;
+			let torus, torusShadow;
+			const normalVector = new THREE.Vector3( 0, 1, 0 );
+			const planeConstant = 0.01; // this value must be slightly higher than the groundMesh's y position of 0.0
+			const groundPlane = new THREE.Plane( normalVector, planeConstant );
+			const lightPosition4D = new THREE.Vector4();
+			let verticalAngle = 0;
+			let horizontalAngle = 0;
+			let frameTime = 0;
+			const TWO_PI = Math.PI * 2;
 
 			init();
 			animate();
@@ -94,28 +94,28 @@
 				scene.add( arrowHelper3 );
 
 				// LIGHTBULB
-				var lightSphereGeometry = new THREE.SphereBufferGeometry( 0.09 );
-				var lightSphereMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
+				const lightSphereGeometry = new THREE.SphereBufferGeometry( 0.09 );
+				const lightSphereMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
 				lightSphere = new THREE.Mesh( lightSphereGeometry, lightSphereMaterial );
 				scene.add( lightSphere );
 				lightSphere.visible = false;
 
-				var lightHolderGeometry = new THREE.CylinderBufferGeometry( 0.05, 0.05, 0.13 );
-				var lightHolderMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
+				const lightHolderGeometry = new THREE.CylinderBufferGeometry( 0.05, 0.05, 0.13 );
+				const lightHolderMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
 				lightHolder = new THREE.Mesh( lightHolderGeometry, lightHolderMaterial );
 				scene.add( lightHolder );
 				lightHolder.visible = false;
 
 				// GROUND
-				var groundGeometry = new THREE.BoxBufferGeometry( 30, 0.01, 40 );
-				var groundMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(0,130,0)' } );
+				const groundGeometry = new THREE.BoxBufferGeometry( 30, 0.01, 40 );
+				const groundMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(0,130,0)' } );
 				groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
 				groundMesh.position.y = 0.0; //this value must be slightly lower than the planeConstant (0.01) parameter above
 				scene.add( groundMesh );
 
 				// RED CUBE and CUBE's SHADOW
-				var cubeGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
-				var cubeMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(255,0,0)', emissive: 0x200000 } );
+				const cubeGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+				const cubeMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(255,0,0)', emissive: 0x200000 } );
 				cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
 				cube.position.z = - 1;
 				scene.add( cube );
@@ -124,8 +124,8 @@
 				scene.add( cubeShadow );
 
 				// BLUE CYLINDER and CYLINDER's SHADOW
-				var cylinderGeometry = new THREE.CylinderBufferGeometry( 0.3, 0.3, 2 );
-				var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(0,0,255)', emissive: 0x000020 } );
+				const cylinderGeometry = new THREE.CylinderBufferGeometry( 0.3, 0.3, 2 );
+				const cylinderMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(0,0,255)', emissive: 0x000020 } );
 				cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
 				cylinder.position.z = - 2.5;
 				scene.add( cylinder );
@@ -134,8 +134,8 @@
 				scene.add( cylinderShadow );
 
 				// MAGENTA TORUS and TORUS' SHADOW
-				var torusGeometry = new THREE.TorusBufferGeometry( 1, 0.2, 10, 16, TWO_PI );
-				var torusMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,0,255)', emissive: 0x200020 } );
+				const torusGeometry = new THREE.TorusBufferGeometry( 1, 0.2, 10, 16, TWO_PI );
+				const torusMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,0,255)', emissive: 0x200020 } );
 				torus = new THREE.Mesh( torusGeometry, torusMaterial );
 				torus.position.z = - 6;
 				scene.add( torus );
@@ -144,8 +144,8 @@
 				scene.add( torusShadow );
 
 				// WHITE SPHERE and SPHERE'S SHADOW
-				var sphereGeometry = new THREE.SphereBufferGeometry( 0.5, 20, 10 );
-				var sphereMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,255)', emissive: 0x222222 } );
+				const sphereGeometry = new THREE.SphereBufferGeometry( 0.5, 20, 10 );
+				const sphereMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,255)', emissive: 0x222222 } );
 				sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
 				sphere.position.set( 4, 0.5, 2 );
 				scene.add( sphere );
@@ -154,8 +154,8 @@
 				scene.add( sphereShadow );
 
 				// YELLOW PYRAMID and PYRAMID'S SHADOW
-				var pyramidGeometry = new THREE.CylinderBufferGeometry( 0, 0.5, 2, 4 );
-				var pyramidMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
+				const pyramidGeometry = new THREE.CylinderBufferGeometry( 0, 0.5, 2, 4 );
+				const pyramidMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
 				pyramid = new THREE.Mesh( pyramidGeometry, pyramidMaterial );
 				pyramid.position.set( - 4, 1, 2 );
 				scene.add( pyramid );

examples/webgl_simple_gi.html

@@ -22,7 +22,7 @@
 
 			THREE.Mesh.prototype.clone = function () {
 
-				var newMaterial = ( this.material.isMaterial ) ? this.material.clone() : this.material.slice();
+				const newMaterial = ( this.material.isMaterial ) ? this.material.clone() : this.material.slice();
 
 				return new this.constructor( this.geometry.clone(), newMaterial ).copy( this );
 
@@ -30,58 +30,58 @@
 
 			//
 
-			var SimpleGI = function ( renderer, scene ) {
+			const SimpleGI = function ( renderer, scene ) {
 
-				var SIZE = 32, SIZE2 = SIZE * SIZE;
+				const SIZE = 32, SIZE2 = SIZE * SIZE;
 
-				var camera = new THREE.PerspectiveCamera( 90, 1, 0.01, 100 );
+				const camera = new THREE.PerspectiveCamera( 90, 1, 0.01, 100 );
 
 				scene.updateMatrixWorld( true );
 
-				var clone = scene.clone();
+				let clone = scene.clone();
 				clone.autoUpdate = false;
 
-				var rt = new THREE.WebGLRenderTarget( SIZE, SIZE, {
+				const rt = new THREE.WebGLRenderTarget( SIZE, SIZE, {
 					wrapS: THREE.ClampToEdgeWrapping,
 					wrapT: THREE.ClampToEdgeWrapping,
 					depthBuffer: true
 				} );
 
-				var normalMatrix = new THREE.Matrix3();
+				const normalMatrix = new THREE.Matrix3();
 
-				var position = new THREE.Vector3();
-				var normal = new THREE.Vector3();
+				const position = new THREE.Vector3();
+				const normal = new THREE.Vector3();
 
-				var bounces = 0;
-				var currentVertex = 0;
+				let bounces = 0;
+				let currentVertex = 0;
 
-				var color = new Float32Array( 3 );
-				var buffer = new Uint8Array( SIZE2 * 4 );
+				const color = new Float32Array( 3 );
+				const buffer = new Uint8Array( SIZE2 * 4 );
 
 				function compute() {
 
 					if ( bounces === 3 ) return;
 
-					var object = scene.children[ 0 ];
-					var geometry = object.geometry;
+					const object = scene.children[ 0 ];
+					const geometry = object.geometry;
 
-					var attributes = geometry.attributes;
-					var positions = attributes.position.array;
-					var normals = attributes.normal.array;
+					const attributes = geometry.attributes;
+					const positions = attributes.position.array;
+					const normals = attributes.normal.array;
 
 					if ( attributes.color === undefined ) {
 
-						var colors = new Float32Array( positions.length );
+						const colors = new Float32Array( positions.length );
 						geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setUsage( THREE.DynamicDrawUsage ) );
 
 					}
 
-					var colors = attributes.color.array;
+					const colors = attributes.color.array;
 
-					var startVertex = currentVertex;
-					var totalVertex = positions.length / 3;
+					const startVertex = currentVertex;
+					const totalVertex = positions.length / 3;
 
-					for ( var i = 0; i < 32; i ++ ) {
+					for ( let i = 0; i < 32; i ++ ) {
 
 						if ( currentVertex >= totalVertex ) break;
 
@@ -103,7 +103,7 @@
 						color[ 1 ] = 0;
 						color[ 2 ] = 0;
 
-						for ( var k = 0, kl = buffer.length; k < kl; k += 4 ) {
+						for ( let k = 0, kl = buffer.length; k < kl; k += 4 ) {
 
 							color[ 0 ] += buffer[ k + 0 ];
 							color[ 1 ] += buffer[ k + 1 ];
@@ -143,7 +143,7 @@
 
 			//
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -155,28 +155,28 @@
 
 				scene = new THREE.Scene();
 
-				// sphere
+				// torus knot
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 0.75, 0.3, 128, 32, 1 );
-				var material = new THREE.MeshBasicMaterial( { vertexColors: true } );
+				const torusGeometry = new THREE.TorusKnotBufferGeometry( 0.75, 0.3, 128, 32, 1 );
+				const material = new THREE.MeshBasicMaterial( { vertexColors: true } );
 
-				var mesh = new THREE.Mesh( geometry, material );
-				scene.add( mesh );
+				const torusKnot = new THREE.Mesh( torusGeometry, material );
+				scene.add( torusKnot );
 
 				// room
 
-				var materials = [];
+				const materials = [];
 
-				for ( var i = 0; i < 8; i ++ ) {
+				for ( let i = 0; i < 8; i ++ ) {
 
 					materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.BackSide } ) );
 
 				}
 
-				var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
+				const boxGeometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
 
-				var mesh = new THREE.Mesh( geometry, materials );
-				scene.add( mesh );
+				const box = new THREE.Mesh( boxGeometry, materials );
+				scene.add( box );
 
 				//
 
@@ -187,7 +187,7 @@
 
 				new SimpleGI( renderer, scene );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1;
 				controls.maxDistance = 10;
 

examples/webgl_skinning_simple.html

@@ -22,14 +22,14 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var stats, mixer, camera, scene, renderer, clock;
+			let stats, mixer, camera, scene, renderer, clock;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -43,16 +43,16 @@
 
 				// ground
 
-				var geometry = new THREE.PlaneBufferGeometry( 500, 500 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } );
+				const geometry = new THREE.PlaneBufferGeometry( 500, 500 );
+				const material = new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } );
 
-				var ground = new THREE.Mesh( geometry, material );
+				const ground = new THREE.Mesh( geometry, material );
 				ground.position.set( 0, - 5, 0 );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				var grid = new THREE.GridHelper( 500, 100, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 500, 100, 0x000000, 0x000000 );
 				grid.position.y = - 5;
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
@@ -60,22 +60,22 @@
 
 				// lights
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.6 );
-				light.position.set( 0, 200, 0 );
-				scene.add( light );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.6 );
+				hemiLight.position.set( 0, 200, 0 );
+				scene.add( hemiLight );
 
-				light = new THREE.DirectionalLight( 0xffffff, 0.8 );
-				light.position.set( 0, 20, 10 );
-				light.castShadow = true;
-				light.shadow.camera.top = 18;
-				light.shadow.camera.bottom = - 10;
-				light.shadow.camera.left = - 12;
-				light.shadow.camera.right = 12;
-				scene.add( light );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				dirLight.position.set( 0, 20, 10 );
+				dirLight.castShadow = true;
+				dirLight.shadow.camera.top = 18;
+				dirLight.shadow.camera.bottom = - 10;
+				dirLight.shadow.camera.left = - 12;
+				dirLight.shadow.camera.right = 12;
+				scene.add( dirLight );
 
 				//
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( './models/gltf/SimpleSkinning.gltf', function ( gltf ) {
 
 					scene.add( gltf.scene );
@@ -104,7 +104,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.enablePan = false;
 				controls.minDistance = 5;
 				controls.maxDistance = 50;

examples/webgl_sprites.html

@@ -16,22 +16,22 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
-			var cameraOrtho, sceneOrtho;
+			let camera, scene, renderer;
+			let cameraOrtho, sceneOrtho;
 
-			var spriteTL, spriteTR, spriteBL, spriteBR, spriteC;
+			let spriteTL, spriteTR, spriteBL, spriteBR, spriteC;
 
-			var mapC;
+			let mapC;
 
-			var group;
+			let group;
 
 			init();
 			animate();
 
 			function init() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera = new THREE.PerspectiveCamera( 60, width / height, 1, 2100 );
 				camera.position.z = 1500;
@@ -46,27 +46,27 @@
 
 				// create sprites
 
-				var amount = 200;
-				var radius = 500;
+				const amount = 200;
+				const radius = 500;
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
 				textureLoader.load( "textures/sprite0.png", createHUDSprites );
-				var mapB = textureLoader.load( "textures/sprite1.png" );
+				const mapB = textureLoader.load( "textures/sprite1.png" );
 				mapC = textureLoader.load( "textures/sprite2.png" );
 
 				group = new THREE.Group();
 
-				var materialC = new THREE.SpriteMaterial( { map: mapC, color: 0xffffff, fog: true } );
-				var materialB = new THREE.SpriteMaterial( { map: mapB, color: 0xffffff, fog: true } );
+				const materialC = new THREE.SpriteMaterial( { map: mapC, color: 0xffffff, fog: true } );
+				const materialB = new THREE.SpriteMaterial( { map: mapB, color: 0xffffff, fog: true } );
 
-				for ( var a = 0; a < amount; a ++ ) {
+				for ( let a = 0; a < amount; a ++ ) {
 
-					var x = Math.random() - 0.5;
-					var y = Math.random() - 0.5;
-					var z = Math.random() - 0.5;
+					const x = Math.random() - 0.5;
+					const y = Math.random() - 0.5;
+					const z = Math.random() - 0.5;
 
-					var material;
+					let material;
 
 					if ( z < 0 ) {
 
@@ -81,7 +81,7 @@
 
 					}
 
-					var sprite = new THREE.Sprite( material );
+					const sprite = new THREE.Sprite( material );
 
 					sprite.position.set( x, y, z );
 					sprite.position.normalize();
@@ -110,10 +110,10 @@
 
 			function createHUDSprites( texture ) {
 
-				var material = new THREE.SpriteMaterial( { map: texture } );
+				const material = new THREE.SpriteMaterial( { map: texture } );
 
-				var width = material.map.image.width;
-				var height = material.map.image.height;
+				const width = material.map.image.width;
+				const height = material.map.image.height;
 
 				spriteTL = new THREE.Sprite( material );
 				spriteTL.center.set( 0.0, 1.0 );
@@ -146,8 +146,8 @@
 
 			function updateHUDSprites() {
 
-				var width = window.innerWidth / 2;
-				var height = window.innerHeight / 2;
+				const width = window.innerWidth / 2;
+				const height = window.innerHeight / 2;
 
 				spriteTL.position.set( - width, height, 1 ); // top left
 				spriteTR.position.set( width, height, 1 ); // top right
@@ -159,8 +159,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();
@@ -186,16 +186,16 @@
 
 			function render() {
 
-				var time = Date.now() / 1000;
+				const time = Date.now() / 1000;
 
-				for ( var i = 0, l = group.children.length; i < l; i ++ ) {
+				for ( let i = 0, l = group.children.length; i < l; i ++ ) {
 
-					var sprite = group.children[ i ];
-					var material = sprite.material;
-					var scale = Math.sin( time + sprite.position.x * 0.01 ) * 0.3 + 1.0;
+					const sprite = group.children[ i ];
+					const material = sprite.material;
+					const scale = Math.sin( time + sprite.position.x * 0.01 ) * 0.3 + 1.0;
 
-					var imageWidth = 1;
-					var imageHeight = 1;
+					let imageWidth = 1;
+					let imageHeight = 1;
 
 					if ( material.map && material.map.image && material.map.image.width ) {
 

examples/webgl_sprites_nodes.html

@@ -34,14 +34,15 @@
 				UVNode
 			} from './jsm/nodes/Nodes.js';
 
-			var container = document.getElementById( 'container' );
+			const container = document.getElementById( 'container' );
 
-			var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
-			var frame = new NodeFrame();
-			var sprite1, sprite2, sprite3;
-			var walkingManTexture, walkingManTextureURL;
-			var library = {};
-			var controls;
+			let renderer, scene, camera;
+			const clock = new THREE.Clock(), fov = 50;
+			const frame = new NodeFrame();
+			let sprite1, sprite2, sprite3;
+			let walkingManTexture, walkingManTextureURL;
+			const library = {};
+			let controls;
 
 			window.addEventListener( 'load', init );
 
@@ -83,33 +84,33 @@
 
 				function createHorizontalSpriteSheetNode( hCount, speed ) {
 
-					var speed = new Vector2Node( speed, 0 ); // frame per second
-					var scale = new Vector2Node( 1 / hCount, 1 ); // 8 horizontal images in sprite-sheet
+					const speedNode = new Vector2Node( speed, 0 ); // frame per second
+					const scale = new Vector2Node( 1 / hCount, 1 ); // 8 horizontal images in sprite-sheet
 
-					var uvTimer = new OperatorNode(
+					const uvTimer = new OperatorNode(
 						new TimerNode(),
-						speed,
+						speedNode,
 						OperatorNode.MUL
 					);
 
-					var uvIntegerTimer = new MathNode(
+					const uvIntegerTimer = new MathNode(
 						uvTimer,
 						MathNode.FLOOR
 					);
 
-					var uvFrameOffset = new OperatorNode(
+					const uvFrameOffset = new OperatorNode(
 						uvIntegerTimer,
 						scale,
 						OperatorNode.MUL
 					);
 
-					var uvScale = new OperatorNode(
+					const uvScale = new OperatorNode(
 						new UVNode(),
 						scale,
 						OperatorNode.MUL
 					);
 
-					var uvFrame = new OperatorNode(
+					const uvFrame = new OperatorNode(
 						uvScale,
 						uvFrameOffset,
 						OperatorNode.ADD
@@ -121,8 +122,7 @@
 
 				// sprites
 
-				var spriteWidth = 20,
-					spriteHeight = 20;
+				const spriteWidth = 20, spriteHeight = 20;
 
 				scene.add( sprite1 = new THREE.Sprite( new SpriteNodeMaterial() ) );
 				sprite1.scale.x = spriteWidth;
@@ -149,7 +149,7 @@
 					OperatorNode.ADD
 				);
 
-				var sineWaveFunction = new FunctionNode( [
+				const sineWaveFunction = new FunctionNode( [
 					// https://stackoverflow.com/questions/36174431/how-to-make-a-wave-warp-effect-in-shader
 					"vec2 sineWave(vec2 uv, vec2 phase) {",
 					// wave distortion
@@ -193,7 +193,7 @@
 
 				// serialize
 
-				var json = sprite.material.toJSON();
+				const json = sprite.material.toJSON();
 
 				// replace uuid to url (facilitates the load of textures using url otherside uuid)
 
@@ -201,7 +201,7 @@
 
 				// deserialize
 
-				var material = new NodeMaterialLoader( null, library ).parse( json );
+				const material = new NodeMaterialLoader( null, library ).parse( json );
 
 				// replace material
 
@@ -213,7 +213,7 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth, height = window.innerHeight;
+				const width = window.innerWidth, height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -224,7 +224,7 @@
 
 			function animate() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				// update material animation and/or gpu calcs (pre-renderer)
 				frame.update( delta )

examples/webgl_test_memory.html

@@ -25,16 +25,14 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var container;
-
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -52,11 +50,11 @@
 
 			function createImage() {
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 256;
 				canvas.height = 256;
 
-				var context = canvas.getContext( '2d' );
+				const context = canvas.getContext( '2d' );
 				context.fillStyle = 'rgb(' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ')';
 				context.fillRect( 0, 0, 256, 256 );
 
@@ -76,13 +74,13 @@
 
 			function render() {
 
-				var geometry = new THREE.SphereBufferGeometry( 50, Math.random() * 64, Math.random() * 32 );
+				const geometry = new THREE.SphereBufferGeometry( 50, Math.random() * 64, Math.random() * 32 );
 
-				var texture = new THREE.CanvasTexture( createImage() );
+				const texture = new THREE.CanvasTexture( createImage() );
 
-				var material = new THREE.MeshBasicMaterial( { map: texture, wireframe: true } );
+				const material = new THREE.MeshBasicMaterial( { map: texture, wireframe: true } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 
 				scene.add( mesh );
 

examples/webgl_test_memory2.html

@@ -52,15 +52,17 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var N = 100;
+			const N = 100;
 
-			var container;
+			let container;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var geometry, meshes = [];
+			let geometry;
 
-			var fragmentShader, vertexShader;
+			const meshes = [];
+
+			let fragmentShader, vertexShader;
 
 			init();
 			setInterval( render, 1000 / 60 );
@@ -81,11 +83,11 @@
 
 				geometry = new THREE.SphereBufferGeometry( 15, 64, 32 );
 
-				for ( var i = 0; i < N; i ++ ) {
+				for ( let i = 0; i < N; i ++ ) {
 
-					var material = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
+					const material = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = ( 0.5 - Math.random() ) * 1000;
 					mesh.position.y = ( 0.5 - Math.random() ) * 1000;
@@ -114,9 +116,9 @@
 
 			function render() {
 
-				for ( var i = 0; i < N; i ++ ) {
+				for ( let i = 0; i < N; i ++ ) {
 
-					var mesh = meshes[ i ];
+					const mesh = meshes[ i ];
 					mesh.material = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
 
 				}
@@ -125,9 +127,9 @@
 
 				console.log( "before", renderer.info.programs.length );
 
-				for ( var i = 0; i < N; i ++ ) {
+				for ( let i = 0; i < N; i ++ ) {
 
-					var mesh = meshes[ i ];
+					const mesh = meshes[ i ];
 					mesh.material.dispose();
 
 				}

examples/webgl_tiled_forward.html

@@ -26,7 +26,7 @@
 			// Simple form of tiled forward lighting
 			// using texels as bitmasks of 32 lights
 
-			var RADIUS = 75;
+			const RADIUS = 75;
 
 			THREE.ShaderChunk[ 'lights_pars_begin' ] += [
 				'',
@@ -66,9 +66,9 @@
 				'#endif'
 			].join( '\n' );
 
-			var lights = [];
+			const lights = [];
 
-			var State = {
+			const State = {
 				rows: 0,
 				cols: 0,
 				width: 0,
@@ -82,8 +82,8 @@
 
 			function resizeTiles() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				State.width = width;
 				State.height = height;
@@ -99,20 +99,20 @@
 
 				if ( ! camera.projectionMatrix ) return;
 
-				var d = State.tileTexture.value.image.data;
-				var ld = State.lightTexture.value.image.data;
+				const d = State.tileTexture.value.image.data;
+				const ld = State.lightTexture.value.image.data;
 
-				var viewMatrix = camera.matrixWorldInverse;
+				const viewMatrix = camera.matrixWorldInverse;
 
 				d.fill( 0 );
 
-				var vector = new THREE.Vector3();
+				const vector = new THREE.Vector3();
 
 				lights.forEach( function ( light, index ) {
 
 					vector.setFromMatrixPosition( light.matrixWorld );
 
-					var bs = lightBounds( camera, vector, light._light.radius );
+					const bs = lightBounds( camera, vector, light._light.radius );
 
 					vector.applyMatrix4( viewMatrix );
 					vector.toArray( ld, 4 * index );
@@ -126,11 +126,11 @@
 					if ( bs[ 2 ] < 0 ) bs[ 2 ] = 0;
 					if ( bs[ 3 ] > State.height ) bs[ 3 ] = State.height;
 
-					var i4 = Math.floor( index / 8 ), i8 = 7 - ( index % 8 );
+					const i4 = Math.floor( index / 8 ), i8 = 7 - ( index % 8 );
 
-					for ( var i = Math.floor( bs[ 2 ] / 32 ); i <= Math.ceil( bs[ 3 ] / 32 ); i ++ ) {
+					for ( let i = Math.floor( bs[ 2 ] / 32 ); i <= Math.ceil( bs[ 3 ] / 32 ); i ++ ) {
 
-						for ( var j = Math.floor( bs[ 0 ] / 32 ); j <= Math.ceil( bs[ 1 ] / 32 ); j ++ ) {
+						for ( let j = Math.floor( bs[ 0 ] / 32 ); j <= Math.ceil( bs[ 1 ] / 32 ); j ++ ) {
 
 							d[ ( State.cols * i + j ) * 4 + i4 ] |= 1 << i8;
 
@@ -146,22 +146,23 @@
 			}
 
 			// Screen rectangle bounds from light sphere's world AABB
-			var lightBounds = function () {
+			const lightBounds = function () {
 
-				var v = new THREE.Vector3();
+				const v = new THREE.Vector3();
 				return function ( camera, pos, r ) {
 
-					var minX = State.width, maxX = 0, minY = State.height, maxY = 0, hw = State.width / 2, hh = State.height / 2;
+					let minX = State.width, maxX = 0, minY = State.height, maxY = 0;
+					const hw = State.width / 2, hh = State.height / 2;
 
-					for ( var i = 0; i < 8; i ++ ) {
+					for ( let i = 0; i < 8; i ++ ) {
 
 						v.copy( pos );
 						v.x += i & 1 ? r : - r;
 						v.y += i & 2 ? r : - r;
 						v.z += i & 4 ? r : - r;
-						var vector = v.project( camera );
-						var x = ( vector.x * hw ) + hw;
-						var y = ( vector.y * hh ) + hh;
+						const vector = v.project( camera );
+						const x = ( vector.x * hw ) + hw;
+						const y = ( vector.y * hh ) + hh;
 						minX = Math.min( minX, x );
 						maxX = Math.max( maxX, x );
 						minY = Math.min( minY, y );
@@ -178,36 +179,36 @@
 
 			// Rendering
 
-			var container = document.createElement( 'div' );
+			const container = document.createElement( 'div' );
 			document.body.appendChild( container );
-			var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
+			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 			camera.position.set( 0.0, 0.0, 240.0 );
-			var scene = new THREE.Scene();
+			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0x111111 );
 
-			var renderer = new THREE.WebGLRenderer();
+			const renderer = new THREE.WebGLRenderer();
 			renderer.toneMapping = THREE.NoToneMapping;
 			container.appendChild( renderer.domElement );
 
-			var renderTarget = new THREE.WebGLRenderTarget();
+			const renderTarget = new THREE.WebGLRenderTarget();
 
 			scene.add( new THREE.AmbientLight( 0xffffff, 0.33 ) );
 			// At least one regular Pointlight is needed to activate light support
 			scene.add( new THREE.PointLight( 0xff0000, 0.1, 0.1 ) );
 
-			var bloom = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 0.8, 0.6, 0.8 );
+			const bloom = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 0.8, 0.6, 0.8 );
 			bloom.renderToScreen = true;
 
-			var stats = new Stats();
+			const stats = new Stats();
 			container.appendChild( stats.dom );
 
-			var controls = new OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.minDistance = 120;
 			controls.maxDistance = 320;
 
-			var materials = [];
+			const materials = [];
 
-			var Heads = [
+			const Heads = [
 				{ type: 'physical', uniforms: { "diffuse": 0x888888, "metalness": 1.0, "roughness": 0.66 }, defines: {} },
 				{ type: 'standard', uniforms: { "diffuse": 0x666666, "metalness": 0.1, "roughness": 0.33 }, defines: {} },
 				{ type: 'phong', uniforms: { "diffuse": 0x777777, "shininess": 20 }, defines: {} },
@@ -216,15 +217,15 @@
 
 			function init( geom ) {
 
-				var sphereGeom = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
-				var tIndex = Math.round( Math.random() * 3 );
+				const sphereGeom = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
+				const tIndex = Math.round( Math.random() * 3 );
 
 				Object.keys( Heads ).forEach( function ( t, index ) {
 
-					var g = new THREE.Group();
-					var conf = Heads[ t ];
-					var ml = THREE.ShaderLib[ conf.type ];
-					var mtl = new THREE.ShaderMaterial( {
+					let g = new THREE.Group();
+					const conf = Heads[ t ];
+					const ml = THREE.ShaderLib[ conf.type ];
+					const mtl = new THREE.ShaderMaterial( {
 						lights: true,
 						fragmentShader: ml.fragmentShader,
 						vertexShader: ml.vertexShader,
@@ -240,9 +241,9 @@
 					mtl.uniforms[ "tileTexture" ] = State.tileTexture;
 					mtl.uniforms[ "lightTexture" ] = State.lightTexture;
 
-					for ( var u in conf.uniforms ) {
+					for ( const u in conf.uniforms ) {
 
-						var vu = conf.uniforms[ u ];
+						const vu = conf.uniforms[ u ];
 
 						if ( mtl.uniforms[ u ].value.set ) {
 
@@ -259,7 +260,7 @@
 					mtl.defines[ 'TILED_FORWARD' ] = 1;
 					materials.push( mtl );
 
-					var obj = new THREE.Mesh( geom, mtl );
+					const obj = new THREE.Mesh( geom, mtl );
 					obj.position.y = - 37;
 					mtl.side = tIndex === index ? THREE.FrontSide : THREE.DoubleSide;
 
@@ -268,10 +269,10 @@
 					g.position.z = Math.cos( index * Math.PI / 2 ) * RADIUS;
 					g.add( obj );
 
-					for ( var i = 0; i < 8; i ++ ) {
+					for ( let i = 0; i < 8; i ++ ) {
 
-						var color = new THREE.Color().setHSL( Math.random(), 1.0, 0.5 );
-						var l = new THREE.Group();
+						const color = new THREE.Color().setHSL( Math.random(), 1.0, 0.5 );
+						const l = new THREE.Group();
 
 						l.add( new THREE.Mesh(
 							sphereGeom,
@@ -319,8 +320,8 @@
 
 				lights.forEach( function ( l ) {
 
-					var ld = l._light;
-					var radius = 0.8 + 0.2 * Math.sin( ld.pr + ( 0.6 + 0.3 * ld.sr ) * now );
+					const ld = l._light;
+					const radius = 0.8 + 0.2 * Math.sin( ld.pr + ( 0.6 + 0.3 * ld.sr ) * now );
 					l.position.x = ( Math.sin( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
 					l.position.z = ( Math.cos( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
 					l.position.y = Math.sin( ld.py + ( 0.8 + 0.2 * ld.sy ) * now ) * radius * 32;
@@ -351,11 +352,11 @@
 
 			scene.onAfterRender = postEffect;
 
-			var loader = new OBJLoader();
+			const loader = new OBJLoader();
 
 			loader.load( 'models/obj/walt/WaltHead.obj', function ( object ) {
 
-				var geometry = object.children[ 0 ].geometry;
+				const geometry = object.children[ 0 ].geometry;
 
 				window.addEventListener( 'resize', resize );
 

examples/webgl_tonemapping.html

@@ -24,15 +24,15 @@
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			var mesh, renderer, scene, camera, controls;
-			var gui, guiExposure = null;
+			let mesh, renderer, scene, camera, controls;
+			let gui, guiExposure = null;
 
-			var params = {
+			const params = {
 				exposure: 1.0,
 				toneMapping: 'ACESFilmic'
 			};
 
-			var toneMappingOptions = {
+			const toneMappingOptions = {
 				None: THREE.NoToneMapping,
 				Linear: THREE.LinearToneMapping,
 				Reinhard: THREE.ReinhardToneMapping,
@@ -84,23 +84,23 @@
 				controls.target.set( 0, 0, - 0.2 );
 				controls.update();
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
-				var rgbeLoader = new RGBELoader()
+				const rgbeLoader = new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
 					.setPath( 'textures/equirectangular/' );
 
-				var gltfLoader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
+				const gltfLoader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
 
-				var [ texture, gltf ] = await Promise.all( [
+				const [ texture, gltf ] = await Promise.all( [
 					rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
 					gltfLoader.loadAsync( 'DamagedHelmet.gltf' ),
 				] );
 
 				// environment
 
-				var envMap = pmremGenerator.fromEquirectangular( texture ).texture;
+				const envMap = pmremGenerator.fromEquirectangular( texture ).texture;
 
 				scene.background = envMap;
 				scene.environment = envMap;

examples/webgl_trails.html

@@ -13,16 +13,16 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let stats;
 
-			var camera, scene, renderer, clock;
+			let camera, scene, renderer, clock;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
@@ -32,27 +32,27 @@
 
 				scene = new THREE.Scene();
 
-				var colorArray = [ new THREE.Color( 0xff0080 ), new THREE.Color( 0xffffff ), new THREE.Color( 0x8000ff ) ];
-				var positions = [];
-				var colors = [];
+				const colorArray = [ new THREE.Color( 0xff0080 ), new THREE.Color( 0xffffff ), new THREE.Color( 0x8000ff ) ];
+				const positions = [];
+				const colors = [];
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( let i = 0; i < 100; i ++ ) {
 
 					positions.push( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
 
-					var clr = colorArray[ Math.floor( Math.random() * colorArray.length ) ];
+					const clr = colorArray[ Math.floor( Math.random() * colorArray.length ) ];
 
 					colors.push( clr.r, clr.g, clr.b );
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				var material = new THREE.PointsMaterial( { size: 4, vertexColors: true, depthTest: false, sizeAttenuation: false } );
+				const material = new THREE.PointsMaterial( { size: 4, vertexColors: true, depthTest: false, sizeAttenuation: false } );
 
-				var mesh = new THREE.Points( geometry, material );
+				const mesh = new THREE.Points( geometry, material );
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
@@ -92,7 +92,7 @@
 
 			function render() {
 
-				var elapsedTime = clock.getElapsedTime();
+				const elapsedTime = clock.getElapsedTime();
 
 				scene.rotation.y = elapsedTime * 0.5;
 

examples/webgl_video_kinect.html

@@ -74,21 +74,19 @@
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var container;
-
-			var scene, camera, renderer;
-			var geometry, mesh, material;
-			var mouse, center;
+			let scene, camera, renderer;
+			let geometry, mesh, material;
+			let mouse, center;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var info = document.createElement( 'div' );
+				const info = document.createElement( 'div' );
 				info.id = 'info';
 				info.innerHTML = '<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - kinect';
 				document.body.appendChild( info );
@@ -100,19 +98,19 @@
 				center = new THREE.Vector3();
 				center.z = - 1000;
 
-				var video = document.getElementById( 'video' );
+				const video = document.getElementById( 'video' );
 
-				var texture = new THREE.VideoTexture( video );
+				const texture = new THREE.VideoTexture( video );
 				texture.minFilter = THREE.NearestFilter;
 
-				var width = 640, height = 480;
-				var nearClipping = 850, farClipping = 4000;
+				const width = 640, height = 480;
+				const nearClipping = 850, farClipping = 4000;
 
 				geometry = new THREE.BufferGeometry();
 
-				var vertices = new Float32Array( width * height * 3 );
+				const vertices = new Float32Array( width * height * 3 );
 
-				for ( var i = 0, j = 0, l = vertices.length; i < l; i += 3, j ++ ) {
+				for ( let i = 0, j = 0, l = vertices.length; i < l; i += 3, j ++ ) {
 
 					vertices[ i ] = j % width;
 					vertices[ i + 1 ] = Math.floor( j / width );
@@ -146,7 +144,7 @@
 				mesh = new THREE.Points( geometry, material );
 				scene.add( mesh );
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( material.uniforms.nearClipping, 'value', 1, 10000, 1.0 ).name( 'nearClipping' );
 				gui.add( material.uniforms.farClipping, 'value', 1, 10000, 1.0 ).name( 'farClipping' );
 				gui.add( material.uniforms.pointSize, 'value', 1, 10, 1.0 ).name( 'pointSize' );

examples/webgl_video_panorama_equirectangular.html

@@ -27,43 +27,41 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var isUserInteracting = false,
+			let isUserInteracting = false,
 				lon = 0, lat = 0,
 				phi = 0, theta = 0,
-				distance = 50,
 				onPointerDownPointerX = 0,
 				onPointerDownPointerY = 0,
 				onPointerDownLon = 0,
 				onPointerDownLat = 0;
 
+			const distance = 50;
+
 			init();
 			animate();
 
 			function init() {
 
-				var container, mesh;
-
-				container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 				camera.target = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				const geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
 				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
-				var video = document.getElementById( 'video' );
+				const video = document.getElementById( 'video' );
 				video.play();
 
-				var texture = new THREE.VideoTexture( video );
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
-
-				mesh = new THREE.Mesh( geometry, material );
+				const texture = new THREE.VideoTexture( video );
+				const material = new THREE.MeshBasicMaterial( { map: texture } );
 
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();

examples/webgl_water.html

@@ -21,11 +21,11 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Water } from './jsm/objects/Water2.js';
 
-			var scene, camera, clock, renderer, water;
+			let scene, camera, clock, renderer, water;
 
-			var torusKnot;
+			let torusKnot;
 
-			var params = {
+			const params = {
 				color: '#ffffff',
 				scale: 4,
 				flowX: 1,
@@ -53,8 +53,8 @@
 
 				// mesh
 
-				var torusKnotGeometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
-				var torusKnotMaterial = new THREE.MeshNormalMaterial();
+				const torusKnotGeometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
+				const torusKnotMaterial = new THREE.MeshNormalMaterial();
 
 				torusKnot = new THREE.Mesh( torusKnotGeometry, torusKnotMaterial );
 				torusKnot.position.y = 4;
@@ -63,13 +63,13 @@
 
 				// ground
 
-				var groundGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
-				var groundMaterial = new THREE.MeshStandardMaterial( { roughness: 0.8, metalness: 0.4 } );
-				var ground = new THREE.Mesh( groundGeometry, groundMaterial );
+				const groundGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
+				const groundMaterial = new THREE.MeshStandardMaterial( { roughness: 0.8, metalness: 0.4 } );
+				const ground = new THREE.Mesh( groundGeometry, groundMaterial );
 				ground.rotation.x = Math.PI * - 0.5;
 				scene.add( ground );
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 				textureLoader.load( 'textures/hardwood2_diffuse.jpg', function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
@@ -83,7 +83,7 @@
 
 				// water
 
-				var waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
+				const waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
 
 				water = new Water( waterGeometry, {
 					color: params.color,
@@ -99,10 +99,10 @@
 
 				// skybox
 
-				var cubeTextureLoader = new THREE.CubeTextureLoader();
+				const cubeTextureLoader = new THREE.CubeTextureLoader();
 				cubeTextureLoader.setPath( 'textures/cube/Park2/' );
 
-				var cubeTexture = cubeTextureLoader.load( [
+				const cubeTexture = cubeTextureLoader.load( [
 					"posx.jpg", "negx.jpg",
 					"posy.jpg", "negy.jpg",
 					"posz.jpg", "negz.jpg"
@@ -112,10 +112,10 @@
 
 				// light
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
 				directionalLight.position.set( - 1, 1, 1 );
 				scene.add( directionalLight );
 
@@ -128,7 +128,7 @@
 
 				// dat.gui
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.addColor( params, 'color' ).onChange( function ( value ) {
 
@@ -157,7 +157,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 5;
 				controls.maxDistance = 50;
 
@@ -185,7 +185,7 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				torusKnot.rotation.x += delta;
 				torusKnot.rotation.y += delta * 0.5;

examples/webgl_water_flowmap.html

@@ -21,7 +21,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Water } from './jsm/objects/Water2.js';
 
-			var scene, camera, renderer, water;
+			let scene, camera, renderer, water;
 
 			init();
 			animate();
@@ -40,13 +40,13 @@
 
 				// ground
 
-				var groundGeometry = new THREE.PlaneBufferGeometry( 20, 20, 10, 10 );
-				var groundMaterial = new THREE.MeshBasicMaterial( { color: 0xcccccc } );
-				var ground = new THREE.Mesh( groundGeometry, groundMaterial );
+				const groundGeometry = new THREE.PlaneBufferGeometry( 20, 20, 10, 10 );
+				const groundMaterial = new THREE.MeshBasicMaterial( { color: 0xcccccc } );
+				const ground = new THREE.Mesh( groundGeometry, groundMaterial );
 				ground.rotation.x = Math.PI * - 0.5;
 				scene.add( ground );
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 				textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg', function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
@@ -60,8 +60,8 @@
 
 				// water
 
-				var waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
-				var flowMap = textureLoader.load( 'textures/water/Water_1_M_Flow.jpg' );
+				const waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
+				const flowMap = textureLoader.load( 'textures/water/Water_1_M_Flow.jpg' );
 
 				water = new Water( waterGeometry, {
 					scale: 2,
@@ -76,9 +76,9 @@
 
 				// flow map helper
 
-				var helperGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
-				var helperMaterial = new THREE.MeshBasicMaterial( { map: flowMap } );
-				var helper = new THREE.Mesh( helperGeometry, helperMaterial );
+				const helperGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
+				const helperMaterial = new THREE.MeshBasicMaterial( { map: flowMap } );
+				const helper = new THREE.Mesh( helperGeometry, helperMaterial );
 				helper.position.y = 1.01;
 				helper.rotation.x = Math.PI * - 0.5;
 				helper.visible = false;
@@ -93,13 +93,13 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( helper, 'visible' ).name( 'Show Flow Map' );
 				gui.open();
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 5;
 				controls.maxDistance = 50;
 

examples/webgl_worker_offscreencanvas.html

@@ -71,12 +71,12 @@
 
 			// onscreen
 
-			var canvas1 = document.getElementById( 'canvas1' );
-			var canvas2 = document.getElementById( 'canvas2' );
+			const canvas1 = document.getElementById( 'canvas1' );
+			const canvas2 = document.getElementById( 'canvas2' );
 
-			var width = canvas1.clientWidth;
-			var height = canvas1.clientHeight;
-			var pixelRatio = window.devicePixelRatio;
+			const width = canvas1.clientWidth;
+			const height = canvas1.clientHeight;
+			const pixelRatio = window.devicePixelRatio;
 
 			init( canvas1, width, height, pixelRatio, './' );
 			initJank();
@@ -85,8 +85,8 @@
 
 			if ( 'transferControlToOffscreen' in canvas2 ) {
 
-				var offscreen = canvas2.transferControlToOffscreen();
-				var worker = new Worker( 'jsm/offscreen/offscreen.js', { type: 'module' } );
+				const offscreen = canvas2.transferControlToOffscreen();
+				const worker = new Worker( 'jsm/offscreen/offscreen.js', { type: 'module' } );
 				worker.postMessage( {
 					drawingSurface: offscreen,
 					width: canvas2.clientWidth,

examples/webxr_ar_cones.html

@@ -17,23 +17,22 @@
 			import * as THREE from '../build/three.module.js';
 			import { ARButton } from './jsm/webxr/ARButton.js';
 
-			var container;
-			var camera, scene, renderer;
-			var controller;
+			let camera, scene, renderer;
+			let controller;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				scene = new THREE.Scene();
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 );
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
 				light.position.set( 0.5, 1, 0.25 );
 				scene.add( light );
 
@@ -51,12 +50,12 @@
 
 				//
 
-				var geometry = new THREE.CylinderBufferGeometry( 0, 0.05, 0.2, 32 ).rotateX( Math.PI / 2 );
+				const geometry = new THREE.CylinderBufferGeometry( 0, 0.05, 0.2, 32 ).rotateX( Math.PI / 2 );
 
 				function onSelect() {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set( 0, 0, - 0.3 ).applyMatrix4( controller.matrixWorld );
 					mesh.quaternion.setFromRotationMatrix( controller.matrixWorld );
 					scene.add( mesh );

examples/webxr_ar_hittest.html

@@ -17,14 +17,14 @@
 			import * as THREE from '../build/three.module.js';
 			import { ARButton } from './jsm/webxr/ARButton.js';
 
-			var container;
-			var camera, scene, renderer;
-			var controller;
+			let container;
+			let camera, scene, renderer;
+			let controller;
 
-			var reticle;
+			let reticle;
 
-			var hitTestSource = null;
-			var hitTestSourceRequested = false;
+			let hitTestSource = null;
+			let hitTestSourceRequested = false;
 
 			init();
 			animate();
@@ -38,7 +38,7 @@
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 );
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
 				light.position.set( 0.5, 1, 0.25 );
 				scene.add( light );
 
@@ -56,14 +56,14 @@
 
 				//
 
-				var geometry = new THREE.CylinderBufferGeometry( 0.1, 0.1, 0.2, 32 ).translate( 0, 0.1, 0 );
+				const geometry = new THREE.CylinderBufferGeometry( 0.1, 0.1, 0.2, 32 ).translate( 0, 0.1, 0 );
 
 				function onSelect() {
 
 					if ( reticle.visible ) {
 
-						var material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } );
-						var mesh = new THREE.Mesh( geometry, material );
+						const material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } );
+						const mesh = new THREE.Mesh( geometry, material );
 						mesh.position.setFromMatrixPosition( reticle.matrix );
 						mesh.scale.y = Math.random() * 2 + 1;
 						scene.add( mesh );
@@ -111,8 +111,8 @@
 
 				if ( frame ) {
 
-					var referenceSpace = renderer.xr.getReferenceSpace();
-					var session = renderer.xr.getSession();
+					const referenceSpace = renderer.xr.getReferenceSpace();
+					const session = renderer.xr.getSession();
 
 					if ( hitTestSourceRequested === false ) {
 
@@ -139,11 +139,11 @@
 
 					if ( hitTestSource ) {
 
-						var hitTestResults = frame.getHitTestResults( hitTestSource );
+						const hitTestResults = frame.getHitTestResults( hitTestSource );
 
 						if ( hitTestResults.length ) {
 
-							var hit = hitTestResults[ 0 ];
+							const hit = hitTestResults[ 0 ];
 
 							reticle.visible = true;
 							reticle.matrix.fromArray( hit.getPose( referenceSpace ).transform.matrix );

examples/webxr_ar_paint.html

@@ -18,11 +18,11 @@
 			import { TubePainter } from './jsm/misc/TubePainter.js';
 			import { ARButton } from './jsm/webxr/ARButton.js';
 
-			var container;
-			var camera, scene, renderer;
-			var controller, painter;
+			let container;
+			let camera, scene, renderer;
+			let controller, painter;
 
-			var cursor = new THREE.Vector3();
+			const cursor = new THREE.Vector3();
 
 			init();
 			animate();
@@ -50,7 +50,7 @@
 
 				// model
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
 				light.position.set( 0, 1, 0 );
 				scene.add( light );
 
@@ -101,7 +101,7 @@
 
 			function handleController( controller ) {
 
-				var userData = controller.userData;
+				const userData = controller.userData;
 
 				cursor.set( 0, 0, - 0.2 ).applyMatrix4( controller.matrixWorld );
 

examples/webxr_vr_ballshooter.html

@@ -20,18 +20,18 @@
 			import { VRButton } from './jsm/webxr/VRButton.js';
 			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
 
-			var camera, scene, renderer;
-			var controller1, controller2;
-			var controllerGrip1, controllerGrip2;
+			let camera, scene, renderer;
+			let controller1, controller2;
+			let controllerGrip1, controllerGrip2;
 
-			var room;
+			let room;
 
-			var count = 0;
-			var radius = 0.08;
-			var normal = new THREE.Vector3();
-			var relativeVelocity = new THREE.Vector3();
+			let count = 0;
+			const radius = 0.08;
+			let normal = new THREE.Vector3();
+			const relativeVelocity = new THREE.Vector3();
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -53,15 +53,15 @@
 
 				scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.IcosahedronBufferGeometry( radius, 3 );
+				const geometry = new THREE.IcosahedronBufferGeometry( radius, 3 );
 
-				for ( var i = 0; i < 200; i ++ ) {
+				for ( let i = 0; i < 200; 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() * 4 - 2;
 					object.position.y = Math.random() * 4;
@@ -138,7 +138,7 @@
 				// should be attached to the object returned from getControllerGrip in
 				// order to match the orientation of the held device.
 
-				var controllerModelFactory = new XRControllerModelFactory();
+				const controllerModelFactory = new XRControllerModelFactory();
 
 				controllerGrip1 = renderer.xr.getControllerGrip( 0 );
 				controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
@@ -156,22 +156,24 @@
 
 			function buildController( data ) {
 
+				let geometry, material;
+
 				switch ( data.targetRayMode ) {
 
 					case 'tracked-pointer':
 
-						var geometry = new THREE.BufferGeometry();
+						geometry = new THREE.BufferGeometry();
 						geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
 						geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
 
-						var material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );
+						material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );
 
 						return new THREE.Line( geometry, material );
 
 					case 'gaze':
 
-						var geometry = new THREE.RingBufferGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
-						var material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
+						geometry = new THREE.RingBufferGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
+						material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
 						return new THREE.Mesh( geometry, material );
 
 				}
@@ -191,7 +193,7 @@
 
 				if ( controller.userData.isSelecting ) {
 
-					var object = room.children[ count ++ ];
+					const object = room.children[ count ++ ];
 
 					object.position.copy( controller.position );
 					object.userData.velocity.x = ( Math.random() - 0.5 ) * 3;
@@ -220,13 +222,13 @@
 
 				//
 
-				var delta = clock.getDelta() * 0.8; // slow down simulation
+				const delta = clock.getDelta() * 0.8; // slow down simulation
 
-				var range = 3 - radius;
+				const range = 3 - radius;
 
-				for ( var i = 0; i < room.children.length; i ++ ) {
+				for ( let i = 0; i < room.children.length; i ++ ) {
 
-					var object = room.children[ i ];
+					const object = room.children[ i ];
 
 					object.position.x += object.userData.velocity.x * delta;
 					object.position.y += object.userData.velocity.y * delta;
@@ -258,13 +260,13 @@
 
 					}
 
-					for ( var j = i + 1; j < room.children.length; j ++ ) {
+					for ( let j = i + 1; j < room.children.length; j ++ ) {
 
-						var object2 = room.children[ j ];
+						const object2 = room.children[ j ];
 
 						normal.copy( object.position ).sub( object2.position );
 
-						var distance = normal.length();
+						const distance = normal.length();
 
 						if ( distance < 2 * radius ) {
 

examples/webxr_vr_cubes.html

@@ -20,15 +20,16 @@
 			import { VRButton } from './jsm/webxr/VRButton.js';
 			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
-			var container;
-			var camera, scene, raycaster, renderer;
+			let container;
+			let camera, scene, raycaster, renderer;
 
-			var room;
+			let room;
 
-			var controller, controllerGrip, tempMatrix = new THREE.Matrix4();
-			var INTERSECTED;
+			let controller, controllerGrip;
+			let INTERSECTED;
+			const tempMatrix = new THREE.Matrix4();
 
 			init();
 			animate();
@@ -53,15 +54,15 @@
 
 				scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.BoxBufferGeometry( 0.15, 0.15, 0.15 );
+				const geometry = new THREE.BoxBufferGeometry( 0.15, 0.15, 0.15 );
 
-				for ( var i = 0; i < 200; i ++ ) {
+				for ( let i = 0; i < 200; 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() * 4 - 2;
 					object.position.y = Math.random() * 4;
@@ -122,7 +123,7 @@
 				} );
 				scene.add( controller );
 
-				var controllerModelFactory = new XRControllerModelFactory();
+				const controllerModelFactory = new XRControllerModelFactory();
 
 				controllerGrip = renderer.xr.getControllerGrip( 0 );
 				controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) );
@@ -138,22 +139,24 @@
 
 			function buildController( data ) {
 
+				let geometry, material;
+
 				switch ( data.targetRayMode ) {
 
 					case 'tracked-pointer':
 
-						var geometry = new THREE.BufferGeometry();
+						geometry = new THREE.BufferGeometry();
 						geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
 						geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
 
-						var material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );
+						material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );
 
 						return new THREE.Line( geometry, material );
 
 					case 'gaze':
 
-						var geometry = new THREE.RingBufferGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
-						var material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
+						geometry = new THREE.RingBufferGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
+						material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
 						return new THREE.Mesh( geometry, material );
 
 				}
@@ -179,11 +182,11 @@
 
 			function render() {
 
-				var delta = clock.getDelta() * 60;
+				const delta = clock.getDelta() * 60;
 
 				if ( controller.userData.isSelecting === true ) {
 
-					var cube = room.children[ 0 ];
+					const cube = room.children[ 0 ];
 					room.remove( cube );
 
 					cube.position.copy( controller.position );
@@ -202,7 +205,7 @@
 				raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
 				raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
 
-				var intersects = raycaster.intersectObjects( room.children );
+				const intersects = raycaster.intersectObjects( room.children );
 
 				if ( intersects.length > 0 ) {
 
@@ -226,9 +229,9 @@
 
 				// Keep cubes inside room
 
-				for ( var i = 0; i < room.children.length; i ++ ) {
+				for ( let i = 0; i < room.children.length; i ++ ) {
 
-					var cube = room.children[ i ];
+					const cube = room.children[ i ];
 
 					cube.userData.velocity.multiplyScalar( 1 - ( 0.001 * delta ) );
 

examples/webxr_vr_dragging.html

@@ -19,15 +19,17 @@
 			import { VRButton } from './jsm/webxr/VRButton.js';
 			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
 
-			var container;
-			var camera, scene, renderer;
-			var controller1, controller2;
-			var controllerGrip1, controllerGrip2;
+			let container;
+			let camera, scene, renderer;
+			let controller1, controller2;
+			let controllerGrip1, controllerGrip2;
 
-			var raycaster, intersected = [];
-			var tempMatrix = new THREE.Matrix4();
+			let raycaster;
 
-			var controls, group;
+			const intersected = [];
+			const tempMatrix = new THREE.Matrix4();
+
+			let controls, group;
 
 			init();
 			animate();
@@ -47,20 +49,20 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
-				var material = new THREE.MeshStandardMaterial( {
+				const floorGeometry = new THREE.PlaneBufferGeometry( 4, 4 );
+				const floorMaterial = new THREE.MeshStandardMaterial( {
 					color: 0xeeeeee,
 					roughness: 1.0,
 					metalness: 0.0
 				} );
-				var floor = new THREE.Mesh( geometry, material );
+				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
 				scene.add( floor );
 
 				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 2;
@@ -73,7 +75,7 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				var geometries = [
+				const geometries = [
 					new THREE.BoxBufferGeometry( 0.2, 0.2, 0.2 ),
 					new THREE.ConeBufferGeometry( 0.2, 0.2, 64 ),
 					new THREE.CylinderBufferGeometry( 0.2, 0.2, 0.2, 64 ),
@@ -81,16 +83,16 @@
 					new THREE.TorusBufferGeometry( 0.2, 0.04, 64, 32 )
 				];
 
-				for ( var i = 0; i < 50; i ++ ) {
+				for ( let i = 0; i < 50; i ++ ) {
 
-					var geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
-					var material = new THREE.MeshStandardMaterial( {
+					const geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
+					const material = new THREE.MeshStandardMaterial( {
 						color: Math.random() * 0xffffff,
 						roughness: 0.7,
 						metalness: 0.0
 					} );
 
-					var object = new THREE.Mesh( geometry, material );
+					const object = new THREE.Mesh( geometry, material );
 
 					object.position.x = Math.random() * 4 - 2;
 					object.position.y = Math.random() * 2;
@@ -133,7 +135,7 @@
 				controller2.addEventListener( 'selectend', onSelectEnd );
 				scene.add( controller2 );
 
-				var controllerModelFactory = new XRControllerModelFactory();
+				const controllerModelFactory = new XRControllerModelFactory();
 
 				controllerGrip1 = renderer.xr.getControllerGrip( 0 );
 				controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
@@ -145,9 +147,9 @@
 
 				//
 
-				var geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
+				const geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
 
-				var line = new THREE.Line( geometry );
+				const line = new THREE.Line( geometry );
 				line.name = 'line';
 				line.scale.z = 5;
 
@@ -173,15 +175,15 @@
 
 			function onSelectStart( event ) {
 
-				var controller = event.target;
+				const controller = event.target;
 
-				var intersections = getIntersections( controller );
+				const intersections = getIntersections( controller );
 
 				if ( intersections.length > 0 ) {
 
-					var intersection = intersections[ 0 ];
+					const intersection = intersections[ 0 ];
 
-					var object = intersection.object;
+					const object = intersection.object;
 					object.material.emissive.b = 1;
 					controller.attach( object );
 
@@ -193,11 +195,11 @@
 
 			function onSelectEnd( event ) {
 
-				var controller = event.target;
+				const controller = event.target;
 
 				if ( controller.userData.selected !== undefined ) {
 
-					var object = controller.userData.selected;
+					const object = controller.userData.selected;
 					object.material.emissive.b = 0;
 					group.attach( object );
 
@@ -225,14 +227,14 @@
 
 				if ( controller.userData.selected !== undefined ) return;
 
-				var line = controller.getObjectByName( 'line' );
-				var intersections = getIntersections( controller );
+				const line = controller.getObjectByName( 'line' );
+				const intersections = getIntersections( controller );
 
 				if ( intersections.length > 0 ) {
 
-					var intersection = intersections[ 0 ];
+					const intersection = intersections[ 0 ];
 
-					var object = intersection.object;
+					const object = intersection.object;
 					object.material.emissive.r = 1;
 					intersected.push( object );
 
@@ -250,7 +252,7 @@
 
 				while ( intersected.length ) {
 
-					var object = intersected.pop();
+					const object = intersected.pop();
 					object.material.emissive.r = 0;
 
 				}

examples/webxr_vr_handinput.html

@@ -21,13 +21,13 @@
 			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
 			import { XRHandModelFactory } from './jsm/webxr/XRHandModelFactory.js';
 
-			var container;
-			var camera, scene, renderer;
-			var hand1, hand2;
-			var controller1, controller2;
-			var controllerGrip1, controllerGrip2;
+			let container;
+			let camera, scene, renderer;
+			let hand1, hand2;
+			let controller1, controller2;
+			let controllerGrip1, controllerGrip2;
 
-			var controls;
+			let controls;
 
 			init();
 			animate();
@@ -47,16 +47,16 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
-				var material = new THREE.MeshStandardMaterial( { color: 0x222222 } );
-				var floor = new THREE.Mesh( geometry, material );
+				const floorGeometry = new THREE.PlaneBufferGeometry( 4, 4 );
+				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x222222 } );
+				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
 				scene.add( floor );
 
 				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 2;
@@ -87,8 +87,8 @@
 				controller2 = renderer.xr.getController( 1 );
 				scene.add( controller2 );
 
-				var controllerModelFactory = new XRControllerModelFactory();
-				var handModelFactory = new XRHandModelFactory().setPath( "./models/fbx/" );
+				const controllerModelFactory = new XRControllerModelFactory();
+				const handModelFactory = new XRHandModelFactory().setPath( "./models/fbx/" );
 
 				// Hand 1
 				controllerGrip1 = renderer.xr.getControllerGrip( 0 );
@@ -111,9 +111,9 @@
 
 				//
 
-				var geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
+				const geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
 
-				var line = new THREE.Line( geometry );
+				const line = new THREE.Line( geometry );
 				line.name = 'line';
 				line.scale.z = 5;
 

examples/webxr_vr_handinput_cubes.html

@@ -21,23 +21,23 @@
 			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
 			import { XRHandModelFactory } from './jsm/webxr/XRHandModelFactory.js';
 
-			var container;
-			var camera, scene, renderer;
-			var hand1, hand2;
-			var controller1, controller2;
-			var controllerGrip1, controllerGrip2;
+			let container;
+			let camera, scene, renderer;
+			let hand1, hand2;
+			let controller1, controller2;
+			let controllerGrip1, controllerGrip2;
 
-			var controls;
+			let controls;
 
-			var grabbing = false;
-			var scaling = {
+			let grabbing = false;
+			const scaling = {
 				active: false,
 				initialDistance: 0,
 				object: null,
 				initialScale: 1
 			};
 
-			var spheres = [];
+			const spheres = [];
 
 			init();
 			animate();
@@ -57,16 +57,16 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
-				var material = new THREE.MeshStandardMaterial( { color: 0x222222 } );
-				var floor = new THREE.Mesh( geometry, material );
+				const floorGeometry = new THREE.PlaneBufferGeometry( 4, 4 );
+				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x222222 } );
+				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
 				scene.add( floor );
 
 				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 2;
@@ -97,8 +97,8 @@
 				controller2 = renderer.xr.getController( 1 );
 				scene.add( controller2 );
 
-				var controllerModelFactory = new XRControllerModelFactory();
-				var handModelFactory = new XRHandModelFactory().setPath( "./models/fbx/" );
+				const controllerModelFactory = new XRControllerModelFactory();
+				const handModelFactory = new XRHandModelFactory().setPath( "./models/fbx/" );
 
 				// Hand 1
 				controllerGrip1 = renderer.xr.getControllerGrip( 0 );
@@ -129,9 +129,9 @@
 
 				//
 
-				var geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
+				const geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
 
-				var line = new THREE.Line( geometry );
+				const line = new THREE.Line( geometry );
 				line.name = 'line';
 				line.scale.z = 5;
 
@@ -156,7 +156,7 @@
 			const SphereRadius = 0.05;
 			function onPinchStartLeft( event ) {
 
-				var controller = event.target;
+				const controller = event.target;
 
 				if ( grabbing ) {
 
@@ -181,13 +181,13 @@
 
 				}
 
-				var geometry = new THREE.BoxBufferGeometry( SphereRadius, SphereRadius, SphereRadius );
-				var material = new THREE.MeshStandardMaterial( {
+				const geometry = new THREE.BoxBufferGeometry( SphereRadius, SphereRadius, SphereRadius );
+				const material = new THREE.MeshStandardMaterial( {
 					color: Math.random() * 0xffffff,
 					roughness: 1.0,
 					metalness: 0.0
 				} );
-				var spawn = new THREE.Mesh( geometry, material );
+				const spawn = new THREE.Mesh( geometry, material );
 				spawn.geometry.computeBoundingSphere();
 
 				const indexTip = controller.joints[ XRHand.INDEX_PHALANX_TIP ];
@@ -202,7 +202,7 @@
 
 			function collideObject( indexTip ) {
 
-				for ( var i = 0; i < spheres.length; i ++ ) {
+				for ( let i = 0; i < spheres.length; i ++ ) {
 
 					const sphere = spheres[ i ];
 					const distance = indexTip.getWorldPosition().distanceTo( sphere.getWorldPosition() );
@@ -221,7 +221,7 @@
 
 			function onPinchStartRight( event ) {
 
-				var controller = event.target;
+				const controller = event.target;
 				const indexTip = controller.joints[ XRHand.INDEX_PHALANX_TIP ];
 				const object = collideObject( indexTip );
 				if ( object ) {
@@ -237,11 +237,11 @@
 
 			function onPinchEndRight( event ) {
 
-				var controller = event.target;
+				const controller = event.target;
 
 				if ( controller.userData.selected !== undefined ) {
 
-					var object = controller.userData.selected;
+					const object = controller.userData.selected;
 					object.material.emissive.b = 0;
 					scene.attach( object );
 

examples/webxr_vr_handinput_profiles.html

@@ -21,23 +21,23 @@
 			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
 			import { XRHandModelFactory } from './jsm/webxr/XRHandModelFactory.js';
 
-			var container;
-			var camera, scene, renderer;
-			var hand1, hand2;
-			var controller1, controller2;
-			var controllerGrip1, controllerGrip2;
+			let container;
+			let camera, scene, renderer;
+			let hand1, hand2;
+			let controller1, controller2;
+			let controllerGrip1, controllerGrip2;
 
-			var currentHandModel = {
+			const currentHandModel = {
 				left: 0,
 				right: 0
 			};
 
-			var handModels = {
+			const handModels = {
 				left: null,
 				right: null
 			};
 
-			var controls;
+			let controls;
 
 			init();
 			animate();
@@ -59,16 +59,16 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
-				var material = new THREE.MeshStandardMaterial( { color: 0x222222 } );
-				var floor = new THREE.Mesh( geometry, material );
+				const floorGeometry = new THREE.PlaneBufferGeometry( 4, 4 );
+				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x222222 } );
+				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
 				scene.add( floor );
 
 				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 2;
@@ -99,8 +99,8 @@
 				controller2 = renderer.xr.getController( 1 );
 				scene.add( controller2 );
 
-				var controllerModelFactory = new XRControllerModelFactory();
-				var handModelFactory = new XRHandModelFactory().setPath( "./models/fbx/" );
+				const controllerModelFactory = new XRControllerModelFactory();
+				const handModelFactory = new XRHandModelFactory().setPath( "./models/fbx/" );
 
 				// Hand 1
 
@@ -176,9 +176,9 @@
 				//
 				window.hands = [ hand1, hand2 ];
 
-				var geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
+				const geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
 
-				var line = new THREE.Line( geometry );
+				const line = new THREE.Line( geometry );
 				line.name = 'line';
 				line.scale.z = 5;
 

examples/webxr_vr_haptics.html

@@ -19,16 +19,16 @@
 			import { VRButton } from './jsm/webxr/VRButton.js';
 			import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
 
-			var container;
-			var camera, scene, renderer;
-			var controller1, controller2;
-			var controllerGrip1, controllerGrip2;
-			var box = new THREE.Box3();
+			let container;
+			let camera, scene, renderer;
+			let controller1, controller2;
+			let controllerGrip1, controllerGrip2;
+			const box = new THREE.Box3();
 
-			var controllers = [];
-			var oscillators = [];
-			var controls, group;
-			var audioCtx = null;
+			const controllers = [];
+			const oscillators = [];
+			let controls, group;
+			let audioCtx = null;
 
 			init();
 			animate();
@@ -44,7 +44,7 @@
 				audioCtx = new ( window.AudioContext || window.webkitAudioContext )();
 				function createOscillator() {
 
-					let oscillator = audioCtx.createOscillator();
+					const oscillator = audioCtx.createOscillator();
 					const real = Array.from( { length: 8192 }, ( _, n ) => (
 						n === 0 ?
 							0 :
@@ -60,6 +60,7 @@
 				oscillators.push( createOscillator() );
 				oscillators.push( createOscillator() );
 				window.oscillators = oscillators;
+
 			}
 
 			function init() {
@@ -77,20 +78,20 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
-				var material = new THREE.MeshStandardMaterial( {
+				const floorGeometry = new THREE.PlaneBufferGeometry( 4, 4 );
+				const floorMaterial = new THREE.MeshStandardMaterial( {
 					color: 0xeeeeee,
 					roughness: 1.0,
 					metalness: 0.0
 				} );
-				var floor = new THREE.Mesh( geometry, material );
+				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
 				scene.add( floor );
 
 				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 2;
@@ -104,20 +105,20 @@
 				group.position.z = - 0.5;
 				scene.add( group );
 
-				for ( var i = 0; i < 10; i ++ ) {
+				for ( let i = 0; i < 10; i ++ ) {
 
 					const intensity = ( i + 1 ) / 10;
 					const w = 0.1;
 					const h = 0.1;
 					const minH = 1;
-					var geometry = new THREE.BoxBufferGeometry( w, h * i + minH, w );
-					var material = new THREE.MeshStandardMaterial( {
+					const geometry = new THREE.BoxBufferGeometry( w, h * i + minH, w );
+					const material = new THREE.MeshStandardMaterial( {
 						color: new THREE.Color( intensity, 0.1, 0.1 ),
 						roughness: 0.7,
 						metalness: 0.0
 					} );
 
-					var object = new THREE.Mesh( geometry, material );
+					const object = new THREE.Mesh( geometry, material );
 					object.position.x = ( i - 5 ) * ( w + 0.05 );
 					object.castShadow = true;
 					object.receiveShadow = true;
@@ -156,7 +157,7 @@
 				controller2 = renderer.xr.getController( 1 );
 				scene.add( controller2 );
 
-				var controllerModelFactory = new XRControllerModelFactory();
+				const controllerModelFactory = new XRControllerModelFactory();
 
 				controllerGrip1 = renderer.xr.getControllerGrip( 0 );
 				controllerGrip1.addEventListener( "connected", controllerConnected );
@@ -217,19 +218,19 @@
 
 			function handleCollisions() {
 
-				for ( var g = 0; g < controllers.length; g ++ ) {
+				for ( let g = 0; g < controllers.length; g ++ ) {
 
 					controllers[ g ].colliding = false;
 
 					const { grip, gamepad } = controllers[ g ];
-					var sphere = {
+					const sphere = {
 						radius: 0.03,
 						center: grip.position
 					};
 
 					if ( "hapticActuators" in gamepad && gamepad.hapticActuators != null && gamepad.hapticActuators.length > 0 ) {
 
-						for ( var i = 0; i < group.children.length; i ++ ) {
+						for ( let i = 0; i < group.children.length; i ++ ) {
 
 							const child = group.children[ i ];
 							box.setFromObject( child );

examples/webxr_vr_lorenzattractor.html

@@ -12,41 +12,41 @@
 			import * as THREE from '../build/three.module.js';
 			import { VRButton } from './jsm/webxr/VRButton.js';
 
-			var camera, scene, renderer;
-			var attractor, light;
+			let camera, scene, renderer;
+			let attractor, light;
 
-			var x = 15 * Math.random();
-			var y = 15 * Math.random();
-			var z = 15 * Math.random();
+			let x = 15 * Math.random();
+			let y = 15 * Math.random();
+			let z = 15 * Math.random();
 
-			var scale = .02; // for reducing overall displayed size
-			var speed = 5; // integer, increase for faster visualization
+			const scale = .02; // for reducing overall displayed size
+			const speed = 5; // integer, increase for faster visualization
 
-			var steps = 100000;
-			var current = 1;
-			var shown = 10000;
+			const steps = 100000;
+			let current = 1;
+			const shown = 10000;
 
-			var beta = 8 / 3;
-			var rho = 28;
-			var sigma = 10;
+			const beta = 8 / 3;
+			const rho = 28;
+			const sigma = 10;
 
-			var dt = .005;
+			const dt = .005;
 
 			init();
 			animate();
 
 			function draw() {
 
-				var geometry = attractor.geometry;
+				const geometry = attractor.geometry;
 
 				geometry.attributes.position.array.copyWithin( 3 );
 				geometry.attributes.color.array.copyWithin( 3 );
 
 				if ( current < steps ) {
 
-					var dx = sigma * ( y - x ) * dt;
-					var dy = ( x * ( rho - z ) - y ) * dt;
-					var dz = ( x * y - beta * z ) * dt;
+					const dx = sigma * ( y - x ) * dt;
+					const dy = ( x * ( rho - z ) - y ) * dt;
+					const dz = ( x * y - beta * z ) * dt;
 
 					x += dx;
 					y += dy;
@@ -81,11 +81,11 @@
 
 				//
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 
-				var positions = new Float32Array( 3 * shown );
+				const positions = new Float32Array( 3 * shown );
 
-				for ( var i = 0; i < positions.length; i += 3 ) {
+				for ( let i = 0; i < positions.length; i += 3 ) {
 
 					positions.set( [ scale * x, scale * y, scale * z ], i );
 
@@ -93,9 +93,9 @@
 
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
-				var colors = new Float32Array( 3 * shown );
+				const colors = new Float32Array( 3 * shown );
 
-				for ( var i = 0; i < positions.length; i += 3 ) {
+				for ( let i = 0; i < positions.length; i += 3 ) {
 
 					colors.set( [ 1, 0, 0 ], i );
 
@@ -103,7 +103,7 @@
 
 				geometry.setAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 
-				var material = new THREE.LineBasicMaterial( { vertexColors: true } );
+				const material = new THREE.LineBasicMaterial( { vertexColors: true } );
 
 				attractor = new THREE.Line( geometry, material );
 				attractor.position.set( 0, 1.5, - 2 );
@@ -116,7 +116,7 @@
 				light.distance = 2;
 				attractor.add( light );
 
-				var ground = new THREE.Mesh(
+				const ground = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 10, 10 ),
 					new THREE.MeshPhongMaterial()
 				);
@@ -139,7 +139,7 @@
 
 				//
 
-				if ( typeof TESTING !== 'undefined'  ) { for ( var i = 0; i < 200; i ++ ) { render(); } };
+				if ( typeof TESTING !== 'undefined'  ) { for ( let i = 0; i < 200; i ++ ) { render(); } };
 
 			}
 
@@ -160,7 +160,7 @@
 
 			function render() {
 
-				for ( var i = 0; i < speed; i ++ ) draw();
+				for ( let i = 0; i < speed; i ++ ) draw();
 
 				attractor.geometry.attributes.position.needsUpdate = true;
 				attractor.geometry.attributes.color.needsUpdate = true;

examples/webxr_vr_paint.html

@@ -19,20 +19,19 @@
 			import { TubePainter } from './jsm/misc/TubePainter.js';
 			import { VRButton } from './jsm/webxr/VRButton.js';
 
-			var container;
-			var camera, scene, renderer;
-			var controller1, controller2;
+			let camera, scene, renderer;
+			let controller1, controller2;
 
-			var cursor = new THREE.Vector3();
+			const cursor = new THREE.Vector3();
 
-			var controls;
+			let controls;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				scene = new THREE.Scene();
@@ -45,43 +44,43 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				var geometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
-				var material = new THREE.MeshStandardMaterial( {
+				const tableGeometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
+				const tableMaterial = new THREE.MeshStandardMaterial( {
 					color: 0x444444,
 					roughness: 1.0,
 					metalness: 0.0
 				} );
-				var table = new THREE.Mesh( geometry, material );
+				const table = new THREE.Mesh( tableGeometry, tableMaterial );
 				table.position.y = 0.35;
 				table.position.z = 0.85;
 				scene.add( table );
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
-				var material = new THREE.MeshStandardMaterial( {
+				const floorGometry = new THREE.PlaneBufferGeometry( 4, 4 );
+				const floorMaterial = new THREE.MeshStandardMaterial( {
 					color: 0x222222,
 					roughness: 1.0,
 					metalness: 0.0
 				} );
-				var floor = new THREE.Mesh( geometry, material );
+				const floor = new THREE.Mesh( floorGometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				scene.add( floor );
 
-				var grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
+				const grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
 				// grid.material.depthTest = false; // avoid z-fighting
 				scene.add( grid );
 
 				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const light = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				light.position.set( 0, 4, 0 );
 				scene.add( light );
 
 				//
 
-				var painter1 = new TubePainter();
+				const painter1 = new TubePainter();
 				scene.add( painter1.mesh );
 
-				var painter2 = new TubePainter();
+				const painter2 = new TubePainter();
 				scene.add( painter2.mesh );
 
 				//
@@ -141,12 +140,12 @@
 
 				//
 
-				var geometry = new THREE.CylinderBufferGeometry( 0.01, 0.02, 0.08, 5 );
+				const geometry = new THREE.CylinderBufferGeometry( 0.01, 0.02, 0.08, 5 );
 				geometry.rotateX( - Math.PI / 2 );
-				var material = new THREE.MeshStandardMaterial( { flatShading: true } );
-				var mesh = new THREE.Mesh( geometry, material );
+				const material = new THREE.MeshStandardMaterial( { flatShading: true } );
+				const mesh = new THREE.Mesh( geometry, material );
 
-				var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 3 ) );
+				const pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 3 ) );
 				pivot.name = 'pivot';
 				pivot.position.z = - 0.05;
 				mesh.add( pivot );
@@ -173,15 +172,15 @@
 
 			function handleController( controller ) {
 
-				var userData = controller.userData;
-				var painter = userData.painter;
+				const userData = controller.userData;
+				const painter = userData.painter;
 
-				var pivot = controller.getObjectByName( 'pivot' );
+				const pivot = controller.getObjectByName( 'pivot' );
 
 				if ( userData.isSqueezing === true ) {
 
-					var delta = ( controller.position.y - userData.positionAtSqueezeStart ) * 5;
-					var scale = Math.max( 0.1, userData.scaleAtSqueezeStart + delta );
+					const delta = ( controller.position.y - userData.positionAtSqueezeStart ) * 5;
+					const scale = Math.max( 0.1, userData.scaleAtSqueezeStart + delta );
 
 					pivot.scale.setScalar( scale );
 					painter.setSize( scale );

examples/webxr_vr_panorama.html

@@ -12,9 +12,9 @@
 			import * as THREE from '../build/three.module.js';
 			import { VRButton } from './jsm/webxr/VRButton.js';
 
-			var camera;
-			var renderer;
-			var scene;
+			let camera;
+			let renderer;
+			let scene;
 
 			init();
 			animate();
@@ -37,33 +37,33 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.layers.enable( 1 );
 
-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
+				const geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 				geometry.scale( 1, 1, - 1 );
 
-				var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe_stereo.jpg", 12 );
+				const textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe_stereo.jpg", 12 );
 
-				var materials = [];
+				const materials = [];
 
-				for ( var i = 0; i < 6; i ++ ) {
+				for ( let i = 0; i < 6; i ++ ) {
 
 					materials.push( new THREE.MeshBasicMaterial( { map: textures[ i ] } ) );
 
 				}
 
-				var skyBox = new THREE.Mesh( geometry, materials );
+				const skyBox = new THREE.Mesh( geometry, materials );
 				skyBox.layers.set( 1 );
 				scene.add( skyBox );
 
 
-				var materialsR = [];
+				const materialsR = [];
 
-				for ( var i = 6; i < 12; i ++ ) {
+				for ( let i = 6; i < 12; i ++ ) {
 
 					materialsR.push( new THREE.MeshBasicMaterial( { map: textures[ i ] } ) );
 
 				}
 
-				var skyBoxR = new THREE.Mesh( geometry, materialsR );
+				const skyBoxR = new THREE.Mesh( geometry, materialsR );
 				skyBoxR.layers.set( 2 );
 				scene.add( skyBoxR );
 
@@ -73,21 +73,21 @@
 
 			function getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {
 
-				var textures = [];
+				const textures = [];
 
-				for ( var i = 0; i < tilesNum; i ++ ) {
+				for ( let i = 0; i < tilesNum; i ++ ) {
 
 					textures[ i ] = new THREE.Texture();
 
 				}
 
-				var loader = new THREE.ImageLoader();
+				const loader = new THREE.ImageLoader();
 				loader.load( atlasImgUrl, function ( imageObj ) {
 
-					var canvas, context;
-					var tileWidth = imageObj.height;
+					let canvas, context;
+					const tileWidth = imageObj.height;
 
-					for ( var i = 0; i < textures.length; i ++ ) {
+					for ( let i = 0; i < textures.length; i ++ ) {
 
 						canvas = document.createElement( 'canvas' );
 						context = canvas.getContext( '2d' );

examples/webxr_vr_panorama_depth.html

@@ -19,31 +19,31 @@
 			import * as THREE from '../build/three.module.js';
 			import { VRButton } from './jsm/webxr/VRButton.js';
 
-			var camera, scene, renderer, sphere, clock;
+			let camera, scene, renderer, sphere, clock;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				clock = new THREE.Clock();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x101010 );
 
-				var light = new THREE.AmbientLight( 0xffffff, 1 );
+				const light = new THREE.AmbientLight( 0xffffff, 1 );
 				scene.add( light );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
 				scene.add( camera );
 
 				// Create the panoramic sphere geometery
-				var panoSphereGeo = new THREE.SphereBufferGeometry( 6, 256, 256 );
+				const panoSphereGeo = new THREE.SphereBufferGeometry( 6, 256, 256 );
 
 				// Create the panoramic sphere material
-				var panoSphereMat = new THREE.MeshStandardMaterial( {
+				const panoSphereMat = new THREE.MeshStandardMaterial( {
 					side: THREE.BackSide,
 					displacementScale: - 4.0
 				} );
@@ -52,8 +52,8 @@
 				sphere = new THREE.Mesh( panoSphereGeo, panoSphereMat );
 
 				// Load and assign the texture and depth map
-				var manager = new THREE.LoadingManager();
-				var loader = new THREE.TextureLoader( manager );
+				const manager = new THREE.LoadingManager();
+				const loader = new THREE.TextureLoader( manager );
 
 				loader.load( './textures/kandao3.jpg', function ( texture ) {
 
@@ -114,7 +114,7 @@
 
 				if ( renderer.xr.isPresenting === false ) {
 
-					var time = clock.getElapsedTime();
+					const time = clock.getElapsedTime();
 
 					sphere.rotation.y += 0.001;
 					sphere.position.x = Math.sin( time ) * 0.2;

examples/webxr_vr_rollercoaster.html

@@ -20,7 +20,9 @@
 			} from './jsm/misc/RollerCoaster.js';
 			import { VRButton } from './jsm/webxr/VRButton.js';
 
-			var renderer = new THREE.WebGLRenderer( { antialias: true } );
+			let mesh, material, geometry;
+
+			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.xr.enabled = true;
@@ -31,35 +33,35 @@
 
 			//
 
-			var scene = new THREE.Scene();
+			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xf0f0ff );
 
-			var light = new THREE.HemisphereLight( 0xfff0f0, 0x606066 );
+			const light = new THREE.HemisphereLight( 0xfff0f0, 0x606066 );
 			light.position.set( 1, 1, 1 );
 			scene.add( light );
 
-			var train = new THREE.Object3D();
+			const train = new THREE.Object3D();
 			scene.add( train );
 
-			var camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 500 );
+			const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 500 );
 			train.add( camera );
 
 			// environment
 
-			var geometry = new THREE.PlaneBufferGeometry( 500, 500, 15, 15 );
+			geometry = new THREE.PlaneBufferGeometry( 500, 500, 15, 15 );
 			geometry.rotateX( - Math.PI / 2 );
 
-			var positions = geometry.attributes.position.array;
-			var vertex = new THREE.Vector3();
+			const positions = geometry.attributes.position.array;
+			const vertex = new THREE.Vector3();
 
-			for ( var i = 0; i < positions.length; i += 3 ) {
+			for ( let i = 0; i < positions.length; i += 3 ) {
 
 				vertex.fromArray( positions, i );
 
 				vertex.x += Math.random() * 10 - 5;
 				vertex.z += Math.random() * 10 - 5;
 
-				var distance = ( vertex.distanceTo( scene.position ) / 5 ) - 25;
+				const distance = ( vertex.distanceTo( scene.position ) / 5 ) - 25;
 				vertex.y = Math.random() * Math.max( 0, distance );
 
 				vertex.toArray( positions, i );
@@ -68,33 +70,33 @@
 
 			geometry.computeVertexNormals();
 
-			var material = new THREE.MeshLambertMaterial( {
+			material = new THREE.MeshLambertMaterial( {
 				color: 0x407000
 			} );
 
-			var mesh = new THREE.Mesh( geometry, material );
+			mesh = new THREE.Mesh( geometry, material );
 			scene.add( mesh );
 
-			var geometry = new TreesGeometry( mesh );
-			var material = new THREE.MeshBasicMaterial( {
+			geometry = new TreesGeometry( mesh );
+			material = new THREE.MeshBasicMaterial( {
 				side: THREE.DoubleSide, vertexColors: true
 			} );
-			var mesh = new THREE.Mesh( geometry, material );
+			mesh = new THREE.Mesh( geometry, material );
 			scene.add( mesh );
 
-			var geometry = new SkyGeometry();
-			var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
-			var mesh = new THREE.Mesh( geometry, material );
+			geometry = new SkyGeometry();
+			material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+			mesh = new THREE.Mesh( geometry, material );
 			scene.add( mesh );
 
 			//
 
-			var PI2 = Math.PI * 2;
+			const PI2 = Math.PI * 2;
 
-			var curve = ( function () {
+			const curve = ( function () {
 
-				var vector = new THREE.Vector3();
-				var vector2 = new THREE.Vector3();
+				const vector = new THREE.Vector3();
+				const vector2 = new THREE.Vector3();
 
 				return {
 
@@ -102,9 +104,9 @@
 
 						t = t * PI2;
 
-						var x = Math.sin( t * 3 ) * Math.cos( t * 4 ) * 50;
-						var y = Math.sin( t * 10 ) * 2 + Math.cos( t * 17 ) * 2 + 5;
-						var z = Math.sin( t ) * Math.sin( t * 4 ) * 50;
+						const x = Math.sin( t * 3 ) * Math.cos( t * 4 ) * 50;
+						const y = Math.sin( t * 10 ) * 2 + Math.cos( t * 17 ) * 2 + 5;
+						const z = Math.sin( t ) * Math.sin( t * 4 ) * 50;
 
 						return vector.set( x, y, z ).multiplyScalar( 2 );
 
@@ -112,9 +114,9 @@
 
 					getTangentAt: function ( t ) {
 
-						var delta = 0.0001;
-						var t1 = Math.max( 0, t - delta );
-						var t2 = Math.min( 1, t + delta );
+						const delta = 0.0001;
+						const t1 = Math.max( 0, t - delta );
+						const t2 = Math.min( 1, t + delta );
 
 						return vector2.copy( this.getPointAt( t2 ) )
 							.sub( this.getPointAt( t1 ) ).normalize();
@@ -125,49 +127,49 @@
 
 			} )();
 
-			var geometry = new RollerCoasterGeometry( curve, 1500 );
-			var material = new THREE.MeshPhongMaterial( {
+			geometry = new RollerCoasterGeometry( curve, 1500 );
+			material = new THREE.MeshPhongMaterial( {
 				vertexColors: true
 			} );
-			var mesh = new THREE.Mesh( geometry, material );
+			mesh = new THREE.Mesh( geometry, material );
 			scene.add( mesh );
 
-			var geometry = new RollerCoasterLiftersGeometry( curve, 100 );
-			var material = new THREE.MeshPhongMaterial();
-			var mesh = new THREE.Mesh( geometry, material );
+			geometry = new RollerCoasterLiftersGeometry( curve, 100 );
+			material = new THREE.MeshPhongMaterial();
+			mesh = new THREE.Mesh( geometry, material );
 			mesh.position.y = 0.1;
 			scene.add( mesh );
 
-			var geometry = new RollerCoasterShadowGeometry( curve, 500 );
-			var material = new THREE.MeshBasicMaterial( {
+			geometry = new RollerCoasterShadowGeometry( curve, 500 );
+			material = new THREE.MeshBasicMaterial( {
 				color: 0x305000, depthWrite: false, transparent: true
 			} );
-			var mesh = new THREE.Mesh( geometry, material );
+			mesh = new THREE.Mesh( geometry, material );
 			mesh.position.y = 0.1;
 			scene.add( mesh );
 
-			var funfairs = [];
+			const funfairs = [];
 
 			//
 
-			var geometry = new THREE.CylinderBufferGeometry( 10, 10, 5, 15 );
-			var material = new THREE.MeshLambertMaterial( {
+			geometry = new THREE.CylinderBufferGeometry( 10, 10, 5, 15 );
+			material = new THREE.MeshLambertMaterial( {
 				color: 0xff8080,
 				//flatShading: true // Lambert does not support flat shading
 			} );
-			var mesh = new THREE.Mesh( geometry, material );
+			mesh = new THREE.Mesh( geometry, material );
 			mesh.position.set( - 80, 10, - 70 );
 			mesh.rotation.x = Math.PI / 2;
 			scene.add( mesh );
 
 			funfairs.push( mesh );
 
-			var geometry = new THREE.CylinderBufferGeometry( 5, 6, 4, 10 );
-			var material = new THREE.MeshLambertMaterial( {
+			geometry = new THREE.CylinderBufferGeometry( 5, 6, 4, 10 );
+			material = new THREE.MeshLambertMaterial( {
 				color: 0x8080ff,
 				//flatShading: true // Lambert does not support flat shading
 			} );
-			var mesh = new THREE.Mesh( geometry, material );
+			mesh = new THREE.Mesh( geometry, material );
 			mesh.position.set( 50, 2, 30 );
 			scene.add( mesh );
 
@@ -188,22 +190,22 @@
 
 			//
 
-			var position = new THREE.Vector3();
-			var tangent = new THREE.Vector3();
+			const position = new THREE.Vector3();
+			const tangent = new THREE.Vector3();
 
-			var lookAt = new THREE.Vector3();
+			const lookAt = new THREE.Vector3();
 
-			var velocity = 0;
-			var progress = 0;
+			let velocity = 0;
+			let progress = 0;
 
-			var prevTime = performance.now();
+			let prevTime = performance.now();
 
 			function render() {
 
-				var time = performance.now();
-				var delta = time - prevTime;
+				const time = performance.now();
+				const delta = time - prevTime;
 
-				for ( var i = 0; i < funfairs.length; i ++ ) {
+				for ( let i = 0; i < funfairs.length; i ++ ) {
 
 					funfairs[ i ].rotation.y = time * 0.0004;
 

examples/webxr_vr_sandbox.html

@@ -15,16 +15,16 @@
 			import { Reflector } from './jsm/objects/Reflector.js';
 			import { VRButton } from './jsm/webxr/VRButton.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var reflector;
+			let reflector;
 
 			init();
 			animate();
 
 			function init() {
 
-				var background = new THREE.CubeTextureLoader()
+				const background = new THREE.CubeTextureLoader()
 					.setPath( 'textures/cube/MilkyWay/' )
 					.load( [ 'dark-s_px.jpg', 'dark-s_nx.jpg', 'dark-s_py.jpg', 'dark-s_ny.jpg', 'dark-s_pz.jpg', 'dark-s_nz.jpg' ] );
 
@@ -34,52 +34,52 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.set( 0, 1.6, 2 );
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.15, 150, 20 );
-				var material = new THREE.MeshStandardMaterial( { roughness: 0.01, metalness: 0.2, envMap: background } );
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.y = 0.75;
-				mesh.position.z = - 2;
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
-				scene.add( mesh );
-
-				var geometry = new THREE.BoxBufferGeometry( 1.5, 0.1, 1.5 );
-				var material = new THREE.MeshPhongMaterial();
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.y = - 0.2;
-				mesh.position.z = - 2;
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
-				scene.add( mesh );
-
-				var light = new THREE.DirectionalLight( 0x8800ff );
-				light.position.set( - 1, 1.5, - 1.5 );
-				light.castShadow = true;
-				light.shadow.camera.zoom = 4;
-				scene.add( light );
-				light.target.position.set( 0, 0, - 2 );
-				scene.add( light.target );
-
-				// var helper = new CameraHelper( light.shadow.camera );
-				// scene.add( helper );
-
-				var light = new THREE.DirectionalLight( 0xff0000 );
-				light.position.set( 1, 1.5, - 2.5 );
-				light.castShadow = true;
-				light.shadow.camera.zoom = 4;
-				scene.add( light );
-				light.target.position.set( 0, 0, - 2 );
-				scene.add( light.target );
-
-				// var helper = new CameraHelper( light.shadow.camera );
-				// scene.add( helper );
+				const torusGeometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.15, 150, 20 );
+				const torusMaterial = new THREE.MeshStandardMaterial( { roughness: 0.01, metalness: 0.2, envMap: background } );
+				const torus = new THREE.Mesh( torusGeometry, torusMaterial );
+				torus.position.y = 0.75;
+				torus.position.z = - 2;
+				torus.castShadow = true;
+				torus.receiveShadow = true;
+				scene.add( torus );
+
+				const boxGeometry = new THREE.BoxBufferGeometry( 1.5, 0.1, 1.5 );
+				const boxMaterial = new THREE.MeshPhongMaterial();
+				const box = new THREE.Mesh( boxGeometry, boxMaterial );
+				box.position.y = - 0.2;
+				box.position.z = - 2;
+				box.castShadow = true;
+				box.receiveShadow = true;
+				scene.add( box );
+
+				const light1 = new THREE.DirectionalLight( 0x8800ff );
+				light1.position.set( - 1, 1.5, - 1.5 );
+				light1.castShadow = true;
+				light1.shadow.camera.zoom = 4;
+				scene.add( light1 );
+				light1.target.position.set( 0, 0, - 2 );
+				scene.add( light1.target );
+
+				// const helper1 = new THREE.CameraHelper( light.shadow.camera );
+				// scene.add( helper1 );
+
+				const light2 = new THREE.DirectionalLight( 0xff0000 );
+				light2.position.set( 1, 1.5, - 2.5 );
+				light2.castShadow = true;
+				light2.shadow.camera.zoom = 4;
+				scene.add( light2 );
+				light2.target.position.set( 0, 0, - 2 );
+				scene.add( light2.target );
+
+				// const helper2 = new THREE.CameraHelper( light.shadow.camera );
+				// scene.add( helper2 );
 
 				// lensflare
-				var loader = new THREE.TextureLoader();
-				var texture0 = loader.load( "textures/lensflare/lensflare0.png" );
-				var texture3 = loader.load( "textures/lensflare/lensflare3.png" );
+				const loader = new THREE.TextureLoader();
+				const texture0 = loader.load( "textures/lensflare/lensflare0.png" );
+				const texture3 = loader.load( "textures/lensflare/lensflare3.png" );
 
-				var lensflare = new Lensflare();
+				const lensflare = new Lensflare();
 				lensflare.position.set( 0, 5, - 5 );
 				lensflare.addElement( new LensflareElement( texture0, 700, 0 ) );
 				lensflare.addElement( new LensflareElement( texture3, 60, 0.6 ) );
@@ -90,8 +90,7 @@
 
 				//
 
-				var geometry = new THREE.PlaneBufferGeometry( 1.4, 1.4 );
-				reflector = new Reflector( geometry, {
+				reflector = new Reflector( new THREE.PlaneBufferGeometry( 1.4, 1.4 ), {
 					textureWidth: window.innerWidth * window.devicePixelRatio,
 					textureHeight: window.innerHeight * window.devicePixelRatio
 				} );
@@ -101,13 +100,13 @@
 				reflector.rotation.y = - Math.PI / 4;
 				scene.add( reflector );
 
-				var geometry = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.1 );
-				var material = new THREE.MeshPhongMaterial();
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.z = - 0.07;
-				mesh.castShadow = true;
-				mesh.receiveShadow = true;
-				reflector.add( mesh );
+				const frameGeometry = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.1 );
+				const frameMaterial = new THREE.MeshPhongMaterial();
+				const frame = new THREE.Mesh( frameGeometry, frameMaterial );
+				frame.position.z = - 0.07;
+				frame.castShadow = true;
+				frame.receiveShadow = true;
+				reflector.add( frame );
 
 				//
 
@@ -144,10 +143,10 @@
 
 			function render() {
 
-				var time = performance.now() * 0.0002;
-				var mesh = scene.children[ 0 ];
-				mesh.rotation.x = time * 2;
-				mesh.rotation.y = time * 5;
+				const time = performance.now() * 0.0002;
+				const torus = scene.children[ 0 ];
+				torus.rotation.x = time * 2;
+				torus.rotation.y = time * 5;
 
 				renderer.render( scene, camera );
 

examples/webxr_vr_sculpt.html

@@ -19,13 +19,13 @@
 			import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
 			import { VRButton } from './jsm/webxr/VRButton.js';
 
-			var container;
-			var camera, scene, renderer;
-			var controller1, controller2;
+			let container;
+			let camera, scene, renderer;
+			let controller1, controller2;
 
-			var controls, blob;
+			let controls, blob;
 
-			var points = [];
+			let points = [];
 
 			init();
 			initBlob();
@@ -46,34 +46,34 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				var geometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
-				var material = new THREE.MeshStandardMaterial( {
+				const tableGeometry = new THREE.BoxBufferGeometry( 0.5, 0.8, 0.5 );
+				const tableMaterial = new THREE.MeshStandardMaterial( {
 					color: 0x444444,
 					roughness: 1.0,
 					metalness: 0.0
 				} );
-				var table = new THREE.Mesh( geometry, material );
+				const table = new THREE.Mesh( tableGeometry, tableMaterial );
 				table.position.y = 0.35;
 				table.position.z = 0.85;
 				scene.add( table );
 
-				var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
-				var material = new THREE.MeshStandardMaterial( {
+				const floorGometry = new THREE.PlaneBufferGeometry( 4, 4 );
+				const floorMaterial = new THREE.MeshStandardMaterial( {
 					color: 0x222222,
 					roughness: 1.0,
 					metalness: 0.0
 				} );
-				var floor = new THREE.Mesh( geometry, material );
+				const floor = new THREE.Mesh( floorGometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				scene.add( floor );
 
-				var grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
+				const grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
 				// grid.material.depthTest = false; // avoid z-fighting
 				scene.add( grid );
 
 				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );
 				scene.add( light );
 
@@ -116,12 +116,12 @@
 
 				//
 
-				var geometry = new THREE.CylinderBufferGeometry( 0.01, 0.02, 0.08, 5 );
+				const geometry = new THREE.CylinderBufferGeometry( 0.01, 0.02, 0.08, 5 );
 				geometry.rotateX( - Math.PI / 2 );
-				var material = new THREE.MeshStandardMaterial( { flatShading: true } );
-				var mesh = new THREE.Mesh( geometry, material );
+				const material = new THREE.MeshStandardMaterial( { flatShading: true } );
+				const mesh = new THREE.Mesh( geometry, material );
 
-				var pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 3 ) );
+				const pivot = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.01, 3 ) );
 				pivot.name = 'pivot';
 				pivot.position.z = - 0.05;
 				mesh.add( pivot );
@@ -138,18 +138,18 @@
 			function initBlob() {
 
 				/*
-				var path = "textures/cube/SwedishRoyalCastle/";
-				var format = '.jpg';
-				var urls = [
+				let path = "textures/cube/SwedishRoyalCastle/";
+				let format = '.jpg';
+				let urls = [
 					path + 'px' + format, path + 'nx' + format,
 					path + 'py' + format, path + 'ny' + format,
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var reflectionCube = new CubeTextureLoader().load( urls );
+				let reflectionCube = new CubeTextureLoader().load( urls );
 				*/
 
-				var material = new THREE.MeshStandardMaterial( {
+				const material = new THREE.MeshStandardMaterial( {
 					color: 0xffffff,
 					// envMap: reflectionCube,
 					roughness: 0.9,
@@ -201,21 +201,21 @@
 
 			function handleController( controller ) {
 
-				var pivot = controller.getObjectByName( 'pivot' );
+				const pivot = controller.getObjectByName( 'pivot' );
 
 				if ( pivot ) {
 
-					var id = controller.userData.id;
-					var matrix = pivot.matrixWorld;
+					const id = controller.userData.id;
+					const matrix = pivot.matrixWorld;
 
 					points[ id ].position.setFromMatrixPosition( matrix );
 					transformPoint( points[ id ].position );
 
 					if ( controller.userData.isSelecting ) {
 
-						var strength = points[ id ].strength / 2;
+						const strength = points[ id ].strength / 2;
 
-						var vector = new THREE.Vector3().setFromMatrixPosition( matrix );
+						const vector = new THREE.Vector3().setFromMatrixPosition( matrix );
 
 						transformPoint( vector );
 
@@ -231,10 +231,10 @@
 
 				blob.reset();
 
-				for ( var i = 0; i < points.length; i ++ ) {
+				for ( let i = 0; i < points.length; i ++ ) {
 
-					var point = points[ i ];
-					var position = point.position;
+					const point = points[ i ];
+					const position = point.position;
 
 					blob.addBall( position.x, position.y, position.z, point.strength, point.subtract );
 

examples/webxr_vr_video.html

@@ -24,14 +24,14 @@
 			import * as THREE from '../build/three.module.js';
 			import { VRButton } from './jsm/webxr/VRButton.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				container.addEventListener( 'click', function () {
 
 					video.play();
@@ -43,10 +43,10 @@
 
 				// video
 
-				var video = document.getElementById( 'video' );
+				const video = document.getElementById( 'video' );
 				video.play();
 
-				var texture = new THREE.Texture( video );
+				const texture = new THREE.Texture( video );
 				texture.generateMipmaps = false;
 				texture.minFilter = THREE.NearestFilter;
 				texture.magFilter = THREE.NearestFilter;
@@ -67,45 +67,45 @@
 
 				// left
 
-				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				const geometry1 = new THREE.SphereBufferGeometry( 500, 60, 40 );
 				// invert the geometry on the x-axis so that all of the faces point inward
-				geometry.scale( - 1, 1, 1 );
+				geometry1.scale( - 1, 1, 1 );
 
-				var uvs = geometry.attributes.uv.array;
+				const uvs1 = geometry1.attributes.uv.array;
 
-				for ( var i = 0; i < uvs.length; i += 2 ) {
+				for ( let i = 0; i < uvs1.length; i += 2 ) {
 
-					uvs[ i ] *= 0.5;
+					uvs1[ i ] *= 0.5;
 
 				}
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				const material1 = new THREE.MeshBasicMaterial( { map: texture } );
 
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.rotation.y = - Math.PI / 2;
-				mesh.layers.set( 1 ); // display in left eye only
-				scene.add( mesh );
+				const mesh1 = new THREE.Mesh( geometry1, material1 );
+				mesh1.rotation.y = - Math.PI / 2;
+				mesh1.layers.set( 1 ); // display in left eye only
+				scene.add( mesh1 );
 
 				// right
 
-				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
-				geometry.scale( - 1, 1, 1 );
+				const geometry2 = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				geometry2.scale( - 1, 1, 1 );
 
-				var uvs = geometry.attributes.uv.array;
+				const uvs2 = geometry2.attributes.uv.array;
 
-				for ( var i = 0; i < uvs.length; i += 2 ) {
+				for ( let i = 0; i < uvs2.length; i += 2 ) {
 
-					uvs[ i ] *= 0.5;
-					uvs[ i ] += 0.5;
+					uvs2[ i ] *= 0.5;
+					uvs2[ i ] += 0.5;
 
 				}
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				const material2 = new THREE.MeshBasicMaterial( { map: texture } );
 
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.rotation.y = - Math.PI / 2;
-				mesh.layers.set( 2 ); // display in right eye only
-				scene.add( mesh );
+				const mesh2 = new THREE.Mesh( geometry2, material2 );
+				mesh2.rotation.y = - Math.PI / 2;
+				mesh2.layers.set( 2 ); // display in right eye only
+				scene.add( mesh2 );
 
 				//