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

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

* Examples: Update screenshots

examples/jsm/csm/CSM.js

@@ -32,7 +32,7 @@ export class CSM {
 		this.shadowMapSize = data.shadowMapSize || 2048;
 		this.shadowBias = data.shadowBias || 0.000001;
 		this.lightDirection = data.lightDirection || new Vector3( 1, - 1, 1 ).normalize();
-		this.lightIntensity = data.lightIntensity || 1;
+		this.lightIntensity = data.lightIntensity || 3;
 		this.lightNear = data.lightNear || 1;
 		this.lightFar = data.lightFar || 2000;
 		this.lightMargin = data.lightMargin || 200;

examples/jsm/environments/RoomEnvironment.js

@@ -14,7 +14,7 @@ import {
 
 class RoomEnvironment extends Scene {
 
-	constructor() {
+	constructor( renderer = null ) {
 
 		super();
 
@@ -24,7 +24,11 @@ class RoomEnvironment extends Scene {
 		const roomMaterial = new MeshStandardMaterial( { side: BackSide } );
 		const boxMaterial = new MeshStandardMaterial();
 
-		const mainLight = new PointLight( 0xffffff, 5.0, 28, 2 );
+		let intensity = 5;
+
+		if ( renderer !== null && renderer.useLegacyLights === false ) intensity = 900;
+
+		const mainLight = new PointLight( 0xffffff, intensity, 28, 2 );
 		mainLight.position.set( 0.418, 16.199, 0.300 );
 		this.add( mainLight );
 

examples/jsm/offscreen/scene.js

@@ -45,6 +45,7 @@ function init( canvas, width, height, pixelRatio, path ) {
 		renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
 		renderer.setPixelRatio( pixelRatio );
 		renderer.setSize( width, height, false );
+		renderer.useLegacyLights = false;
 
 		animate();
 

examples/misc_exporter_usdz.html

@@ -68,6 +68,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				document.body.appendChild( renderer.domElement );
 
@@ -78,7 +79,7 @@
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
-				scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
+				scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ), 0.04 ).texture;
 
 				const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
 				loader.load( 'DamagedHelmet.gltf', async function ( gltf ) {

examples/webgl_animation_keyframes.html

@@ -63,13 +63,14 @@
 			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.useLegacyLights = false;
 			container.appendChild( renderer.domElement );
 
 			const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xbfe3dd );
-			scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
+			scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ), 0.04 ).texture;
 
 			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 			camera.position.set( 5, 2, 8 );

examples/webgl_interactive_cubes_gpu.html

@@ -69,9 +69,9 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				scene.add( new THREE.AmbientLight( 0x555555 ) );
+				scene.add( new THREE.AmbientLight( 0xcccccc ) );
 
-				const light = new THREE.SpotLight( 0xffffff, 1.5 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 500, 2000 );
 				scene.add( light );
 
@@ -205,6 +205,7 @@
 				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_lights_pointlights.html

@@ -66,19 +66,19 @@
 
 				//lights
 
-				light1 = new THREE.PointLight( 0xff0040, 2, 50 );
+				light1 = new THREE.PointLight( 0xff0040, 400 );
 				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
 				scene.add( light1 );
 
-				light2 = new THREE.PointLight( 0x0040ff, 2, 50 );
+				light2 = new THREE.PointLight( 0x0040ff, 400 );
 				light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) );
 				scene.add( light2 );
 
-				light3 = new THREE.PointLight( 0x80ff80, 2, 50 );
+				light3 = new THREE.PointLight( 0x80ff80, 400 );
 				light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
 				scene.add( light3 );
 
-				light4 = new THREE.PointLight( 0xffaa00, 2, 50 );
+				light4 = new THREE.PointLight( 0xffaa00, 400 );
 				light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
 				scene.add( light4 );
 
@@ -87,6 +87,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 );
 
 				//stats

examples/webgl_loader_gltf_compressed.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.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
 				container.appendChild( renderer.domElement );
@@ -58,7 +59,7 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0, 100, 0 );
 
-				const environment = new RoomEnvironment();
+				const environment = new RoomEnvironment( renderer );
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 				scene = new THREE.Scene();

examples/webgl_loader_gltf_sheen.html

