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

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

* Examples: Update screenshots.

examples/misc_controls_arcball.html

@@ -101,7 +101,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
+				renderer.useLegacyLights = false;
 				renderer.toneMapping = THREE.ReinhardToneMapping;
 				renderer.toneMappingExposure = 3;
 				renderer.domElement.style.background = 'linear-gradient( 180deg, rgba( 0,0,0,1 ) 0%, rgba( 128,128,255,1 ) 100% )';
@@ -110,7 +110,6 @@
 				//
 
 				scene = new THREE.Scene();
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x222233, 4 ) );
 
 				camera = makePerspectiveCamera();
 				camera.position.set( 0, 0, perspectiveDistance );

examples/misc_controls_fly.html

@@ -87,7 +87,7 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );
 
-				dirLight = new THREE.DirectionalLight( 0xffffff );
+				dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( - 1, 0, 1 ).normalize();
 				scene.add( dirLight );
 
@@ -205,6 +205,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				//

examples/misc_controls_map.html

@@ -58,10 +58,11 @@
 				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 = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 400, 200, 0 );
+				camera.position.set( 0, 200, - 400 );
 
 				// controls
 
@@ -81,7 +82,7 @@
 
 				// world
 
-				const geometry = new THREE.BoxGeometry( 1, 1, 1 );
+				const geometry = new THREE.BoxGeometry();
 				geometry.translate( 0, 0.5, 0 );
 				const material = new THREE.MeshPhongMaterial( { color: 0xeeeeee, flatShading: true } );
 
@@ -102,15 +103,15 @@
 
 				// lights
 
-				const dirLight1 = new THREE.DirectionalLight( 0xffffff );
+				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight1.position.set( 1, 1, 1 );
 				scene.add( dirLight1 );
 
-				const dirLight2 = new THREE.DirectionalLight( 0x002288 );
+				const dirLight2 = new THREE.DirectionalLight( 0x002288, 3 );
 				dirLight2.position.set( - 1, - 1, - 1 );
 				scene.add( dirLight2 );
 
-				const ambientLight = new THREE.AmbientLight( 0x222222 );
+				const ambientLight = new THREE.AmbientLight( 0x555555 );
 				scene.add( ambientLight );
 
 				//

examples/misc_controls_orbit.html

@@ -56,6 +56,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 = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -80,7 +81,7 @@
 
 				// world
 
-				const geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
+				const geometry = new THREE.ConeGeometry( 10, 30, 4, 1 );
 				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				for ( let i = 0; i < 500; i ++ ) {
@@ -97,15 +98,15 @@
 
 				// lights
 
-				const dirLight1 = new THREE.DirectionalLight( 0xffffff );
+				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight1.position.set( 1, 1, 1 );
 				scene.add( dirLight1 );
 
-				const dirLight2 = new THREE.DirectionalLight( 0x002288 );
+				const dirLight2 = new THREE.DirectionalLight( 0x002288, 3 );
 				dirLight2.position.set( - 1, - 1, - 1 );
 				scene.add( dirLight2 );
 
-				const ambientLight = new THREE.AmbientLight( 0x222222 );
+				const ambientLight = new THREE.AmbientLight( 0x555555 );
 				scene.add( ambientLight );
 
 				//

examples/misc_controls_pointerlock.html

@@ -91,7 +91,7 @@
 				scene.background = new THREE.Color( 0xffffff );
 				scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
 
-				const light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
+				const light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 2.5 );
 				light.position.set( 0.5, 1, 0.75 );
 				scene.add( light );
 
@@ -264,6 +264,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_controls_trackball.html

@@ -71,7 +71,7 @@
 				scene.background = new THREE.Color( 0xcccccc );
 				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
