Examples: More usage of `useLegacyLights=false`. (#26286)

* Examples: More usage of `useLegacyLights=false`.

* Examples: Update screenshots.

examples/misc_boxselection.html

@@ -62,35 +62,35 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
-				camera.position.z = 1000;
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 500 );
+				camera.position.z = 50;
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene.add( new THREE.AmbientLight( 0x505050 ) );
+				scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
 
-				const light = new THREE.SpotLight( 0xffffff, 1.5 );
-				light.position.set( 0, 500, 2000 );
-				light.angle = Math.PI / 9;
+				const light = new THREE.SpotLight( 0xffffff, 10000 );
+				light.position.set( 0, 25, 50 );
+				light.angle = Math.PI / 5;
 
 				light.castShadow = true;
-				light.shadow.camera.near = 1000;
-				light.shadow.camera.far = 4000;
+				light.shadow.camera.near = 10;
+				light.shadow.camera.far = 100;
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
 
 				scene.add( light );
 
-				const geometry = new THREE.BoxGeometry( 20, 20, 20 );
+				const geometry = new THREE.BoxGeometry();
 
 				for ( let i = 0; i < 200; i ++ ) {
 
 					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;
-					object.position.z = Math.random() * 900 - 500;
+					object.position.x = Math.random() * 80 - 40;
+					object.position.y = Math.random() * 45 - 25;
+					object.position.z = Math.random() * 45 - 25;
 
 					object.rotation.x = Math.random() * 2 * Math.PI;
 					object.rotation.y = Math.random() * 2 * Math.PI;
@@ -110,7 +110,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFShadowMap;
 

examples/misc_controls_drag.html

@@ -58,21 +58,21 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
-				camera.position.z = 1000;
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 500 );
+				camera.position.z = 25;
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene.add( new THREE.AmbientLight( 0x505050 ) );
+				scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
 
-				const light = new THREE.SpotLight( 0xffffff, 1.5 );
-				light.position.set( 0, 500, 2000 );
+				const light = new THREE.SpotLight( 0xffffff, 10000 );
+				light.position.set( 0, 25, 50 );
 				light.angle = Math.PI / 9;
 
 				light.castShadow = true;
-				light.shadow.camera.near = 1000;
-				light.shadow.camera.far = 4000;
+				light.shadow.camera.near = 10;
+				light.shadow.camera.far = 100;
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
 
@@ -81,15 +81,15 @@
 				group = new THREE.Group();
 				scene.add( group );
 
-				const geometry = new THREE.BoxGeometry( 40, 40, 40 );
+				const geometry = new THREE.BoxGeometry();
 
 				for ( let i = 0; i < 200; i ++ ) {
 
 					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;
-					object.position.z = Math.random() * 800 - 400;
+					object.position.x = Math.random() * 30 - 15;
+					object.position.y = Math.random() * 15 - 7.5;
+					object.position.z = Math.random() * 20 - 10;
 
 					object.rotation.x = Math.random() * 2 * Math.PI;
 					object.rotation.y = Math.random() * 2 * Math.PI;
@@ -111,7 +111,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFShadowMap;
 

examples/webgl_buffergeometry.html

@@ -54,13 +54,13 @@
 
 				//
 
-				scene.add( new THREE.AmbientLight( 0x8d8d8d ) );
+				scene.add( new THREE.AmbientLight( 0xcccccc ) );
 
-				const light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				const light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 4.5 );
 				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
@@ -168,10 +168,10 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//

examples/webgl_buffergeometry_compression.html

@@ -70,6 +70,7 @@
 			const texture = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 			texture.wrapS = THREE.RepeatWrapping;
 			texture.wrapT = THREE.RepeatWrapping;
+			texture.colorSpace = THREE.SRGBColorSpace;
 
 			//
 			init();
@@ -86,6 +87,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -101,11 +103,11 @@
 
 				//
 
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );
+				scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
 
