Lint example html (#24478)

* cleanup example html

* add controls with min/max distance

examples/css2d_label.html

@@ -66,7 +66,7 @@
 
 				}
 
-			}
+			};
 
 			const clock = new THREE.Clock();
 			const textureLoader = new THREE.TextureLoader();

examples/index.html

@@ -312,10 +312,8 @@
 		function filterExample( file, exp, tags ) {
 
 			const link = links[ file ];
-			const name = getName( file );
 			if ( file in tags ) file += ' ' + tags[ file ].join( ' ' );
 			const res = file.match( exp );
-			let text;
 
 			if ( res && res.length > 0 ) {
 

examples/jsm/controls/ArcballControls.js

@@ -2296,15 +2296,15 @@ class ArcballControls extends EventDispatcher {
 
 		//
 
-		this._gizmos.traverse( function( object ) {
+		this._gizmos.traverse( function ( object ) {
 
 			if ( object.isLine ) {
-		
+
 				object.geometry.dispose();
 				object.material.dispose();
-		
+
 			}
-		
+
 		} );
 
 		this._gizmos.clear();

examples/jsm/exporters/GLTFExporter.js

@@ -733,7 +733,7 @@ class GLTFWriter {
 
 					return ( c < 0.04045 ) ? c * 0.0773993808 : Math.pow( c * 0.9478672986 + 0.0521327014, 2.4 );
 
-				}
+				};
 
 			}
 
@@ -741,7 +741,7 @@ class GLTFWriter {
 
 				return c;
 
-			}
+			};
 
 		}
 

examples/jsm/loaders/KTX2Loader.js

@@ -688,17 +688,17 @@ async function createDataTexture( container ) {
 
 		if ( ! _zstd ) {
 
-			_zstd = new Promise(async (resolve) => {
+			_zstd = new Promise( async ( resolve ) => {
 
 				const zstd = new ZSTDDecoder();
 				await zstd.init();
-				resolve(zstd);
+				resolve( zstd );
 
-			});
+			} );
 
 		}
 
-		levelData = (await _zstd).decode( level.levelData, level.uncompressedByteLength );
+		levelData = ( await _zstd ).decode( level.levelData, level.uncompressedByteLength );
 
 	} else {
 

examples/jsm/loaders/LDrawLoader.js

@@ -2413,8 +2413,7 @@ class LDrawLoader extends Loader {
 
 				lum = parseInt( token.substring( 9 ) );
 
-			}
-			else {
+			} else {
 
 				lum = parseInt( token );
 

examples/jsm/nodes/Nodes.js

@@ -80,7 +80,7 @@ import JoinNode from './utils/JoinNode.js';
 import MatcapUVNode from './utils/MatcapUVNode.js';
 import MaxMipLevelNode from './utils/MaxMipLevelNode.js';
 import OscNode from './utils/OscNode.js';
-import RotateUVNode from './utils/RotateUVNode.js'
+import RotateUVNode from './utils/RotateUVNode.js';
 import SplitNode from './utils/SplitNode.js';
 import SpriteSheetUVNode from './utils/SpriteSheetUVNode.js';
 import TimerNode from './utils/TimerNode.js';

examples/jsm/nodes/accessors/ReflectVectorNode.js

@@ -14,7 +14,7 @@ class ReflectVectorNode extends Node {
 
 	getHash( /*builder*/ ) {
 
-		return `reflectVector`;
+		return 'reflectVector';
 
 	}
 

examples/jsm/nodes/display/ColorAdjustmentNode.js

@@ -22,7 +22,7 @@ const vibranceNode = new ShaderNode( ( { color, adjustment } ) => {
 	const average = div( add( color.r, color.g, color.b ), 3.0 );
 
 	const mx = max( color.r, max( color.g, color.b ) );
-	const amt = mul( sub( mx, average ), mul( -3.0, adjustment ) );
+	const amt = mul( sub( mx, average ), mul( - 3.0, adjustment ) );
 
 	return mix( color.rgb, vec3( mx ), amt );
 
@@ -30,8 +30,8 @@ const vibranceNode = new ShaderNode( ( { color, adjustment } ) => {
 
 const hueNode = new ShaderNode( ( { color, adjustment } ) => {
 
-	const RGBtoYIQ = mat3( 0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135 );
-	const YIQtoRGB = mat3( 1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.107, 1.7046 );
+	const RGBtoYIQ = mat3( 0.299, 0.587, 0.114, 0.595716, - 0.274453, - 0.321263, 0.211456, - 0.522591, 0.311135 );
+	const YIQtoRGB = mat3( 1.0, 0.9563, 0.6210, 1.0, - 0.2721, - 0.6474, 1.0, - 1.107, 1.7046 );
 
 	const yiq = mul( RGBtoYIQ, color );
 

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -58,7 +58,7 @@ Matrix4.prototype.makeOrthographic = function ( left, right, top, bottom, near,
 
 };
 
-Frustum.prototype.setFromProjectionMatrix = function( m ) {
+Frustum.prototype.setFromProjectionMatrix = function ( m ) {
 
 	const planes = this.planes;
 	const me = m.elements;

examples/misc_controls_fly.html

@@ -93,9 +93,9 @@
 
 					specular: 0x333333,
 					shininess: 15,
-					map: textureLoader.load( "textures/planets/earth_atmos_2048.jpg" ),
-					specularMap: textureLoader.load( "textures/planets/earth_specular_2048.jpg" ),
-					normalMap: textureLoader.load( "textures/planets/earth_normal_2048.jpg" ),
+					map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
+					specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
+					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 )
@@ -115,7 +115,7 @@
 
 				const materialClouds = new THREE.MeshLambertMaterial( {
 
-					map: textureLoader.load( "textures/planets/earth_clouds_1024.png" ),
+					map: textureLoader.load( 'textures/planets/earth_clouds_1024.png' ),
 					transparent: true
 
 				} );
@@ -129,7 +129,7 @@
 
 				const materialMoon = new THREE.MeshPhongMaterial( {
 
-					map: textureLoader.load( "textures/planets/moon_1024.jpg" )
+					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
 
 				} );
 

examples/misc_exporter_collada.html

@@ -381,6 +381,7 @@
 						colors.push( r * 128, 0, b * 128 );
 
 					}
+
 					teapot.geometry.setAttribute( 'color', new THREE.Uint8BufferAttribute( colors, 3, true ) );
 					teapot.material.vertexColors = true;
 					teapot.material.needsUpdate = true;

examples/webgl2_materials_texture2darray.html

@@ -159,7 +159,7 @@
 
 				if ( mesh ) {
 
-					let value = mesh.material.uniforms[ "depth" ].value;
+					let value = mesh.material.uniforms[ 'depth' ].value;
 
 					value += depthStep;
 
@@ -172,7 +172,7 @@
 
 					}
 
-					mesh.material.uniforms[ "depth" ].value = value;
+					mesh.material.uniforms[ 'depth' ].value = value;
 
 				}
 

examples/webgl_animation_skinning_additive_blending.html

@@ -203,10 +203,10 @@
 						const currentAction = currentSettings ? currentSettings.action : null;
 						const action = settings ? settings.action : null;
 
-						if ( currentAction !== action ) { 
-						
+						if ( currentAction !== action ) {
+			
 							prepareCrossFade( currentAction, action, 0.35 );
-						
+			
 						}
 
 					};

examples/webgl_buffergeometry_compression.html

@@ -45,17 +45,17 @@
 
 			// options
 			const data = {
-				"model": "Icosahedron",
-				"wireframe": false,
-				"texture": false,
-				"detail": 4,
-				"rotationSpeed": 0.1,
+				'model': 'Icosahedron',
+				'wireframe': false,
+				'texture': false,
+				'detail': 4,
+				'rotationSpeed': 0.1,
 
-				"QuantizePosEncoding": false,
-				"NormEncodingMethods": "None", // for normal encodings
-				"DefaultUVEncoding": false,
+				'QuantizePosEncoding': false,
+				'NormEncodingMethods': 'None', // for normal encodings
+				'DefaultUVEncoding': false,
 
-				"totalGPUMemory": "0 bytes"
+				'totalGPUMemory': '0 bytes'
 			};
 			let memoryDisplay;
 
@@ -136,13 +136,13 @@
 
 					switch ( data.model ) {
 
-						case "Icosahedron":
+						case 'Icosahedron':
 							return new THREE.IcosahedronGeometry( radius, data.detail );
-						case "Cylinder":
+						case 'Cylinder':
 							return new THREE.CylinderGeometry( radius, radius, radius * 2, data.detail * 6 );
-						case "Teapot":
+						case 'Teapot':
 							return new TeapotGeometry( radius, data.detail * 3, true, true, true, true, true );
-						case "TorusKnot":
+						case 'TorusKnot':
 							return new THREE.TorusKnotGeometry( radius, 10, data.detail * 20, data.detail * 6, 3, 4 );
 
 		}
@@ -169,7 +169,7 @@
 				}
 
 				let folder = gui.addFolder( 'Scene' );
-				folder.add( data, 'model', [ "Icosahedron", "Cylinder", "TorusKnot", "Teapot" ] ).onChange( generateGeometry );
+				folder.add( data, 'model', [ 'Icosahedron', 'Cylinder', 'TorusKnot', 'Teapot' ] ).onChange( generateGeometry );
 				folder.add( data, 'wireframe', false ).onChange( updateLineSegments );
 				folder.add( data, 'texture', false ).onChange( generateGeometry );
 				folder.add( data, 'detail', 1, 8, 1 ).onChange( generateGeometry );
@@ -181,7 +181,7 @@
 				folder.open();
 
 				folder = gui.addFolder( 'Normal Compression' );
-				folder.add( data, 'NormEncodingMethods', [ "None", "DEFAULT", "OCT1Byte", "OCT2Byte", "ANGLES" ] ).onChange( generateGeometry );
+				folder.add( data, 'NormEncodingMethods', [ 'None', 'DEFAULT', 'OCT1Byte', 'OCT2Byte', 'ANGLES' ] ).onChange( generateGeometry );
 				folder.open();
 
 				folder = gui.addFolder( 'UV Compression' );
@@ -190,7 +190,7 @@
 
 				folder = gui.addFolder( 'Memory Info' );
 				folder.open();
-				memoryDisplay = folder.add( data, 'totalGPUMemory', "0 bytes" );
+				memoryDisplay = folder.add( data, 'totalGPUMemory', '0 bytes' );
 				computeGPUMemory( mesh );
 
 				//
@@ -258,19 +258,19 @@
 				mesh.material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x111111 } );
 				mesh.material.map = data.texture ? texture : null;
 
-				if ( data[ "QuantizePosEncoding" ] ) {
+				if ( data[ 'QuantizePosEncoding' ] ) {
 
 					GeometryCompressionUtils.compressPositions( mesh );
 
 				}
 
-				if ( data[ "NormEncodingMethods" ] !== "None" ) {
+				if ( data[ 'NormEncodingMethods' ] !== 'None' ) {
 
-					GeometryCompressionUtils.compressNormals( mesh, data[ "NormEncodingMethods" ] );
+					GeometryCompressionUtils.compressNormals( mesh, data[ 'NormEncodingMethods' ] );
 
 				}
 
-				if ( data[ "DefaultUVEncoding" ] ) {
+				if ( data[ 'DefaultUVEncoding' ] ) {
 
 					GeometryCompressionUtils.compressUvs( mesh );
 
@@ -284,7 +284,7 @@
 			function computeGPUMemory( mesh ) {
 
 				// Use BufferGeometryUtils to do memory calculation
-				memoryDisplay.setValue( BufferGeometryUtils.estimateBytesUsed( mesh.geometry ) + " bytes" );
+				memoryDisplay.setValue( BufferGeometryUtils.estimateBytesUsed( mesh.geometry ) + ' bytes' );
 
 			}
 

examples/webgl_geometry_shapes.html

@@ -71,7 +71,7 @@
 				scene.add( group );
 
 				const loader = new THREE.TextureLoader();
-				const texture = loader.load( "textures/uv_grid_opengl.jpg" );
+				const texture = loader.load( 'textures/uv_grid_opengl.jpg' );
 
 				// it's necessary to apply these settings in order to correctly display the texture on a shape geometry
 

examples/webgl_gpgpu_birds_gltf.html

@@ -420,22 +420,22 @@
 
 				const valuesChanger = function () {
 
-					velocityUniforms[ "separationDistance" ].value = effectController.separation;
-					velocityUniforms[ "alignmentDistance" ].value = effectController.alignment;
-					velocityUniforms[ "cohesionDistance" ].value = effectController.cohesion;
-					velocityUniforms[ "freedomFactor" ].value = effectController.freedom;
-					if ( materialShader ) materialShader.uniforms[ "size" ].value = effectController.size;
+					velocityUniforms[ 'separationDistance' ].value = effectController.separation;
+					velocityUniforms[ 'alignmentDistance' ].value = effectController.alignment;
+					velocityUniforms[ 'cohesionDistance' ].value = effectController.cohesion;
+					velocityUniforms[ 'freedomFactor' ].value = effectController.freedom;
+					if ( materialShader ) materialShader.uniforms[ 'size' ].value = effectController.size;
 					BirdGeometry.setDrawRange( 0, indicesPerBird * effectController.count );
 
 				};
 
 				valuesChanger();
 
-				gui.add( effectController, "separation", 0.0, 100.0, 1.0 ).onChange( valuesChanger );
-				gui.add( effectController, "alignment", 0.0, 100, 0.001 ).onChange( valuesChanger );
-				gui.add( effectController, "cohesion", 0.0, 100, 0.025 ).onChange( valuesChanger );
-				gui.add( effectController, "size", 0, 1, 0.01 ).onChange( valuesChanger );
-				gui.add( effectController, "count", 0, BIRDS, 1 ).onChange( valuesChanger );
+				gui.add( effectController, 'separation', 0.0, 100.0, 1.0 ).onChange( valuesChanger );
+				gui.add( effectController, 'alignment', 0.0, 100, 0.001 ).onChange( valuesChanger );
+				gui.add( effectController, 'cohesion', 0.0, 100, 0.025 ).onChange( valuesChanger );
+				gui.add( effectController, 'size', 0, 1, 0.01 ).onChange( valuesChanger );
+				gui.add( effectController, 'count', 0, BIRDS, 1 ).onChange( valuesChanger );
 				gui.close();
 
 				initBirds( effectController );
@@ -457,8 +457,8 @@
 				fillPositionTexture( dtPosition );
 				fillVelocityTexture( dtVelocity );
 
-				velocityVariable = gpuCompute.addVariable( "textureVelocity", document.getElementById( 'fragmentShaderVelocity' ).textContent, dtVelocity );
-				positionVariable = gpuCompute.addVariable( "texturePosition", document.getElementById( 'fragmentShaderPosition' ).textContent, dtPosition );
+				velocityVariable = gpuCompute.addVariable( 'textureVelocity', document.getElementById( 'fragmentShaderVelocity' ).textContent, dtVelocity );
+				positionVariable = gpuCompute.addVariable( 'texturePosition', document.getElementById( 'fragmentShaderPosition' ).textContent, dtPosition );
 
 				gpuCompute.setVariableDependencies( velocityVariable, [ positionVariable, velocityVariable ] );
 				gpuCompute.setVariableDependencies( positionVariable, [ positionVariable, velocityVariable ] );
@@ -466,16 +466,16 @@
 				positionUniforms = positionVariable.material.uniforms;
 				velocityUniforms = velocityVariable.material.uniforms;
 
-				positionUniforms[ "time" ] = { value: 0.0 };
-				positionUniforms[ "delta" ] = { value: 0.0 };
-				velocityUniforms[ "time" ] = { value: 1.0 };
-				velocityUniforms[ "delta" ] = { value: 0.0 };
-				velocityUniforms[ "testing" ] = { value: 1.0 };
-				velocityUniforms[ "separationDistance" ] = { value: 1.0 };
-				velocityUniforms[ "alignmentDistance" ] = { value: 1.0 };
-				velocityUniforms[ "cohesionDistance" ] = { value: 1.0 };
-				velocityUniforms[ "freedomFactor" ] = { value: 1.0 };
-				velocityUniforms[ "predator" ] = { value: new THREE.Vector3() };
+				positionUniforms[ 'time' ] = { value: 0.0 };
+				positionUniforms[ 'delta' ] = { value: 0.0 };
+				velocityUniforms[ 'time' ] = { value: 1.0 };
+				velocityUniforms[ 'delta' ] = { value: 0.0 };
+				velocityUniforms[ 'testing' ] = { value: 1.0 };
+				velocityUniforms[ 'separationDistance' ] = { value: 1.0 };
+				velocityUniforms[ 'alignmentDistance' ] = { value: 1.0 };
+				velocityUniforms[ 'cohesionDistance' ] = { value: 1.0 };
+				velocityUniforms[ 'freedomFactor' ] = { value: 1.0 };
+				velocityUniforms[ 'predator' ] = { value: new THREE.Vector3() };
 				velocityVariable.material.defines.BOUNDS = BOUNDS.toFixed( 2 );
 
 				velocityVariable.wrapS = THREE.RepeatWrapping;
@@ -655,22 +655,22 @@
 				if ( delta > 1 ) delta = 1; // safety cap on large deltas
 				last = now;
 
-				positionUniforms[ "time" ].value = now;
-				positionUniforms[ "delta" ].value = delta;
-				velocityUniforms[ "time" ].value = now;
-				velocityUniforms[ "delta" ].value = delta;
-				if ( materialShader ) materialShader.uniforms[ "time" ].value = now / 1000;
-				if ( materialShader ) materialShader.uniforms[ "delta" ].value = delta;
+				positionUniforms[ 'time' ].value = now;
+				positionUniforms[ 'delta' ].value = delta;
+				velocityUniforms[ 'time' ].value = now;
+				velocityUniforms[ 'delta' ].value = delta;
+				if ( materialShader ) materialShader.uniforms[ 'time' ].value = now / 1000;
+				if ( materialShader ) materialShader.uniforms[ 'delta' ].value = delta;
 
-				velocityUniforms[ "predator" ].value.set( 0.5 * mouseX / windowHalfX, - 0.5 * mouseY / windowHalfY, 0 );
+				velocityUniforms[ 'predator' ].value.set( 0.5 * mouseX / windowHalfX, - 0.5 * mouseY / windowHalfY, 0 );
 
 				mouseX = 10000;
 				mouseY = 10000;
 
 				gpuCompute.compute();
 
-				if ( materialShader ) materialShader.uniforms[ "texturePosition" ].value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
-				if ( materialShader ) materialShader.uniforms[ "textureVelocity" ].value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
+				if ( materialShader ) materialShader.uniforms[ 'texturePosition' ].value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+				if ( materialShader ) materialShader.uniforms[ 'textureVelocity' ].value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
 
 				renderer.render( scene, camera );
 

examples/webgl_lights_physical.html

@@ -44,29 +44,29 @@
 
 			// ref for lumens: http://www.power-sure.com/lumens.htm
 			const bulbLuminousPowers = {
-				"110000 lm (1000W)": 110000,
-				"3500 lm (300W)": 3500,
-				"1700 lm (100W)": 1700,
-				"800 lm (60W)": 800,
-				"400 lm (40W)": 400,
-				"180 lm (25W)": 180,
-				"20 lm (4W)": 20,
-				"Off": 0
+				'110000 lm (1000W)': 110000,
+				'3500 lm (300W)': 3500,
+				'1700 lm (100W)': 1700,
+				'800 lm (60W)': 800,
+				'400 lm (40W)': 400,
+				'180 lm (25W)': 180,
+				'20 lm (4W)': 20,
+				'Off': 0
 			};
 
 			// ref for solar irradiances: https://en.wikipedia.org/wiki/Lux
 			const hemiLuminousIrradiances = {
-				"0.0001 lx (Moonless Night)": 0.0001,
-				"0.002 lx (Night Airglow)": 0.002,
-				"0.5 lx (Full Moon)": 0.5,
-				"3.4 lx (City Twilight)": 3.4,
-				"50 lx (Living Room)": 50,
-				"100 lx (Very Overcast)": 100,
-				"350 lx (Office Room)": 350,
-				"400 lx (Sunrise/Sunset)": 400,
-				"1000 lx (Overcast)": 1000,
-				"18000 lx (Daylight)": 18000,
-				"50000 lx (Direct Sun)": 50000
+				'0.0001 lx (Moonless Night)': 0.0001,
+				'0.002 lx (Night Airglow)': 0.002,
+				'0.5 lx (Full Moon)': 0.5,
+				'3.4 lx (City Twilight)': 3.4,
+				'50 lx (Living Room)': 50,
+				'100 lx (Very Overcast)': 100,
+				'350 lx (Office Room)': 350,
+				'400 lx (Sunrise/Sunset)': 400,
+				'1000 lx (Overcast)': 1000,
+				'18000 lx (Daylight)': 18000,
+				'50000 lx (Direct Sun)': 50000
 			};
 
 			const params = {
@@ -117,7 +117,7 @@
 					bumpScale: 0.0005
 				} );
 				const textureLoader = new THREE.TextureLoader();
-				textureLoader.load( "textures/hardwood2_diffuse.jpg", function ( map ) {
+				textureLoader.load( 'textures/hardwood2_diffuse.jpg', function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
@@ -128,7 +128,7 @@
 					floorMat.needsUpdate = true;
 
 				} );
-				textureLoader.load( "textures/hardwood2_bump.jpg", function ( map ) {
+				textureLoader.load( 'textures/hardwood2_bump.jpg', function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
@@ -138,7 +138,7 @@
 					floorMat.needsUpdate = true;
 
 				} );
-				textureLoader.load( "textures/hardwood2_roughness.jpg", function ( map ) {
+				textureLoader.load( 'textures/hardwood2_roughness.jpg', function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
@@ -155,7 +155,7 @@
 					bumpScale: 0.002,
 					metalness: 0.2
 				} );
-				textureLoader.load( "textures/brick_diffuse.jpg", function ( map ) {
+				textureLoader.load( 'textures/brick_diffuse.jpg', function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
@@ -166,7 +166,7 @@
 					cubeMat.needsUpdate = true;
 
 				} );
-				textureLoader.load( "textures/brick_bump.jpg", function ( map ) {
+				textureLoader.load( 'textures/brick_bump.jpg', function ( map ) {
 
 					map.wrapS = THREE.RepeatWrapping;
 					map.wrapT = THREE.RepeatWrapping;
@@ -182,7 +182,7 @@
 					roughness: 0.5,
 					metalness: 1.0
 				} );
-				textureLoader.load( "textures/planets/earth_atmos_2048.jpg", function ( map ) {
+				textureLoader.load( 'textures/planets/earth_atmos_2048.jpg', function ( map ) {
 
 					map.anisotropy = 4;
 					map.encoding = THREE.sRGBEncoding;
@@ -190,7 +190,7 @@
 					ballMat.needsUpdate = true;
 
 				} );
-				textureLoader.load( "textures/planets/earth_specular_2048.jpg", function ( map ) {
+				textureLoader.load( 'textures/planets/earth_specular_2048.jpg', function ( map ) {
 
 					map.anisotropy = 4;
 					map.encoding = THREE.sRGBEncoding;

examples/webgl_lines_fat_wireframe.html

@@ -222,7 +222,7 @@
 					// dashed is implemented as a defines -- not as a uniform. this could be changed.
 					// ... or THREE.LineDashedMaterial could be implemented as a separate material
 					// temporary hack - renderer should do this eventually
-					if ( val ) matLine.defines.USE_DASH = ""; else delete matLine.defines.USE_DASH;
+					if ( val ) matLine.defines.USE_DASH = ''; else delete matLine.defines.USE_DASH;
 					matLine.needsUpdate = true;
 
 					wireframe1.material = val ? matLineDashed : matLineBasic;

examples/webgl_loader_bvh.html

@@ -49,7 +49,7 @@
 			animate();
 
 			const loader = new BVHLoader();
-			loader.load( "models/bvh/pirouette.bvh", function ( result ) {
+			loader.load( 'models/bvh/pirouette.bvh', function ( result ) {
 
 				skeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );
 				skeletonHelper.skeleton = result.skeleton; // allow animation mixer to bind to THREE.SkeletonHelper directly

examples/webgl_loader_md2.html

@@ -106,7 +106,7 @@
 
 				//  GROUND
 
-				const gt = new THREE.TextureLoader().load( "textures/terrain/grasslight-big.jpg" );
+				const gt = new THREE.TextureLoader().load( 'textures/terrain/grasslight-big.jpg' );
 				const gg = new THREE.PlaneGeometry( 2000, 2000 );
 				const gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
 
@@ -166,21 +166,21 @@
 
 				const config = {
 
-					baseUrl: "models/md2/ratamahatta/",
-
-					body: "ratamahatta.md2",
-					skins: [ "ratamahatta.png", "ctf_b.png", "ctf_r.png", "dead.png", "gearwhore.png" ],
-					weapons: [[ "weapon.md2", "weapon.png" ],
-								 [ "w_bfg.md2", "w_bfg.png" ],
-								 [ "w_blaster.md2", "w_blaster.png" ],
-								 [ "w_chaingun.md2", "w_chaingun.png" ],
-								 [ "w_glauncher.md2", "w_glauncher.png" ],
-								 [ "w_hyperblaster.md2", "w_hyperblaster.png" ],
-								 [ "w_machinegun.md2", "w_machinegun.png" ],
-								 [ "w_railgun.md2", "w_railgun.png" ],
-								 [ "w_rlauncher.md2", "w_rlauncher.png" ],
-								 [ "w_shotgun.md2", "w_shotgun.png" ],
-								 [ "w_sshotgun.md2", "w_sshotgun.png" ]
+					baseUrl: 'models/md2/ratamahatta/',
+
+					body: 'ratamahatta.md2',
+					skins: [ 'ratamahatta.png', 'ctf_b.png', 'ctf_r.png', 'dead.png', 'gearwhore.png' ],
+					weapons: [[ 'weapon.md2', 'weapon.png' ],
+								 [ 'w_bfg.md2', 'w_bfg.png' ],
+								 [ 'w_blaster.md2', 'w_blaster.png' ],
+								 [ 'w_chaingun.md2', 'w_chaingun.png' ],
+								 [ 'w_glauncher.md2', 'w_glauncher.png' ],
+								 [ 'w_hyperblaster.md2', 'w_hyperblaster.png' ],
+								 [ 'w_machinegun.md2', 'w_machinegun.png' ],
+								 [ 'w_railgun.md2', 'w_railgun.png' ],
+								 [ 'w_rlauncher.md2', 'w_rlauncher.png' ],
+								 [ 'w_shotgun.md2', 'w_shotgun.png' ],
+								 [ 'w_sshotgun.md2', 'w_sshotgun.png' ]
 					]
 
 				};
@@ -222,12 +222,12 @@
 
 			function labelize( text ) {
 
-				const parts = text.split( "." );
+				const parts = text.split( '.' );
 
 				if ( parts.length > 1 ) {
 
 					parts.length -= 1;
-					return parts.join( "." );
+					return parts.join( '.' );
 
 				}
 
@@ -239,7 +239,7 @@
 
 			function setupWeaponsGUI( character ) {
 
-				const folder = gui.addFolder( "Weapons" );
+				const folder = gui.addFolder( 'Weapons' );
 
 				const generateCallback = function ( index ) {
 
@@ -268,7 +268,7 @@
 
 			function setupSkinsGUI( character ) {
 
-				const folder = gui.addFolder( "Skins" );
+				const folder = gui.addFolder( 'Skins' );
 
 				const generateCallback = function ( index ) {
 
@@ -297,7 +297,7 @@
 
 			function setupGUIAnimations( character ) {
 
-				const folder = gui.addFolder( "Animations" );
+				const folder = gui.addFolder( 'Animations' );
 
 				const generateCallback = function ( animationClip ) {
 

examples/webgl_materials_envmaps_groundprojected.html

@@ -37,8 +37,6 @@
 		<script type="module">
 			import * as THREE from 'three';
 
-			import Stats from './jsm/libs/stats.module.js';
-
 			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GroundProjectedEnv } from './jsm/objects/GroundProjectedEnv.js';

examples/webgl_materials_texture_filters.html

@@ -93,15 +93,15 @@
 
 				// GROUND
 
-				const imageCanvas = document.createElement( "canvas" );
-				const context = imageCanvas.getContext( "2d" );
+				const imageCanvas = document.createElement( 'canvas' );
+				const context = imageCanvas.getContext( '2d' );
 
 				imageCanvas.width = imageCanvas.height = 128;
 
-				context.fillStyle = "#444";
+				context.fillStyle = '#444';
 				context.fillRect( 0, 0, 128, 128 );
 
-				context.fillStyle = "#fff";
+				context.fillStyle = '#fff';
 				context.fillRect( 0, 0, 64, 64 );
 				context.fillRect( 64, 64, 64, 64 );
 
@@ -176,7 +176,7 @@
 
 				};
 
-				const texturePainting = new THREE.TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting );
+				const texturePainting = new THREE.TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg', callbackPainting );
 				const texturePainting2 = new THREE.Texture();
 				const materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );
 				const materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
@@ -191,7 +191,7 @@
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.autoClear = false;
 
-				renderer.domElement.style.position = "relative";
+				renderer.domElement.style.position = 'relative';
 				container.appendChild( renderer.domElement );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove );

examples/webgl_materials_variations_basic.html

@@ -66,7 +66,7 @@
 
 				// Materials
 
-				let imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
+				let imgTexture = new THREE.TextureLoader().load( 'textures/planets/moon_1024.jpg' );
 				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 				imgTexture.encoding = THREE.sRGBEncoding;
 				imgTexture.anisotropy = 16;
@@ -127,17 +127,17 @@
 
 				}
 
-				addLabel( "+hue", new THREE.Vector3( - 350, 0, 0 ) );
-				addLabel( "-hue", new THREE.Vector3( 350, 0, 0 ) );
+				addLabel( '+hue', new THREE.Vector3( - 350, 0, 0 ) );
+				addLabel( '-hue', new THREE.Vector3( 350, 0, 0 ) );
 
-				addLabel( "-reflectivity", new THREE.Vector3( 0, - 300, 0 ) );
-				addLabel( "+reflectivity", new THREE.Vector3( 0, 300, 0 ) );
+				addLabel( '-reflectivity', new THREE.Vector3( 0, - 300, 0 ) );
+				addLabel( '+reflectivity', new THREE.Vector3( 0, 300, 0 ) );
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
-				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
+				addLabel( '-diffuse', new THREE.Vector3( 0, 0, - 300 ) );
+				addLabel( '+diffuse', new THREE.Vector3( 0, 0, 300 ) );
 
-				addLabel( "envMap", new THREE.Vector3( - 350, 300, 0 ) );
-				addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
+				addLabel( 'envMap', new THREE.Vector3( - 350, 300, 0 ) );
+				addLabel( 'no envMap', new THREE.Vector3( 350, 300, 0 ) );
 
 				particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 				scene.add( particleLight );

examples/webgl_materials_variations_toon.html

@@ -136,11 +136,11 @@
 
 				}
 
-				addLabel( "-gradientMap", new THREE.Vector3( - 350, 0, 0 ) );
-				addLabel( "+gradientMap", new THREE.Vector3( 350, 0, 0 ) );
+				addLabel( '-gradientMap', new THREE.Vector3( - 350, 0, 0 ) );
+				addLabel( '+gradientMap', new THREE.Vector3( 350, 0, 0 ) );
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
-				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
+				addLabel( '-diffuse', new THREE.Vector3( 0, 0, - 300 ) );
+				addLabel( '+diffuse', new THREE.Vector3( 0, 0, 300 ) );
 
 				particleLight = new THREE.Mesh(
 					new THREE.SphereGeometry( 4, 8, 8 ),

examples/webgl_multiple_elements.html

@@ -90,7 +90,7 @@
 
 			function init() {
 
-				canvas = document.getElementById( "c" );
+				canvas = document.getElementById( 'c' );
 
 				const geometries = [
 					new THREE.BoxGeometry( 1, 1, 1 ),

examples/webgl_multiple_scenes_comparison.html

@@ -139,7 +139,7 @@
 
 					sliderPos = Math.max( 0, Math.min( window.innerWidth, e.pageX ) );
 
-					slider.style.left = sliderPos - ( slider.offsetWidth / 2 ) + "px";
+					slider.style.left = sliderPos - ( slider.offsetWidth / 2 ) + 'px';
 
 				}
 

examples/webgl_points_dynamic.html

@@ -117,8 +117,8 @@
 
 				effectFocus = new ShaderPass( FocusShader );
 
-				effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth * window.devicePixelRatio;
-				effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight * window.devicePixelRatio;
+				effectFocus.uniforms[ 'screenWidth' ].value = window.innerWidth * window.devicePixelRatio;
+				effectFocus.uniforms[ 'screenHeight' ].value = window.innerHeight * window.devicePixelRatio;
 
 				composer = new EffectComposer( renderer );
 
@@ -146,8 +146,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				composer.setSize( window.innerWidth, window.innerHeight );
 
-				effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth * window.devicePixelRatio;
-				effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight * window.devicePixelRatio;
+				effectFocus.uniforms[ 'screenWidth' ].value = window.innerWidth * window.devicePixelRatio;
+				effectFocus.uniforms[ 'screenHeight' ].value = window.innerHeight * window.devicePixelRatio;
 
 			}
 

examples/webgl_postprocessing_afterimage.html

@@ -75,17 +75,17 @@
 
 				if ( typeof TESTING !== 'undefined' ) {
 
-		for ( let i = 0; i < 45; i ++ ) {
+					for ( let i = 0; i < 45; i ++ ) {
 
-			render();
+						render();
 
-		}
+					}
 
 
 
-	}
+				}
 
-}
+			}
 
 			function createGUI() {
 

examples/webgl_raycaster_bvh.html

@@ -52,7 +52,7 @@
 			THREE.Mesh.prototype.raycast = acceleratedRaycast;
 
 			let stats;
-			let camera, scene, renderer, controls;
+			let camera, scene, renderer;
 			let mesh, helper, bvh;
 			let sphereInstance, lineSegments;
 
@@ -147,7 +147,9 @@
 
 				} );
 
-				controls = new OrbitControls( camera, renderer.domElement );
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 5;
+				controls.maxDistance = 75;
 
 				// set up gui
 				const gui = new GUI();
@@ -223,7 +225,7 @@
 
 					// raycast
 					_raycaster.ray.origin.copy( _position );
-					_raycaster.ray.direction.copy( _position ).multiplyScalar( - 1).normalize();
+					_raycaster.ray.direction.copy( _position ).multiplyScalar( - 1 ).normalize();
 
 					// update hits points and lines
 					const hits = _raycaster.intersectObject( mesh );
@@ -258,9 +260,6 @@
 
 			function onWindowResize() {
 
-				const hx = window.innerWidth / 2;
-				const hy = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -291,6 +290,7 @@
 					mesh.updateMatrixWorld();
 
 				}
+
 				updateRays();
 
 				renderer.render( scene, camera );

examples/webgl_raycaster_sprite.html

@@ -37,7 +37,7 @@
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 		let renderer, scene, camera;
-		let controls, group;
+		let group;
 
 		let selectedObject = null;
 		const raycaster = new THREE.Raycaster();
@@ -66,8 +66,10 @@
 			camera.position.set( 15, 15, 15 );
 			camera.lookAt( scene.position );
 
-			controls = new OrbitControls( camera, renderer.domElement );
-
+			const controls = new OrbitControls( camera, renderer.domElement );
+			controls.minDistance = 15;
+			controls.maxDistance = 250;
+		
 			// add sprites
 
 			const sprite1 = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );

examples/webgl_shader2.html

@@ -172,15 +172,15 @@
 				const geometry = new THREE.BoxGeometry( 0.75, 0.75, 0.75 );
 
 				uniforms1 = {
-					"time": { value: 1.0 }
+					'time': { value: 1.0 }
 				};
 
 				uniforms2 = {
-					"time": { value: 1.0 },
-					"colorTexture": { value: new THREE.TextureLoader().load( 'textures/disturb.jpg' ) }
+					'time': { value: 1.0 },
+					'colorTexture': { value: new THREE.TextureLoader().load( 'textures/disturb.jpg' ) }
 				};
 
-				uniforms2[ "colorTexture" ].value.wrapS = uniforms2[ "colorTexture" ].value.wrapT = THREE.RepeatWrapping;
+				uniforms2[ 'colorTexture' ].value.wrapS = uniforms2[ 'colorTexture' ].value.wrapT = THREE.RepeatWrapping;
 
 				const params = [
 					[ 'fragment_shader1', uniforms1 ],
@@ -243,8 +243,8 @@
 
 				const delta = clock.getDelta();
 
-				uniforms1[ "time" ].value += delta * 5;
-				uniforms2[ "time" ].value = clock.elapsedTime;
+				uniforms1[ 'time' ].value += delta * 5;
+				uniforms2[ 'time' ].value = clock.elapsedTime;
 
 				for ( let i = 0; i < scene.children.length; i ++ ) {
 

examples/webgl_shaders_tonemapping.html

@@ -144,61 +144,61 @@
 					lights: true,
 					uniforms: THREE.UniformsUtils.merge( [
 
-						THREE.UniformsLib[ "common" ],
-						THREE.UniformsLib[ "lights" ]
+						THREE.UniformsLib[ 'common' ],
+						THREE.UniformsLib[ 'lights' ]
 
 					] ),
 					vertexShader: [
-						"varying vec3 vViewPosition;",
-						"varying vec3 vNormal;",
-						"void main() {",
-						THREE.ShaderChunk[ "beginnormal_vertex" ],
-						THREE.ShaderChunk[ "defaultnormal_vertex" ],
+						'varying vec3 vViewPosition;',
+						'varying vec3 vNormal;',
+						'void main() {',
+						THREE.ShaderChunk[ 'beginnormal_vertex' ],
+						THREE.ShaderChunk[ 'defaultnormal_vertex' ],
 
-						"	vNormal = normalize( transformedNormal );",
-						"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
-						"vViewPosition = -mvPosition.xyz;",
-						"gl_Position = projectionMatrix * mvPosition;",
-						"}"
+						'	vNormal = normalize( transformedNormal );',
+						'vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
+						'vViewPosition = -mvPosition.xyz;',
+						'gl_Position = projectionMatrix * mvPosition;',
+						'}'
 
-					].join( "\n" ),
+					].join( '\n' ),
 
 					fragmentShader: [
 
-						THREE.ShaderChunk[ "common" ],
-						THREE.ShaderChunk[ "bsdfs" ],
-						THREE.ShaderChunk[ "lights_pars_begin" ],
-						THREE.ShaderChunk[ "normal_pars_fragment" ],
-						THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
+						THREE.ShaderChunk[ 'common' ],
+						THREE.ShaderChunk[ 'bsdfs' ],
+						THREE.ShaderChunk[ 'lights_pars_begin' ],
+						THREE.ShaderChunk[ 'normal_pars_fragment' ],
+						THREE.ShaderChunk[ 'lights_phong_pars_fragment' ],
 
-						"void main() {",
-						"vec3 normal = normalize( -vNormal );",
-						"vec3 viewPosition = normalize( vViewPosition );",
-						"#if NUM_DIR_LIGHTS > 0",
+						'void main() {',
+						'vec3 normal = normalize( -vNormal );',
+						'vec3 viewPosition = normalize( vViewPosition );',
+						'#if NUM_DIR_LIGHTS > 0',
 
-						"vec3 dirDiffuse = vec3( 0.0 );",
+						'vec3 dirDiffuse = vec3( 0.0 );',
 
-						"for( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {",
+						'for( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {',
 
-						"vec4 lDirection = viewMatrix * vec4( directionalLights[i].direction, 0.0 );",
-						"vec3 dirVector = normalize( lDirection.xyz );",
-						"float dotProduct = dot( viewPosition, dirVector );",
-						"dotProduct = 1.0 * max( dotProduct, 0.0 ) + (1.0 - max( -dot( normal, dirVector ), 0.0 ));",
-						"dotProduct *= dotProduct;",
-						"dirDiffuse += max( 0.5 * dotProduct, 0.0 ) * directionalLights[i].color;",
-						"}",
-						"#endif",
+						'vec4 lDirection = viewMatrix * vec4( directionalLights[i].direction, 0.0 );',
+						'vec3 dirVector = normalize( lDirection.xyz );',
+						'float dotProduct = dot( viewPosition, dirVector );',
+						'dotProduct = 1.0 * max( dotProduct, 0.0 ) + (1.0 - max( -dot( normal, dirVector ), 0.0 ));',
+						'dotProduct *= dotProduct;',
+						'dirDiffuse += max( 0.5 * dotProduct, 0.0 ) * directionalLights[i].color;',
+						'}',
+						'#endif',
 
 						//Fade out atmosphere at edge
-						"float viewDot = abs(dot( normal, viewPosition ));",
-						"viewDot = clamp( pow( viewDot + 0.6, 10.0 ), 0.0, 1.0);",
+						'float viewDot = abs(dot( normal, viewPosition ));',
+						'viewDot = clamp( pow( viewDot + 0.6, 10.0 ), 0.0, 1.0);',
 
-						"vec3 color = vec3( 0.05, 0.09, 0.13 ) * dirDiffuse;",
-						"gl_FragColor = vec4( color, viewDot );",
+						'vec3 color = vec3( 0.05, 0.09, 0.13 ) * dirDiffuse;',
+						'gl_FragColor = vec4( color, viewDot );',
 
-						"}"
+						'}'
 
-					].join( "\n" )
+					].join( '\n' )
 				};
 
 				const earthAtmoMat = new THREE.ShaderMaterial( atmoShader );
@@ -270,34 +270,34 @@
 
 				const vBGShader = [
 					// "attribute vec2 uv;",
-					"varying vec2 vUv;",
-					"void main() {",
-					"vUv = uv;",
-					"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-					"}"
+					'varying vec2 vUv;',
+					'void main() {',
+					'vUv = uv;',
+					'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+					'}'
 
-				].join( "\n" );
+				].join( '\n' );
 
 				const pBGShader = [
 
-					"uniform sampler2D map;",
-					"varying vec2 vUv;",
+					'uniform sampler2D map;',
+					'varying vec2 vUv;',
 
-					"void main() {",
+					'void main() {',
 
-					"vec2 sampleUV = vUv;",
-					"vec4 color = texture2D( map, sampleUV, 0.0 );",
+					'vec2 sampleUV = vUv;',
+					'vec4 color = texture2D( map, sampleUV, 0.0 );',
 
-					"gl_FragColor = vec4( color.xyz, 1.0 );",
+					'gl_FragColor = vec4( color.xyz, 1.0 );',
 
-					"}"
+					'}'
 
-				].join( "\n" );
+				].join( '\n' );
 
 				// Skybox
 				adaptiveLuminanceMat = new THREE.ShaderMaterial( {
 					uniforms: {
-						"map": { value: null }
+						'map': { value: null }
 					},
 					vertexShader: vBGShader,
 					fragmentShader: pBGShader,
@@ -308,7 +308,7 @@
 
 				currentLuminanceMat = new THREE.ShaderMaterial( {
 					uniforms: {
-						"map": { value: null }
+						'map': { value: null }
 					},
 					vertexShader: vBGShader,
 					fragmentShader: pBGShader,
@@ -329,10 +329,10 @@
 				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
 				debugScene.add( quadBG );
 
-				const r = "textures/cube/MilkyWay/";
-				const urls = [ r + "dark-s_px.jpg", r + "dark-s_nx.jpg",
-							 r + "dark-s_py.jpg", r + "dark-s_ny.jpg",
-							 r + "dark-s_pz.jpg", r + "dark-s_nz.jpg" ];
+				const r = 'textures/cube/MilkyWay/';
+				const urls = [ r + 'dark-s_px.jpg', r + 'dark-s_nx.jpg',
+							 r + 'dark-s_py.jpg', r + 'dark-s_ny.jpg',
+							 r + 'dark-s_pz.jpg', r + 'dark-s_nz.jpg' ];
 
 				const textureCube = new THREE.CubeTextureLoader().load( urls );
 				textureCube.encoding = THREE.sRGBEncoding;
@@ -441,15 +441,15 @@
 				requestAnimationFrame( animate );
 				if ( bloomPass ) {
 
-					bloomPass.combineUniforms[ "strength" ].value = params.bloomAmount;
+					bloomPass.combineUniforms[ 'strength' ].value = params.bloomAmount;
 
 				}
 
 				if ( adaptToneMappingPass ) {
 
 					adaptToneMappingPass.setAdaptionRate( params.adaptionRate );
-					adaptiveLuminanceMat.uniforms[ "map" ].value = adaptToneMappingPass.luminanceRT;
-					currentLuminanceMat.uniforms[ "map" ].value = adaptToneMappingPass.currentLuminanceRT;
+					adaptiveLuminanceMat.uniforms[ 'map' ].value = adaptToneMappingPass.luminanceRT;
+					currentLuminanceMat.uniforms[ 'map' ].value = adaptToneMappingPass.currentLuminanceRT;
 
 					adaptToneMappingPass.enabled = params.enabled;
 					adaptToneMappingPass.setMaxLuminance( params.maxLuminance );

examples/webgl_shadowmesh.html

@@ -72,7 +72,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				document.getElementById( "container" ).appendChild( renderer.domElement );
+				document.getElementById( 'container' ).appendChild( renderer.domElement );
 				window.addEventListener( 'resize', onWindowResize );
 
 				camera.position.set( 0, 2.5, 10 );
@@ -258,7 +258,7 @@
 					lightSphere.visible = false;
 					lightHolder.visible = false;
 
-					document.getElementById( 'lightButton' ).value = "Switch to PointLight";
+					document.getElementById( 'lightButton' ).value = 'Switch to PointLight';
 
 				} else {
 
@@ -284,7 +284,7 @@
 					lightSphere.visible = true;
 					lightHolder.visible = true;
 
-					document.getElementById( 'lightButton' ).value = "Switch to THREE.DirectionalLight";
+					document.getElementById( 'lightButton' ).value = 'Switch to THREE.DirectionalLight';
 
 				}
 

examples/webgpu_cubemap_adjustments.html

@@ -118,14 +118,14 @@
 
 					return saturation( hueFilter, saturationNode );
 
-				}
+				};
 
 				const blurNode = uniform( 0 );
 
 				scene.environmentNode = getEnvironmentNode( reflectVector );
 
 				scene.backgroundNode = context( getEnvironmentNode( transformDirection( positionWorld, modelWorldMatrix ) ), {
-					levelNode : blurNode // @TODO: currently it uses mipmaps value, I think it should be replaced for [0,1]
+					levelNode: blurNode // @TODO: currently it uses mipmaps value, I think it should be replaced for [0,1]
 				} );
 
 				// scene objects

examples/webgpu_cubemap_mix.html

@@ -84,7 +84,7 @@
 				scene.environmentNode = mix( cubeTexture( cube2Texture ), cubeTexture( cube1Texture ), oscSine( timerLocal( .1 ) ) );
 
 				scene.backgroundNode = context( scene.environmentNode, {
-					levelNode : float( 9 ) // @TODO: currently it uses mipmaps value, I think it should be replaced for [0,1]
+					levelNode: float( 9 ) // @TODO: currently it uses mipmaps value, I think it should be replaced for [0,1]
 				} );
 
 				const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );

examples/webgpu_lights_custom.html

@@ -98,7 +98,7 @@
 
 				} );
 
-				const lightingModelContext = new Nodes.ContextNode( allLightsNode, { lightingModelNode: { direct : customLightingModel } } );
+				const lightingModelContext = new Nodes.ContextNode( allLightsNode, { lightingModelNode: { direct: customLightingModel } } );
 
 				materialPoints.lightsNode = lightingModelContext;
 

examples/webgpu_lights_selective.html

@@ -61,7 +61,7 @@
 				camera.position.z = 70;
 
 				scene = new THREE.Scene();
-				scene.fogNode = new Nodes.FogRangeNode( color( 0xFF00FF ), float( 30 ), float( 300 )  );
+				scene.fogNode = new Nodes.FogRangeNode( color( 0xFF00FF ), float( 30 ), float( 300 ) );
 
 				const sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
 
@@ -197,7 +197,7 @@
 				light4.position.x = Math.sin( lightTime * 0.3 ) * 30;
 				light4.position.y = Math.cos( lightTime * 0.7 ) * 40;
 				light4.position.z = Math.sin( lightTime * 0.5 ) * 30;
-/*
+	/*
 				@TODO: Used to test scene light change ( currently unavailable )
 
 				if ( time > 2.0 && light1.parent === null ) scene.add( light1 );

examples/webgpu_skinning_instancing.html

@@ -94,7 +94,7 @@
 							child.material = new Nodes.MeshStandardNodeMaterial();
 							child.material.roughness = .1;
 							child.material.metalnessNode = randomMetalness;
-							child.material.colorNode =  mix( color( 0xFFFFFF ), randomColors, oscSine( timerLocal( .1 ) ) );
+							child.material.colorNode = mix( color( 0xFFFFFF ), randomColors, oscSine( timerLocal( .1 ) ) );
 
 							child.isInstancedMesh = true;
 							child.instanceMatrix = new THREE.InstancedBufferAttribute( new Float32Array( instanceCount * 16 ), 16 );

examples/webgpu_sprites.html

@@ -59,7 +59,7 @@
 				camera.position.z = 1500;
 
 				scene = new THREE.Scene();
-				scene.fogNode = new Nodes.FogRangeNode( color( 0x0000ff ), float( 1500 ), float( 2100 )  );
+				scene.fogNode = new Nodes.FogRangeNode( color( 0x0000ff ), float( 1500 ), float( 2100 ) );
 
 				// create sprites
 

examples/webxr_ar_dragging.html

@@ -33,14 +33,13 @@
 			let container;
 			let camera, scene, renderer;
 			let controller1, controller2;
-			let controllerGrip1, controllerGrip2;
 
 			let raycaster;
 
 			const intersected = [];
 			const tempMatrix = new THREE.Matrix4();
 
-			let controls, group;
+			let group;
 
 			init();
 			animate();
@@ -55,8 +54,10 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.set( 0, 0, 3 );
 
-				controls = new OrbitControls( camera, container );
-
+				const controls = new OrbitControls( camera, container );
+				controls.minDistance = 0;
+				controls.maxDistance = 8;
+			
 				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );

examples/webxr_vr_handinput_profiles.html

@@ -133,7 +133,7 @@
 
 				}
 
-				hand1.addEventListener( 'pinchend', function ( event ) {
+				hand1.addEventListener( 'pinchend', function () {
 
 					handModels.left[ this.userData.currentHandModel ].visible = false;
 					this.userData.currentHandModel = ( this.userData.currentHandModel + 1 ) % 3;
@@ -165,7 +165,7 @@
 
 				}
 
-				hand2.addEventListener( 'pinchend', function ( evevent ) {
+				hand2.addEventListener( 'pinchend', function () {
 
 					handModels.right[ this.userData.currentHandModel ].visible = false;
 					this.userData.currentHandModel = ( this.userData.currentHandModel + 1 ) % 3;

examples/webxr_vr_haptics.html

@@ -299,7 +299,7 @@
 
 				for ( let i = 0; i < group.children.length; i ++ ) {
 
-					let child = group.children[ i ];
+					const child = group.children[ i ];
 					if ( ! child.collided ) {
 
 						// reset uncollided boxes

examples/webxr_vr_layers.html

@@ -144,7 +144,7 @@
 				const line = new THREE.Line( lineGeometry, new THREE.LineBasicMaterial( { color: 0x5555ff } ) );
 
 				const controllerModelFactory = new XRControllerModelFactory();
-				const handModelFactory = new XRHandModelFactory().setPath( "./models/fbx/" );
+				const handModelFactory = new XRHandModelFactory().setPath( './models/fbx/' );
 
 				//
 
@@ -173,7 +173,7 @@
 				eyeCharts.position.z = snellenConfig.z;
 				scene.add( eyeCharts );
 
-				snellenTexture = new THREE.TextureLoader().load( "textures/snellen.png" );
+				snellenTexture = new THREE.TextureLoader().load( 'textures/snellen.png' );
 				snellenTexture.repeat.x = snellenConfig.cropX;
 				snellenTexture.repeat.y = snellenConfig.cropY;
 				snellenTexture.generateMipmaps = false;
@@ -185,7 +185,7 @@
 				snellenMeshPlain.position.y = snellenConfig.y - snellenConfig.heightMeters;
 				eyeCharts.add( snellenMeshPlain );
 
-				snellenTexture = new THREE.TextureLoader().load( "textures/snellen.png" );
+				snellenTexture = new THREE.TextureLoader().load( 'textures/snellen.png' );
 				snellenTexture.repeat.x = snellenConfig.cropX;
 				snellenTexture.repeat.y = snellenConfig.cropY;
 				const snellenMeshMipMap = new THREE.Mesh(
@@ -333,7 +333,7 @@
 							viewPixelHeight: snellenConfig.textureSizePx,
 							isStatic: true,
 							space: refSpace,
-							layout: "mono",
+							layout: 'mono',
 							transform: new XRRigidTransform( {
 								x: snellenConfig.x - snellenConfig.widthMeters,
 								y: snellenConfig.y + snellenConfig.heightMeters,
@@ -367,7 +367,7 @@
 							video,
 							{
 								space: refSpace,
-								layout: "stereo-left-right",
+								layout: 'stereo-left-right',
 								// Rotate by 45 deg to avoid stereo conflict with the 3D geometry.
 								transform: new XRRigidTransform(
 									{},
@@ -402,10 +402,10 @@
 					renderer.state.bindTexture( gl.TEXTURE_2D, glayer.colorTexture );
 					gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, true );
 					gl.texSubImage2D( gl.TEXTURE_2D, 0,
-									( snellenConfig.textureSizePx - snellenConfig.widthPx ) / 2,
-									( snellenConfig.textureSizePx - snellenConfig.heightPx ) / 2,
-									snellenConfig.widthPx, snellenConfig.heightPx,
-									gl.RGBA, gl.UNSIGNED_BYTE, snellenTexture.image );
+						( snellenConfig.textureSizePx - snellenConfig.widthPx ) / 2,
+						( snellenConfig.textureSizePx - snellenConfig.heightPx ) / 2,
+						snellenConfig.widthPx, snellenConfig.heightPx,
+						gl.RGBA, gl.UNSIGNED_BYTE, snellenTexture.image );
 
 				}
 
@@ -416,10 +416,10 @@
 					renderer.state.bindTexture( gl.TEXTURE_2D, glayer.colorTexture );
 					gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, true );
 					gl.texSubImage2D( gl.TEXTURE_2D, 0,
-									( snellenConfig.textureSizePx - snellenConfig.widthPx ) / 2,
-									( snellenConfig.textureSizePx - snellenConfig.heightPx ) / 2,
-									snellenConfig.widthPx, snellenConfig.heightPx,
-									gl.RGBA, gl.UNSIGNED_BYTE, snellenTexture.image );
+						( snellenConfig.textureSizePx - snellenConfig.widthPx ) / 2,
+						( snellenConfig.textureSizePx - snellenConfig.heightPx ) / 2,
+						snellenConfig.widthPx, snellenConfig.heightPx,
+						gl.RGBA, gl.UNSIGNED_BYTE, snellenTexture.image );
 					gl.generateMipmap( gl.TEXTURE_2D );
 
 				}

package.json

@@ -71,7 +71,10 @@
       "GPUShaderStage": "readonly",
       "GPUBufferUsage": "readonly",
       "GPUTextureUsage": "readonly",
-      "QUnit": "readonly"
+      "QUnit": "readonly",
+      "Ammo":"readonly",
+      "XRRigidTransform":"readonly",
+      "XRMediaBinding":"readonly"
     },
     "rules": {
       "no-throw-literal": [
@@ -105,7 +108,7 @@
     "build-examples": "rollup -c utils/build/rollup.examples.config.js && echo '\nFormatting...' && eslint examples/js --ext js --ignore-pattern libs --ignore-pattern ifc --fix",
     "dev": "concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"servez -p 8080\"",
     "lint": "eslint src --ext js",
-    "lint-examples": "eslint examples/js examples/jsm --ext js --ignore-pattern libs --ignore-pattern ifc",
+    "lint-examples": "eslint examples/js examples/jsm examples/*.html --ext js,html --ignore-pattern libs --ignore-pattern ifc",
     "lint-docs": "eslint docs --ext html",
     "lint-fix": "npm run lint -- --fix && npm run lint-examples -- --fix && npm run lint-docs -- --fix",
     "test-unit": "npm run unit --prefix test",