-				const geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
+				const geometry = new THREE.ConeGeometry( 10, 30, 4, 1 );
 				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				for ( let i = 0; i < 500; i ++ ) {
@@ -88,15 +88,15 @@
 
 				// lights
 
-				const dirLight1 = new THREE.DirectionalLight( 0xffffff );
+				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight1.position.set( 1, 1, 1 );
 				scene.add( dirLight1 );
 
-				const dirLight2 = new THREE.DirectionalLight( 0x002288 );
+				const dirLight2 = new THREE.DirectionalLight( 0x002288, 3 );
 				dirLight2.position.set( - 1, - 1, - 1 );
 				scene.add( dirLight2 );
 
-				const ambientLight = new THREE.AmbientLight( 0x222222 );
+				const ambientLight = new THREE.AmbientLight( 0x555555 );
 				scene.add( ambientLight );
 
 				// renderer
@@ -104,6 +104,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/misc_controls_transform.html

@@ -44,9 +44,10 @@
 
 			function init() {
 
-				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 );
 
 				const aspect = window.innerWidth / window.innerHeight;
@@ -55,13 +56,15 @@
 				cameraOrtho = new THREE.OrthographicCamera( - 600 * aspect, 600 * aspect, 600, - 600, 0.01, 30000 );
 				currentCamera = cameraPersp;
 
-				currentCamera.position.set( 1000, 500, 1000 );
-				currentCamera.lookAt( 0, 200, 0 );
+				currentCamera.position.set( 5, 2.5, 5 );
 
 				scene = new THREE.Scene();
-				scene.add( new THREE.GridHelper( 1000, 10, 0x888888, 0x444444 ) );
+				scene.add( new THREE.GridHelper( 5, 10, 0x888888, 0x444444 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 2 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff );
+				scene.add( ambientLight );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 4 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
@@ -69,8 +72,8 @@
 				texture.colorSpace = THREE.SRGBColorSpace;
 				texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
-				const geometry = new THREE.BoxGeometry( 200, 200, 200 );
-				const material = new THREE.MeshLambertMaterial( { map: texture, transparent: true } );
+				const geometry = new THREE.BoxGeometry();
+				const material = new THREE.MeshLambertMaterial( { map: texture } );
 
 				orbit = new OrbitControls( currentCamera, renderer.domElement );
 				orbit.update();

examples/misc_exporter_draco.html

@@ -45,54 +45,49 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 200, 100, 200 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 4, 2, 4 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
-				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
+				scene.fog = new THREE.Fog( 0xa0a0a0, 4, 20 );
 
 				exporter = new DRACOExporter();
 
 				//
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
-				hemiLight.position.set( 0, 200, 0 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 3 );
+				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
-				directionalLight.position.set( 0, 200, 100 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
+				directionalLight.position.set( 0, 20, 10 );
 				directionalLight.castShadow = true;
-				directionalLight.shadow.camera.top = 180;
-				directionalLight.shadow.camera.bottom = - 100;
-				directionalLight.shadow.camera.left = - 120;
-				directionalLight.shadow.camera.right = 120;
+				directionalLight.shadow.camera.top = 2;
+				directionalLight.shadow.camera.bottom = - 2;
+				directionalLight.shadow.camera.left = - 2;
+				directionalLight.shadow.camera.right = 2;
 				scene.add( directionalLight );
 
 				// ground
 
-				const ground = new THREE.Mesh(
-					new THREE.PlaneGeometry( 2000, 2000 ),
-					new THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } )
-				);
+				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 40, 40 ), new THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
-				ground.position.y = - 75;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 40, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
-				grid.position.y = - 75;
 				scene.add( grid );
 
 				// export mesh
 
-				const geometry = new THREE.TorusKnotGeometry( 50, 15, 200, 30 );
+				const geometry = new THREE.TorusKnotGeometry( 0.75, 0.2, 200, 30 );
 				const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
-				mesh.position.y = 25;
+				mesh.position.y = 1.5;
 				scene.add( mesh );
 
 				//
@@ -100,13 +95,14 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
 				//
 
 				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 25, 0 );
+				controls.target.set( 0, 1.5, 0 );
 				controls.update();
 
 				//

examples/misc_exporter_gltf.html