-				lights[ 0 ] = new THREE.DirectionalLight( 0xffffff, 0.7 );
-				lights[ 1 ] = new THREE.DirectionalLight( 0xffffff, 0.7 );
-				lights[ 2 ] = new THREE.DirectionalLight( 0xffffff, 0.7 );
+				lights[ 0 ] = new THREE.DirectionalLight( 0xffffff, 2.5 );
+				lights[ 1 ] = new THREE.DirectionalLight( 0xffffff, 2.5 );
+				lights[ 2 ] = new THREE.DirectionalLight( 0xffffff, 2.5 );
 
 				lights[ 0 ].position.set( 0, 2 * radius, 0 );
 				lights[ 1 ].position.set( 2 * radius, - 2 * radius, 2 * radius );

examples/webgl_buffergeometry_drawrange.html

@@ -178,6 +178,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 
 				container.appendChild( renderer.domElement );
 

examples/webgl_buffergeometry_indexed.html

@@ -51,6 +51,7 @@
 				//
 
 				const light = new THREE.HemisphereLight();
+				light.intensity = 3;
 				scene.add( light );
 
 				//
@@ -135,6 +136,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				//

examples/webgl_buffergeometry_uint.html

@@ -54,13 +54,13 @@
 
 				//
 
-				scene.add( new THREE.AmbientLight( 0x8d8d8d ) );
+				scene.add( new THREE.AmbientLight( 0xcccccc ) );
 
-				const light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				const light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 4.5 );
 				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
@@ -167,10 +167,10 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//

examples/webgl_clipping.html

@@ -45,9 +45,9 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x505050 ) );
+				scene.add( new THREE.AmbientLight( 0xcccccc ) );
 
-				const spotLight = new THREE.SpotLight( 0xffffff );
+				const spotLight = new THREE.SpotLight( 0xffffff, 60 );
 				spotLight.angle = Math.PI / 5;
 				spotLight.penumbra = 0.2;
 				spotLight.position.set( 2, 3, 3 );
@@ -58,7 +58,7 @@
 				spotLight.shadow.mapSize.height = 1024;
 				scene.add( spotLight );
 
-				const dirLight = new THREE.DirectionalLight( 0x55505a, 1 );
+				const dirLight = new THREE.DirectionalLight( 0x55505a, 3 );
 				dirLight.position.set( 0, 3, 0 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.near = 1;
@@ -117,6 +117,7 @@
 				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				window.addEventListener( 'resize', onWindowResize );
 				document.body.appendChild( renderer.domElement );
 

examples/webgl_clipping_advanced.html

@@ -174,9 +174,9 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
+				scene.add( new THREE.AmbientLight( 0xffffff ) );
 
-				const spotLight = new THREE.SpotLight( 0xffffff, 0.5 );
+				const spotLight = new THREE.SpotLight( 0xffffff, 60 );
 				spotLight.angle = Math.PI / 5;
 				spotLight.penumbra = 0.2;
 				spotLight.position.set( 2, 3, 3 );
@@ -187,7 +187,7 @@
 				spotLight.shadow.mapSize.height = 1024;
 				scene.add( spotLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				dirLight.position.set( 0, 2, 0 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.near = 1;
@@ -287,6 +287,7 @@
 				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				window.addEventListener( 'resize', onWindowResize );
 				container.appendChild( renderer.domElement );
 				// Clipping setup:

examples/webgl_clipping_intersection.html

@@ -51,6 +51,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.localClippingEnabled = true;
 				document.body.appendChild( renderer.domElement );
 
@@ -66,13 +67,10 @@
 				controls.maxDistance = 10;
 				controls.enablePan = false;
 
-				const light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1.5 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0x080808, 4.5 );
 				light.position.set( - 1.25, 1, 1.25 );
 				scene.add( light );
 
-				// const helper = new THREE.CameraHelper( light.shadow.camera );
-				// scene.add( helper );
-
 				//
 
 				const group = new THREE.Group();

examples/webgl_clipping_stencil.html

@@ -112,9 +112,9 @@
 				camera = new THREE.PerspectiveCamera( 36, window.innerWidth / window.innerHeight, 1, 100 );
 				camera.position.set( 2, 2, 2 );
 
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.5 ) );
+				scene.add( new THREE.AmbientLight( 0xffffff, 1.5 ) );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( 5, 10, 7.5 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.right = 2;
@@ -222,6 +222,7 @@
 				// Renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.shadowMap.enabled = true;
+				renderer.useLegacyLights = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setClearColor( 0x263238 );

examples/webgl_lights_hemisphere.html

@@ -99,7 +99,7 @@
 
 				// LIGHTS
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 2 );
 				hemiLight.color.setHSL( 0.6, 1, 0.6 );
 				hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
 				hemiLight.position.set( 0, 50, 0 );
