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

* Examples: More usage of `useLegacyLights=false`. * Examples: Update screenshots.
mrdoob · Jun 16, 2023 · b47e25e · b47e25e
1 parent 655f5c1
commit b47e25e
Show file tree

Hide file tree

Showing 56 changed files with 96 additions and 56 deletions.
diff --git a/examples/css2d_label.html b/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();

diff --git a/examples/css3d_orthographic.html b/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();

diff --git a/examples/css3d_sandbox.html b/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();

diff --git a/examples/games_fps.html b/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();

diff --git a/examples/misc_animation_groups.html b/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 );
 
 				//

diff --git a/examples/misc_animation_keys.html b/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 );
 
 				//

diff --git a/examples/screenshots/css2d_label.jpg b/examples/screenshots/css2d_label.jpg
diff --git a/examples/screenshots/games_fps.jpg b/examples/screenshots/games_fps.jpg
diff --git a/examples/screenshots/webaudio_orientation.jpg b/examples/screenshots/webaudio_orientation.jpg
diff --git a/examples/screenshots/webaudio_sandbox.jpg b/examples/screenshots/webaudio_sandbox.jpg
diff --git a/examples/screenshots/webaudio_timing.jpg b/examples/screenshots/webaudio_timing.jpg
diff --git a/examples/screenshots/webgl_animation_multiple.jpg b/examples/screenshots/webgl_animation_multiple.jpg
diff --git a/examples/screenshots/webgl_animation_skinning_additive_blending.jpg b/examples/screenshots/webgl_animation_skinning_additive_blending.jpg
diff --git a/examples/screenshots/webgl_animation_skinning_blending.jpg b/examples/screenshots/webgl_animation_skinning_blending.jpg
diff --git a/examples/screenshots/webgl_animation_skinning_morph.jpg b/examples/screenshots/webgl_animation_skinning_morph.jpg
diff --git a/examples/screenshots/webgl_loader_texture_dds.jpg b/examples/screenshots/webgl_loader_texture_dds.jpg
diff --git a/examples/screenshots/webgl_loader_texture_tga.jpg b/examples/screenshots/webgl_loader_texture_tga.jpg
diff --git a/examples/screenshots/webgl_materials_envmaps.jpg b/examples/screenshots/webgl_materials_envmaps.jpg
diff --git a/examples/webaudio_orientation.html b/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 );
 
 			//

diff --git a/examples/webaudio_sandbox.html b/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 );
 
 				//

diff --git a/examples/webaudio_timing.html b/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 );
 
 			//

diff --git a/examples/webaudio_visualizer.html b/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();

diff --git a/examples/webgl_animation_multiple.html b/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 );

diff --git a/examples/webgl_animation_skinning_additive_blending.html b/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

diff --git a/examples/webgl_animation_skinning_blending.html b/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();

diff --git a/examples/webgl_animation_skinning_morph.html b/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 );

diff --git a/examples/webgl_camera.html b/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;

diff --git a/examples/webgl_custom_attributes.html b/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 );

diff --git a/examples/webgl_custom_attributes_lines.html b/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 );

diff --git a/examples/webgl_custom_attributes_points.html b/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 );

diff --git a/examples/webgl_custom_attributes_points2.html b/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 );

diff --git a/examples/webgl_custom_attributes_points3.html b/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 );

diff --git a/examples/webgl_depth_texture.html b/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 );
 
 				//

diff --git a/examples/webgl_framebuffer_texture.html b/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 );
 

diff --git a/examples/webgl_geometry_cube.html b/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 );
 
 				//

diff --git a/examples/webgl_loader_gltf.html b/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 );

diff --git a/examples/webgl_loader_gltf_anisotropy.html b/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();

diff --git a/examples/webgl_loader_gltf_avif.html b/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 );

diff --git a/examples/webgl_loader_gltf_instancing.html b/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 );

diff --git a/examples/webgl_loader_gltf_iridescence.html b/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();

diff --git a/examples/webgl_loader_gltf_transmission.html b/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 );

diff --git a/examples/webgl_loader_gltf_variants.html b/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 );