Exampels: More clean up.

examples/css2d_label.html

@@ -24,37 +24,37 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
 
-			var camera, scene, renderer, labelRenderer;
+			let camera, scene, renderer, labelRenderer;
 
-			var clock = new THREE.Clock();
-			var textureLoader = new THREE.TextureLoader();
+			const clock = new THREE.Clock();
+			const textureLoader = new THREE.TextureLoader();
 
-			var earth, moon;
+			let moon;
 
 			init();
 			animate();
 
 			function init() {
 
-				var EARTH_RADIUS = 1;
-				var MOON_RADIUS = 0.27;
+				const EARTH_RADIUS = 1;
+				const MOON_RADIUS = 0.27;
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
 				camera.position.set( 10, 5, 20 );
 
 				scene = new THREE.Scene();
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( 0, 0, 1 );
 				scene.add( dirLight );
 
-				var axesHelper = new THREE.AxesHelper( 5 );
+				const axesHelper = new THREE.AxesHelper( 5 );
 				scene.add( axesHelper );
 
 				//
 
-				var earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
-				var earthMaterial = new THREE.MeshPhongMaterial( {
+				const earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
+				const earthMaterial = new THREE.MeshPhongMaterial( {
 					specular: 0x333333,
 					shininess: 5,
 					map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
@@ -62,11 +62,11 @@
 					normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
 					normalScale: new THREE.Vector2( 0.85, 0.85 )
 				} );
-				earth = new THREE.Mesh( earthGeometry, earthMaterial );
+				const earth = new THREE.Mesh( earthGeometry, earthMaterial );
 				scene.add( earth );
 
-				var moonGeometry = new THREE.SphereBufferGeometry( MOON_RADIUS, 16, 16 );
-				var moonMaterial = new THREE.MeshPhongMaterial( {
+				const moonGeometry = new THREE.SphereBufferGeometry( MOON_RADIUS, 16, 16 );
+				const moonMaterial = new THREE.MeshPhongMaterial( {
 					shininess: 5,
 					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
 				} );
@@ -75,19 +75,19 @@
 
 				//
 
-				var earthDiv = document.createElement( 'div' );
+				const earthDiv = document.createElement( 'div' );
 				earthDiv.className = 'label';
 				earthDiv.textContent = 'Earth';
 				earthDiv.style.marginTop = '-1em';
-				var earthLabel = new CSS2DObject( earthDiv );
+				const earthLabel = new CSS2DObject( earthDiv );
 				earthLabel.position.set( 0, EARTH_RADIUS, 0 );
 				earth.add( earthLabel );
 
-				var moonDiv = document.createElement( 'div' );
+				const moonDiv = document.createElement( 'div' );
 				moonDiv.className = 'label';
 				moonDiv.textContent = 'Moon';
 				moonDiv.style.marginTop = '-1em';
-				var moonLabel = new CSS2DObject( moonDiv );
+				const moonLabel = new CSS2DObject( moonDiv );
 				moonLabel.position.set( 0, MOON_RADIUS, 0 );
 				moon.add( moonLabel );
 
@@ -104,7 +104,7 @@
 				labelRenderer.domElement.style.top = '0px';
 				document.body.appendChild( labelRenderer.domElement );
 
-				var controls = new OrbitControls( camera, labelRenderer.domElement );
+				const controls = new OrbitControls( camera, labelRenderer.domElement );
 				controls.minDistance = 5;
 				controls.maxDistance = 100;
 
@@ -131,7 +131,7 @@
 
 				requestAnimationFrame( animate );
 
-				var elapsed = clock.getElapsedTime();
+				const elapsed = clock.getElapsedTime();
 
 				moon.position.set( Math.sin( elapsed ) * 5, 0, Math.cos( elapsed ) * 5 );
 

examples/css3d_molecules.html

@@ -72,20 +72,20 @@
 			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
 			import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
 
-			var camera, scene, renderer;
-			var controls;
-			var root;
+			let camera, scene, renderer;
+			let controls;
+			let root;
 
-			var objects = [];
-			var tmpVec1 = new THREE.Vector3();
-			var tmpVec2 = new THREE.Vector3();
-			var tmpVec3 = new THREE.Vector3();
-			var tmpVec4 = new THREE.Vector3();
-			var offset = new THREE.Vector3();
+			const objects = [];
+			const tmpVec1 = new THREE.Vector3();
+			const tmpVec2 = new THREE.Vector3();
+			const tmpVec3 = new THREE.Vector3();
+			const tmpVec4 = new THREE.Vector3();
+			const offset = new THREE.Vector3();
 
-			var visualizationType = 2;
+			let visualizationType = 2;
 
-			var MOLECULES = {
+			const MOLECULES = {
 				"Ethanol": "ethanol.pdb",
 				"Aspirin": "aspirin.pdb",
 				"Caffeine": "caffeine.pdb",
@@ -106,11 +106,11 @@
 				"Graphite": "graphite.pdb"
 			};
 
-			var loader = new PDBLoader();
-			var colorSpriteMap = {};
-			var baseSprite = document.createElement( 'img' );
+			const loader = new PDBLoader();
+			const colorSpriteMap = {};
+			const baseSprite = document.createElement( 'img' );
 
-			var menu = document.getElementById( "menu" );
+			const menu = document.getElementById( "menu" );
 
 			init();
 			animate();
@@ -167,21 +167,21 @@
 
 			function createMenu() {
 
-				for ( var m in MOLECULES ) {
+				for ( const m in MOLECULES ) {
 
-					var button = document.createElement( 'button' );
+					const button = document.createElement( 'button' );
 					button.innerHTML = m;
 					menu.appendChild( button );
 
-					var url = "models/pdb/" + MOLECULES[ m ];
+					const url = "models/pdb/" + MOLECULES[ m ];
 
 					button.addEventListener( 'click', generateButtonCallback( url ), false );
 
 				}
 
-				var b_a = document.getElementById( "b_a" );
-				var b_b = document.getElementById( "b_b" );
-				var b_ab = document.getElementById( "b_ab" );
+				const b_a = document.getElementById( "b_a" );
+				const b_b = document.getElementById( "b_b" );
+				const b_ab = document.getElementById( "b_ab" );
 
 				b_a.addEventListener( 'click', function () {
 
@@ -208,9 +208,9 @@
 
 			function showAtoms() {
 
-				for ( var i = 0; i < objects.length; i ++ ) {
+				for ( let i = 0; i < objects.length; i ++ ) {
 
-					var object = objects[ i ];
+					const object = objects[ i ];
 
 					if ( object instanceof CSS3DSprite ) {
 
@@ -230,9 +230,9 @@
 
 			function showBonds() {
 
-				for ( var i = 0; i < objects.length; i ++ ) {
+				for ( let i = 0; i < objects.length; i ++ ) {
 
-					var object = objects[ i ];
+					const object = objects[ i ];
 
 					if ( object instanceof CSS3DSprite ) {
 
@@ -253,9 +253,9 @@
 
 			function showAtomsBonds() {
 
-				for ( var i = 0; i < objects.length; i ++ ) {
+				for ( let i = 0; i < objects.length; i ++ ) {
 
-					var object = objects[ i ];
+					const object = objects[ i ];
 
 					object.element.style.display = "";
 					object.visible = true;
@@ -274,12 +274,12 @@
 
 			function colorify( ctx, width, height, color ) {
 
-				var r = color.r, g = color.g, b = color.b;
+				const r = color.r, g = color.g, b = color.b;
 
-				var imageData = ctx.getImageData( 0, 0, width, height );
-				var data = imageData.data;
+				const imageData = ctx.getImageData( 0, 0, width, height );
+				const data = imageData.data;
 
-				for ( var i = 0, l = data.length; i < l; i += 4 ) {
+				for ( let i = 0, l = data.length; i < l; i += 4 ) {
 
 					data[ i + 0 ] *= r;
 					data[ i + 1 ] *= g;
@@ -293,15 +293,15 @@
 
 			function imageToCanvas( image ) {
 
-				var width = image.width;
-				var height = image.height;
+				const width = image.width;
+				const height = image.height;
 
-				var canvas = document.createElement( 'canvas' );
+				const canvas = document.createElement( 'canvas' );
 
 				canvas.width = width;
 				canvas.height = height;
 
-				var context = canvas.getContext( '2d' );
+				const context = canvas.getContext( '2d' );
 				context.drawImage( image, 0, 0, width, height );
 
 				return canvas;
@@ -312,20 +312,20 @@
 
 			function loadMolecule( url ) {
 
-				for ( var i = 0; i < objects.length; i ++ ) {
+				for ( let i = 0; i < objects.length; i ++ ) {
 
-					var object = objects[ i ];
+					const object = objects[ i ];
 					object.parent.remove( object );
 
 				}
 
-				objects = [];
+				objects.length = 0;
 
 				loader.load( url, function ( pdb ) {
 
-					var geometryAtoms = pdb.geometryAtoms;
-					var geometryBonds = pdb.geometryBonds;
-					var json = pdb.json;
+					const geometryAtoms = pdb.geometryAtoms;
+					const geometryBonds = pdb.geometryBonds;
+					const json = pdb.json;
 
 					geometryAtoms.computeBoundingBox();
 					geometryAtoms.boundingBox.getCenter( offset ).negate();
@@ -333,44 +333,39 @@
 					geometryAtoms.translate( offset.x, offset.y, offset.z );
 					geometryBonds.translate( offset.x, offset.y, offset.z );
 
-					var positions = geometryAtoms.getAttribute( 'position' );
-					var colors = geometryAtoms.getAttribute( 'color' );
+					const positionAtoms = geometryAtoms.getAttribute( 'position' );
+					const colorAtoms = geometryAtoms.getAttribute( 'color' );
 
-					var position = new THREE.Vector3();
-					var color = new THREE.Color();
+					const position = new THREE.Vector3();
+					const color = new THREE.Color();
 
-					for ( var i = 0; i < positions.count; i ++ ) {
+					for ( let i = 0; i < positionAtoms.count; i ++ ) {
 
-						position.x = positions.getX( i );
-						position.y = positions.getY( i );
-						position.z = positions.getZ( i );
+						position.fromBufferAttribute( positionAtoms, i );
+						color.fromBufferAttribute( colorAtoms, i );
 
-						color.r = colors.getX( i );
-						color.g = colors.getY( i );
-						color.b = colors.getZ( i );
-
-						var atom = json.atoms[ i ];
-						var element = atom[ 4 ];
+						const atomJSON = json.atoms[ i ];
+						const element = atomJSON[ 4 ];
 
 						if ( ! colorSpriteMap[ element ] ) {
 
-							var canvas = imageToCanvas( baseSprite );
-							var context = canvas.getContext( '2d' );
+							const canvas = imageToCanvas( baseSprite );
+							const context = canvas.getContext( '2d' );
 
 							colorify( context, canvas.width, canvas.height, color );
 
-							var dataUrl = canvas.toDataURL();
+							const dataUrl = canvas.toDataURL();
 
 							colorSpriteMap[ element ] = dataUrl;
 
 						}
 
-						var colorSprite = colorSpriteMap[ element ];
+						const colorSprite = colorSpriteMap[ element ];
 
-						var atom = document.createElement( 'img' );
+						const atom = document.createElement( 'img' );
 						atom.src = colorSprite;
 
-						var object = new CSS3DSprite( atom );
+						const object = new CSS3DSprite( atom );
 						object.position.copy( position );
 						object.position.multiplyScalar( 75 );
 
@@ -383,34 +378,29 @@
 
 					}
 
-					positions = geometryBonds.getAttribute( 'position' );
-
-					var start = new THREE.Vector3();
-					var end = new THREE.Vector3();
+					const positionBonds = geometryBonds.getAttribute( 'position' );
 
-					for ( var i = 0; i < positions.count; i += 2 ) {
+					const start = new THREE.Vector3();
+					const end = new THREE.Vector3();
 
-						start.x = positions.getX( i );
-						start.y = positions.getY( i );
-						start.z = positions.getZ( i );
+					for ( let i = 0; i < positionBonds.count; i += 2 ) {
 
-						end.x = positions.getX( i + 1 );
-						end.y = positions.getY( i + 1 );
-						end.z = positions.getZ( i + 1 );
+						start.fromBufferAttribute( positionBonds, i );
+						end.fromBufferAttribute( positionBonds, i + 1 );
 
 						start.multiplyScalar( 75 );
 						end.multiplyScalar( 75 );
 
 						tmpVec1.subVectors( end, start );
-						var bondLength = tmpVec1.length() - 50;
+						const bondLength = tmpVec1.length() - 50;
 
 						//
 
-						var bond = document.createElement( 'div' );
+						let bond = document.createElement( 'div' );
 						bond.className = "bond";
 						bond.style.height = bondLength + "px";
 
-						var object = new CSS3DObject( bond );
+						let object = new CSS3DObject( bond );
 						object.position.copy( start );
 						object.position.lerp( end, 0.5 );
 
@@ -419,11 +409,11 @@
 
 						//
 
-						var axis = tmpVec2.set( 0, 1, 0 ).cross( tmpVec1 );
-						var radians = Math.acos( tmpVec3.set( 0, 1, 0 ).dot( tmpVec4.copy( tmpVec1 ).normalize() ) );
+						const axis = tmpVec2.set( 0, 1, 0 ).cross( tmpVec1 );
+						const radians = Math.acos( tmpVec3.set( 0, 1, 0 ).dot( tmpVec4.copy( tmpVec1 ).normalize() ) );
 
-						var objMatrix = new THREE.Matrix4().makeRotationAxis( axis.normalize(), radians );
-						object.matrix = objMatrix;
+						const objMatrix = new THREE.Matrix4().makeRotationAxis( axis.normalize(), radians );
+						object.matrix.copy( objMatrix );
 						object.quaternion.setFromRotationMatrix( object.matrix );
 
 						object.matrixAutoUpdate = false;
@@ -435,11 +425,11 @@
 
 						//
 
-						var bond = document.createElement( 'div' );
+						bond = document.createElement( 'div' );
 						bond.className = "bond";
 						bond.style.height = bondLength + "px";
 
-						var joint = new THREE.Object3D( bond );
+						const joint = new THREE.Object3D( bond );
 						joint.position.copy( start );
 						joint.position.lerp( end, 0.5 );
 
@@ -449,7 +439,7 @@
 						joint.matrixAutoUpdate = false;
 						joint.updateMatrix();
 
-						var object = new CSS3DObject( bond );
+						object = new CSS3DObject( bond );
 						object.rotation.y = Math.PI / 2;
 
 						object.matrixAutoUpdate = false;
@@ -504,7 +494,7 @@
 				requestAnimationFrame( animate );
 				controls.update();
 
-				var time = Date.now() * 0.0004;
+				const time = Date.now() * 0.0004;
 
 				root.rotation.x = time;
 				root.rotation.y = time * 0.7;

examples/css3d_orthographic.html

@@ -27,18 +27,18 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var scene2, renderer2;
+			let scene2, renderer2;
 
-			var frustumSize = 500;
+			const frustumSize = 500;
 
 			init();
 			animate();
 
 			function init() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
 
 				camera.position.set( - 200, 200, 200 );
@@ -48,7 +48,7 @@
 
 				scene2 = new THREE.Scene();
 
-				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
+				const material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
 
 				// left
 				createPlane(
@@ -92,25 +92,25 @@
 				renderer2.domElement.style.top = 0;
 				document.body.appendChild( renderer2.domElement );
 
-				var controls = new OrbitControls( camera, renderer2.domElement );
+				const controls = new OrbitControls( camera, renderer2.domElement );
 				controls.minZoom = 0.5;
 				controls.maxZoom = 2;
 
 				function createPlane( width, height, cssColor, pos, rot ) {
 
-					var element = document.createElement( 'div' );
+					const element = document.createElement( 'div' );
 					element.style.width = width + 'px';
 					element.style.height = height + 'px';
 					element.style.opacity = 0.75;
 					element.style.background = cssColor;
 
-					var object = new CSS3DObject( element );
+					const object = new CSS3DObject( element );
 					object.position.copy( pos );
 					object.rotation.copy( rot );
 					scene2.add( object );
 
-					var geometry = new THREE.PlaneBufferGeometry( width, height );
-					var mesh = new THREE.Mesh( geometry, material );
+					const geometry = new THREE.PlaneBufferGeometry( width, height );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.copy( object.position );
 					mesh.rotation.copy( object.rotation );
 					scene.add( mesh );
@@ -123,7 +123,7 @@
 
 			function onWindowResize() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
 				camera.left = - frustumSize * aspect / 2;
 				camera.right = frustumSize * aspect / 2;

examples/css3d_panorama.html

@@ -15,13 +15,13 @@
 
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
-			var camera, scene, renderer;
-			var target = new THREE.Vector3();
+			let camera, scene, renderer;
+			const target = new THREE.Vector3();
 
-			var lon = 90, lat = 0;
-			var phi = 0, theta = 0;
+			let lon = 90, lat = 0;
+			let phi = 0, theta = 0;
 
-			var pointerX, pointerY;
+			let pointerX, pointerY;
 
 			init();
 			animate();
@@ -32,7 +32,7 @@
 
 				scene = new THREE.Scene();
 
-				var sides = [
+				const sides = [
 					{
 						url: 'textures/cube/Bridge2/posx.jpg',
 						position: [ - 512, 0, 0 ],
@@ -65,16 +65,16 @@
 					}
 				];
 
-				for ( var i = 0; i < sides.length; i ++ ) {
+				for ( let i = 0; i < sides.length; i ++ ) {
 
-					var side = sides[ i ];
+					const side = sides[ i ];
 
-					var element = document.createElement( 'img' );
+					const element = document.createElement( 'img' );
 					element.draggable = false;
 					element.width = 1026; // 2 pixels extra to close the gap.
 					element.src = side.url;
 
-					var object = new CSS3DObject( element );
+					const object = new CSS3DObject( element );
 					object.position.fromArray( side.position );
 					object.rotation.fromArray( side.rotation );
 					scene.add( object );
@@ -140,7 +140,7 @@
 
 			function onDocumentMouseWheel( event ) {
 
-				var fov = camera.fov + event.deltaY * 0.05;
+				const fov = camera.fov + event.deltaY * 0.05;
 
 				camera.fov = THREE.MathUtils.clamp( fov, 10, 75 );
 

examples/css3d_panorama_deviceorientation.html

@@ -19,10 +19,10 @@
 			import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
-			var camera, scene, renderer;
-			var controls;
+			let camera, scene, renderer;
+			let controls;
 
-			var startButton = document.getElementById( 'startButton' );
+			const startButton = document.getElementById( 'startButton' );
 			startButton.addEventListener( 'click', function () {
 
 				init();
@@ -32,7 +32,7 @@
 
 			function init() {
 
-				var overlay = document.getElementById( 'overlay' );
+				const overlay = document.getElementById( 'overlay' );
 				overlay.remove();
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -41,7 +41,7 @@
 
 				scene = new THREE.Scene();
 
-				var sides = [
+				const sides = [
 					{
 						url: 'textures/cube/Bridge2/posx.jpg',
 						position: [ - 512, 0, 0 ],
@@ -74,18 +74,18 @@
 					}
 				];
 
-				var cube = new THREE.Object3D();
+				const cube = new THREE.Object3D();
 				scene.add( cube );
 
-				for ( var i = 0; i < sides.length; i ++ ) {
+				for ( let i = 0; i < sides.length; i ++ ) {
 
-					var side = sides[ i ];
+					const side = sides[ i ];
 
-					var element = document.createElement( 'img' );
+					const element = document.createElement( 'img' );
 					element.width = 1026; // 2 pixels extra to close the gap.
 					element.src = side.url;
 
-					var object = new CSS3DObject( element );
+					const object = new CSS3DObject( element );
 					object.position.fromArray( side.position );
 					object.rotation.fromArray( side.rotation );
 					cube.add( object );

examples/css3d_periodictable.html

@@ -99,7 +99,7 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
-			var table = [
+			const table = [
 				"H", "Hydrogen", "1.00794", 1, 1,
 				"He", "Helium", "4.002602", 18, 1,
 				"Li", "Lithium", "6.941", 1, 2,
@@ -220,11 +220,11 @@
 				"Og", "Oganesson", "(294)", 18, 7
 			];
 
-			var camera, scene, renderer;
-			var controls;
+			let camera, scene, renderer;
+			let controls;
 
-			var objects = [];
-			var targets = { table: [], sphere: [], helix: [], grid: [] };
+			const objects = [];
+			const targets = { table: [], sphere: [], helix: [], grid: [] };
 
 			init();
 			animate();
@@ -238,38 +238,38 @@
 
 				// table
 
-				for ( var i = 0; i < table.length; i += 5 ) {
+				for ( let i = 0; i < table.length; i += 5 ) {
 
-					var element = document.createElement( 'div' );
+					const element = document.createElement( 'div' );
 					element.className = 'element';
 					element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
 
-					var number = document.createElement( 'div' );
+					const number = document.createElement( 'div' );
 					number.className = 'number';
 					number.textContent = ( i / 5 ) + 1;
 					element.appendChild( number );
 
-					var symbol = document.createElement( 'div' );
+					const symbol = document.createElement( 'div' );
 					symbol.className = 'symbol';
 					symbol.textContent = table[ i ];
 					element.appendChild( symbol );
 
-					var details = document.createElement( 'div' );
+					const details = document.createElement( 'div' );
 					details.className = 'details';
 					details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
 					element.appendChild( details );
 
-					var object = new CSS3DObject( element );
-					object.position.x = Math.random() * 4000 - 2000;
-					object.position.y = Math.random() * 4000 - 2000;
-					object.position.z = Math.random() * 4000 - 2000;
-					scene.add( object );
+					const objectCSS = new CSS3DObject( element );
+					objectCSS.position.x = Math.random() * 4000 - 2000;
+					objectCSS.position.y = Math.random() * 4000 - 2000;
+					objectCSS.position.z = Math.random() * 4000 - 2000;
+					scene.add( objectCSS );
 
-					objects.push( object );
+					objects.push( objectCSS );
 
 					//
 
-					var object = new THREE.Object3D();
+					const object = new THREE.Object3D();
 					object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
 					object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
 
@@ -279,14 +279,14 @@
 
 				// sphere
 
-				var vector = new THREE.Vector3();
+				const vector = new THREE.Vector3();
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+				for ( let i = 0, l = objects.length; i < l; i ++ ) {
 
-					var phi = Math.acos( - 1 + ( 2 * i ) / l );
-					var theta = Math.sqrt( l * Math.PI ) * phi;
+					const phi = Math.acos( - 1 + ( 2 * i ) / l );
+					const theta = Math.sqrt( l * Math.PI ) * phi;
 
-					var object = new THREE.Object3D();
+					const object = new THREE.Object3D();
 
 					object.position.setFromSphericalCoords( 800, phi, theta );
 
@@ -300,14 +300,12 @@
 
 				// helix
 
-				var vector = new THREE.Vector3();
+				for ( let i = 0, l = objects.length; i < l; i ++ ) {
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+					const theta = i * 0.175 + Math.PI;
+					const y = - ( i * 8 ) + 450;
 
-					var theta = i * 0.175 + Math.PI;
-					var y = - ( i * 8 ) + 450;
-
-					var object = new THREE.Object3D();
+					const object = new THREE.Object3D();
 
 					object.position.setFromCylindricalCoords( 900, theta, y );
 
@@ -323,9 +321,9 @@
 
 				// grid
 
-				for ( var i = 0; i < objects.length; i ++ ) {
+				for ( let i = 0; i < objects.length; i ++ ) {
 
-					var object = new THREE.Object3D();
+					const object = new THREE.Object3D();
 
 					object.position.x = ( ( i % 5 ) * 400 ) - 800;
 					object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;
@@ -348,29 +346,29 @@
 				controls.maxDistance = 6000;
 				controls.addEventListener( 'change', render );
 
-				var button = document.getElementById( 'table' );
-				button.addEventListener( 'click', function () {
+				const buttonTable = document.getElementById( 'table' );
+				buttonTable.addEventListener( 'click', function () {
 
 					transform( targets.table, 2000 );
 
 				}, false );
 
-				var button = document.getElementById( 'sphere' );
-				button.addEventListener( 'click', function () {
+				const buttonSphere = document.getElementById( 'sphere' );
+				buttonSphere.addEventListener( 'click', function () {
 
 					transform( targets.sphere, 2000 );
 
 				}, false );
 
-				var button = document.getElementById( 'helix' );
-				button.addEventListener( 'click', function () {
+				const buttonHelix = document.getElementById( 'helix' );
+				buttonHelix.addEventListener( 'click', function () {
 
 					transform( targets.helix, 2000 );
 
 				}, false );
 
-				var button = document.getElementById( 'grid' );
-				button.addEventListener( 'click', function () {
+				const buttonGrid = document.getElementById( 'grid' );
+				buttonGrid.addEventListener( 'click', function () {
 
 					transform( targets.grid, 2000 );
 
@@ -388,10 +386,10 @@
 
 				TWEEN.removeAll();
 
-				for ( var i = 0; i < objects.length; i ++ ) {
+				for ( let i = 0; i < objects.length; i ++ ) {
 
-					var object = objects[ i ];
-					var target = targets[ i ];
+					const object = objects[ i ];
+					const target = targets[ i ];
 
 					new TWEEN.Tween( object.position )
 						.to( { x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration )

examples/css3d_sandbox.html

@@ -23,11 +23,11 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
-			var scene2, renderer2;
+			let scene2, renderer2;
 
-			var controls;
+			let controls;
 
 			init();
 			animate();
@@ -42,19 +42,19 @@
 
 				scene2 = new THREE.Scene();
 
-				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
+				const material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
 
 				//
 
-				for ( var i = 0; i < 10; i ++ ) {
+				for ( let i = 0; i < 10; i ++ ) {
 
-					var element = document.createElement( 'div' );
+					const element = document.createElement( 'div' );
 					element.style.width = '100px';
 					element.style.height = '100px';
 					element.style.opacity = ( i < 5 ) ? 0.5 : 1;
 					element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
 
-					var object = new CSS3DObject( element );
+					const object = new CSS3DObject( element );
 					object.position.x = Math.random() * 200 - 100;
 					object.position.y = Math.random() * 200 - 100;
 					object.position.z = Math.random() * 200 - 100;
@@ -65,8 +65,8 @@
 					object.scale.y = Math.random() + 0.5;
 					scene2.add( object );
 
-					var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
-					var mesh = new THREE.Mesh( geometry, material );
+					const geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.copy( object.position );
 					mesh.rotation.copy( object.rotation );
 					mesh.scale.copy( object.scale );

examples/css3d_sprites.html

@@ -28,13 +28,13 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
 
-			var camera, scene, renderer;
-			var controls;
+			let camera, scene, renderer;
+			let controls;
 
-			var particlesTotal = 512;
-			var positions = [];
-			var objects = [];
-			var current = 0;
+			const particlesTotal = 512;
+			const positions = [];
+			const objects = [];
+			let current = 0;
 
 			init();
 			animate();
@@ -47,12 +47,12 @@
 
 				scene = new THREE.Scene();
 
-				var image = document.createElement( 'img' );
+				const image = document.createElement( 'img' );
 				image.addEventListener( 'load', function () {
 
-					for ( var i = 0; i < particlesTotal; i ++ ) {
+					for ( let i = 0; i < particlesTotal; i ++ ) {
 
-						var object = new CSS3DSprite( image.cloneNode() );
+						const object = new CSS3DSprite( image.cloneNode() );
 						object.position.x = Math.random() * 4000 - 2000,
 						object.position.y = Math.random() * 4000 - 2000,
 						object.position.z = Math.random() * 4000 - 2000;
@@ -69,17 +69,17 @@
 
 				// Plane
 
-				var amountX = 16;
-				var amountZ = 32;
-				var separation = 150;
-				var offsetX = ( ( amountX - 1 ) * separation ) / 2;
-				var offsetZ = ( ( amountZ - 1 ) * separation ) / 2;
+				const amountX = 16;
+				const amountZ = 32;
+				const separationPlane = 150;
+				const offsetX = ( ( amountX - 1 ) * separationPlane ) / 2;
+				const offsetZ = ( ( amountZ - 1 ) * separationPlane ) / 2;
 
-				for ( var i = 0; i < particlesTotal; i ++ ) {
+				for ( let i = 0; i < particlesTotal; i ++ ) {
 
-					var x = ( i % amountX ) * separation;
-					var z = Math.floor( i / amountX ) * separation;
-					var y = ( Math.sin( x * 0.5 ) + Math.sin( z * 0.5 ) ) * 200;
+					const x = ( i % amountX ) * separationPlane;
+					const z = Math.floor( i / amountX ) * separationPlane;
+					const y = ( Math.sin( x * 0.5 ) + Math.sin( z * 0.5 ) ) * 200;
 
 					positions.push( x - offsetX, y, z - offsetZ );
 
@@ -87,15 +87,15 @@
 
 				// Cube
 
-				var amount = 8;
-				var separation = 150;
-				var offset = ( ( amount - 1 ) * separation ) / 2;
+				const amount = 8;
+				const separationCube = 150;
+				const offset = ( ( amount - 1 ) * separationCube ) / 2;
 
-				for ( var i = 0; i < particlesTotal; i ++ ) {
+				for ( let i = 0; i < particlesTotal; i ++ ) {
 
-					var x = ( i % amount ) * separation;
-					var y = Math.floor( ( i / amount ) % amount ) * separation;
-					var z = Math.floor( i / ( amount * amount ) ) * separation;
+					const x = ( i % amount ) * separationCube;
+					const y = Math.floor( ( i / amount ) % amount ) * separationCube;
+					const z = Math.floor( i / ( amount * amount ) ) * separationCube;
 
 					positions.push( x - offset, y - offset, z - offset );
 
@@ -103,7 +103,7 @@
 
 				// Random
 
-				for ( var i = 0; i < particlesTotal; i ++ ) {
+				for ( let i = 0; i < particlesTotal; i ++ ) {
 
 					positions.push(
 						Math.random() * 4000 - 2000,
@@ -115,12 +115,12 @@
 
 				// Sphere
 
-				var radius = 750;
+				const radius = 750;
 
-				for ( var i = 0; i < particlesTotal; i ++ ) {
+				for ( let i = 0; i < particlesTotal; i ++ ) {
 
-					var phi = Math.acos( - 1 + ( 2 * i ) / particlesTotal );
-					var theta = Math.sqrt( particlesTotal * Math.PI ) * phi;
+					const phi = Math.acos( - 1 + ( 2 * i ) / particlesTotal );
+					const theta = Math.sqrt( particlesTotal * Math.PI ) * phi;
 
 					positions.push(
 						radius * Math.cos( theta ) * Math.sin( phi ),
@@ -157,12 +157,12 @@
 
 			function transition() {
 
-				var offset = current * particlesTotal * 3;
-				var duration = 2000;
+				const offset = current * particlesTotal * 3;
+				const duration = 2000;
 
-				for ( var i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {
+				for ( let i = 0, j = offset; i < particlesTotal; i ++, j += 3 ) {
 
-					var object = objects[ i ];
+					const object = objects[ i ];
 
 					new TWEEN.Tween( object.position )
 						.to( {
@@ -191,12 +191,12 @@
 				TWEEN.update();
 				controls.update();
 
-				var time = performance.now();
+				const time = performance.now();
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+				for ( let i = 0, l = objects.length; i < l; i ++ ) {
 
-					var object = objects[ i ];
-					var scale = Math.sin( ( Math.floor( object.position.x ) + time ) * 0.002 ) * 0.3 + 1;
+					const object = objects[ i ];
+					const scale = Math.sin( ( Math.floor( object.position.x ) + time ) * 0.002 ) * 0.3 + 1;
 					object.scale.set( scale, scale, scale );
 
 				}

examples/css3d_youtube.html

@@ -30,24 +30,24 @@
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
-			var camera, scene, renderer;
-			var controls;
+			let camera, scene, renderer;
+			let controls;
 
-			var Element = function ( id, x, y, z, ry ) {
+			function Element( id, x, y, z, ry ) {
 
-				var div = document.createElement( 'div' );
+				const div = document.createElement( 'div' );
 				div.style.width = '480px';
 				div.style.height = '360px';
 				div.style.backgroundColor = '#000';
 
-				var iframe = document.createElement( 'iframe' );
+				const iframe = document.createElement( 'iframe' );
 				iframe.style.width = '480px';
 				iframe.style.height = '360px';
 				iframe.style.border = '0px';
 				iframe.src = [ 'https://www.youtube.com/embed/', id, '?rel=0' ].join( '' );
 				div.appendChild( iframe );
 
-				var object = new CSS3DObject( div );
+				const object = new CSS3DObject( div );
 				object.position.set( x, y, z );
 				object.rotation.y = ry;
 
@@ -60,7 +60,7 @@
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				const container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.set( 500, 350, 750 );
@@ -71,7 +71,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				var group = new THREE.Group();
+				const group = new THREE.Group();
 				group.add( new Element( 'SJOz3qjfQXU', 0, 0, 240, 0 ) );
 				group.add( new Element( 'Y2-xZ-1HE-Q', 240, 0, 0, Math.PI / 2 ) );
 				group.add( new Element( 'IrydklNpcFI', 0, 0, - 240, Math.PI ) );
@@ -85,7 +85,7 @@
 
 				// Block iframe events when dragging camera
 
-				var blocker = document.getElementById( 'blocker' );
+				const blocker = document.getElementById( 'blocker' );
 				blocker.style.display = 'none';
 
 				controls.addEventListener( 'start', function () {

examples/misc_animation_groups.html

@@ -18,8 +18,8 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var stats, clock;
-			var scene, camera, renderer, mixer;
+			let stats, clock;
+			let scene, camera, renderer, mixer;
 
 			init();
 			animate();
@@ -36,20 +36,20 @@
 
 				// all objects of this animation group share a common animation state
 
-				var animationGroup = new THREE.AnimationObjectGroup();
+				const animationGroup = new THREE.AnimationObjectGroup();
 
 				//
 
-				var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
-				var material = new THREE.MeshBasicMaterial( { transparent: true } );
+				const geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
+				const material = new THREE.MeshBasicMaterial( { transparent: true } );
 
 				//
 
-				for ( var i = 0; i < 5; i ++ ) {
+				for ( let i = 0; i < 5; i ++ ) {
 
-					for ( var j = 0; j < 5; j ++ ) {
+					for ( let j = 0; j < 5; j ++ ) {
 
-						var mesh = new THREE.Mesh( geometry, material );
+						const mesh = new THREE.Mesh( geometry, material );
 
 						mesh.position.x = 32 - ( 16 * i );
 						mesh.position.y = 0;
@@ -64,23 +64,23 @@
 
 				// create some keyframe tracks
 
-				var xAxis = new THREE.Vector3( 1, 0, 0 );
-				var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
-				var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
-				var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
+				const xAxis = new THREE.Vector3( 1, 0, 0 );
+				const qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
+				const qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
+				const quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
 
-				var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
-				var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
+				const colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
+				const opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
 
 				// create clip
 
-				var clip = new THREE.AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
+				const clip = new THREE.AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
 
 				// apply the animation group to the mixer as the root object
 
 				mixer = new THREE.AnimationMixer( animationGroup );
 
-				var clipAction = mixer.clipAction( clip );
+				const clipAction = mixer.clipAction( clip );
 				clipAction.play();
 
 				//
@@ -124,7 +124,7 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( mixer ) {
 

examples/misc_animation_keys.html

@@ -18,8 +18,8 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var stats, clock;
-			var scene, camera, renderer, mixer;
+			let stats, clock;
+			let scene, camera, renderer, mixer;
 
 			init();
 			animate();
@@ -36,51 +36,51 @@
 
 				//
 
-				var axesHelper = new THREE.AxesHelper( 10 );
+				const axesHelper = new THREE.AxesHelper( 10 );
 				scene.add( axesHelper );
 
 				//
 
-				var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true } );
-				var mesh = new THREE.Mesh( geometry, material );
+				const geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
+				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true } );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				// create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
 				// Note: the keyframe track type should correspond to the type of the property being animated
 
 				// POSITION
-				var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );
+				const positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );
 
 				// SCALE
-				var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );
+				const scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );
 
 				// ROTATION
 				// Rotation should be performed using quaternions, using a THREE.QuaternionKeyframeTrack
 				// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported
 
 				// set up rotation about x axis
-				var xAxis = new THREE.Vector3( 1, 0, 0 );
+				const xAxis = new THREE.Vector3( 1, 0, 0 );
 
-				var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
-				var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
-				var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
+				const qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
+				const qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
+				const quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
 
 				// COLOR
-				var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
+				const colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
 
 				// OPACITY
-				var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
+				const opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
 
 				// create an animation sequence with the tracks
 				// If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
-				var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );
+				const clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );
 
 				// setup the THREE.AnimationMixer
 				mixer = new THREE.AnimationMixer( mesh );
 
 				// create a ClipAction and set it to play
-				var clipAction = mixer.clipAction( clip );
+				const clipAction = mixer.clipAction( clip );
 				clipAction.play();
 
 				//
@@ -124,7 +124,7 @@
 
 			function render() {
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				if ( mixer ) {
 

examples/misc_boxselection.html

@@ -38,8 +38,8 @@
 			import { SelectionBox } from './jsm/interactive/SelectionBox.js';
 			import { SelectionHelper } from './jsm/interactive/SelectionHelper.js';
 
-			var container, stats;
-			var camera, scene, renderer;
+			let container, stats;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -57,7 +57,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x505050 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				const light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				light.angle = Math.PI / 9;
 
@@ -69,11 +69,11 @@
 
 				scene.add( light );
 
-				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				const geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 
-				for ( var i = 0; i < 200; i ++ ) {
+				for ( let i = 0; i < 200; i ++ ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 					object.position.x = Math.random() * 1600 - 800;
 					object.position.y = Math.random() * 900 - 450;
@@ -136,12 +136,12 @@
 
 			}
 
-			var selectionBox = new SelectionBox( camera, scene );
-			var helper = new SelectionHelper( selectionBox, renderer, 'selectBox' );
+			const selectionBox = new SelectionBox( camera, scene );
+			const helper = new SelectionHelper( selectionBox, renderer, 'selectBox' );
 
 			document.addEventListener( 'pointerdown', function ( event ) {
 
-				for ( var item of selectionBox.collection ) {
+				for ( const item of selectionBox.collection ) {
 
 					item.material.emissive.set( 0x000000 );
 
@@ -158,7 +158,7 @@
 
 				if ( helper.isDown ) {
 
-					for ( var i = 0; i < selectionBox.collection.length; i ++ ) {
+					for ( let i = 0; i < selectionBox.collection.length; i ++ ) {
 
 						selectionBox.collection[ i ].material.emissive.set( 0x000000 );
 
@@ -169,9 +169,9 @@
 						- ( event.clientY / window.innerHeight ) * 2 + 1,
 						0.5 );
 
-					var allSelected = selectionBox.select();
+					const allSelected = selectionBox.select();
 
-					for ( var i = 0; i < allSelected.length; i ++ ) {
+					for ( let i = 0; i < allSelected.length; i ++ ) {
 
 						allSelected[ i ].material.emissive.set( 0xffffff );
 
@@ -188,9 +188,9 @@
 					- ( event.clientY / window.innerHeight ) * 2 + 1,
 					0.5 );
 
-				var allSelected = selectionBox.select();
+				const allSelected = selectionBox.select();
 
-				for ( var i = 0; i < allSelected.length; i ++ ) {
+				for ( let i = 0; i < allSelected.length; i ++ ) {
 
 					allSelected[ i ].material.emissive.set( 0xffffff );
 

examples/misc_controls_deviceorientation.html

@@ -21,9 +21,9 @@
 
 			import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
 
-			var camera, scene, renderer, controls;
+			let camera, scene, renderer, controls;
 
-			var startButton = document.getElementById( 'startButton' );
+			const startButton = document.getElementById( 'startButton' );
 			startButton.addEventListener( 'click', function () {
 
 				init();
@@ -33,7 +33,7 @@
 
 			function init() {
 
-				var overlay = document.getElementById( 'overlay' );
+				const overlay = document.getElementById( 'overlay' );
 				overlay.remove();
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
@@ -42,20 +42,20 @@
 
 				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 material = new THREE.MeshBasicMaterial( {
+				const material = new THREE.MeshBasicMaterial( {
 					map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
-				var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
-				var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
-				var helper = new THREE.Mesh( helperGeometry, helperMaterial );
+				const helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
+				const helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
+				const helper = new THREE.Mesh( helperGeometry, helperMaterial );
 				scene.add( helper );
 
 				//

examples/misc_controls_drag.html

@@ -29,13 +29,14 @@
 
 			import { DragControls } from './jsm/controls/DragControls.js';
 
-			var container;
-			var camera, scene, renderer;
-			var controls, group;
-			var objects = [];
-			var enableSelection = false;
+			let container;
+			let camera, scene, renderer;
+			let controls, group;
+			let enableSelection = false;
 
-			var mouse = new THREE.Vector2(), raycaster = new THREE.Raycaster();
+			const objects = [];
+
+			const mouse = new THREE.Vector2(), raycaster = new THREE.Raycaster();
 
 			init();
 
@@ -52,7 +53,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x505050 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				const light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				light.angle = Math.PI / 9;
 
@@ -67,11 +68,11 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				var geometry = new THREE.BoxBufferGeometry( 40, 40, 40 );
+				const geometry = new THREE.BoxBufferGeometry( 40, 40, 40 );
 
-				for ( var i = 0; i < 200; i ++ ) {
+				for ( let i = 0; i < 200; i ++ ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 					object.position.x = Math.random() * 1000 - 500;
 					object.position.y = Math.random() * 600 - 300;
@@ -147,7 +148,7 @@
 
 				if ( enableSelection === true ) {
 
-					var draggableObjects = controls.getObjects();
+					const draggableObjects = controls.getObjects();
 					draggableObjects.length = 0;
 
 					mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
@@ -155,11 +156,11 @@
 
 					raycaster.setFromCamera( mouse, camera );
 
-					var intersections = raycaster.intersectObjects( objects, true );
+					const intersections = raycaster.intersectObjects( objects, true );
 
 					if ( intersections.length > 0 ) {
 
-						var object = intersections[ 0 ].object;
+						const object = intersections[ 0 ].object;
 
 						if ( group.children.includes( object ) === true ) {
 

examples/misc_controls_fly.html

@@ -38,28 +38,29 @@
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 			import { FilmPass } from './jsm/postprocessing/FilmPass.js';
 
-			var radius = 6371;
-			var tilt = 0.41;
-			var rotationSpeed = 0.02;
+			const radius = 6371;
+			const tilt = 0.41;
+			const rotationSpeed = 0.02;
 
-			var cloudsScale = 1.005;
-			var moonScale = 0.23;
+			const cloudsScale = 1.005;
+			const moonScale = 0.23;
 
-			var MARGIN = 0;
-			var SCREEN_HEIGHT = window.innerHeight - MARGIN * 2;
-			var SCREEN_WIDTH = window.innerWidth;
+			const MARGIN = 0;
+			let SCREEN_HEIGHT = window.innerHeight - MARGIN * 2;
+			let SCREEN_WIDTH = window.innerWidth;
 
-			var camera, controls, scene, renderer, stats;
-			var geometry, meshPlanet, meshClouds, meshMoon;
-			var dirLight;
+			let camera, controls, scene, renderer, stats;
+			let geometry, meshPlanet, meshClouds, meshMoon;
+			let dirLight;
 
-			var composer;
+			let composer;
 
-			var textureLoader = new THREE.TextureLoader();
+			const textureLoader = new THREE.TextureLoader();
 
-			var d, dPlanet, dMoon, dMoonVec = new THREE.Vector3();
+			let d, dPlanet, dMoon;
+			const dMoonVec = new THREE.Vector3();
 
-			var clock = new THREE.Clock();
+			const clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -76,7 +77,7 @@
 				dirLight.position.set( - 1, 0, 1 ).normalize();
 				scene.add( dirLight );
 
-				var materialNormalMap = new THREE.MeshPhongMaterial( {
+				const materialNormalMap = new THREE.MeshPhongMaterial( {
 
 					specular: 0x333333,
 					shininess: 15,
@@ -85,7 +86,7 @@
 					normalMap: textureLoader.load( "textures/planets/earth_normal_2048.jpg" ),
 
 					// y scale is negated to compensate for normal map handedness.
-					normalScale: new THREE.Vector2( 0.85, -0.85 )
+					normalScale: new THREE.Vector2( 0.85, - 0.85 )
 
 				} );
 
@@ -100,7 +101,7 @@
 
 				// clouds
 
-				var materialClouds = new THREE.MeshLambertMaterial( {
+				const materialClouds = new THREE.MeshLambertMaterial( {
 
 					map: textureLoader.load( "textures/planets/earth_clouds_1024.png" ),
 					transparent: true
@@ -114,7 +115,7 @@
 
 				// moon
 
-				var materialMoon = new THREE.MeshPhongMaterial( {
+				const materialMoon = new THREE.MeshPhongMaterial( {
 
 					map: textureLoader.load( "textures/planets/moon_1024.jpg" )
 
@@ -127,14 +128,14 @@
 
 				// stars
 
-				var i, r = radius, starsGeometry = [ new THREE.BufferGeometry(), new THREE.BufferGeometry() ];
+				const r = radius, starsGeometry = [ new THREE.BufferGeometry(), new THREE.BufferGeometry() ];
 
-				var vertices1 = [];
-				var vertices2 = [];
+				const vertices1 = [];
+				const vertices2 = [];
 
-				var vertex = new THREE.Vector3();
+				const vertex = new THREE.Vector3();
 
-				for ( i = 0; i < 250; i ++ ) {
+				for ( let i = 0; i < 250; i ++ ) {
 
 					vertex.x = Math.random() * 2 - 1;
 					vertex.y = Math.random() * 2 - 1;
@@ -145,7 +146,7 @@
 
 				}
 
-				for ( i = 0; i < 1500; i ++ ) {
+				for ( let i = 0; i < 1500; i ++ ) {
 
 					vertex.x = Math.random() * 2 - 1;
 					vertex.y = Math.random() * 2 - 1;
@@ -159,8 +160,7 @@
 				starsGeometry[ 0 ].setAttribute( 'position', new THREE.Float32BufferAttribute( vertices1, 3 ) );
 				starsGeometry[ 1 ].setAttribute( 'position', new THREE.Float32BufferAttribute( vertices2, 3 ) );
 
-				var stars;
-				var starsMaterials = [
+				const starsMaterials = [
 					new THREE.PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
 					new THREE.PointsMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
 					new THREE.PointsMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
@@ -169,9 +169,9 @@
 					new THREE.PointsMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
 				];
 
-				for ( i = 10; i < 30; i ++ ) {
+				for ( let i = 10; i < 30; i ++ ) {
 
-					stars = new THREE.Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
+					const stars = new THREE.Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
 
 					stars.rotation.x = Math.random() * 6;
 					stars.rotation.y = Math.random() * 6;
@@ -209,8 +209,8 @@
 
 				// postprocessing
 
-				var renderModel = new RenderPass( scene, camera );
-				var effectFilm = new FilmPass( 0.35, 0.75, 2048, false );
+				const renderModel = new RenderPass( scene, camera );
+				const effectFilm = new FilmPass( 0.35, 0.75, 2048, false );
 
 				composer = new EffectComposer( renderer );
 
@@ -245,7 +245,7 @@
 
 				// rotate the planet and clouds
 
-				var delta = clock.getDelta();
+				const delta = clock.getDelta();
 
 				meshPlanet.rotation.y += rotationSpeed * delta;
 				meshClouds.rotation.y += 1.25 * rotationSpeed * delta;

examples/misc_controls_map.html

@@ -30,7 +30,7 @@
 
 			import { MapControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, controls, scene, renderer;
+			let camera, controls, scene, renderer;
 
 			init();
 			//render(); // remove when using next line for animation loop (requestAnimationFrame)
@@ -68,13 +68,13 @@
 
 				// world
 
-				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+				const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 				geometry.translate( 0, 0.5, 0 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
-				for ( var i = 0; i < 500; i ++ ) {
+				for ( let i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 1600 - 800;
 					mesh.position.y = 0;
 					mesh.position.z = Math.random() * 1600 - 800;
@@ -89,23 +89,23 @@
 
 				// lights
 
-				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 1, 1, 1 );
-				scene.add( light );
+				const dirLight1 = new THREE.DirectionalLight( 0xffffff );
+				dirLight1.position.set( 1, 1, 1 );
+				scene.add( dirLight1 );
 
-				var light = new THREE.DirectionalLight( 0x002288 );
-				light.position.set( - 1, - 1, - 1 );
-				scene.add( light );
+				const dirLight2 = new THREE.DirectionalLight( 0x002288 );
+				dirLight2.position.set( - 1, - 1, - 1 );
+				scene.add( dirLight2 );
 
-				var light = new THREE.AmbientLight( 0x222222 );
-				scene.add( light );
+				const ambientLight = new THREE.AmbientLight( 0x222222 );
+				scene.add( ambientLight );
 
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( controls, 'screenSpacePanning' );
 
 			}

examples/misc_controls_orbit.html

@@ -28,7 +28,7 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			var camera, controls, scene, renderer;
+			let camera, controls, scene, renderer;
 
 			init();
 			//render(); // remove when using next line for animation loop (requestAnimationFrame)
@@ -66,12 +66,12 @@
 
 				// world
 
-				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				const geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
+				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
-				for ( var i = 0; i < 500; i ++ ) {
+				for ( let i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 1600 - 800;
 					mesh.position.y = 0;
 					mesh.position.z = Math.random() * 1600 - 800;
@@ -83,16 +83,16 @@
 
 				// lights
 
-				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 1, 1, 1 );
-				scene.add( light );
+				const dirLight1 = new THREE.DirectionalLight( 0xffffff );
+				dirLight1.position.set( 1, 1, 1 );
+				scene.add( dirLight1 );
 
-				var light = new THREE.DirectionalLight( 0x002288 );
-				light.position.set( - 1, - 1, - 1 );
-				scene.add( light );
+				const dirLight2 = new THREE.DirectionalLight( 0x002288 );
+				dirLight2.position.set( - 1, - 1, - 1 );
+				scene.add( dirLight2 );
 
-				var light = new THREE.AmbientLight( 0x222222 );
-				scene.add( light );
+				const ambientLight = new THREE.AmbientLight( 0x222222 );
+				scene.add( ambientLight );
 
 				//
 

examples/misc_controls_pointerlock.html

@@ -62,23 +62,23 @@
 
 			import { PointerLockControls } from './jsm/controls/PointerLockControls.js';
 
-			var camera, scene, renderer, controls;
+			let camera, scene, renderer, controls;
 
-			var objects = [];
+			const objects = [];
 
-			var raycaster;
+			let raycaster;
 
-			var moveForward = false;
-			var moveBackward = false;
-			var moveLeft = false;
-			var moveRight = false;
-			var canJump = false;
+			let moveForward = false;
+			let moveBackward = false;
+			let moveLeft = false;
+			let moveRight = false;
+			let canJump = false;
 
-			var prevTime = performance.now();
-			var velocity = new THREE.Vector3();
-			var direction = new THREE.Vector3();
-			var vertex = new THREE.Vector3();
-			var color = new THREE.Color();
+			let prevTime = performance.now();
+			const velocity = new THREE.Vector3();
+			const direction = new THREE.Vector3();
+			const vertex = new THREE.Vector3();
+			const color = new THREE.Color();
 
 			init();
 			animate();
@@ -92,14 +92,14 @@
 				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
 
-				var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
+				const light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
 				light.position.set( 0.5, 1, 0.75 );
 				scene.add( light );
 
 				controls = new PointerLockControls( camera, document.body );
 
-				var blocker = document.getElementById( 'blocker' );
-				var instructions = document.getElementById( 'instructions' );
+				const blocker = document.getElementById( 'blocker' );
+				const instructions = document.getElementById( 'instructions' );
 
 				instructions.addEventListener( 'click', function () {
 
@@ -123,7 +123,7 @@
 
 				scene.add( controls.getObject() );
 
-				var onKeyDown = function ( event ) {
+				const onKeyDown = function ( event ) {
 
 					switch ( event.keyCode ) {
 
@@ -156,7 +156,7 @@
 
 				};
 
-				var onKeyUp = function ( event ) {
+				const onKeyUp = function ( event ) {
 
 					switch ( event.keyCode ) {
 
@@ -191,14 +191,14 @@
 
 				// floor
 
-				var floorGeometry = new THREE.PlaneBufferGeometry( 2000, 2000, 100, 100 );
+				let floorGeometry = new THREE.PlaneBufferGeometry( 2000, 2000, 100, 100 );
 				floorGeometry.rotateX( - Math.PI / 2 );
 
 				// vertex displacement
 
-				var position = floorGeometry.attributes.position;
+				let position = floorGeometry.attributes.position;
 
-				for ( var i = 0, l = position.count; i < l; i ++ ) {
+				for ( let i = 0, l = position.count; i < l; i ++ ) {
 
 					vertex.fromBufferAttribute( position, i );
 
@@ -213,45 +213,44 @@
 				floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices
 
 				position = floorGeometry.attributes.position;
-				var colors = [];
+				const colorsFloor = [];
 
-				for ( var i = 0, l = position.count; i < l; i ++ ) {
+				for ( let i = 0, l = position.count; i < l; i ++ ) {
 
 					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
-					colors.push( color.r, color.g, color.b );
+					colorsFloor.push( color.r, color.g, color.b );
 
 				}
 
-				floorGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				floorGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colorsFloor, 3 ) );
 
-				var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: true } );
+				const floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: true } );
 
-				var floor = new THREE.Mesh( floorGeometry, floorMaterial );
+				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				scene.add( floor );
 
 				// objects
 
-				var boxGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
-				boxGeometry = boxGeometry.toNonIndexed(); // ensure each face has unique vertices
+				const boxGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 ).toNonIndexed();
 
 				position = boxGeometry.attributes.position;
-				colors = [];
+				const colorsBox = [];
 
-				for ( var i = 0, l = position.count; i < l; i ++ ) {
+				for ( let i = 0, l = position.count; i < l; i ++ ) {
 
 					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
-					colors.push( color.r, color.g, color.b );
+					colorsBox.push( color.r, color.g, color.b );
 
 				}
 
-				boxGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				boxGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colorsBox, 3 ) );
 
-				for ( var i = 0; i < 500; i ++ ) {
+				for ( let i = 0; i < 500; i ++ ) {
 
-					var boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: true } );
+					const boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: true } );
 					boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
-					var box = new THREE.Mesh( boxGeometry, boxMaterial );
+					const box = new THREE.Mesh( boxGeometry, boxMaterial );
 					box.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
 					box.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
 					box.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
@@ -287,18 +286,18 @@
 
 				requestAnimationFrame( animate );
 
-				var time = performance.now();
+				const time = performance.now();
 
 				if ( controls.isLocked === true ) {
 
 					raycaster.ray.origin.copy( controls.getObject().position );
 					raycaster.ray.origin.y -= 10;
 
-					var intersections = raycaster.intersectObjects( objects );
+					const intersections = raycaster.intersectObjects( objects );
 
-					var onObject = intersections.length > 0;
+					const onObject = intersections.length > 0;
 
-					var delta = ( time - prevTime ) / 1000;
+					const delta = ( time - prevTime ) / 1000;
 
 					velocity.x -= velocity.x * 10.0 * delta;
 					velocity.z -= velocity.z * 10.0 * delta;

examples/misc_controls_trackball.html

@@ -31,20 +31,20 @@
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
-			var perspectiveCamera, orthographicCamera, controls, scene, renderer, stats;
+			let perspectiveCamera, orthographicCamera, controls, scene, renderer, stats;
 
-			var params = {
+			const params = {
 				orthographicCamera: false
 			};
 
-			var frustumSize = 400;
+			const frustumSize = 400;
 
 			init();
 			animate();
 
 			function init() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
 				perspectiveCamera = new THREE.PerspectiveCamera( 60, aspect, 1, 1000 );
 				perspectiveCamera.position.z = 500;
@@ -58,12 +58,12 @@
 				scene.background = new THREE.Color( 0xcccccc );
 				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
-				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				const geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
+				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
-				for ( var i = 0; i < 500; i ++ ) {
+				for ( let i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = ( Math.random() - 0.5 ) * 1000;
 					mesh.position.y = ( Math.random() - 0.5 ) * 1000;
 					mesh.position.z = ( Math.random() - 0.5 ) * 1000;
@@ -75,16 +75,16 @@
 
 				// lights
 
-				var light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 1, 1, 1 );
-				scene.add( light );
+				const dirLight1 = new THREE.DirectionalLight( 0xffffff );
+				dirLight1.position.set( 1, 1, 1 );
+				scene.add( dirLight1 );
 
-				var light = new THREE.DirectionalLight( 0x002288 );
-				light.position.set( - 1, - 1, - 1 );
-				scene.add( light );
+				const dirLight2 = new THREE.DirectionalLight( 0x002288 );
+				dirLight2.position.set( - 1, - 1, - 1 );
+				scene.add( dirLight2 );
 
-				var light = new THREE.AmbientLight( 0x222222 );
-				scene.add( light );
+				const ambientLight = new THREE.AmbientLight( 0x222222 );
+				scene.add( ambientLight );
 
 				// renderer
 
@@ -98,7 +98,7 @@
 
 				//
 
-				var gui = new GUI();
+				const gui = new GUI();
 				gui.add( params, 'orthographicCamera' ).name( 'use orthographic' ).onChange( function ( value ) {
 
 					controls.dispose();
@@ -129,7 +129,7 @@
 
 			function onWindowResize() {
 
-				var aspect = window.innerWidth / window.innerHeight;
+				const aspect = window.innerWidth / window.innerHeight;
 
 				perspectiveCamera.aspect = aspect;
 				perspectiveCamera.updateProjectionMatrix();
@@ -160,7 +160,7 @@
 
 			function render() {
 
-				var camera = ( params.orthographicCamera ) ? orthographicCamera : perspectiveCamera;
+				const camera = ( params.orthographicCamera ) ? orthographicCamera : perspectiveCamera;
 
 				renderer.render( scene, camera );
 

examples/misc_controls_transform.html

@@ -22,8 +22,8 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { TransformControls } from './jsm/controls/TransformControls.js';
 
-			var cameraPersp, cameraOrtho, currentCamera;
-			var scene, renderer, control, orbit;
+			let cameraPersp, cameraOrtho, currentCamera;
+			let scene, renderer, control, orbit;
 
 			init();
 			render();
@@ -47,15 +47,15 @@
 				scene = new THREE.Scene();
 				scene.add( new THREE.GridHelper( 1000, 10, 0x888888, 0x444444 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 2 );
+				const light = new THREE.DirectionalLight( 0xffffff, 2 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
+				const texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
 				texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
-				var material = new THREE.MeshLambertMaterial( { map: texture, transparent: true } );
+				const geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				const material = new THREE.MeshLambertMaterial( { map: texture, transparent: true } );
 
 				orbit = new OrbitControls( currentCamera, renderer.domElement );
 				orbit.update();
@@ -70,7 +70,7 @@
 
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				control.attach( mesh );

examples/misc_exporter_collada.html

@@ -27,37 +27,37 @@
 			////////////////////////////////////////////////////////////////////////////////
 			/*global window */
 
-			var camera, scene, renderer;
-			var cameraControls;
-			var effectController;
-			var teapotSize = 400;
-			var ambientLight, light;
-
-			var tess = - 1;	// force initialization
-			var bBottom;
-			var bLid;
-			var bBody;
-			var bFitLid;
-			var bNonBlinn;
-			var shading;
-			var wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, normalMaterial, reflectiveMaterial;
-
-			var teapot, textureCube;
+			let camera, scene, renderer;
+			let cameraControls;
+			let effectController;
+			const teapotSize = 400;
+			let ambientLight, light;
+
+			let tess = - 1;	// force initialization
+			let bBottom;
+			let bLid;
+			let bBody;
+			let bFitLid;
+			let bNonBlinn;
+			let shading;
+			let wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, normalMaterial, reflectiveMaterial;
+
+			let teapot, textureCube;
 
 			// allocate these just once
-			var diffuseColor = new THREE.Color();
-			var specularColor = new THREE.Color();
+			const diffuseColor = new THREE.Color();
+			const specularColor = new THREE.Color();
 
 			init();
 			render();
 
 			function init() {
 
-				var container = document.createElement( 'div' );
+				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var canvasWidth = window.innerWidth;
-				var canvasHeight = window.innerHeight;
+				const canvasWidth = window.innerWidth;
+				const canvasHeight = window.innerHeight;
 
 				// CAMERA
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
@@ -84,21 +84,21 @@
 				cameraControls.addEventListener( 'change', render );
 
 				// TEXTURE MAP
-				var loader = new THREE.TextureLoader();
+				const loader = new THREE.TextureLoader();
 
-				var textureMap = loader.load( 'textures/uv_grid_opengl.jpg' );
+				const textureMap = loader.load( 'textures/uv_grid_opengl.jpg' );
 				textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
 				textureMap.anisotropy = 16;
 				textureMap.encoding = THREE.sRGBEncoding;
 
 				// NORMAL MAP
 
-				var diffuseMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
-				var normalMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
+				const diffuseMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
+				const normalMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
 
 				// REFLECTION MAP
-				var path = "textures/cube/pisa/";
-				var urls = [
+				const path = "textures/cube/pisa/";
+				const urls = [
 					path + "px.png", path + "nx.png",
 					path + "py.png", path + "ny.png",
 					path + "pz.png", path + "nz.png"
@@ -108,7 +108,7 @@
 				textureCube.encoding = THREE.sRGBEncoding;
 
 				// MATERIALS
-				var materialColor = new THREE.Color();
+				const materialColor = new THREE.Color();
 				materialColor.setRGB( 1.0, 1.0, 1.0 );
 
 				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
@@ -141,8 +141,8 @@
 
 			function onWindowResize() {
 
-				var canvasWidth = window.innerWidth;
-				var canvasHeight = window.innerHeight;
+				const canvasWidth = window.innerWidth;
+				const canvasHeight = window.innerHeight;
 
 				renderer.setSize( canvasWidth, canvasHeight );
 
@@ -185,9 +185,9 @@
 					newShading: "glossy"
 				};
 
-				var h;
+				let h;
 
-				var gui = new GUI();
+				const gui = new GUI();
 
 				// material (attributes)
 
@@ -235,7 +235,7 @@
 
 				gui.add( effectController, "newShading", [ "wireframe", "flat", "smooth", "glossy", "textured", "normal", "reflective" ] ).name( "Shading" ).onChange( render );
 
-				var exportButton = document.getElementById( 'export' );
+				const exportButton = document.getElementById( 'export' );
 				exportButton.addEventListener( 'click', exportCollada );
 
 			}
@@ -327,7 +327,7 @@
 
 				}
 
-				var teapotGeometry = new TeapotBufferGeometry( teapotSize,
+				const teapotGeometry = new TeapotBufferGeometry( teapotSize,
 					tess,
 					effectController.bottom,
 					effectController.lid,
@@ -348,24 +348,26 @@
 
 			}
 
-			var exporter = new ColladaExporter();
+			const exporter = new ColladaExporter();
 
 			function exportCollada() {
 
-				var result = exporter.parse( teapot );
-				var material_type = "Phong";
+				const result = exporter.parse( teapot );
+				let materialType = "Phong";
+
 				if ( shading === "wireframe" ) {
 
-					material_type = "Constant";
+					materialType = "Constant";
 
 				}
+
 				if ( shading === "smooth" ) {
 
-					material_type = "Lambert";
+					materialType = "Lambert";
 
 				}
 
-				saveString( result.data, 'teapot_' + shading + "_" + material_type + '.dae' );
+				saveString( result.data, 'teapot_' + shading + "_" + materialType + '.dae' );
 
 				result.textures.forEach( tex => {
 
@@ -395,7 +397,7 @@
 
 			}
 
-			var link = document.createElement( 'a' );
+			const link = document.createElement( 'a' );
 			link.style.display = 'none';
 			document.body.appendChild( link );
 

examples/misc_exporter_draco.html

@@ -33,7 +33,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { DRACOExporter } from './jsm/exporters/DRACOExporter.js';
 
-			var scene, camera, renderer, exporter, mesh;
+			let scene, camera, renderer, exporter, mesh;
 
 			init();
 			animate();
@@ -42,8 +42,8 @@
 
 				scene.remove( mesh );
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				const geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
+				const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
@@ -55,8 +55,8 @@
 
 				scene.remove( mesh );
 
-				var geometry = new THREE.TorusKnotGeometry( 50, 15, 200, 30 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				const geometry = new THREE.TorusKnotGeometry( 50, 15, 200, 30 );
+				const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
@@ -77,11 +77,11 @@
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				directionalLight.position.set( 0, 200, 100 );
 				directionalLight.castShadow = true;
 				directionalLight.shadow.camera.top = 180;
@@ -92,7 +92,7 @@
 
 				// ground
 
-				var ground = new THREE.Mesh(
+				const ground = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 2000, 2000 ),
 					new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } )
 				);
@@ -101,7 +101,7 @@
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				grid.position.y = - 75;
@@ -109,8 +109,8 @@
 
 				// export mesh
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				const geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
+				const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
@@ -126,7 +126,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 25, 0 );
 				controls.update();
 
@@ -134,13 +134,13 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var createGeometryButton = document.getElementById( 'createGeometry' );
+				const createGeometryButton = document.getElementById( 'createGeometry' );
 				createGeometryButton.addEventListener( 'click', createGeometry );
 
-				var createBufferGeometryButton = document.getElementById( 'createBufferGeometry' );
+				const createBufferGeometryButton = document.getElementById( 'createBufferGeometry' );
 				createBufferGeometryButton.addEventListener( 'click', createBufferGeometry );
 
-				var exportButton = document.getElementById( 'exportFile' );
+				const exportButton = document.getElementById( 'exportFile' );
 				exportButton.addEventListener( 'click', exportFile );
 
 			}
@@ -163,12 +163,12 @@
 
 			function exportFile() {
 
-				var result = exporter.parse( mesh.geometry );
+				const result = exporter.parse( mesh.geometry );
 				saveArrayBuffer( result, 'file.drc' );
 
 			}
 
-			var link = document.createElement( 'a' );
+			const link = document.createElement( 'a' );
 			link.style.display = 'none';
 			document.body.appendChild( link );
 

examples/misc_exporter_gltf.html

@@ -33,9 +33,9 @@
 
 			function exportGLTF( input ) {
 
-				var gltfExporter = new GLTFExporter();
+				const gltfExporter = new GLTFExporter();
 
-				var options = {
+				const options = {
 					trs: document.getElementById( 'option_trs' ).checked,
 					onlyVisible: document.getElementById( 'option_visible' ).checked,
 					truncateDrawRange: document.getElementById( 'option_drawrange' ).checked,
@@ -51,7 +51,7 @@
 
 					} else {
 
-						var output = JSON.stringify( result, null, 2 );
+						const output = JSON.stringify( result, null, 2 );
 						console.log( output );
 						saveString( output, 'scene.gltf' );
 
@@ -98,7 +98,7 @@
 			} );
 
 
-			var link = document.createElement( 'a' );
+			const link = document.createElement( 'a' );
 			link.style.display = 'none';
 			document.body.appendChild( link ); // Firefox workaround, see #6594
 
@@ -125,10 +125,10 @@
 
 			}
 
-			var container;
+			let container;
 
-			var camera, object, scene1, scene2, renderer;
-			var gridHelper, sphere, waltHead;
+			let camera, object, object2, material, geometry, scene1, scene2, renderer;
+			let gridHelper, sphere, waltHead;
 
 			init();
 			animate();
@@ -153,19 +153,19 @@
 				// ---------------------------------------------------------------------
 				// Ambient light
 				// ---------------------------------------------------------------------
-				var light = new THREE.AmbientLight( 0xffffff, 0.2 );
-				light.name = 'AmbientLight';
-				scene1.add( light );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
+				ambientLight.name = 'AmbientLight';
+				scene1.add( ambientLight );
 
 				// ---------------------------------------------------------------------
 				// DirectLight
 				// ---------------------------------------------------------------------
-				light = new THREE.DirectionalLight( 0xffffff, 1 );
-				light.target.position.set( 0, 0, - 1 );
-				light.add( light.target );
-				light.lookAt( - 1, - 1, 0 );
-				light.name = 'DirectionalLight';
-				scene1.add( light );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				dirLight.target.position.set( 0, 0, - 1 );
+				dirLight.add( dirLight.target );
+				dirLight.lookAt( - 1, - 1, 0 );
+				dirLight.name = 'DirectionalLight';
+				scene1.add( dirLight );
 
 				// ---------------------------------------------------------------------
 				// Grid
@@ -178,7 +178,7 @@
 				// ---------------------------------------------------------------------
 				// Axes
 				// ---------------------------------------------------------------------
-				var axes = new THREE.AxesHelper( 500 );
+				const axes = new THREE.AxesHelper( 500 );
 				axes.name = "AxesHelper";
 				scene1.add( axes );
 
@@ -186,9 +186,9 @@
 				// Simple geometry with basic material
 				// ---------------------------------------------------------------------
 				// Icosahedron
-				var mapGrid = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
+				const mapGrid = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 				mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;
-				var material = new THREE.MeshBasicMaterial( {
+				material = new THREE.MeshBasicMaterial( {
 					color: 0xffffff,
 					map: mapGrid
 				} );
@@ -259,7 +259,7 @@
 				// ---------------------------------------------------------------------
 				// Hierarchy
 				// ---------------------------------------------------------------------
-				var mapWood = new THREE.TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
+				const mapWood = new THREE.TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
 				material = new THREE.MeshStandardMaterial( { map: mapWood, side: THREE.DoubleSide } );
 
 				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 100, 100 ), material );
@@ -267,7 +267,7 @@
 				object.name = "Cube";
 				scene1.add( object );
 
-				var object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 40, 40, 2, 2, 2 ), material );
+				object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 40, 40, 2, 2, 2 ), material );
 				object2.position.set( 0, 0, 50 );
 				object2.rotation.set( 0, 45, 0 );
 				object2.name = "SubCube";
@@ -277,11 +277,11 @@
 				// ---------------------------------------------------------------------
 				// Groups
 				// ---------------------------------------------------------------------
-				var group1 = new THREE.Group();
+				const group1 = new THREE.Group();
 				group1.name = "Group";
 				scene1.add( group1 );
 
-				var group2 = new THREE.Group();
+				const group2 = new THREE.Group();
 				group2.name = "subGroup";
 				group2.position.set( 0, 50, 0 );
 				group1.add( group2 );
@@ -294,11 +294,11 @@
 				// ---------------------------------------------------------------------
 				// THREE.Line Strip
 				// ---------------------------------------------------------------------
-				var geometry = new THREE.BufferGeometry();
-				var numPoints = 100;
-				var positions = new Float32Array( numPoints * 3 );
+				geometry = new THREE.BufferGeometry();
+				let numPoints = 100;
+				let positions = new Float32Array( numPoints * 3 );
 
-				for ( var i = 0; i < numPoints; i ++ ) {
+				for ( let i = 0; i < numPoints; i ++ ) {
 
 					positions[ i * 3 ] = i;
 					positions[ i * 3 + 1 ] = Math.sin( i / 2 ) * 20;
@@ -311,18 +311,17 @@
 				object.position.set( - 50, 0, - 200 );
 				scene1.add( object );
 
-
 				// ---------------------------------------------------------------------
 				// THREE.Line Loop
 				// ---------------------------------------------------------------------
-				var geometry = new THREE.BufferGeometry();
-				var numPoints = 5;
-				var radius = 70;
-				var positions = new Float32Array( numPoints * 3 );
+				geometry = new THREE.BufferGeometry();
+				numPoints = 5;
+				const radius = 70;
+				positions = new Float32Array( numPoints * 3 );
 
-				for ( var i = 0; i < numPoints; i ++ ) {
+				for ( let i = 0; i < numPoints; i ++ ) {
 
-					var s = i * Math.PI * 2 / numPoints;
+					const s = i * Math.PI * 2 / numPoints;
 					positions[ i * 3 ] = radius * Math.sin( s );
 					positions[ i * 3 + 1 ] = radius * Math.cos( s );
 					positions[ i * 3 + 2 ] = 0;
@@ -338,12 +337,12 @@
 				// ---------------------------------------------------------------------
 				// Buffer geometry truncated (DrawRange)
 				// ---------------------------------------------------------------------
-				var geometry = new THREE.BufferGeometry();
-				var numElements = 6;
-				var outOfRange = 3;
+				geometry = new THREE.BufferGeometry();
+				const numElements = 6;
+				const outOfRange = 3;
 
-				var positions = new Float32Array( ( numElements + outOfRange ) * 3 );
-				var colors = new Float32Array( ( numElements + outOfRange ) * 3 );
+				positions = new Float32Array( ( numElements + outOfRange ) * 3 );
+				const colors = new Float32Array( ( numElements + outOfRange ) * 3 );
 
 				positions.set( [
 					0, 0, 0,
@@ -376,9 +375,9 @@
 				// ---------------------------------------------------------------------
 				// THREE.Points
 				// ---------------------------------------------------------------------
-				var numPoints = 100;
-				var pointsArray = new Float32Array( numPoints * 3 );
-				for ( var i = 0; i < numPoints; i ++ ) {
+				numPoints = 100;
+				const pointsArray = new Float32Array( numPoints * 3 );
+				for ( let i = 0; i < numPoints; i ++ ) {
 
 					pointsArray[ 3 * i ] = - 50 + Math.random() * 100;
 					pointsArray[ 3 * i + 1 ] = Math.random() * 100;
@@ -386,19 +385,19 @@
 
 				}
 
-				var pointsGeo = new THREE.BufferGeometry();
+				const pointsGeo = new THREE.BufferGeometry();
 				pointsGeo.setAttribute( 'position', new THREE.BufferAttribute( pointsArray, 3 ) );
 
-				var pointsMaterial = new THREE.PointsMaterial( { color: 0xffff00, size: 5 } );
-				var points = new THREE.Points( pointsGeo, pointsMaterial );
-				points.name = "Points";
-				points.position.set( - 200, 0, - 200 );
-				scene1.add( points );
+				const pointsMaterial = new THREE.PointsMaterial( { color: 0xffff00, size: 5 } );
+				const pointCloud = new THREE.Points( pointsGeo, pointsMaterial );
+				pointCloud.name = "Points";
+				pointCloud.position.set( - 200, 0, - 200 );
+				scene1.add( pointCloud );
 
 				// ---------------------------------------------------------------------
 				// Ortho camera
 				// ---------------------------------------------------------------------
-				var cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );
+				const cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );
 				scene1.add( cameraOrtho );
 				cameraOrtho.name = 'OrthographicCamera';
 
@@ -420,9 +419,9 @@
 				scene1.add( object );
 
 				//
-				var points = [];
+				const points = [];
 
-				for ( var i = 0; i < 50; i ++ ) {
+				for ( let i = 0; i < 50; i ++ ) {
 
 					points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
 
@@ -447,7 +446,7 @@
 				// ---------------------------------------------------------------------
 				//
 				//
-				var loader = new OBJLoader();
+				const loader = new OBJLoader();
 				loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {
 
 					waltHead = obj;
@@ -503,7 +502,7 @@
 
 			function render() {
 
-				var timer = Date.now() * 0.0001;
+				const timer = Date.now() * 0.0001;
 
 				camera.position.x = Math.cos( timer ) * 800;
 				camera.position.z = Math.sin( timer ) * 800;

examples/misc_exporter_obj.html

@@ -39,14 +39,14 @@
 
 			import { OBJExporter } from './jsm/exporters/OBJExporter.js';
 
-			var camera, scene, light, renderer;
-			var exportButton, floatingDiv;
-			var mouseX = 0, mouseY = 0;
+			let camera, scene, light, renderer;
+			let exportButton, floatingDiv;
+			let mouseX = 0, mouseY = 0;
 
 			function exportToObj() {
 
-				var exporter = new OBJExporter();
-				var result = exporter.parse( scene );
+				const exporter = new OBJExporter();
+				const result = exporter.parse( scene );
 				floatingDiv.style.display = 'block';
 				floatingDiv.innerHTML = result.split( '\n' ).join( '<br />' );
 
@@ -54,9 +54,9 @@
 
 			function addGeometry( type ) {
 
-				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 ];
 
 					if ( child.isMesh ) {
 
@@ -70,39 +70,39 @@
 
 				if ( type === 1 ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
-					var geometry = generateTriangleGeometry();
+					const material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
+					const geometry = generateTriangleGeometry();
 
 					scene.add( new THREE.Mesh( geometry, material ) );
 
 
 				} else if ( type === 2 ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
-					var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
+					const material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
+					const geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 					scene.add( new THREE.Mesh( geometry, material ) );
 
 				} else if ( type === 3 ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
-					var geometry = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
+					const material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
+					const geometry = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
 					scene.add( new THREE.Mesh( geometry, material ) );
 
 				} else if ( type === 4 || type === 5 ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
-					var geometry = generateTriangleGeometry();
+					const material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
+					const geometry = generateTriangleGeometry();
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = - 200;
 					scene.add( mesh );
 
-					var geometry2 = new THREE.BoxBufferGeometry( 100, 100, 100 );
-					var mesh2 = new THREE.Mesh( geometry2, material );
+					const geometry2 = new THREE.BoxBufferGeometry( 100, 100, 100 );
+					const mesh2 = new THREE.Mesh( geometry2, material );
 					scene.add( mesh2 );
 
-					var geometry3 = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
-					var mesh3 = new THREE.Mesh( geometry3, material );
+					const geometry3 = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
+					const mesh3 = new THREE.Mesh( geometry3, material );
 					mesh3.position.x = 200;
 					scene.add( mesh3 );
 
@@ -181,8 +181,8 @@
 
 			function onWindowClick( event ) {
 
-				var needToClose = true;
-				var target = event.target;
+				let needToClose = true;
+				let target = event.target;
 
 				while ( target !== null ) {
 
@@ -216,8 +216,8 @@
 
 			function onDocumentMouseMove( event ) {
 
-				var windowHalfX = window.innerWidth / 2;
-				var windowHalfY = window.innerHeight / 2;
+				const windowHalfX = window.innerWidth / 2;
+				const windowHalfY = window.innerHeight / 2;
 				mouseX = ( event.clientX - windowHalfX ) / 2;
 				mouseY = ( event.clientY - windowHalfY ) / 2;
 
@@ -238,8 +238,8 @@
 
 			function generateTriangleGeometry() {
 
-				var geometry = new THREE.BufferGeometry();
-				var vertices = [];
+				const geometry = new THREE.BufferGeometry();
+				const vertices = [];
 
 				vertices.push( - 50, - 50, 0 );
 				vertices.push( 50, - 50, 0 );

examples/misc_exporter_ply.html

@@ -19,7 +19,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { PLYExporter } from './jsm/exporters/PLYExporter.js';
 
-			var scene, camera, renderer, exporter, mesh;
+			let scene, camera, renderer, exporter, mesh;
 
 			init();
 			animate();
@@ -37,11 +37,11 @@
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff );
 				directionalLight.position.set( 0, 200, 100 );
 				directionalLight.castShadow = true;
 				directionalLight.shadow.camera.top = 180;
@@ -52,20 +52,20 @@
 
 				// ground
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				const ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				scene.add( grid );
 
 				// export mesh
 
-				var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				const geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
+				const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
 
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
@@ -82,7 +82,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 25, 0 );
 				controls.update();
 
@@ -90,14 +90,14 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var buttonExportASCII = document.getElementById( 'exportASCII' );
+				const buttonExportASCII = document.getElementById( 'exportASCII' );
 				buttonExportASCII.addEventListener( 'click', exportASCII );
 
-				var buttonExportBinary = document.getElementById( 'exportBinaryBigEndian' );
-				buttonExportBinary.addEventListener( 'click', exportBinaryBigEndian );
+				const buttonExportBinaryBE = document.getElementById( 'exportBinaryBigEndian' );
+				buttonExportBinaryBE.addEventListener( 'click', exportBinaryBigEndian );
 
-				var buttonExportBinary = document.getElementById( 'exportBinaryLittleEndian' );
-				buttonExportBinary.addEventListener( 'click', exportBinaryLittleEndian );
+				const buttonExportBinaryLE = document.getElementById( 'exportBinaryLittleEndian' );
+				buttonExportBinaryLE.addEventListener( 'click', exportBinaryLittleEndian );
 
 			}
 
@@ -147,7 +147,7 @@
 
 			}
 
-			var link = document.createElement( 'a' );
+			const link = document.createElement( 'a' );
 			link.style.display = 'none';
 			document.body.appendChild( link );
 

examples/misc_exporter_stl.html

@@ -19,7 +19,7 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { STLExporter } from './jsm/exporters/STLExporter.js';
 
-			var scene, camera, renderer, exporter, mesh;
+			let scene, camera, renderer, exporter, mesh;
 
 			init();
 			animate();
@@ -37,11 +37,11 @@
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff );
 				directionalLight.position.set( 0, 200, 100 );
 				directionalLight.castShadow = true;
 				directionalLight.shadow.camera.top = 180;
@@ -52,20 +52,20 @@
 
 				// ground
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				const ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				scene.add( grid );
 
 				// export mesh
 
-				var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				const geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
+				const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
 
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
@@ -82,7 +82,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 25, 0 );
 				controls.update();
 
@@ -90,10 +90,10 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var buttonExportASCII = document.getElementById( 'exportASCII' );
+				const buttonExportASCII = document.getElementById( 'exportASCII' );
 				buttonExportASCII.addEventListener( 'click', exportASCII );
 
-				var buttonExportBinary = document.getElementById( 'exportBinary' );
+				const buttonExportBinary = document.getElementById( 'exportBinary' );
 				buttonExportBinary.addEventListener( 'click', exportBinary );
 
 			}
@@ -116,19 +116,19 @@
 
 			function exportASCII() {
 
-				var result = exporter.parse( mesh );
+				const result = exporter.parse( mesh );
 				saveString( result, 'box.stl' );
 
 			}
 
 			function exportBinary() {
 
-				var result = exporter.parse( mesh, { binary: true } );
+				const result = exporter.parse( mesh, { binary: true } );
 				saveArrayBuffer( result, 'box.stl' );
 
 			}
 
-			var link = document.createElement( 'a' );
+			const link = document.createElement( 'a' );
 			link.style.display = 'none';
 			document.body.appendChild( link );
 

examples/misc_lookat.html

@@ -25,14 +25,14 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
-			var camera, scene, renderer, stats;
+			let camera, scene, renderer, stats;
 
-			var sphere;
+			let sphere;
 
-			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 );
 
@@ -51,14 +51,14 @@
 				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() );
 				scene.add( sphere );
 
-				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 100, 12 );
+				const geometry = new THREE.CylinderBufferGeometry( 0, 10, 100, 12 );
 				geometry.rotateX( Math.PI / 2 );
 
-				var material = new THREE.MeshNormalMaterial();
+				const material = new THREE.MeshNormalMaterial();
 
-				for ( var i = 0; i < 1000; i ++ ) {
+				for ( let i = 0; i < 1000; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					const mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 4000 - 2000;
 					mesh.position.y = Math.random() * 4000 - 2000;
 					mesh.position.z = Math.random() * 4000 - 2000;
@@ -113,13 +113,13 @@
 
 			function render() {
 
-				var time = Date.now() * 0.0005;
+				const time = Date.now() * 0.0005;
 
 				sphere.position.x = Math.sin( time * 0.7 ) * 2000;
 				sphere.position.y = Math.cos( time * 0.5 ) * 2000;
 				sphere.position.z = Math.cos( time * 0.3 ) * 2000;
 
-				for ( var i = 1, l = scene.children.length; i < l; i ++ ) {
+				for ( let i = 1, l = scene.children.length; i < l; i ++ ) {
 
 					scene.children[ i ].lookAt( sphere.position );
 

examples/misc_uv_tests.html

@@ -37,7 +37,7 @@
 
 			function test( name, geometry ) {
 
-				var d = document.createElement( 'div' );
+				const d = document.createElement( 'div' );
 
 				d.innerHTML = '<h3>' + name + '</h3>';
 
@@ -47,9 +47,9 @@
 
 			}
 
-			var points = [];
+			const points = [];
 
-			for ( var i = 0; i < 10; i ++ ) {
+			for ( let i = 0; i < 10; i ++ ) {
 
 				points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
 

examples/physics_ammo_break.html

@@ -29,44 +29,46 @@
 		// - Global variables -
 
 		// Graphics variables
-		var container, stats;
-		var camera, controls, scene, renderer;
-		var textureLoader;
-		var clock = new THREE.Clock();
+		let container, stats;
+		let camera, controls, scene, renderer;
+		let textureLoader;
+		const clock = new THREE.Clock();
 
-		var mouseCoords = new THREE.Vector2();
-		var raycaster = new THREE.Raycaster();
-		var ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );
+		const mouseCoords = new THREE.Vector2();
+		const raycaster = new THREE.Raycaster();
+		const ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );
 
 		// Physics variables
-		var gravityConstant = 7.8;
-		var collisionConfiguration;
-		var dispatcher;
-		var broadphase;
-		var solver;
-		var physicsWorld;
-		var margin = 0.05;
+		const gravityConstant = 7.8;
+		let collisionConfiguration;
+		let dispatcher;
+		let broadphase;
+		let solver;
+		let physicsWorld;
+		const margin = 0.05;
 
-		var convexBreaker = new ConvexObjectBreaker();
+		const convexBreaker = new ConvexObjectBreaker();
 
 		// Rigid bodies include all movable objects
-		var rigidBodies = [];
+		const rigidBodies = [];
 
-		var pos = new THREE.Vector3();
-		var quat = new THREE.Quaternion();
-		var transformAux1;
-		var tempBtVec3_1;
+		const pos = new THREE.Vector3();
+		const quat = new THREE.Quaternion();
+		let transformAux1;
+		let tempBtVec3_1;
 
-		var objectsToRemove = [];
-		for ( var i = 0; i < 500; i ++ ) {
+		const objectsToRemove = [];
+
+		for ( let i = 0; i < 500; i ++ ) {
 
 			objectsToRemove[ i ] = null;
 
 		}
-		var numObjectsToRemove = 0;
 
-		var impactPoint = new THREE.Vector3();
-		var impactNormal = new THREE.Vector3();
+		let numObjectsToRemove = 0;
+
+		const impactPoint = new THREE.Vector3();
+		const impactNormal = new THREE.Vector3();
 
 		// - Main code -
 
@@ -117,13 +119,13 @@
 
 			textureLoader = new THREE.TextureLoader();
 
-			var ambientLight = new THREE.AmbientLight( 0x707070 );
+			const ambientLight = new THREE.AmbientLight( 0x707070 );
 			scene.add( ambientLight );
 
-			var light = new THREE.DirectionalLight( 0xffffff, 1 );
+			const light = new THREE.DirectionalLight( 0xffffff, 1 );
 			light.position.set( - 10, 18, 5 );
 			light.castShadow = true;
-			var d = 14;
+			const d = 14;
 			light.shadow.camera.left = - d;
 			light.shadow.camera.right = d;
 			light.shadow.camera.top = d;
@@ -166,7 +168,7 @@
 
 		function createObject( mass, halfExtents, pos, quat, material ) {
 
-			var object = new THREE.Mesh( new THREE.BoxBufferGeometry( halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2 ), material );
+			const object = new THREE.Mesh( new THREE.BoxBufferGeometry( halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2 ), material );
 			object.position.copy( pos );
 			object.quaternion.copy( quat );
 			convexBreaker.prepareBreakableObject( object, mass, new THREE.Vector3(), new THREE.Vector3(), true );
@@ -179,7 +181,7 @@
 			// Ground
 			pos.set( 0, - 0.5, 0 );
 			quat.set( 0, 0, 0, 1 );
-			var ground = createParalellepipedWithPhysics( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+			const ground = createParalellepipedWithPhysics( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
 			ground.receiveShadow = true;
 			textureLoader.load( "textures/grid.png", function ( texture ) {
 
@@ -192,8 +194,8 @@
 			} );
 
 			// Tower 1
-			var towerMass = 1000;
-			var towerHalfExtents = new THREE.Vector3( 2, 5, 2 );
+			const towerMass = 1000;
+			const towerHalfExtents = new THREE.Vector3( 2, 5, 2 );
 			pos.set( - 8, 5, 0 );
 			quat.set( 0, 0, 0, 1 );
 			createObject( towerMass, towerHalfExtents, pos, quat, createMaterial( 0xB03014 ) );
@@ -204,18 +206,18 @@
 			createObject( towerMass, towerHalfExtents, pos, quat, createMaterial( 0xB03214 ) );
 
 			//Bridge
-			var bridgeMass = 100;
-			var bridgeHalfExtents = new THREE.Vector3( 7, 0.2, 1.5 );
+			const bridgeMass = 100;
+			const bridgeHalfExtents = new THREE.Vector3( 7, 0.2, 1.5 );
 			pos.set( 0, 10.2, 0 );
 			quat.set( 0, 0, 0, 1 );
 			createObject( bridgeMass, bridgeHalfExtents, pos, quat, createMaterial( 0xB3B865 ) );
 
 			// Stones
-			var stoneMass = 120;
-			var stoneHalfExtents = new THREE.Vector3( 1, 2, 0.15 );
-			var numStones = 8;
+			const stoneMass = 120;
+			const stoneHalfExtents = new THREE.Vector3( 1, 2, 0.15 );
+			const numStones = 8;
 			quat.set( 0, 0, 0, 1 );
-			for ( var i = 0; i < numStones; i ++ ) {
+			for ( let i = 0; i < numStones; i ++ ) {
 
 				pos.set( 0, 2, 15 * ( 0.5 - i / ( numStones + 1 ) ) );
 
@@ -224,17 +226,17 @@
 			}
 
 			// Mountain
-			var mountainMass = 860;
-			var mountainHalfExtents = new THREE.Vector3( 4, 5, 4 );
+			const mountainMass = 860;
+			const mountainHalfExtents = new THREE.Vector3( 4, 5, 4 );
 			pos.set( 5, mountainHalfExtents.y * 0.5, - 7 );
 			quat.set( 0, 0, 0, 1 );
-			var mountainPoints = [];
+			const mountainPoints = [];
 			mountainPoints.push( new THREE.Vector3( mountainHalfExtents.x, - mountainHalfExtents.y, mountainHalfExtents.z ) );
 			mountainPoints.push( new THREE.Vector3( - mountainHalfExtents.x, - mountainHalfExtents.y, mountainHalfExtents.z ) );
 			mountainPoints.push( new THREE.Vector3( mountainHalfExtents.x, - mountainHalfExtents.y, - mountainHalfExtents.z ) );
 			mountainPoints.push( new THREE.Vector3( - mountainHalfExtents.x, - mountainHalfExtents.y, - mountainHalfExtents.z ) );
 			mountainPoints.push( new THREE.Vector3( 0, mountainHalfExtents.y, 0 ) );
-			var mountain = new THREE.Mesh( new ConvexBufferGeometry( mountainPoints ), createMaterial( 0xB03814 ) );
+			const mountain = new THREE.Mesh( new ConvexBufferGeometry( mountainPoints ), createMaterial( 0xB03814 ) );
 			mountain.position.copy( pos );
 			mountain.quaternion.copy( quat );
 			convexBreaker.prepareBreakableObject( mountain, mountainMass, new THREE.Vector3(), new THREE.Vector3(), true );
@@ -244,8 +246,8 @@
 
 		function createParalellepipedWithPhysics( sx, sy, sz, mass, pos, quat, material ) {
 
-			var object = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
-			var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
+			const object = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
+			const shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 			shape.setMargin( margin );
 
 			createRigidBody( object, shape, mass, pos, quat );
@@ -259,13 +261,13 @@
 			object.castShadow = true;
 			object.receiveShadow = true;
 
-			var shape = createConvexHullPhysicsShape( object.geometry.attributes.position.array );
+			const shape = createConvexHullPhysicsShape( object.geometry.attributes.position.array );
 			shape.setMargin( margin );
 
-			var body = createRigidBody( object, shape, object.userData.mass, null, null, object.userData.velocity, object.userData.angularVelocity );
+			const body = createRigidBody( object, shape, object.userData.mass, null, null, object.userData.velocity, object.userData.angularVelocity );
 
 			// Set pointer back to the three object only in the debris objects
-			var btVecUserData = new Ammo.btVector3( 0, 0, 0 );
+			const btVecUserData = new Ammo.btVector3( 0, 0, 0 );
 			btVecUserData.threeObject = object;
 			body.setUserPointer( btVecUserData );
 
@@ -281,12 +283,12 @@
 
 		function createConvexHullPhysicsShape( coords ) {
 
-			var shape = new Ammo.btConvexHullShape();
+			const shape = new Ammo.btConvexHullShape();
 
-			for ( var i = 0, il = coords.length; i < il; i += 3 ) {
+			for ( let i = 0, il = coords.length; i < il; i += 3 ) {
 
 				tempBtVec3_1.setValue( coords[ i ], coords[ i + 1 ], coords[ i + 2 ] );
-				var lastOne = ( i >= ( il - 3 ) );
+				const lastOne = ( i >= ( il - 3 ) );
 				shape.addPoint( tempBtVec3_1, lastOne );
 
 			}
@@ -306,6 +308,7 @@
 				pos = object.position;
 
 			}
+
 			if ( quat ) {
 
 				object.quaternion.copy( quat );
@@ -316,17 +319,17 @@
 
 			}
 
-			var transform = new Ammo.btTransform();
+			const transform = new Ammo.btTransform();
 			transform.setIdentity();
 			transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
 			transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) );
-			var motionState = new Ammo.btDefaultMotionState( transform );
+			const motionState = new Ammo.btDefaultMotionState( transform );
 
-			var localInertia = new Ammo.btVector3( 0, 0, 0 );
+			const localInertia = new Ammo.btVector3( 0, 0, 0 );
 			physicsShape.calculateLocalInertia( mass, localInertia );
 
-			var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
-			var body = new Ammo.btRigidBody( rbInfo );
+			const rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
+			const body = new Ammo.btRigidBody( rbInfo );
 
 			body.setFriction( 0.5 );
 
@@ -335,6 +338,7 @@
 				body.setLinearVelocity( new Ammo.btVector3( vel.x, vel.y, vel.z ) );
 
 			}
+
 			if ( angVel ) {
 
 				body.setAngularVelocity( new Ammo.btVector3( angVel.x, angVel.y, angVel.z ) );
@@ -386,18 +390,18 @@
 				raycaster.setFromCamera( mouseCoords, camera );
 
 				// Creates a ball and throws it
-				var ballMass = 35;
-				var ballRadius = 0.4;
+				const ballMass = 35;
+				const ballRadius = 0.4;
 
-				var ball = new THREE.Mesh( new THREE.SphereBufferGeometry( ballRadius, 14, 10 ), ballMaterial );
+				const ball = new THREE.Mesh( new THREE.SphereBufferGeometry( ballRadius, 14, 10 ), ballMaterial );
 				ball.castShadow = true;
 				ball.receiveShadow = true;
-				var ballShape = new Ammo.btSphereShape( ballRadius );
+				const ballShape = new Ammo.btSphereShape( ballRadius );
 				ballShape.setMargin( margin );
 				pos.copy( raycaster.ray.direction );
 				pos.add( raycaster.ray.origin );
 				quat.set( 0, 0, 0, 1 );
-				var ballBody = createRigidBody( ball, ballShape, ballMass, pos, quat );
+				const ballBody = createRigidBody( ball, ballShape, ballMass, pos, quat );
 
 				pos.copy( raycaster.ray.direction );
 				pos.multiplyScalar( 24 );
@@ -427,7 +431,7 @@
 
 		function render() {
 
-			var deltaTime = clock.getDelta();
+			const deltaTime = clock.getDelta();
 
 			updatePhysics( deltaTime );
 
@@ -441,17 +445,17 @@
 			physicsWorld.stepSimulation( deltaTime, 10 );
 
 			// Update rigid bodies
-			for ( var i = 0, il = rigidBodies.length; i < il; i ++ ) {
+			for ( let i = 0, il = rigidBodies.length; i < il; i ++ ) {
 
-				var objThree = rigidBodies[ i ];
-				var objPhys = objThree.userData.physicsBody;
-				var ms = objPhys.getMotionState();
+				const objThree = rigidBodies[ i ];
+				const objPhys = objThree.userData.physicsBody;
+				const ms = objPhys.getMotionState();
 
 				if ( ms ) {
 
 					ms.getWorldTransform( transformAux1 );
-					var p = transformAux1.getOrigin();
-					var q = transformAux1.getRotation();
+					const p = transformAux1.getOrigin();
+					const q = transformAux1.getRotation();
 					objThree.position.set( p.x(), p.y(), p.z() );
 					objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
 
@@ -461,14 +465,14 @@
 
 			}
 
-			for ( var i = 0, il = dispatcher.getNumManifolds(); i < il; i ++ ) {
+			for ( let i = 0, il = dispatcher.getNumManifolds(); i < il; i ++ ) {
 
-				var contactManifold = dispatcher.getManifoldByIndexInternal( i );
-				var rb0 = Ammo.castObject( contactManifold.getBody0(), Ammo.btRigidBody );
-				var rb1 = Ammo.castObject( contactManifold.getBody1(), Ammo.btRigidBody );
+				const contactManifold = dispatcher.getManifoldByIndexInternal( i );
+				const rb0 = Ammo.castObject( contactManifold.getBody0(), Ammo.btRigidBody );
+				const rb1 = Ammo.castObject( contactManifold.getBody1(), Ammo.btRigidBody );
 
-				var threeObject0 = Ammo.castObject( rb0.getUserPointer(), Ammo.btVector3 ).threeObject;
-				var threeObject1 = Ammo.castObject( rb1.getUserPointer(), Ammo.btVector3 ).threeObject;
+				const threeObject0 = Ammo.castObject( rb0.getUserPointer(), Ammo.btVector3 ).threeObject;
+				const threeObject1 = Ammo.castObject( rb1.getUserPointer(), Ammo.btVector3 ).threeObject;
 
 				if ( ! threeObject0 && ! threeObject1 ) {
 
@@ -476,14 +480,14 @@
 
 				}
 
-				var userData0 = threeObject0 ? threeObject0.userData : null;
-				var userData1 = threeObject1 ? threeObject1.userData : null;
+				const userData0 = threeObject0 ? threeObject0.userData : null;
+				const userData1 = threeObject1 ? threeObject1.userData : null;
 
-				var breakable0 = userData0 ? userData0.breakable : false;
-				var breakable1 = userData1 ? userData1.breakable : false;
+				const breakable0 = userData0 ? userData0.breakable : false;
+				const breakable1 = userData1 ? userData1.breakable : false;
 
-				var collided0 = userData0 ? userData0.collided : false;
-				var collided1 = userData1 ? userData1.collided : false;
+				const collided0 = userData0 ? userData0.collided : false;
+				const collided1 = userData1 ? userData1.collided : false;
 
 				if ( ( ! breakable0 && ! breakable1 ) || ( collided0 && collided1 ) ) {
 
@@ -491,22 +495,22 @@
 
 				}
 
-				var contact = false;
-				var maxImpulse = 0;
-				for ( var j = 0, jl = contactManifold.getNumContacts(); j < jl; j ++ ) {
+				let contact = false;
+				let maxImpulse = 0;
+				for ( let j = 0, jl = contactManifold.getNumContacts(); j < jl; j ++ ) {
 
-					var contactPoint = contactManifold.getContactPoint( j );
+					const contactPoint = contactManifold.getContactPoint( j );
 
 					if ( contactPoint.getDistance() < 0 ) {
 
 						contact = true;
-						var impulse = contactPoint.getAppliedImpulse();
+						const impulse = contactPoint.getAppliedImpulse();
 
 						if ( impulse > maxImpulse ) {
 
 							maxImpulse = impulse;
-							var pos = contactPoint.get_m_positionWorldOnB();
-							var normal = contactPoint.get_m_normalWorldOnB();
+							const pos = contactPoint.get_m_positionWorldOnB();
+							const normal = contactPoint.get_m_normalWorldOnB();
 							impactPoint.set( pos.x(), pos.y(), pos.z() );
 							impactNormal.set( normal.x(), normal.y(), normal.z() );
 
@@ -523,18 +527,18 @@
 
 				// Subdivision
 
-				var fractureImpulse = 250;
+				const fractureImpulse = 250;
 
 				if ( breakable0 && ! collided0 && maxImpulse > fractureImpulse ) {
 
-					var debris = convexBreaker.subdivideByImpact( threeObject0, impactPoint, impactNormal, 1, 2, 1.5 );
+					const debris = convexBreaker.subdivideByImpact( threeObject0, impactPoint, impactNormal, 1, 2, 1.5 );
 
-					var numObjects = debris.length;
-					for ( var j = 0; j < numObjects; j ++ ) {
+					const numObjects = debris.length;
+					for ( let j = 0; j < numObjects; j ++ ) {
 
-						var vel = rb0.getLinearVelocity();
-						var angVel = rb0.getAngularVelocity();
-						var fragment = debris[ j ];
+						const vel = rb0.getLinearVelocity();
+						const angVel = rb0.getAngularVelocity();
+						const fragment = debris[ j ];
 						fragment.userData.velocity.set( vel.x(), vel.y(), vel.z() );
 						fragment.userData.angularVelocity.set( angVel.x(), angVel.y(), angVel.z() );
 
@@ -549,14 +553,14 @@
 
 				if ( breakable1 && ! collided1 && maxImpulse > fractureImpulse ) {
 
-					var debris = convexBreaker.subdivideByImpact( threeObject1, impactPoint, impactNormal, 1, 2, 1.5 );
+					const debris = convexBreaker.subdivideByImpact( threeObject1, impactPoint, impactNormal, 1, 2, 1.5 );
 
-					var numObjects = debris.length;
-					for ( var j = 0; j < numObjects; j ++ ) {
+					const numObjects = debris.length;
+					for ( let j = 0; j < numObjects; j ++ ) {
 
-						var vel = rb1.getLinearVelocity();
-						var angVel = rb1.getAngularVelocity();
-						var fragment = debris[ j ];
+						const vel = rb1.getLinearVelocity();
+						const angVel = rb1.getAngularVelocity();
+						const fragment = debris[ j ];
 						fragment.userData.velocity.set( vel.x(), vel.y(), vel.z() );
 						fragment.userData.angularVelocity.set( angVel.x(), angVel.y(), angVel.z() );
 
@@ -571,11 +575,12 @@
 
 			}
 
-			for ( var i = 0; i < numObjectsToRemove; i ++ ) {
+			for ( let i = 0; i < numObjectsToRemove; i ++ ) {
 
 				removeDebris( objectsToRemove[ i ] );
 
 			}
+
 			numObjectsToRemove = 0;
 
 		}

examples/physics_ammo_cloth.html

@@ -25,21 +25,21 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			// Graphics variables
-			var container, stats;
-			var camera, controls, scene, renderer;
-			var textureLoader;
-			var clock = new THREE.Clock();
+			let container, stats;
+			let camera, controls, scene, renderer;
+			let textureLoader;
+			const clock = new THREE.Clock();
 
 			// Physics variables
-			var gravityConstant = - 9.8;
-			var physicsWorld;
-			var rigidBodies = [];
-			var margin = 0.05;
-			var hinge;
-			var cloth;
-			var transformAux1;
+			const gravityConstant = - 9.8;
+			let physicsWorld;
+			const rigidBodies = [];
+			const margin = 0.05;
+			let hinge;
+			let cloth;
+			let transformAux1;
 
-			var armMovement = 0;
+			let armMovement = 0;
 
 			Ammo().then( function ( AmmoLib ) {
 
@@ -86,13 +86,13 @@
 
 				textureLoader = new THREE.TextureLoader();
 
-				var ambientLight = new THREE.AmbientLight( 0x404040 );
+				const ambientLight = new THREE.AmbientLight( 0x404040 );
 				scene.add( ambientLight );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( - 7, 10, 15 );
 				light.castShadow = true;
-				var d = 10;
+				const d = 10;
 				light.shadow.camera.left = - d;
 				light.shadow.camera.right = d;
 				light.shadow.camera.top = d;
@@ -120,11 +120,11 @@
 
 				// Physics configuration
 
-				var collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
-				var dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
-				var broadphase = new Ammo.btDbvtBroadphase();
-				var solver = new Ammo.btSequentialImpulseConstraintSolver();
-				var softBodySolver = new Ammo.btDefaultSoftBodySolver();
+				const collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
+				const dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
+				const broadphase = new Ammo.btDbvtBroadphase();
+				const solver = new Ammo.btSequentialImpulseConstraintSolver();
+				const softBodySolver = new Ammo.btDefaultSoftBodySolver();
 				physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver );
 				physicsWorld.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 				physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
@@ -135,13 +135,13 @@
 
 			function createObjects() {
 
-				var pos = new THREE.Vector3();
-				var quat = new THREE.Quaternion();
+				const pos = new THREE.Vector3();
+				const quat = new THREE.Quaternion();
 
 				// Ground
 				pos.set( 0, - 0.5, 0 );
 				quat.set( 0, 0, 0, 1 );
-				var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+				const ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
 				ground.castShadow = true;
 				ground.receiveShadow = true;
 				textureLoader.load( "textures/grid.png", function ( texture ) {
@@ -155,18 +155,18 @@
 	} );
 
 				// Wall
-				var brickMass = 0.5;
-				var brickLength = 1.2;
-				var brickDepth = 0.6;
-				var brickHeight = brickLength * 0.5;
-				var numBricksLength = 6;
-				var numBricksHeight = 8;
-				var z0 = - numBricksLength * brickLength * 0.5;
+				const brickMass = 0.5;
+				const brickLength = 1.2;
+				const brickDepth = 0.6;
+				const brickHeight = brickLength * 0.5;
+				const numBricksLength = 6;
+				const numBricksHeight = 8;
+				const z0 = - numBricksLength * brickLength * 0.5;
 				pos.set( 0, brickHeight * 0.5, z0 );
 				quat.set( 0, 0, 0, 1 );
-				for ( var j = 0; j < numBricksHeight; j ++ ) {
+				for ( let j = 0; j < numBricksHeight; j ++ ) {
 
-					var oddRow = ( j % 2 ) == 1;
+					const oddRow = ( j % 2 ) == 1;
 
 					pos.z = z0;
 
@@ -174,13 +174,15 @@
 
 						pos.z -= 0.25 * brickLength;
 
-		}
+					}
+
+					const nRow = oddRow ? numBricksLength + 1 : numBricksLength;
+
+					for ( let i = 0; i < nRow; i ++ ) {
 
-					var nRow = oddRow ? numBricksLength + 1 : numBricksLength;
-					for ( var i = 0; i < nRow; i ++ ) {
+						let brickLengthCurrent = brickLength;
+						let brickMassCurrent = brickMass;
 
-						var brickLengthCurrent = brickLength;
-						var brickMassCurrent = brickMass;
 						if ( oddRow && ( i == 0 || i == nRow - 1 ) ) {
 
 							brickLengthCurrent *= 0.5;
@@ -188,7 +190,7 @@
 
 						}
 
-						var brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
+						const brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
 						brick.castShadow = true;
 						brick.receiveShadow = true;
 
@@ -209,17 +211,17 @@
 
 				// The cloth
 				// Cloth graphic object
-				var clothWidth = 4;
-				var clothHeight = 3;
-				var clothNumSegmentsZ = clothWidth * 5;
-				var clothNumSegmentsY = clothHeight * 5;
-				var clothPos = new THREE.Vector3( - 3, 3, 2 );
+				const clothWidth = 4;
+				const clothHeight = 3;
+				const clothNumSegmentsZ = clothWidth * 5;
+				const clothNumSegmentsY = clothHeight * 5;
+				const clothPos = new THREE.Vector3( - 3, 3, 2 );
 
-				var clothGeometry = new THREE.PlaneBufferGeometry( clothWidth, clothHeight, clothNumSegmentsZ, clothNumSegmentsY );
+				const clothGeometry = new THREE.PlaneBufferGeometry( clothWidth, clothHeight, clothNumSegmentsZ, clothNumSegmentsY );
 				clothGeometry.rotateY( Math.PI * 0.5 );
 				clothGeometry.translate( clothPos.x, clothPos.y + clothHeight * 0.5, clothPos.z - clothWidth * 0.5 );
 
-				var clothMaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, side: THREE.DoubleSide } );
+				const clothMaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, side: THREE.DoubleSide } );
 				cloth = new THREE.Mesh( clothGeometry, clothMaterial );
 				cloth.castShadow = true;
 				cloth.receiveShadow = true;
@@ -235,13 +237,13 @@
 				} );
 
 				// Cloth physic object
-				var softBodyHelpers = new Ammo.btSoftBodyHelpers();
-				var clothCorner00 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z );
-				var clothCorner01 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z - clothWidth );
-				var clothCorner10 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z );
-				var clothCorner11 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z - clothWidth );
-				var clothSoftBody = softBodyHelpers.CreatePatch( physicsWorld.getWorldInfo(), clothCorner00, clothCorner01, clothCorner10, clothCorner11, clothNumSegmentsZ + 1, clothNumSegmentsY + 1, 0, true );
-				var sbConfig = clothSoftBody.get_m_cfg();
+				const softBodyHelpers = new Ammo.btSoftBodyHelpers();
+				const clothCorner00 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z );
+				const clothCorner01 = new Ammo.btVector3( clothPos.x, clothPos.y + clothHeight, clothPos.z - clothWidth );
+				const clothCorner10 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z );
+				const clothCorner11 = new Ammo.btVector3( clothPos.x, clothPos.y, clothPos.z - clothWidth );
+				const clothSoftBody = softBodyHelpers.CreatePatch( physicsWorld.getWorldInfo(), clothCorner00, clothCorner01, clothCorner10, clothCorner11, clothNumSegmentsZ + 1, clothNumSegmentsY + 1, 0, true );
+				const sbConfig = clothSoftBody.get_m_cfg();
 				sbConfig.set_viterations( 10 );
 				sbConfig.set_piterations( 10 );
 
@@ -253,33 +255,33 @@
 				clothSoftBody.setActivationState( 4 );
 
 				// The base
-				var armMass = 2;
-				var armLength = 3 + clothWidth;
-				var pylonHeight = clothPos.y + clothHeight;
-				var baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } );
+				const armMass = 2;
+				const armLength = 3 + clothWidth;
+				const pylonHeight = clothPos.y + clothHeight;
+				const baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } );
 				pos.set( clothPos.x, 0.1, clothPos.z - armLength );
 				quat.set( 0, 0, 0, 1 );
-				var base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial );
+				const base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial );
 				base.castShadow = true;
 				base.receiveShadow = true;
 				pos.set( clothPos.x, 0.5 * pylonHeight, clothPos.z - armLength );
-				var pylon = createParalellepiped( 0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial );
+				const pylon = createParalellepiped( 0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial );
 				pylon.castShadow = true;
 				pylon.receiveShadow = true;
 				pos.set( clothPos.x, pylonHeight + 0.2, clothPos.z - 0.5 * armLength );
-				var arm = createParalellepiped( 0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial );
+				const arm = createParalellepiped( 0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial );
 				arm.castShadow = true;
 				arm.receiveShadow = true;
 
 				// Glue the cloth to the arm
-				var influence = 0.5;
+				const influence = 0.5;
 				clothSoftBody.appendAnchor( 0, arm.userData.physicsBody, false, influence );
 				clothSoftBody.appendAnchor( clothNumSegmentsZ, arm.userData.physicsBody, false, influence );
 
 				// Hinge constraint to move the arm
-				var pivotA = new Ammo.btVector3( 0, pylonHeight * 0.5, 0 );
-				var pivotB = new Ammo.btVector3( 0, - 0.2, - armLength * 0.5 );
-				var axis = new Ammo.btVector3( 0, 1, 0 );
+				const pivotA = new Ammo.btVector3( 0, pylonHeight * 0.5, 0 );
+				const pivotB = new Ammo.btVector3( 0, - 0.2, - armLength * 0.5 );
+				const axis = new Ammo.btVector3( 0, 1, 0 );
 				hinge = new Ammo.btHingeConstraint( pylon.userData.physicsBody, arm.userData.physicsBody, pivotA, pivotB, axis, axis, true );
 				physicsWorld.addConstraint( hinge, true );
 
@@ -287,8 +289,8 @@
 
 			function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
 
-				var threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
-				var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
+				const threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
+				const shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 				shape.setMargin( margin );
 
 				createRigidBody( threeObject, shape, mass, pos, quat );
@@ -302,17 +304,17 @@
 				threeObject.position.copy( pos );
 				threeObject.quaternion.copy( quat );
 
-				var transform = new Ammo.btTransform();
+				const transform = new Ammo.btTransform();
 				transform.setIdentity();
 				transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
 				transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) );
-				var motionState = new Ammo.btDefaultMotionState( transform );
+				const motionState = new Ammo.btDefaultMotionState( transform );
 
-				var localInertia = new Ammo.btVector3( 0, 0, 0 );
+				const localInertia = new Ammo.btVector3( 0, 0, 0 );
 				physicsShape.calculateLocalInertia( mass, localInertia );
 
-				var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
-				var body = new Ammo.btRigidBody( rbInfo );
+				const rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
+				const body = new Ammo.btRigidBody( rbInfo );
 
 				threeObject.userData.physicsBody = body;
 
@@ -391,7 +393,7 @@
 
 			function render() {
 
-				var deltaTime = clock.getDelta();
+				const deltaTime = clock.getDelta();
 
 				updatePhysics( deltaTime );
 
@@ -408,35 +410,37 @@
 				physicsWorld.stepSimulation( deltaTime, 10 );
 
 				// Update cloth
-				var softBody = cloth.userData.physicsBody;
-				var clothPositions = cloth.geometry.attributes.position.array;
-				var numVerts = clothPositions.length / 3;
-				var nodes = softBody.get_m_nodes();
-				var indexFloat = 0;
-				for ( var i = 0; i < numVerts; i ++ ) {
-
-					var node = nodes.at( i );
-					var nodePos = node.get_m_x();
+				const softBody = cloth.userData.physicsBody;
+				const clothPositions = cloth.geometry.attributes.position.array;
+				const numVerts = clothPositions.length / 3;
+				const nodes = softBody.get_m_nodes();
+				let indexFloat = 0;
+
+				for ( let i = 0; i < numVerts; i ++ ) {
+
+					const node = nodes.at( i );
+					const nodePos = node.get_m_x();
 					clothPositions[ indexFloat ++ ] = nodePos.x();
 					clothPositions[ indexFloat ++ ] = nodePos.y();
 					clothPositions[ indexFloat ++ ] = nodePos.z();
 
 				}
+
 				cloth.geometry.computeVertexNormals();
 				cloth.geometry.attributes.position.needsUpdate = true;
 				cloth.geometry.attributes.normal.needsUpdate = true;
 
 				// Update rigid bodies
-				for ( var i = 0, il = rigidBodies.length; i < il; i ++ ) {
+				for ( let i = 0, il = rigidBodies.length; i < il; i ++ ) {
 
-					var objThree = rigidBodies[ i ];
-					var objPhys = objThree.userData.physicsBody;
-					var ms = objPhys.getMotionState();
+					const objThree = rigidBodies[ i ];
+					const objPhys = objThree.userData.physicsBody;
+					const ms = objPhys.getMotionState();
 					if ( ms ) {
 
 						ms.getWorldTransform( transformAux1 );
-						var p = transformAux1.getOrigin();
-						var q = transformAux1.getRotation();
+						const p = transformAux1.getOrigin();
+						const q = transformAux1.getRotation();
 						objThree.position.set( p.x(), p.y(), p.z() );
 						objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
 

examples/physics_ammo_instancing.html

@@ -21,10 +21,10 @@
 			import { AmmoPhysics } from './jsm/physics/AmmoPhysics.js';
 			import Stats from './jsm/libs/stats.module.js';
 
-			var camera, scene, renderer, stats;
-			var physics, position;
+			let camera, scene, renderer, stats;
+			let physics, position;
 
-			var boxes, spheres;
+			let boxes, spheres;
 
 			init();
 
@@ -42,17 +42,17 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x666666 );
 
-				var light = new THREE.HemisphereLight();
-				light.intensity = 0.35;
-				scene.add( light );
+				const hemiLight = new THREE.HemisphereLight();
+				hemiLight.intensity = 0.35;
+				scene.add( hemiLight );
 
-				var light = new THREE.DirectionalLight();
-				light.position.set( 5, 5, 5 );
-				light.castShadow = true;
-				light.shadow.camera.zoom = 2;
-				scene.add( light );
+				const dirLight = new THREE.DirectionalLight();
+				dirLight.position.set( 5, 5, 5 );
+				dirLight.castShadow = true;
+				dirLight.shadow.camera.zoom = 2;
+				scene.add( dirLight );
 
-				var floor = new THREE.Mesh(
+				const floor = new THREE.Mesh(
 					new THREE.BoxBufferGeometry( 10, 5, 10 ),
 					new THREE.ShadowMaterial( { color: 0x111111 } )
 				);
@@ -63,20 +63,20 @@
 
 				//
 
-				var material = new THREE.MeshLambertMaterial();
+				const material = new THREE.MeshLambertMaterial();
 
-				var matrix = new THREE.Matrix4();
-				var color = new THREE.Color();
+				const matrix = new THREE.Matrix4();
+				const color = new THREE.Color();
 
 				// Boxes
 
-				var geometry = new THREE.BoxBufferGeometry( 0.1, 0.1, 0.1 );
-				boxes = new THREE.InstancedMesh( geometry, material, 100 );
+				const geometryBox = new THREE.BoxBufferGeometry( 0.1, 0.1, 0.1 );
+				boxes = new THREE.InstancedMesh( geometryBox, material, 100 );
 				boxes.castShadow = true;
 				boxes.receiveShadow = true;
 				scene.add( boxes );
 
-				for ( var i = 0; i < boxes.count; i ++ ) {
+				for ( let i = 0; i < boxes.count; i ++ ) {
 
 					matrix.setPosition( Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5 );
 					boxes.setMatrixAt( i, matrix );
@@ -88,13 +88,13 @@
 
 				// Spheres
 
-				var geometry = new THREE.IcosahedronBufferGeometry( 0.075, 3 );
-				spheres = new THREE.InstancedMesh( geometry, material, 100 );
+				const geometrySphere = new THREE.IcosahedronBufferGeometry( 0.075, 3 );
+				spheres = new THREE.InstancedMesh( geometrySphere, material, 100 );
 				spheres.castShadow = true;
 				spheres.receiveShadow = true;
 				scene.add( spheres );
 
-				for ( var i = 0; i < spheres.count; i ++ ) {
+				for ( let i = 0; i < spheres.count; i ++ ) {
 
 					matrix.setPosition( Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5 );
 					spheres.setMatrixAt( i, matrix );
@@ -118,7 +118,7 @@
 
 				//
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.y = 0.5;
 				controls.update();
 
@@ -132,14 +132,14 @@
 
 				//
 
-				var index = Math.floor( Math.random() * boxes.count );
+				let index = Math.floor( Math.random() * boxes.count );
 
 				position.set( 0, Math.random() + 1, 0 );
 				physics.setMeshPosition( boxes, position, index );
 
 				//
 
-				var index = Math.floor( Math.random() * spheres.count );
+				index = Math.floor( Math.random() * spheres.count );
 
 				position.set( 0, Math.random() + 1, 0 );
 				physics.setMeshPosition( spheres, position, index );

examples/physics_ammo_rope.html

@@ -24,26 +24,26 @@
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 		// Graphics variables
-		var container, stats;
-		var camera, controls, scene, renderer;
-		var textureLoader;
-		var clock = new THREE.Clock();
+		let container, stats;
+		let camera, controls, scene, renderer;
+		let textureLoader;
+		const clock = new THREE.Clock();
 
 		// Physics variables
-		var gravityConstant = - 9.8;
-		var collisionConfiguration;
-		var dispatcher;
-		var broadphase;
-		var solver;
-		var softBodySolver;
-		var physicsWorld;
-		var rigidBodies = [];
-		var margin = 0.05;
-		var hinge;
-		var rope;
-		var transformAux1;
-
-		var armMovement = 0;
+		const gravityConstant = - 9.8;
+		let collisionConfiguration;
+		let dispatcher;
+		let broadphase;
+		let solver;
+		let softBodySolver;
+		let physicsWorld;
+		const rigidBodies = [];
+		const margin = 0.05;
+		let hinge;
+		let rope;
+		let transformAux1;
+
+		let armMovement = 0;
 
 		Ammo().then( function ( AmmoLib ) {
 
@@ -89,13 +89,13 @@
 
 			textureLoader = new THREE.TextureLoader();
 
-			var ambientLight = new THREE.AmbientLight( 0x404040 );
+			const ambientLight = new THREE.AmbientLight( 0x404040 );
 			scene.add( ambientLight );
 
-			var light = new THREE.DirectionalLight( 0xffffff, 1 );
+			const light = new THREE.DirectionalLight( 0xffffff, 1 );
 			light.position.set( - 10, 10, 5 );
 			light.castShadow = true;
-			var d = 10;
+			const d = 10;
 			light.shadow.camera.left = - d;
 			light.shadow.camera.right = d;
 			light.shadow.camera.top = d;
@@ -139,13 +139,13 @@
 
 		function createObjects() {
 
-			var pos = new THREE.Vector3();
-			var quat = new THREE.Quaternion();
+			const pos = new THREE.Vector3();
+			const quat = new THREE.Quaternion();
 
 			// Ground
 			pos.set( 0, - 0.5, 0 );
 			quat.set( 0, 0, 0, 1 );
-			var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+			const ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
 			ground.castShadow = true;
 			ground.receiveShadow = true;
 			textureLoader.load( "textures/grid.png", function ( texture ) {
@@ -160,13 +160,13 @@
 
 
 			// Ball
-			var ballMass = 1.2;
-			var ballRadius = 0.6;
+			const ballMass = 1.2;
+			const ballRadius = 0.6;
 
-			var ball = new THREE.Mesh( new THREE.SphereBufferGeometry( ballRadius, 20, 20 ), new THREE.MeshPhongMaterial( { color: 0x202020 } ) );
+			const ball = new THREE.Mesh( new THREE.SphereBufferGeometry( ballRadius, 20, 20 ), new THREE.MeshPhongMaterial( { color: 0x202020 } ) );
 			ball.castShadow = true;
 			ball.receiveShadow = true;
-			var ballShape = new Ammo.btSphereShape( ballRadius );
+			const ballShape = new Ammo.btSphereShape( ballRadius );
 			ballShape.setMargin( margin );
 			pos.set( - 3, 2, 0 );
 			quat.set( 0, 0, 0, 1 );
@@ -174,18 +174,19 @@
 			ball.userData.physicsBody.setFriction( 0.5 );
 
 			// Wall
-			var brickMass = 0.5;
-			var brickLength = 1.2;
-			var brickDepth = 0.6;
-			var brickHeight = brickLength * 0.5;
-			var numBricksLength = 6;
-			var numBricksHeight = 8;
-			var z0 = - numBricksLength * brickLength * 0.5;
+			const brickMass = 0.5;
+			const brickLength = 1.2;
+			const brickDepth = 0.6;
+			const brickHeight = brickLength * 0.5;
+			const numBricksLength = 6;
+			const numBricksHeight = 8;
+			const z0 = - numBricksLength * brickLength * 0.5;
 			pos.set( 0, brickHeight * 0.5, z0 );
 			quat.set( 0, 0, 0, 1 );
-			for ( var j = 0; j < numBricksHeight; j ++ ) {
 
-				var oddRow = ( j % 2 ) == 1;
+			for ( let j = 0; j < numBricksHeight; j ++ ) {
+
+				const oddRow = ( j % 2 ) == 1;
 
 				pos.z = z0;
 
@@ -195,11 +196,12 @@
 
 				}
 
-				var nRow = oddRow ? numBricksLength + 1 : numBricksLength;
-				for ( var i = 0; i < nRow; i ++ ) {
+				const nRow = oddRow ? numBricksLength + 1 : numBricksLength;
+
+				for ( let i = 0; i < nRow; i ++ ) {
 
-					var brickLengthCurrent = brickLength;
-					var brickMassCurrent = brickMass;
+					let brickLengthCurrent = brickLength;
+					let brickMassCurrent = brickMass;
 					if ( oddRow && ( i == 0 || i == nRow - 1 ) ) {
 
 						brickLengthCurrent *= 0.5;
@@ -207,7 +209,7 @@
 
 					}
 
-					var brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
+					const brick = createParalellepiped( brickDepth, brickHeight, brickLengthCurrent, brickMassCurrent, pos, quat, createMaterial() );
 					brick.castShadow = true;
 					brick.receiveShadow = true;
 
@@ -222,31 +224,32 @@
 					}
 
 				}
+
 				pos.y += brickHeight;
 
 			}
 
 			// The rope
 			// Rope graphic object
-			var ropeNumSegments = 10;
-			var ropeLength = 4;
-			var ropeMass = 3;
-			var ropePos = ball.position.clone();
+			const ropeNumSegments = 10;
+			const ropeLength = 4;
+			const ropeMass = 3;
+			const ropePos = ball.position.clone();
 			ropePos.y += ballRadius;
 
-			var segmentLength = ropeLength / ropeNumSegments;
-			var ropeGeometry = new THREE.BufferGeometry();
-			var ropeMaterial = new THREE.LineBasicMaterial( { color: 0x000000 } );
-			var ropePositions = [];
-			var ropeIndices = [];
+			const segmentLength = ropeLength / ropeNumSegments;
+			const ropeGeometry = new THREE.BufferGeometry();
+			const ropeMaterial = new THREE.LineBasicMaterial( { color: 0x000000 } );
+			const ropePositions = [];
+			const ropeIndices = [];
 
-			for ( var i = 0; i < ropeNumSegments + 1; i ++ ) {
+			for ( let i = 0; i < ropeNumSegments + 1; i ++ ) {
 
 				ropePositions.push( ropePos.x, ropePos.y + i * segmentLength, ropePos.z );
 
 			}
 
-			for ( var i = 0; i < ropeNumSegments; i ++ ) {
+			for ( let i = 0; i < ropeNumSegments; i ++ ) {
 
 				ropeIndices.push( i, i + 1 );
 
@@ -261,11 +264,11 @@
 			scene.add( rope );
 
 			// Rope physic object
-			var softBodyHelpers = new Ammo.btSoftBodyHelpers();
-			var ropeStart = new Ammo.btVector3( ropePos.x, ropePos.y, ropePos.z );
-			var ropeEnd = new Ammo.btVector3( ropePos.x, ropePos.y + ropeLength, ropePos.z );
-			var ropeSoftBody = softBodyHelpers.CreateRope( physicsWorld.getWorldInfo(), ropeStart, ropeEnd, ropeNumSegments - 1, 0 );
-			var sbConfig = ropeSoftBody.get_m_cfg();
+			const softBodyHelpers = new Ammo.btSoftBodyHelpers();
+			const ropeStart = new Ammo.btVector3( ropePos.x, ropePos.y, ropePos.z );
+			const ropeEnd = new Ammo.btVector3( ropePos.x, ropePos.y + ropeLength, ropePos.z );
+			const ropeSoftBody = softBodyHelpers.CreateRope( physicsWorld.getWorldInfo(), ropeStart, ropeEnd, ropeNumSegments - 1, 0 );
+			const sbConfig = ropeSoftBody.get_m_cfg();
 			sbConfig.set_viterations( 10 );
 			sbConfig.set_piterations( 10 );
 			ropeSoftBody.setTotalMass( ropeMass, false );
@@ -276,33 +279,33 @@
 			ropeSoftBody.setActivationState( 4 );
 
 			// The base
-			var armMass = 2;
-			var armLength = 3;
-			var pylonHeight = ropePos.y + ropeLength;
-			var baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } );
+			const armMass = 2;
+			const armLength = 3;
+			const pylonHeight = ropePos.y + ropeLength;
+			const baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } );
 			pos.set( ropePos.x, 0.1, ropePos.z - armLength );
 			quat.set( 0, 0, 0, 1 );
-			var base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial );
+			const base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial );
 			base.castShadow = true;
 			base.receiveShadow = true;
 			pos.set( ropePos.x, 0.5 * pylonHeight, ropePos.z - armLength );
-			var pylon = createParalellepiped( 0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial );
+			const pylon = createParalellepiped( 0.4, pylonHeight, 0.4, 0, pos, quat, baseMaterial );
 			pylon.castShadow = true;
 			pylon.receiveShadow = true;
 			pos.set( ropePos.x, pylonHeight + 0.2, ropePos.z - 0.5 * armLength );
-			var arm = createParalellepiped( 0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial );
+			const arm = createParalellepiped( 0.4, 0.4, armLength + 0.4, armMass, pos, quat, baseMaterial );
 			arm.castShadow = true;
 			arm.receiveShadow = true;
 
 			// Glue the rope extremes to the ball and the arm
-			var influence = 1;
+			const influence = 1;
 			ropeSoftBody.appendAnchor( 0, ball.userData.physicsBody, true, influence );
 			ropeSoftBody.appendAnchor( ropeNumSegments, arm.userData.physicsBody, true, influence );
 
 			// Hinge constraint to move the arm
-			var pivotA = new Ammo.btVector3( 0, pylonHeight * 0.5, 0 );
-			var pivotB = new Ammo.btVector3( 0, - 0.2, - armLength * 0.5 );
-			var axis = new Ammo.btVector3( 0, 1, 0 );
+			const pivotA = new Ammo.btVector3( 0, pylonHeight * 0.5, 0 );
+			const pivotB = new Ammo.btVector3( 0, - 0.2, - armLength * 0.5 );
+			const axis = new Ammo.btVector3( 0, 1, 0 );
 			hinge = new Ammo.btHingeConstraint( pylon.userData.physicsBody, arm.userData.physicsBody, pivotA, pivotB, axis, axis, true );
 			physicsWorld.addConstraint( hinge, true );
 
@@ -311,8 +314,8 @@
 
 		function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
 
-			var threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
-			var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
+			const threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
+			const shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 			shape.setMargin( margin );
 
 			createRigidBody( threeObject, shape, mass, pos, quat );
@@ -326,17 +329,17 @@
 			threeObject.position.copy( pos );
 			threeObject.quaternion.copy( quat );
 
-			var transform = new Ammo.btTransform();
+			const transform = new Ammo.btTransform();
 			transform.setIdentity();
 			transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
 			transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) );
-			var motionState = new Ammo.btDefaultMotionState( transform );
+			const motionState = new Ammo.btDefaultMotionState( transform );
 
-			var localInertia = new Ammo.btVector3( 0, 0, 0 );
+			const localInertia = new Ammo.btVector3( 0, 0, 0 );
 			physicsShape.calculateLocalInertia( mass, localInertia );
 
-			var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
-			var body = new Ammo.btRigidBody( rbInfo );
+			const rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
+			const body = new Ammo.btRigidBody( rbInfo );
 
 			threeObject.userData.physicsBody = body;
 
@@ -415,7 +418,7 @@
 
 		function render() {
 
-			var deltaTime = clock.getDelta();
+			const deltaTime = clock.getDelta();
 
 			updatePhysics( deltaTime );
 
@@ -432,33 +435,35 @@
 			physicsWorld.stepSimulation( deltaTime, 10 );
 
 			// Update rope
-			var softBody = rope.userData.physicsBody;
-			var ropePositions = rope.geometry.attributes.position.array;
-			var numVerts = ropePositions.length / 3;
-			var nodes = softBody.get_m_nodes();
-			var indexFloat = 0;
-			for ( var i = 0; i < numVerts; i ++ ) {
-
-				var node = nodes.at( i );
-				var nodePos = node.get_m_x();
+			const softBody = rope.userData.physicsBody;
+			const ropePositions = rope.geometry.attributes.position.array;
+			const numVerts = ropePositions.length / 3;
+			const nodes = softBody.get_m_nodes();
+			let indexFloat = 0;
+
+			for ( let i = 0; i < numVerts; i ++ ) {
+
+				const node = nodes.at( i );
+				const nodePos = node.get_m_x();
 				ropePositions[ indexFloat ++ ] = nodePos.x();
 				ropePositions[ indexFloat ++ ] = nodePos.y();
 				ropePositions[ indexFloat ++ ] = nodePos.z();
 
 			}
+
 			rope.geometry.attributes.position.needsUpdate = true;
 
 			// Update rigid bodies
-			for ( var i = 0, il = rigidBodies.length; i < il; i ++ ) {
+			for ( let i = 0, il = rigidBodies.length; i < il; i ++ ) {
 
-				var objThree = rigidBodies[ i ];
-				var objPhys = objThree.userData.physicsBody;
-				var ms = objPhys.getMotionState();
+				const objThree = rigidBodies[ i ];
+				const objPhys = objThree.userData.physicsBody;
+				const ms = objPhys.getMotionState();
 				if ( ms ) {
 
 					ms.getWorldTransform( transformAux1 );
-					var p = transformAux1.getOrigin();
-					var q = transformAux1.getRotation();
+					const p = transformAux1.getOrigin();
+					const q = transformAux1.getRotation();
 					objThree.position.set( p.x(), p.y(), p.z() );
 					objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
 

examples/physics_ammo_terrain.html

@@ -26,37 +26,37 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			// Heightfield parameters
-			var terrainWidthExtents = 100;
-			var terrainDepthExtents = 100;
-			var terrainWidth = 128;
-			var terrainDepth = 128;
-			var terrainHalfWidth = terrainWidth / 2;
-			var terrainHalfDepth = terrainDepth / 2;
-			var terrainMaxHeight = 8;
-			var terrainMinHeight = - 2;
+			const terrainWidthExtents = 100;
+			const terrainDepthExtents = 100;
+			const terrainWidth = 128;
+			const terrainDepth = 128;
+			const terrainHalfWidth = terrainWidth / 2;
+			const terrainHalfDepth = terrainDepth / 2;
+			const terrainMaxHeight = 8;
+			const terrainMinHeight = - 2;
 
 			// Graphics variables
-			var container, stats;
-			var camera, scene, renderer;
-			var terrainMesh;
-			var clock = new THREE.Clock();
+			let container, stats;
+			let camera, scene, renderer;
+			let terrainMesh;
+			const clock = new THREE.Clock();
 
 			// Physics variables
-			var collisionConfiguration;
-			var dispatcher;
-			var broadphase;
-			var solver;
-			var physicsWorld;
-			var dynamicObjects = [];
-			var transformAux1;
-
-			var heightData = null;
-			var ammoHeightData = null;
-
-			var time = 0;
-			var objectTimePeriod = 3;
-			var timeNextSpawn = time + objectTimePeriod;
-			var maxNumObjects = 30;
+			let collisionConfiguration;
+			let dispatcher;
+			let broadphase;
+			let solver;
+			let physicsWorld;
+			const dynamicObjects = [];
+			let transformAux1;
+
+			let heightData = null;
+			let ammoHeightData = null;
+
+			let time = 0;
+			const objectTimePeriod = 3;
+			let timeNextSpawn = time + objectTimePeriod;
+			const maxNumObjects = 30;
 
 			Ammo().then( function ( AmmoLib ) {
 
@@ -102,15 +102,15 @@
 				camera.position.z = terrainDepthExtents / 2;
 				camera.lookAt( 0, 0, 0 );
 
-				var controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableZoom = false;
 
-				var geometry = new THREE.PlaneBufferGeometry( terrainWidthExtents, terrainDepthExtents, terrainWidth - 1, terrainDepth - 1 );
+				const geometry = new THREE.PlaneBufferGeometry( terrainWidthExtents, terrainDepthExtents, terrainWidth - 1, terrainDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
-				var vertices = geometry.attributes.position.array;
+				const vertices = geometry.attributes.position.array;
 
-				for ( var i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
+				for ( let i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
 
 					// j + 1 because it is the y component that we modify
 					vertices[ j + 1 ] = heightData[ i ];
@@ -119,14 +119,14 @@
 
 				geometry.computeVertexNormals();
 
-				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xC7C7C7 } );
+				const groundMaterial = new THREE.MeshPhongMaterial( { color: 0xC7C7C7 } );
 				terrainMesh = new THREE.Mesh( geometry, groundMaterial );
 				terrainMesh.receiveShadow = true;
 				terrainMesh.castShadow = true;
 
 				scene.add( terrainMesh );
 
-				var textureLoader = new THREE.TextureLoader();
+				const textureLoader = new THREE.TextureLoader();
 				textureLoader.load( "textures/grid.png", function ( texture ) {
 
 					texture.wrapS = THREE.RepeatWrapping;
@@ -137,11 +137,11 @@
 
 				} );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 100, 100, 50 );
 				light.castShadow = true;
-				var dLight = 200;
-				var sLight = dLight * 0.25;
+				const dLight = 200;
+				const sLight = dLight * 0.25;
 				light.shadow.camera.left = - sLight;
 				light.shadow.camera.right = sLight;
 				light.shadow.camera.top = sLight;
@@ -182,15 +182,15 @@
 
 				// Create the terrain body
 
-				var groundShape = createTerrainShape();
-				var groundTransform = new Ammo.btTransform();
+				const groundShape = createTerrainShape();
+				const groundTransform = new Ammo.btTransform();
 				groundTransform.setIdentity();
 				// Shifts the terrain, since bullet re-centers it on its bounding box.
 				groundTransform.setOrigin( new Ammo.btVector3( 0, ( terrainMaxHeight + terrainMinHeight ) / 2, 0 ) );
-				var groundMass = 0;
-				var groundLocalInertia = new Ammo.btVector3( 0, 0, 0 );
-				var groundMotionState = new Ammo.btDefaultMotionState( groundTransform );
-				var groundBody = new Ammo.btRigidBody( new Ammo.btRigidBodyConstructionInfo( groundMass, groundMotionState, groundShape, groundLocalInertia ) );
+				const groundMass = 0;
+				const groundLocalInertia = new Ammo.btVector3( 0, 0, 0 );
+				const groundMotionState = new Ammo.btDefaultMotionState( groundTransform );
+				const groundBody = new Ammo.btRigidBody( new Ammo.btRigidBodyConstructionInfo( groundMass, groundMotionState, groundShape, groundLocalInertia ) );
 				physicsWorld.addRigidBody( groundBody );
 
 				transformAux1 = new Ammo.btTransform();
@@ -201,24 +201,25 @@
 
 				// Generates the height data (a sinus wave)
 
-				var size = width * depth;
-				var data = new Float32Array( size );
+				const size = width * depth;
+				const data = new Float32Array( size );
 
-				var hRange = maxHeight - minHeight;
-				var w2 = width / 2;
-				var d2 = depth / 2;
-				var phaseMult = 12;
+				const hRange = maxHeight - minHeight;
+				const w2 = width / 2;
+				const d2 = depth / 2;
+				const phaseMult = 12;
 
-				var p = 0;
-				for ( var j = 0; j < depth; j ++ ) {
+				let p = 0;
 
-					for ( var i = 0; i < width; i ++ ) {
+				for ( let j = 0; j < depth; j ++ ) {
 
-						var radius = Math.sqrt(
+					for ( let i = 0; i < width; i ++ ) {
+
+						const radius = Math.sqrt(
 							Math.pow( ( i - w2 ) / w2, 2.0 ) +
 								Math.pow( ( j - d2 ) / d2, 2.0 ) );
 
-						var height = ( Math.sin( radius * phaseMult ) + 1 ) * 0.5 * hRange + minHeight;
+						const height = ( Math.sin( radius * phaseMult ) + 1 ) * 0.5 * hRange + minHeight;
 
 						data[ p ] = height;
 
@@ -235,26 +236,27 @@
 			function createTerrainShape() {
 
 				// This parameter is not really used, since we are using PHY_FLOAT height data type and hence it is ignored
-				var heightScale = 1;
+				const heightScale = 1;
 
 				// Up axis = 0 for X, 1 for Y, 2 for Z. Normally 1 = Y is used.
-				var upAxis = 1;
+				const upAxis = 1;
 
 				// hdt, height data type. "PHY_FLOAT" is used. Possible values are "PHY_FLOAT", "PHY_UCHAR", "PHY_SHORT"
-				var hdt = "PHY_FLOAT";
+				const hdt = "PHY_FLOAT";
 
 				// Set this to your needs (inverts the triangles)
-				var flipQuadEdges = false;
+				const flipQuadEdges = false;
 
 				// Creates height data buffer in Ammo heap
 				ammoHeightData = Ammo._malloc( 4 * terrainWidth * terrainDepth );
 
 				// Copy the javascript height data array to the Ammo one.
-				var p = 0;
-				var p2 = 0;
-				for ( var j = 0; j < terrainDepth; j ++ ) {
+				let p = 0;
+				let p2 = 0;
+
+				for ( let j = 0; j < terrainDepth; j ++ ) {
 
-					for ( var i = 0; i < terrainWidth; i ++ ) {
+					for ( let i = 0; i < terrainWidth; i ++ ) {
 
 						// write 32-bit float data to memory
 						Ammo.HEAPF32[ ammoHeightData + p2 >> 2 ] = heightData[ p ];
@@ -269,7 +271,7 @@
 				}
 
 				// Creates the heightfield physics shape
-				var heightFieldShape = new Ammo.btHeightfieldTerrainShape(
+				const heightFieldShape = new Ammo.btHeightfieldTerrainShape(
 					terrainWidth,
 					terrainDepth,
 					ammoHeightData,
@@ -282,8 +284,8 @@
 				);
 
 				// Set horizontal scale
-				var scaleX = terrainWidthExtents / ( terrainWidth - 1 );
-				var scaleZ = terrainDepthExtents / ( terrainDepth - 1 );
+				const scaleX = terrainWidthExtents / ( terrainWidth - 1 );
+				const scaleZ = terrainDepthExtents / ( terrainDepth - 1 );
 				heightFieldShape.setLocalScaling( new Ammo.btVector3( scaleX, 1, scaleZ ) );
 
 				heightFieldShape.setMargin( 0.05 );
@@ -294,45 +296,47 @@
 
 			function generateObject() {
 
-				var numTypes = 4;
-				var objectType = Math.ceil( Math.random() * numTypes );
+				const numTypes = 4;
+				const objectType = Math.ceil( Math.random() * numTypes );
+
+				let threeObject = null;
+				let shape = null;
 
-				var threeObject = null;
-				var shape = null;
+				const objectSize = 3;
+				const margin = 0.05;
 
-				var objectSize = 3;
-				var margin = 0.05;
+				let radius, height;
 
 				switch ( objectType ) {
 
 					case 1:
 						// Sphere
-						var radius = 1 + Math.random() * objectSize;
+						radius = 1 + Math.random() * objectSize;
 						threeObject = new THREE.Mesh( new THREE.SphereBufferGeometry( radius, 20, 20 ), createObjectMaterial() );
 						shape = new Ammo.btSphereShape( radius );
 						shape.setMargin( margin );
 						break;
 					case 2:
 						// Box
-						var sx = 1 + Math.random() * objectSize;
-						var sy = 1 + Math.random() * objectSize;
-						var sz = 1 + Math.random() * objectSize;
+						const sx = 1 + Math.random() * objectSize;
+						const sy = 1 + Math.random() * objectSize;
+						const sz = 1 + Math.random() * objectSize;
 						threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), createObjectMaterial() );
 						shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 						shape.setMargin( margin );
 						break;
 					case 3:
 						// Cylinder
-						var radius = 1 + Math.random() * objectSize;
-						var height = 1 + Math.random() * objectSize;
+						radius = 1 + Math.random() * objectSize;
+						height = 1 + Math.random() * objectSize;
 						threeObject = new THREE.Mesh( new THREE.CylinderBufferGeometry( radius, radius, height, 20, 1 ), createObjectMaterial() );
 						shape = new Ammo.btCylinderShape( new Ammo.btVector3( radius, height * 0.5, radius ) );
 						shape.setMargin( margin );
 						break;
 					default:
 						// Cone
-						var radius = 1 + Math.random() * objectSize;
-						var height = 2 + Math.random() * objectSize;
+						radius = 1 + Math.random() * objectSize;
+						height = 2 + Math.random() * objectSize;
 						threeObject = new THREE.Mesh( new THREE.ConeBufferGeometry( radius, height, 20, 2 ), createObjectMaterial() );
 						shape = new Ammo.btConeShape( radius, height );
 						break;
@@ -341,16 +345,16 @@
 
 				threeObject.position.set( ( Math.random() - 0.5 ) * terrainWidth * 0.6, terrainMaxHeight + objectSize + 2, ( Math.random() - 0.5 ) * terrainDepth * 0.6 );
 
-				var mass = objectSize * 5;
-				var localInertia = new Ammo.btVector3( 0, 0, 0 );
+				const mass = objectSize * 5;
+				const localInertia = new Ammo.btVector3( 0, 0, 0 );
 				shape.calculateLocalInertia( mass, localInertia );
-				var transform = new Ammo.btTransform();
+				const transform = new Ammo.btTransform();
 				transform.setIdentity();
-				var pos = threeObject.position;
+				const pos = threeObject.position;
 				transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
-				var motionState = new Ammo.btDefaultMotionState( transform );
-				var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, shape, localInertia );
-				var body = new Ammo.btRigidBody( rbInfo );
+				const motionState = new Ammo.btDefaultMotionState( transform );
+				const rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, shape, localInertia );
+				const body = new Ammo.btRigidBody( rbInfo );
 
 				threeObject.userData.physicsBody = body;
 
@@ -368,7 +372,7 @@
 
 			function createObjectMaterial() {
 
-				var c = Math.floor( Math.random() * ( 1 << 24 ) );
+				const c = Math.floor( Math.random() * ( 1 << 24 ) );
 				return new THREE.MeshPhongMaterial( { color: c } );
 
 			}
@@ -384,7 +388,7 @@
 
 			function render() {
 
-				var deltaTime = clock.getDelta();
+				const deltaTime = clock.getDelta();
 
 				if ( dynamicObjects.length < maxNumObjects && time > timeNextSpawn ) {
 
@@ -406,16 +410,16 @@
 				physicsWorld.stepSimulation( deltaTime, 10 );
 
 				// Update objects
-				for ( var i = 0, il = dynamicObjects.length; i < il; i ++ ) {
+				for ( let i = 0, il = dynamicObjects.length; i < il; i ++ ) {
 
-					var objThree = dynamicObjects[ i ];
-					var objPhys = objThree.userData.physicsBody;
-					var ms = objPhys.getMotionState();
+					const objThree = dynamicObjects[ i ];
+					const objPhys = objThree.userData.physicsBody;
+					const ms = objPhys.getMotionState();
 					if ( ms ) {
 
 						ms.getWorldTransform( transformAux1 );
-						var p = transformAux1.getOrigin();
-						var q = transformAux1.getRotation();
+						const p = transformAux1.getOrigin();
+						const q = transformAux1.getRotation();
 						objThree.position.set( p.x(), p.y(), p.z() );
 						objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
 

examples/physics_ammo_volume.html

@@ -29,25 +29,25 @@
 			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
 			// Graphics variables
-			var container, stats;
-			var camera, controls, scene, renderer;
-			var textureLoader;
-			var clock = new THREE.Clock();
-			var clickRequest = false;
-			var mouseCoords = new THREE.Vector2();
-			var raycaster = new THREE.Raycaster();
-			var ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );
-			var pos = new THREE.Vector3();
-			var quat = new THREE.Quaternion();
+			let container, stats;
+			let camera, controls, scene, renderer;
+			let textureLoader;
+			const clock = new THREE.Clock();
+			let clickRequest = false;
+			const mouseCoords = new THREE.Vector2();
+			const raycaster = new THREE.Raycaster();
+			const ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );
+			const pos = new THREE.Vector3();
+			const quat = new THREE.Quaternion();
 
 			// Physics variables
-			var gravityConstant = - 9.8;
-			var physicsWorld;
-			var rigidBodies = [];
-			var softBodies = [];
-			var margin = 0.05;
-			var transformAux1;
-			var softBodyHelpers;
+			const gravityConstant = - 9.8;
+			let physicsWorld;
+			const rigidBodies = [];
+			const softBodies = [];
+			const margin = 0.05;
+			let transformAux1;
+			let softBodyHelpers;
 
 			Ammo().then( function ( AmmoLib ) {
 
@@ -93,13 +93,13 @@
 
 				textureLoader = new THREE.TextureLoader();
 
-				var ambientLight = new THREE.AmbientLight( 0x404040 );
+				const ambientLight = new THREE.AmbientLight( 0x404040 );
 				scene.add( ambientLight );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( - 10, 10, 5 );
 				light.castShadow = true;
-				var d = 20;
+				const d = 20;
 				light.shadow.camera.left = - d;
 				light.shadow.camera.right = d;
 				light.shadow.camera.top = d;
@@ -127,11 +127,11 @@
 
 				// Physics configuration
 
-				var collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
-				var dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
-				var broadphase = new Ammo.btDbvtBroadphase();
-				var solver = new Ammo.btSequentialImpulseConstraintSolver();
-				var softBodySolver = new Ammo.btDefaultSoftBodySolver();
+				const collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
+				const dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
+				const broadphase = new Ammo.btDbvtBroadphase();
+				const solver = new Ammo.btSequentialImpulseConstraintSolver();
+				const softBodySolver = new Ammo.btDefaultSoftBodySolver();
 				physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver );
 				physicsWorld.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
 				physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
@@ -146,7 +146,7 @@
 				// Ground
 				pos.set( 0, - 0.5, 0 );
 				quat.set( 0, 0, 0, 1 );
-				var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+				const ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
 				ground.castShadow = true;
 				ground.receiveShadow = true;
 				textureLoader.load( "textures/grid.png", function ( texture ) {
@@ -160,20 +160,20 @@
 				} );
 
 				// Create soft volumes
-				var volumeMass = 15;
+				const volumeMass = 15;
 
-				var sphereGeometry = new THREE.SphereBufferGeometry( 1.5, 40, 25 );
+				const sphereGeometry = new THREE.SphereBufferGeometry( 1.5, 40, 25 );
 				sphereGeometry.translate( 5, 5, 0 );
 				createSoftVolume( sphereGeometry, volumeMass, 250 );
 
-				var boxGeometry = new THREE.BoxBufferGeometry( 1, 1, 5, 4, 4, 20 );
+				const boxGeometry = new THREE.BoxBufferGeometry( 1, 1, 5, 4, 4, 20 );
 				boxGeometry.translate( - 2, 5, 0 );
 				createSoftVolume( boxGeometry, volumeMass, 120 );
 
 				// Ramp
 				pos.set( 3, 1, 0 );
 				quat.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), 30 * Math.PI / 180 );
-				var obstacle = createParalellepiped( 10, 1, 4, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0x606060 } ) );
+				const obstacle = createParalellepiped( 10, 1, 4, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0x606060 } ) );
 				obstacle.castShadow = true;
 				obstacle.receiveShadow = true;
 
@@ -182,12 +182,12 @@
 			function processGeometry( bufGeometry ) {
 
 				// Ony consider the position values when merging the vertices
-				var posOnlyBufGeometry = new THREE.BufferGeometry();
+				const posOnlyBufGeometry = new THREE.BufferGeometry();
 				posOnlyBufGeometry.setAttribute( 'position', bufGeometry.getAttribute( 'position' ) );
 				posOnlyBufGeometry.setIndex( bufGeometry.getIndex() );
 
 				// Merge the vertices so the triangle soup is converted to indexed triangles
-				var indexedBufferGeom = BufferGeometryUtils.mergeVertices( posOnlyBufGeometry );
+				const indexedBufferGeom = BufferGeometryUtils.mergeVertices( posOnlyBufGeometry );
 
 				// Create index arrays mapping the indexed vertices to bufGeometry vertices
 				mapIndices( bufGeometry, indexedBufferGeom );
@@ -196,7 +196,7 @@
 
 			function isEqual( x1, y1, z1, x2, y2, z2 ) {
 
-				var delta = 0.000001;
+				const delta = 0.000001;
 				return Math.abs( x2 - x1 ) < delta &&
 						Math.abs( y2 - y1 ) < delta &&
 						Math.abs( z2 - z1 ) < delta;
@@ -207,27 +207,27 @@
 
 				// Creates ammoVertices, ammoIndices and ammoIndexAssociation in bufGeometry
 
-				var vertices = bufGeometry.attributes.position.array;
-				var idxVertices = indexedBufferGeom.attributes.position.array;
-				var indices = indexedBufferGeom.index.array;
+				const vertices = bufGeometry.attributes.position.array;
+				const idxVertices = indexedBufferGeom.attributes.position.array;
+				const indices = indexedBufferGeom.index.array;
 
-				var numIdxVertices = idxVertices.length / 3;
-				var numVertices = vertices.length / 3;
+				const numIdxVertices = idxVertices.length / 3;
+				const numVertices = vertices.length / 3;
 
 				bufGeometry.ammoVertices = idxVertices;
 				bufGeometry.ammoIndices = indices;
 				bufGeometry.ammoIndexAssociation = [];
 
-				for ( var i = 0; i < numIdxVertices; i ++ ) {
+				for ( let i = 0; i < numIdxVertices; i ++ ) {
 
-					var association = [];
+					const association = [];
 					bufGeometry.ammoIndexAssociation.push( association );
 
-					var i3 = i * 3;
+					const i3 = i * 3;
 
-					for ( var j = 0; j < numVertices; j ++ ) {
+					for ( let j = 0; j < numVertices; j ++ ) {
 
-						var j3 = j * 3;
+						const j3 = j * 3;
 						if ( isEqual( idxVertices[ i3 ], idxVertices[ i3 + 1 ], idxVertices[ i3 + 2 ],
 							vertices[ j3 ], vertices[ j3 + 1 ], vertices[ j3 + 2 ] ) ) {
 
@@ -245,7 +245,7 @@
 
 				processGeometry( bufferGeom );
 
-				var volume = new THREE.Mesh( bufferGeom, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+				const volume = new THREE.Mesh( bufferGeom, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
 				volume.castShadow = true;
 				volume.receiveShadow = true;
 				volume.frustumCulled = false;
@@ -260,14 +260,14 @@
 
 				// Volume physic object
 
-				var volumeSoftBody = softBodyHelpers.CreateFromTriMesh(
+				const volumeSoftBody = softBodyHelpers.CreateFromTriMesh(
 					physicsWorld.getWorldInfo(),
 					bufferGeom.ammoVertices,
 					bufferGeom.ammoIndices,
 					bufferGeom.ammoIndices.length / 3,
 					true );
 
-				var sbConfig = volumeSoftBody.get_m_cfg();
+				const sbConfig = volumeSoftBody.get_m_cfg();
 				sbConfig.set_viterations( 40 );
 				sbConfig.set_piterations( 40 );
 
@@ -297,8 +297,8 @@
 
 			function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
 
-				var threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
-				var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
+				const threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
+				const shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 				shape.setMargin( margin );
 
 				createRigidBody( threeObject, shape, mass, pos, quat );
@@ -312,17 +312,17 @@
 				threeObject.position.copy( pos );
 				threeObject.quaternion.copy( quat );
 
-				var transform = new Ammo.btTransform();
+				const transform = new Ammo.btTransform();
 				transform.setIdentity();
 				transform.setOrigin( new Ammo.btVector3( pos.x, pos.y, pos.z ) );
 				transform.setRotation( new Ammo.btQuaternion( quat.x, quat.y, quat.z, quat.w ) );
-				var motionState = new Ammo.btDefaultMotionState( transform );
+				const motionState = new Ammo.btDefaultMotionState( transform );
 
-				var localInertia = new Ammo.btVector3( 0, 0, 0 );
+				const localInertia = new Ammo.btVector3( 0, 0, 0 );
 				physicsShape.calculateLocalInertia( mass, localInertia );
 
-				var rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
-				var body = new Ammo.btRigidBody( rbInfo );
+				const rbInfo = new Ammo.btRigidBodyConstructionInfo( mass, motionState, physicsShape, localInertia );
+				const body = new Ammo.btRigidBody( rbInfo );
 
 				threeObject.userData.physicsBody = body;
 
@@ -369,18 +369,18 @@
 					raycaster.setFromCamera( mouseCoords, camera );
 
 					// Creates a ball
-					var ballMass = 3;
-					var ballRadius = 0.4;
+					const ballMass = 3;
+					const ballRadius = 0.4;
 
-					var ball = new THREE.Mesh( new THREE.SphereBufferGeometry( ballRadius, 18, 16 ), ballMaterial );
+					const ball = new THREE.Mesh( new THREE.SphereBufferGeometry( ballRadius, 18, 16 ), ballMaterial );
 					ball.castShadow = true;
 					ball.receiveShadow = true;
-					var ballShape = new Ammo.btSphereShape( ballRadius );
+					const ballShape = new Ammo.btSphereShape( ballRadius );
 					ballShape.setMargin( margin );
 					pos.copy( raycaster.ray.direction );
 					pos.add( raycaster.ray.origin );
 					quat.set( 0, 0, 0, 1 );
-					var ballBody = createRigidBody( ball, ballShape, ballMass, pos, quat );
+					const ballBody = createRigidBody( ball, ballShape, ballMass, pos, quat );
 					ballBody.setFriction( 0.5 );
 
 					pos.copy( raycaster.ray.direction );
@@ -413,7 +413,7 @@
 
 			function render() {
 
-				var deltaTime = clock.getDelta();
+				const deltaTime = clock.getDelta();
 
 				updatePhysics( deltaTime );
 
@@ -429,33 +429,33 @@
 				physicsWorld.stepSimulation( deltaTime, 10 );
 
 				// Update soft volumes
-				for ( var i = 0, il = softBodies.length; i < il; i ++ ) {
-
-					var volume = softBodies[ i ];
-					var geometry = volume.geometry;
-					var softBody = volume.userData.physicsBody;
-					var volumePositions = geometry.attributes.position.array;
-					var volumeNormals = geometry.attributes.normal.array;
-					var association = geometry.ammoIndexAssociation;
-					var numVerts = association.length;
-					var nodes = softBody.get_m_nodes();
-					for ( var j = 0; j < numVerts; j ++ ) {
-
-						var node = nodes.at( j );
-						var nodePos = node.get_m_x();
-						var x = nodePos.x();
-						var y = nodePos.y();
-						var z = nodePos.z();
-						var nodeNormal = node.get_m_n();
-						var nx = nodeNormal.x();
-						var ny = nodeNormal.y();
-						var nz = nodeNormal.z();
-
-						var assocVertex = association[ j ];
-
-						for ( var k = 0, kl = assocVertex.length; k < kl; k ++ ) {
-
-							var indexVertex = assocVertex[ k ];
+				for ( let i = 0, il = softBodies.length; i < il; i ++ ) {
+
+					const volume = softBodies[ i ];
+					const geometry = volume.geometry;
+					const softBody = volume.userData.physicsBody;
+					const volumePositions = geometry.attributes.position.array;
+					const volumeNormals = geometry.attributes.normal.array;
+					const association = geometry.ammoIndexAssociation;
+					const numVerts = association.length;
+					const nodes = softBody.get_m_nodes();
+					for ( let j = 0; j < numVerts; j ++ ) {
+
+						const node = nodes.at( j );
+						const nodePos = node.get_m_x();
+						const x = nodePos.x();
+						const y = nodePos.y();
+						const z = nodePos.z();
+						const nodeNormal = node.get_m_n();
+						const nx = nodeNormal.x();
+						const ny = nodeNormal.y();
+						const nz = nodeNormal.z();
+
+						const assocVertex = association[ j ];
+
+						for ( let k = 0, kl = assocVertex.length; k < kl; k ++ ) {
+
+							let indexVertex = assocVertex[ k ];
 							volumePositions[ indexVertex ] = x;
 							volumeNormals[ indexVertex ] = nx;
 							indexVertex ++;
@@ -475,16 +475,16 @@
 				}
 
 				// Update rigid bodies
-				for ( var i = 0, il = rigidBodies.length; i < il; i ++ ) {
+				for ( let i = 0, il = rigidBodies.length; i < il; i ++ ) {
 
-					var objThree = rigidBodies[ i ];
-					var objPhys = objThree.userData.physicsBody;
-					var ms = objPhys.getMotionState();
+					const objThree = rigidBodies[ i ];
+					const objPhys = objThree.userData.physicsBody;
+					const ms = objPhys.getMotionState();
 					if ( ms ) {
 
 						ms.getWorldTransform( transformAux1 );
-						var p = transformAux1.getOrigin();
-						var q = transformAux1.getRotation();
+						const p = transformAux1.getOrigin();
+						const q = transformAux1.getRotation();
 						objThree.position.set( p.x(), p.y(), p.z() );
 						objThree.quaternion.set( q.x(), q.y(), q.z(), q.w() );
 

examples/svg_lines.html

@@ -23,7 +23,7 @@
 
 			import { SVGRenderer } from './jsm/renderers/SVGRenderer.js';
 
-			var camera, scene, renderer;
+			let camera, scene, renderer;
 
 			init();
 			animate();
@@ -42,44 +42,44 @@
 
 				//
 
-				var vertices = [];
-				var divisions = 50;
+				const vertices = [];
+				const divisions = 50;
 
-				for ( var i = 0; i <= divisions; i ++ ) {
+				for ( let i = 0; i <= divisions; i ++ ) {
 
-					var v = ( i / divisions ) * ( Math.PI * 2 );
+					const v = ( i / divisions ) * ( Math.PI * 2 );
 
-					var x = Math.sin( v );
-					var z = Math.cos( v );
+					const x = Math.sin( v );
+					const z = Math.cos( v );
 
 					vertices.push( x, 0, z );
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
+				const geometry = new THREE.BufferGeometry();
 				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
 				//
 
-				for ( var i = 1; i <= 3; i ++ ) {
+				for ( let i = 1; i <= 3; i ++ ) {
 
-					var material = new THREE.LineBasicMaterial( {
+					const material = new THREE.LineBasicMaterial( {
 						color: Math.random() * 0xffffff,
 						linewidth: 10
 					} );
-					var line = new THREE.Line( geometry, material );
+					const line = new THREE.Line( geometry, material );
 					line.scale.setScalar( i / 3 );
 					scene.add( line );
 
 				}
 
-				var material = new THREE.LineDashedMaterial( {
+				const material = new THREE.LineDashedMaterial( {
 					color: 'blue',
 					linewidth: 1,
 					dashSize: 10,
 					gapSize: 10
 				} );
-				var line = new THREE.Line( geometry, material );
+				const line = new THREE.Line( geometry, material );
 				line.scale.setScalar( 2 );
 				scene.add( line );
 
@@ -100,8 +100,8 @@
 
 			function animate() {
 
-				var count = 0;
-				var time = performance.now() / 1000;
+				let count = 0;
+				const time = performance.now() / 1000;
 
 				scene.traverse( function ( child ) {
 

examples/svg_sandbox.html

@@ -21,9 +21,9 @@
 
 			import { SVGRenderer, SVGObject } from './jsm/renderers/SVGRenderer.js';
 
-			var camera, scene, renderer, stats;
+			let camera, scene, renderer, stats;
 
-			var mesh, group;
+			let group;
 
 			init();
 			animate();
@@ -38,7 +38,7 @@
 
 				// QRCODE
 
-				var loader = new THREE.BufferGeometryLoader();
+				const loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/QRCode_buffergeometry.json', function ( geometry ) {
 
 					mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { vertexColors: true } ) );
@@ -49,16 +49,16 @@
 
 				// CUBES
 
-				var cube = new THREE.BoxBufferGeometry( 100, 100, 100 );
+				const boxGeometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
-				mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );
+				let mesh = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );
 				mesh.position.x = 500;
 				mesh.rotation.x = Math.random();
 				mesh.rotation.y = Math.random();
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				scene.add( mesh );
 
-				mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
+				mesh = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 				mesh.position.x = 500;
 				mesh.position.y = 500;
 				mesh.rotation.x = Math.random();
@@ -83,19 +83,19 @@
 
 				// POLYFIELD
 
-				var geometry = new THREE.BufferGeometry();
-				var material = new THREE.MeshBasicMaterial( { vertexColors: true, side: THREE.DoubleSide } );
+				const geometry = new THREE.BufferGeometry();
+				const material = new THREE.MeshBasicMaterial( { vertexColors: true, side: THREE.DoubleSide } );
 
-				var v = new THREE.Vector3();
-				var v0 = new THREE.Vector3();
-				var v1 = new THREE.Vector3();
-				var v2 = new THREE.Vector3();
-				var color = new THREE.Color();
+				const v = new THREE.Vector3();
+				const v0 = new THREE.Vector3();
+				const v1 = new THREE.Vector3();
+				const v2 = new THREE.Vector3();
+				const color = new THREE.Color();
 
-				var vertices = [];
-				var colors = [];
+				const vertices = [];
+				const colors = [];
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( let i = 0; i < 100; i ++ ) {
 
 					v.set(
 						Math.random() * 1000 - 500,
@@ -148,10 +148,10 @@
 
 				// SPRITES
 
-				for ( var i = 0; i < 50; i ++ ) {
+				for ( let i = 0; i < 50; i ++ ) {
 
-					var material = new THREE.SpriteMaterial( { color: Math.random() * 0xffffff } );
-					var sprite = new THREE.Sprite( material );
+					const material = new THREE.SpriteMaterial( { color: Math.random() * 0xffffff } );
+					const sprite = new THREE.Sprite( material );
 					sprite.position.x = Math.random() * 1000 - 500;
 					sprite.position.y = Math.random() * 1000 - 500;
 					sprite.position.z = Math.random() * 1000 - 500;
@@ -162,14 +162,14 @@
 
 				// CUSTOM
 
-				var node = document.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
+				const node = document.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
 				node.setAttribute( 'stroke', 'black' );
 				node.setAttribute( 'fill', 'red' );
 				node.setAttribute( 'r', '40' );
 
-				for ( var i = 0; i < 50; i ++ ) {
+				for ( let i = 0; i < 50; i ++ ) {
 
-					var object = new SVGObject( node.cloneNode() );
+					const object = new SVGObject( node.cloneNode() );
 					object.position.x = Math.random() * 1000 - 500;
 					object.position.y = Math.random() * 1000 - 500;
 					object.position.z = Math.random() * 1000 - 500;
@@ -179,16 +179,16 @@
 
 				// CUSTOM FROM FILE
 
-				var fileLoader = new THREE.FileLoader();
+				const fileLoader = new THREE.FileLoader();
 				fileLoader.load( 'models/svg/hexagon.svg', function ( svg ) {
 
-					var node = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );
-					var parser = new DOMParser();
-					var doc = parser.parseFromString( svg, 'image/svg+xml' );
+					const node = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );
+					const parser = new DOMParser();
+					const doc = parser.parseFromString( svg, 'image/svg+xml' );
 
 					node.appendChild( doc.documentElement );
 
-					var object = new SVGObject( node );
+					const object = new SVGObject( node );
 					object.position.x = 500;
 					scene.add( object );
 
@@ -196,10 +196,10 @@
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0x80ffff );
+				const ambient = new THREE.AmbientLight( 0x80ffff );
 				scene.add( ambient );
 
-				var directional = new THREE.DirectionalLight( 0xffff00 );
+				const directional = new THREE.DirectionalLight( 0xffff00 );
 				directional.position.set( - 1, 0.5, 0 );
 				scene.add( directional );
 
@@ -239,7 +239,7 @@
 
 			function render() {
 
-				var time = Date.now() * 0.0002;
+				const time = Date.now() * 0.0002;
 
 				camera.position.x = Math.sin( time ) * 500;
 				camera.position.z = Math.cos( time ) * 500;