@@ -110,7 +110,7 @@
 
 				//
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.color.setHSL( 0.1, 1, 0.95 );
 				dirLight.position.set( - 1, 1.75, 1 );
 				dirLight.position.multiplyScalar( 30 );
@@ -202,6 +202,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 				renderer.shadowMap.enabled = true;
+				renderer.useLegacyLights = false;
 
 				// STATS
 

examples/webgl_lights_rectarealight.html

@@ -47,6 +47,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animation );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );

examples/webgl_lights_spotlight.html

@@ -45,6 +45,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				renderer.shadowMap.enabled = true;
@@ -58,17 +59,17 @@
 
 				scene = new THREE.Scene();
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 70, 50, 10 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 7, 4, 1 );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.minDistance = 20;
-				controls.maxDistance = 100;
+				controls.minDistance = 2;
+				controls.maxDistance = 10;
 				controls.maxPolarAngle = Math.PI / 2;
-				controls.target.set( 0, 18, 0 );
+				controls.target.set( 0, 1, 0 );
 				controls.update();
 
-				const ambient = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 0.05 );
+				const ambient = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 0.15 );
 				scene.add( ambient );
 
 				const loader = new THREE.TextureLoader().setPath( 'textures/' );
@@ -89,19 +90,19 @@
 
 				}
 
-				spotLight = new THREE.SpotLight( 0xffffff, 5 );
-				spotLight.position.set( 25, 50, 25 );
+				spotLight = new THREE.SpotLight( 0xffffff, 100 );
+				spotLight.position.set( 2.5, 5, 2.5 );
 				spotLight.angle = Math.PI / 6;
 				spotLight.penumbra = 1;
 				spotLight.decay = 2;
-				spotLight.distance = 100;
+				spotLight.distance = 0;
 				spotLight.map = textures[ 'disturb.jpg' ];
 
 				spotLight.castShadow = true;
 				spotLight.shadow.mapSize.width = 1024;
 				spotLight.shadow.mapSize.height = 1024;
-				spotLight.shadow.camera.near = 10;
-				spotLight.shadow.camera.far = 200;
+				spotLight.shadow.camera.near = 1;
+				spotLight.shadow.camera.far = 10;
 				spotLight.shadow.focus = 1;
 				scene.add( spotLight );
 
@@ -110,7 +111,7 @@
 
 				//
 
-				const geometry = new THREE.PlaneGeometry( 1000, 1000 );
+				const geometry = new THREE.PlaneGeometry( 200, 200 );
 				const material = new THREE.MeshLambertMaterial( { color: 0xbcbcbc } );
 
 				const mesh = new THREE.Mesh( geometry, material );
@@ -123,14 +124,14 @@
 
 				new PLYLoader().load( 'models/ply/binary/Lucy100k.ply', function ( geometry ) {
 
-					geometry.scale( 0.024, 0.024, 0.024 );
+					geometry.scale( 0.0024, 0.0024, 0.0024 );
 					geometry.computeVertexNormals();
 
 					const material = new THREE.MeshLambertMaterial();
 
 					const mesh = new THREE.Mesh( geometry, material );
 					mesh.rotation.y = - Math.PI / 2;
-					mesh.position.y = 18;
+					mesh.position.y = 0.8;
 					mesh.castShadow = true;
 					mesh.receiveShadow = true;
 					scene.add( mesh );
@@ -167,7 +168,7 @@
 
 				} );
 
