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

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

* Examples: Update screenshots.

examples/css2d_label.html

@@ -88,7 +88,7 @@
 
 				scene = new THREE.Scene();
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( 0, 0, 1 );
 				dirLight.layers.enableAll();
 				scene.add( dirLight );
@@ -175,6 +175,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				labelRenderer = new CSS2DRenderer();

examples/css3d_orthographic.html

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

examples/css3d_sandbox.html

@@ -93,6 +93,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 );
 
 				renderer2 = new CSS3DRenderer();

examples/games_fps.html

@@ -51,11 +51,11 @@
 			const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 			camera.rotation.order = 'YXZ';
 
-			const fillLight1 = new THREE.HemisphereLight( 0x8dc1de, 0x00668d, 0.5 );
+			const fillLight1 = new THREE.HemisphereLight( 0x8dc1de, 0x00668d, 1.5 );
 			fillLight1.position.set( 2, 1, 1 );
 			scene.add( fillLight1 );
 
-			const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+			const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
 			directionalLight.position.set( - 5, 25, - 1 );
 			directionalLight.castShadow = true;
 			directionalLight.shadow.camera.near = 0.01;
@@ -78,6 +78,7 @@
 			renderer.shadowMap.enabled = true;
 			renderer.shadowMap.type = THREE.VSMShadowMap;
 			renderer.toneMapping = THREE.ACESFilmicToneMapping;
+			renderer.useLegacyLights = false;
 			container.appendChild( renderer.domElement );
 
 			const stats = new Stats();

examples/misc_animation_groups.html

@@ -101,6 +101,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/misc_animation_keys.html

@@ -101,6 +101,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/webaudio_orientation.html

@@ -69,11 +69,11 @@
 
 			//
 
-			const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
+			const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );
 			hemiLight.position.set( 0, 20, 0 );
 			scene.add( hemiLight );
 
-			const dirLight = new THREE.DirectionalLight( 0xffffff );
+			const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 			dirLight.position.set( 5, 5, 0 );
 			dirLight.castShadow = true;
 			dirLight.shadow.camera.top = 1;
@@ -152,9 +152,10 @@
 			//
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.shadowMap.enabled = true;
+			renderer.useLegacyLights = false;
 			container.appendChild( renderer.domElement );
 
 			//

examples/webaudio_sandbox.html

@@ -76,7 +76,7 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0025 );
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 0.5, 1 ).normalize();
 				scene.add( light );
 
@@ -218,6 +218,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/webaudio_timing.html

@@ -64,10 +64,10 @@
 
 			// lights
 
-			const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+			const ambientLight = new THREE.AmbientLight( 0xcccccc );
 			scene.add( ambientLight );
 
-			const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
+			const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
 			directionalLight.position.set( 0, 5, 5 );
 			scene.add( directionalLight );
 
@@ -141,10 +141,10 @@
 			//
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.shadowMap.enabled = true;
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.setClearColor( 0x000000 );
 			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.shadowMap.enabled = true;
+			renderer.useLegacyLights = false;
 			container.appendChild( renderer.domElement );
 
 			//

examples/webaudio_visualizer.html

@@ -87,9 +87,9 @@
 				const container = document.getElementById( 'container' );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setClearColor( 0x000000 );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();

examples/webgl_animation_multiple.html

@@ -52,11 +52,11 @@
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( - 3, 10, - 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 4;
@@ -112,6 +112,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_animation_skinning_additive_blending.html

@@ -74,11 +74,11 @@
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( 3, 10, 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 2;
@@ -160,6 +160,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				// camera

examples/webgl_animation_skinning_blending.html

@@ -59,7 +59,7 @@
 
 				const container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 100 );
 				camera.position.set( 1, 2, - 3 );
 				camera.lookAt( 0, 1, 0 );
 
@@ -69,11 +69,11 @@
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( - 3, 10, - 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 2;
@@ -138,6 +138,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/webgl_animation_skinning_morph.html

@@ -81,11 +81,11 @@
 
 				// lights
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d, 3 );
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( 0, 20, 10 );
 				scene.add( dirLight );
 
@@ -119,6 +119,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_camera.html

@@ -135,6 +135,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_custom_attributes.html

@@ -132,6 +132,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 
 				const container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );

examples/webgl_custom_attributes_lines.html

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

examples/webgl_custom_attributes_points.html

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

examples/webgl_custom_attributes_points2.html

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

examples/webgl_custom_attributes_points3.html

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

examples/webgl_depth_texture.html

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

examples/webgl_framebuffer_texture.html

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

examples/webgl_geometry_cube.html

@@ -50,6 +50,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_loader_gltf.html

@@ -80,6 +80,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_loader_gltf_anisotropy.html

@@ -46,6 +46,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1.35;
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();

examples/webgl_loader_gltf_avif.html

@@ -78,6 +78,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 );
 
 				const controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_loader_gltf_instancing.html

@@ -80,6 +80,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_loader_gltf_iridescence.html

@@ -50,6 +50,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();

examples/webgl_loader_gltf_transmission.html

@@ -85,6 +85,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_loader_gltf_variants.html

@@ -100,6 +100,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_loader_texture_dds.html

@@ -40,12 +40,12 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.z = 1000;
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.z = 10;
 
 				scene = new THREE.Scene();
 