@@ -164,14 +164,14 @@
 				// ---------------------------------------------------------------------
 				// Ambient light
 				// ---------------------------------------------------------------------
-				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
+				const ambientLight = new THREE.AmbientLight( 0xcccccc );
 				ambientLight.name = 'AmbientLight';
 				scene1.add( ambientLight );
 
 				// ---------------------------------------------------------------------
 				// DirectLight
 				// ---------------------------------------------------------------------
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.target.position.set( 0, 0, - 1 );
 				dirLight.add( dirLight.target );
 				dirLight.lookAt( - 1, - 1, 0 );
@@ -199,6 +199,7 @@
 				// Icosahedron
 				const mapGrid = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 				mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;
+				mapGrid.colorSpace = THREE.SRGBColorSpace;
 				material = new THREE.MeshBasicMaterial( {
 					color: 0xffffff,
 					map: mapGrid
@@ -445,6 +446,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.toneMappingExposure = 1;
 

examples/misc_exporter_obj.html

@@ -52,6 +52,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -59,10 +60,10 @@
 
 				scene = new THREE.Scene();
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambientLight );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
 				directionalLight.position.set( 0, 1, 1 );
 				scene.add( directionalLight );
 

examples/misc_exporter_ply.html

@@ -45,45 +45,45 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 200, 100, 200 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 4, 2, 4 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
-				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
+				scene.fog = new THREE.Fog( 0xa0a0a0, 4, 20 );
 
 				exporter = new PLYExporter();
 
 				//
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
-				hemiLight.position.set( 0, 200, 0 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 3 );
+				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.set( 0, 200, 100 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
+				directionalLight.position.set( 0, 20, 10 );
 				directionalLight.castShadow = true;
-				directionalLight.shadow.camera.top = 180;
-				directionalLight.shadow.camera.bottom = - 100;
-				directionalLight.shadow.camera.left = - 120;
-				directionalLight.shadow.camera.right = 120;
+				directionalLight.shadow.camera.top = 2;
+				directionalLight.shadow.camera.bottom = - 2;
+				directionalLight.shadow.camera.left = - 2;
+				directionalLight.shadow.camera.right = 2;
 				scene.add( directionalLight );
 
 				// ground
 
-				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xcbcbcb, depthWrite: false } ) );
+				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 40, 40 ), new THREE.MeshPhongMaterial( { color: 0xcbcbcb, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 40, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				scene.add( grid );
 
 				// export mesh
 
-				const geometry = new THREE.BoxGeometry( 50, 50, 50 );
+				const geometry = new THREE.BoxGeometry();
 				const material = new THREE.MeshPhongMaterial( { vertexColors: true } );
 
 				// color vertices based on vertex positions
@@ -99,7 +99,7 @@
 
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
-				mesh.position.y = 25;
+				mesh.position.y = 0.5;
 				scene.add( mesh );
 
 				//
@@ -107,13 +107,14 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
 				//
 
 				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 25, 0 );
+				controls.target.set( 0, 0.5, 0 );
 				controls.update();
 
 				//

examples/misc_exporter_stl.html

@@ -44,50 +44,50 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.set( 200, 100, 200 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 4, 2, 4 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
-				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
+				scene.fog = new THREE.Fog( 0xa0a0a0, 4, 20 );
 
 				exporter = new STLExporter();
 
 				//
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
-				hemiLight.position.set( 0, 200, 0 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 3 );
+				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff );
-				directionalLight.position.set( 0, 200, 100 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
+				directionalLight.position.set( 0, 20, 10 );
 				directionalLight.castShadow = true;
-				directionalLight.shadow.camera.top = 180;
-				directionalLight.shadow.camera.bottom = - 100;
-				directionalLight.shadow.camera.left = - 120;
-				directionalLight.shadow.camera.right = 120;
+				directionalLight.shadow.camera.top = 2;
+				directionalLight.shadow.camera.bottom = - 2;
+				directionalLight.shadow.camera.left = - 2;
+				directionalLight.shadow.camera.right = 2;
 				scene.add( directionalLight );
 
 				// ground
 
-				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } ) );
+				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 40, 40 ), new THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				const grid = new THREE.GridHelper( 40, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				scene.add( grid );
 
 				// export mesh
 
-				const geometry = new THREE.BoxGeometry( 50, 50, 50 );
+				const geometry = new THREE.BoxGeometry();
 				const material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
 
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
-				mesh.position.y = 25;
+				mesh.position.y = 0.5;
 				scene.add( mesh );
 
 				//
@@ -95,13 +95,14 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 
 				//
 
 				const controls = new OrbitControls( camera, renderer.domElement );
-				controls.target.set( 0, 25, 0 );
+				controls.target.set( 0, 0.5, 0 );
 				controls.update();
 
 				//

examples/misc_lookat.html

@@ -83,6 +83,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/physics_ammo_break.html

@@ -120,9 +120,10 @@
 
 			camera.position.set( - 14, 8, 16 );
 
-			renderer = new THREE.WebGLRenderer();
+			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 );
 