-				gui.add( params, 'intensity', 0, 10 ).onChange( function ( val ) {
+				gui.add( params, 'intensity', 0, 500 ).onChange( function ( val ) {
 
 					spotLight.intensity = val;
 
@@ -238,8 +239,8 @@
 
 				const time = performance.now() / 3000;
 
-				spotLight.position.x = Math.cos( time ) * 25;
-				spotLight.position.z = Math.sin( time ) * 25;
+				spotLight.position.x = Math.cos( time ) * 2.5;
+				spotLight.position.z = Math.sin( time ) * 2.5;
 
 				lightHelper.update();
 

examples/webgl_lights_spotlights.html

@@ -34,8 +34,9 @@
 			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.useLegacyLights = false;
 
-			const camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 2000 );
+			const camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 100 );
 
 			const controls = new OrbitControls( camera, renderer.domElement );
 
@@ -44,14 +45,14 @@
 			const matFloor = new THREE.MeshPhongMaterial( { color: 0x808080 } );
 			const matBox = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
 
-			const geoFloor = new THREE.PlaneGeometry( 2000, 2000 );
-			const geoBox = new THREE.BoxGeometry( 3, 1, 2 );
+			const geoFloor = new THREE.PlaneGeometry( 100, 100 );
+			const geoBox = new THREE.BoxGeometry( 0.3, 0.1, 0.2 );
 
 			const mshFloor = new THREE.Mesh( geoFloor, matFloor );
 			mshFloor.rotation.x = - Math.PI * 0.5;
 			const mshBox = new THREE.Mesh( geoBox, matBox );
 
-			const ambient = new THREE.AmbientLight( 0x111111 );
+			const ambient = new THREE.AmbientLight( 0x444444 );
 
 			const spotLight1 = createSpotlight( 0xFF7F00 );
 			const spotLight2 = createSpotlight( 0x00FF7F );
@@ -64,11 +65,11 @@
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
-				camera.position.set( 46, 22, - 21 );
+				camera.position.set( 4.6, 2.2, - 2.1 );
 
-				spotLight1.position.set( 15, 40, 45 );
-				spotLight2.position.set( 0, 40, 35 );
-				spotLight3.position.set( - 15, 40, 45 );
+				spotLight1.position.set( 1.5, 4, 4.5 );
+				spotLight2.position.set( 0, 4, 3.5 );
+				spotLight3.position.set( - 1.5, 4, 4.5 );
 
 				lightHelper1 = new THREE.SpotLightHelper( spotLight1 );
 				lightHelper2 = new THREE.SpotLightHelper( spotLight2 );
@@ -79,7 +80,7 @@
 
 				mshBox.castShadow = true;
 				mshBox.receiveShadow = true;
-				mshBox.position.set( 0, 5, 0 );
+				mshBox.position.set( 0, 0.5, 0 );
 
 				scene.add( mshFloor );
 				scene.add( mshBox );
@@ -90,15 +91,17 @@
 				document.body.appendChild( renderer.domElement );
 				window.addEventListener( 'resize', onWindowResize );
 
-				controls.target.set( 0, 7, 0 );
+				controls.target.set( 0, 0.5, 0 );
 				controls.maxPolarAngle = Math.PI / 2;
+				controls.minDistance = 1;
+				controls.maxDistance = 10;
 				controls.update();
 
 			}
 
 			function createSpotlight( color ) {
 
-				const newObj = new THREE.SpotLight( color, 2 );
+				const newObj = new THREE.SpotLight( color, 10 );
 
 				newObj.castShadow = true;
 				newObj.angle = 0.3;
@@ -127,9 +130,9 @@
 					.easing( TWEEN.Easing.Quadratic.Out ).start();
 
 				new TWEEN.Tween( light.position ).to( {
-					x: ( Math.random() * 30 ) - 15,
-					y: ( Math.random() * 10 ) + 15,
-					z: ( Math.random() * 30 ) - 15
+					x: ( Math.random() * 3 ) - 1.5,
+					y: ( Math.random() * 1 ) + 1.5,
+					z: ( Math.random() * 3 ) - 1.5
 				}, Math.random() * 3000 + 2000 )
 					.easing( TWEEN.Easing.Quadratic.Out ).start();
 

examples/webgl_loader_3dm.html

@@ -67,6 +67,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -74,7 +75,7 @@
 
 				scene = new THREE.Scene();
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 6 );
 				directionalLight.position.set( 0, 0, 2 );
 				scene.add( directionalLight );
 

examples/webgl_loader_3ds.html

@@ -47,9 +47,9 @@
 				camera.position.z = 2;
 
 				scene = new THREE.Scene();
-				scene.add( new THREE.HemisphereLight() );
+				scene.add( new THREE.AmbientLight( 0xffffff, 3 ) );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffeedd );
+				const directionalLight = new THREE.DirectionalLight( 0xffeedd, 3 );
 				directionalLight.position.set( 0, 0, 2 );
 				scene.add( directionalLight );
 
