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,14 +51,15 @@
 				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 );
 
 				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,27 +88,27 @@
 				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 );
 
 				} );
 
 				//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 );