@@ -132,10 +133,10 @@
 
 			textureLoader = new THREE.TextureLoader();
 
-			const ambientLight = new THREE.AmbientLight( 0x707070 );
+			const ambientLight = new THREE.AmbientLight( 0xbbbbbb );
 			scene.add( ambientLight );
 
-			const light = new THREE.DirectionalLight( 0xffffff, 1 );
+			const light = new THREE.DirectionalLight( 0xffffff, 3 );
 			light.position.set( - 10, 18, 5 );
 			light.castShadow = true;
 			const d = 14;

examples/physics_ammo_cloth.html

@@ -87,9 +87,10 @@
 
 				camera.position.set( - 12, 7, 4 );
 
-				renderer = new THREE.WebGLRenderer();
+				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 );
 
@@ -99,10 +100,10 @@
 
 				textureLoader = new THREE.TextureLoader();
 
-				const ambientLight = new THREE.AmbientLight( 0x404040 );
+				const ambientLight = new THREE.AmbientLight( 0xbbbbbb );
 				scene.add( ambientLight );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( - 7, 10, 15 );
 				light.castShadow = true;
 				const d = 10;

examples/physics_ammo_instancing.html

@@ -56,10 +56,9 @@
 				scene.background = new THREE.Color( 0x666666 );
 
 				const hemiLight = new THREE.HemisphereLight();
-				hemiLight.intensity = 0.3;
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight();
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( 5, 5, 5 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.zoom = 2;
@@ -124,6 +123,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 

examples/physics_ammo_rope.html

@@ -90,9 +90,10 @@
 
 			camera.position.set( - 7, 5, 8 );
 
-			renderer = new THREE.WebGLRenderer();
+			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 );
 
@@ -102,10 +103,10 @@
 
 			textureLoader = new THREE.TextureLoader();
 
-			const ambientLight = new THREE.AmbientLight( 0x404040 );
+			const ambientLight = new THREE.AmbientLight( 0xbbbbbb );
 			scene.add( ambientLight );
 
-			const light = new THREE.DirectionalLight( 0xffffff, 1 );
+			const light = new THREE.DirectionalLight( 0xffffff, 3 );
 			light.position.set( - 10, 10, 5 );
 			light.castShadow = true;
 			const d = 10;

examples/physics_ammo_terrain.html

@@ -94,9 +94,10 @@
 
 				container = document.getElementById( 'container' );
 
-				renderer = new THREE.WebGLRenderer();
+				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 );
 
@@ -150,7 +151,10 @@
 
 				} );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const ambientLight = new THREE.AmbientLight( 0xbbbbbb );
+				scene.add( ambientLight );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 100, 100, 50 );
 				light.castShadow = true;
 				const dLight = 200;

examples/physics_ammo_volume.html

@@ -94,9 +94,10 @@
 
 				camera.position.set( - 7, 5, 8 );
 
