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

* Examples: More usage of `useLegacyLights=false`. * Examples: Update screenshots.
mrdoob · Jun 18, 2023 · ed5914c · ed5914c
1 parent 592d165
commit ed5914c
Show file tree

Hide file tree

Showing 95 changed files with 199 additions and 147 deletions.
diff --git a/examples/misc_boxselection.html b/examples/misc_boxselection.html
@@ -62,35 +62,35 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
-				camera.position.z = 1000;
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 500 );
+				camera.position.z = 50;
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene.add( new THREE.AmbientLight( 0x505050 ) );
+				scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
 
-				const light = new THREE.SpotLight( 0xffffff, 1.5 );
-				light.position.set( 0, 500, 2000 );
-				light.angle = Math.PI / 9;
+				const light = new THREE.SpotLight( 0xffffff, 10000 );
+				light.position.set( 0, 25, 50 );
+				light.angle = Math.PI / 5;
 
 				light.castShadow = true;
-				light.shadow.camera.near = 1000;
-				light.shadow.camera.far = 4000;
+				light.shadow.camera.near = 10;
+				light.shadow.camera.far = 100;
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
 
 				scene.add( light );
 
-				const geometry = new THREE.BoxGeometry( 20, 20, 20 );
+				const geometry = new THREE.BoxGeometry();
 
 				for ( let i = 0; i < 200; i ++ ) {
 
 					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
-					object.position.x = Math.random() * 1600 - 800;
-					object.position.y = Math.random() * 900 - 450;
-					object.position.z = Math.random() * 900 - 500;
+					object.position.x = Math.random() * 80 - 40;
+					object.position.y = Math.random() * 45 - 25;
+					object.position.z = Math.random() * 45 - 25;
 
 					object.rotation.x = Math.random() * 2 * Math.PI;
 					object.rotation.y = Math.random() * 2 * Math.PI;
@@ -110,7 +110,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFShadowMap;
 

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

diff --git a/examples/screenshots/misc_boxselection.jpg b/examples/screenshots/misc_boxselection.jpg
diff --git a/examples/screenshots/misc_controls_drag.jpg b/examples/screenshots/misc_controls_drag.jpg
diff --git a/examples/screenshots/webgl_buffergeometry.jpg b/examples/screenshots/webgl_buffergeometry.jpg
diff --git a/examples/screenshots/webgl_buffergeometry_compression.jpg b/examples/screenshots/webgl_buffergeometry_compression.jpg
diff --git a/examples/screenshots/webgl_buffergeometry_indexed.jpg b/examples/screenshots/webgl_buffergeometry_indexed.jpg
diff --git a/examples/screenshots/webgl_buffergeometry_uint.jpg b/examples/screenshots/webgl_buffergeometry_uint.jpg
diff --git a/examples/screenshots/webgl_clipping.jpg b/examples/screenshots/webgl_clipping.jpg
diff --git a/examples/screenshots/webgl_clipping_advanced.jpg b/examples/screenshots/webgl_clipping_advanced.jpg
diff --git a/examples/screenshots/webgl_clipping_intersection.jpg b/examples/screenshots/webgl_clipping_intersection.jpg
diff --git a/examples/screenshots/webgl_clipping_stencil.jpg b/examples/screenshots/webgl_clipping_stencil.jpg
diff --git a/examples/screenshots/webgl_lights_hemisphere.jpg b/examples/screenshots/webgl_lights_hemisphere.jpg
diff --git a/examples/screenshots/webgl_lights_spotlight.jpg b/examples/screenshots/webgl_lights_spotlight.jpg
diff --git a/examples/screenshots/webgl_lights_spotlights.jpg b/examples/screenshots/webgl_lights_spotlights.jpg
diff --git a/examples/screenshots/webgl_loader_3dm.jpg b/examples/screenshots/webgl_loader_3dm.jpg
diff --git a/examples/screenshots/webgl_loader_3ds.jpg b/examples/screenshots/webgl_loader_3ds.jpg
diff --git a/examples/screenshots/webgl_loader_3mf_materials.jpg b/examples/screenshots/webgl_loader_3mf_materials.jpg
diff --git a/examples/screenshots/webgl_loader_collada.jpg b/examples/screenshots/webgl_loader_collada.jpg
diff --git a/examples/screenshots/webgl_loader_draco.jpg b/examples/screenshots/webgl_loader_draco.jpg
diff --git a/examples/screenshots/webgl_loader_lwo.jpg b/examples/screenshots/webgl_loader_lwo.jpg
diff --git a/examples/screenshots/webgl_materials_video.jpg b/examples/screenshots/webgl_materials_video.jpg
diff --git a/examples/screenshots/webgl_modifier_curve.jpg b/examples/screenshots/webgl_modifier_curve.jpg
diff --git a/examples/screenshots/webgl_modifier_curve_instanced.jpg b/examples/screenshots/webgl_modifier_curve_instanced.jpg
diff --git a/examples/screenshots/webgl_modifier_edgesplit.jpg b/examples/screenshots/webgl_modifier_edgesplit.jpg
diff --git a/examples/screenshots/webgl_multiple_elements.jpg b/examples/screenshots/webgl_multiple_elements.jpg
diff --git a/examples/screenshots/webgl_multiple_scenes_comparison.jpg b/examples/screenshots/webgl_multiple_scenes_comparison.jpg
diff --git a/examples/screenshots/webgl_multiple_views.jpg b/examples/screenshots/webgl_multiple_views.jpg
diff --git a/examples/screenshots/webxr_vr_handinput.jpg b/examples/screenshots/webxr_vr_handinput.jpg
diff --git a/examples/screenshots/webxr_vr_handinput_cubes.jpg b/examples/screenshots/webxr_vr_handinput_cubes.jpg
diff --git a/examples/screenshots/webxr_vr_handinput_pointerclick.jpg b/examples/screenshots/webxr_vr_handinput_pointerclick.jpg
diff --git a/examples/screenshots/webxr_vr_handinput_pointerdrag.jpg b/examples/screenshots/webxr_vr_handinput_pointerdrag.jpg
diff --git a/examples/screenshots/webxr_vr_handinput_pressbutton.jpg b/examples/screenshots/webxr_vr_handinput_pressbutton.jpg
diff --git a/examples/screenshots/webxr_vr_handinput_profiles.jpg b/examples/screenshots/webxr_vr_handinput_profiles.jpg
diff --git a/examples/screenshots/webxr_vr_panorama_depth.jpg b/examples/screenshots/webxr_vr_panorama_depth.jpg
diff --git a/examples/screenshots/webxr_vr_rollercoaster.jpg b/examples/screenshots/webxr_vr_rollercoaster.jpg
diff --git a/examples/screenshots/webxr_vr_teleport.jpg b/examples/screenshots/webxr_vr_teleport.jpg
diff --git a/examples/screenshots/webxr_xr_ballshooter.jpg b/examples/screenshots/webxr_xr_ballshooter.jpg
diff --git a/examples/screenshots/webxr_xr_cubes.jpg b/examples/screenshots/webxr_xr_cubes.jpg
diff --git a/examples/screenshots/webxr_xr_dragging.jpg b/examples/screenshots/webxr_xr_dragging.jpg
diff --git a/examples/screenshots/webxr_xr_haptics.jpg b/examples/screenshots/webxr_xr_haptics.jpg
diff --git a/examples/screenshots/webxr_xr_paint.jpg b/examples/screenshots/webxr_xr_paint.jpg
diff --git a/examples/screenshots/webxr_xr_sculpt.jpg b/examples/screenshots/webxr_xr_sculpt.jpg
diff --git a/examples/webgl_buffergeometry.html b/examples/webgl_buffergeometry.html
@@ -54,13 +54,13 @@
 
 				//
 
-				scene.add( new THREE.AmbientLight( 0x8d8d8d ) );
+				scene.add( new THREE.AmbientLight( 0xcccccc ) );
 
-				const light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				const light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 4.5 );
 				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
@@ -168,10 +168,10 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//

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

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

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

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

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

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

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

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

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

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