@@ -75,9 +75,10 @@
 
 				} );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				controls = new TrackballControls( camera, renderer.domElement );

examples/webgl_loader_3mf_materials.html

@@ -53,11 +53,11 @@
 
 				//
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );
 				hemiLight.position.set( 0, 100, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( - 0, 40, 50 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 50;
@@ -111,6 +111,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 				document.body.appendChild( renderer.domElement );

examples/webgl_loader_collada.html

@@ -72,10 +72,10 @@
 
 				//
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambientLight );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
 				directionalLight.position.set( 1, 1, 0 ).normalize();
 				scene.add( directionalLight );
 
@@ -84,6 +84,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//

examples/webgl_loader_draco.html

@@ -64,10 +64,11 @@
 			scene.add( plane );
 
 			// Lights
-			const hemiLight = new THREE.HemisphereLight( 0x8d7c7c, 0x494966 );
+			const hemiLight = new THREE.HemisphereLight( 0x8d7c7c, 0x494966, 3 );
 			scene.add( hemiLight );
 
 			const spotLight = new THREE.SpotLight();
+			spotLight.intensity = 7;
 			spotLight.angle = Math.PI / 16;
 			spotLight.penumbra = 0.5;
 			spotLight.castShadow = true;
@@ -93,6 +94,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.useLegacyLights = false;
 			renderer.shadowMap.enabled = true;
 			container.appendChild( renderer.domElement );
 

examples/webgl_loader_lwo.html

@@ -50,10 +50,10 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
 
-				const ambientLight = new THREE.AmbientLight( 0x666666 );
+				const ambientLight = new THREE.AmbientLight( 0xbbbbbb );
 				scene.add( ambientLight );
 
-				const light1 = new THREE.DirectionalLight( 0xc1c1c1 );
+				const light1 = new THREE.DirectionalLight( 0xc1c1c1, 3 );
 				light1.position.set( 0, 200, 100 );
 				scene.add( light1 );
 
@@ -82,6 +82,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animation );
+				renderer.useLegacyLights = false;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				container.appendChild( renderer.domElement );
 

examples/webgl_materials_blending.html

@@ -77,7 +77,11 @@
 					{ name: 'Multiply', constant: THREE.MultiplyBlending }
 				];
 
-				const assignSRGB = ( texture ) => { texture.colorSpace = THREE.SRGBColorSpace; };
+				const assignSRGB = ( texture ) => {
+
+					texture.colorSpace = THREE.SRGBColorSpace;
+
+				};
 
 				const map0 = textureLoader.load( 'textures/uv_grid_opengl.jpg', assignSRGB );
 				const map1 = textureLoader.load( 'textures/sprite0.jpg', assignSRGB );
@@ -124,6 +128,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				// EVENTS

examples/webgl_materials_blending_custom.html

@@ -179,6 +179,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				// EVENTS

examples/webgl_materials_video.html

@@ -88,13 +88,14 @@
 
 				scene = new THREE.Scene();
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0.5, 1, 1 ).normalize();
 				scene.add( light );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				video = document.getElementById( 'video' );

examples/webgl_modifier_curve.html

@@ -99,13 +99,11 @@
 
 				//
 
-				const light = new THREE.DirectionalLight( 0xffaa33 );
+				const light = new THREE.DirectionalLight( 0xffaa33, 3 );
 				light.position.set( - 10, 10, 10 );
