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

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

* Examples: Update screenshots.

examples/webgl_effects_ascii.html

@@ -48,11 +48,11 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0, 0, 0 );
 
-				const pointLight1 = new THREE.PointLight( 0xffffff );
+				const pointLight1 = new THREE.PointLight( 0xffffff, 3, 0, 0 );
 				pointLight1.position.set( 500, 500, 500 );
 				scene.add( pointLight1 );
 
-				const pointLight2 = new THREE.PointLight( 0xffffff, 0.25 );
+				const pointLight2 = new THREE.PointLight( 0xffffff, 1, 0, 0 );
 				pointLight2.position.set( - 500, - 500, - 500 );
 				scene.add( pointLight2 );
 
@@ -68,6 +68,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 
 				effect = new AsciiEffect( renderer, ' .:-+*=%@#', { invert: true } );
 				effect.setSize( window.innerWidth, window.innerHeight );

examples/webgl_furnace_test.html

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

examples/webgl_geometries.html

@@ -43,10 +43,10 @@
 
 				let object;
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc, 1.5 );
 				scene.add( ambientLight );
 
-				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				const pointLight = new THREE.PointLight( 0xffffff, 2.5, 0, 0 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -124,6 +124,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 = new Stats();

examples/webgl_geometries_parametric.html

@@ -50,10 +50,10 @@
 
 				//
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc, 1.5 );
 				scene.add( ambientLight );
 
-				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				const pointLight = new THREE.PointLight( 0xffffff, 2.5, 0, 0 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -114,6 +114,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();

examples/webgl_geometry_colors.html

@@ -61,7 +61,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
@@ -164,6 +164,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();

examples/webgl_geometry_colors_lookuptable.html

@@ -97,11 +97,12 @@
 				};
 				loadModel( );
 
-				const pointLight = new THREE.PointLight( 0xffffff, 1 );
+				const pointLight = new THREE.PointLight( 0xffffff, 3, 0, 0 );
 				perpCamera.add( pointLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.autoClear = false;
+				renderer.useLegacyLights = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_convex.html

@@ -43,6 +43,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 );
 
 				// camera
@@ -60,11 +61,11 @@
 
 				// ambient light
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
 				// point light
 
-				const light = new THREE.PointLight( 0xffffff, 1 );
+				const light = new THREE.PointLight( 0xffffff, 3, 0, 0 );
 				camera.add( light );
 
 				// helper

examples/webgl_geometry_csg.html

@@ -74,10 +74,10 @@
 				scene.background = new THREE.Color( 0xfce4ec );
 
 				// lights
-				const ambient = new THREE.HemisphereLight( 0xffffff, 0xbfd4d2, 0.9 );
+				const ambient = new THREE.HemisphereLight( 0xffffff, 0xbfd4d2, 3 );
 				scene.add( ambient );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.3 );
 				directionalLight.position.set( 1, 4, 3 ).multiplyScalar( 3 );
 				directionalLight.castShadow = true;
 				directionalLight.shadow.mapSize.setScalar( 2048 );
@@ -89,6 +89,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.PCFSoftShadowMap;
 				document.body.appendChild( renderer.domElement );

examples/webgl_geometry_extrude_shapes.html

@@ -53,9 +53,10 @@
 				info.innerHTML = '<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometry extrude shapes';
 				document.body.appendChild( info );
 
-				renderer = new THREE.WebGLRenderer();
+				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();
@@ -68,9 +69,9 @@
 				controls.minDistance = 200;
 				controls.maxDistance = 500;
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
-				const light = new THREE.PointLight( 0xffffff );
+				const light = new THREE.PointLight( 0xffffff, 3, 0, 0 );
 				light.position.copy( camera.position );
 				scene.add( light );
 

examples/webgl_geometry_extrude_splines.html

@@ -184,7 +184,9 @@
 
 				// light
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				scene.add( new THREE.AmbientLight( 0xffffff ) );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
@@ -214,6 +216,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

examples/webgl_geometry_minecraft.html

@@ -161,16 +161,17 @@
 				const mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } ) );
 				scene.add( mesh );
 
-				const ambientLight = new THREE.AmbientLight( 0xeeeeee );
+				const ambientLight = new THREE.AmbientLight( 0xeeeeee, 3 );
 				scene.add( ambientLight );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 4 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 12 );
 				directionalLight.position.set( 1, 1, 0.5 ).normalize();
 				scene.add( directionalLight );
 
 				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 FirstPersonControls( camera, renderer.domElement );

