Examples: More clean up.

examples/webgl_modifier_subdivision.html

@@ -32,14 +32,14 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { SubdivisionModifier } from './jsm/modifiers/SubdivisionModifier.js';
 
-			var camera, scene, renderer, stats, smoothMesh, wireframe;
+			let camera, scene, renderer, stats, smoothMesh, wireframe;
 
-			var smoothMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true } );
-			var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.15, transparent: true } );
+			const smoothMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true } );
+			const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, opacity: 0.15, transparent: true } );
 
-			var faceIndices = [ 'a', 'b', 'c' ];
+			const faceIndices = [ 'a', 'b', 'c' ];
 
-			var params = {
+			const params = {
 				subdivisions: 2
 			};
 
@@ -53,23 +53,23 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var light = new THREE.PointLight( 0xffffff, 1.5 );
+				const light = new THREE.PointLight( 0xffffff, 1.5 );
 				light.position.set( 1000, 1000, 2000 );
 				scene.add( light );
 
-				var loader = new THREE.BufferGeometryLoader();
+				const loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( bufferGeometry ) {
 
 					// converting to legacy THREE.Geometry because SubdivisionModifier only returns THREE.Geometry
 
-					var geometry = new THREE.Geometry().fromBufferGeometry( bufferGeometry );
+					const geometry = new THREE.Geometry().fromBufferGeometry( bufferGeometry );
 					geometry.mergeVertices();
 
-					var material = new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe: true } );
-					var mesh = new THREE.Mesh( bufferGeometry, material );
+					const material = new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe: true } );
+					const mesh = new THREE.Mesh( bufferGeometry, material );
 					scene.add( mesh );
 