@@ -78,9 +78,10 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
-				const environment = new RoomEnvironment();
+				const environment = new RoomEnvironment( renderer );
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 				scene.background = new THREE.Color( 0xbbbbbb );

examples/webgl_loader_ldraw.html

@@ -89,6 +89,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				container.appendChild( renderer.domElement );
 
@@ -98,7 +99,7 @@
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xdeebed );
-				scene.environment = pmremGenerator.fromScene( new RoomEnvironment() ).texture;
+				scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ) ).texture;
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableDamping = true;

examples/webgl_loader_texture_lottie.html

@@ -66,9 +66,10 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
-				const environment = new RoomEnvironment();
+				const environment = new RoomEnvironment( renderer );
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 				scene.environment = pmremGenerator.fromScene( environment ).texture;

examples/webgl_materials_channels.html

@@ -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 );
 
 				//
@@ -116,17 +117,17 @@
 
 				// lights
 
-				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.3 );
 				scene.add( ambientLight );
 
-				const pointLight = new THREE.PointLight( 0xff0000, 0.5 );
+				const pointLight = new THREE.PointLight( 0xff0000, 1.5, 0, 0 );
 				pointLight.position.z = 2500;
 				scene.add( pointLight );
 
-				const pointLight2 = new THREE.PointLight( 0xff6666, 1 );
+				const pointLight2 = new THREE.PointLight( 0xff6666, 3, 0, 0 );
 				camera.add( pointLight2 );
 
-				const pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
+				const pointLight3 = new THREE.PointLight( 0x0000ff, 1.5, 0, 0 );
 				pointLight3.position.x = - 1000;
 				pointLight3.position.z = 1000;
 				scene.add( pointLight3 );

examples/webgl_materials_cubemap.html

@@ -50,8 +50,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
-				camera.position.z = 2000;
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.z = 13;
 
 				//cubemap
 				const path = 'textures/cube/SwedishRoyalCastle/';
@@ -70,10 +70,10 @@
 				scene.background = reflectionCube;
 
 				//lights
-				const ambient = new THREE.AmbientLight( 0xffffff );
+				const ambient = new THREE.AmbientLight( 0xffffff, 3 );
 				scene.add( ambient );
 
-				pointLight = new THREE.PointLight( 0xffffff, 2 );
+				pointLight = new THREE.PointLight( 0xffffff, 200 );
 				scene.add( pointLight );
 
 				//materials
@@ -88,17 +88,16 @@
 				objLoader.load( 'WaltHead.obj', function ( object ) {
 
 					const head = object.children[ 0 ];
-
-					head.scale.multiplyScalar( 15 );
-					head.position.y = - 500;
+					head.scale.setScalar( 0.1 );
+					head.position.y = - 3;
 					head.material = cubeMaterial1;
 
 					const head2 = head.clone();
-					head2.position.x = - 900;
+					head2.position.x = - 6;
 					head2.material = cubeMaterial2;
 
 					const head3 = head.clone();
-					head3.position.x = 900;
+					head3.position.x = 6;
 					head3.material = cubeMaterial3;
 
 					scene.add( head, head2, head3 );
@@ -106,9 +105,10 @@
 				} );
 
 				//renderer
-				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

examples/webgl_materials_cubemap_refraction.html

@@ -39,8 +39,6 @@
 
 			let camera, scene, renderer;
 
-			let pointLight;
-
 			let mouseX = 0, mouseY = 0;
 
 			let windowHalfX = window.innerWidth / 2;
@@ -75,20 +73,9 @@
 
 				// LIGHTS
 
-				const ambient = new THREE.AmbientLight( 0xffffff );
+				const ambient = new THREE.AmbientLight( 0xffffff, 3.5 );
 				scene.add( ambient );
 
-				pointLight = new THREE.PointLight( 0xffffff, 2 );
-				scene.add( pointLight );
-
-				// light representation
-
-				const sphere = new THREE.SphereGeometry( 100, 16, 8 );
-
-				const mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
-				mesh.scale.set( 0.05, 0.05, 0.05 );
-				pointLight.add( mesh );
-
 				// material samples
 
 				const cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0xccddff, envMap: textureCube, refractionRatio: 0.98, reflectivity: 0.9 } );
@@ -97,9 +84,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 );
 
 				stats = new Stats();