examples/webgl_geometry_nurbs.html

@@ -70,9 +70,9 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene.add( new THREE.AmbientLight( 0x808080 ) );
+				scene.add( new THREE.AmbientLight( 0xffffff ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
@@ -179,6 +179,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();

examples/webgl_geometry_shapes.html

@@ -64,7 +64,7 @@
 				camera.position.set( 0, 150, 500 );
 				scene.add( camera );
 
-				const light = new THREE.PointLight( 0xffffff, 0.8 );
+				const light = new THREE.PointLight( 0xffffff, 2.5, 0, 0 );
 				camera.add( light );
 
 				group = new THREE.Group();
@@ -361,6 +361,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();

examples/webgl_geometry_spline_editor.html

@@ -86,10 +86,11 @@
 				camera.position.set( 0, 250, 1000 );
 				scene.add( camera );
 
-				scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
-				const light = new THREE.SpotLight( 0xffffff, 1.5 );
+				scene.add( new THREE.AmbientLight( 0xf0f0f0, 3 ) );
+				const light = new THREE.SpotLight( 0xffffff, 4.5 );
 				light.position.set( 0, 1500, 200 );
 				light.angle = Math.PI * 0.2;
+				light.decay = 0;
 				light.castShadow = true;
 				light.shadow.camera.near = 200;
 				light.shadow.camera.far = 2000;
@@ -116,6 +117,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 

examples/webgl_geometry_text.html

@@ -121,11 +121,11 @@
 
 				// LIGHTS
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.4 );
 				dirLight.position.set( 0, 0, 1 ).normalize();
 				scene.add( dirLight );
 
-				const pointLight = new THREE.PointLight( 0xffffff, 1.5 );
+				const pointLight = new THREE.PointLight( 0xffffff, 4.5, 0, 0 );
 				pointLight.color.setHSL( Math.random(), 1, 0.5 );
 				pointLight.position.set( 0, 100, 90 );
 				scene.add( pointLight );
@@ -155,6 +155,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				// EVENTS

examples/webgl_geometry_text_shapes.html

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

@@ -139,6 +139,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_instancing_scatter.html

@@ -132,11 +132,11 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( api.backgroundColor );
 
-				const pointLight = new THREE.PointLight( 0xAA8899, 0.75 );
+				const pointLight = new THREE.PointLight( 0xAA8899, 2.5, 0, 0 );
 				pointLight.position.set( 50, - 25, 75 );
 				scene.add( pointLight );
 
-				scene.add( new THREE.HemisphereLight() );
+				scene.add( new THREE.AmbientLight( 0xffffff, 3 ) );
 
 				//
 
@@ -175,6 +175,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_layers.html

@@ -45,7 +45,7 @@
 			let camera, scene, renderer;
 
 			let theta = 0;
-			const radius = 100;
+			const radius = 5;
 
 			init();
 			animate();
@@ -55,7 +55,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.layers.enable( 0 ); // enabled by default
 				camera.layers.enable( 1 );
 				camera.layers.enable( 2 );
@@ -63,7 +63,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				const light = new THREE.PointLight( 0xffffff, 1 );
+				const light = new THREE.PointLight( 0xffffff, 3, 0, 0 );
 				light.layers.enable( 0 );
 				light.layers.enable( 1 );
 				light.layers.enable( 2 );
@@ -72,7 +72,7 @@
 				camera.add( light );
 
 				const colors = [ 0xff0000, 0x00ff00, 0x0000ff ];
-				const geometry = new THREE.BoxGeometry( 20, 20, 20 );
+				const geometry = new THREE.BoxGeometry();
 
 				for ( let i = 0; i < 300; i ++ ) {
 
@@ -80,9 +80,9 @@
 
 					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: colors[ layer ] } ) );
 
-					object.position.x = Math.random() * 800 - 400;
-					object.position.y = Math.random() * 800 - 400;
-					object.position.z = Math.random() * 800 - 400;
+					object.position.x = Math.random() * 40 - 20;
+					object.position.y = Math.random() * 40 - 20;
+					object.position.z = Math.random() * 40 - 20;
 
 					object.rotation.x = Math.random() * 2 * Math.PI;
 					object.rotation.y = Math.random() * 2 * Math.PI;
@@ -98,9 +98,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();

examples/webgl_lensflares.html