-				const geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				const geometry = new THREE.BoxGeometry( 2, 2, 2 );
 
 				/*
 				This is how compressed textures are supposed to be used:
@@ -122,51 +122,51 @@
 				const material7 = new THREE.MeshBasicMaterial( { map: map5 } );
 				const material8 = new THREE.MeshBasicMaterial( { map: map6 } );
 
-				let mesh = new THREE.Mesh( new THREE.TorusGeometry( 100, 50, 32, 16 ), material1 );
-				mesh.position.x = - 600;
-				mesh.position.y = - 200;
+				let mesh = new THREE.Mesh( new THREE.TorusGeometry(), material1 );
+				mesh.position.x = - 6;
+				mesh.position.y = - 2;
 				scene.add( mesh );
 				meshes.push( mesh );
 
 				mesh = new THREE.Mesh( geometry, material2 );
-				mesh.position.x = - 200;
-				mesh.position.y = - 200;
+				mesh.position.x = - 2;
+				mesh.position.y = - 2;
 				scene.add( mesh );
 				meshes.push( mesh );
 
 				mesh = new THREE.Mesh( geometry, material3 );
-				mesh.position.x = - 200;
-				mesh.position.y = 200;
+				mesh.position.x = - 2;
+				mesh.position.y = 2;
 				scene.add( mesh );
 				meshes.push( mesh );
 
 				mesh = new THREE.Mesh( geometry, material4 );
-				mesh.position.x = - 600;
-				mesh.position.y = 200;
+				mesh.position.x = - 6;
+				mesh.position.y = 2;
 				scene.add( mesh );
 				meshes.push( mesh );
 
 				mesh = new THREE.Mesh( geometry, material5 );
-				mesh.position.x = 200;
-				mesh.position.y = 200;
+				mesh.position.x = 2;
+				mesh.position.y = 2;
 				scene.add( mesh );
 				meshes.push( mesh );
 
 				mesh = new THREE.Mesh( geometry, material6 );
-				mesh.position.x = 200;
-				mesh.position.y = - 200;
+				mesh.position.x = 2;
+				mesh.position.y = - 2;
 				scene.add( mesh );
 				meshes.push( mesh );
 
 				mesh = new THREE.Mesh( geometry, material7 );
-				mesh.position.x = 600;
-				mesh.position.y = - 200;
+				mesh.position.x = 6;
+				mesh.position.y = - 2;
 				scene.add( mesh );
 				meshes.push( mesh );
 
 				mesh = new THREE.Mesh( geometry, material8 );
-				mesh.position.x = 600;
-				mesh.position.y = 200;
+				mesh.position.x = 6;
+				mesh.position.y = 2;
 				scene.add( mesh );
 				meshes.push( mesh );
 

examples/webgl_loader_texture_exr.html

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

examples/webgl_loader_texture_hdr.html

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

examples/webgl_loader_texture_ktx.html

@@ -57,6 +57,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 );
 
 		const formats = {

examples/webgl_loader_texture_ktx2.html

@@ -44,7 +44,9 @@
 				const height = window.innerHeight;
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_loader_texture_logluv.html

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

examples/webgl_loader_texture_pvrtc.html

@@ -166,6 +166,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 );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_loader_texture_rgbm.html

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

examples/webgl_loader_texture_tga.html

@@ -43,15 +43,15 @@
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
-				camera.position.set( 0, 50, 250 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 0, 1, 5 );
 
 				scene = new THREE.Scene();
 
 				//
 
 				const loader = new TGALoader();
-				const geometry = new THREE.BoxGeometry( 50, 50, 50 );
+				const geometry = new THREE.BoxGeometry();
 
 				// add box 1 - grey8 texture
 
@@ -60,7 +60,7 @@
 				const material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
 
 				const mesh1 = new THREE.Mesh( geometry, material1 );
-				mesh1.position.x = - 50;
+				mesh1.position.x = - 1;
 
 				scene.add( mesh1 );
 
@@ -71,16 +71,16 @@
 				const material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
 
 				const mesh2 = new THREE.Mesh( geometry, material2 );
-				mesh2.position.x = 50;
+				mesh2.position.x = 1;
 
 				scene.add( mesh2 );
 
 				//
 
-				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 1.5 );
 				scene.add( ambientLight );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 2.5 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
@@ -89,6 +89,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_loader_texture_tiff.html

@@ -42,6 +42,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();

examples/webgl_materials_car.html

@@ -75,6 +75,7 @@
 				renderer.setAnimationLoop( render );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 0.85;
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_materials_envmaps.html

@@ -44,8 +44,8 @@
 
 				// CAMERAS
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
-				camera.position.set( 0, 0, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 0, 0, 2.5 );
 
 				// SCENE
 
@@ -68,7 +68,7 @@
 
 				//
 
-				const geometry = new THREE.IcosahedronGeometry( 400, 15 );
+				const geometry = new THREE.IcosahedronGeometry( 1, 15 );
 				sphereMaterial = new THREE.MeshBasicMaterial( { envMap: textureCube } );
 				sphereMesh = new THREE.Mesh( geometry, sphereMaterial );
 				scene.add( sphereMesh );
@@ -78,13 +78,14 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				//
 
 				controls = new OrbitControls( camera, renderer.domElement );
-				controls.minDistance = 500;
-				controls.maxDistance = 2500;
+				controls.minDistance = 1.5;
+				controls.maxDistance = 6;
 
 				//
 

examples/webgl_materials_video.html

@@ -42,7 +42,6 @@
 
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 			import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
 			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 

examples/webgl_math_orientation_transform.html

@@ -74,6 +74,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 );
 
 				//