@@ -174,16 +162,11 @@
 
 			function render() {
 
-				const timer = - 0.0002 * Date.now();
-
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
 				camera.lookAt( scene.position );
 
-				pointLight.position.x = 1500 * Math.cos( timer );
-				pointLight.position.z = 1500 * Math.sin( timer );
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_materials_displacementmap.html

@@ -119,6 +119,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -139,14 +140,14 @@
 				ambientLight = new THREE.AmbientLight( 0xffffff, settings.ambientIntensity );
 				scene.add( ambientLight );
 
-				pointLight = new THREE.PointLight( 0xff0000, 0.5 );
+				pointLight = new THREE.PointLight( 0xff0000, 1.5, 0, 0 );
 				pointLight.position.z = 2500;
 				scene.add( pointLight );
 
-				const pointLight2 = new THREE.PointLight( 0xffaaaa, 1 );
+				const pointLight2 = new THREE.PointLight( 0xff6666, 3, 0, 0 );
 				camera.add( pointLight2 );
 
-				const pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
+				const pointLight3 = new THREE.PointLight( 0x0000ff, 1.5, 0, 0 );
 				pointLight3.position.x = - 1000;
 				pointLight3.position.z = 1000;
 				scene.add( pointLight3 );

examples/webgl_mirror.html

@@ -59,6 +59,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				// scene
@@ -157,19 +158,19 @@
 				scene.add( planeLeft );
 
 				// lights
-				const mainLight = new THREE.PointLight( 0xe7e7e7, 1.5, 250 );
+				const mainLight = new THREE.PointLight( 0xe7e7e7, 2.5, 250, 0 );
 				mainLight.position.y = 60;
 				scene.add( mainLight );
 
-				const greenLight = new THREE.PointLight( 0x00ff00, 0.25, 1000 );
+				const greenLight = new THREE.PointLight( 0x00ff00, 0.5, 1000, 0 );
 				greenLight.position.set( 550, 50, 0 );
 				scene.add( greenLight );
 
-				const redLight = new THREE.PointLight( 0xff0000, 0.25, 1000 );
+				const redLight = new THREE.PointLight( 0xff0000, 0.5, 1000, 0 );
 				redLight.position.set( - 550, 50, 0 );
 				scene.add( redLight );
 
-				const blueLight = new THREE.PointLight( 0xbbbbfe, 0.25, 1000 );
+				const blueLight = new THREE.PointLight( 0xbbbbfe, 0.5, 1000, 0 );
 				blueLight.position.set( 0, 50, 550 );
 				scene.add( blueLight );
 

examples/webgl_modifier_simplifier.html

@@ -46,6 +46,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();
@@ -58,9 +59,9 @@
 				controls.enablePan = false;
 				controls.enableZoom = false;
 
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
+				scene.add( new THREE.AmbientLight( 0xffffff, 0.6 ) );
 
-				const light = new THREE.PointLight( 0xffffff, 0.7 );
+				const light = new THREE.PointLight( 0xffffff, 400 );
 				camera.add( light );
 				scene.add( camera );
 

examples/webgl_modifier_subdivision.html

@@ -60,6 +60,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();
@@ -74,10 +75,10 @@
 				controls.target.set( 0, 0, 0 );
 				controls.update();
 
-				scene.add( new THREE.HemisphereLight( 0xffffff, 0x737373, 1 ) );
+				scene.add( new THREE.HemisphereLight( 0xffffff, 0x737373, 3 ) );
 
-				const frontLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
-				const backLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const frontLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				const backLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				frontLight.position.set( 0, 1, 1 );
 				backLight.position.set( 0, 1, - 1 );
 				scene.add( frontLight, backLight );

examples/webgl_morphtargets_face.html

@@ -66,7 +66,7 @@
 				const renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.useLegacyLights = false;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
 				container.appendChild( renderer.domElement );
@@ -106,7 +106,7 @@
 
 					} );
 
-				const environment = new RoomEnvironment();
+				const environment = new RoomEnvironment( renderer );
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 				scene.background = new THREE.Color( 0x666666 );

examples/webgl_morphtargets_webcam.html

@@ -111,6 +111,7 @@
 			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.useLegacyLights = false;
 			renderer.toneMapping = THREE.ACESFilmicToneMapping;
 			document.body.appendChild( renderer.domElement );
 
@@ -120,7 +121,7 @@
 			const scene = new THREE.Scene();
 			scene.scale.x = - 1;
 