-				renderer = new THREE.WebGLRenderer();
+				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 );
 
@@ -106,10 +107,10 @@
 
 				textureLoader = new THREE.TextureLoader();
 
-				const ambientLight = new THREE.AmbientLight( 0x404040 );
+				const ambientLight = new THREE.AmbientLight( 0xbbbbbb );
 				scene.add( ambientLight );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( - 10, 10, 5 );
 				light.castShadow = true;
 				const d = 20;

examples/physics_rapier_instancing.html

@@ -54,10 +54,9 @@
 				scene.background = new THREE.Color( 0x666666 );
 
 				const hemiLight = new THREE.HemisphereLight();
-				hemiLight.intensity = 0.3;
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight();
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				dirLight.position.set( 5, 5, 5 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.zoom = 2;
@@ -122,6 +121,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 

examples/webgl_camera_array.html

@@ -64,9 +64,9 @@
 
 				scene = new THREE.Scene();
 
-				scene.add( new THREE.AmbientLight( 0x222244 ) );
+				scene.add( new THREE.AmbientLight( 0x999999 ) );
 
-				const light = new THREE.DirectionalLight();
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0.5, 0.5, 1 );
 				light.castShadow = true;
 				light.shadow.camera.zoom = 4; // tighter shadow map
@@ -91,6 +91,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );
 

examples/webgl_camera_cinematic.html

@@ -62,9 +62,9 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
+				scene.add( new THREE.AmbientLight( 0xffffff ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 0.35 );
+				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
@@ -87,6 +87,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -159,6 +159,7 @@
 				const renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: logDepthBuf } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH / 2, SCREEN_HEIGHT );
+				renderer.useLegacyLights = false;
 				renderer.domElement.style.position = 'relative';
 				renderer.domElement.id = 'renderer_' + name;
 				framecontainer.appendChild( renderer.domElement );
@@ -171,9 +172,9 @@
 
 				const scene = new THREE.Scene();
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x777777 ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 100, 100, 100 );
 				scene.add( light );
 

examples/webgl_decals.html

@@ -97,6 +97,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();
@@ -111,13 +112,13 @@
 				controls.minDistance = 50;
 				controls.maxDistance = 200;
 
-				scene.add( new THREE.AmbientLight( 0x443333 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
-				const dirLight1 = new THREE.DirectionalLight( 0xffddcc, 1 );
+				const dirLight1 = new THREE.DirectionalLight( 0xffddcc, 3 );
 				dirLight1.position.set( 1, 0.75, 0.5 );
 				scene.add( dirLight1 );
 
-				const dirLight2 = new THREE.DirectionalLight( 0xccccff, 1 );
+				const dirLight2 = new THREE.DirectionalLight( 0xccccff, 3 );
 				dirLight2.position.set( - 1, 0.75, - 0.5 );
 				scene.add( dirLight2 );
 

examples/webgl_gpgpu_birds.html

@@ -455,6 +455,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				initComputeRenderer();

examples/webgl_gpgpu_birds_gltf.html

@@ -379,13 +379,13 @@
 
 				// LIGHTS
 
-				const hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 1.6 );
+				const hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 4.5 );
 				hemiLight.color.setHSL( 0.6, 1, 0.6, THREE.SRGBColorSpace );
 				hemiLight.groundColor.setHSL( 0.095, 1, 0.75, THREE.SRGBColorSpace );
 				hemiLight.position.set( 0, 50, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0x00CED1, 0.6 );
+				const dirLight = new THREE.DirectionalLight( 0x00CED1, 2.0 );
 				dirLight.color.setHSL( 0.1, 1, 0.95, THREE.SRGBColorSpace );
 				dirLight.position.set( - 1, 1.75, 1 );
 				dirLight.position.multiplyScalar( 30 );
@@ -394,6 +394,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				initComputeRenderer();

examples/webgl_gpgpu_protoplanet.html

@@ -283,6 +283,7 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_gpgpu_water.html

@@ -311,17 +311,18 @@
 
 				scene = new THREE.Scene();
 