@@ -91,7 +91,7 @@
 
 				// lights
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.05 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.15 );
 				dirLight.position.set( 0, - 1, 0 ).normalize();
 				dirLight.color.setHSL( 0.1, 0.7, 0.5 );
 				scene.add( dirLight );
@@ -108,7 +108,7 @@
 
 				function addLight( h, s, l, x, y, z ) {
 
-					const light = new THREE.PointLight( 0xffffff, 1.5, 2000 );
+					const light = new THREE.PointLight( 0xffffff, 1.5, 2000, 0 );
 					light.color.setHSL( h, s, l );
 					light.position.set( x, y, z );
 					scene.add( light );
@@ -128,6 +128,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_3mf.html

@@ -60,13 +60,12 @@
 				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();
 				scene.background = new THREE.Color( 0x333333 );
 
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
-
 				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
 
 				// Z is up for objects intended to be 3D printed.
@@ -82,8 +81,11 @@
 				controls.enablePan = false;
 				controls.update();
 
-				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
-				camera.add( pointLight );
+				scene.add( new THREE.AmbientLight( 0xffffff, 0.6 ) );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 2 );
+				light.position.set( - 1, - 2.5, 1 );
+				scene.add( light );
 
 				const manager = new THREE.LoadingManager();
 

examples/webgl_loader_amf.html

@@ -54,7 +54,7 @@
 				camera.up.set( 0, 0, 1 );
 				camera.position.set( 0, - 9, 6 );
 
-				camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );
+				camera.add( new THREE.PointLight( 0xffffff, 250 ) );
 
 				scene.add( camera );
 
@@ -65,6 +65,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 loader = new AMFLoader();
@@ -77,7 +78,8 @@
 
 				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
-				controls.target.set( 0, 1.2, 2 );
+				controls.target.set( 0, 0, 2 );
+				controls.enableZoom = false;
 				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize );

examples/webgl_loader_collada_kinematics.html

@@ -37,7 +37,6 @@
 			let container, stats;
 
 			let camera, scene, renderer;
-			let particleLight;
 			let dae;
 
 			let kinematics;
@@ -89,20 +88,15 @@
 
 				scene.add( dae );
 
-				particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
-				scene.add( particleLight );
-
 				// Lights
 
-				const light = new THREE.HemisphereLight( 0xfff7f7, 0x494966 );
+				const light = new THREE.HemisphereLight( 0xfff7f7, 0x494966, 3 );
 				scene.add( light );
 
-				const pointLight = new THREE.PointLight( 0xffffff, 0.3 );
-				particleLight.add( pointLight );
-
-				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();
@@ -201,10 +195,6 @@
 
 				camera.lookAt( 0, 5, 0 );
 
-				particleLight.position.x = Math.sin( timer * 4 ) * 3009;
-				particleLight.position.y = Math.cos( timer * 5 ) * 4000;
-				particleLight.position.z = Math.cos( timer * 4 ) * 3009;
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_loader_collada_skinning.html

@@ -75,18 +75,19 @@
 
 				//
 
-				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.6 );
 				scene.add( ambientLight );
 
-				const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
-				scene.add( camera );
-				camera.add( pointLight );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
+				directionalLight.position.set( 1.5, 1, - 1.5 );
+				scene.add( directionalLight );
 
 				//
 
 				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_md2.html

@@ -68,21 +68,21 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 0, 150, 400 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 0, 2, 4 );
 
 				// SCENE
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x050505 );
-				scene.fog = new THREE.Fog( 0x050505, 400, 1000 );
+				scene.fog = new THREE.Fog( 0x050505, 2.5, 10 );
 
 				// LIGHTS
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
-				const light1 = new THREE.SpotLight( 0xffffff, 5, 1000 );
-				light1.position.set( 200, 250, 500 );
+				const light1 = new THREE.SpotLight( 0xffffff, 150 );
+				light1.position.set( 2, 5, 10 );
 				light1.angle = 0.5;
 				light1.penumbra = 0.5;
 
@@ -93,8 +93,8 @@
 				// scene.add( new THREE.CameraHelper( light1.shadow.camera ) );
 				scene.add( light1 );
 
-				const light2 = new THREE.SpotLight( 0xffffff, 5, 1000 );
-				light2.position.set( - 100, 350, 350 );
+				const light2 = new THREE.SpotLight( 0xffffff, 150 );
+				light2.position.set( - 1, 3.5, 3.5 );
 				light2.angle = 0.5;
 				light2.penumbra = 0.5;
 