-				light.intensity = 1.0;
 				scene.add( light );
 
-				const light2 = new THREE.AmbientLight( 0x003973 );
-				light2.intensity = 1.0;
+				const light2 = new THREE.AmbientLight( 0x003973, 3 );
 				scene.add( light2 );
 
 				//
@@ -144,6 +142,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				renderer.domElement.addEventListener( 'pointerdown', onPointerDown );

examples/webgl_modifier_curve_instanced.html

@@ -112,13 +112,11 @@
 
 				//
 
-				const light = new THREE.DirectionalLight( 0xffaa33 );
+				const light = new THREE.DirectionalLight( 0xffaa33, 3 );
 				light.position.set( - 10, 10, 10 );
-				light.intensity = 1.0;
 				scene.add( light );
 
-				const light2 = new THREE.AmbientLight( 0x003973 );
-				light2.intensity = 1.0;
+				const light2 = new THREE.AmbientLight( 0x003973, 3 );
 				scene.add( light2 );
 
 				//
@@ -170,6 +168,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				renderer.domElement.addEventListener( 'pointerdown', onPointerDown );

examples/webgl_modifier_edgesplit.html

@@ -59,6 +59,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
@@ -73,7 +74,7 @@
 				controls.minZoom = 1;
 				camera.position.set( 0, 0, 4 );
 
-				scene.add( new THREE.HemisphereLight( 0xffffff, 0x444444 ) );
+				scene.add( new THREE.HemisphereLight( 0xffffff, 0x444444, 3 ) );
 
 				new OBJLoader().load(
 					'./models/obj/cerberus/Cerberus.obj',

examples/webgl_modifier_tessellation.html

@@ -187,6 +187,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
+				renderer.useLegacyLights = false;
 
 				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );

examples/webgl_multiple_elements.html

@@ -146,9 +146,9 @@
 
 					scene.add( new THREE.Mesh( geometry, material ) );
 
-					scene.add( new THREE.HemisphereLight( 0xaaaaaa, 0x444444 ) );
+					scene.add( new THREE.HemisphereLight( 0xaaaaaa, 0x444444, 3 ) );
 
-					const light = new THREE.DirectionalLight( 0xffffff, 0.5 );
+					const light = new THREE.DirectionalLight( 0xffffff, 1.5 );
 					light.position.set( 1, 1, 1 );
 					scene.add( light );
 
@@ -160,6 +160,7 @@
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
 				renderer.setClearColor( 0xffffff, 1 );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.useLegacyLights = false;
 
 			}
 

examples/webgl_multiple_elements_text.html

@@ -120,6 +120,7 @@
 
 				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.useLegacyLights = false;
 
 				views = document.querySelectorAll( '.view' );
 

examples/webgl_multiple_scenes_comparison.html

@@ -79,7 +79,7 @@
 
 				controls = new OrbitControls( camera, container );
 
-				const light = new THREE.HemisphereLight( 0xffffff, 0x444444, 1 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0x444444, 3 );
 				light.position.set( - 2, 2, 2 );
 				sceneL.add( light.clone() );
 				sceneR.add( light.clone() );
@@ -90,6 +90,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.setScissorTest( true );
 				renderer.setAnimationLoop( render );
 				container.appendChild( renderer.domElement );

examples/webgl_multiple_views.html

@@ -111,7 +111,7 @@
 
 				scene = new THREE.Scene();
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
@@ -214,6 +214,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/webxr_ar_cones.html

@@ -45,7 +45,7 @@
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 );
 
-				const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 3 );
 				light.position.set( 0.5, 1, 0.25 );
 				scene.add( light );
 
@@ -54,6 +54,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 

examples/webxr_ar_hittest.html

@@ -51,7 +51,7 @@
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 );
 
-				const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 3 );
 				light.position.set( 0.5, 1, 0.25 );
 				scene.add( light );
 
@@ -60,6 +60,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 

examples/webxr_ar_plane_detection.html

@@ -37,6 +37,7 @@
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setAnimationLoop( render );
+			renderer.useLegacyLights = false;
 			renderer.xr.enabled = true;
 			document.body.appendChild( renderer.domElement );
 