-				const sun = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
+				const sun = new THREE.DirectionalLight( 0xFFFFFF, 3.0 );
 				sun.position.set( 300, 400, 175 );
 				scene.add( sun );
 
-				const sun2 = new THREE.DirectionalLight( 0x40A040, 0.6 );
+				const sun2 = new THREE.DirectionalLight( 0x40A040, 2.0 );
 				sun2.position.set( - 100, 350, - 200 );
 				scene.add( sun2 );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();

examples/webgl_loader_obj.html

@@ -48,7 +48,7 @@
 
 				scene = new THREE.Scene();
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc, 1.5 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambientLight );
 
 				const pointLight = new THREE.PointLight( 0xffffff, 15 );
@@ -115,7 +115,7 @@
 
 				const controls = new  OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 2;
-				controls.maxDistance = 7.5;
+				controls.maxDistance = 5;
 				controls.addEventListener( 'change', render );
 
 				//

examples/webgl_loader_obj_mtl.html

@@ -48,7 +48,7 @@
 
 				scene = new THREE.Scene();
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc, 1.5 );
+				const ambientLight = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambientLight );
 
 				const pointLight = new THREE.PointLight( 0xffffff, 15 );
@@ -99,7 +99,7 @@
 
 				const controls = new  OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 2;
-				controls.maxDistance = 7.5;
+				controls.maxDistance = 5;
 
 				//
 

examples/webgl_materials_lightmap.html

@@ -57,7 +57,7 @@
 
 				// LIGHTS
 
-				const light = new THREE.DirectionalLight( 0xd5deff, 0.3 );
+				const light = new THREE.DirectionalLight( 0xd5deff );
 				light.position.x = 300;
 				light.position.y = 250;
 				light.position.z = - 500;
@@ -84,6 +84,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( innerWidth, innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				// CONTROLS

examples/webgl_materials_matcap.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 );
 
 				// tone mapping

examples/webgl_materials_modified.html

@@ -67,6 +67,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_materials_normalmap.html

@@ -69,22 +69,22 @@
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.z = 1200;
+				camera.position.z = 12;
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x494949 );
 
 				// LIGHTS
 
-				ambientLight = new THREE.AmbientLight( 0x8d8d8d );
+				ambientLight = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambientLight );
 
-				pointLight = new THREE.PointLight( 0xffffff, 2, 1000 );
-				pointLight.position.set( 0, 0, 600 );
+				pointLight = new THREE.PointLight( 0xffffff, 30 );
+				pointLight.position.set( 0, 0, 6 );
 
 				scene.add( pointLight );
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff );
+				directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				directionalLight.position.set( 1, - 0.5, - 1 );
 				scene.add( directionalLight );
 
@@ -111,12 +111,20 @@
 				loader = new GLTFLoader();
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
-					createScene( gltf.scene.children[ 0 ].geometry, 100, material );
+					const geometry = gltf.scene.children[ 0 ].geometry;
+
+					mesh = new THREE.Mesh( geometry, material );
+
+					mesh.position.y = - 0.5;
+
+					scene.add( mesh );
+
 
 				} );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -160,17 +168,6 @@
 
 			}
 
-			function createScene( geometry, scale, material ) {
-
-				mesh = new THREE.Mesh( geometry, material );
-
-				mesh.position.y = - 50;
-				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
-
-				scene.add( mesh );
-
-			}
-
 			//
 
 			function onWindowResize() {

examples/webgl_materials_physical_clearcoat.html

@@ -178,10 +178,10 @@
 
 				particleLight.add( new THREE.PointLight( 0xffffff, 30 ) );
 
-				renderer = new THREE.WebGLRenderer();
-				renderer.useLegacyLights = false;
+				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_physical_transmission.html

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

examples/webgl_materials_physical_transmission_alpha.html

@@ -146,8 +146,8 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
-
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				renderer.shadowMap.enabled = true;
 				document.body.appendChild( renderer.domElement );