@@ -108,7 +108,7 @@
 				//  GROUND
 
 				const gt = new THREE.TextureLoader().load( 'textures/terrain/grasslight-big.jpg' );
-				const gg = new THREE.PlaneGeometry( 2000, 2000 );
+				const gg = new THREE.PlaneGeometry( 20, 20 );
 				const gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
 
 				const ground = new THREE.Mesh( gg, gm );
@@ -125,6 +125,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -143,7 +144,7 @@
 				// CONTROLS
 
 				controls = new OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 50, 0 );
+				controls.target.set( 0, 0.5, 0 );
 				controls.update();
 
 				// GUI
@@ -186,7 +187,7 @@
 				};
 
 				character = new MD2Character();
-				character.scale = 3;
+				character.scale = 0.03;
 
 				character.onLoadComplete = function () {
 

examples/webgl_loader_md2_control.html

@@ -90,9 +90,9 @@
 
 				// LIGHTS
 
-				scene.add( new THREE.AmbientLight( 0x666666 ) );
+				scene.add( new THREE.AmbientLight( 0x666666, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 2.25 );
+				const light = new THREE.DirectionalLight( 0xffffff, 7 );
 				light.position.set( 200, 450, 500 );
 
 				light.castShadow = true;
@@ -134,6 +134,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//

examples/webgl_loader_texture_dds.html

@@ -173,6 +173,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_ttf.html

@@ -80,14 +80,14 @@
 
 				// LIGHTS
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
-				dirLight.position.set( 0, 0, 1 ).normalize();
-				scene.add( dirLight );
+				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 0.4 );
+				dirLight1.position.set( 0, 0, 1 ).normalize();
+				scene.add( dirLight1 );
 
-				const pointLight = new THREE.PointLight( 0xffffff, 1.5 );
-				pointLight.position.set( 0, 100, 90 );
-				pointLight.color.setHSL( Math.random(), 1, 0.5, THREE.SRGBColorSpace );
-				scene.add( pointLight );
+				const dirLight2 = new THREE.DirectionalLight( 0xffffff, 2 );
+				dirLight2.position.set( 0, hover, 10 ).normalize();
+				dirLight2.color.setHSL( Math.random(), 1, 0.5, THREE.SRGBColorSpace );
+				scene.add( dirLight2 );
 
 				material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
@@ -118,6 +118,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				// EVENTS

examples/webgl_loader_vrml.html

@@ -72,10 +72,10 @@
 
 				// light
 
-				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff, 1.2 );
 				scene.add( ambientLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 2.0 );
 				dirLight.position.set( 200, 200, 200 );
 				scene.add( dirLight );
 
@@ -87,6 +87,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				// controls

examples/webgl_lod.html

@@ -51,11 +51,11 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
 
-				const pointLight = new THREE.PointLight( 0xff2200 );
+				const pointLight = new THREE.PointLight( 0xff2200, 3, 0, 0 );
 				pointLight.position.set( 0, 0, 0 );
 				scene.add( pointLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( 0, 0, 1 ).normalize();
 				scene.add( dirLight );
 
@@ -98,6 +98,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_marchingcubes.html

@@ -74,15 +74,15 @@
 
 			// LIGHTS
 
-			light = new THREE.DirectionalLight( 0xffffff );
+			light = new THREE.DirectionalLight( 0xffffff, 3 );
 			light.position.set( 0.5, 0.5, 1 );
 			scene.add( light );
 
-			pointLight = new THREE.PointLight( 0xff7c00 );
+			pointLight = new THREE.PointLight( 0xff7c00, 3, 0, 0 );
 			pointLight.position.set( 0, 0, 100 );
 			scene.add( pointLight );
 
-			ambientLight = new THREE.AmbientLight( 0x323232 );
+			ambientLight = new THREE.AmbientLight( 0x323232, 3 );
 			scene.add( ambientLight );
 
 			// MATERIALS
@@ -108,6 +108,7 @@
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.useLegacyLights = false;
 			container.appendChild( renderer.domElement );
 
 			// CONTROLS

examples/webgl_materials_bumpmap.html

@@ -34,8 +34,6 @@
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			const statsEnabled = true;
-
 			let container, stats, loader;
 
 			let camera, scene, renderer;
@@ -63,19 +61,18 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.z = 1200;
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.z = 12;
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x060708 );
 
 				// LIGHTS
 