-			const environment = new RoomEnvironment();
+			const environment = new RoomEnvironment( renderer );
 			const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 			scene.background = new THREE.Color( 0x666666 );

examples/webgl_nodes_loader_gltf_sheen.html

@@ -83,11 +83,12 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
 				container.appendChild( renderer.domElement );
 
-				const environment = new RoomEnvironment();
+				const environment = new RoomEnvironment( renderer );
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 				scene.background = new THREE.Color( 0xbbbbbb );

examples/webgl_nodes_materials_instance_uniform.html

@@ -78,15 +78,15 @@
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
-				camera.position.set( 0, 200, 1200 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 400 );
+				camera.position.set( 0, 20, 120 );
 
 				scene = new THREE.Scene();
 
 				// Grid
 
-				const helper = new THREE.GridHelper( 1000, 40, 0x303030, 0x303030 );
-				helper.position.y = - 75;
+				const helper = new THREE.GridHelper( 100, 40, 0x303030, 0x303030 );
+				helper.position.y = - 7.5;
 				scene.add( helper );
 
 				// CubeMap
@@ -112,7 +112,7 @@
 
 				// Spheres geometry
 
-				const geometry = new THREE.SphereGeometry( 70, 32, 16 );
+				const geometry = new THREE.SphereGeometry( 7, 32, 16 );
 
 				for ( let i = 0, l = 12; i < l; i ++ ) {
 
@@ -122,9 +122,9 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x111111 ) );
+				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.4 );
 
 				directionalLight.position.x = Math.random() - 0.5;
 				directionalLight.position.y = Math.random() - 0.5;
@@ -133,23 +133,24 @@
 
 				scene.add( directionalLight );
 
-				pointLight = new THREE.PointLight( 0xffffff, 1 );
+				pointLight = new THREE.PointLight( 0xffffff, 1000 );
 				scene.add( pointLight );
 
-				pointLight.add( new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) ) );
+				pointLight.add( new THREE.Mesh( new THREE.SphereGeometry( 0.4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) ) );
 
 				//
 
 				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 OrbitControls( camera, renderer.domElement );
-				controls.minDistance = 400;
-				controls.maxDistance = 2000;
+				controls.minDistance = 40;
+				controls.maxDistance = 200;
 
 				//
 
@@ -168,8 +169,8 @@
 
 				mesh.color = new THREE.Color( Math.random() * 0xffffff );
 
-				mesh.position.x = ( objects.length % 4 ) * 200 - 300;
-				mesh.position.z = Math.floor( objects.length / 4 ) * 200 - 200;
+				mesh.position.x = ( objects.length % 4 ) * 20 - 30;
+				mesh.position.z = Math.floor( objects.length / 4 ) * 20 - 20;
 
 				mesh.rotation.x = Math.random() * 200 - 100;
 				mesh.rotation.y = Math.random() * 200 - 100;
@@ -216,9 +217,9 @@
 
 				}
 
-				pointLight.position.x = Math.sin( timer * 7 ) * 300;
-				pointLight.position.y = Math.cos( timer * 5 ) * 400;
-				pointLight.position.z = Math.cos( timer * 3 ) * 300;
+				pointLight.position.x = Math.sin( timer * 7 ) * 30;
+				pointLight.position.y = Math.cos( timer * 5 ) * 40;
+				pointLight.position.z = Math.cos( timer * 3 ) * 30;
 
 				renderer.render( scene, camera );
 

examples/webgl_nodes_materialx_noise.html

@@ -52,8 +52,8 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.z = 1000;
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.z = 100;
 
 				scene = new THREE.Scene();
 