@@ -55,7 +56,7 @@
 
 			const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 );
 
-			const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
+			const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 3 );
 			light.position.set( 0.5, 1, 0.25 );
 			scene.add( light );
 

examples/webxr_vr_handinput.html

@@ -67,9 +67,9 @@
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 2;
@@ -84,6 +84,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 

examples/webxr_vr_handinput_cubes.html

@@ -80,9 +80,9 @@
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 2;
@@ -97,6 +97,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 

examples/webxr_vr_handinput_pointerclick.html

@@ -302,9 +302,9 @@
 			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 			camera.position.set( 0, 1.2, 0.3 );
 
-			scene.add( new THREE.HemisphereLight( 0xcccccc, 0x999999 ) );
+			scene.add( new THREE.HemisphereLight( 0xcccccc, 0x999999, 3 ) );
 
-			const light = new THREE.DirectionalLight( 0xffffff );
+			const light = new THREE.DirectionalLight( 0xffffff, 3 );
 			light.position.set( 0, 6, 0 );
 			light.castShadow = true;
 			light.shadow.camera.top = 2;
@@ -317,6 +317,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.useLegacyLights = false;
 			renderer.shadowMap.enabled = true;
 			renderer.xr.enabled = true;
 			renderer.xr.setUserCamera( camera );

examples/webxr_vr_handinput_pointerdrag.html

@@ -405,9 +405,9 @@
 			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 			camera.position.set( 0, 1.2, 0.3 );
 
-			scene.add( new THREE.HemisphereLight( 0xcccccc, 0x999999 ) );
+			scene.add( new THREE.HemisphereLight( 0xcccccc, 0x999999, 3 ) );
 
-			const light = new THREE.DirectionalLight( 0xffffff );
+			const light = new THREE.DirectionalLight( 0xffffff, 3 );
 			light.position.set( 0, 6, 0 );
 			light.castShadow = true;
 			light.shadow.camera.top = 2;
@@ -420,6 +420,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.useLegacyLights = false;
 			renderer.shadowMap.enabled = true;
 			renderer.xr.enabled = true;
 			renderer.xr.setUserCamera( camera );

examples/webxr_vr_handinput_pressbutton.html

@@ -362,9 +362,9 @@
 			listener = new THREE.AudioListener();
 			camera.add( listener );
 
-			scene.add( new THREE.HemisphereLight( 0xcccccc, 0x999999 ) );
+			scene.add( new THREE.HemisphereLight( 0xcccccc, 0x999999, 3 ) );
 
-			const light = new THREE.DirectionalLight( 0xffffff );
+			const light = new THREE.DirectionalLight( 0xffffff, 3 );
 			light.position.set( 0, 6, 0 );
 			light.castShadow = true;
 			light.shadow.camera.top = 2;
@@ -377,6 +377,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.useLegacyLights = false;
 			renderer.shadowMap.enabled = true;
 			renderer.xr.enabled = true;
 			renderer.xr.setUserCamera( camera );

examples/webxr_vr_handinput_profiles.html

@@ -74,9 +74,9 @@
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 2;
@@ -91,6 +91,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 

examples/webxr_vr_layers.html

@@ -119,8 +119,8 @@
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.set( 0, 1.6, 3 );
 
-				const hemLight = new THREE.HemisphereLight( 0x808080, 0x606060 );
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const hemLight = new THREE.HemisphereLight( 0x808080, 0x606060, 3 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				scene.add( hemLight, light );
 
 				//
@@ -130,6 +130,7 @@
 				renderer.setClearAlpha( 1 );
 				renderer.setClearColor( new THREE.Color( 0 ), 0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 
 				document.body.appendChild( renderer.domElement );

examples/webxr_vr_panorama.html

@@ -37,6 +37,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				renderer.xr.setReferenceSpaceType( 'local' );
 				document.body.appendChild( renderer.domElement );

examples/webxr_vr_panorama_depth.html

@@ -46,7 +46,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x101010 );
 
-				const light = new THREE.AmbientLight( 0xffffff, 1 );
+				const light = new THREE.AmbientLight( 0xffffff, 3 );
 				scene.add( light );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
@@ -95,6 +95,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				renderer.xr.setReferenceSpaceType( 'local' );
 				container.appendChild( renderer.domElement );

examples/webxr_vr_rollercoaster.html

@@ -40,7 +40,7 @@
 			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xf0f0ff );
 