-				scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966 ) );
+				scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966, 3 ) );
 
-				spotLight = new THREE.SpotLight( 0xffffde, 2 );
-				spotLight.position.set( 0.5, 0, 1 );
-				spotLight.position.multiplyScalar( 700 );
+				spotLight = new THREE.SpotLight( 0xffffde, 200 );
+				spotLight.position.set( 3.5, 0, 7 );
 				scene.add( spotLight );
 
 				spotLight.castShadow = true;
@@ -83,8 +80,8 @@
 				spotLight.shadow.mapSize.width = 2048;
 				spotLight.shadow.mapSize.height = 2048;
 
-				spotLight.shadow.camera.near = 200;
-				spotLight.shadow.camera.far = 1500;
+				spotLight.shadow.camera.near = 2;
+				spotLight.shadow.camera.far = 15;
 
 				spotLight.shadow.camera.fov = 40;
 
@@ -99,31 +96,28 @@
 					specular: 0x666666,
 					shininess: 25,
 					bumpMap: mapHeight,
-					bumpScale: 12
+					bumpScale: 0.1
 				} );
 
 				loader = new GLTFLoader();
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
-					createScene( gltf.scene.children[ 0 ].geometry, 100, material );
+					createScene( gltf.scene.children[ 0 ].geometry, 1, material );
 
 				} );
 
-				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 );
 
 				renderer.shadowMap.enabled = true;
 
 				//
 
-				if ( statsEnabled ) {
-
-					stats = new Stats();
-					container.appendChild( stats.dom );
-
-				}
+				stats = new Stats();
+				container.appendChild( stats.dom );
 
 				// EVENTS
 
@@ -136,7 +130,7 @@
 
 				mesh = new THREE.Mesh( geometry, material );
 
-				mesh.position.y = - 50;
+				mesh.position.y = - 0.5;
 				mesh.scale.set( scale, scale, scale );
 
 				mesh.castShadow = true;
@@ -171,7 +165,8 @@
 				requestAnimationFrame( animate );
 
 				render();
-				if ( statsEnabled ) stats.update();
+			
+				stats.update();
 
 			}
 

examples/webgl_materials_cubemap_dynamic.html

@@ -53,6 +53,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animation );
+				renderer.useLegacyLights = false;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				document.body.appendChild( renderer.domElement );
 

examples/webgl_materials_cubemap_mipmaps.html

@@ -146,6 +146,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

examples/webgl_materials_normalmap_object_space.html

@@ -42,8 +42,9 @@
 			function init() {
 
 				// renderer
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 
@@ -63,10 +64,10 @@
 				controls.enablePan = false;
 
 				// ambient
-				scene.add( new THREE.AmbientLight( 0xffffff, .2 ) );
+				scene.add( new THREE.AmbientLight( 0xffffff, 0.6 ) );
 
 				// light
-				const light = new THREE.PointLight( 0xffffff, 1.5 );
+				const light = new THREE.PointLight( 0xffffff, 4.5, 0, 0 );
 				camera.add( light );
 
 				// model

examples/webgl_materials_subsurface_scattering.html

@@ -63,14 +63,14 @@
 			scene.add( directionalLight );
 
 			const pointLight1 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xc1c1c1 } ) );
-			pointLight1.add( new THREE.PointLight( 0xc1c1c1, 7.0, 300 ) );
+			pointLight1.add( new THREE.PointLight( 0xc1c1c1, 4.0, 300, 0 ) );
 			scene.add( pointLight1 );
 			pointLight1.position.x = 0;
 			pointLight1.position.y = - 50;
 			pointLight1.position.z = 350;
 
 			const pointLight2 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xc1c100 } ) );
-			pointLight2.add( new THREE.PointLight( 0xc1c100, 1.0, 500 ) );
+			pointLight2.add( new THREE.PointLight( 0xc1c100, 0.75, 500, 0 ) );
 			scene.add( pointLight2 );
 			pointLight2.position.x = - 100;
 			pointLight2.position.y = 20;
@@ -79,6 +79,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_materials_texture_anisotropy.html

@@ -108,14 +108,14 @@
 				scene2.background = new THREE.Color( 0xf2f7ff );
 				scene2.fog = new THREE.Fog( 0xf2f7ff, 1, 25000 );
 