@@ -65,7 +65,7 @@
 					.load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
 						function ( hdrTexture ) {
 
-							const geometry = new THREE.SphereGeometry( 80, 64, 32 );
+							const geometry = new THREE.SphereGeometry( 8, 64, 32 );
 
 							const offsetNode = timerLocal();
 							const customUV = normalWorld.mul( 10 ).add( offsetNode );
@@ -76,8 +76,8 @@
 							material.colorNode = mx_noise_vec3( customUV );
 
 							let mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = - 100;
-							mesh.position.y = 100;
+							mesh.position.x = - 10;
+							mesh.position.y = 10;
 							group.add( mesh );
 
 							// right top
@@ -86,8 +86,8 @@
 							material.colorNode = mx_cell_noise_float( customUV );
 
 							mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = 100;
-							mesh.position.y = 100;
+							mesh.position.x = 10;
+							mesh.position.y = 10;
 							group.add( mesh );
 
 							// left bottom
@@ -96,8 +96,8 @@
 							material.colorNode = mx_worley_noise_vec3( customUV );
 
 							mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = - 100;
-							mesh.position.y = - 100;
+							mesh.position.x = - 10;
+							mesh.position.y = - 10;
 							group.add( mesh );
 
 							// right bottom
@@ -106,8 +106,8 @@
 							material.colorNode = mx_fractal_noise_vec3( customUV.mul( .2 ) );
 
 							mesh = new THREE.Mesh( geometry, material );
-							mesh.position.x = 100;
-							mesh.position.y = - 100;
+							mesh.position.x = 10;
+							mesh.position.y = - 10;
 							group.add( mesh );
 
 							//
@@ -122,16 +122,17 @@
 				// LIGHTS
 
 				particleLight = new THREE.Mesh(
-					new THREE.SphereGeometry( 4, 8, 8 ),
+					new THREE.SphereGeometry( 0.4, 8, 8 ),
 					new THREE.MeshBasicMaterial( { color: 0xffffff } )
 				);
 				scene.add( particleLight );
 
-				particleLight.add( new THREE.PointLight( 0xffffff, 1 ) );
+				particleLight.add( new THREE.PointLight( 0xffffff, 1000 ) );
 
-				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 );
 
 				//
@@ -187,9 +188,9 @@
 
 				const timer = Date.now() * 0.00025;
 
-				particleLight.position.x = Math.sin( timer * 7 ) * 300;
-				particleLight.position.y = Math.cos( timer * 5 ) * 400;
-				particleLight.position.z = Math.cos( timer * 3 ) * 300;
+				particleLight.position.x = Math.sin( timer * 7 ) * 30;
+				particleLight.position.y = Math.cos( timer * 5 ) * 40;
+				particleLight.position.z = Math.cos( timer * 3 ) * 30;
 
 				for ( let i = 0; i < group.children.length; i ++ ) {
 

examples/webgl_portal.html

@@ -61,6 +61,7 @@
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 				renderer.localClippingEnabled = true;
 
@@ -151,19 +152,19 @@
 				scene.add( planeLeft );
 
 				// lights
-				const mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
+				const mainLight = new THREE.PointLight( 0xe7e7e7, 2.5, 250, 0 );
 				mainLight.position.y = 60;
 				scene.add( mainLight );
 
-				const greenLight = new THREE.PointLight( 0x00ff00, 0.25, 1000 );
+				const greenLight = new THREE.PointLight( 0x00ff00, 0.5, 1000, 0 );
 				greenLight.position.set( 550, 50, 0 );
 				scene.add( greenLight );
 
-				const redLight = new THREE.PointLight( 0xff0000, 0.25, 1000 );
+				const redLight = new THREE.PointLight( 0xff0000, 0.5, 1000, 0 );
 				redLight.position.set( - 550, 50, 0 );
 				scene.add( redLight );
 
-				const blueLight = new THREE.PointLight( 0x7f7fff, 0.25, 1000 );
+				const blueLight = new THREE.PointLight( 0xbbbbfe, 0.5, 1000, 0 );
 				blueLight.position.set( 0, 50, 550 );
 				scene.add( blueLight );
 

examples/webgl_postprocessing_crossfade.html

@@ -63,6 +63,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();
@@ -173,10 +174,10 @@
 
 				// Setup scene
 				const scene = new THREE.Scene();
-				scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
+				scene.add( new THREE.AmbientLight( 0xaaaaaa, 3 ) );
 
-				const light = new THREE.SpotLight( 0xffffff, 1.5 );
-				light.position.set( 0, 5, 20 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
+				light.position.set( 0, 1, 4 );
 				scene.add( light );
 
 				this.rotationSpeed = rotationSpeed;

examples/webgl_refraction.html

@@ -58,6 +58,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				// scene
@@ -136,19 +137,19 @@
 				scene.add( planeLeft );
 
 				// lights
-				const mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
+				const mainLight = new THREE.PointLight( 0xe7e7e7, 2.5, 250, 0 );
 				mainLight.position.y = 60;
 				scene.add( mainLight );
 
-				const greenLight = new THREE.PointLight( 0x00ff00, 0.25, 1000 );
+				const greenLight = new THREE.PointLight( 0x00ff00, 0.5, 1000, 0 );
 				greenLight.position.set( 550, 50, 0 );
 				scene.add( greenLight );
 
-				const redLight = new THREE.PointLight( 0xff0000, 0.25, 1000 );
+				const redLight = new THREE.PointLight( 0xff0000, 0.5, 1000, 0 );
 				redLight.position.set( - 550, 50, 0 );
 				scene.add( redLight );
 
-				const blueLight = new THREE.PointLight( 0x7f7fff, 0.25, 1000 );
+				const blueLight = new THREE.PointLight( 0xbbbbfe, 0.5, 1000, 0 );
 				blueLight.position.set( 0, 50, 550 );
 				scene.add( blueLight );
 

examples/webgl_shadowmap.html

@@ -84,14 +84,16 @@
 
 				// LIGHTS
 
-				const ambient = new THREE.AmbientLight( 0x8d8d8d );
+				const ambient = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambient );
 
-				light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 5, 0.3 );
+				light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 1500, 1000 );
-				light.target.position.set( 0, 0, 0 );
-
 				light.castShadow = true;