-					var gui = new GUI();
+					const gui = new GUI();
 
 					gui.add( params, 'subdivisions', 0, 3 ).step( 1 ).onChange( function ( subdivisions ) {
 
@@ -94,7 +94,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 50;
 				controls.maxDistance = 400;
 
@@ -110,23 +110,23 @@
 
 			function subdivide( geometry, subdivisions ) {
 
-				var modifier = new SubdivisionModifier( subdivisions );
+				const modifier = new SubdivisionModifier( subdivisions );
 
-				var smoothGeometry = modifier.modify( geometry );
+				const smoothGeometry = modifier.modify( geometry );
 
 				// colorify faces
 
-				for ( var i = 0; i < smoothGeometry.faces.length; i ++ ) {
+				for ( let i = 0; i < smoothGeometry.faces.length; i ++ ) {
 
-					var face = smoothGeometry.faces[ i ];
+					const face = smoothGeometry.faces[ i ];
 
-					for ( var j = 0; j < 3; j ++ ) {
+					for ( let j = 0; j < 3; j ++ ) {
 
-						var vertexIndex = face[ faceIndices[ j ] ];
-						var vertex = smoothGeometry.vertices[ vertexIndex ];
+						const vertexIndex = face[ faceIndices[ j ] ];
+						const vertex = smoothGeometry.vertices[ vertexIndex ];
 
-						var hue = ( vertex.y / 200 ) + 0.5;
-						var color = new THREE.Color().setHSL( hue, 1, 0.5 );
+						const hue = ( vertex.y / 200 ) + 0.5;
+						const color = new THREE.Color().setHSL( hue, 1, 0.5 );
 						face.vertexColors[ j ] = color;
 
 					}

examples/webgl_modifier_tessellation.html

@@ -62,17 +62,16 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { TessellateModifier } from './jsm/modifiers/TessellateModifier.js';
 
+			let renderer, scene, camera, stats;
 
-			var renderer, scene, camera, stats;
+			let controls;
 
-			var controls;
+			let mesh, uniforms;
 
-			var mesh, uniforms;
+			const WIDTH = window.innerWidth;
+			const HEIGHT = window.innerHeight;
 
-			var WIDTH = window.innerWidth,
-				HEIGHT = window.innerHeight;
-
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
 				init( font );
@@ -90,7 +89,7 @@
 
 				//
 
-				var geometry = new THREE.TextGeometry( "THREE.JS", {
+				let geometry = new THREE.TextGeometry( "THREE.JS", {
 
 					font: font,
 
@@ -106,9 +105,9 @@
 
 				geometry.center();
 
-				var tessellateModifier = new TessellateModifier( 8 );
+				const tessellateModifier = new TessellateModifier( 8 );
 
-				for ( var i = 0; i < 6; i ++ ) {
+				for ( let i = 0; i < 6; i ++ ) {
 
 					tessellateModifier.modify( geometry );
 
@@ -118,26 +117,26 @@
 
 				geometry = new THREE.BufferGeometry().fromGeometry( geometry );
 
-				var numFaces = geometry.attributes.position.count / 3;
+				const numFaces = geometry.attributes.position.count / 3;
 
-				var colors = new Float32Array( numFaces * 3 * 3 );
-				var displacement = new Float32Array( numFaces * 3 * 3 );
+				const colors = new Float32Array( numFaces * 3 * 3 );
+				const displacement = new Float32Array( numFaces * 3 * 3 );
 
-				var color = new THREE.Color();
+				const color = new THREE.Color();
 
-				for ( var f = 0; f < numFaces; f ++ ) {
+				for ( let f = 0; f < numFaces; f ++ ) {
 
-					var index = 9 * f;
+					const index = 9 * f;
 
-					var h = 0.2 * Math.random();
-					var s = 0.5 + 0.5 * Math.random();
-					var l = 0.5 + 0.5 * Math.random();
+					const h = 0.2 * Math.random();
+					const s = 0.5 + 0.5 * Math.random();
+					const l = 0.5 + 0.5 * Math.random();
 
 					color.setHSL( h, s, l );
 
-					var d = 10 * ( 0.5 - Math.random() );
+					const d = 10 * ( 0.5 - Math.random() );
 
-					for ( var i = 0; i < 3; i ++ ) {
+					for ( let i = 0; i < 3; i ++ ) {
 
 						colors[ index + ( 3 * i ) ] = color.r;
 						colors[ index + ( 3 * i ) + 1 ] = color.g;
@@ -162,7 +161,7 @@
 
 				};
 
-				var shaderMaterial = new THREE.ShaderMaterial( {
+				const shaderMaterial = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
@@ -180,7 +179,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
 				controls = new TrackballControls( camera, renderer.domElement );
@@ -215,7 +214,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				const time = Date.now() * 0.001;
 
 				uniforms.amplitude.value = 1.0 + Math.sin( time * 0.5 );
 

examples/webgl_morphtargets.html

@@ -19,18 +19,17 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container;
+			let camera, scene, renderer, raycaster;
 
-			var camera, scene, renderer, raycaster;
-
-			var mesh, mouse = new THREE.Vector2();
+			let mesh;
+			const mouse = new THREE.Vector2();
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 500;
@@ -39,24 +38,23 @@
 				scene.background = new THREE.Color( 0x222222 );
 				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
 
-				var light = new THREE.PointLight( 0xffffff );
+				const light = new THREE.PointLight( 0xffffff );
 				light.position.z = 500;
 				camera.add( light );
 				scene.add( camera );
 
-				var light = new THREE.AmbientLight( 0x111111 );
-				scene.add( light );
+				scene.add( new THREE.AmbientLight( 0x111111 ) );
 
-				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
-				var material = new THREE.MeshLambertMaterial( { color: 0xff0000, morphTargets: true } );
+				const geometry = new THREE.BoxGeometry( 100, 100, 100 );
+				const material = new THREE.MeshLambertMaterial( { color: 0xff0000, morphTargets: true } );
 
 				// construct 8 blend shapes
 
-				for ( var i = 0; i < 8; i ++ ) {
+				for ( let i = 0; i < 8; i ++ ) {
 
-					var vertices = [];
+					const vertices = [];
 
-					for ( var v = 0; v < geometry.vertices.length; v ++ ) {
+					for ( let v = 0; v < geometry.vertices.length; v ++ ) {
 
 						vertices.push( geometry.vertices[ v ].clone() );
 
@@ -74,15 +72,13 @@
 
 				}
 
-				geometry = new THREE.BufferGeometry().fromGeometry( geometry );
-
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new THREE.Mesh( new THREE.BufferGeometry().fromGeometry( geometry ), material );
 
 				scene.add( mesh );
 
 				//
 
-				var params = {
+				const params = {
 					influence1: 0,
 					influence2: 0,
 					influence3: 0,
@@ -93,9 +89,9 @@
 					influence8: 0
 				};
 
-				var gui = new GUI();
+				const gui = new GUI();
 
-				var folder = gui.addFolder( 'Morph Targets' );
+				const folder = gui.addFolder( 'Morph Targets' );
 				folder.add( params, 'influence1', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
 					mesh.morphTargetInfluences[ 0 ] = value;
@@ -149,7 +145,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 400;
 				controls.maxDistance = 1000;
 
@@ -170,7 +166,7 @@
 
 				raycaster.setFromCamera( mouse, camera );
 
-				var intersects = raycaster.intersectObject( mesh );
+				const intersects = raycaster.intersectObject( mesh );
 
 				if ( intersects.length > 0 ) {
 

examples/webgl_morphtargets_horse.html

@@ -30,9 +30,13 @@
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var container, stats;
-			var camera, scene, renderer;
-			var mesh, mixer;
+			let container, stats;
+			let camera, scene, renderer;
+			let mesh, mixer;
+
+			const radius = 600;
+			let theta = 0;
+			let prevTime = Date.now();
 
 			init();
 			animate();
@@ -53,15 +57,15 @@
 
 				//
 
-				var light = new THREE.DirectionalLight( 0xefefff, 1.5 );
-				light.position.set( 1, 1, 1 ).normalize();
-				scene.add( light );
+				const light1 = new THREE.DirectionalLight( 0xefefff, 1.5 );
+				light1.position.set( 1, 1, 1 ).normalize();
+				scene.add( light1 );
 
-				var light = new THREE.DirectionalLight( 0xffefef, 1.5 );
-				light.position.set( - 1, - 1, - 1 ).normalize();
-				scene.add( light );
+				const light2 = new THREE.DirectionalLight( 0xffefef, 1.5 );
+				light2.position.set( - 1, - 1, - 1 ).normalize();
+				scene.add( light2 );
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( "models/gltf/Horse.glb", function ( gltf ) {
 
 					mesh = gltf.scene.children[ 0 ];
@@ -115,11 +119,6 @@
 
 			}
 
-			var radius = 600;
-			var theta = 0;
-
-			var prevTime = Date.now();
-
 			function render() {
 
 				theta += 0.1;
@@ -131,7 +130,7 @@
 
 				if ( mixer ) {
 
-					var time = Date.now();
+					const time = Date.now();
 
 					mixer.update( ( time - prevTime ) * 0.001 );
 

examples/webgl_morphtargets_sphere.html

@@ -20,21 +20,19 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var container;
+			let camera, scene, renderer, clock;
 
-			var camera, scene, renderer, clock;
+			let mesh;
 
-			var mesh;
-
-			var sign = 1;
-			var speed = 0.5;
+			let sign = 1;
+			const speed = 0.5;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.2, 100 );
 				camera.position.set( 0, 5, 5 );
@@ -43,18 +41,17 @@
 
 				clock = new THREE.Clock();
 
-				var light = new THREE.PointLight( 0xff2200, 0.7 );
-				light.position.set( 100, 100, 100 );
-				scene.add( light );
+				const light1 = new THREE.PointLight( 0xff2200, 0.7 );
+				light1.position.set( 100, 100, 100 );
+				scene.add( light1 );
 
-				light = new THREE.PointLight( 0x22ff00, 0.7 );
-				light.position.set( - 100, - 100, - 100 );
-				scene.add( light );
+				const light2 = new THREE.PointLight( 0x22ff00, 0.7 );
+				light2.position.set( - 100, - 100, - 100 );
+				scene.add( light2 );
 
-				light = new THREE.AmbientLight( 0x111111 );
-				scene.add( light );
+				scene.add( new THREE.AmbientLight( 0x111111 ) );
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( 'models/gltf/AnimatedMorphSphere/glTF/AnimatedMorphSphere.gltf', function ( gltf ) {
 
 					gltf.scene.traverse( function ( node ) {
@@ -73,7 +70,7 @@
 
 					//
 
-					var pointsMaterial = new THREE.PointsMaterial( {
+					const pointsMaterial = new THREE.PointsMaterial( {
 
 						size: 10,
 						sizeAttenuation: false,
@@ -83,7 +80,7 @@
 
 					} );
 
-					var points = new THREE.Points( mesh.geometry, pointsMaterial );
+					const points = new THREE.Points( mesh.geometry, pointsMaterial );
 
 					points.morphTargetInfluences = mesh.morphTargetInfluences;
 					points.morphTargetDictionary = mesh.morphTargetDictionary;
@@ -101,7 +98,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1;
 				controls.maxDistance = 20;
 
@@ -145,11 +142,11 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( mesh !== undefined ) {
 
-					var step = delta * speed;
+					const step = delta * speed;
 
 					mesh.rotation.y += step;
 

examples/webgl_multiple_canvases_circle.html

@@ -134,14 +134,14 @@
 	<script type="module">
 		import * as THREE from '../build/three.module.js';
 
-		var views = [];
+		const views = [];
 
-		var scene, renderer;
+		let scene, renderer;
 
-		var mouseX = 0, mouseY = 0;
+		let mouseX = 0, mouseY = 0;
 
-		var windowHalfX = window.innerWidth / 2;
-		var windowHalfY = window.innerHeight / 2;
+		const windowHalfX = window.innerWidth / 2;
+		const windowHalfY = window.innerHeight / 2;
 
 		init();
 		animate();
@@ -153,15 +153,15 @@
 			canvas.width = canvas.clientWidth * window.devicePixelRatio;
 			canvas.height = canvas.clientHeight * window.devicePixelRatio;
 
-			var context = canvas.getContext( '2d' );
+			const context = canvas.getContext( '2d' );
 
-			var camera = new THREE.PerspectiveCamera( 20, canvas.clientWidth / canvas.clientHeight, 1, 20000 );
+			const camera = new THREE.PerspectiveCamera( 20, canvas.clientWidth / canvas.clientHeight, 1, 20000 );
 			camera.rotation.y = rotateY;
 
 			// Think of the virtual camera as a post with 5 cameras on it (even though those cameras happen to live in difference scenes)
 			// You need to move the post (ie, the virtualCamera) to move all 5 cameras together.
 
-			var virtualCamera = new THREE.Camera();
+			const virtualCamera = new THREE.Camera();
 			virtualCamera.add( camera );
 
 			this.render = function () {
@@ -183,14 +183,14 @@
 
 		function init() {
 
-			var canvas1 = document.getElementById( 'canvas1' );
-			var canvas2 = document.getElementById( 'canvas2' );
-			var canvas3 = document.getElementById( 'canvas3' );
-			var canvas4 = document.getElementById( 'canvas4' );
-			var canvas5 = document.getElementById( 'canvas5' );
+			const canvas1 = document.getElementById( 'canvas1' );
+			const canvas2 = document.getElementById( 'canvas2' );
+			const canvas3 = document.getElementById( 'canvas3' );
+			const canvas4 = document.getElementById( 'canvas4' );
+			const canvas5 = document.getElementById( 'canvas5' );
 
-			var fudge = 0.45; // I don't know why this is needed :-(
-			var rot = 30 * THREE.MathUtils.DEG2RAD;
+			const fudge = 0.45; // I don't know why this is needed :-(
+			const rot = 30 * THREE.MathUtils.DEG2RAD;
 
 			views.push( new View( canvas1, rot * - 2 * fudge ) );
 			views.push( new View( canvas2, rot * - 1 * fudge ) );
@@ -203,34 +203,34 @@
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xffffff );
 
-			var light = new THREE.DirectionalLight( 0xffffff );
+			const light = new THREE.DirectionalLight( 0xffffff );
 			light.position.set( 0, 0, 1 ).normalize();
 			scene.add( light );
 
-			var noof_balls = 51;
+			const noof_balls = 51;
 
 			// shadow
 
-			var canvas = document.createElement( 'canvas' );
+			const canvas = document.createElement( 'canvas' );
 			canvas.width = 128;
 			canvas.height = 128;
 
-			var context = canvas.getContext( '2d' );
-			var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
+			const context = canvas.getContext( '2d' );
+			const gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 			gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
 			gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
 
 			context.fillStyle = gradient;
 			context.fillRect( 0, 0, canvas.width, canvas.height );
 
-			var shadowTexture = new THREE.CanvasTexture( canvas );
+			const shadowTexture = new THREE.CanvasTexture( canvas );
 
-			var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
-			var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
+			const shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
+			const shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
-			for ( var i = 0; i < noof_balls; i ++ ) { // create shadows
+			for ( let i = 0; i < noof_balls; i ++ ) { // create shadows
 
-				var shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				const shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.x = - ( noof_balls - 1 ) / 2 * 400 + i * 400;
 				shadowMesh.position.y = - 250;
 				shadowMesh.rotation.x = - Math.PI / 2;
@@ -238,18 +238,18 @@
 
 			}
 
-			var radius = 200;
+			const radius = 200;
 
-			var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
+			const geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-			var count = geometry1.attributes.position.count;
+			const count = geometry1.attributes.position.count;
 			geometry1.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-			var color = new THREE.Color();
-			var positions = geometry1.attributes.position;
-			var colors = geometry1.attributes.color;
+			const color = new THREE.Color();
+			const positions = geometry1.attributes.position;
+			const colors = geometry1.attributes.color;
 
-			for ( var i = 0; i < count; i ++ ) {
+			for ( let i = 0; i < count; i ++ ) {
 
 				color.setHSL( ( positions.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
 
@@ -257,19 +257,19 @@
 
 			}
 
-			var material = new THREE.MeshPhongMaterial( {
+			const material = new THREE.MeshPhongMaterial( {
 				color: 0xffffff,
 				flatShading: true,
 				vertexColors: true,
 				shininess: 0
 			} );
 
-			var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
+			const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-			for ( var i = 0; i < noof_balls; i ++ ) { // create balls
+			for ( let i = 0; i < noof_balls; i ++ ) { // create balls
 
-				var mesh = new THREE.Mesh( geometry1, material );
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+				const mesh = new THREE.Mesh( geometry1, material );
+				const wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );
 
 				mesh.position.x = - ( noof_balls - 1 ) / 2 * 400 + i * 400;
@@ -295,7 +295,7 @@
 
 		function animate() {
 
-			for ( var i = 0; i < views.length; ++ i ) {
+			for ( let i = 0; i < views.length; ++ i ) {
 
 				views[ i ].render();
 

examples/webgl_multiple_canvases_complex.html

@@ -52,14 +52,14 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var views = [];
+			const views = [];
 
-			var scene, renderer;
+			let scene, renderer;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			const windowHalfX = window.innerWidth / 2;
+			const windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -71,9 +71,9 @@
 				canvas.width = viewWidth * window.devicePixelRatio;
 				canvas.height = viewHeight * window.devicePixelRatio;
 
-				var context = canvas.getContext( '2d' );
+				const context = canvas.getContext( '2d' );
 
-				var camera = new THREE.PerspectiveCamera( 20, viewWidth / viewHeight, 1, 10000 );
+				const camera = new THREE.PerspectiveCamera( 20, viewWidth / viewHeight, 1, 10000 );
 				camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );
 				camera.position.z = 1800;
 
@@ -96,12 +96,12 @@
 
 			function init() {
 
-				var canvas1 = document.getElementById( 'canvas1' );
-				var canvas2 = document.getElementById( 'canvas2' );
-				var canvas3 = document.getElementById( 'canvas3' );
+				const canvas1 = document.getElementById( 'canvas1' );
+				const canvas2 = document.getElementById( 'canvas2' );
+				const canvas3 = document.getElementById( 'canvas3' );
 
-				var fullWidth = 550;
-				var fullHeight = 600;
+				const fullWidth = 550;
+				const fullHeight = 600;
 
 				views.push( new View( canvas1, fullWidth, fullHeight, 0, 0, canvas1.clientWidth, canvas1.clientHeight ) );
 				views.push( new View( canvas2, fullWidth, fullHeight, 150, 200, canvas2.clientWidth, canvas2.clientHeight ) );
@@ -112,29 +112,29 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 ).normalize();
 				scene.add( light );
 
 				// shadow
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 128;
 				canvas.height = 128;
 
-				var context = canvas.getContext( '2d' );
-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
+				const context = canvas.getContext( '2d' );
+				const gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 				gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
 				gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
 
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
+				const shadowTexture = new THREE.CanvasTexture( canvas );
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
-				var shadowMesh;
+				const shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
+				const shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
+				let shadowMesh;
 
 				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
@@ -153,25 +153,25 @@
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				var radius = 200;
+				const radius = 200;
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
+				const geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-				var count = geometry1.attributes.position.count;
+				const count = geometry1.attributes.position.count;
 				geometry1.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-				var geometry2 = geometry1.clone();
-				var geometry3 = geometry1.clone();
+				const geometry2 = geometry1.clone();
+				const geometry3 = geometry1.clone();
 
-				var color = new THREE.Color();
-				var positions1 = geometry1.attributes.position;
-				var positions2 = geometry2.attributes.position;
-				var positions3 = geometry3.attributes.position;
-				var colors1 = geometry1.attributes.color;
-				var colors2 = geometry2.attributes.color;
-				var colors3 = geometry3.attributes.color;
+				const color = new THREE.Color();
+				const positions1 = geometry1.attributes.position;
+				const positions2 = geometry2.attributes.position;
+				const positions3 = geometry3.attributes.position;
+				const colors1 = geometry1.attributes.color;
+				const colors2 = geometry2.attributes.color;
+				const colors3 = geometry3.attributes.color;
 
-				for ( var i = 0; i < count; i ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
 					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
 					colors1.setXYZ( i, color.r, color.g, color.b );
@@ -184,30 +184,30 @@
 
 				}
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xffffff,
 					flatShading: true,
 					vertexColors: true,
 					shininess: 0
 				} );
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
+				const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				var mesh = new THREE.Mesh( geometry1, material );
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+				let mesh = new THREE.Mesh( geometry1, material );
+				let wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = - 400;
 				mesh.rotation.x = - 1.87;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry2, material );
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry2, material );
+				wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = 400;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry3, material );
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry3, material );
+				wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
 				mesh.add( wireframe );
 				scene.add( mesh );
 
@@ -228,7 +228,7 @@
 
 			function animate() {
 
-				for ( var i = 0; i < views.length; ++ i ) {
+				for ( let i = 0; i < views.length; ++ i ) {
 
 					views[ i ].render();
 

examples/webgl_multiple_canvases_grid.html

@@ -69,14 +69,14 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var views = [];
+			const views = [];
 
-			var scene, renderer;
+			let scene, renderer;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			const windowHalfX = window.innerWidth / 2;
+			const windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -88,9 +88,9 @@
 				canvas.width = viewWidth * window.devicePixelRatio;
 				canvas.height = viewHeight * window.devicePixelRatio;
 
-				var context = canvas.getContext( '2d' );
+				const context = canvas.getContext( '2d' );
 
-				var camera = new THREE.PerspectiveCamera( 20, viewWidth / viewHeight, 1, 10000 );
+				const camera = new THREE.PerspectiveCamera( 20, viewWidth / viewHeight, 1, 10000 );
 				camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );
 				camera.position.z = 1800;
 
@@ -112,15 +112,15 @@
 
 			function init() {
 
-				var canvas1 = document.getElementById( 'canvas1' );
-				var canvas2 = document.getElementById( 'canvas2' );
-				var canvas3 = document.getElementById( 'canvas3' );
-				var canvas4 = document.getElementById( 'canvas4' );
+				const canvas1 = document.getElementById( 'canvas1' );
+				const canvas2 = document.getElementById( 'canvas2' );
+				const canvas3 = document.getElementById( 'canvas3' );
+				const canvas4 = document.getElementById( 'canvas4' );
 
-				var w = 300, h = 200;
+				const w = 300, h = 200;
 
-				var fullWidth = w * 2;
-				var fullHeight = h * 2;
+				const fullWidth = w * 2;
+				const fullHeight = h * 2;
 
 				views.push( new View( canvas1, fullWidth, fullHeight, w * 0, h * 0, w, h ) );
 				views.push( new View( canvas2, fullWidth, fullHeight, w * 1, h * 0, w, h ) );
@@ -132,30 +132,30 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 ).normalize();
 				scene.add( light );
 
 				// shadow
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 128;
 				canvas.height = 128;
 
-				var context = canvas.getContext( '2d' );
-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
+				const context = canvas.getContext( '2d' );
+				const gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 				gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
 				gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
 
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
+				const shadowTexture = new THREE.CanvasTexture( canvas );
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
+				const shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
+				const shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
-				var shadowMesh;
+				let shadowMesh;
 
 				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
@@ -174,25 +174,25 @@
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				var radius = 200;
+				const radius = 200;
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
+				const geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-				var count = geometry1.attributes.position.count;
+				const count = geometry1.attributes.position.count;
 				geometry1.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-				var geometry2 = geometry1.clone();
-				var geometry3 = geometry1.clone();
+				const geometry2 = geometry1.clone();
+				const geometry3 = geometry1.clone();
 
-				var color = new THREE.Color();
-				var positions1 = geometry1.attributes.position;
-				var positions2 = geometry2.attributes.position;
-				var positions3 = geometry3.attributes.position;
-				var colors1 = geometry1.attributes.color;
-				var colors2 = geometry2.attributes.color;
-				var colors3 = geometry3.attributes.color;
+				const color = new THREE.Color();
+				const positions1 = geometry1.attributes.position;
+				const positions2 = geometry2.attributes.position;
+				const positions3 = geometry3.attributes.position;
+				const colors1 = geometry1.attributes.color;
+				const colors2 = geometry2.attributes.color;
+				const colors3 = geometry3.attributes.color;
 
-				for ( var i = 0; i < count; i ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
 					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
 					colors1.setXYZ( i, color.r, color.g, color.b );
@@ -205,30 +205,30 @@
 
 				}
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xffffff,
 					flatShading: true,
 					vertexColors: true,
 					shininess: 0
 				} );
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
+				const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				var mesh = new THREE.Mesh( geometry1, material );
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+				let mesh = new THREE.Mesh( geometry1, material );
+				let wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = - 400;
 				mesh.rotation.x = - 1.87;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry2, material );
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry2, material );
+				wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = 400;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry3, material );
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry3, material );
+				wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
 				mesh.add( wireframe );
 				scene.add( mesh );
 
@@ -249,7 +249,7 @@
 
 			function animate() {
 
-				for ( var i = 0; i < views.length; ++ i ) {
+				for ( let i = 0; i < views.length; ++ i ) {
 
 					views[ i ].render();
 

examples/webgl_multiple_elements.html

@@ -69,9 +69,9 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var canvas;
+			let canvas, renderer;
 
-			var scenes = [], renderer;
+			const scenes = [];
 
 			init();
 			animate();
@@ -80,27 +80,27 @@
 
 				canvas = document.getElementById( "c" );
 
-				var geometries = [
+				const geometries = [
 					new THREE.BoxBufferGeometry( 1, 1, 1 ),
 					new THREE.SphereBufferGeometry( 0.5, 12, 8 ),
 					new THREE.DodecahedronBufferGeometry( 0.5 ),
 					new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 12 )
 				];
 
-				var content = document.getElementById( 'content' );
+				const content = document.getElementById( 'content' );
 
-				for ( var i = 0; i < 40; i ++ ) {
+				for ( let i = 0; i < 40; i ++ ) {
 
-					var scene = new THREE.Scene();
+					const scene = new THREE.Scene();
 
 					// make a list item
-					var element = document.createElement( 'div' );
+					const element = document.createElement( 'div' );
 					element.className = 'list-item';
 
-					var sceneElement = document.createElement( 'div' );
+					const sceneElement = document.createElement( 'div' );
 					element.appendChild( sceneElement );
 
-					var descriptionElement = document.createElement( 'div' );
+					const descriptionElement = document.createElement( 'div' );
 					descriptionElement.innerText = 'Scene ' + ( i + 1 );
 					element.appendChild( descriptionElement );
 
@@ -108,11 +108,11 @@
 					scene.userData.element = sceneElement;
 					content.appendChild( element );
 
-					var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10 );
+					const camera = new THREE.PerspectiveCamera( 50, 1, 1, 10 );
 					camera.position.z = 2;
 					scene.userData.camera = camera;
 
-					var controls = new OrbitControls( scene.userData.camera, scene.userData.element );
+					const controls = new OrbitControls( scene.userData.camera, scene.userData.element );
 					controls.minDistance = 2;
 					controls.maxDistance = 5;
 					controls.enablePan = false;
@@ -120,9 +120,9 @@
 					scene.userData.controls = controls;
 
 					// add one random mesh to each scene
-					var geometry = geometries[ geometries.length * Math.random() | 0 ];
+					const geometry = geometries[ geometries.length * Math.random() | 0 ];
 
-					var material = new THREE.MeshStandardMaterial( {
+					const material = new THREE.MeshStandardMaterial( {
 
 						color: new THREE.Color().setHSL( Math.random(), 1, 0.75 ),
 						roughness: 0.5,
@@ -135,7 +135,7 @@
 
 					scene.add( new THREE.HemisphereLight( 0xaaaaaa, 0x444444 ) );
 
-					var light = new THREE.DirectionalLight( 0xffffff, 0.5 );
+					const light = new THREE.DirectionalLight( 0xffffff, 0.5 );
 					light.position.set( 1, 1, 1 );
 					scene.add( light );
 
@@ -152,8 +152,8 @@
 
 			function updateSize() {
 
-				var width = canvas.clientWidth;
-				var height = canvas.clientHeight;
+				const width = canvas.clientWidth;
+				const height = canvas.clientHeight;
 
 				if ( canvas.width !== width || canvas.height !== height ) {
 
@@ -190,10 +190,10 @@
 
 					// get the element that is a place holder for where we want to
 					// draw the scene
-					var element = scene.userData.element;
+					const element = scene.userData.element;
 
 					// get its position relative to the page's viewport
-					var rect = element.getBoundingClientRect();
+					const rect = element.getBoundingClientRect();
 
 					// check if it's offscreen. If so skip it
 					if ( rect.bottom < 0 || rect.top > renderer.domElement.clientHeight ||
@@ -204,15 +204,15 @@
 					}
 
 					// set the viewport
-					var width = rect.right - rect.left;
-					var height = rect.bottom - rect.top;
-					var left = rect.left;
-					var bottom = renderer.domElement.clientHeight - rect.bottom;
+					const width = rect.right - rect.left;
+					const height = rect.bottom - rect.top;
+					const left = rect.left;
+					const bottom = renderer.domElement.clientHeight - rect.bottom;
 
 					renderer.setViewport( left, bottom, width, height );
 					renderer.setScissor( left, bottom, width, height );
 
-					var camera = scene.userData.camera;
+					const camera = scene.userData.camera;
 
 					//camera.aspect = width / height; // not changing in this example
 					//camera.updateProjectionMatrix();

examples/webgl_multiple_elements_text.html

@@ -85,16 +85,18 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var scenes = [], views, t, canvas, renderer;
+			const scenes = [];
+
+			let views, t, canvas, renderer;
 
 			window.onload = init;
 
 			function init() {
 
-				var balls = 20;
-				var size = .25;
+				const balls = 20;
+				const size = .25;
 
-				var colors = [
+				const colors = [
 					'rgb(0,127,255)', 'rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,255,255)',
 					'rgb(255,0,255)', 'rgb(255,0,127)', 'rgb(255,255,0)', 'rgb(0,255,127)'
 				];
@@ -106,24 +108,24 @@
 
 				views = document.querySelectorAll( '.view' );
 
-				for ( var n = 0; n < views.length; n ++ ) {
+				for ( let n = 0; n < views.length; n ++ ) {
 
-					var scene = new THREE.Scene();
+					const scene = new THREE.Scene();
 					scene.background = new THREE.Color( 0xffffff );
 
-					var geometry0 = new THREE.BufferGeometry();
-					var geometry1 = new THREE.BufferGeometry();
+					const geometry0 = new THREE.BufferGeometry();
+					const geometry1 = new THREE.BufferGeometry();
 
-					var vertices = [];
+					const vertices = [];
 
 					if ( views[ n ].lattice ) {
 
-						var range = balls / 2;
-						for ( var i = - range; i <= range; i ++ ) {
+						const range = balls / 2;
+						for ( let i = - range; i <= range; i ++ ) {
 
-							for ( var j = - range; j <= range; j ++ ) {
+							for ( let j = - range; j <= range; j ++ ) {
 
-								for ( var k = - range; k <= range; k ++ ) {
+								for ( let k = - range; k <= range; k ++ ) {
 
 									vertices.push( i, j, k );
 
@@ -135,11 +137,11 @@
 
 					} else {
 
-						for ( var m = 0; m < Math.pow( balls, 3 ); m ++ ) {
+						for ( let m = 0; m < Math.pow( balls, 3 ); m ++ ) {
 
-							var i = balls * Math.random() - balls / 2;
-							var j = balls * Math.random() - balls / 2;
-							var k = balls * Math.random() - balls / 2;
+							const i = balls * Math.random() - balls / 2;
+							const j = balls * Math.random() - balls / 2;
+							const k = balls * Math.random() - balls / 2;
 
 							vertices.push( i, j, k );
 
@@ -150,29 +152,29 @@
 					geometry0.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 					geometry1.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices.slice(), 3 ) );
 
-					var index = Math.floor( colors.length * Math.random() );
+					const index = Math.floor( colors.length * Math.random() );
 
-					var canvas2 = document.createElement( 'canvas' );
+					const canvas2 = document.createElement( 'canvas' );
 					canvas2.width = 128;
 					canvas2.height = 128;
-					var context = canvas2.getContext( '2d' );
+					const context = canvas2.getContext( '2d' );
 					context.arc( 64, 64, 64, 0, 2 * Math.PI );
 					context.fillStyle = colors[ index ];
 					context.fill();
-					var texture = new THREE.CanvasTexture( canvas2 );
+					const texture = new THREE.CanvasTexture( canvas2 );
 
-					var material = new THREE.PointsMaterial( { size: size, map: texture, transparent: true, alphaTest: 0.1 } );
+					const material = new THREE.PointsMaterial( { size: size, map: texture, transparent: true, alphaTest: 0.1 } );
 
 					scene.add( new THREE.Points( geometry0, material ) );
 
 					scene.userData.view = views[ n ];
 					scene.userData.geometry1 = geometry1;
 
-					var camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 100 );
+					const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 100 );
 					camera.position.set( 0, 0, 1.2 * balls );
 					scene.userData.camera = camera;
 
-					var controls = new OrbitControls( camera, views[ n ] );
+					const controls = new OrbitControls( camera, views[ n ] );
 					scene.userData.controls = controls;
 
 					scenes.push( scene );
@@ -186,8 +188,8 @@
 
 			function updateSize() {
 
-				var width = canvas.clientWidth;
-				var height = canvas.clientHeight;
+				const width = canvas.clientWidth;
+				const height = canvas.clientHeight;
 
 				if ( canvas.width !== width || canvas.height != height ) {
 
@@ -217,32 +219,36 @@
 
 				scenes.forEach( function ( scene ) {
 
-					var rect = scene.userData.view.getBoundingClientRect();
+					const rect = scene.userData.view.getBoundingClientRect();
+
 					// check if it's offscreen. If so skip it
+
 					if ( rect.bottom < 0 || rect.top > renderer.domElement.clientHeight ||
 						 rect.right < 0 || rect.left > renderer.domElement.clientWidth ) {
 
 						return; // it's off screen
 
 					}
+
 					// set the viewport
-					var width = rect.right - rect.left;
-					var height = rect.bottom - rect.top;
-					var left = rect.left;
-					var bottom = renderer.domElement.clientHeight - rect.bottom;
+
+					const width = rect.right - rect.left;
+					const height = rect.bottom - rect.top;
+					const left = rect.left;
+					const bottom = renderer.domElement.clientHeight - rect.bottom;
 
 					renderer.setViewport( left, bottom, width, height );
 					renderer.setScissor( left, bottom, width, height );
 
 					renderer.render( scene, scene.userData.camera );
 
-					var points = scene.children[ 0 ];
-					var position = points.geometry.attributes.position;
+					const points = scene.children[ 0 ];
+					const position = points.geometry.attributes.position;
 
-					var point = new THREE.Vector3();
-					var offset = new THREE.Vector3();
+					const point = new THREE.Vector3();
+					const offset = new THREE.Vector3();
 
-					for ( var i = 0; i < position.count; i ++ ) {
+					for ( let i = 0; i < position.count; i ++ ) {
 
 						point.fromBufferAttribute( scene.userData.geometry1.attributes.position, i );
 
@@ -317,7 +323,7 @@
 
 		<script>
 
-			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
+			let parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
 			parent.displacement = function ( x, y, z, t, target ) {
 
@@ -337,7 +343,7 @@
 
 		<script>
 
-			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
+			parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
 			parent.displacement = function ( x, y, z, t, target ) {
 
@@ -431,7 +437,7 @@
 
 		<script>
 
-			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
+			parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
 			parent.displacement = function ( x, y, z, t, target ) {
 
@@ -441,8 +447,8 @@
 
 				} else {
 
-					var rho = Math.sqrt( x * x + y * y );
-					var phi = Math.atan2( y, x );
+					const rho = Math.sqrt( x * x + y * y );
+					const phi = Math.atan2( y, x );
 
 					return target.set( 1.5 * Math.cos( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 1.5 * Math.sin( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 0 );
 
@@ -462,7 +468,7 @@
 
 		<script>
 
-			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
+			parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
 			parent.displacement = function ( x, y, z, t, target ) {
 
@@ -472,8 +478,8 @@
 
 				} else {
 
-					var rho = Math.sqrt( x * x + y * y );
-					var phi = Math.atan2( y, x );
+					const rho = Math.sqrt( x * x + y * y );
+					const phi = Math.atan2( y, x );
 
 					return target.set( 1.5 * Math.cos( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 1.5 * Math.sin( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 0 );
 
@@ -567,7 +573,7 @@
 
 		<script>
 
-			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
+			parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
 			parent.displacement = function ( x, y, z, t, target ) {
 
@@ -577,9 +583,9 @@
 
 				} else {
 
-					var r = Math.sqrt( x * x + y * y + z * z );
-					var theta = Math.acos( z / r );
-					var phi = Math.atan2( y, x );
+					const r = Math.sqrt( x * x + y * y + z * z );
+					const theta = Math.acos( z / r );
+					const phi = Math.atan2( y, x );
 
 					return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.cos( theta ) * Math.sin( r - t ) / r );
 
@@ -599,7 +605,7 @@
 
 		<script>
 
-			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
+			parent = document.scripts[ document.scripts.length - 1 ].parentNode;
 
 			parent.displacement = function ( x, y, z, t, target ) {
 
@@ -609,9 +615,9 @@
 
 				} else {
 
-					var r = Math.sqrt( x * x + y * y + z * z );
-					var theta = Math.acos( z / r );
-					var phi = Math.atan2( y, x );
+					const r = Math.sqrt( x * x + y * y + z * z );
+					const theta = Math.acos( z / r );
+					const phi = Math.atan2( y, x );
 
 					return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r, 3 * Math.cos( theta ) * Math.sin( r - t ) / r );
 

examples/webgl_multiple_renderers.html

@@ -23,10 +23,10 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer1, renderer2;
+			let camera, scene, renderer1, renderer2;
 
-			var mesh1, mesh2, mesh3;
-			var color = new THREE.Color();
+			let mesh1, mesh2, mesh3;
+			const color = new THREE.Color();
 
 			init();
 			animate();
@@ -38,34 +38,34 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 0, 1 );
-				scene.add( light );
+				const light1 = new THREE.DirectionalLight( 0xffffff );
+				light1.position.set( 0, 0, 1 );
+				scene.add( light1 );
 
-				var light = new THREE.DirectionalLight( 0xffff00, 0.75 );
-				light.position.set( 0, 0, - 1 );
-				scene.add( light );
+				const light2 = new THREE.DirectionalLight( 0xffff00, 0.75 );
+				light2.position.set( 0, 0, - 1 );
+				scene.add( light2 );
 
 				// shadow
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 128;
 				canvas.height = 128;
 
-				var context = canvas.getContext( '2d' );
-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
+				const context = canvas.getContext( '2d' );
+				const gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 				gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
 				gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
 
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
+				const shadowTexture = new THREE.CanvasTexture( canvas );
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
+				const shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
+				const shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
-				var shadowMesh;
+				let shadowMesh;
 
 				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
@@ -84,24 +84,24 @@
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				var radius = 200;
+				const radius = 200;
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
+				const geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-				var count = geometry1.attributes.position.count;
+				const count = geometry1.attributes.position.count;
 				geometry1.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-				var geometry2 = geometry1.clone();
-				var geometry3 = geometry1.clone();
+				const geometry2 = geometry1.clone();
+				const geometry3 = geometry1.clone();
 
-				var positions1 = geometry1.attributes.position;
-				var positions2 = geometry2.attributes.position;
-				var positions3 = geometry3.attributes.position;
-				var colors1 = geometry1.attributes.color;
-				var colors2 = geometry2.attributes.color;
-				var colors3 = geometry3.attributes.color;
+				const positions1 = geometry1.attributes.position;
+				const positions2 = geometry2.attributes.position;
+				const positions3 = geometry3.attributes.position;
+				const colors1 = geometry1.attributes.color;
+				const colors2 = geometry2.attributes.color;
+				const colors3 = geometry3.attributes.color;
 
-				for ( var i = 0; i < count; i ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
 					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
 					colors1.setXYZ( i, color.r, color.g, color.b );
@@ -114,35 +114,35 @@
 
 				}
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xffffff,
 					flatShading: true,
 					vertexColors: true,
 					shininess: 0
 				} );
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
+				const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 				mesh1 = new THREE.Mesh( geometry1, material );
 				mesh1.position.x = - 400;
 				mesh1.rotation.x = - 1.87;
 				scene.add( mesh1 );
 
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
-				mesh1.add( wireframe );
+				const wireframe1 = new THREE.Mesh( geometry1, wireframeMaterial );
+				mesh1.add( wireframe1 );
 
 				mesh2 = new THREE.Mesh( geometry2, material );
 				mesh2.position.x = 400;
 				scene.add( mesh2 );
 
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
-				mesh2.add( wireframe );
+				const wireframe2 = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh2.add( wireframe2 );
 
 				mesh3 = new THREE.Mesh( geometry3, material );
 				scene.add( mesh3 );
 
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
-				mesh3.add( wireframe );
+				const wireframe3 = new THREE.Mesh( geometry3, wireframeMaterial );
+				mesh3.add( wireframe3 );
 
 				//
 
@@ -168,15 +168,15 @@
 				mesh2.rotation.z += Math.PI / 500;
 				mesh3.rotation.z += Math.PI / 500;
 
-				var position = new THREE.Vector3();
-				var color = new THREE.Color();
+				const position = new THREE.Vector3();
+				const color = new THREE.Color();
 
-				var time = performance.now() / 500;
+				let time = performance.now() / 500;
 
-				var positions = mesh3.geometry.attributes.position;
-				var colors = mesh3.geometry.attributes.color;
+				const positions = mesh3.geometry.attributes.position;
+				const colors = mesh3.geometry.attributes.color;
 
-				for ( var i = 0, l = positions.count; i < l; i ++ ) {
+				for ( let i = 0, l = positions.count; i < l; i ++ ) {
 
 					position.fromArray( positions.array, i * 3 );
 
@@ -189,7 +189,7 @@
 
 				//
 
-				var time = performance.now() / 2000;
+				time = performance.now() / 2000;
 
 				camera.position.x = Math.sin( time ) * 1800;
 				camera.position.z = Math.cos( time ) * 1800;

examples/webgl_multiple_scenes_comparison.html

@@ -44,10 +44,10 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var container, camera, renderer, controls;
-			var sceneL, sceneR;
+			let container, camera, renderer, controls;
+			let sceneL, sceneR;
 
-			var sliderPos = window.innerWidth / 2;
+			let sliderPos = window.innerWidth / 2;
 
 			init();
 
@@ -66,7 +66,7 @@
 
 				controls = new OrbitControls( camera, container );
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x444444, 1 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0x444444, 1 );
 				light.position.set( - 2, 2, 2 );
 				sceneL.add( light.clone() );
 				sceneR.add( light.clone() );
@@ -87,19 +87,19 @@
 
 			function initMeshes() {
 
-				var geometry = new THREE.IcosahedronBufferGeometry( 1, 3 );
+				const geometry = new THREE.IcosahedronBufferGeometry( 1, 3 );
 
-				var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
-				sceneL.add( mesh );
+				const meshL = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+				sceneL.add( meshL );
 
-				var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { wireframe: true } ) );
-				sceneR.add( mesh );
+				const meshR = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { wireframe: true } ) );
+				sceneR.add( meshR );
 
 			}
 
 			function initSlider() {
 
-				var slider = document.querySelector( '.slider' );
+				const slider = document.querySelector( '.slider' );
 
 				function onPointerDown() {
 

examples/webgl_multiple_views.html

@@ -17,15 +17,15 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let stats;
 
-			var views, scene, renderer;
+			let scene, renderer;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowWidth, windowHeight;
+			let windowWidth, windowHeight;
 
-			var views = [
+			const views = [
 				{
 					left: 0,
 					bottom: 0,
@@ -84,12 +84,12 @@
 
 			function init() {
 
-				container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
-				for ( var ii = 0; ii < views.length; ++ ii ) {
+				for ( let ii = 0; ii < views.length; ++ ii ) {
 
-					var view = views[ ii ];
-					var camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
+					const view = views[ ii ];
+					const camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
 					camera.position.fromArray( view.eye );
 					camera.up.fromArray( view.up );
 					view.camera = camera;
@@ -98,30 +98,30 @@
 
 				scene = new THREE.Scene();
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
 				// shadow
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 128;
 				canvas.height = 128;
 
-				var context = canvas.getContext( '2d' );
-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
+				const context = canvas.getContext( '2d' );
+				const gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 				gradient.addColorStop( 0.1, 'rgba(0,0,0,0.15)' );
 				gradient.addColorStop( 1, 'rgba(0,0,0,0)' );
 
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
+				const shadowTexture = new THREE.CanvasTexture( canvas );
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture, transparent: true } );
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
+				const shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture, transparent: true } );
+				const shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
-				var shadowMesh;
+				let shadowMesh;
 
 				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
@@ -140,25 +140,25 @@
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				var radius = 200;
+				const radius = 200;
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
+				const geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-				var count = geometry1.attributes.position.count;
+				const count = geometry1.attributes.position.count;
 				geometry1.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-				var geometry2 = geometry1.clone();
-				var geometry3 = geometry1.clone();
+				const geometry2 = geometry1.clone();
+				const geometry3 = geometry1.clone();
 
-				var color = new THREE.Color();
-				var positions1 = geometry1.attributes.position;
-				var positions2 = geometry2.attributes.position;
-				var positions3 = geometry3.attributes.position;
-				var colors1 = geometry1.attributes.color;
-				var colors2 = geometry2.attributes.color;
-				var colors3 = geometry3.attributes.color;
+				const color = new THREE.Color();
+				const positions1 = geometry1.attributes.position;
+				const positions2 = geometry2.attributes.position;
+				const positions3 = geometry3.attributes.position;
+				const colors1 = geometry1.attributes.color;
+				const colors2 = geometry2.attributes.color;
+				const colors3 = geometry3.attributes.color;
 
-				for ( var i = 0; i < count; i ++ ) {
+				for ( let i = 0; i < count; i ++ ) {
 
 					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
 					colors1.setXYZ( i, color.r, color.g, color.b );
@@ -171,30 +171,30 @@
 
 				}
 
-				var material = new THREE.MeshPhongMaterial( {
+				const material = new THREE.MeshPhongMaterial( {
 					color: 0xffffff,
 					flatShading: true,
 					vertexColors: true,
 					shininess: 0
 				} );
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
+				const wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				var mesh = new THREE.Mesh( geometry1, material );
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+				let mesh = new THREE.Mesh( geometry1, material );
+				let wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = - 400;
 				mesh.rotation.x = - 1.87;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry2, material );
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry2, material );
+				wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = 400;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry3, material );
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				 mesh = new THREE.Mesh( geometry3, material );
+				wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
 				mesh.add( wireframe );
 				scene.add( mesh );
 
@@ -243,17 +243,17 @@
 
 				updateSize();
 
-				for ( var ii = 0; ii < views.length; ++ ii ) {
+				for ( let ii = 0; ii < views.length; ++ ii ) {
 
-					var view = views[ ii ];
-					var camera = view.camera;
+					const view = views[ ii ];
+					const camera = view.camera;
 
 					view.updateCamera( camera, scene, mouseX, mouseY );
 
-					var left = Math.floor( windowWidth * view.left );
-					var bottom = Math.floor( windowHeight * view.bottom );
-					var width = Math.floor( windowWidth * view.width );
-					var height = Math.floor( windowHeight * view.height );
+					const left = Math.floor( windowWidth * view.left );
+					const bottom = Math.floor( windowHeight * view.bottom );
+					const width = Math.floor( windowWidth * view.width );
+					const height = Math.floor( windowHeight * view.height );
 
 					renderer.setViewport( left, bottom, width, height );
 					renderer.setScissor( left, bottom, width, height );

examples/webgl_nearestneighbour.html

@@ -57,14 +57,17 @@
 			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 			import { TypedArrayUtils } from './jsm/utils/TypedArrayUtils.js';
 
-			var camera, scene, renderer;
-			var controls;
+			let camera, scene, renderer;
+			let controls;
 
-			var amountOfParticles = 500000, maxDistance = Math.pow( 120, 2 );
-			var positions, alphas, particles, _particleGeom;
-			var kdtree;
+			const amountOfParticles = 500000, maxDistance = Math.pow( 120, 2 );
+			let positions, alphas, particles, _particleGeom;
+			let kdtree;
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
+
+			init();
+			animate();
 
 			function init() {
 
@@ -73,11 +76,11 @@
 				scene = new THREE.Scene();
 
 				// add a skybox background
-				var cubeTextureLoader = new THREE.CubeTextureLoader();
+				const cubeTextureLoader = new THREE.CubeTextureLoader();
 
 				cubeTextureLoader.setPath( 'textures/cube/skyboxsun25deg/' );
 
-				var cubeTexture = cubeTextureLoader.load( [
+				const cubeTexture = cubeTextureLoader.load( [
 					'px.jpg', 'nx.jpg',
 					'py.jpg', 'ny.jpg',
 					'pz.jpg', 'nz.jpg',
@@ -100,14 +103,14 @@
 
 				// create the custom shader
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
-				var imagePreviewTexture = textureLoader.load( 'textures/crate.gif' );
+				const imagePreviewTexture = textureLoader.load( 'textures/crate.gif' );
 
 				imagePreviewTexture.minFilter = THREE.LinearMipmapLinearFilter;
 				imagePreviewTexture.magFilter = THREE.LinearFilter;
 
-				var pointShaderMaterial = new THREE.ShaderMaterial( {
+				const pointShaderMaterial = new THREE.ShaderMaterial( {
 					uniforms: {
 						tex1: { value: imagePreviewTexture },
 						zoom: { value: 9.0 }
@@ -119,11 +122,6 @@
 
 
 				//create particles with buffer geometry
-				var distanceFunction = function ( a, b ) {
-
-					return Math.pow( a[ 0 ] - b[ 0 ], 2 ) + Math.pow( a[ 1 ] - b[ 1 ], 2 ) + Math.pow( a[ 2 ] - b[ 2 ], 2 );
-
-				};
 
 				positions = new Float32Array( amountOfParticles * 3 );
 				alphas = new Float32Array( amountOfParticles );
@@ -134,7 +132,7 @@
 
 				particles = new THREE.Points( _particleGeom, pointShaderMaterial );
 
-				for ( var x = 0; x < amountOfParticles; x ++ ) {
+				for ( let x = 0; x < amountOfParticles; x ++ ) {
 
 					positions[ x * 3 + 0 ] = Math.random() * 1000;
 					positions[ x * 3 + 1 ] = Math.random() * 1000;
@@ -144,8 +142,7 @@
 
 				}
 
-
-				var measureStart = new Date().getTime();
+				const measureStart = new Date().getTime();
 
 				// creating the kdtree takes a lot of time to execute, in turn the nearest neighbour search will be much faster
 				kdtree = new TypedArrayUtils.Kdtree( positions, distanceFunction, 3 );
@@ -186,23 +183,23 @@
 			function displayNearest( position ) {
 
 				// take the nearest 200 around him. distance^2 'cause we use the manhattan distance and no square is applied in the distance function
-				var imagePositionsInRange = kdtree.nearest( [ position.x, position.y, position.z ], 100, maxDistance );
+				const imagePositionsInRange = kdtree.nearest( [ position.x, position.y, position.z ], 100, maxDistance );
 
 				// We combine the nearest neighbour with a view frustum. Doesn't make sense if we change the sprites not in our view... well maybe it does. Whatever you want.
-				var _frustum = new THREE.Frustum();
-				var _projScreenMatrix = new THREE.Matrix4();
+				const _frustum = new THREE.Frustum();
+				const _projScreenMatrix = new THREE.Matrix4();
 
 				_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 				_frustum.setFromProjectionMatrix( _projScreenMatrix );
 
-				for ( var i = 0, il = imagePositionsInRange.length; i < il; i ++ ) {
+				for ( let i = 0, il = imagePositionsInRange.length; i < il; i ++ ) {
 
-					var object = imagePositionsInRange[ i ];
-					var objectPoint = new THREE.Vector3().fromArray( object[ 0 ].obj );
+					const object = imagePositionsInRange[ i ];
+					const objectPoint = new THREE.Vector3().fromArray( object[ 0 ].obj );
 
 					if ( _frustum.containsPoint( objectPoint ) ) {
 
-						var objectIndex = object[ 0 ].pos;
+						const objectIndex = object[ 0 ].pos;
 
 						// set the alpha according to distance
 						alphas[ objectIndex ] = 1.0 / maxDistance * object[ 1 ];
@@ -216,9 +213,11 @@
 
 			}
 
+			function distanceFunction( a, b ) {
 
-			init();
-			animate();
+				return Math.pow( a[ 0 ] - b[ 0 ], 2 ) + Math.pow( a[ 1 ] - b[ 1 ], 2 ) + Math.pow( a[ 2 ] - b[ 2 ], 2 );
+
+			}
 
 		</script>
 	</body>

examples/webgl_panorama_cube.html

@@ -18,16 +18,16 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, controls;
-			var renderer;
-			var scene;
+			let camera, controls;
+			let renderer;
+			let scene;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -45,17 +45,17 @@
 				controls.enableDamping = true;
 				controls.rotateSpeed = - 0.25;
 
-				var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe.jpg", 6 );
+				const textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe.jpg", 6 );
 
-				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( new THREE.BoxBufferGeometry( 1, 1, 1 ), materials );
+				const skyBox = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 1 ), materials );
 				skyBox.geometry.scale( 1, 1, - 1 );
 				scene.add( skyBox );
 
@@ -65,22 +65,22 @@
 
 			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 imageObj = new Image();
+				const imageObj = new Image();
 
 				imageObj.onload = function () {
 
-					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/webgl_panorama_equirectangular.html

@@ -18,9 +18,9 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var isUserInteracting = false,
+			let isUserInteracting = false,
 				onPointerDownMouseX = 0, onPointerDownMouseY = 0,
 				lon = 0, onPointerDownLon = 0,
 				lat = 0, onPointerDownLat = 0,
@@ -31,23 +31,21 @@
 
 			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 texture = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				const texture = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
+				const material = new THREE.MeshBasicMaterial( { map: texture } );
 
-				mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 
 				scene.add( mesh );
 
@@ -86,7 +84,7 @@
 
 					event.preventDefault();
 
-					var reader = new FileReader();
+					const reader = new FileReader();
 					reader.addEventListener( 'load', function ( event ) {
 
 						material.map.image.src = event.target.result;
@@ -153,7 +151,7 @@
 
 			function onDocumentMouseWheel( event ) {
 
-				var fov = camera.fov + event.deltaY * 0.05;
+				const fov = camera.fov + event.deltaY * 0.05;
 
 				camera.fov = THREE.MathUtils.clamp( fov, 10, 75 );
 

examples/webgl_performance.html

@@ -19,16 +19,16 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var objects;
+			let objects;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
@@ -38,7 +38,7 @@
 
 			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 );
@@ -49,16 +49,16 @@
 
 				objects = [];
 
-				var material = new THREE.MeshNormalMaterial();
+				const material = new THREE.MeshNormalMaterial();
 
-				var loader = new THREE.BufferGeometryLoader();
+				const loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 
-					for ( var i = 0; i < 5000; i ++ ) {
+					for ( let i = 0; i < 5000; i ++ ) {
 
-						var mesh = new THREE.Mesh( geometry, material );
+						const mesh = new THREE.Mesh( geometry, material );
 
 						mesh.position.x = Math.random() * 8000 - 4000;
 						mesh.position.y = Math.random() * 8000 - 4000;
@@ -125,7 +125,7 @@
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, il = objects.length; i < il; i ++ ) {
+				for ( let i = 0, il = objects.length; i < il; i ++ ) {
 
 					objects[ i ].rotation.x += 0.01;
 					objects[ i ].rotation.y += 0.02;

examples/webgl_performance_nodes.html

@@ -43,17 +43,18 @@
 				MeshStandardNodeMaterial
 			} from './jsm/nodes/Nodes.js';
 
-			var container, stats;
+			let stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var geometry;
-			var meshes = [];
+			let geometry;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
+
+			const meshes = [];
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
@@ -64,7 +65,7 @@
 
 				count = count !== undefined ? count : 70;
 
-				var i = 0;
+				let i = 0;
 
 				for ( i = 0; i < meshes.length; i ++ ) {
 
@@ -74,11 +75,11 @@
 
 				}
 
-				meshes = [];
+				meshes.length = 0;
 
 				for ( i = 0; i < count; i ++ ) {
 
-					var material = new MaterialClass(),
+					const material = new MaterialClass(),
 						color = 0xFFFFFF * Math.random();
 
 					if ( material.color.isNode ) material.color.value.setHex( color );
@@ -87,7 +88,7 @@
 					// prevent share code
 					material.defines.UUID = material.uuid;
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 1000 - 500;
 					mesh.position.y = Math.random() * 1000 - 500;
@@ -108,7 +109,7 @@
 
 			function benchmark() {
 
-				var time, benchmarkTime;
+				let time, benchmarkTime;
 
 				// Stabilizes CPU
 
@@ -166,7 +167,7 @@
 
 			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 );
@@ -176,7 +177,7 @@
 				scene.add( new THREE.PointLight( 0xFFFFFF ) );
 				//scene.background = new THREE.Color( 0xffffff );
 
-				var loader = new THREE.BufferGeometryLoader();
+				const loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/suzanne_buffergeometry.json', function ( geo ) {
 
 					geo.computeVertexNormals();
@@ -188,7 +189,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				//renderer.sortObjects = false;
 
 				container.appendChild( renderer.domElement );
 

examples/webgl_performance_static.html

@@ -19,14 +19,14 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
@@ -36,7 +36,7 @@
 
 			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 );
@@ -46,16 +46,16 @@
 				scene.background = new THREE.Color( 0xffffff );
 				scene.matrixAutoUpdate = false;
 
-				var material = new THREE.MeshNormalMaterial();
+				const material = new THREE.MeshNormalMaterial();
 
-				var loader = new THREE.BufferGeometryLoader();
+				const loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 
-					for ( var i = 0; i < 7700; i ++ ) {
+					for ( let i = 0; i < 7700; i ++ ) {
 
-						var mesh = new THREE.Mesh( geometry, material );
+						const mesh = new THREE.Mesh( geometry, material );
 
 						mesh.position.x = Math.random() * 10000 - 5000;
 						mesh.position.y = Math.random() * 10000 - 5000;
@@ -75,7 +75,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				//renderer.sortObjects = false;
 
 				container.appendChild( renderer.domElement );
 

examples/webgl_pmrem_test.html

@@ -28,13 +28,13 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
-			var scene, camera, controls, renderer;
+			let scene, camera, controls, renderer;
 
 			function init() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
-				var aspect = width / height;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+				const aspect = width / height;
 
 				// renderer
 
@@ -71,11 +71,11 @@
 
 				// light
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0 ); // set intensity to 0 to start
-				var x = 597;
-				var y = 213;
-				var theta = ( x + 0.5 ) * Math.PI / 512;
-				var phi = ( y + 0.5 ) * Math.PI / 512;
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0 ); // set intensity to 0 to start
+				const x = 597;
+				const y = 213;
+				const theta = ( x + 0.5 ) * Math.PI / 512;
+				const phi = ( y + 0.5 ) * Math.PI / 512;
 
 				directionalLight.position.setFromSphericalCoords( 100, - phi, Math.PI / 2 - theta );
 
@@ -125,7 +125,7 @@
 
 			function createObjects() {
 
-				var radianceMap = null;
+				let radianceMap = null;
 				new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
 					// .setDataType( THREE.FloatType )
@@ -137,13 +137,13 @@
 
 						scene.background = radianceMap;
 
-						var geometry = new THREE.SphereBufferGeometry( 0.4, 32, 32 );
+						const geometry = new THREE.SphereBufferGeometry( 0.4, 32, 32 );
 
-						for ( var x = 0; x <= 10; x ++ ) {
+						for ( let x = 0; x <= 10; x ++ ) {
 
-							for ( var y = 0; y <= 2; y ++ ) {
+							for ( let y = 0; y <= 2; y ++ ) {
 
-								var material = new THREE.MeshPhysicalMaterial( {
+								const material = new THREE.MeshPhysicalMaterial( {
 									roughness: x / 10,
 									metalness: y < 1 ? 1 : 0,
 									color: y < 2 ? 0xffffff : 0x000000,
@@ -151,7 +151,7 @@
 									envMapIntensity: 1
 								} );
 
-								var mesh = new THREE.Mesh( geometry, material );
+								const mesh = new THREE.Mesh( geometry, material );
 								mesh.position.x = x - 5;
 								mesh.position.y = 1 - y;
 								scene.add( mesh );
@@ -164,15 +164,15 @@
 
 					} );
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
 			}
 
 			function onResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				updateCamera();
@@ -185,8 +185,8 @@
 
 			function updateCamera() {
 
-				var horizontalFoV = 40;
-				var verticalFoV = 2 * Math.atan( Math.tan( horizontalFoV / 2 * Math.PI / 180 ) / camera.aspect ) * 180 / Math.PI;
+				const horizontalFoV = 40;
+				const verticalFoV = 2 * Math.atan( Math.tan( horizontalFoV / 2 * Math.PI / 180 ) / camera.aspect ) * 180 / Math.PI;
 				camera.fov = verticalFoV;
 				camera.updateProjectionMatrix();
 

examples/webgl_points_billboards.html

@@ -20,11 +20,11 @@
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var camera, scene, renderer, stats, material;
-			var mouseX = 0, mouseY = 0;
+			let camera, scene, renderer, stats, material;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -37,16 +37,16 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
 
-				var geometry = new THREE.BufferGeometry();
-				var vertices = [];
+				const geometry = new THREE.BufferGeometry();
+				const vertices = [];
 
-				var sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
+				const sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
 
-				for ( var i = 0; i < 10000; i ++ ) {
+				for ( let i = 0; i < 10000; i ++ ) {
 
-					var x = 2000 * Math.random() - 1000;
-					var y = 2000 * Math.random() - 1000;
-					var z = 2000 * Math.random() - 1000;
+					const x = 2000 * Math.random() - 1000;
+					const y = 2000 * Math.random() - 1000;
+					const z = 2000 * Math.random() - 1000;
 
 					vertices.push( x, y, z );
 
@@ -57,7 +57,7 @@
 				material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true } );
 				material.color.setHSL( 1.0, 0.3, 0.7 );
 
-				var particles = new THREE.Points( geometry, material );
+				const particles = new THREE.Points( geometry, material );
 				scene.add( particles );
 
 				//
@@ -74,7 +74,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( material, 'sizeAttenuation' ).onChange( function () {
 
@@ -129,14 +129,14 @@
 
 			function render() {
 
-				var time = Date.now() * 0.00005;
+				const time = Date.now() * 0.00005;
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 				camera.lookAt( scene.position );
 
-				var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
+				const h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 				material.color.setHSL( h, 0.5, 0.5 );
 
 				renderer.render( scene, camera );

examples/webgl_points_dynamic.html

@@ -29,22 +29,24 @@
 			import { FocusShader } from './jsm/shaders/FocusShader.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
-			var camera, scene, renderer, mesh;
+			let camera, scene, renderer, mesh;
 
-			var parent, meshes = [], clonemeshes = [];
+			let parent;
 
-			var composer, effectFocus;
+			const meshes = [], clonemeshes = [];
 
-			var clock = new THREE.Clock();
+			let composer, effectFocus;
 
-			var stats;
+			const clock = new THREE.Clock();
+
+			let stats;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.querySelector( '#container' );
+				const container = document.querySelector( '#container' );
 
 				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 50000 );
 				camera.position.set( 0, 700, 7000 );
@@ -55,11 +57,11 @@
 
 				camera.lookAt( scene.position );
 
-				var loader = new OBJLoader();
+				const loader = new OBJLoader();
 
 				loader.load( 'models/obj/male02/male02.obj', function ( object ) {
 
-					var positions = combineBuffer( object, 'position' );
+					const positions = combineBuffer( object, 'position' );
 
 					createMesh( positions, scene, 4.05, - 500, - 350, 600, 0xff7744 );
 					createMesh( positions, scene, 4.05, 500, - 350, 0, 0xff5522 );
@@ -70,7 +72,7 @@
 
 				loader.load( 'models/obj/female02/female02.obj', function ( object ) {
 
-					var positions = combineBuffer( object, 'position' );
+					const positions = combineBuffer( object, 'position' );
 
 					createMesh( positions, scene, 4.05, - 1000, - 350, 0, 0xffdd44 );
 					createMesh( positions, scene, 4.05, 0, - 350, 0, 0xffffff );
@@ -90,16 +92,16 @@
 				parent = new THREE.Object3D();
 				scene.add( parent );
 
-				var grid = new THREE.Points( new THREE.PlaneBufferGeometry( 15000, 15000, 64, 64 ), new THREE.PointsMaterial( { color: 0xff0000, size: 10 } ) );
+				const grid = new THREE.Points( new THREE.PlaneBufferGeometry( 15000, 15000, 64, 64 ), new THREE.PointsMaterial( { color: 0xff0000, size: 10 } ) );
 				grid.position.y = - 400;
 				grid.rotation.x = - Math.PI / 2;
 				parent.add( grid );
 
 				// postprocessing
 
-				var renderModel = new RenderPass( scene, camera );
-				var effectBloom = new BloomPass( 0.75 );
-				var effectFilm = new FilmPass( 0.5, 0.5, 1448, false );
+				const renderModel = new RenderPass( scene, camera );
+				const effectBloom = new BloomPass( 0.75 );
+				const effectFilm = new FilmPass( 0.5, 0.5, 1448, false );
 
 				effectFocus = new ShaderPass( FocusShader );
 
@@ -145,7 +147,7 @@
 
 					if ( child.isMesh ) {
 
-						var buffer = child.geometry.attributes[ bufferName ];
+						const buffer = child.geometry.attributes[ bufferName ];
 
 						count += buffer.array.length;
 
@@ -153,7 +155,7 @@
 
 				} );
 
-				var combined = new Float32Array( count );
+				const combined = new Float32Array( count );
 
 				let offset = 0;
 
@@ -161,7 +163,7 @@
 
 					if ( child.isMesh ) {
 
-						var buffer = child.geometry.attributes[ bufferName ];
+						const buffer = child.geometry.attributes[ bufferName ];
 
 						combined.set( buffer.array, offset );
 						offset += buffer.array.length;
@@ -176,13 +178,13 @@
 
 			function createMesh( positions, scene, scale, x, y, z, color ) {
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', positions.clone() );
 				geometry.setAttribute( 'initialPosition', positions.clone() );
 
 				geometry.attributes.position.setUsage( THREE.DynamicDrawUsage );
 
-				var clones = [
+				const clones = [
 
 					[ 6000, 0, - 4000 ],
 					[ 5000, 0, 0 ],
@@ -196,9 +198,9 @@
 
 				];
 
-				for ( var i = 0; i < clones.length; i ++ ) {
+				for ( let i = 0; i < clones.length; i ++ ) {
 
-					var c = ( i < clones.length - 1 ) ? 0x252525 : color;
+					const c = ( i < clones.length - 1 ) ? 0x252525 : color;
 
 					mesh = new THREE.Points( geometry, new THREE.PointsMaterial( { size: 30, color: c } ) );
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
@@ -230,26 +232,26 @@
 
 			function render() {
 
-				var delta = 10 * clock.getDelta();
+				let delta = 10 * clock.getDelta();
 
 				delta = delta < 2 ? delta : 2;
 
 				parent.rotation.y += - 0.02 * delta;
 
-				for ( var j = 0; j < clonemeshes.length; j ++ ) {
+				for ( let j = 0; j < clonemeshes.length; j ++ ) {
 
-					var cm = clonemeshes[ j ];
+					const cm = clonemeshes[ j ];
 					cm.mesh.rotation.y += - 0.1 * delta * cm.speed;
 
 				}
 
-				for ( var j = 0; j < meshes.length; j ++ ) {
+				for ( let j = 0; j < meshes.length; j ++ ) {
 
-					var data = meshes[ j ];
-					var positions = data.mesh.geometry.attributes.position;
-					var initialPositions = data.mesh.geometry.attributes.initialPosition;
+					const data = meshes[ j ];
+					const positions = data.mesh.geometry.attributes.position;
+					const initialPositions = data.mesh.geometry.attributes.initialPosition;
 
-					var count = positions.count;
+					const count = positions.count;
 
 					if ( data.start > 0 ) {
 
@@ -265,11 +267,11 @@
 
 					}
 
-					for ( var i = 0; i < count; i ++ ) {
+					for ( let i = 0; i < count; i ++ ) {
 
-						var px = positions.getX( i );
-						var py = positions.getY( i );
-						var pz = positions.getZ( i );
+						const px = positions.getX( i );
+						const py = positions.getY( i );
+						const pz = positions.getZ( i );
 
 						// falling down
 						if ( data.direction < 0 ) {
@@ -294,15 +296,15 @@
 						// rising up
 						if ( data.direction > 0 ) {
 
-							var ix = initialPositions.getX( i );
-							var iy = initialPositions.getY( i );
-							var iz = initialPositions.getZ( i );
+							const ix = initialPositions.getX( i );
+							const iy = initialPositions.getY( i );
+							const iz = initialPositions.getZ( i );
 
-							var dx = Math.abs( px - ix );
-							var dy = Math.abs( py - iy );
-							var dz = Math.abs( pz - iz );
+							const dx = Math.abs( px - ix );
+							const dy = Math.abs( py - iy );
+							const dz = Math.abs( pz - iz );
 
-							var d = dx + dy + dx;
+							const d = dx + dy + dx;
 
 							if ( d > 1 ) {
 

examples/webgl_points_sprites.html

@@ -21,11 +21,13 @@
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var camera, scene, renderer, stats, materials = [], parameters;
-			var mouseX = 0, mouseY = 0;
+			let camera, scene, renderer, stats, parameters;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
+
+			const materials = [];
 
 			init();
 			animate();
@@ -38,22 +40,22 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0008 );
 
-				var geometry = new THREE.BufferGeometry();
-				var vertices = [];
+				const geometry = new THREE.BufferGeometry();
+				const vertices = [];
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
-				var sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png' );
-				var sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png' );
-				var sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png' );
-				var sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png' );
-				var sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png' );
+				const sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png' );
+				const sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png' );
+				const sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png' );
+				const sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png' );
+				const sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png' );
 
-				for ( var i = 0; i < 10000; i ++ ) {
+				for ( let i = 0; i < 10000; i ++ ) {
 
-					var x = Math.random() * 2000 - 1000;
-					var y = Math.random() * 2000 - 1000;
-					var z = Math.random() * 2000 - 1000;
+					const x = Math.random() * 2000 - 1000;
+					const y = Math.random() * 2000 - 1000;
+					const z = Math.random() * 2000 - 1000;
 
 					vertices.push( x, y, z );
 
@@ -69,16 +71,16 @@
 					[[ 0.80, 0, 0.5 ], sprite4, 5 ]
 				];
 
-				for ( var i = 0; i < parameters.length; i ++ ) {
+				for ( let i = 0; i < parameters.length; i ++ ) {
 
-					var color = parameters[ i ][ 0 ];
-					var sprite = parameters[ i ][ 1 ];
-					var size = parameters[ i ][ 2 ];
+					const color = parameters[ i ][ 0 ];
+					const sprite = parameters[ i ][ 1 ];
+					const size = parameters[ i ][ 2 ];
 
 					materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
 					materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] );
 
-					var particles = new THREE.Points( geometry, materials[ i ] );
+					const particles = new THREE.Points( geometry, materials[ i ] );
 
 					particles.rotation.x = Math.random() * 6;
 					particles.rotation.y = Math.random() * 6;
@@ -102,15 +104,15 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 
-				var params = {
+				const params = {
 					texture: true
 				};
 
 				gui.add( params, 'texture' ).onChange( function ( value ) {
 
-					for ( var i = 0; i < materials.length; i ++ ) {
+					for ( let i = 0; i < materials.length; i ++ ) {
 
 						materials[ i ].map = ( value === true ) ? parameters[ i ][ 1 ] : null;
 						materials[ i ].needsUpdate = true;
@@ -164,16 +166,16 @@
 
 			function render() {
 
-				var time = Date.now() * 0.00005;
+				const time = Date.now() * 0.00005;
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
+				for ( let i = 0; i < scene.children.length; i ++ ) {
 
-					var object = scene.children[ i ];
+					const object = scene.children[ i ];
 
 					if ( object instanceof THREE.Points ) {
 
@@ -183,11 +185,11 @@
 
 				}
 
-				for ( var i = 0; i < materials.length; i ++ ) {
+				for ( let i = 0; i < materials.length; i ++ ) {
 
-					var color = parameters[ i ][ 0 ];
+					const color = parameters[ i ][ 0 ];
 
-					var h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
+					const h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
 					materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
 
 				}

examples/webgl_points_waves.html

@@ -48,17 +48,17 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
+			const SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
 
-			var container, stats;
-			var camera, scene, renderer;
+			let container, stats;
+			let camera, scene, renderer;
 
-			var particles, count = 0;
+			let particles, count = 0;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -75,16 +75,16 @@
 
 				//
 
-				var numParticles = AMOUNTX * AMOUNTY;
+				const numParticles = AMOUNTX * AMOUNTY;
 
-				var positions = new Float32Array( numParticles * 3 );
-				var scales = new Float32Array( numParticles );
+				const positions = new Float32Array( numParticles * 3 );
+				const scales = new Float32Array( numParticles );
 
-				var i = 0, j = 0;
+				let i = 0, j = 0;
 
-				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
+				for ( let ix = 0; ix < AMOUNTX; ix ++ ) {
 
-					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
+					for ( let iy = 0; iy < AMOUNTY; iy ++ ) {
 
 						positions[ i ] = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 ); // x
 						positions[ i + 1 ] = 0; // y
@@ -99,11 +99,11 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 				geometry.setAttribute( 'scale', new THREE.BufferAttribute( scales, 1 ) );
 
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 
 					uniforms: {
 						color: { value: new THREE.Color( 0xffffff ) },
@@ -177,14 +177,14 @@
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 				camera.lookAt( scene.position );
 
-				var positions = particles.geometry.attributes.position.array;
-				var scales = particles.geometry.attributes.scale.array;
+				const positions = particles.geometry.attributes.position.array;
+				const scales = particles.geometry.attributes.scale.array;
 
-				var i = 0, j = 0;
+				let i = 0, j = 0;
 
-				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
+				for ( let ix = 0; ix < AMOUNTX; ix ++ ) {
 
-					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
+					for ( let iy = 0; iy < AMOUNTY; iy ++ ) {
 
 						positions[ i + 1 ] = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
 										( Math.sin( ( iy + count ) * 0.5 ) * 50 );

examples/webgl_postprocessing.html

@@ -19,8 +19,8 @@
 			import { RGBShiftShader } from './jsm/shaders/RGBShiftShader.js';
 			import { DotScreenShader } from './jsm/shaders/DotScreenShader.js';
 
-			var camera, scene, renderer, composer;
-			var object, light;
+			let camera, renderer, composer;
+			let object;
 
 			init();
 			animate();
@@ -37,18 +37,18 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 400;
 
-				scene = new THREE.Scene();
+				const scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 1000 );
 
 				object = new THREE.Object3D();
 				scene.add( object );
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				const geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
+				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( let i = 0; i < 100; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
 					mesh.position.multiplyScalar( Math.random() * 400 );
 					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
@@ -59,7 +59,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
@@ -68,13 +68,13 @@
 				composer = new EffectComposer( renderer );
 				composer.addPass( new RenderPass( scene, camera ) );
 
-				var effect = new ShaderPass( DotScreenShader );
-				effect.uniforms[ 'scale' ].value = 4;
-				composer.addPass( effect );
+				const effect1 = new ShaderPass( DotScreenShader );
+				effect1.uniforms[ 'scale' ].value = 4;
+				composer.addPass( effect1 );
 
-				var effect = new ShaderPass( RGBShiftShader );
-				effect.uniforms[ 'amount' ].value = 0.0015;
-				composer.addPass( effect );
+				const effect2 = new ShaderPass( RGBShiftShader );
+				effect2.uniforms[ 'amount' ].value = 0.0015;
+				composer.addPass( effect2 );
 
 				//
 

examples/webgl_postprocessing_advanced.html

@@ -40,21 +40,21 @@
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-			var container, stats;
+			let container, stats;
 
-			var composerScene, composer1, composer2, composer3, composer4;
+			let composerScene, composer1, composer2, composer3, composer4;
 
-			var cameraOrtho, cameraPerspective, sceneModel, sceneBG, renderer, mesh, directionalLight;
+			let cameraOrtho, cameraPerspective, sceneModel, sceneBG, renderer, mesh, directionalLight;
 
-			var width = window.innerWidth || 2;
-			var height = window.innerHeight || 2;
+			const width = window.innerWidth || 2;
+			const height = window.innerHeight || 2;
 
-			var halfWidth = width / 2;
-			var halfHeight = height / 2;
+			let halfWidth = width / 2;
+			let halfHeight = height / 2;
 
-			var quadBG, quadMask, renderScene;
+			let quadBG, quadMask, renderScene;
 
-			var delta = 0.01;
+			const delta = 0.01;
 
 			init();
 			animate();
@@ -82,7 +82,7 @@
 				directionalLight.position.set( 0, - 0.1, 1 ).normalize();
 				sceneModel.add( directionalLight );
 
-				var loader = new GLTFLoader();
+				const loader = new GLTFLoader();
 				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
 					createMesh( gltf.scene.children[ 0 ].geometry, sceneModel, 100 );
@@ -91,10 +91,10 @@
 
 				//
 
-				var diffuseMap = new THREE.TextureLoader().load( "textures/cube/SwedishRoyalCastle/pz.jpg" );
+				const diffuseMap = new THREE.TextureLoader().load( "textures/cube/SwedishRoyalCastle/pz.jpg" );
 				diffuseMap.encoding = THREE.sRGBEncoding;
 
-				var materialColor = new THREE.MeshBasicMaterial( {
+				const materialColor = new THREE.MeshBasicMaterial( {
 					map: diffuseMap,
 					depthTest: false
 				} );
@@ -106,7 +106,7 @@
 
 				//
 
-				var sceneMask = new THREE.Scene();
+				const sceneMask = new THREE.Scene();
 
 				quadMask = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
 				quadMask.position.z = - 300;
@@ -131,16 +131,14 @@
 
 				//
 
-				var shaderBleach = BleachBypassShader;
-				var shaderSepia = SepiaShader;
-				var shaderVignette = VignetteShader;
-				// var shaderCopy = CopyShader;
+				const shaderBleach = BleachBypassShader;
+				const shaderSepia = SepiaShader;
+				const shaderVignette = VignetteShader;
 
-				var effectBleach = new ShaderPass( shaderBleach );
-				var effectSepia = new ShaderPass( shaderSepia );
-				var effectVignette = new ShaderPass( shaderVignette );
-				var gammaCorrection = new ShaderPass( GammaCorrectionShader );
-				// var effectCopy = new ShaderPass( shaderCopy );
+				const effectBleach = new ShaderPass( shaderBleach );
+				const effectSepia = new ShaderPass( shaderSepia );
+				const effectVignette = new ShaderPass( shaderVignette );
+				const gammaCorrection = new ShaderPass( GammaCorrectionShader );
 
 				effectBleach.uniforms[ "opacity" ].value = 0.95;
 
@@ -149,43 +147,43 @@
 				effectVignette.uniforms[ "offset" ].value = 0.95;
 				effectVignette.uniforms[ "darkness" ].value = 1.6;
 
-				var effectBloom = new BloomPass( 0.5 );
-				var effectFilm = new FilmPass( 0.35, 0.025, 648, false );
-				var effectFilmBW = new FilmPass( 0.35, 0.5, 2048, true );
-				var effectDotScreen = new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 );
+				const effectBloom = new BloomPass( 0.5 );
+				const effectFilm = new FilmPass( 0.35, 0.025, 648, false );
+				const effectFilmBW = new FilmPass( 0.35, 0.5, 2048, true );
+				const effectDotScreen = new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 );
 
-				var effectHBlur = new ShaderPass( HorizontalBlurShader );
-				var effectVBlur = new ShaderPass( VerticalBlurShader );
+				const effectHBlur = new ShaderPass( HorizontalBlurShader );
+				const effectVBlur = new ShaderPass( VerticalBlurShader );
 				effectHBlur.uniforms[ 'h' ].value = 2 / ( width / 2 );
 				effectVBlur.uniforms[ 'v' ].value = 2 / ( height / 2 );
 
-				var effectColorify1 = new ShaderPass( ColorifyShader );
-				var effectColorify2 = new ShaderPass( ColorifyShader );
+				const effectColorify1 = new ShaderPass( ColorifyShader );
+				const effectColorify2 = new ShaderPass( ColorifyShader );
 				effectColorify1.uniforms[ 'color' ] = new THREE.Uniform( new THREE.Color( 1, 0.8, 0.8 ) );
 				effectColorify2.uniforms[ 'color' ] = new THREE.Uniform( new THREE.Color( 1, 0.75, 0.5 ) );
 
-				var clearMask = new ClearMaskPass();
-				var renderMask = new MaskPass( sceneModel, cameraPerspective );
-				var renderMaskInverse = new MaskPass( sceneModel, cameraPerspective );
+				const clearMask = new ClearMaskPass();
+				const renderMask = new MaskPass( sceneModel, cameraPerspective );
+				const renderMaskInverse = new MaskPass( sceneModel, cameraPerspective );
 
 				renderMaskInverse.inverse = true;
 
 				//
 
-				var rtParameters = {
+				const rtParameters = {
 					minFilter: THREE.LinearFilter,
 					magFilter: THREE.LinearFilter,
 					format: THREE.RGBFormat,
 					stencilBuffer: true
 				};
 
-				var rtWidth = width / 2;
-				var rtHeight = height / 2;
+				const rtWidth = width / 2;
+				const rtHeight = height / 2;
 
 				//
 
-				var renderBackground = new RenderPass( sceneBG, cameraOrtho );
-				var renderModel = new RenderPass( sceneModel, cameraPerspective );
+				const renderBackground = new RenderPass( sceneBG, cameraOrtho );
+				const renderModel = new RenderPass( sceneModel, cameraPerspective );
 
 				renderModel.clear = false;
 
@@ -208,10 +206,7 @@
 
 				composer1.addPass( renderScene );
 				composer1.addPass( gammaCorrection );
-				//composer1.addPass( renderMask );
 				composer1.addPass( effectFilmBW );
-				//composer1.addPass( clearMask );
-
 				composer1.addPass( effectVignette );
 
 				//
@@ -235,10 +230,8 @@
 
 				composer3.addPass( renderScene );
 				composer3.addPass( gammaCorrection );
-				//composer3.addPass( renderMask );
 				composer3.addPass( effectSepia );
 				composer3.addPass( effectFilm );
-				//composer3.addPass( clearMask );
 				composer3.addPass( effectVignette );
 
 				//
@@ -247,11 +240,9 @@
 
 				composer4.addPass( renderScene );
 				composer4.addPass( gammaCorrection );
-				//composer4.addPass( renderMask );
 				composer4.addPass( effectBloom );
 				composer4.addPass( effectFilm );
 				composer4.addPass( effectBleach );
-				//composer4.addPass( clearMask );
 				composer4.addPass( effectVignette );
 
 				renderScene.uniforms[ "tDiffuse" ].value = composerScene.renderTarget2.texture;
@@ -293,10 +284,10 @@
 
 			function createMesh( geometry, scene, scale ) {
 
-				var diffuseMap = new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
+				const diffuseMap = new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
 				diffuseMap.encoding = THREE.sRGBEncoding;
 
-				var mat2 = new THREE.MeshPhongMaterial( {
+				const mat2 = new THREE.MeshPhongMaterial( {
 
 					color: 0x999999,
 					specular: 0x080808,
@@ -329,7 +320,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.0004;
+				const time = Date.now() * 0.0004;
 
 				if ( mesh ) mesh.rotation.y = - time;
 

examples/webgl_postprocessing_afterimage.html

@@ -18,12 +18,12 @@
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { AfterimagePass } from './jsm/postprocessing/AfterimagePass.js';
 
-			var camera, scene, renderer, composer;
-			var mesh;
+			let camera, scene, renderer, composer;
+			let mesh;
 
-			var afterimagePass;
+			let afterimagePass;
 
-			var params = {
+			const params = {
 
 				enable: true
 
@@ -46,8 +46,8 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 1000 );
 
-				var geometry = new THREE.BoxBufferGeometry( 150, 150, 150, 2, 2, 2 );
-				var material = new THREE.MeshNormalMaterial();
+				const geometry = new THREE.BoxBufferGeometry( 150, 150, 150, 2, 2, 2 );
+				const material = new THREE.MeshNormalMaterial();
 				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
@@ -61,13 +61,13 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				if ( typeof TESTING !== 'undefined' ) { for ( var i = 0; i < 45; i ++ ) { render(); }; };
+				if ( typeof TESTING !== 'undefined' ) { for ( let i = 0; i < 45; i ++ ) { render(); }; };
 
 			}
 
 			function createGUI() {
 
-				var gui = new GUI( { name: 'Damp setting' } );
+				const gui = new GUI( { name: 'Damp setting' } );
 				gui.add( afterimagePass.uniforms[ "damp" ], 'value', 0, 1 ).step( 0.001 );
 				gui.add( params, 'enable' );
 

examples/webgl_postprocessing_backgrounds.html

@@ -30,12 +30,12 @@
 			import { CopyShader } from './jsm/shaders/CopyShader.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var scene, renderer, composer;
-			var clearPass, texturePass, renderPass;
-			var cameraP, cubeTexturePassP;
-			var gui, stats;
+			let scene, renderer, composer;
+			let clearPass, texturePass, renderPass;
+			let cameraP, cubeTexturePassP;
+			let gui, stats;
 
-			var params = {
+			const params = {
 
 				clearPass: true,
 				clearColor: 'white',
@@ -79,12 +79,12 @@
 
 			function init() {
 
-				var container = document.getElementById( "container" );
+				const container = document.getElementById( "container" );
 
-				var width = window.innerWidth || 1;
-				var height = window.innerHeight || 1;
-				var aspect = width / height;
-				var devicePixelRatio = window.devicePixelRatio || 1;
+				const width = window.innerWidth || 1;
+				const height = window.innerHeight || 1;
+				const aspect = width / height;
+				const devicePixelRatio = window.devicePixelRatio || 1;
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( devicePixelRatio );
@@ -101,40 +101,40 @@
 
 				scene = new THREE.Scene();
 
-				var group = new THREE.Group();
+				const group = new THREE.Group();
 				scene.add( group );
 
-				var light = new THREE.PointLight( 0xddffdd, 1.0 );
+				const light = new THREE.PointLight( 0xddffdd, 1.0 );
 				light.position.z = 70;
 				light.position.y = - 70;
 				light.position.x = - 70;
 				scene.add( light );
 
-				var light2 = new THREE.PointLight( 0xffdddd, 1.0 );
+				const light2 = new THREE.PointLight( 0xffdddd, 1.0 );
 				light2.position.z = 70;
 				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
-				var light3 = new THREE.PointLight( 0xddddff, 1.0 );
+				const light3 = new THREE.PointLight( 0xddddff, 1.0 );
 				light3.position.z = 70;
 				light3.position.x = 70;
 				light3.position.y = - 70;
 				scene.add( light3 );
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 48, 24 );
+				const geometry = new THREE.SphereBufferGeometry( 1, 48, 24 );
 
-				var material = new THREE.MeshStandardMaterial();
+				const material = new THREE.MeshStandardMaterial();
 				material.roughness = 0.5 * Math.random() + 0.25;
 				material.metalness = 0;
 				material.color.setHSL( Math.random(), 1.0, 0.3 );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				group.add( mesh );
 
 				// postprocessing
 
-				var genCubeUrls = function ( prefix, postfix ) {
+				const genCubeUrls = function ( prefix, postfix ) {
 
 					return [
 						prefix + 'px' + postfix, prefix + 'nx' + postfix,
@@ -152,7 +152,7 @@
 				texturePass = new TexturePass();
 				composer.addPass( texturePass );
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 				textureLoader.load( "textures/hardwood2_diffuse.jpg", function ( map ) {
 
 					texturePass.map = map;
@@ -161,7 +161,7 @@
 
 				cubeTexturePassP = null;
 
-				var ldrUrls = genCubeUrls( "textures/cube/pisa/", ".png" );
+				const ldrUrls = genCubeUrls( "textures/cube/pisa/", ".png" );
 				new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
 
 					cubeTexturePassP = new CubeTexturePass( cameraP, ldrCubeMap );
@@ -173,10 +173,10 @@
 				renderPass.clear = false;
 				composer.addPass( renderPass );
 
-				var copyPass = new ShaderPass( CopyShader );
+				const copyPass = new ShaderPass( CopyShader );
 				composer.addPass( copyPass );
 
-				var controls = new OrbitControls( cameraP, renderer.domElement );
+				const controls = new OrbitControls( cameraP, renderer.domElement );
 				controls.enableZoom = false;
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -185,9 +185,9 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
-				var aspect = width / height;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+				const aspect = width / height;
 
 				cameraP.aspect = aspect;
 				cameraP.updateProjectionMatrix();
@@ -205,7 +205,8 @@
 
 				cameraP.updateMatrixWorld( true );
 
-				var newColor = clearPass.clearColor;
+				let newColor = clearPass.clearColor;
+
 				switch ( params.clearColor ) {
 
 					case 'blue': newColor = 0x0000ff; break;
@@ -223,9 +224,11 @@
 				texturePass.enabled = params.texturePass;
 				texturePass.opacity = params.texturePassOpacity;
 
-				if ( cubeTexturePassP != null ) {
+				if ( cubeTexturePassP !== null ) {
+
 					cubeTexturePassP.enabled = params.cubeTexturePass;
 					cubeTexturePassP.opacity = params.cubeTexturePassOpacity;
+
 				}
 
 				renderPass.enabled = params.renderPass;

examples/webgl_postprocessing_crossfade.html

@@ -24,11 +24,11 @@
 
 			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
-			var container, stats;
-			var renderer;
-			var transition;
+			let container, stats;
+			let renderer;
+			let transition;
 
-			var transitionParams = {
+			const transitionParams = {
 				"useTexture": true,
 				"transition": 0.5,
 				"transitionSpeed": 2.0,
@@ -38,7 +38,7 @@
 				"textureThreshold": 0.3
 			};
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -57,8 +57,8 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var sceneA = new FXScene( "cube", 5000, 1200, 120, new THREE.Vector3( 0, - 0.4, 0 ), 0xffffff );
-				var sceneB = new FXScene( "sphere", 500, 2000, 50, new THREE.Vector3( 0, 0.2, 0.1 ), 0x000000 );
+				const sceneA = new FXScene( "cube", 5000, 1200, 120, new THREE.Vector3( 0, - 0.4, 0 ), 0xffffff );
+				const sceneB = new FXScene( "sphere", 500, 2000, 50, new THREE.Vector3( 0, 0.2, 0.1 ), 0x000000 );
 
 				transition = new Transition( sceneA, sceneB );
 
@@ -75,7 +75,7 @@
 
 			function initGUI() {
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( transitionParams, "useTexture" ).onChange( function ( value ) {
 
@@ -114,10 +114,10 @@
 
 				function applyVertexColors( geometry, color ) {
 
-					var position = geometry.attributes.position;
-					var colors = [];
+					const position = geometry.attributes.position;
+					const colors = [];
 
-					for ( var i = 0; i < position.count; i ++ ) {
+					for ( let i = 0; i < position.count; i ++ ) {
 
 						colors.push( color.r, color.g, color.b );
 
@@ -127,16 +127,16 @@
 
 				}
 
-				var geometries = [];
+				const geometries = [];
 
-				var matrix = new THREE.Matrix4();
-				var position = new THREE.Vector3();
-				var rotation = new THREE.Euler();
-				var quaternion = new THREE.Quaternion();
-				var scale = new THREE.Vector3();
-				var color = new THREE.Color();
+				const matrix = new THREE.Matrix4();
+				const position = new THREE.Vector3();
+				const rotation = new THREE.Euler();
+				const quaternion = new THREE.Quaternion();
+				const scale = new THREE.Vector3();
+				const color = new THREE.Color();
 
-				for ( var i = 0; i < numObjects; i ++ ) {
+				for ( let i = 0; i < numObjects; i ++ ) {
 
 					position.x = Math.random() * 10000 - 5000;
 					position.y = Math.random() * 6000 - 3000;
@@ -149,7 +149,7 @@
 
 					scale.x = Math.random() * 200 + 100;
 
-					var geometry;
+					let geometry;
 
 					if ( objectType === 'cube' ) {
 
@@ -192,17 +192,17 @@
 				this.scene = new THREE.Scene();
 				this.scene.add( new THREE.AmbientLight( 0x555555 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				const light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				this.scene.add( light );
 
 				this.rotationSpeed = rotationSpeed;
 
-				var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true } );
+				const defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true } );
 				this.mesh = new THREE.Mesh( generateGeometry( type, numObjects ), defaultMaterial );
 				this.scene.add( this.mesh );
 
-				var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
+				const renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
 				this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
 
 				this.render = function ( delta, rtt ) {
@@ -238,9 +238,9 @@
 
 				this.textures = [];
 
-				var loader = new THREE.TextureLoader();
+				const loader = new THREE.TextureLoader();
 
-				for ( var i = 0; i < 6; i ++ )
+				for ( let i = 0; i < 6; i ++ )
 					this.textures[ i ] = loader.load( 'textures/transition/transition' + ( i + 1 ) + '.png' );
 
 				this.quadmaterial = new THREE.ShaderMaterial( {
@@ -316,7 +316,7 @@
 
 				} );
 
-				var quadgeometry = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+				const quadgeometry = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
 
 				this.quad = new THREE.Mesh( quadgeometry, this.quadmaterial );
 				this.scene.add( this.quad );
@@ -353,7 +353,7 @@
 					// Transition animation
 					if ( transitionParams.animateTransition ) {
 
-						var t = ( 1 + Math.sin( transitionParams.transitionSpeed * clock.getElapsedTime() / Math.PI ) ) / 2;
+						const t = ( 1 + Math.sin( transitionParams.transitionSpeed * clock.getElapsedTime() / Math.PI ) ) / 2;
 						transitionParams.transition = THREE.MathUtils.smoothstep( t, 0.3, 0.7 );
 
 						// Change the current alpha texture after each transition

examples/webgl_postprocessing_dof.html

@@ -24,28 +24,28 @@
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { BokehPass } from './jsm/postprocessing/BokehPass.js';
 
-			var container, stats;
-			var camera, scene, renderer,
-				materials = [], objects = [],
-				singleMaterial, zmaterial = [],
-				parameters, i, j, k, h, x, y, z, nobjects, cubeMaterial;
+			let camera, scene, renderer, stats,
+				singleMaterial, zmaterial,
+				parameters, nobjects, cubeMaterial;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
-			var width = window.innerWidth;
-			var height = window.innerHeight;
+			let width = window.innerWidth;
+			let height = window.innerHeight;
 
-			var postprocessing = {};
+			const materials = [], objects = [];
+
+			const postprocessing = {};
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 3000 );
@@ -58,15 +58,15 @@
 				renderer.setSize( width, height );
 				container.appendChild( renderer.domElement );
 
-				var path = "textures/cube/SwedishRoyalCastle/";
-				var format = '.jpg';
-				var urls = [
+				const path = 'textures/cube/SwedishRoyalCastle/';
+				const format = '.jpg';
+				const urls = [
 					path + 'px' + format, path + 'nx' + format,
 					path + 'py' + format, path + 'ny' + format,
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				const textureCube = new THREE.CubeTextureLoader().load( urls );
 
 				parameters = { color: 0xff1100, envMap: textureCube };
 				cubeMaterial = new THREE.MeshBasicMaterial( parameters );
@@ -75,22 +75,22 @@
 
 				if ( singleMaterial ) zmaterial = [ cubeMaterial ];
 
-				var geo = new THREE.SphereBufferGeometry( 1, 20, 10 );
+				const geo = new THREE.SphereBufferGeometry( 1, 20, 10 );
 
-				var xgrid = 14,
-					ygrid = 9,
-					zgrid = 14;
+				const xgrid = 14, ygrid = 9, zgrid = 14;
 
 				nobjects = xgrid * ygrid * zgrid;
 
-				var s = 60;
-				var count = 0;
+				const s = 60;
+				let count = 0;
+
+				for ( let i = 0; i < xgrid; i ++ ) {
 
-				for ( i = 0; i < xgrid; i ++ )
-					for ( j = 0; j < ygrid; j ++ )
-						for ( k = 0; k < zgrid; k ++ ) {
+					for ( let j = 0; j < ygrid; j ++ ) {
 
-							var mesh;
+						for ( let k = 0; k < zgrid; k ++ ) {
+
+							let mesh;
 
 							if ( singleMaterial ) {
 
@@ -103,9 +103,9 @@
 
 							}
 
-							x = 200 * ( i - xgrid / 2 );
-							y = 200 * ( j - ygrid / 2 );
-							z = 200 * ( k - zgrid / 2 );
+							const x = 200 * ( i - xgrid / 2 );
+							const y = 200 * ( j - ygrid / 2 );
+							const z = 200 * ( k - zgrid / 2 );
 
 							mesh.position.set( x, y, z );
 							mesh.scale.set( s, s, s );
@@ -120,6 +120,10 @@
 
 						}
 
+					}
+
+				}
+
 				initPostprocessing();
 
 				renderer.autoClear = false;
@@ -132,7 +136,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var effectController = {
+				const effectController = {
 
 					focus: 500.0,
 					aperture: 5,
@@ -140,7 +144,7 @@
 
 				};
 
-				var matChanger = function ( ) {
+				const matChanger = function ( ) {
 
 					postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
 					postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture * 0.00001;
@@ -148,7 +152,7 @@
 
 				};
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( effectController, "focus", 10.0, 3000.0, 10 ).onChange( matChanger );
 				gui.add( effectController, "aperture", 0, 10, 0.1 ).onChange( matChanger );
 				gui.add( effectController, "maxblur", 0.0, 0.01, 0.001 ).onChange( matChanger );
@@ -185,9 +189,9 @@
 
 			function initPostprocessing() {
 
-				var renderPass = new RenderPass( scene, camera );
+				const renderPass = new RenderPass( scene, camera );
 
-				var bokehPass = new BokehPass( scene, camera, {
+				const bokehPass = new BokehPass( scene, camera, {
 					focus: 1.0,
 					aperture: 0.025,
 					maxblur: 0.01,
@@ -196,7 +200,7 @@
 					height: height
 				} );
 
-				var composer = new EffectComposer( renderer );
+				const composer = new EffectComposer( renderer );
 
 				composer.addPass( renderPass );
 				composer.addPass( bokehPass );
@@ -218,7 +222,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.00005;
+				const time = Date.now() * 0.00005;
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.036;
 				camera.position.y += ( - ( mouseY ) - camera.position.y ) * 0.036;
@@ -227,9 +231,9 @@
 
 				if ( ! singleMaterial ) {
 
-					for ( i = 0; i < nobjects; i ++ ) {
+					for ( let i = 0; i < nobjects; i ++ ) {
 
-						h = ( 360 * ( i / nobjects + time ) % 360 ) / 360;
+						const h = ( 360 * ( i / nobjects + time ) % 360 ) / 360;
 						materials[ i ].color.setHSL( h, 1, 0.5 );
 
 					}

examples/webgl_postprocessing_dof2.html

@@ -21,26 +21,27 @@
 
 			import { BokehShader, BokehDepthShader } from './jsm/shaders/BokehShader2.js';
 
-			var container, stats;
-			var camera, scene, renderer, materialDepth;
+			let container, stats;
+			let camera, scene, renderer, materialDepth;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = { enabled: true };
+			let distance = 100;
+			let effectController;
 
-			var shaderSettings = {
+			const postprocessing = { enabled: true };
+
+			const shaderSettings = {
 				rings: 3,
 				samples: 4
 			};
 
-			var mouse = new THREE.Vector2();
-			var raycaster = new THREE.Raycaster();
-			var distance = 100;
-			var target = new THREE.Vector3( 0, 20, - 50 );
-			var effectController;
-			var planes = [];
-			var leaves = 100;
+			const mouse = new THREE.Vector2();
+			const raycaster = new THREE.Raycaster();
+			const target = new THREE.Vector3( 0, 20, - 50 );
+			const planes = [];
+			const leaves = 100;
 
 			init();
 			animate();
@@ -64,7 +65,7 @@
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
-				var depthShader = BokehDepthShader;
+				const depthShader = BokehDepthShader;
 
 				materialDepth = new THREE.ShaderMaterial( {
 					uniforms: depthShader.uniforms,
@@ -77,20 +78,20 @@
 
 				// skybox
 
-				var r = 'textures/cube/Bridge2/';
-				var urls = [ r + 'posx.jpg', r + 'negx.jpg',
+				const r = 'textures/cube/Bridge2/';
+				const urls = [ r + 'posx.jpg', r + 'negx.jpg',
 							 r + 'posy.jpg', r + 'negy.jpg',
 							 r + 'posz.jpg', r + 'negz.jpg' ];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				const textureCube = new THREE.CubeTextureLoader().load( urls );
 
 				scene.background = textureCube;
 
 				// plane particles
 
-				var planePiece = new THREE.PlaneBufferGeometry( 10, 10, 1, 1 );
+				const planePiece = new THREE.PlaneBufferGeometry( 10, 10, 1, 1 );
 
-				var planeMat = new THREE.MeshPhongMaterial( {
+				const planeMat = new THREE.MeshPhongMaterial( {
 					color: 0xffffff * 0.4,
 					shininess: 0.5,
 					specular: 0xffffff,
@@ -98,11 +99,11 @@
 					side: THREE.DoubleSide
 				} );
 
-				var rand = Math.random;
+				const rand = Math.random;
 
-				for ( var i = 0; i < leaves; i ++ ) {
+				for ( let i = 0; i < leaves; i ++ ) {
 
-					var plane = new THREE.Mesh( planePiece, planeMat );
+					const plane = new THREE.Mesh( planePiece, planeMat );
 					plane.rotation.set( rand(), rand(), rand() );
 					plane.rotation.dx = rand() * 0.1;
 					plane.rotation.dy = rand() * 0.1;
@@ -118,12 +119,12 @@
 
 				// adding Monkeys
 
-				var loader2 = new THREE.BufferGeometryLoader();
+				const loader2 = new THREE.BufferGeometryLoader();
 				loader2.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 
-					var material = new THREE.MeshPhongMaterial( {
+					const material = new THREE.MeshPhongMaterial( {
 						specular: 0xffffff,
 						envMap: textureCube,
 						shininess: 50,
@@ -131,11 +132,11 @@
 						flatShading: true
 					} );
 
-					var monkeys = 20;
+					const monkeys = 20;
 
-					for ( var i = 0; i < monkeys; i ++ ) {
+					for ( let i = 0; i < monkeys; i ++ ) {
 
-						var mesh = new THREE.Mesh( geometry, material );
+						const mesh = new THREE.Mesh( geometry, material );
 
 						mesh.position.z = Math.cos( i / monkeys * Math.PI * 2 ) * 200;
 						mesh.position.y = Math.sin( i / monkeys * Math.PI * 3 ) * 20;
@@ -153,17 +154,17 @@
 
 				// add balls
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 20, 20 );
+				const geometry = new THREE.SphereBufferGeometry( 1, 20, 20 );
 
-				for ( var i = 0; i < 20; i ++ ) {
+				for ( let i = 0; i < 20; i ++ ) {
 
-					var ballmaterial = new THREE.MeshPhongMaterial( {
+					const ballmaterial = new THREE.MeshPhongMaterial( {
 						color: 0xffffff * Math.random(),
 						shininess: 0.5,
 						specular: 0xffffff,
 						envMap: textureCube } );
 
-					var mesh = new THREE.Mesh( geometry, ballmaterial );
+					const mesh = new THREE.Mesh( geometry, ballmaterial );
 
 					mesh.position.x = ( Math.random() - 0.5 ) * 200;
 					mesh.position.y = Math.random() * 50;
@@ -177,13 +178,13 @@
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
-				directionalLight.position.set( 2, 1.2, 10 ).normalize();
-				scene.add( directionalLight );
+				const directionalLight1 = new THREE.DirectionalLight( 0xffffff, 2 );
+				directionalLight1.position.set( 2, 1.2, 10 ).normalize();
+				scene.add( directionalLight1 );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
-				directionalLight.position.set( - 2, 1.2, - 10 ).normalize();
-				scene.add( directionalLight );
+				const directionalLight2 = new THREE.DirectionalLight( 0xffffff, 1 );
+				directionalLight2.position.set( - 2, 1.2, - 10 ).normalize();
+				scene.add( directionalLight2 );
 
 				initPostprocessing();
 
@@ -221,9 +222,9 @@
 
 				};
 
-				var matChanger = function () {
+				const matChanger = function () {
 
-					for ( var e in effectController ) {
+					for ( const e in effectController ) {
 
 						if ( e in postprocessing.bokeh_uniforms ) {
 
@@ -240,7 +241,7 @@
 
 				};
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( effectController, 'enabled' ).onChange( matChanger );
 				gui.add( effectController, 'jsDepthCalculation' ).onChange( matChanger );
@@ -316,11 +317,11 @@
 
 				postprocessing.scene.add( postprocessing.camera );
 
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
+				const pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
 				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
 				postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
 
-				var bokeh_shader = BokehShader;
+				const bokeh_shader = BokehShader;
 
 				postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
 
@@ -366,15 +367,15 @@
 
 			function linearize( depth ) {
 
-				var zfar = camera.far;
-				var znear = camera.near;
+				const zfar = camera.far;
+				const znear = camera.near;
 				return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
 
 			}
 
 			function smoothstep( near, far, depth ) {
 
-				var x = saturate( ( depth - near ) / ( far - near ) );
+				const x = saturate( ( depth - near ) / ( far - near ) );
 				return x * x * ( 3 - 2 * x );
 
 			}
@@ -387,7 +388,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.00015;
+				const time = Date.now() * 0.00015;
 
 				camera.position.x = Math.cos( time ) * 400;
 				camera.position.z = Math.sin( time ) * 500;
@@ -401,15 +402,15 @@
 
 					raycaster.setFromCamera( mouse, camera );
 
-					var intersects = raycaster.intersectObjects( scene.children, true );
+					const intersects = raycaster.intersectObjects( scene.children, true );
 
-					var targetDistance = ( intersects.length > 0 ) ? intersects[ 0 ].distance : 1000;
+					const targetDistance = ( intersects.length > 0 ) ? intersects[ 0 ].distance : 1000;
 
 					distance += ( targetDistance - distance ) * 0.03;
 
-					var sdistance = smoothstep( camera.near, camera.far, distance );
+					const sdistance = smoothstep( camera.near, camera.far, distance );
 
-					var ldistance = linearize( 1 - sdistance );
+					const ldistance = linearize( 1 - sdistance );
 
 					postprocessing.bokeh_uniforms[ 'focalDepth' ].value = ldistance;
 
@@ -417,9 +418,9 @@
 
 				}
 
-				for ( var i = 0; i < leaves; i ++ ) {
+				for ( let i = 0; i < leaves; i ++ ) {
 
-					var plane = planes[ i ];
+					const plane = planes[ i ];
 					plane.rotation.x += plane.rotation.dx;
 					plane.rotation.y += plane.rotation.dy;
 					plane.rotation.z += plane.rotation.dz;

examples/webgl_postprocessing_fxaa.html

@@ -43,9 +43,9 @@
 			import { CopyShader } from './jsm/shaders/CopyShader.js';
 			import { FXAAShader } from './jsm/shaders/FXAAShader.js';
 
-			var camera, scene, renderer, clock, group, container;
+			let camera, scene, renderer, clock, group, container;
 
-			var composer1, composer2, fxaaPass;
+			let composer1, composer2, fxaaPass;
 
 			init();
 			animate();
@@ -65,11 +65,11 @@
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 1000, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
 				dirLight.position.set( - 3000, 1000, - 1000 );
 				scene.add( dirLight );
 
@@ -77,12 +77,12 @@
 
 				group = new THREE.Group();
 
-				var geometry = new THREE.TetrahedronBufferGeometry( 10 );
-				var material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
+				const geometry = new THREE.TetrahedronBufferGeometry( 10 );
+				const material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( let i = 0; i < 100; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 500 - 250;
 					mesh.position.y = Math.random() * 500 - 250;
@@ -110,13 +110,13 @@
 
 				//
 
-				var renderPass = new RenderPass( scene, camera );
+				const renderPass = new RenderPass( scene, camera );
 
 				//
 
 				fxaaPass = new ShaderPass( FXAAShader );
 
-				var pixelRatio = renderer.getPixelRatio();
+				const pixelRatio = renderer.getPixelRatio();
 
 				fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( container.offsetWidth * pixelRatio );
 				fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( container.offsetHeight * pixelRatio );
@@ -127,7 +127,7 @@
 
 				//
 
-				var copyPass = new ShaderPass( CopyShader );
+				const copyPass = new ShaderPass( CopyShader );
 
 				composer2 = new EffectComposer( renderer );
 				composer2.addPass( renderPass );
@@ -148,7 +148,7 @@
 				composer1.setSize( container.offsetWidth, container.offsetHeight );
 				composer2.setSize( container.offsetWidth, container.offsetHeight );
 
-				var pixelRatio = renderer.getPixelRatio();
+				const pixelRatio = renderer.getPixelRatio();
 
 				fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( container.offsetWidth * pixelRatio );
 				fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( container.offsetHeight * pixelRatio );
@@ -159,7 +159,7 @@
 
 				requestAnimationFrame( animate );
 
-				var halfWidth = container.offsetWidth / 2;
+				const halfWidth = container.offsetWidth / 2;
 
 				group.rotation.y += clock.getDelta() * 0.1;
 

examples/webgl_postprocessing_glitch.html

@@ -20,17 +20,17 @@
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { GlitchPass } from './jsm/postprocessing/GlitchPass.js';
 
-			var camera, scene, renderer, composer;
-			var object, light;
+			let camera, scene, renderer, composer;
+			let object, light;
 
-			var glitchPass;
+			let glitchPass;
 
 			init();
 			animate();
 
 			function updateOptions() {
 
-				var wildGlitch = document.getElementById( 'wildGlitch' );
+				const wildGlitch = document.getElementById( 'wildGlitch' );
 				glitchPass.goWild = wildGlitch.checked;
 
 			}
@@ -53,13 +53,13 @@
 				object = new THREE.Object3D();
 				scene.add( object );
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
+				const geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( let i = 0; i < 100; i ++ ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random(), flatShading: true } );
+					const material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random(), flatShading: true } );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
 					mesh.position.multiplyScalar( Math.random() * 400 );
 					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
@@ -87,7 +87,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var wildGlitchOption = document.getElementById( 'wildGlitch' );
+				const wildGlitchOption = document.getElementById( 'wildGlitch' );
 				wildGlitchOption.addEventListener( 'change', updateOptions );
 
 				updateOptions();

examples/webgl_postprocessing_godrays.html

@@ -22,24 +22,24 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GodRaysFakeSunShader, GodRaysDepthMaskShader, GodRaysCombineShader, GodRaysGenerateShader } from './jsm/shaders/GodRaysShader.js';
 
-			var container, stats;
-			var camera, scene, renderer, materialDepth;
+			let container, stats;
+			let camera, scene, renderer, materialDepth;
 
-			var sphereMesh;
+			let sphereMesh;
 
-			var sunPosition = new THREE.Vector3( 0, 1000, - 1000 );
-			var clipPosition = new THREE.Vector4();
-			var screenSpacePosition = new THREE.Vector3();
+			const sunPosition = new THREE.Vector3( 0, 1000, - 1000 );
+			const clipPosition = new THREE.Vector4();
+			const screenSpacePosition = new THREE.Vector3();
 
-			var postprocessing = { enabled: true };
+			const postprocessing = { enabled: true };
 
-			var orbitRadius = 200;
+			const orbitRadius = 200;
 
-			var bgColor = 0x000511;
-			var sunColor = 0xffee00;
+			const bgColor = 0x000511;
+			const sunColor = 0xffee00;
 
 			// Use a smaller size for some of the god-ray render targets for better performance.
-			var godrayRenderTargetResolutionMultiplier = 1.0 / 4.0;
+			const godrayRenderTargetResolutionMultiplier = 1.0 / 4.0;
 
 			init();
 			animate();
@@ -60,11 +60,11 @@
 
 				materialDepth = new THREE.MeshDepthMaterial();
 
-				var materialScene = new THREE.MeshBasicMaterial( { color: 0x000000 } );
+				const materialScene = new THREE.MeshBasicMaterial( { color: 0x000000 } );
 
 				// tree
 
-				var loader = new OBJLoader();
+				const loader = new OBJLoader();
 				loader.load( 'models/obj/tree.obj', function ( object ) {
 
 					object.material = materialScene;
@@ -76,7 +76,7 @@
 
 				// sphere
 
-				var geo = new THREE.SphereBufferGeometry( 1, 20, 10 );
+				const geo = new THREE.SphereBufferGeometry( 1, 20, 10 );
 				sphereMesh = new THREE.Mesh( geo, materialScene );
 				sphereMesh.scale.multiplyScalar( 20 );
 				scene.add( sphereMesh );
@@ -91,7 +91,7 @@
 
 				renderer.autoClear = false;
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 50;
 				controls.maxDistance = 500;
 
@@ -114,8 +114,8 @@
 
 			function onWindowResize() {
 
-				var renderTargetWidth = window.innerWidth;
-				var renderTargetHeight = window.innerHeight;
+				const renderTargetWidth = window.innerWidth;
+				const renderTargetHeight = window.innerHeight;
 
 				camera.aspect = renderTargetWidth / renderTargetHeight;
 				camera.updateProjectionMatrix();
@@ -125,8 +125,8 @@
 				postprocessing.rtTextureDepth.setSize( renderTargetWidth, renderTargetHeight );
 				postprocessing.rtTextureDepthMask.setSize( renderTargetWidth, renderTargetHeight );
 
-				var adjustedWidth = renderTargetWidth * godrayRenderTargetResolutionMultiplier;
-				var adjustedHeight = renderTargetHeight * godrayRenderTargetResolutionMultiplier;
+				const adjustedWidth = renderTargetWidth * godrayRenderTargetResolutionMultiplier;
+				const adjustedHeight = renderTargetHeight * godrayRenderTargetResolutionMultiplier;
 				postprocessing.rtTextureGodRays1.setSize( adjustedWidth, adjustedHeight );
 				postprocessing.rtTextureGodRays2.setSize( adjustedWidth, adjustedHeight );
 
@@ -141,7 +141,7 @@
 
 				postprocessing.scene.add( postprocessing.camera );
 
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
+				const pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
 				postprocessing.rtTextureColors = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight, pars );
 
 				// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
@@ -156,14 +156,14 @@
 
 				// The ping-pong render targets can use an adjusted resolution to minimize cost
 
-				var adjustedWidth = renderTargetWidth * godrayRenderTargetResolutionMultiplier;
-				var adjustedHeight = renderTargetHeight * godrayRenderTargetResolutionMultiplier;
+				const adjustedWidth = renderTargetWidth * godrayRenderTargetResolutionMultiplier;
+				const adjustedHeight = renderTargetHeight * godrayRenderTargetResolutionMultiplier;
 				postprocessing.rtTextureGodRays1 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight, pars );
 				postprocessing.rtTextureGodRays2 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight, pars );
 
 				// god-ray shaders
 
-				var godraysMaskShader = GodRaysDepthMaskShader;
+				const godraysMaskShader = GodRaysDepthMaskShader;
 				postprocessing.godrayMaskUniforms = THREE.UniformsUtils.clone( godraysMaskShader.uniforms );
 				postprocessing.materialGodraysDepthMask = new THREE.ShaderMaterial( {
 
@@ -173,7 +173,7 @@
 
 				} );
 
-				var godraysGenShader = GodRaysGenerateShader;
+				const godraysGenShader = GodRaysGenerateShader;
 				postprocessing.godrayGenUniforms = THREE.UniformsUtils.clone( godraysGenShader.uniforms );
 				postprocessing.materialGodraysGenerate = new THREE.ShaderMaterial( {
 
@@ -183,7 +183,7 @@
 
 				} );
 
-				var godraysCombineShader = GodRaysCombineShader;
+				const godraysCombineShader = GodRaysCombineShader;
 				postprocessing.godrayCombineUniforms = THREE.UniformsUtils.clone( godraysCombineShader.uniforms );
 				postprocessing.materialGodraysCombine = new THREE.ShaderMaterial( {
 
@@ -193,7 +193,7 @@
 
 				} );
 
-				var godraysFakeSunShader = GodRaysFakeSunShader;
+				const godraysFakeSunShader = GodRaysFakeSunShader;
 				postprocessing.godraysFakeSunUniforms = THREE.UniformsUtils.clone( godraysFakeSunShader.uniforms );
 				postprocessing.materialGodraysFakeSun = new THREE.ShaderMaterial( {
 
@@ -248,7 +248,7 @@
 
 			function render() {
 
-				var time = Date.now() / 4000;
+				const time = Date.now() / 4000;
 
 				sphereMesh.position.x = orbitRadius * Math.cos( time );
 				sphereMesh.position.z = orbitRadius * Math.sin( time ) - 100;
@@ -287,8 +287,8 @@
 					// space distance to the sun. Not very efficient, so i make a scissor
 					// rectangle around the suns position to avoid rendering surrounding pixels.
 
-					var sunsqH = 0.74 * window.innerHeight; // 0.74 depends on extent of sun from shader
-					var sunsqW = 0.74 * window.innerHeight; // both depend on height because sun is aspect-corrected
+					const sunsqH = 0.74 * window.innerHeight; // 0.74 depends on extent of sun from shader
+					const sunsqW = 0.74 * window.innerHeight; // both depend on height because sun is aspect-corrected
 
 					screenSpacePosition.x *= window.innerWidth;
 					screenSpacePosition.y *= window.innerHeight;
@@ -331,11 +331,11 @@
 
 					// Maximum length of god-rays (in texture space [0,1]X[0,1])
 
-					var filterLen = 1.0;
+					const filterLen = 1.0;
 
 					// Samples taken by filter
 
-					var TAPS_PER_PASS = 6.0;
+					const TAPS_PER_PASS = 6.0;
 
 					// Pass order could equivalently be 3,2,1 (instead of 1,2,3), which
 					// would start with a small filter support and grow to large. however

examples/webgl_postprocessing_masking.html

@@ -21,8 +21,8 @@
 			import { MaskPass, ClearMaskPass } from './jsm/postprocessing/MaskPass.js';
 			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
-			var camera, composer, renderer;
-			var box, torus;
+			let camera, composer, renderer;
+			let box, torus;
 
 			init();
 			animate();
@@ -32,8 +32,8 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 10;
 
-				var scene1 = new THREE.Scene();
-				var scene2 = new THREE.Scene();
+				const scene1 = new THREE.Scene();
+				const scene2 = new THREE.Scene();
 
 				box = new THREE.Mesh( new THREE.BoxBufferGeometry( 4, 4, 4 ) );
 				scene1.add( box );
@@ -50,30 +50,30 @@
 
 				//
 
-				var clearPass = new ClearPass();
+				const clearPass = new ClearPass();
 
-				var clearMaskPass = new ClearMaskPass();
+				const clearMaskPass = new ClearMaskPass();
 
-				var maskPass1 = new MaskPass( scene1, camera );
-				var maskPass2 = new MaskPass( scene2, camera );
+				const maskPass1 = new MaskPass( scene1, camera );
+				const maskPass2 = new MaskPass( scene2, camera );
 
-				var texture1 = new THREE.TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg' );
+				const texture1 = new THREE.TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg' );
 				texture1.minFilter = THREE.LinearFilter;
-				var texture2 = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
+				const texture2 = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
 
-				var texturePass1 = new TexturePass( texture1 );
-				var texturePass2 = new TexturePass( texture2 );
+				const texturePass1 = new TexturePass( texture1 );
+				const texturePass2 = new TexturePass( texture2 );
 
-				var outputPass = new ShaderPass( CopyShader );
+				const outputPass = new ShaderPass( CopyShader );
 
-				var parameters = {
+				const parameters = {
 					minFilter: THREE.LinearFilter,
 					magFilter: THREE.LinearFilter,
 					format: THREE.RGBFormat,
 					stencilBuffer: true
 				};
 
-				var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );
+				const renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );
 
 				composer = new EffectComposer( renderer, renderTarget );
 				composer.addPass( clearPass );
@@ -91,8 +91,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();
@@ -106,7 +106,7 @@
 
 				requestAnimationFrame( animate );
 
-				var time = performance.now() * 0.001 + 6000;
+				const time = performance.now() * 0.001 + 6000;
 
 				box.position.x = Math.cos( time / 1.5 ) * 2;
 				box.position.y = Math.sin( time ) * 2;

examples/webgl_postprocessing_nodes.html

@@ -18,21 +18,21 @@
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import * as Nodes from './jsm/nodes/Nodes.js';
 
-			var camera, scene, renderer;
-			var object, light, nodepost;
-			var gui;
+			let camera, scene, renderer;
+			let object, light, nodepost;
+			let gui;
 
-			var clock = new THREE.Clock();
-			var frame = new Nodes.NodeFrame();
+			const clock = new THREE.Clock();
+			const frame = new Nodes.NodeFrame();
 
-			var param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'color-adjustment' };
+			const param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'color-adjustment' };
 
-			var textureLoader = new THREE.TextureLoader();
+			const textureLoader = new THREE.TextureLoader();
 
-			var lensflare2 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
+			const lensflare2 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
 			lensflare2.wrapS = lensflare2.wrapT = THREE.RepeatWrapping;
 
-			var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
+			const decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
 			decalNormal.wrapS = decalNormal.wrapT = THREE.RepeatWrapping;
 
 			init();
@@ -66,7 +66,7 @@
 
 			function addGui( name, value, callback, isColor, min, max ) {
 
-				var node;
+				let node;
 
 				param[ name ] = value;
 
@@ -104,7 +104,9 @@
 
 			function updateMaterial() {
 
-				var name = param.example;
+				const name = param.example;
+
+				let screen, fade, scale, size;
 
 				clearGui();
 
@@ -114,19 +116,19 @@
 
 						// POST
 
-						var screen = new Nodes.ScreenNode();
+						screen = new Nodes.ScreenNode();
 
-						var hue = new Nodes.FloatNode();
-						var sataturation = new Nodes.FloatNode( 1 );
-						var vibrance = new Nodes.FloatNode();
-						var brightness = new Nodes.FloatNode( 0 );
-						var contrast = new Nodes.FloatNode( 1 );
+						const hue = new Nodes.FloatNode();
+						const sataturation = new Nodes.FloatNode( 1 );
+						const vibrance = new Nodes.FloatNode();
+						const brightness = new Nodes.FloatNode( 0 );
+						const contrast = new Nodes.FloatNode( 1 );
 
-						var hueNode = new Nodes.ColorAdjustmentNode( screen, hue, Nodes.ColorAdjustmentNode.HUE );
-						var satNode = new Nodes.ColorAdjustmentNode( hueNode, sataturation, Nodes.ColorAdjustmentNode.SATURATION );
-						var vibranceNode = new Nodes.ColorAdjustmentNode( satNode, vibrance, Nodes.ColorAdjustmentNode.VIBRANCE );
-						var brightnessNode = new Nodes.ColorAdjustmentNode( vibranceNode, brightness, Nodes.ColorAdjustmentNode.BRIGHTNESS );
-						var contrastNode = new Nodes.ColorAdjustmentNode( brightnessNode, contrast, Nodes.ColorAdjustmentNode.CONTRAST );
+						const hueNode = new Nodes.ColorAdjustmentNode( screen, hue, Nodes.ColorAdjustmentNode.HUE );
+						const satNode = new Nodes.ColorAdjustmentNode( hueNode, sataturation, Nodes.ColorAdjustmentNode.SATURATION );
+						const vibranceNode = new Nodes.ColorAdjustmentNode( satNode, vibrance, Nodes.ColorAdjustmentNode.VIBRANCE );
+						const brightnessNode = new Nodes.ColorAdjustmentNode( vibranceNode, brightness, Nodes.ColorAdjustmentNode.BRIGHTNESS );
+						const contrastNode = new Nodes.ColorAdjustmentNode( brightnessNode, contrast, Nodes.ColorAdjustmentNode.CONTRAST );
 
 						nodepost.output = contrastNode;
 
@@ -168,10 +170,10 @@
 
 						// POST
 
-						var color = new Nodes.ColorNode( 0xFFFFFF );
-						var percent = new Nodes.FloatNode( .5 );
+						const color = new Nodes.ColorNode( 0xFFFFFF );
+						const percent = new Nodes.FloatNode( .5 );
 
-						var fade = new Nodes.MathNode(
+						fade = new Nodes.MathNode(
 							new Nodes.ScreenNode(),
 							color,
 							percent,
@@ -200,12 +202,12 @@
 
 						// POST
 
-						var alpha = new Nodes.FloatNode( 1 );
+						const alpha = new Nodes.FloatNode( 1 );
 
-						var screen = new Nodes.ScreenNode();
-						var inverted = new Nodes.MathNode( screen, Nodes.MathNode.INVERT );
+						screen = new Nodes.ScreenNode();
+						const inverted = new Nodes.MathNode( screen, Nodes.MathNode.INVERT );
 
-						var fade = new Nodes.MathNode(
+						fade = new Nodes.MathNode(
 							screen,
 							inverted,
 							alpha,
@@ -228,7 +230,7 @@
 
 						// POST
 
-						var multiply = new Nodes.OperatorNode(
+						const multiply = new Nodes.OperatorNode(
 							new Nodes.ScreenNode(),
 							new Nodes.TextureNode( lensflare2 ),
 							Nodes.OperatorNode.ADD
@@ -257,10 +259,10 @@
 
 						// PASS
 
-						var screen = new Nodes.ScreenNode();
-						var sat = new Nodes.FloatNode( 0 );
+						screen = new Nodes.ScreenNode();
+						const sat = new Nodes.FloatNode( 0 );
 
-						var satrgb = new Nodes.FunctionNode( [
+						const satrgb = new Nodes.FunctionNode( [
 							"vec3 satrgb( vec3 rgb, float adjustment ) {",
 							// include luminance function from LuminanceNode
 							"	vec3 intensity = vec3( luminance( rgb ) );",
@@ -268,7 +270,7 @@
 							"}"
 						].join( "\n" ), [ Nodes.LuminanceNode.Nodes.luminance ] );
 
-						var saturation = new Nodes.FunctionCallNode( satrgb );
+						const saturation = new Nodes.FunctionCallNode( satrgb );
 						saturation.inputs.rgb = screen;
 						saturation.inputs.adjustment = sat;
 
@@ -288,41 +290,41 @@
 
 						// POST
 
-						var normal = new Nodes.TextureNode( decalNormal );
-						var normalXY = new Nodes.SwitchNode( normal, 'xy' );
-						var scale = new Nodes.FloatNode( .5 );
+						const normal = new Nodes.TextureNode( decalNormal );
+						const normalXY = new Nodes.SwitchNode( normal, 'xy' );
+						scale = new Nodes.FloatNode( .5 );
 
-						var normalXYFlip = new Nodes.MathNode(
+						const normalXYFlip = new Nodes.MathNode(
 							normalXY,
 							Nodes.MathNode.INVERT
 						);
 
-						var offsetNormal = new Nodes.OperatorNode(
+						const offsetNormal = new Nodes.OperatorNode(
 							normalXYFlip,
 							new Nodes.FloatNode( .5 ),
 							Nodes.OperatorNode.ADD
 						);
 
-						var scaleTexture = new Nodes.OperatorNode(
+						const scaleTexture = new Nodes.OperatorNode(
 							new Nodes.SwitchNode( normal, 'z' ),
 							offsetNormal,
 							Nodes.OperatorNode.MUL
 						);
 
-						var scaleNormal = new Nodes.MathNode(
+						const scaleNormal = new Nodes.MathNode(
 							new Nodes.FloatNode( 1 ),
 							scaleTexture,
 							scale,
 							Nodes.MathNode.MIX
 						);
 
-						var offsetCoord = new Nodes.OperatorNode(
+						const offsetCoord = new Nodes.OperatorNode(
 							new Nodes.UVNode(),
 							scaleNormal,
 							Nodes.OperatorNode.MUL
 						);
 
-						var screen = new Nodes.ScreenNode( offsetCoord );
+						screen = new Nodes.ScreenNode( offsetCoord );
 
 						nodepost.output = screen;
 
@@ -348,20 +350,20 @@
 
 						// POST
 
-						var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
+						size = renderer.getDrawingBufferSize( new THREE.Vector2() );
 
-						var screen = new Nodes.ScreenNode();
+						screen = new Nodes.ScreenNode();
 
-						var previousFrame = new Nodes.RTTNode( size.width, size.height, screen );
+						const previousFrame = new Nodes.RTTNode( size.width, size.height, screen );
 
-						var motionBlur = new Nodes.MathNode(
+						const motionBlur = new Nodes.MathNode(
 							previousFrame,
 							screen,
 							new Nodes.FloatNode( .5 ),
 							Nodes.MathNode.MIX
 						);
 
-						var currentFrame = new Nodes.RTTNode( size.width, size.height, motionBlur );
+						const currentFrame = new Nodes.RTTNode( size.width, size.height, motionBlur );
 						currentFrame.saveTo = previousFrame;
 
 						nodepost.output = currentFrame;
@@ -372,28 +374,28 @@
 
 						// POST
 
-						var scale = new Nodes.FloatNode( 128 );
-						var fade = new Nodes.FloatNode( 1 );
-						var uv = new Nodes.UVNode();
+						scale = new Nodes.FloatNode( 128 );
+						fade = new Nodes.FloatNode( 1 );
+						const uv = new Nodes.UVNode();
 
-						var blocks = new Nodes.OperatorNode(
+						const blocks = new Nodes.OperatorNode(
 							uv,
 							scale,
 							Nodes.OperatorNode.MUL
 						);
 
-						var blocksSize = new Nodes.MathNode(
+						const blocksSize = new Nodes.MathNode(
 							blocks,
 							Nodes.MathNode.FLOOR
 						);
 
-						var mosaicUV = new Nodes.OperatorNode(
+						const mosaicUV = new Nodes.OperatorNode(
 							blocksSize,
 							scale,
 							Nodes.OperatorNode.DIV
 						);
 
-						var fadeScreen = new Nodes.MathNode(
+						const fadeScreen = new Nodes.MathNode(
 							uv,
 							mosaicUV,
 							fade,
@@ -430,9 +432,9 @@
 
 						// POST
 
-						var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
+						size = renderer.getDrawingBufferSize( new THREE.Vector2() );
 
-						var blurScreen = new Nodes.BlurNode( new Nodes.ScreenNode() );
+						const blurScreen = new Nodes.BlurNode( new Nodes.ScreenNode() );
 						blurScreen.size = new THREE.Vector2( size.width, size.height );
 
 						nodepost.output = blurScreen;
@@ -459,11 +461,11 @@
 
 				// test serialization
 				/*
-							var library = {};
+							let library = {};
 							library[ lensflare2.uuid ] = lensflare2;
 							library[ decalNormal.uuid ] = decalNormal;
 
-							var json = nodepost.toJSON();
+							let json = nodepost.toJSON();
 
 							nodepost.output = new NodeMaterialLoader( null, library ).parse( json ).value;
 						*/
@@ -490,12 +492,12 @@
 				object = new THREE.Object3D();
 				scene.add( object );
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
+				const geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( let i = 0; i < 100; i ++ ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0x888888 + ( Math.random() * 0x888888 ), flatShading: true } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshPhongMaterial( { color: 0x888888 + ( Math.random() * 0x888888 ), flatShading: true } );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
 					mesh.position.multiplyScalar( Math.random() * 400 );
 					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
@@ -531,7 +533,7 @@
 
 				requestAnimationFrame( animate );
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				object.rotation.x += 0.005;
 				object.rotation.y += 0.01;

examples/webgl_postprocessing_nodes_pass.html

@@ -21,21 +21,21 @@
 			import { NodePass } from './jsm/nodes/postprocessing/NodePass.js';
 			import * as Nodes from './jsm/nodes/Nodes.js';
 
-			var camera, scene, renderer, composer;
-			var object, light, nodepass;
-			var gui;
+			let camera, scene, renderer, composer;
+			let object, light, nodepass;
+			let gui;
 
-			var clock = new THREE.Clock();
-			var frame = new Nodes.NodeFrame();
+			const clock = new THREE.Clock();
+			const frame = new Nodes.NodeFrame();
 
-			var param = { example: 'color-adjustment' };
+			const param = { example: 'color-adjustment' };
 
-			var textureLoader = new THREE.TextureLoader();
+			const textureLoader = new THREE.TextureLoader();
 
-			var lensflare2 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
+			const lensflare2 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
 			lensflare2.wrapS = lensflare2.wrapT = THREE.RepeatWrapping;
 
-			var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
+			const decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
 			decalNormal.wrapS = decalNormal.wrapT = THREE.RepeatWrapping;
 
 			init();
@@ -68,7 +68,7 @@
 
 			function addGui( name, value, callback, isColor, min, max ) {
 
-				var node;
+				let node;
 
 				param[ name ] = value;
 
@@ -106,7 +106,9 @@
 
 			function updateMaterial() {
 
-				var name = param.example;
+				const name = param.example;
+
+				let screen, fade, scale;
 
 				clearGui();
 
@@ -114,19 +116,19 @@
 
 					case 'color-adjustment':
 
-						var screen = new Nodes.ScreenNode();
+						screen = new Nodes.ScreenNode();
 
-						var hue = new Nodes.FloatNode();
-						var sataturation = new Nodes.FloatNode( 1 );
-						var vibrance = new Nodes.FloatNode();
-						var brightness = new Nodes.FloatNode( 0 );
-						var contrast = new Nodes.FloatNode( 1 );
+						const hue = new Nodes.FloatNode();
+						const sataturation = new Nodes.FloatNode( 1 );
+						const vibrance = new Nodes.FloatNode();
+						const brightness = new Nodes.FloatNode( 0 );
+						const contrast = new Nodes.FloatNode( 1 );
 
-						var hueNode = new Nodes.ColorAdjustmentNode( screen, hue, Nodes.ColorAdjustmentNode.HUE );
-						var satNode = new Nodes.ColorAdjustmentNode( hueNode, sataturation, Nodes.ColorAdjustmentNode.SATURATION );
-						var vibranceNode = new Nodes.ColorAdjustmentNode( satNode, vibrance, Nodes.ColorAdjustmentNode.VIBRANCE );
-						var brightnessNode = new Nodes.ColorAdjustmentNode( vibranceNode, brightness, Nodes.ColorAdjustmentNode.BRIGHTNESS );
-						var contrastNode = new Nodes.ColorAdjustmentNode( brightnessNode, contrast, Nodes.ColorAdjustmentNode.CONTRAST );
+						const hueNode = new Nodes.ColorAdjustmentNode( screen, hue, Nodes.ColorAdjustmentNode.HUE );
+						const satNode = new Nodes.ColorAdjustmentNode( hueNode, sataturation, Nodes.ColorAdjustmentNode.SATURATION );
+						const vibranceNode = new Nodes.ColorAdjustmentNode( satNode, vibrance, Nodes.ColorAdjustmentNode.VIBRANCE );
+						const brightnessNode = new Nodes.ColorAdjustmentNode( vibranceNode, brightness, Nodes.ColorAdjustmentNode.BRIGHTNESS );
+						const contrastNode = new Nodes.ColorAdjustmentNode( brightnessNode, contrast, Nodes.ColorAdjustmentNode.CONTRAST );
 
 						nodepass.input = contrastNode;
 
@@ -168,10 +170,10 @@
 
 						// PASS
 
-						var color = new Nodes.ColorNode( 0xFFFFFF );
-						var percent = new Nodes.FloatNode( .5 );
+						const color = new Nodes.ColorNode( 0xFFFFFF );
+						const percent = new Nodes.FloatNode( .5 );
 
-						var fade = new Nodes.MathNode(
+						fade = new Nodes.MathNode(
 							new Nodes.ScreenNode(),
 							color,
 							percent,
@@ -200,12 +202,12 @@
 
 						// PASS
 
-						var alpha = new Nodes.FloatNode( 1 );
+						const alpha = new Nodes.FloatNode( 1 );
 
-						var screen = new Nodes.ScreenNode();
-						var inverted = new Nodes.MathNode( screen, Nodes.MathNode.INVERT );
+						screen = new Nodes.ScreenNode();
+						const inverted = new Nodes.MathNode( screen, Nodes.MathNode.INVERT );
 
-						var fade = new Nodes.MathNode(
+						fade = new Nodes.MathNode(
 							screen,
 							inverted,
 							alpha,
@@ -228,7 +230,7 @@
 
 						// PASS
 
-						var multiply = new Nodes.OperatorNode(
+						const multiply = new Nodes.OperatorNode(
 							new Nodes.ScreenNode(),
 							new Nodes.TextureNode( lensflare2 ),
 							Nodes.OperatorNode.ADD
@@ -257,10 +259,10 @@
 
 						// PASS
 
-						var screen = new Nodes.ScreenNode();
-						var sat = new Nodes.FloatNode( 0 );
+						screen = new Nodes.ScreenNode();
+						const sat = new Nodes.FloatNode( 0 );
 
-						var satrgb = new Nodes.FunctionNode( [
+						const satrgb = new Nodes.FunctionNode( [
 							"vec3 satrgb( vec3 rgb, float adjustment ) {",
 							// include luminance function from LuminanceNode
 							"	vec3 intensity = vec3( luminance( rgb ) );",
@@ -268,7 +270,7 @@
 							"}"
 						].join( "\n" ), [ Nodes.LuminanceNode.Nodes.luminance ] );
 
-						var saturation = new Nodes.FunctionCallNode( satrgb );
+						const saturation = new Nodes.FunctionCallNode( satrgb );
 						saturation.inputs.rgb = screen;
 						saturation.inputs.adjustment = sat;
 
@@ -288,41 +290,41 @@
 
 						// PASS
 
-						var normal = new Nodes.TextureNode( decalNormal );
-						var normalXY = new Nodes.SwitchNode( normal, 'xy' );
-						var scale = new Nodes.FloatNode( .5 );
+						const normal = new Nodes.TextureNode( decalNormal );
+						const normalXY = new Nodes.SwitchNode( normal, 'xy' );
+						scale = new Nodes.FloatNode( .5 );
 
-						var normalXYFlip = new Nodes.MathNode(
+						const normalXYFlip = new Nodes.MathNode(
 							normalXY,
 							Nodes.MathNode.INVERT
 						);
 
-						var offsetNormal = new Nodes.OperatorNode(
+						const offsetNormal = new Nodes.OperatorNode(
 							normalXYFlip,
 							new Nodes.FloatNode( .5 ),
 							Nodes.OperatorNode.ADD
 						);
 
-						var scaleTexture = new Nodes.OperatorNode(
+						const scaleTexture = new Nodes.OperatorNode(
 							new Nodes.SwitchNode( normal, 'z' ),
 							offsetNormal,
 							Nodes.OperatorNode.MUL
 						);
 
-						var scaleNormal = new Nodes.MathNode(
+						const scaleNormal = new Nodes.MathNode(
 							new Nodes.FloatNode( 1 ),
 							scaleTexture,
 							scale,
 							Nodes.MathNode.MIX
 						);
 
-						var offsetCoord = new Nodes.OperatorNode(
+						const offsetCoord = new Nodes.OperatorNode(
 							new Nodes.UVNode(),
 							scaleNormal,
 							Nodes.OperatorNode.MUL
 						);
 
-						var screen = new Nodes.ScreenNode( offsetCoord );
+						screen = new Nodes.ScreenNode( offsetCoord );
 
 						nodepass.input = screen;
 
@@ -348,28 +350,28 @@
 
 						// PASS
 
-						var scale = new Nodes.FloatNode( 128 );
-						var fade = new Nodes.FloatNode( 1 );
-						var uv = new Nodes.UVNode();
+						scale = new Nodes.FloatNode( 128 );
+						fade = new Nodes.FloatNode( 1 );
+						const uv = new Nodes.UVNode();
 
-						var blocks = new Nodes.OperatorNode(
+						const blocks = new Nodes.OperatorNode(
 							uv,
 							scale,
 							Nodes.OperatorNode.MUL
 						);
 
-						var blocksSize = new Nodes.MathNode(
+						const blocksSize = new Nodes.MathNode(
 							blocks,
 							Nodes.MathNode.FLOOR
 						);
 
-						var mosaicUV = new Nodes.OperatorNode(
+						const mosaicUV = new Nodes.OperatorNode(
 							blocksSize,
 							scale,
 							Nodes.OperatorNode.DIV
 						);
 
-						var fadeScreen = new Nodes.MathNode(
+						const fadeScreen = new Nodes.MathNode(
 							uv,
 							mosaicUV,
 							fade,
@@ -406,9 +408,9 @@
 
 						// PASS
 
-						var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
+						const size = renderer.getDrawingBufferSize( new THREE.Vector2() );
 
-						var blurScreen = new Nodes.BlurNode( new Nodes.ScreenNode() );
+						const blurScreen = new Nodes.BlurNode( new Nodes.ScreenNode() );
 						blurScreen.size = new THREE.Vector2( size.width, size.height );
 
 						nodepass.input = blurScreen;
@@ -435,11 +437,11 @@
 
 				// test serialization
 				/*
-							var library = {};
+							let library = {};
 							library[ lensflare2.uuid ] = lensflare2;
 							library[ decalNormal.uuid ] = decalNormal;
 
-							var json = nodepass.toJSON();
+							let json = nodepass.toJSON();
 
 							nodepass.input = new Nodes.NodeMaterialLoader( null, library ).parse( json ).value;
 						*/
@@ -464,12 +466,12 @@
 				object = new THREE.Object3D();
 				scene.add( object );
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
+				const geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( let i = 0; i < 100; i ++ ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0x888888 + ( Math.random() * 0x888888 ), flatShading: true } );
-					var mesh = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshPhongMaterial( { color: 0x888888 + ( Math.random() * 0x888888 ), flatShading: true } );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
 					mesh.position.multiplyScalar( Math.random() * 400 );
 					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
@@ -515,7 +517,7 @@
 
 				requestAnimationFrame( animate );
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				object.rotation.x += 0.005;
 				object.rotation.y += 0.01;

examples/webgl_postprocessing_outline.html

@@ -26,19 +26,19 @@
 			import { OutlinePass } from './jsm/postprocessing/OutlinePass.js';
 			import { FXAAShader } from './jsm/shaders/FXAAShader.js';
 
-			var container, stats;
-			var camera, scene, renderer, controls;
-			var raycaster = new THREE.Raycaster();
+			let container, stats;
+			let camera, scene, renderer, controls;
+			let composer, effectFXAA, outlinePass;
 
-			var mouse = new THREE.Vector2();
-			var selectedObjects = [];
+			let selectedObjects = [];
 
-			var composer, effectFXAA, outlinePass;
-			var obj3d = new THREE.Object3D();
+			const raycaster = new THREE.Raycaster();
+			const mouse = new THREE.Vector2();
 
-			var group = new THREE.Group();
+			const obj3d = new THREE.Object3D();
+			const group = new THREE.Group();
 
-			var params = {
+			const params = {
 				edgeStrength: 3.0,
 				edgeGlow: 0.0,
 				edgeThickness: 1.0,
@@ -49,7 +49,7 @@
 
 			// Init gui
 
-			var gui = new GUI( { width: 300 } );
+			const gui = new GUI( { width: 300 } );
 
 			gui.add( params, 'edgeStrength', 0.01, 10 ).onChange( function ( value ) {
 
@@ -83,14 +83,14 @@
 
 			} );
 
-			var Configuration = function () {
+			function Configuration() {
 
 				this.visibleEdgeColor = '#ffffff';
 				this.hiddenEdgeColor = '#190a05';
 
-			};
+			}
 
-			var conf = new Configuration();
+			const conf = new Configuration();
 
 			gui.addColor( conf, 'visibleEdgeColor' ).onChange( function ( value ) {
 
@@ -112,8 +112,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.shadowMap.enabled = true;
@@ -137,28 +137,25 @@
 
 				scene.add( new THREE.AmbientLight( 0xaaaaaa, 0.2 ) );
 
-				var light = new THREE.DirectionalLight( 0xddffdd, 0.6 );
+				const light = new THREE.DirectionalLight( 0xddffdd, 0.6 );
 				light.position.set( 1, 1, 1 );
-
 				light.castShadow = true;
-
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
 
-				var d = 10;
+				const d = 10;
 
 				light.shadow.camera.left = - d;
 				light.shadow.camera.right = d;
 				light.shadow.camera.top = d;
 				light.shadow.camera.bottom = - d;
-
 				light.shadow.camera.far = 1000;
 
 				scene.add( light );
 
 				// model
 
-				var manager = new THREE.LoadingManager();
+				const manager = new THREE.LoadingManager();
 
 				manager.onProgress = function ( item, loaded, total ) {
 
@@ -166,10 +163,10 @@
 
 				};
 
-				var loader = new OBJLoader( manager );
+				const loader = new OBJLoader( manager );
 				loader.load( 'models/obj/tree.obj', function ( object ) {
 
-					var scale = 1.0;
+					let scale = 1.0;
 
 					object.traverse( function ( child ) {
 
@@ -179,7 +176,7 @@
 							child.geometry.computeBoundingSphere();
 							scale = 0.2 * child.geometry.boundingSphere.radius;
 
-							var phongMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 5 } );
+							const phongMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 5 } );
 							child.material = phongMaterial;
 							child.receiveShadow = true;
 							child.castShadow = true;
@@ -200,14 +197,14 @@
 
 				//
 
-				var geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
+				const geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
 
-				for ( var i = 0; i < 20; i ++ ) {
+				for ( let i = 0; i < 20; i ++ ) {
 
-					var material = new THREE.MeshLambertMaterial();
+					const material = new THREE.MeshLambertMaterial();
 					material.color.setHSL( Math.random(), 1.0, 0.3 );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 4 - 2;
 					mesh.position.y = Math.random() * 4 - 2;
 					mesh.position.z = Math.random() * 4 - 2;
@@ -218,18 +215,18 @@
 
 				}
 
-				var floorMaterial = new THREE.MeshLambertMaterial( { side: THREE.DoubleSide } );
+				const floorMaterial = new THREE.MeshLambertMaterial( { side: THREE.DoubleSide } );
 
-				var floorGeometry = new THREE.PlaneBufferGeometry( 12, 12 );
-				var floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
+				const floorGeometry = new THREE.PlaneBufferGeometry( 12, 12 );
+				const floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
 				floorMesh.rotation.x -= Math.PI * 0.5;
 				floorMesh.position.y -= 1.5;
 				group.add( floorMesh );
 				floorMesh.receiveShadow = true;
 
-				var geometry = new THREE.TorusBufferGeometry( 1, 0.3, 16, 100 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffaaff } );
-				var torus = new THREE.Mesh( geometry, material );
+				const torusGeometry = new THREE.TorusBufferGeometry( 1, 0.3, 16, 100 );
+				const torusMaterial = new THREE.MeshPhongMaterial( { color: 0xffaaff } );
+				const torus = new THREE.Mesh( torusGeometry, torusMaterial );
 				torus.position.z = - 4;
 				group.add( torus );
 				torus.receiveShadow = true;
@@ -244,23 +241,20 @@
 
 				composer = new EffectComposer( renderer );
 
-				var renderPass = new RenderPass( scene, camera );
+				const renderPass = new RenderPass( scene, camera );
 				composer.addPass( renderPass );
 
 				outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );
 				composer.addPass( outlinePass );
 
-				var onLoad = function ( texture ) {
+				const textureLoader = new THREE.TextureLoader();
+				textureLoader.load( 'textures/tri_pattern.jpg', function ( texture ) {
 
 					outlinePass.patternTexture = texture;
 					texture.wrapS = THREE.RepeatWrapping;
 					texture.wrapT = THREE.RepeatWrapping;
 
-				};
-
-				var loader = new THREE.TextureLoader();
-
-				loader.load( 'textures/tri_pattern.jpg', onLoad );
+				} );
 
 				effectFXAA = new ShaderPass( FXAAShader );
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
@@ -293,11 +287,11 @@
 
 					raycaster.setFromCamera( mouse, camera );
 
-					var intersects = raycaster.intersectObject( scene, true );
+					const intersects = raycaster.intersectObject( scene, true );
 
 					if ( intersects.length > 0 ) {
 
-						var selectedObject = intersects[ 0 ].object;
+						const selectedObject = intersects[ 0 ].object;
 						addSelectedObject( selectedObject );
 						outlinePass.selectedObjects = selectedObjects;
 
@@ -313,8 +307,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();
@@ -332,7 +326,7 @@
 
 				stats.begin();
 
-				var timer = performance.now();
+				const timer = performance.now();
 
 				if ( params.rotate ) {
 

examples/webgl_postprocessing_pixel.html

@@ -26,11 +26,10 @@
 			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
 			import { PixelShader } from './jsm/shaders/PixelShader.js';
 
+			let camera, scene, renderer, gui, composer, controls;
+			let pixelPass, params;
 
-			var camera, scene, renderer, gui, composer, controls;
-			var pixelPass, params;
-
-			var group;
+			let group;
 
 			init();
 			animate();
@@ -53,7 +52,7 @@
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -68,22 +67,22 @@
 
 				scene = new THREE.Scene();
 
-				var hemisphereLight = new THREE.HemisphereLight( 0xfceafc, 0x000000, .8 );
+				const hemisphereLight = new THREE.HemisphereLight( 0xfceafc, 0x000000, .8 );
 				scene.add( hemisphereLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
 				dirLight.position.set( 150, 75, 150 );
 				scene.add( dirLight );
 
-				var dirLight2 = new THREE.DirectionalLight( 0xffffff, .2 );
+				const dirLight2 = new THREE.DirectionalLight( 0xffffff, .2 );
 				dirLight2.position.set( - 150, 75, - 150 );
 				scene.add( dirLight2 );
 
-				var dirLight3 = new THREE.DirectionalLight( 0xffffff, .1 );
+				const dirLight3 = new THREE.DirectionalLight( 0xffffff, .1 );
 				dirLight3.position.set( 0, 125, 0 );
 				scene.add( dirLight3 );
 
-				var geometries = [
+				const geometries = [
 					new THREE.SphereBufferGeometry( 1, 64, 64 ),
 					new THREE.BoxBufferGeometry( 1, 1, 1 ),
 					new THREE.ConeBufferGeometry( 1, 1, 32 ),
@@ -93,16 +92,19 @@
 
 				group = new THREE.Group();
 
-				for ( var i = 0; i < 25; i ++ ) {
+				for ( let i = 0; i < 25; i ++ ) {
+
+					const geom = geometries[ Math.floor( Math.random() * geometries.length ) ];
 
-					var geom = geometries[ Math.floor( Math.random() * geometries.length ) ];
-					var color = new THREE.Color();
+					const color = new THREE.Color();
 					color.setHSL( Math.random(), .7 + .2 * Math.random(), .5 + .1 * Math.random() );
-					var mat = new THREE.MeshPhongMaterial( { color: color, shininess: 200 } );
-					var mesh = new THREE.Mesh( geom, mat );
-					var s = 4 + Math.random() * 10;
-					mesh.scale.set( s, s, s );
 
+					const mat = new THREE.MeshPhongMaterial( { color: color, shininess: 200 } );
+
+					const mesh = new THREE.Mesh( geom, mat );
+
+					const s = 4 + Math.random() * 10;
+					mesh.scale.set( s, s, s );
 					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
 					mesh.position.multiplyScalar( Math.random() * 200 );
 					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );

examples/webgl_postprocessing_procedural.html

@@ -61,11 +61,11 @@
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			var postCamera, postScene, renderer;
-			var postMaterial, noiseRandom1DMaterial, noiseRandom2DMaterial, noiseRandom3DMaterial, postQuad;
-			var stats;
+			let postCamera, postScene, renderer;
+			let postMaterial, noiseRandom1DMaterial, noiseRandom2DMaterial, noiseRandom3DMaterial, postQuad;
+			let stats;
 
-			var params = { procedure: 'noiseRandom3D' };
+			const params = { procedure: 'noiseRandom3D' };
 
 			init();
 			animate();
@@ -74,14 +74,14 @@
 			// Init gui
 			function initGui() {
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( params, 'procedure', [ 'noiseRandom1D', 'noiseRandom2D', 'noiseRandom3D' ] );
 
 			}
 
 			function init() {
 
-				var container = document.getElementById( "container" );
+				const container = document.getElementById( "container" );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -106,7 +106,7 @@
 					fragmentShader: document.querySelector( '#noiseRandom3D-frag' ).textContent.trim()
 				} );
 				postMaterial = noiseRandom3DMaterial;
-				var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
+				const postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
 				postQuad = new THREE.Mesh( postPlane, postMaterial );
 				postScene = new THREE.Scene();
 				postScene.add( postQuad );
@@ -117,8 +117,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				postCamera.aspect = width / height;
 				postCamera.updateProjectionMatrix();

examples/webgl_postprocessing_rgb_halftone.html

@@ -24,172 +24,175 @@
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { HalftonePass } from './jsm/postprocessing/HalftonePass.js';
 
-			// setup
+			let renderer, clock, camera, stats;
 
-			var renderer, clock, camera, controls, stats, rotationSpeed;
+			const rotationSpeed = Math.PI / 64;
 
-			renderer = new THREE.WebGLRenderer();
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
+			let composer, group;
 
-			clock = new THREE.Clock();
+			init();
+			animate();
 
-			camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
-			camera.position.z = 12;
+			function init() {
 
-			rotationSpeed = Math.PI / 64;
-			stats = new Stats();
-
-			document.body.appendChild( renderer.domElement );
-			document.body.appendChild( stats.dom );
-
-			// camera controls
-			controls = new OrbitControls( camera, renderer.domElement );
-			controls.target.set( 0, 0, 0 );
-			controls.update();
-
-			// scene
-			var scene, group, mat, floor, light;
-
-			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0x444444 );
-			group = new THREE.Group();
-			floor = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 1, 100 ), new THREE.MeshPhongMaterial( {} ) );
-			floor.position.y = - 10;
-			light = new THREE.PointLight( 0xffffff, 1.0, 50, 2 );
-			light.position.y = 2;
-			group.add( floor, light );
-			scene.add( group );
-
-			mat = new THREE.ShaderMaterial( {
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				uniforms: {},
+				clock = new THREE.Clock();
 
-				vertexShader: [
-					"varying vec2 vUV;",
-					"varying vec3 vNormal;",
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.z = 12;
 
-					"void main() {",
+				stats = new Stats();
 
-					"vUV = uv;",
-					"vNormal = vec3( normal );",
-					"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+				document.body.appendChild( renderer.domElement );
+				document.body.appendChild( stats.dom );
 
-					"}"
-				].join( "\n" ),
+				// camera controls
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 0, 0 );
+				controls.update();
 
-				fragmentShader: [
-					"varying vec2 vUV;",
-					"varying vec3 vNormal;",
+				// scene
 
-					"void main() {",
+				const scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x444444 );
 
-					"vec4 c = vec4( abs( vNormal ) + vec3( vUV, 0.0 ), 0.0 );",
-					"gl_FragColor = c;",
+				group = new THREE.Group();
+				const floor = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 1, 100 ), new THREE.MeshPhongMaterial( {} ) );
+				floor.position.y = - 10;
+				const light = new THREE.PointLight( 0xffffff, 1.0, 50, 2 );
+				light.position.y = 2;
+				group.add( floor, light );
+				scene.add( group );
+
+				const mat = new THREE.ShaderMaterial( {
 
-					"}"
-				].join( "\n" )
-			} );
+					uniforms: {},
+
+					vertexShader: [
+						"varying vec2 vUV;",
+						"varying vec3 vNormal;",
+
+						"void main() {",
+
+						"vUV = uv;",
+						"vNormal = vec3( normal );",
+						"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+						"}"
+					].join( "\n" ),
+
+					fragmentShader: [
+						"varying vec2 vUV;",
+						"varying vec3 vNormal;",
+
+						"void main() {",
+
+						"vec4 c = vec4( abs( vNormal ) + vec3( vUV, 0.0 ), 0.0 );",
+						"gl_FragColor = c;",
+
+						"}"
+					].join( "\n" )
+				} );
+
+				for ( let i = 0; i < 50; ++ i ) {
+
+					// fill scene with coloured cubes
+					const mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 2, 2, 2 ), mat );
+					mesh.position.set( Math.random() * 16 - 8, Math.random() * 16 - 8, Math.random() * 16 - 8 );
+					mesh.rotation.set( Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2 );
+					group.add( mesh );
+
+				}
+
+				// post-processing
+
+				composer = new EffectComposer( renderer );
+				const renderPass = new RenderPass( scene, camera );
+				const params = {
+					shape: 1,
+					radius: 4,
+					rotateR: Math.PI / 12,
+					rotateB: Math.PI / 12 * 2,
+					rotateG: Math.PI / 12 * 3,
+					scatter: 0,
+					blending: 1,
+					blendingMode: 1,
+					greyscale: false,
+					disable: false
+				};
+				const halftonePass = new HalftonePass( window.innerWidth, window.innerHeight, params );
+				composer.addPass( renderPass );
+				composer.addPass( halftonePass );
+
+				window.onresize = function () {
+
+					// resize composer
+					renderer.setSize( window.innerWidth, window.innerHeight );
+					composer.setSize( window.innerWidth, window.innerHeight );
+					camera.aspect = window.innerWidth / window.innerHeight;
+					camera.updateProjectionMatrix();
+
+				};
+
+				// GUI
+
+				const controller = {
+					radius: halftonePass.uniforms[ "radius" ].value,
+					rotateR: halftonePass.uniforms[ "rotateR" ].value / ( Math.PI / 180 ),
+					rotateG: halftonePass.uniforms[ "rotateG" ].value / ( Math.PI / 180 ),
+					rotateB: halftonePass.uniforms[ "rotateB" ].value / ( Math.PI / 180 ),
+					scatter: halftonePass.uniforms[ "scatter" ].value,
+					shape: halftonePass.uniforms[ "shape" ].value,
+					greyscale: halftonePass.uniforms[ "greyscale" ].value,
+					blending: halftonePass.uniforms[ "blending" ].value,
+					blendingMode: halftonePass.uniforms[ "blendingMode" ].value,
+					disable: halftonePass.uniforms[ "disable" ].value
+				};
+
+				function onGUIChange() {
+
+					// update uniforms
+					halftonePass.uniforms[ "radius" ].value = controller.radius;
+					halftonePass.uniforms[ "rotateR" ].value = controller.rotateR * ( Math.PI / 180 );
+					halftonePass.uniforms[ "rotateG" ].value = controller.rotateG * ( Math.PI / 180 );
+					halftonePass.uniforms[ "rotateB" ].value = controller.rotateB * ( Math.PI / 180 );
+					halftonePass.uniforms[ "scatter" ].value = controller.scatter;
+					halftonePass.uniforms[ "shape" ].value = controller.shape;
+					halftonePass.uniforms[ "greyscale" ].value = controller.greyscale;
+					halftonePass.uniforms[ "blending" ].value = controller.blending;
+					halftonePass.uniforms[ "blendingMode" ].value = controller.blendingMode;
+					halftonePass.uniforms[ "disable" ].value = controller.disable;
+
+				}
+
+				const gui = new GUI();
+				gui.add( controller, 'shape', { 'Dot': 1, 'Ellipse': 2, 'Line': 3, 'Square': 4 } ).onChange( onGUIChange );
+				gui.add( controller, 'radius', 1, 25 ).onChange( onGUIChange );
+				gui.add( controller, 'rotateR', 0, 90 ).onChange( onGUIChange );
+				gui.add( controller, 'rotateG', 0, 90 ).onChange( onGUIChange );
+				gui.add( controller, 'rotateB', 0, 90 ).onChange( onGUIChange );
+				gui.add( controller, 'scatter', 0, 1, 0.01 ).onChange( onGUIChange );
+				gui.add( controller, 'greyscale' ).onChange( onGUIChange );
+				gui.add( controller, 'blending', 0, 1, 0.01 ).onChange( onGUIChange );
+				gui.add( controller, 'blendingMode', { 'Linear': 1, 'Multiply': 2, 'Add': 3, 'Lighter': 4, 'Darker': 5 } ).onChange( onGUIChange );
+				gui.add( controller, 'disable' ).onChange( onGUIChange );
 
-			for ( var i = 0; i < 50; ++ i ) {
+			}
 
-				// fill scene with coloured cubes
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 2, 2, 2 ), mat );
-				mesh.position.set( Math.random() * 16 - 8, Math.random() * 16 - 8, Math.random() * 16 - 8 );
-				mesh.rotation.set( Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2 );
-				group.add( mesh );
+			function animate() {
 
-			}
+				requestAnimationFrame( animate );
 
-			// post-processing
-			var composer, renderPass, halftonePass, params;
-
-			composer = new EffectComposer( renderer );
-			renderPass = new RenderPass( scene, camera );
-			params = {
-				shape: 1,
-				radius: 4,
-				rotateR: Math.PI / 12,
-				rotateB: Math.PI / 12 * 2,
-				rotateG: Math.PI / 12 * 3,
-				scatter: 0,
-				blending: 1,
-				blendingMode: 1,
-				greyscale: false,
-				disable: false
-			};
-			halftonePass = new HalftonePass( window.innerWidth, window.innerHeight, params );
-			composer.addPass( renderPass );
-			composer.addPass( halftonePass );
-
-			window.onresize = function () {
-
-				// resize composer
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				composer.setSize( window.innerWidth, window.innerHeight );
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-			};
-
-			// GUI
-			var controller, gui, onGUIChange;
-
-			controller = {
-				radius: halftonePass.uniforms[ "radius" ].value,
-				rotateR: halftonePass.uniforms[ "rotateR" ].value / ( Math.PI / 180 ),
-				rotateG: halftonePass.uniforms[ "rotateG" ].value / ( Math.PI / 180 ),
-				rotateB: halftonePass.uniforms[ "rotateB" ].value / ( Math.PI / 180 ),
-				scatter: halftonePass.uniforms[ "scatter" ].value,
-				shape: halftonePass.uniforms[ "shape" ].value,
-				greyscale: halftonePass.uniforms[ "greyscale" ].value,
-				blending: halftonePass.uniforms[ "blending" ].value,
-				blendingMode: halftonePass.uniforms[ "blendingMode" ].value,
-				disable: halftonePass.uniforms[ "disable" ].value
-			};
-
-			onGUIChange = function () {
-
-				// update uniforms
-				halftonePass.uniforms[ "radius" ].value = controller.radius;
-				halftonePass.uniforms[ "rotateR" ].value = controller.rotateR * ( Math.PI / 180 );
-				halftonePass.uniforms[ "rotateG" ].value = controller.rotateG * ( Math.PI / 180 );
-				halftonePass.uniforms[ "rotateB" ].value = controller.rotateB * ( Math.PI / 180 );
-				halftonePass.uniforms[ "scatter" ].value = controller.scatter;
-				halftonePass.uniforms[ "shape" ].value = controller.shape;
-				halftonePass.uniforms[ "greyscale" ].value = controller.greyscale;
-				halftonePass.uniforms[ "blending" ].value = controller.blending;
-				halftonePass.uniforms[ "blendingMode" ].value = controller.blendingMode;
-				halftonePass.uniforms[ "disable" ].value = controller.disable;
-
-			};
-
-			gui = new GUI();
-			gui.add( controller, 'shape', { 'Dot': 1, 'Ellipse': 2, 'Line': 3, 'Square': 4 } ).onChange( onGUIChange );
-			gui.add( controller, 'radius', 1, 25 ).onChange( onGUIChange );
-			gui.add( controller, 'rotateR', 0, 90 ).onChange( onGUIChange );
-			gui.add( controller, 'rotateG', 0, 90 ).onChange( onGUIChange );
-			gui.add( controller, 'rotateB', 0, 90 ).onChange( onGUIChange );
-			gui.add( controller, 'scatter', 0, 1, 0.01 ).onChange( onGUIChange );
-			gui.add( controller, 'greyscale' ).onChange( onGUIChange );
-			gui.add( controller, 'blending', 0, 1, 0.01 ).onChange( onGUIChange );
-			gui.add( controller, 'blendingMode', { 'Linear': 1, 'Multiply': 2, 'Add': 3, 'Lighter': 4, 'Darker': 5 } ).onChange( onGUIChange );
-			gui.add( controller, 'disable' ).onChange( onGUIChange );
-
-			function loop() {
-
-				// demo loop
-				var delta = clock.getDelta();
-				requestAnimationFrame( loop );
+				const delta = clock.getDelta();
 				stats.update();
 				group.rotation.y += delta * rotationSpeed;
 				composer.render( delta );
 
 			}
 
-			loop();
-
-
 		</script>
 	</body>
 </html>

examples/webgl_postprocessing_sao.html

@@ -23,10 +23,10 @@
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { SAOPass } from './jsm/postprocessing/SAOPass.js';
 
-			var container, stats;
-			var camera, scene, renderer;
-			var composer, renderPass, saoPass;
-			var group;
+			let container, stats;
+			let camera, scene, renderer;
+			let composer, renderPass, saoPass;
+			let group;
 
 			init();
 			animate();
@@ -36,9 +36,9 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var width = window.innerWidth || 1;
-				var height = window.innerHeight || 1;
-				var devicePixelRatio = window.devicePixelRatio || 1;
+				const width = window.innerWidth || 1;
+				const height = window.innerHeight || 1;
+				const devicePixelRatio = window.devicePixelRatio || 1;
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setClearColor( 0x000000 );
@@ -54,37 +54,37 @@
 				group = new THREE.Object3D();
 				scene.add( group );
 
-				var light = new THREE.PointLight( 0xddffdd, 0.8 );
+				const light = new THREE.PointLight( 0xddffdd, 0.8 );
 				light.position.z = 70;
 				light.position.y = - 70;
 				light.position.x = - 70;
 				scene.add( light );
 
-				var light2 = new THREE.PointLight( 0xffdddd, 0.8 );
+				const light2 = new THREE.PointLight( 0xffdddd, 0.8 );
 				light2.position.z = 70;
 				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
-				var light3 = new THREE.PointLight( 0xddddff, 0.8 );
+				const light3 = new THREE.PointLight( 0xddddff, 0.8 );
 				light3.position.z = 70;
 				light3.position.x = 70;
 				light3.position.y = - 70;
 				scene.add( light3 );
 
-				var light3 = new THREE.AmbientLight( 0xffffff, 0.05 );
-				scene.add( light3 );
+				const light4 = new THREE.AmbientLight( 0xffffff, 0.05 );
+				scene.add( light4 );
 
-				var geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
+				const geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
 
-				for ( var i = 0; i < 120; i ++ ) {
+				for ( let i = 0; i < 120; i ++ ) {
 
-					var material = new THREE.MeshStandardMaterial();
+					const material = new THREE.MeshStandardMaterial();
 					material.roughness = 0.5 * Math.random() + 0.25;
 					material.metalness = 0;
 					material.color.setHSL( Math.random(), 1.0, 0.3 );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 4 - 2;
 					mesh.position.y = Math.random() * 4 - 2;
 					mesh.position.z = Math.random() * 4 - 2;
@@ -107,7 +107,7 @@
 				composer.addPass( saoPass );
 
 				// Init gui
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( saoPass.params, 'output', {
 					'Beauty': SAOPass.OUTPUT.Beauty,
 					'Beauty+SAO': SAOPass.OUTPUT.Default,
@@ -135,8 +135,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth || 1;
-				var height = window.innerHeight || 1;
+				const width = window.innerWidth || 1;
+				const height = window.innerHeight || 1;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -159,7 +159,7 @@
 
 			function render() {
 
-				var timer = performance.now();
+				const timer = performance.now();
 				group.rotation.x = timer * 0.0002;
 				group.rotation.y = timer * 0.0001;
 

examples/webgl_postprocessing_smaa.html

@@ -23,14 +23,14 @@
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { SMAAPass } from './jsm/postprocessing/SMAAPass.js';
 
-			var camera, scene, renderer, composer, pass, stats;
+			let camera, scene, renderer, composer, stats;
 
 			init();
 			animate();
 
 			function init() {
 
-				var container = document.getElementById( "container" );
+				const container = document.getElementById( "container" );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -47,28 +47,28 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+				const geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
+				const material1 = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = - 100;
-				scene.add( mesh );
+				const mesh1 = new THREE.Mesh( geometry, material1 );
+				mesh1.position.x = - 100;
+				scene.add( mesh1 );
 
-				var texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
+				const texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
 				texture.anisotropy = 4;
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				const material2 = new THREE.MeshBasicMaterial( { map: texture } );
 
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = 100;
-				scene.add( mesh );
+				const mesh2 = new THREE.Mesh( geometry, material2 );
+				mesh2.position.x = 100;
+				scene.add( mesh2 );
 
 				// postprocessing
 
 				composer = new EffectComposer( renderer );
 				composer.addPass( new RenderPass( scene, camera ) );
 
-				pass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() );
+				const pass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() );
 				composer.addPass( pass );
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -77,8 +77,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();
@@ -94,9 +94,9 @@
 
 				stats.begin();
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
+				for ( let i = 0; i < scene.children.length; i ++ ) {
 
-					var child = scene.children[ i ];
+					const child = scene.children[ i ];
 
 					child.rotation.x += 0.005;
 					child.rotation.y += 0.01;

examples/webgl_postprocessing_sobel.html

@@ -28,11 +28,11 @@
 			import { LuminosityShader } from './jsm/shaders/LuminosityShader.js';
 			import { SobelOperatorShader } from './jsm/shaders/SobelOperatorShader.js';
 
-			var camera, scene, renderer, composer;
+			let camera, scene, renderer, composer;
 
-			var effectSobel;
+			let effectSobel;
 
-			var params = {
+			const params = {
 				enable: true
 			};
 
@@ -51,18 +51,18 @@
 
 				//
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 8, 3, 256, 32, 2, 3 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffff00 } );
+				const geometry = new THREE.TorusKnotBufferGeometry( 8, 3, 256, 32, 2, 3 );
+				const material = new THREE.MeshPhongMaterial( { color: 0xffff00 } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -76,12 +76,12 @@
 				// postprocessing
 
 				composer = new EffectComposer( renderer );
-				var renderPass = new RenderPass( scene, camera );
+				const renderPass = new RenderPass( scene, camera );
 				composer.addPass( renderPass );
 
 				// color to grayscale conversion
 
-				var effectGrayScale = new ShaderPass( LuminosityShader );
+				const effectGrayScale = new ShaderPass( LuminosityShader );
 				composer.addPass( effectGrayScale );
 
 				// you might want to use a gaussian blur filter before
@@ -94,13 +94,13 @@
 				effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio;
 				composer.addPass( effectSobel );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 10;
 				controls.maxDistance = 100;
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( params, 'enable' );
 				gui.open();

examples/webgl_postprocessing_ssaa.html

@@ -27,10 +27,10 @@
 			import { SSAARenderPass } from './jsm/postprocessing/SSAARenderPass.js';
 			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
-			var camera, scene, renderer, composer, copyPass, ssaaRenderPass;
-			var gui, stats;
+			let camera, scene, renderer, composer, copyPass, ssaaRenderPass;
+			let gui, stats;
 
-			var param = {
+			const param = {
 				sampleLevel: 2
 			};
 
@@ -60,7 +60,7 @@
 
 			function init() {
 
-				var container = document.getElementById( "container" );
+				const container = document.getElementById( "container" );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -75,24 +75,24 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+				const geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
+				const material1 = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = - 100;
-				scene.add( mesh );
+				const mesh1 = new THREE.Mesh( geometry, material1 );
+				mesh1.position.x = - 100;
+				scene.add( mesh1 );
 
-				var texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
+				const texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
 				texture.minFilter = THREE.NearestFilter;
 				texture.magFilter = THREE.NearestFilter;
 				texture.anisotropy = 1;
 				texture.generateMipmaps = false;
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				const material2 = new THREE.MeshBasicMaterial( { map: texture } );
 
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = 100;
-				scene.add( mesh );
+				const mesh2 = new THREE.Mesh( geometry, material2 );
+				mesh2.position.x = 100;
+				scene.add( mesh2 );
 
 				// postprocessing
 
@@ -111,8 +111,8 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -128,9 +128,9 @@
 
 				stats.begin();
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
+				for ( let i = 0; i < scene.children.length; i ++ ) {
 
-					var child = scene.children[ i ];
+					const child = scene.children[ i ];
 
 					child.rotation.x += 0.005;
 					child.rotation.y += 0.01;

examples/webgl_postprocessing_ssaa_unbiased.html

@@ -27,12 +27,12 @@
 			import { SSAARenderPass } from './jsm/postprocessing/SSAARenderPass.js';
 			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
-			var scene, renderer, composer, copyPass;
-			var cameraP, ssaaRenderPassP;
-			var cameraO, ssaaRenderPassO;
-			var gui, stats;
+			let scene, renderer, composer, copyPass;
+			let cameraP, ssaaRenderPassP;
+			let cameraO, ssaaRenderPassO;
+			let gui, stats;
 
-			var params = {
+			const params = {
 				sampleLevel: 4,
 				renderToScreen: false,
 				unbiased: true,
@@ -75,12 +75,12 @@
 
 			function init() {
 
-				var container = document.getElementById( "container" );
+				const container = document.getElementById( "container" );
 
-				var width = window.innerWidth || 1;
-				var height = window.innerHeight || 1;
-				var aspect = width / height;
-				var devicePixelRatio = window.devicePixelRatio || 1;
+				const width = window.innerWidth || 1;
+				const height = window.innerHeight || 1;
+				const aspect = width / height;
+				const devicePixelRatio = window.devicePixelRatio || 1;
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( devicePixelRatio );
@@ -96,47 +96,48 @@
 				cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 3, 10 );
 				cameraO.position.z = 7;
 
-				var fov = THREE.MathUtils.degToRad( cameraP.fov );
-				var hyperfocus = ( cameraP.near + cameraP.far ) / 2;
-				var _height = 2 * Math.tan( fov / 2 ) * hyperfocus;
+				const fov = THREE.MathUtils.degToRad( cameraP.fov );
+				const hyperfocus = ( cameraP.near + cameraP.far ) / 2;
+				const _height = 2 * Math.tan( fov / 2 ) * hyperfocus;
 				cameraO.zoom = height / _height;
 
 
 				scene = new THREE.Scene();
 
-				var group = new THREE.Group();
+				const group = new THREE.Group();
 				scene.add( group );
 
-				var light = new THREE.PointLight( 0xddffdd, 1.0 );
+				const light = new THREE.PointLight( 0xddffdd, 1.0 );
 				light.position.z = 70;
 				light.position.y = - 70;
 				light.position.x = - 70;
 				scene.add( light );
 
-				var light2 = new THREE.PointLight( 0xffdddd, 1.0 );
+				const light2 = new THREE.PointLight( 0xffdddd, 1.0 );
 				light2.position.z = 70;
 				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
-				var light3 = new THREE.PointLight( 0xddddff, 1.0 );
+				const light3 = new THREE.PointLight( 0xddddff, 1.0 );
 				light3.position.z = 70;
 				light3.position.x = 70;
 				light3.position.y = - 70;
 				scene.add( light3 );
 
-				var light3 = new THREE.AmbientLight( 0xffffff, 0.05 );
-				scene.add( light3 );
+				const light4 = new THREE.AmbientLight( 0xffffff, 0.05 );
+				scene.add( light4 );
+
+				const geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
 
-				var geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
-				for ( var i = 0; i < 120; i ++ ) {
+				for ( let i = 0; i < 120; i ++ ) {
 
-					var material = new THREE.MeshStandardMaterial();
+					const material = new THREE.MeshStandardMaterial();
 					material.roughness = 0.5 * Math.random() + 0.25;
 					material.metalness = 0;
 					material.color.setHSL( Math.random(), 1.0, 0.3 );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 4 - 2;
 					mesh.position.y = Math.random() * 4 - 2;
 					mesh.position.z = Math.random() * 4 - 2;
@@ -166,9 +167,9 @@
 
 			function onWindowResize() {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
-				var aspect = width / height;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+				const aspect = width / height;
 
 				cameraP.aspect = aspect;
 				cameraO.updateProjectionMatrix();
@@ -192,9 +193,9 @@
 
 				if ( params.autoRotate ) {
 
-					for ( var i = 0; i < scene.children.length; i ++ ) {
+					for ( let i = 0; i < scene.children.length; i ++ ) {
 
-						var child = scene.children[ i ];
+						const child = scene.children[ i ];
 
 						child.rotation.x += 0.005;
 						child.rotation.y += 0.01;
@@ -203,7 +204,8 @@
 
 				}
 
-				var newColor = ssaaRenderPassP.clearColor;
+				let newColor = ssaaRenderPassP.clearColor;
+
 				switch ( params.clearColor ) {
 
 					case 'blue': newColor = 0x0000ff; break;
@@ -213,6 +215,7 @@
 					case 'black': newColor = 0x000000; break;
 
 				}
+
 				ssaaRenderPassP.clearColor = ssaaRenderPassO.clearColor = newColor;
 				ssaaRenderPassP.clearAlpha = ssaaRenderPassO.clearAlpha = params.clearAlpha;
 

examples/webgl_postprocessing_ssao.html

@@ -26,10 +26,10 @@
 			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 			import { SSAOPass } from './jsm/postprocessing/SSAOPass.js';
 
-			var container, stats;
-			var camera, scene, renderer;
-			var composer;
-			var group;
+			let container, stats;
+			let camera, scene, renderer;
+			let composer;
+			let group;
 
 			init();
 			animate();
@@ -55,15 +55,15 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
+				const geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( let i = 0; i < 100; i ++ ) {
 
-					var material = new THREE.MeshLambertMaterial( {
+					const material = new THREE.MeshLambertMaterial( {
 						color: Math.random() * 0xffffff
 					} );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 400 - 200;
 					mesh.position.y = Math.random() * 400 - 200;
 					mesh.position.z = Math.random() * 400 - 200;
@@ -79,17 +79,17 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				composer = new EffectComposer( renderer );
 
-				var ssaoPass = new SSAOPass( scene, camera, width, height );
+				const ssaoPass = new SSAOPass( scene, camera, width, height );
 				ssaoPass.kernelRadius = 16;
 				composer.addPass( ssaoPass );
 
 				// Init gui
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( ssaoPass, 'output', {
 					'Default': SSAOPass.OUTPUT.Default,
@@ -113,8 +113,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();
@@ -136,7 +136,7 @@
 
 			function render() {
 
-				var timer = performance.now();
+				const timer = performance.now();
 				group.rotation.x = timer * 0.0002;
 				group.rotation.y = timer * 0.0001;
 

examples/webgl_postprocessing_taa.html

@@ -29,11 +29,11 @@
 			import { TAARenderPass } from './jsm/postprocessing/TAARenderPass.js';
 			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
-			var camera, scene, renderer, composer, copyPass, taaRenderPass, renderPass;
-			var gui, stats;
-			var index = 0;
+			let camera, scene, renderer, composer, copyPass, taaRenderPass, renderPass;
+			let gui, stats;
+			let index = 0;
 
-			var param = { TAAEnabled: "1", TAASampleLevel: 0 };
+			const param = { TAAEnabled: "1", TAASampleLevel: 0 };
 
 			init();
 			animate();
@@ -83,7 +83,7 @@
 
 			function init() {
 
-				var container = document.getElementById( "container" );
+				const container = document.getElementById( "container" );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -100,24 +100,24 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+				const geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
+				const material1 = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = - 100;
-				scene.add( mesh );
+				const mesh1 = new THREE.Mesh( geometry, material1 );
+				mesh1.position.x = - 100;
+				scene.add( mesh1 );
 
-				var texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
+				const texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
 				texture.minFilter = THREE.NearestFilter;
 				texture.magFilter = THREE.NearestFilter;
 				texture.anisotropy = 1;
 				texture.generateMipmaps = false;
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				const material2 = new THREE.MeshBasicMaterial( { map: texture } );
 
-				var mesh = new THREE.Mesh( geometry, material );
-				mesh.position.x = 100;
-				scene.add( mesh );
+				const mesh2 = new THREE.Mesh( geometry, material2 );
+				mesh2.position.x = 100;
+				scene.add( mesh2 );
 
 				// postprocessing
 
@@ -140,8 +140,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();
@@ -159,14 +159,15 @@
 
 				if ( Math.round( index / 200 ) % 2 === 0 ) {
 
-					for ( var i = 0; i < scene.children.length; i ++ ) {
+					for ( let i = 0; i < scene.children.length; i ++ ) {
 
-						var child = scene.children[ i ];
+						const child = scene.children[ i ];
 
 						child.rotation.x += 0.005;
 						child.rotation.y += 0.01;
 
 					}
+
 					if ( taaRenderPass ) taaRenderPass.accumulate = false;
 
 				} else {

examples/webgl_postprocessing_unreal_bloom.html

@@ -37,99 +37,108 @@
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { UnrealBloomPass } from './jsm/postprocessing/UnrealBloomPass.js';
 
-			var scene, camera, controls, pointLight, stats;
-			var composer, renderer, mixer;
+			let camera, stats;
+			let composer, renderer, mixer, clock;
 
-			var params = {
+			const params = {
 				exposure: 1,
 				bloomStrength: 1.5,
 				bloomThreshold: 0,
 				bloomRadius: 0
 			};
 
-			var clock = new THREE.Clock();
-			var container = document.getElementById( 'container' );
+			init();
 
-			stats = new Stats();
-			container.appendChild( stats.dom );
+			function init() {
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.toneMapping = THREE.ReinhardToneMapping;
-			container.appendChild( renderer.domElement );
+				const container = document.getElementById( 'container' );
 
-			scene = new THREE.Scene();
+				stats = new Stats();
+				container.appendChild( stats.dom );
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
-			camera.position.set( - 5, 2.5, - 3.5 );
-			scene.add( camera );
+				clock = new THREE.Clock();
 
-			controls = new OrbitControls( camera, renderer.domElement );
-			controls.maxPolarAngle = Math.PI * 0.5;
-			controls.minDistance = 1;
-			controls.maxDistance = 10;
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.toneMapping = THREE.ReinhardToneMapping;
+				container.appendChild( renderer.domElement );
 
-			scene.add( new THREE.AmbientLight( 0x404040 ) );
+				const scene = new THREE.Scene();
 
-			pointLight = new THREE.PointLight( 0xffffff, 1 );
-			camera.add( pointLight );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+				camera.position.set( - 5, 2.5, - 3.5 );
+				scene.add( camera );
 
-			var renderScene = new RenderPass( scene, camera );
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.maxPolarAngle = Math.PI * 0.5;
+				controls.minDistance = 1;
+				controls.maxDistance = 10;
 
-			var bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
-			bloomPass.threshold = params.bloomThreshold;
-			bloomPass.strength = params.bloomStrength;
-			bloomPass.radius = params.bloomRadius;
+				scene.add( new THREE.AmbientLight( 0x404040 ) );
 
-			composer = new EffectComposer( renderer );
-			composer.addPass( renderScene );
-			composer.addPass( bloomPass );
+				const pointLight = new THREE.PointLight( 0xffffff, 1 );
+				camera.add( pointLight );
 
-			new GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {
+				const renderScene = new RenderPass( scene, camera );
 
-				var model = gltf.scene;
+				const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
+				bloomPass.threshold = params.bloomThreshold;
+				bloomPass.strength = params.bloomStrength;
+				bloomPass.radius = params.bloomRadius;
 
-				scene.add( model );
+				composer = new EffectComposer( renderer );
+				composer.addPass( renderScene );
+				composer.addPass( bloomPass );
 
-				mixer = new THREE.AnimationMixer( model );
-				var clip = gltf.animations[ 0 ];
-				mixer.clipAction( clip.optimize() ).play();
+				new GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {
 
-				animate();
+					const model = gltf.scene;
 
-			} );
+					scene.add( model );
 
-			var gui = new GUI();
+					mixer = new THREE.AnimationMixer( model );
+					const clip = gltf.animations[ 0 ];
+					mixer.clipAction( clip.optimize() ).play();
 
-			gui.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
+					animate();
 
-				renderer.toneMappingExposure = Math.pow( value, 4.0 );
+				} );
 
-			} );
+				const gui = new GUI();
 
-			gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
+				gui.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
 
-				bloomPass.threshold = Number( value );
+					renderer.toneMappingExposure = Math.pow( value, 4.0 );
 
-			} );
+				} );
 
-			gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {
+				gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
 
-				bloomPass.strength = Number( value );
+					bloomPass.threshold = Number( value );
 
-			} );
+				} );
 
-			gui.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {
+				gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {
 
-				bloomPass.radius = Number( value );
+					bloomPass.strength = Number( value );
 
-			} );
+				} );
 
-			window.onresize = function () {
+				gui.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+					bloomPass.radius = Number( value );
+
+				} );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -137,8 +146,7 @@
 				renderer.setSize( width, height );
 				composer.setSize( width, height );
 
-			};
-
+			}
 
 			function animate() {
 

examples/webgl_postprocessing_unreal_bloom_selective.html

@@ -53,15 +53,12 @@
 			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
 			import { UnrealBloomPass } from './jsm/postprocessing/UnrealBloomPass.js';
 
-			var scene, camera, controls;
-			var renderer;
+			const ENTIRE_SCENE = 0, BLOOM_SCENE = 1;
 
-			var ENTIRE_SCENE = 0, BLOOM_SCENE = 1;
-
-			var bloomLayer = new THREE.Layers();
+			const bloomLayer = new THREE.Layers();
 			bloomLayer.set( BLOOM_SCENE );
 
-			var params = {
+			const params = {
 				exposure: 1,
 				bloomStrength: 5,
 				bloomThreshold: 0,
@@ -69,22 +66,22 @@
 				scene: "Scene with Glow"
 			};
 
-			var darkMaterial = new THREE.MeshBasicMaterial( { color: "black" } );
-			var materials = {};
+			const darkMaterial = new THREE.MeshBasicMaterial( { color: "black" } );
+			const materials = {};
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.toneMapping = THREE.ReinhardToneMapping;
 			document.body.appendChild( renderer.domElement );
 
-			scene = new THREE.Scene();
+			const scene = new THREE.Scene();
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
+			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
 			camera.position.set( 0, 0, 20 );
 			camera.lookAt( 0, 0, 0 );
 
-			controls = new OrbitControls( camera, renderer.domElement );
+			const controls = new OrbitControls( camera, renderer.domElement );
 			controls.maxPolarAngle = Math.PI * 0.5;
 			controls.minDistance = 1;
 			controls.maxDistance = 100;
@@ -92,19 +89,19 @@
 
 			scene.add( new THREE.AmbientLight( 0x404040 ) );
 
-			var renderScene = new RenderPass( scene, camera );
+			const renderScene = new RenderPass( scene, camera );
 
-			var bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
+			const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
 			bloomPass.threshold = params.bloomThreshold;
 			bloomPass.strength = params.bloomStrength;
 			bloomPass.radius = params.bloomRadius;
 
-			var bloomComposer = new EffectComposer( renderer );
+			const bloomComposer = new EffectComposer( renderer );
 			bloomComposer.renderToScreen = false;
 			bloomComposer.addPass( renderScene );
 			bloomComposer.addPass( bloomPass );
 
-			var finalPass = new ShaderPass(
+			const finalPass = new ShaderPass(
 				new THREE.ShaderMaterial( {
 					uniforms: {
 						baseTexture: { value: null },
@@ -117,17 +114,17 @@
 			);
 			finalPass.needsSwap = true;
 
-			var finalComposer = new EffectComposer( renderer );
+			const finalComposer = new EffectComposer( renderer );
 			finalComposer.addPass( renderScene );
 			finalComposer.addPass( finalPass );
 
-			var raycaster = new THREE.Raycaster();
+			const raycaster = new THREE.Raycaster();
 
-			var mouse = new THREE.Vector2();
+			const mouse = new THREE.Vector2();
 
 			window.addEventListener( 'click', onDocumentMouseClick, false );
 
-			var gui = new GUI();
+			const gui = new GUI();
 
 			gui.add( params, 'scene', [ 'Scene with Glow', 'Glow only', 'Scene only' ] ).onChange( function ( value ) {
 
@@ -149,7 +146,7 @@
 
 			} );
 
-			var folder = gui.addFolder( 'Bloom Parameters' );
+			const folder = gui.addFolder( 'Bloom Parameters' );
 
 			folder.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
 
@@ -189,10 +186,10 @@
 				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
 				raycaster.setFromCamera( mouse, camera );
-				var intersects = raycaster.intersectObjects( scene.children );
+				const intersects = raycaster.intersectObjects( scene.children );
 				if ( intersects.length > 0 ) {
 
-					var object = intersects[ 0 ].object;
+					const object = intersects[ 0 ].object;
 					object.layers.toggle( BLOOM_SCENE );
 					render();
 
@@ -202,8 +199,8 @@
 
 			window.onresize = function () {
 
-				var width = window.innerWidth;
-				var height = window.innerHeight;
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
 				camera.aspect = width / height;
 				camera.updateProjectionMatrix();
@@ -222,15 +219,15 @@
 				scene.traverse( disposeMaterial );
 				scene.children.length = 0;
 
-				var geometry = new THREE.IcosahedronBufferGeometry( 1, 15 );
+				const geometry = new THREE.IcosahedronBufferGeometry( 1, 15 );
 
-				for ( var i = 0; i < 50; i ++ ) {
+				for ( let i = 0; i < 50; i ++ ) {
 
-					var color = new THREE.Color();
+					const color = new THREE.Color();
 					color.setHSL( Math.random(), 0.7, Math.random() * 0.2 + 0.05 );
 
-					var material = new THREE.MeshBasicMaterial( { color: color } );
-					var sphere = new THREE.Mesh( geometry, material );
+					const material = new THREE.MeshBasicMaterial( { color: color } );
+					const sphere = new THREE.Mesh( geometry, material );
 					sphere.position.x = Math.random() * 10 - 5;
 					sphere.position.y = Math.random() * 10 - 5;
 					sphere.position.z = Math.random() * 10 - 5;

examples/webgl_raycast_sprite.html

@@ -24,8 +24,8 @@
 
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-		var renderer, scene, camera;
-		var controls, group;
+		let renderer, scene, camera;
+		let controls, group;
 
 		init();
 		animate();
@@ -55,30 +55,30 @@
 
 			// add sprites
 
-			var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );
-			sprite.position.set( 6, 5, 5 );
-			sprite.scale.set( 2, 5, 1 );
-			group.add( sprite );
+			const sprite1 = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );
+			sprite1.position.set( 6, 5, 5 );
+			sprite1.scale.set( 2, 5, 1 );
+			group.add( sprite1 );
 
-			var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f', sizeAttenuation: false } ) );
-			sprite.material.rotation = Math.PI / 3 * 4;
-			sprite.position.set( 8, - 2, 2 );
-			sprite.center.set( 0.5, 0 );
-			sprite.scale.set( .1, .5, .1 );
-			group.add( sprite );
+			const sprite2 = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f', sizeAttenuation: false } ) );
+			sprite2.material.rotation = Math.PI / 3 * 4;
+			sprite2.position.set( 8, - 2, 2 );
+			sprite2.center.set( 0.5, 0 );
+			sprite2.scale.set( .1, .5, .1 );
+			group.add( sprite2 );
 
-			var group2 = new THREE.Object3D();
+			const group2 = new THREE.Object3D();
 			group2.scale.set( 1, 2, 1 );
 			group2.position.set( - 5, 0, 0 );
 			group2.rotation.set( Math.PI / 2, 0, 0 );
 			group.add( group2 );
 
-			var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );
-			sprite.position.set( 0, 2, 5 );
-			sprite.scale.set( 10, 2, 3 );
-			sprite.center.set( - 0.1, 0 );
-			sprite.material.rotation = Math.PI / 3;
-			group2.add( sprite );
+			const sprite3 = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );
+			sprite3.position.set( 0, 2, 5 );
+			sprite3.scale.set( 10, 2, 3 );
+			sprite3.center.set( - 0.1, 0 );
+			sprite3.material.rotation = Math.PI / 3;
+			group2.add( sprite3 );
 
 			window.addEventListener( 'resize', onWindowResize, false );
 			window.addEventListener( "mousemove", onDocumentMouseMove, false );
@@ -101,7 +101,7 @@
 
 		}
 
-		var selectedObject = null;
+		let selectedObject = null;
 
 		function onDocumentMouseMove( event ) {
 
@@ -113,10 +113,11 @@
 
 			}
 
-			var intersects = getIntersects( event.layerX, event.layerY );
+			const intersects = getIntersects( event.layerX, event.layerY );
+
 			if ( intersects.length > 0 ) {
 
-				var res = intersects.filter( function ( res ) {
+				const res = intersects.filter( function ( res ) {
 
 					return res && res.object;
 
@@ -133,8 +134,8 @@
 
 		}
 
-		var raycaster = new THREE.Raycaster();
-		var mouseVector = new THREE.Vector3();
+		const raycaster = new THREE.Raycaster();
+		const mouseVector = new THREE.Vector3();
 
 		function getIntersects( x, y ) {
 

examples/webgl_raycast_texture.html

@@ -66,7 +66,7 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var CanvasTexture = function ( parentTexture ) {
+			function CanvasTexture( parentTexture ) {
 
 				this._canvas = document.createElement( "canvas" );
 				this._canvas.width = this._canvas.height = 1024;
@@ -79,7 +79,7 @@
 
 				}
 
-				var that = this;
+				const that = this;
 				this._background = document.createElement( "img" );
 				this._background.addEventListener( "load", function () {
 
@@ -99,7 +99,7 @@
 
 				this._draw();
 
-			};
+			}
 
 
 			CanvasTexture.prototype = {
@@ -166,7 +166,7 @@
 
 					this._context2D.stroke();
 
-					for ( var i = 0; i < this._parentTexture.length; i ++ ) {
+					for ( let i = 0; i < this._parentTexture.length; i ++ ) {
 
 						this._parentTexture[ i ].needsUpdate = true;
 
@@ -176,19 +176,19 @@
 
 			};
 
-			var width = window.innerWidth;
-			var height = window.innerHeight;
+			const width = window.innerWidth;
+			const height = window.innerHeight;
 
-			var canvas;
-			var planeTexture, cubeTexture, circleTexture;
+			let canvas;
+			let planeTexture, cubeTexture, circleTexture;
 
-			var container;
+			let container;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var raycaster = new THREE.Raycaster();
-			var mouse = new THREE.Vector2();
-			var onClickPosition = new THREE.Vector2();
+			const raycaster = new THREE.Raycaster();
+			const mouse = new THREE.Vector2();
+			const onClickPosition = new THREE.Vector2();
 
 			init();
 			render();
@@ -214,53 +214,61 @@
 				// A cube, in the middle.
 				cubeTexture = new THREE.Texture( undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping );
 				canvas = new CanvasTexture( cubeTexture );
-				var cubeMaterial = new THREE.MeshBasicMaterial( { map: cubeTexture } );
-				var cubeGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
-				var uvs = cubeGeometry.attributes.uv.array;
+				const cubeMaterial = new THREE.MeshBasicMaterial( { map: cubeTexture } );
+				const cubeGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				let uvs = cubeGeometry.attributes.uv.array;
 				// Set a specific texture mapping.
-				for ( var i = 0; i < uvs.length; i ++ ) {
+				for ( let i = 0; i < uvs.length; i ++ ) {
 
 					uvs[ i ] *= 2;
 
 				}
 
-				var cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
+				const cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
 				cube.position.x = 4;
 				cube.position.y = - 5;
 				cube.position.z = 0;
 				scene.add( cube );
 
-				// A plane on the left.
+				// A plane on the left
+
 				planeTexture = new THREE.Texture( undefined, THREE.UVMapping, THREE.MirroredRepeatWrapping, THREE.MirroredRepeatWrapping );
 				canvas.addParent( planeTexture );
-				var planeMaterial = new THREE.MeshBasicMaterial( { map: planeTexture } );
-				var planeGeometry = new THREE.PlaneBufferGeometry( 25, 25, 1, 1 );
-				var uvs = planeGeometry.attributes.uv.array;
+				const planeMaterial = new THREE.MeshBasicMaterial( { map: planeTexture } );
+				const planeGeometry = new THREE.PlaneBufferGeometry( 25, 25, 1, 1 );
+				uvs = planeGeometry.attributes.uv.array;
+
 				// Set a specific texture mapping.
-				for ( var i = 0; i < uvs.length; i ++ ) {
+
+				for ( let i = 0; i < uvs.length; i ++ ) {
 
 					uvs[ i ] *= 2;
 
 				}
-				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+
+				const plane = new THREE.Mesh( planeGeometry, planeMaterial );
 				plane.position.x = - 16;
 				plane.position.y = - 5;
 				plane.position.z = 0;
 				scene.add( plane );
 
 				// A circle on the right.
+
 				circleTexture = new THREE.Texture( undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping );
 				canvas.addParent( circleTexture );
-				var circleMaterial = new THREE.MeshBasicMaterial( { map: circleTexture } );
-				var circleGeometry = new THREE.CircleBufferGeometry( 25, 40, 0, Math.PI * 2 );
-				var uvs = circleGeometry.attributes.uv.array;
+				const circleMaterial = new THREE.MeshBasicMaterial( { map: circleTexture } );
+				const circleGeometry = new THREE.CircleBufferGeometry( 25, 40, 0, Math.PI * 2 );
+				uvs = circleGeometry.attributes.uv.array;
+
 				// Set a specific texture mapping.
-				for ( var i = 0; i < uvs.length; i ++ ) {
+
+				for ( let i = 0; i < uvs.length; i ++ ) {
 
 					uvs[ i ] = ( uvs[ i ] - 0.25 ) * 2;
 
 				}
-				var circle = new THREE.Mesh( circleGeometry, circleMaterial );
+
+				const circle = new THREE.Mesh( circleGeometry, circleMaterial );
 				circle.position.x = 24;
 				circle.position.y = - 5;
 				circle.position.z = 0;
@@ -292,14 +300,14 @@
 
 				evt.preventDefault();
 
-				var array = getMousePosition( container, evt.clientX, evt.clientY );
+				const array = getMousePosition( container, evt.clientX, evt.clientY );
 				onClickPosition.fromArray( array );
 
-				var intersects = getIntersects( onClickPosition, scene.children );
+				const intersects = getIntersects( onClickPosition, scene.children );
 
 				if ( intersects.length > 0 && intersects[ 0 ].uv ) {
 
-					var uv = intersects[ 0 ].uv;
+					const uv = intersects[ 0 ].uv;
 					intersects[ 0 ].object.material.map.transformUv( uv );
 					canvas.setCrossPosition( uv.x, uv.y );
 
@@ -307,14 +315,14 @@
 
 			}
 
-			var getMousePosition = function ( dom, x, y ) {
+			function getMousePosition( dom, x, y ) {
 
-				var rect = dom.getBoundingClientRect();
+				const rect = dom.getBoundingClientRect();
 				return [ ( x - rect.left ) / rect.width, ( y - rect.top ) / rect.height ];
 
-			};
+			}
 
-			var getIntersects = function ( point, objects ) {
+			function getIntersects( point, objects ) {
 
 				mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
 
@@ -322,7 +330,7 @@
 
 				return raycaster.intersectObjects( objects );
 
-			};
+			}
 
 			function render() {
 

examples/webgl_raymarching_reflect.html

@@ -245,13 +245,13 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var dolly, camera, scene, renderer;
-			var geometry, material, mesh;
-			var stats, clock;
+			let dolly, camera, scene, renderer;
+			let geometry, material, mesh;
+			let stats, clock;
 
-			var canvas = document.querySelector( '#canvas' );
+			const canvas = document.querySelector( '#canvas' );
 
-			var config = {
+			const config = {
 				saveImage: function () {
 
 					renderer.render( scene, camera );
@@ -299,11 +299,11 @@
 				scene.add( mesh );
 
 				// Controls
-				var controls = new OrbitControls( camera, canvas );
+				const controls = new OrbitControls( camera, canvas );
 				controls.enableZoom = false;
 
 				// GUI
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( config, 'saveImage' ).name( 'Save Image' );
 				gui.add( config, 'resolution', [ '256', '512', '800', 'full' ] ).name( 'Resolution' ).onChange( onWindowResize );
 
@@ -336,7 +336,7 @@
 
 				stats.begin();
 
-				var elapsedTime = clock.getElapsedTime();
+				const elapsedTime = clock.getElapsedTime();
 
 				dolly.position.z = - elapsedTime;
 

examples/webgl_read_float_buffer.html

@@ -64,19 +64,19 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var cameraRTT, sceneRTT, sceneScreen, renderer, zmesh1, zmesh2;
+			let cameraRTT, sceneRTT, sceneScreen, renderer, zmesh1, zmesh2;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			const windowHalfX = window.innerWidth / 2;
+			const windowHalfY = window.innerHeight / 2;
 
-			var rtTexture, material, quad;
+			let rtTexture, material, quad;
 
-			var delta = 0.01;
-			var valueNode;
+			let delta = 0.01;
+			let valueNode;
 
 			init();
 			animate();
@@ -93,7 +93,7 @@
 				sceneRTT = new THREE.Scene();
 				sceneScreen = new THREE.Scene();
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				let light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 ).normalize();
 				sceneRTT.add( light );
 
@@ -111,7 +111,7 @@
 
 				} );
 
-				var materialScreen = new THREE.ShaderMaterial( {
+				const materialScreen = new THREE.ShaderMaterial( {
 
 					uniforms: { "tDiffuse": { value: rtTexture.texture } },
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -121,16 +121,16 @@
 
 				} );
 
-				var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+				const plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
 
 				quad = new THREE.Mesh( plane, material );
 				quad.position.z = - 100;
 				sceneRTT.add( quad );
 
-				var geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
+				const geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
 
-				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
-				var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
+				const mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
+				const mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
 
 				zmesh1 = new THREE.Mesh( geometry, mat1 );
 				zmesh1.position.set( 0, 0, 100 );
@@ -182,7 +182,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.0015;
+				const time = Date.now() * 0.0015;
 
 				if ( zmesh1 && zmesh2 ) {
 
@@ -212,7 +212,7 @@
 				renderer.setRenderTarget( null );
 				renderer.render( sceneScreen, cameraRTT );
 
-				var read = new Float32Array( 4 );
+				const read = new Float32Array( 4 );
 				renderer.readRenderTargetPixels( rtTexture, windowHalfX + mouseX, windowHalfY - mouseY, 1, 1, read );
 
 				valueNode.innerHTML = 'r:' + read[ 0 ] + '<br/>g:' + read[ 1 ] + '<br/>b:' + read[ 2 ];

examples/webgl_refraction.html

@@ -21,7 +21,7 @@
 			import { Refractor } from './jsm/objects/Refractor.js';
 			import { WaterRefractionShader } from './jsm/shaders/WaterRefractionShader.js';
 
-			var scene, camera, clock, renderer, refractor;
+			let scene, camera, clock, renderer, refractor;
 
 			init();
 
@@ -43,15 +43,15 @@
 
 				// mesh
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
-				var material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
+				const geometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
+				const material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				// refractor
 
-				var refractorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
+				const refractorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
 
 				refractor = new Refractor( refractorGeometry, {
 					color: 0x999999,
@@ -66,7 +66,7 @@
 
 				// load dudv map for distortion effect
 
-				var dudvMap = new THREE.TextureLoader().load( 'textures/waterdudv.jpg', function () {
+				const dudvMap = new THREE.TextureLoader().load( 'textures/waterdudv.jpg', function () {
 
 					animate();
 
@@ -77,10 +77,10 @@
 
 				// light
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -94,7 +94,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 10;
 				controls.maxDistance = 100;
 

examples/webgl_rtt.html

@@ -61,18 +61,18 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let container, stats;
 
-			var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
+			let cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			const windowHalfX = window.innerWidth / 2;
+			const windowHalfY = window.innerHeight / 2;
 
-			var rtTexture, material, quad;
+			let rtTexture, material, quad;
 
-			var delta = 0.01;
+			let delta = 0.01;
 
 			init();
 			animate();
@@ -93,7 +93,7 @@
 				sceneRTT = new THREE.Scene();
 				sceneScreen = new THREE.Scene();
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				let light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 ).normalize();
 				sceneRTT.add( light );
 
@@ -111,7 +111,7 @@
 
 				} );
 
-				var materialScreen = new THREE.ShaderMaterial( {
+				const materialScreen = new THREE.ShaderMaterial( {
 
 					uniforms: { tDiffuse: { value: rtTexture.texture } },
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -121,23 +121,23 @@
 
 				} );
 
-				var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+				const plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
 
 				quad = new THREE.Mesh( plane, material );
 				quad.position.z = - 100;
 				sceneRTT.add( quad );
 
-				var geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
+				const torusGeometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
 
-				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
-				var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
+				const mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
+				const mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
 
-				zmesh1 = new THREE.Mesh( geometry, mat1 );
+				zmesh1 = new THREE.Mesh( torusGeometry, mat1 );
 				zmesh1.position.set( 0, 0, 100 );
 				zmesh1.scale.set( 1.5, 1.5, 1.5 );
 				sceneRTT.add( zmesh1 );
 
-				zmesh2 = new THREE.Mesh( geometry, mat2 );
+				zmesh2 = new THREE.Mesh( torusGeometry, mat2 );
 				zmesh2.position.set( 0, 150, 100 );
 				zmesh2.scale.set( 0.75, 0.75, 0.75 );
 				sceneRTT.add( zmesh2 );
@@ -146,15 +146,15 @@
 				quad.position.z = - 100;
 				sceneScreen.add( quad );
 
-				var n = 5,
+				const n = 5,
 					geometry = new THREE.SphereBufferGeometry( 10, 64, 32 ),
 					material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: rtTexture.texture } );
 
-				for ( var j = 0; j < n; j ++ ) {
+				for ( let j = 0; j < n; j ++ ) {
 
-					for ( var i = 0; i < n; i ++ ) {
+					for ( let i = 0; i < n; i ++ ) {
 
-						var mesh = new THREE.Mesh( geometry, material2 );
+						const mesh = new THREE.Mesh( geometry, material2 );
 
 						mesh.position.x = ( i - ( n - 1 ) / 2 ) * 20;
 						mesh.position.y = ( j - ( n - 1 ) / 2 ) * 20;
@@ -202,7 +202,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.0015;
+				const time = Date.now() * 0.0015;
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;

examples/webgl_sandbox.html

@@ -18,16 +18,16 @@
 
 			import { BasicShader } from './jsm/shaders/BasicShader.js';
 
-			var statsEnabled = true;
+			const statsEnabled = true;
 
-			var container, stats;
+			let container, stats;
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var mouseX = 0, mouseY = 0;
+			let mouseX = 0, mouseY = 0;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
 			init();
 			animate();
@@ -43,18 +43,18 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 20000 );
 
-				var light = new THREE.PointLight( 0xffffff );
+				const light = new THREE.PointLight( 0xffffff );
 				scene.add( light );
 
-				var shader = BasicShader;
-				var uniforms = shader.uniforms;
-				var vertexShader = shader.vertexShader;
-				var fragmentShader = shader.fragmentShader;
+				const shader = BasicShader;
+				const uniforms = shader.uniforms;
+				const vertexShader = shader.vertexShader;
+				const fragmentShader = shader.fragmentShader;
 
-				var texture1 = new THREE.CanvasTexture( generateTexture( 0, 0.5, 1 ), THREE.UVMapping );
-				var texture2 = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
+				const texture1 = new THREE.CanvasTexture( generateTexture( 0, 0.5, 1 ), THREE.UVMapping );
+				const texture2 = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
 
-				var materials = [
+				const materials = [
 
 					new THREE.MeshNormalMaterial(),
 					new THREE.MeshDepthMaterial(),
@@ -70,19 +70,19 @@
 
 				];
 
-				var geometry = new THREE.SphereBufferGeometry( 50, 32, 16 );
+				const geometry = new THREE.SphereBufferGeometry( 50, 32, 16 );
 
-				for ( var i = 0; i < 5000; i ++ ) {
+				for ( let i = 0; i < 5000; i ++ ) {
 
 					// random order
-					//var index = Math.floor( Math.random() * materials.length );
+					//let index = Math.floor( Math.random() * materials.length );
 
 					// sort by material / geometry
-					var index = Math.floor( ( i / 5000 ) * materials.length );
+					const index = Math.floor( ( i / 5000 ) * materials.length );
 
-					var material = materials[ index ];
+					const material = materials[ index ];
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
@@ -131,16 +131,16 @@
 
 			function generateTexture( r, g, b ) {
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 				canvas.width = 256;
 				canvas.height = 256;
 
-				var context = canvas.getContext( '2d' );
-				var image = context.getImageData( 0, 0, 256, 256 );
+				const context = canvas.getContext( '2d' );
+				const image = context.getImageData( 0, 0, 256, 256 );
 
-				var x = 0, y = 0, p;
+				let x = 0, y = 0, p;
 
-				for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
+				for ( let i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
 
 					x = j % 256;
 					y = x == 0 ? y + 1 : y;

examples/webgl_shader.html

@@ -67,30 +67,28 @@
 
 			import * as THREE from '../build/three.module.js';
 
-			var container;
+			let camera, scene, renderer;
 
-			var camera, scene, renderer;
-
-			var uniforms;
+			let uniforms;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
+				const geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
 				uniforms = {
-					"time": { value: 1.0 }
+					time: { value: 1.0 }
 				};
 
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -98,7 +96,7 @@
 
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer();
@@ -123,7 +121,7 @@
 
 				requestAnimationFrame( animate );
 
-				uniforms[ "time" ].value = performance.now() / 1000;
+				uniforms[ 'time' ].value = performance.now() / 1000;
 
 				renderer.render( scene, camera );
 

examples/webgl_shader2.html

@@ -137,18 +137,18 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var container, stats;
+			let stats;
 
-			var camera, scene, renderer, clock;
+			let camera, scene, renderer, clock;
 
-			var uniforms1, uniforms2;
+			let uniforms1, uniforms2;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 4;
@@ -157,7 +157,7 @@
 
 				clock = new THREE.Clock();
 
-				var geometry = new THREE.BoxBufferGeometry( 0.75, 0.75, 0.75 );
+				const geometry = new THREE.BoxBufferGeometry( 0.75, 0.75, 0.75 );
 
 				uniforms1 = {
 					"time": { value: 1.0 }
@@ -170,16 +170,16 @@
 
 				uniforms2[ "colorTexture" ].value.wrapS = uniforms2[ "colorTexture" ].value.wrapT = THREE.RepeatWrapping;
 
-				var params = [
+				const params = [
 					[ 'fragment_shader1', uniforms1 ],
 					[ 'fragment_shader2', uniforms2 ],
 					[ 'fragment_shader3', uniforms1 ],
 					[ 'fragment_shader4', uniforms1 ]
 				];
 
-				for ( var i = 0; i < params.length; i ++ ) {
+				for ( let i = 0; i < params.length; i ++ ) {
 
-					var material = new THREE.ShaderMaterial( {
+					const material = new THREE.ShaderMaterial( {
 
 						uniforms: params[ i ][ 1 ],
 						vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -187,7 +187,7 @@
 
 					} );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = i - ( params.length - 1 ) / 2;
 					mesh.position.y = i % 2 - 0.5;
 					scene.add( mesh );
@@ -229,14 +229,14 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				uniforms1[ "time" ].value += delta * 5;
 				uniforms2[ "time" ].value = clock.elapsedTime;
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
+				for ( let i = 0; i < scene.children.length; i ++ ) {
 
-					var object = scene.children[ i ];
+					const object = scene.children[ i ];
 
 					object.rotation.y += delta * 0.5 * ( i % 2 ? 1 : - 1 );
 					object.rotation.x += delta * 0.5 * ( i % 2 ? - 1 : 1 );

examples/webgl_shader_lava.html

@@ -83,27 +83,25 @@
 			import { FilmPass } from './jsm/postprocessing/FilmPass.js';
 			import { BloomPass } from './jsm/postprocessing/BloomPass.js';
 
-			var container;
+			let camera, renderer, composer, clock;
 
-			var camera, scene, renderer, composer, clock;
-
-			var uniforms, mesh;
+			let uniforms, mesh;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 4;
 
-				scene = new THREE.Scene();
+				const scene = new THREE.Scene();
 
 				clock = new THREE.Clock();
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
 				uniforms = {
 
@@ -119,9 +117,9 @@
 				uniforms[ "texture1" ].value.wrapS = uniforms[ "texture1" ].value.wrapT = THREE.RepeatWrapping;
 				uniforms[ "texture2" ].value.wrapS = uniforms[ "texture2" ].value.wrapT = THREE.RepeatWrapping;
 
-				var size = 0.65;
+				const size = 0.65;
 
-				var material = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -143,9 +141,9 @@
 
 				//
 
-				var renderModel = new RenderPass( scene, camera );
-				var effectBloom = new BloomPass( 1.25 );
-				var effectFilm = new FilmPass( 0.35, 0.95, 2048, false );
+				const renderModel = new RenderPass( scene, camera );
+				const effectBloom = new BloomPass( 1.25 );
+				const effectFilm = new FilmPass( 0.35, 0.95, 2048, false );
 
 				composer = new EffectComposer( renderer );
 
@@ -183,9 +181,9 @@
 
 			function render() {
 
-				var delta = 5 * clock.getDelta();
+				const delta = 5 * clock.getDelta();
 
-				uniforms[ "time" ].value += 0.2 * delta;
+				uniforms[ 'time' ].value += 0.2 * delta;
 
 				mesh.rotation.y += 0.0125 * delta;
 				mesh.rotation.x += 0.05 * delta;

examples/webgl_shaders_ocean.html

@@ -24,9 +24,9 @@
 			import { Water } from './jsm/objects/Water.js';
 			import { Sky } from './jsm/objects/Sky.js';
 
-			var container, stats;
-			var camera, scene, renderer;
-			var controls, water, sun, mesh;
+			let container, stats;
+			let camera, scene, renderer;
+			let controls, water, sun, mesh;
 
 			init();
 			animate();
@@ -55,7 +55,7 @@
 
 				// Water
 
-				var waterGeometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
+				const waterGeometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
 
 				water = new Water(
 					waterGeometry,
@@ -82,28 +82,28 @@
 
 				// Skybox
 
-				var sky = new Sky();
+				const sky = new Sky();
 				sky.scale.setScalar( 10000 );
 				scene.add( sky );
 
-				var uniforms = sky.material.uniforms;
+				const skyUniforms = sky.material.uniforms;
 
-				uniforms[ 'turbidity' ].value = 10;
-				uniforms[ 'rayleigh' ].value = 2;
-				uniforms[ 'mieCoefficient' ].value = 0.005;
-				uniforms[ 'mieDirectionalG' ].value = 0.8;
+				skyUniforms[ 'turbidity' ].value = 10;
+				skyUniforms[ 'rayleigh' ].value = 2;
+				skyUniforms[ 'mieCoefficient' ].value = 0.005;
+				skyUniforms[ 'mieDirectionalG' ].value = 0.8;
 
-				var parameters = {
+				const parameters = {
 					inclination: 0.49,
 					azimuth: 0.205
 				};
 
-				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 				function updateSun() {
 
-					var theta = Math.PI * ( parameters.inclination - 0.5 );
-					var phi = 2 * Math.PI * ( parameters.azimuth - 0.5 );
+					const theta = Math.PI * ( parameters.inclination - 0.5 );
+					const phi = 2 * Math.PI * ( parameters.azimuth - 0.5 );
 
 					sun.x = Math.cos( phi );
 					sun.y = Math.sin( phi ) * Math.sin( theta );
@@ -120,8 +120,8 @@
 
 				//
 
-				var geometry = new THREE.BoxBufferGeometry( 30, 30, 30 );
-				var material = new THREE.MeshStandardMaterial( { roughness: 0 } );
+				const geometry = new THREE.BoxBufferGeometry( 30, 30, 30 );
+				const material = new THREE.MeshStandardMaterial( { roughness: 0 } );
 
 				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
@@ -142,20 +142,20 @@
 
 				// GUI
 
-				var gui = new GUI();
+				const gui = new GUI();
 
-				var folder = gui.addFolder( 'Sky' );
-				folder.add( parameters, 'inclination', 0, 0.5, 0.0001 ).onChange( updateSun );
-				folder.add( parameters, 'azimuth', 0, 1, 0.0001 ).onChange( updateSun );
-				folder.open();
+				const folderSky = gui.addFolder( 'Sky' );
+				folderSky.add( parameters, 'inclination', 0, 0.5, 0.0001 ).onChange( updateSun );
+				folderSky.add( parameters, 'azimuth', 0, 1, 0.0001 ).onChange( updateSun );
+				folderSky.open();
 
-				var uniforms = water.material.uniforms;
+				const waterUniforms = water.material.uniforms;
 
-				var folder = gui.addFolder( 'Water' );
-				folder.add( uniforms.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
-				folder.add( uniforms.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
-				folder.add( uniforms.alpha, 'value', 0.9, 1, .001 ).name( 'alpha' );
-				folder.open();
+				const folderWater = gui.addFolder( 'Water' );
+				folderWater.add( waterUniforms.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
+				folderWater.add( waterUniforms.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
+				folderWater.add( waterUniforms.alpha, 'value', 0.9, 1, .001 ).name( 'alpha' );
+				folderWater.open();
 
 				//
 
@@ -182,7 +182,7 @@
 
 			function render() {
 
-				var time = performance.now() * 0.001;
+				const time = performance.now() * 0.001;
 
 				mesh.position.y = Math.sin( time ) * 20 + 5;
 				mesh.rotation.x = time * 0.5;

examples/webgl_shaders_ocean2.html

@@ -20,12 +20,12 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Ocean } from './jsm/misc/Ocean.js';
 
-			var stats = new Stats();
+			const stats = new Stats();
 			document.body.appendChild( stats.dom );
 
-			var lastTime = ( new Date() ).getTime();
+			let lastTime = ( new Date() ).getTime();
 
-			var DEMO = {
+			const DEMO = {
 				ms_Renderer: null,
 				ms_Camera: null,
 				ms_Scene: null,
@@ -53,11 +53,11 @@
 					this.ms_Controls.minPolarAngle = 0;
 					this.ms_Controls.maxPolarAngle = Math.PI * 0.495;
 
-					var gsize = 512;
-					var res = 1024;
-					var gres = res / 2;
-					var origx = - gsize / 2;
-					var origz = - gsize / 2;
+					const gsize = 512;
+					const res = 1024;
+					const gres = res / 2;
+					const origx = - gsize / 2;
+					const origz = - gsize / 2;
 					this.ms_Ocean = new Ocean( this.ms_Renderer, this.ms_Camera, this.ms_Scene,
 						{
 							USE_HALF_FLOAT: false,
@@ -80,7 +80,7 @@
 					this.ms_Ocean.materialOcean.uniforms[ "u_cameraPosition" ] = { value: this.ms_Camera.position };
 					this.ms_Scene.add( this.ms_Ocean.oceanMesh );
 
-					var gui = new GUI();
+					const gui = new GUI();
 					gui.add( this.ms_Ocean, "size", 100, 5000 ).onChange( function ( v ) {
 
 						this.object.size = v;
@@ -147,7 +147,7 @@
 
 				Update: function () {
 
-					var currentTime = new Date().getTime();
+					const currentTime = new Date().getTime();
 					this.ms_Ocean.deltaTime = ( currentTime - lastTime ) / 1000 || 0.0;
 					lastTime = currentTime;
 					this.ms_Ocean.render( this.ms_Ocean.deltaTime );
@@ -193,13 +193,13 @@
 
 			DEMO.Resize( window.innerWidth, window.innerHeight );
 
-			var render = function () {
+			function render() {
 
 				requestAnimationFrame( render );
 				DEMO.Update();
 				stats.update();
 
-			};
+			}
 
 			render();
 

examples/webgl_shaders_sky.html

@@ -19,9 +19,9 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { Sky } from './jsm/objects/Sky.js';
 
-			var camera, controls, scene, renderer;
+			let camera, scene, renderer;
 
-			var sky, sun;
+			let sky, sun;
 
 			init();
 			render();
@@ -37,7 +37,7 @@
 
 				/// GUI
 
-				var effectController = {
+				const effectController = {
 					turbidity: 10,
 					rayleigh: 3,
 					mieCoefficient: 0.005,
@@ -49,14 +49,14 @@
 
 				function guiChanged() {
 
-					var uniforms = sky.material.uniforms;
+					const uniforms = sky.material.uniforms;
 					uniforms[ "turbidity" ].value = effectController.turbidity;
 					uniforms[ "rayleigh" ].value = effectController.rayleigh;
 					uniforms[ "mieCoefficient" ].value = effectController.mieCoefficient;
 					uniforms[ "mieDirectionalG" ].value = effectController.mieDirectionalG;
 
-					var theta = Math.PI * ( effectController.inclination - 0.5 );
-					var phi = 2 * Math.PI * ( effectController.azimuth - 0.5 );
+					const theta = Math.PI * ( effectController.inclination - 0.5 );
+					const phi = 2 * Math.PI * ( effectController.azimuth - 0.5 );
 
 					sun.x = Math.cos( phi );
 					sun.y = Math.sin( phi ) * Math.sin( theta );
@@ -69,7 +69,7 @@
 
 				}
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				gui.add( effectController, "turbidity", 0.0, 20.0, 0.1 ).onChange( guiChanged );
 				gui.add( effectController, "rayleigh", 0.0, 4, 0.001 ).onChange( guiChanged );
@@ -90,7 +90,7 @@
 
 				scene = new THREE.Scene();
 
-				var helper = new THREE.GridHelper( 10000, 2, 0xffffff, 0xffffff );
+				const helper = new THREE.GridHelper( 10000, 2, 0xffffff, 0xffffff );
 				scene.add( helper );
 
 				renderer = new THREE.WebGLRenderer();
@@ -101,7 +101,7 @@
 				renderer.toneMappingExposure = 0.5;
 				document.body.appendChild( renderer.domElement );
 
-				controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				//controls.maxPolarAngle = Math.PI / 2;
 				controls.enableZoom = false;

examples/webgl_shaders_tonemapping.html

@@ -49,24 +49,22 @@
 			import { BloomPass } from './jsm/postprocessing/BloomPass.js';
 			import { GammaCorrectionShader } from './jsm/shaders/GammaCorrectionShader.js';
 
-			var container;
+			let bloomPass, adaptToneMappingPass, ldrToneMappingPass, hdrToneMappingPass;
+			let params;
 
-			var bloomPass, adaptToneMappingPass, ldrToneMappingPass, hdrToneMappingPass;
-			var params;
+			let camera, scene, renderer, dynamicHdrEffectComposer, hdrEffectComposer, ldrEffectComposer;
+			let cameraCube, sceneCube;
+			let cameraBG, debugScene;
+			let adaptiveLuminanceMat, currentLuminanceMat;
 
-			var camera, scene, renderer, dynamicHdrEffectComposer, hdrEffectComposer, ldrEffectComposer;
-			var cameraCube, sceneCube;
-			var cameraBG, debugScene;
-			var adaptiveLuminanceMat, currentLuminanceMat;
+			let directionalLight;
 
-			var directionalLight;
+			let orbitControls;
 
-			var orbitControls;
+			let windowHalfX = window.innerWidth / 2;
+			let windowHalfY = window.innerHeight / 2;
 
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-			var windowThirdX = window.innerWidth / 3;
+			let windowThirdX = window.innerWidth / 3;
 
 			init();
 			animate();
@@ -85,7 +83,7 @@
 					adaptionRate: 2.0
 				};
 
-				container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				// CAMERAS
@@ -111,14 +109,14 @@
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0x050505 );
+				const ambient = new THREE.AmbientLight( 0x050505 );
 				scene.add( ambient );
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff, params.sunLight );
 				directionalLight.position.set( 2, 0, 10 ).normalize();
 				scene.add( directionalLight );
 
-				var atmoShader = {
+				const atmoShader = {
 					side: THREE.BackSide,
 					// blending: THREE.AdditiveBlending,
 					transparent: true,
@@ -181,14 +179,14 @@
 					].join( "\n" )
 				};
 
-				var earthAtmoMat = new THREE.ShaderMaterial( atmoShader );
+				const earthAtmoMat = new THREE.ShaderMaterial( atmoShader );
 
-				var earthMat = new THREE.MeshPhongMaterial( {
+				const earthMat = new THREE.MeshPhongMaterial( {
 					color: 0xffffff,
 					shininess: 200
 				} );
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 
 				textureLoader.load( 'textures/planets/earth_atmos_4096.jpg', function ( tex ) {
 
@@ -196,24 +194,24 @@
 					earthMat.map.encoding = THREE.sRGBEncoding;
 					earthMat.needsUpdate = true;
 
-	} );
+				} );
 				textureLoader.load( 'textures/planets/earth_specular_2048.jpg', function ( tex ) {
 
 					earthMat.specularMap = tex;
 					earthMat.specularMap.encoding = THREE.sRGBEncoding;
 					earthMat.needsUpdate = true;
 
-	} );
+				} );
 
-				// var earthNormal = textureLoader.load( 'textures/planets/earth-new-normal-2048.jpg', function( tex ) {
+				// let earthNormal = textureLoader.load( 'textures/planets/earth-new-normal-2048.jpg', function( tex ) {
 				// 	earthMat.normalMap = tex;
 				// 	earthMat.needsUpdate = true;
 				// } );
 
-				var earthLights = textureLoader.load( 'textures/planets/earth_lights_2048.png' );
+				const earthLights = textureLoader.load( 'textures/planets/earth_lights_2048.png' );
 				earthLights.encoding = THREE.sRGBEncoding;
 
-				var earthLightsMat = new THREE.MeshBasicMaterial( {
+				const earthLightsMat = new THREE.MeshBasicMaterial( {
 					color: 0xffffff,
 					blending: THREE.AdditiveBlending,
 					transparent: true,
@@ -222,10 +220,10 @@
 
 				} );
 
-				var clouds = textureLoader.load( 'textures/planets/earth_clouds_2048.png' );
+				const clouds = textureLoader.load( 'textures/planets/earth_clouds_2048.png' );
 				clouds.encoding = THREE.sRGBEncoding;
 
-				var earthCloudsMat = new THREE.MeshLambertMaterial( {
+				const earthCloudsMat = new THREE.MeshLambertMaterial( {
 					color: 0xffffff,
 					blending: THREE.NormalBlending,
 					transparent: true,
@@ -234,21 +232,21 @@
 				} );
 
 
-				var earthGeo = new THREE.SphereBufferGeometry( 600, 24, 24 );
-				var sphereMesh = new THREE.Mesh( earthGeo, earthMat );
+				const earthGeo = new THREE.SphereBufferGeometry( 600, 24, 24 );
+				const sphereMesh = new THREE.Mesh( earthGeo, earthMat );
 				scene.add( sphereMesh );
 
-				var sphereLightsMesh = new THREE.Mesh( earthGeo, earthLightsMat );
+				const sphereLightsMesh = new THREE.Mesh( earthGeo, earthLightsMat );
 				scene.add( sphereLightsMesh );
 
-				var sphereCloudsMesh = new THREE.Mesh( earthGeo, earthCloudsMat );
+				const sphereCloudsMesh = new THREE.Mesh( earthGeo, earthCloudsMat );
 				scene.add( sphereCloudsMesh );
 
-				var sphereAtmoMesh = new THREE.Mesh( earthGeo, earthAtmoMat );
+				const sphereAtmoMesh = new THREE.Mesh( earthGeo, earthAtmoMat );
 				sphereAtmoMesh.scale.set( 1.05, 1.05, 1.05 );
 				scene.add( sphereAtmoMesh );
 
-				var vBGShader = [
+				const vBGShader = [
 					// "attribute vec2 uv;",
 					"varying vec2 vUv;",
 					"void main() {",
@@ -258,7 +256,7 @@
 
 				].join( "\n" );
 
-				var pBGShader = [
+				const pBGShader = [
 
 					"uniform sampler2D map;",
 					"varying vec2 vUv;",
@@ -297,7 +295,7 @@
 					// blending: THREE.NoBlending
 				} );
 
-				var quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.1, 0.1 ), currentLuminanceMat );
+				let quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.1, 0.1 ), currentLuminanceMat );
 				quadBG.position.z = - 500;
 				quadBG.position.x = - window.innerWidth * 0.5 + window.innerWidth * 0.05;
 				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
@@ -309,12 +307,12 @@
 				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
 				debugScene.add( quadBG );
 
-				var r = "textures/cube/MilkyWay/";
-				var urls = [ r + "dark-s_px.jpg", r + "dark-s_nx.jpg",
+				const r = "textures/cube/MilkyWay/";
+				const urls = [ r + "dark-s_px.jpg", r + "dark-s_nx.jpg",
 							 r + "dark-s_py.jpg", r + "dark-s_ny.jpg",
 							 r + "dark-s_pz.jpg", r + "dark-s_nz.jpg" ];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				const textureCube = new THREE.CubeTextureLoader().load( urls );
 				textureCube.encoding = THREE.sRGBEncoding;
 
 				sceneCube.background = textureCube;
@@ -326,11 +324,11 @@
 
 				container.appendChild( renderer.domElement );
 
-				// var width = window.innerWidth || 1;
-				var height = window.innerHeight || 1;
+				// let width = window.innerWidth || 1;
+				const height = window.innerHeight || 1;
 
-				var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
-				var regularRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
+				const parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
+				const regularRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
 				ldrEffectComposer = new EffectComposer( renderer, regularRenderTarget );
 
 				parameters.type = THREE.FloatType;
@@ -341,15 +339,15 @@
 
 				}
 
-				var hdrRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
+				const hdrRenderTarget = new THREE.WebGLRenderTarget( windowThirdX, height, parameters );
 				dynamicHdrEffectComposer = new EffectComposer( renderer, hdrRenderTarget );
 				dynamicHdrEffectComposer.setSize( window.innerWidth, window.innerHeight );
 				hdrEffectComposer = new EffectComposer( renderer, hdrRenderTarget );
 
-				var debugPass = new RenderPass( debugScene, cameraBG );
+				const debugPass = new RenderPass( debugScene, cameraBG );
 				debugPass.clear = false;
-				var scenePass = new RenderPass( scene, camera, undefined, undefined, undefined );
-				var skyboxPass = new RenderPass( sceneCube, cameraCube );
+				const scenePass = new RenderPass( scene, camera, undefined, undefined, undefined );
+				const skyboxPass = new RenderPass( sceneCube, cameraCube );
 				scenePass.clear = false;
 
 				adaptToneMappingPass = new AdaptiveToneMappingPass( true, 256 );
@@ -357,7 +355,7 @@
 				ldrToneMappingPass = new AdaptiveToneMappingPass( false, 256 );
 				hdrToneMappingPass = new AdaptiveToneMappingPass( false, 256 );
 				bloomPass = new BloomPass();
-				var gammaCorrectionPass = new ShaderPass( GammaCorrectionShader );
+				const gammaCorrectionPass = new ShaderPass( GammaCorrectionShader );
 
 				dynamicHdrEffectComposer.addPass( skyboxPass );
 				dynamicHdrEffectComposer.addPass( scenePass );
@@ -377,12 +375,12 @@
 				ldrEffectComposer.addPass( bloomPass );
 				ldrEffectComposer.addPass( gammaCorrectionPass );
 
-				var gui = new GUI();
+				const gui = new GUI();
 
-				var sceneGui = gui.addFolder( 'Scenes' );
-				var toneMappingGui = gui.addFolder( 'ToneMapping' );
-				var staticToneMappingGui = gui.addFolder( 'StaticOnly' );
-				var adaptiveToneMappingGui = gui.addFolder( 'AdaptiveOnly' );
+				const sceneGui = gui.addFolder( 'Scenes' );
+				const toneMappingGui = gui.addFolder( 'ToneMapping' );
+				const staticToneMappingGui = gui.addFolder( 'StaticOnly' );
+				const adaptiveToneMappingGui = gui.addFolder( 'AdaptiveOnly' );
 
 				sceneGui.add( params, 'bloomAmount', 0.0, 10.0 );
 				sceneGui.add( params, 'sunLight', 0.1, 12.0 );

examples/webgl_shaders_vector.html

@@ -66,13 +66,13 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var stats;
+			let stats;
 
-			var camera, scene, renderer, controls;
+			let camera, scene, renderer, controls;
 
-			var group;
+			let group;
 
-			var loader = new THREE.FontLoader();
+			const loader = new THREE.FontLoader();
 			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
 				init( font );
@@ -88,46 +88,46 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				var theText = '&'; // i % & j b 8
+				const theText = '&'; // i % & j b 8
 
 				group = new THREE.Group();
 				scene.add( group );
 
-				var textMaterial = new THREE.MeshBasicMaterial( {
+				const textMaterial = new THREE.MeshBasicMaterial( {
 					color: new THREE.Color( 0, 0, 1 ),
 					side: THREE.DoubleSide,
 					wireframe: true
 				} );
 
-				var textShapes = font.generateShapes( theText, 180 );
+				const textShapes = font.generateShapes( theText, 180 );
 
-				var geometry = new THREE.ShapeBufferGeometry( textShapes );
+				let geometry = new THREE.ShapeBufferGeometry( textShapes );
 
-				var text = new THREE.Mesh( geometry, textMaterial );
+				let text = new THREE.Mesh( geometry, textMaterial );
 				text.position.x = - 200;
 				group.add( text );
 
 				//
 
-				var vA = new THREE.Vector2();
-				var vB = new THREE.Vector2();
+				let vA = new THREE.Vector2();
+				let vB = new THREE.Vector2();
 
 				function processShape( path ) {
 
-					var pts = []; // bigger area (convex hull)
-					var pts2 = []; // smaller area (full solid shapes)
-					var beziers = []; // quad bezier points
-					var invert = [];
-					var z;
+					const pts = []; // bigger area (convex hull)
+					const pts2 = []; // smaller area (full solid shapes)
+					const beziers = []; // quad bezier points
+					const invert = [];
+					let z;
 
-					var wind;
+					let wind;
 
 					pts.push( path[ 0 ].getPoint( 0, new THREE.Vector2() ) );
 					pts2.push( path[ 0 ].getPoint( 0, new THREE.Vector2() ) );
 
-					for ( var i = 0; i < path.length; i ++ ) {
+					for ( let i = 0; i < path.length; i ++ ) {
 
-						var curve = path[ i ];
+						const curve = path[ i ];
 						if ( curve instanceof THREE.LineCurve ) {
 
 							pts.push( curve.v2 );
@@ -154,7 +154,7 @@
 
 							}
 
-							var flip = wind ? 1 : - 1;
+							const flip = wind ? 1 : - 1;
 							// if (reverse) flip *= -1;
 
 							invert.push( flip, flip, flip );
@@ -173,18 +173,18 @@
 
 				}
 
-				var pts, pts2;
-				var subshape;
-				var convexhullShape;
-				var solidShape;
-				var convexhullShapeGroup = [];
-				var solidShapeGroup = [];
+				let pts, pts2;
+				let subshape;
+				let convexhullShape;
+				let solidShape;
+				const convexhullShapeGroup = [];
+				const solidShapeGroup = [];
 
-				var beziers = [], invert = [];
-				var process;
-				var hole;
+				let beziers = [], invert = [];
+				let process;
+				let hole;
 
-				for ( var s = 0; s < textShapes.length; s ++ ) {
+				for ( let s = 0; s < textShapes.length; s ++ ) {
 
 					subshape = textShapes[ s ];
 					process = processShape( subshape.curves );
@@ -200,7 +200,7 @@
 					convexhullShapeGroup.push( convexhullShape );
 					solidShapeGroup.push( solidShape );
 
-					for ( var i = 0; i < subshape.holes.length; i ++ ) {
+					for ( let i = 0; i < subshape.holes.length; i ++ ) {
 
 						hole = subshape.holes[ i ];
 
@@ -218,18 +218,18 @@
 
 				} // end of subshape
 
-				var bezierGeometry = new THREE.BufferGeometry();
-				var vertices = [];
-				var uvs = [];
+				const bezierGeometry = new THREE.BufferGeometry();
+				const vertices = [];
+				const uvs = [];
 
-				for ( var i = 0; i < beziers.length; i ++ ) {
+				for ( let i = 0; i < beziers.length; i ++ ) {
 
-					var p = beziers[ i ];
+					const p = beziers[ i ];
 					vertices.push( p.x, p.y, 0 );
 
 				}
 
-				for ( var i = 0; i < beziers.length; i += 3 ) {
+				for ( let i = 0; i < beziers.length; i += 3 ) {
 
 					uvs.push( 0, 0, 0.5, 0, 1, 1 );
 
@@ -253,7 +253,7 @@
 
 				//
 
-				var newMaterial = new THREE.ShaderMaterial( {
+				const newMaterial = new THREE.ShaderMaterial( {
 					uniforms: {
 						color: { value: new THREE.Color( 0.45 * 0xffffff ) }
 					},