-				scene1.add( new THREE.AmbientLight( 0xeef0ff ) );
-				scene2.add( new THREE.AmbientLight( 0xeef0ff ) );
+				scene1.add( new THREE.AmbientLight( 0xeef0ff, 3 ) );
+				scene2.add( new THREE.AmbientLight( 0xeef0ff, 3 ) );
 
-				const light1 = new THREE.DirectionalLight( 0xffffff, 2 );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 6 );
 				light1.position.set( 1, 1, 1 );
 				scene1.add( light1 );
 
-				const light2 = new THREE.DirectionalLight( 0xffffff, 2 );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 6 );
 				light2.position.set( 1, 1, 1 );
 				scene2.add( light2 );
 
@@ -172,6 +172,7 @@
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.useLegacyLights = false;
 				renderer.autoClear = false;
 
 				renderer.domElement.style.position = 'relative';

examples/webgl_materials_texture_filters.html

@@ -194,6 +194,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.useLegacyLights = false;
 				renderer.autoClear = false;
 
 				renderer.domElement.style.position = 'relative';

examples/webgl_materials_texture_manualmipmap.html

@@ -206,6 +206,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.useLegacyLights = false;
 				renderer.autoClear = false;
 
 				renderer.domElement.style.position = 'relative';

examples/webgl_materials_texture_partialupdate.html

@@ -72,6 +72,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_materials_toon.html

@@ -66,6 +66,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				// Materials
@@ -150,9 +151,9 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0xc1c1c1 ) );
+				scene.add( new THREE.AmbientLight( 0xc1c1c1, 3 ) );
 
-				const pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+				const pointLight = new THREE.PointLight( 0xffffff, 2, 800, 0 );
 				particleLight.add( pointLight );
 
 				//

examples/webgl_shadowmap_pcss.html

@@ -173,9 +173,9 @@
 
 				// lights
 
-				scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
+				scene.add( new THREE.AmbientLight( 0xaaaaaa, 3 ) );
 
-				const light = new THREE.DirectionalLight( 0xf0f6ff, 1.75 );
+				const light = new THREE.DirectionalLight( 0xf0f6ff, 4.5 );
 				light.position.set( 2, 8, 4 );
 
 				light.castShadow = true;
@@ -251,6 +251,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.setClearColor( scene.fog.color );
 
 				container.appendChild( renderer.domElement );

examples/webgl_shadowmap_viewer.html

@@ -62,9 +62,9 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x404040 ) );
+				scene.add( new THREE.AmbientLight( 0x404040, 3 ) );
 
-				spotLight = new THREE.SpotLight( 0xffffff );
+				spotLight = new THREE.SpotLight( 0xffffff, 500 );
 				spotLight.name = 'Spot Light';
 				spotLight.angle = Math.PI / 5;
 				spotLight.penumbra = 0.3;
@@ -78,7 +78,7 @@
 
 				scene.add( new THREE.CameraHelper( spotLight.shadow.camera ) );
 
-				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.name = 'Dir. Light';
 				dirLight.position.set( 0, 10, 0 );
 				dirLight.castShadow = true;
@@ -144,6 +144,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;
 

examples/webgl_shadowmap_vsm.html

@@ -101,7 +101,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
-				spotLight = new THREE.SpotLight( 0xff8888 );
+				spotLight = new THREE.SpotLight( 0xff8888, 400 );
 				spotLight.angle = Math.PI / 5;
 				spotLight.penumbra = 0.3;
 				spotLight.position.set( 8, 10, 5 );
@@ -115,7 +115,7 @@
 				scene.add( spotLight );
 
 
-				dirLight = new THREE.DirectionalLight( 0x8888ff );
+				dirLight = new THREE.DirectionalLight( 0x8888ff, 3 );
 				dirLight.position.set( 3, 12, 17 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.near = 0.1;
@@ -189,6 +189,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.VSMShadowMap;
 

examples/webgl_shadowmesh.html

@@ -41,7 +41,7 @@
 			const clock = new THREE.Clock();
 			const renderer = new THREE.WebGLRenderer();
 
-			const sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 1 );
+			const sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 3 );
 			let useDirectionalLight = true;
 			let arrowHelper1, arrowHelper2, arrowHelper3;
 			const arrowDirection = new THREE.Vector3();
@@ -71,6 +71,7 @@
 
 				scene.background = new THREE.Color( 0x0096ff );
 
+				renderer.useLegacyLights = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				document.getElementById( 'container' ).appendChild( renderer.domElement );