+				light.shadow.camera.top = 2000;
+				light.shadow.camera.bottom = - 2000;
+				light.shadow.camera.left = - 2000;
+				light.shadow.camera.right = 2000;
 				light.shadow.camera.near = 1200;
 				light.shadow.camera.far = 2500;
 				light.shadow.bias = 0.0001;
@@ -109,6 +111,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				renderer.autoClear = false;

examples/webgl_shadowmap_csm.html

@@ -85,6 +85,7 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@@ -95,10 +96,10 @@
 				controls.target = new THREE.Vector3( - 100, 10, 0 );
 				controls.update();
 
-				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.5 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 1.5 );
 				scene.add( ambientLight );
 
-				const additionalDirectionalLight = new THREE.DirectionalLight( 0x000020, 0.5 );
+				const additionalDirectionalLight = new THREE.DirectionalLight( 0x000020, 1.5 );
 				additionalDirectionalLight.position.set( params.lightX, params.lightY, params.lightZ ).normalize().multiplyScalar( - 200 );
 				scene.add( additionalDirectionalLight );
 

examples/webgl_shadowmap_performance.html

@@ -79,14 +79,16 @@
 
 				// LIGHTS
 
-				const ambient = new THREE.AmbientLight( 0x8d8d8d );
+				const ambient = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambient );
 
-				const light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 5, 0.3 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 1500, 1000 );
-				light.target.position.set( 0, 0, 0 );
-
 				light.castShadow = true;
+				light.shadow.camera.top = 2000;
+				light.shadow.camera.bottom = - 2000;
+				light.shadow.camera.left = - 2000;
+				light.shadow.camera.right = 2000;
 				light.shadow.camera.near = 1200;
 				light.shadow.camera.far = 2500;
 				light.shadow.bias = 0.0001;
@@ -100,9 +102,10 @@
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				renderer.autoClear = false;

examples/webgl_shadowmap_pointlight.html

@@ -44,13 +44,13 @@
 				camera.position.set( 0, 10, 40 );
 
 				scene = new THREE.Scene();
-				scene.add( new THREE.AmbientLight( 0x111122 ) );
+				scene.add( new THREE.AmbientLight( 0x111122, 3 ) );
 
 				// lights
 
 				function createLight( color ) {
 
-					const intensity = 2;
+					const intensity = 200;
 
 					const light = new THREE.PointLight( color, intensity, 20 );
 					light.castShadow = true;
@@ -110,6 +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.BasicShadowMap;
 				document.body.appendChild( renderer.domElement );

examples/webgl_shadowmap_progressive.html

@@ -51,6 +51,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = true;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 

examples/webgl_water.html

@@ -126,10 +126,10 @@
 
 				// light
 
-				const ambientLight = new THREE.AmbientLight( 0xe7e7e7, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xe7e7e7, 1.2 );
 				scene.add( ambientLight );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
 				directionalLight.position.set( - 1, 1, 1 );
 				scene.add( directionalLight );
 
@@ -138,6 +138,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				// gui