-			const light = new THREE.HemisphereLight( 0xfff0f0, 0x606066 );
+			const light = new THREE.HemisphereLight( 0xfff0f0, 0x60606, 3 );
 			light.position.set( 1, 1, 1 );
 			scene.add( light );
 
@@ -182,6 +182,7 @@
 			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.useLegacyLights = false;
 			renderer.xr.enabled = true;
 			renderer.xr.setReferenceSpaceType( 'local' );
 			renderer.xr.setUserCamera( camera );

examples/webxr_vr_sandbox.html

@@ -128,6 +128,7 @@
 				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;

examples/webxr_vr_teleport.html

@@ -59,9 +59,9 @@
 				);
 				scene.add( room );
 
-				scene.add( new THREE.HemisphereLight( 0xa5a5a5, 0x898989 ) );
+				scene.add( new THREE.HemisphereLight( 0xa5a5a5, 0x898989, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
@@ -82,6 +82,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 
 				renderer.xr.addEventListener( 'sessionstart', () => baseReferenceSpace = renderer.xr.getReferenceSpace() );
 				renderer.xr.enabled = true;

examples/webxr_vr_video.html

@@ -112,6 +112,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				renderer.xr.setReferenceSpaceType( 'local' );
 				container.appendChild( renderer.domElement );

examples/webxr_xr_ballshooter.html

@@ -63,9 +63,9 @@
 				room.geometry.translate( 0, 3, 0 );
 				scene.add( room );
 
-				scene.add( new THREE.HemisphereLight( 0xbbbbbb, 0x888888 ) );
+				scene.add( new THREE.HemisphereLight( 0xbbbbbb, 0x888888, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
@@ -75,6 +75,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				document.body.appendChild( renderer.domElement );
 

examples/webxr_xr_cubes.html

@@ -65,9 +65,9 @@
 				);
 				scene.add( room );
 
-				scene.add( new THREE.HemisphereLight( 0xa5a5a5, 0x898989 ) );
+				scene.add( new THREE.HemisphereLight( 0xa5a5a5, 0x898989, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
@@ -103,6 +103,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 

examples/webxr_xr_dragging.html

@@ -69,9 +69,9 @@
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 3;
@@ -125,6 +125,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );

examples/webxr_xr_haptics.html

@@ -96,9 +96,9 @@
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
 				light.shadow.camera.top = 2;
@@ -144,6 +144,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );

examples/webxr_xr_paint.html

@@ -60,9 +60,9 @@
 				const grid = new THREE.GridHelper( 4, 1, 0x111111, 0x111111 );
 				scene.add( grid );
 
-				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
+				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const light = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light.position.set( 0, 4, 0 );
 				scene.add( light );
 
@@ -79,6 +79,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 

examples/webxr_xr_sculpt.html

@@ -62,9 +62,9 @@
 				const grid = new THREE.GridHelper( 4, 1, 0x111111, 0x111111 );
 				scene.add( grid );
 
-				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
+				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 6, 0 );
 				scene.add( light );
 
@@ -73,6 +73,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -125,15 +126,15 @@
 			function initBlob() {
 
 				/*
-				let path = "textures/cube/SwedishRoyalCastle/";
-				let format = '.jpg';
-				let urls = [
+				const path = 'textures/cube/SwedishRoyalCastle/';
+				const format = '.jpg';
+				const urls = [
 					path + 'px' + format, path + 'nx' + format,
 					path + 'py' + format, path + 'ny' + format,
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				let reflectionCube = new THREE.CubeTextureLoader().load( urls );
+				const reflectionCube = new THREE.CubeTextureLoader().load( urls );
 				*/
 
 				const material = new THREE.MeshStandardMaterial( {