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

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

* Examples: Update screenshots.

* Examples: Update screenshots.

* Examples: Update screenshots.

examples/webgl_effects_anaglyph.html

@@ -91,6 +91,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				const width = window.innerWidth || 2;

examples/webgl_effects_parallaxbarrier.html

@@ -92,6 +92,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				const width = window.innerWidth || 2;

examples/webgl_effects_peppersghost.html

@@ -97,6 +97,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				effect = new PeppersGhostEffect( renderer );

examples/webgl_effects_stereo.html

@@ -84,6 +84,7 @@
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				effect = new StereoEffect( renderer );

examples/webgl_geometry_dynamic.html

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

examples/webgl_geometry_teapot.html

@@ -67,15 +67,16 @@
 				camera.position.set( - 600, 550, 1300 );
 
 				// LIGHTS
-				ambientLight = new THREE.AmbientLight( 0x7c7c7c );
+				ambientLight = new THREE.AmbientLight( 0x7c7c7c, 3.0 );
 
-				light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
+				light = new THREE.DirectionalLight( 0xFFFFFF, 3.0 );
 				light.position.set( 0.32, 0.39, 0.7 );
 
 				// RENDERER
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( canvasWidth, canvasHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				// EVENTS

examples/webgl_helpers.html

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

examples/webgl_instancing_dynamic.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_instancing_performance.html

@@ -259,7 +259,7 @@
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( width, height );
-
+			renderer.useLegacyLights = false;
 			container = document.getElementById( 'container' );
 			container.appendChild( renderer.domElement );
 

examples/webgl_instancing_raycast.html

@@ -51,7 +51,7 @@
 
 				scene = new THREE.Scene();
 
-				const light = new THREE.HemisphereLight( 0xffffff, 0x888888 );
+				const light = new THREE.HemisphereLight( 0xffffff, 0x888888, 3 );
 				light.position.set( 0, 1, 0 );
 				scene.add( light );
 
@@ -94,6 +94,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 );
 
 				controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_interactive_buffergeometry.html

@@ -56,13 +56,13 @@
 
 				//
 
-				scene.add( new THREE.AmbientLight( 0x444444 ) );
+				scene.add( new THREE.AmbientLight( 0x444444, 3 ) );
 
-				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 );
 
@@ -200,9 +200,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 );
 
 				//

examples/webgl_interactive_cubes.html

@@ -40,41 +40,38 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			let container, stats;
+			let stats;
 			let camera, scene, raycaster, renderer;
 
 			let INTERSECTED;
 			let theta = 0;
 
 			const pointer = new THREE.Vector2();
-			const radius = 100;
+			const radius = 5;
 
 			init();
 			animate();
 
 			function init() {
 
-				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 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				const geometry = new THREE.BoxGeometry( 20, 20, 20 );
+				const geometry = new THREE.BoxGeometry();
 
 				for ( let i = 0; i < 2000; i ++ ) {
 
 					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
-					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;
@@ -90,13 +87,14 @@
 
 				raycaster = new THREE.Raycaster();
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				renderer.useLegacyLights = false;
+				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				document.addEventListener( 'mousemove', onPointerMove );
 

examples/webgl_interactive_cubes_ortho.html

@@ -40,43 +40,40 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			let container, stats;
+			let stats;
 			let camera, scene, raycaster, renderer;
 
 			let theta = 0;
 			let INTERSECTED;
 
 			const pointer = new THREE.Vector2();
-			const radius = 500;
-			const frustumSize = 1000;
+			const radius = 25;
+			const frustumSize = 50;
 
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				const aspect = window.innerWidth / window.innerHeight;
-				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
+				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0.1, 100 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				const light = new THREE.DirectionalLight( 0xffffff, 1 );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				const geometry = new THREE.BoxGeometry( 20, 20, 20 );
+				const geometry = new THREE.BoxGeometry();
 
 				for ( let i = 0; i < 2000; i ++ ) {
 
 					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
-					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;
@@ -92,13 +89,14 @@
 
 				raycaster = new THREE.Raycaster();
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				renderer.useLegacyLights = false;
+				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				document.addEventListener( 'pointermove', onPointerMove );
 

examples/webgl_interactive_lines.html

@@ -144,6 +144,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_interactive_points.html

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

examples/webgl_interactive_raycasting_points.html

@@ -207,6 +207,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_interactive_voxelpainter.html

@@ -94,16 +94,17 @@
 
 				// lights
 
-				const ambientLight = new THREE.AmbientLight( 0x606060 );
+				const ambientLight = new THREE.AmbientLight( 0x606060, 3 );
 				scene.add( ambientLight );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				directionalLight.position.set( 1, 0.75, 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;
 				document.body.appendChild( renderer.domElement );
 
 				document.addEventListener( 'pointermove', onPointerMove );

examples/webgl_lightprobe.html

@@ -44,7 +44,7 @@
 			// linear color space
 			const API = {
 				lightProbeIntensity: 1.0,
-				directionalLightIntensity: 0.2,
+				directionalLightIntensity: 0.6,
 				envMapIntensity: 1
 			};
 
@@ -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 );
 
 				// tone mapping

examples/webgl_lightprobe_cubecamera.html

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

examples/webgl_lines_colors.html

@@ -52,6 +52,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_lines_dashed.html

@@ -9,7 +9,6 @@
 
 	<body>
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - dashed lines example</div>
-		<div id="container"></div>
 
 		<!-- Import maps polyfill -->
 		<!-- Remove this when import maps will be widely supported -->
@@ -75,12 +74,11 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
-
-				const container = document.getElementById( 'container' );
-				container.appendChild( renderer.domElement );
+				renderer.useLegacyLights = false;
+				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				//
 

examples/webgl_lines_fat.html

@@ -59,6 +59,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();

examples/webgl_lines_fat_raycasting.html

@@ -107,6 +107,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();

examples/webgl_lines_fat_wireframe.html

@@ -57,6 +57,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();

examples/webgl_loader_bvh.html

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

examples/webgl_loader_fbx.html

@@ -56,11 +56,11 @@
 				scene.background = new THREE.Color( 0xa0a0a0 );
 				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 1.5 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 5 );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 5 );
 				dirLight.position.set( 0, 200, 100 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 180;
@@ -109,6 +109,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_loader_fbx_nurbs.html

@@ -49,14 +49,6 @@
 
 				scene = new THREE.Scene();
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
-				hemiLight.position.set( 0, 1, 0 );
-				scene.add( hemiLight );
-
-				const dirLight = new THREE.DirectionalLight( 0xffffff );
-				dirLight.position.set( 0, 1, 0 );
-				scene.add( dirLight );
-
 				// grid
 				const gridHelper = new THREE.GridHelper( 28, 28, 0x303030, 0x303030 );
 				scene.add( gridHelper );
@@ -76,6 +68,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_loader_gcode.html

@@ -39,9 +39,6 @@
 
 			function init() {
 
-				const container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 70 );
 
@@ -57,10 +54,11 @@
 
 				} );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				renderer.useLegacyLights = false;
+				document.body.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render ); // use if there is no animation loop

examples/webgl_loader_ifc.html

@@ -63,15 +63,15 @@
 				scene.add( cube );
 
 				//Lights
-				const directionalLight1 = new THREE.DirectionalLight( 0xffeeff, 0.8 );
+				const directionalLight1 = new THREE.DirectionalLight( 0xffeeff, 2.5 );
 				directionalLight1.position.set( 1, 1, 1 );
 				scene.add( directionalLight1 );
 
-				const directionalLight2 = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				const directionalLight2 = new THREE.DirectionalLight( 0xffffff, 2.5 );
 				directionalLight2.position.set( - 1, 0.5, - 1 );
 				scene.add( directionalLight2 );
 
-				const ambientLight = new THREE.AmbientLight( 0xffffee, 0.25 );
+				const ambientLight = new THREE.AmbientLight( 0xffffee, 0.75 );
 				scene.add( ambientLight );
 
 				//Setup IFC Loader
@@ -97,6 +97,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				//Controls

examples/webgl_loader_imagebitmap.html

@@ -77,7 +77,7 @@
 
 			}
 
-			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
+			const geometry = new THREE.BoxGeometry();
 
 			function addCube( material ) {
 
@@ -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 );
 
 				// TESTS

examples/webgl_loader_kmz.html

@@ -41,7 +41,7 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x999999 );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 0.5, 1.0, 0.5 ).normalize();
 
 				scene.add( light );
@@ -59,6 +59,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 KMZLoader();

examples/webgl_loader_mdd.html

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

examples/webgl_loader_mmd.html

@@ -86,10 +86,10 @@
 				gridHelper.position.y = - 10;
 				scene.add( gridHelper );
 
-				const ambient = new THREE.AmbientLight( 0xaaaaaa, 1 );
+				const ambient = new THREE.AmbientLight( 0xaaaaaa, 3 );
 				scene.add( ambient );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
@@ -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 );
 
 				effect = new OutlineEffect( renderer );

examples/webgl_loader_mmd_audio.html

@@ -93,10 +93,10 @@
 				camera.add( listener );
 				scene.add( camera );
 
-				const ambient = new THREE.AmbientLight( 0xaaaaaa, 1 );
+				const ambient = new THREE.AmbientLight( 0xaaaaaa, 3 );
 				scene.add( ambient );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
@@ -105,6 +105,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				effect = new OutlineEffect( renderer );

examples/webgl_loader_mmd_pose.html

@@ -77,10 +77,10 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				const ambient = new THREE.AmbientLight( 0xaaaaaa, 1 );
+				const ambient = new THREE.AmbientLight( 0xaaaaaa, 3 );
 				scene.add( ambient );
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 3 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
@@ -89,6 +89,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				effect = new OutlineEffect( renderer );

examples/webgl_loader_nrrd.html

@@ -38,8 +38,7 @@
 			import { NRRDLoader } from 'three/addons/loaders/NRRDLoader.js';
 			import { VTKLoader } from 'three/addons/loaders/VTKLoader.js';
 
-			let container,
-				stats,
+			let stats,
 				camera,
 				controls,
 				scene,
@@ -59,10 +58,10 @@
 
 				// light
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 3 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				dirLight.position.set( 200, 200, 200 );
 				scene.add( dirLight );
 
@@ -152,13 +151,11 @@
 				} );
 				// renderer
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-				container.appendChild( renderer.domElement );
+				renderer.useLegacyLights = false;
+				document.body.appendChild( renderer.domElement );
 
 				controls = new TrackballControls( camera, renderer.domElement );
 				controls.minDistance = 100;
@@ -168,7 +165,7 @@
 				controls.panSpeed = 2;
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				const gui = new GUI();
 

examples/webgl_loader_obj.html

@@ -30,38 +30,28 @@
 			import * as THREE from 'three';
 
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
-
-			let container;
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer;
 
-			let mouseX = 0, mouseY = 0;
-
-			let windowHalfX = window.innerWidth / 2;
-			let windowHalfY = window.innerHeight / 2;
-
 			let object;
 
 			init();
-			animate();
 
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.z = 250;
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
+				camera.position.z = 2.5;
 
 				// scene
 
 				scene = new THREE.Scene();
 
-				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, 15 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -75,9 +65,12 @@
 
 					} );
 
-					object.position.y = - 95;
+					object.position.y = - 0.95;
+					object.scale.setScalar( 0.01 );
 					scene.add( object );
 
+					render();
+
 				}
 
 				const manager = new THREE.LoadingManager( loadModel );
@@ -85,7 +78,7 @@
 				// texture
 
 				const textureLoader = new THREE.TextureLoader( manager );
-				const texture = textureLoader.load( 'textures/uv_grid_opengl.jpg' );
+				const texture = textureLoader.load( 'textures/uv_grid_opengl.jpg', render );
 				texture.colorSpace = THREE.SRGBColorSpace;
 
 				// model
@@ -112,12 +105,18 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				renderer.useLegacyLights = false;
+				document.body.appendChild( renderer.domElement );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
+				//
+
+				const controls = new  OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 2;
+				controls.maxDistance = 7.5;
+				controls.addEventListener( 'change', render );
 
 				//
 
@@ -127,9 +126,6 @@
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -137,29 +133,8 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
-
-				mouseX = ( event.clientX - windowHalfX ) / 2;
-				mouseY = ( event.clientY - windowHalfY ) / 2;
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
 			function render() {
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
-				camera.lookAt( scene.position );
-
 				renderer.render( scene, camera );
 
 			}

examples/webgl_loader_obj_mtl.html

@@ -31,35 +31,27 @@
 
 			import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer;
 
-			let mouseX = 0, mouseY = 0;
-
-			let windowHalfX = window.innerWidth / 2;
-			let windowHalfY = window.innerHeight / 2;
-
-
 			init();
 			animate();
 
 
 			function init() {
 
-				const container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.z = 250;
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
+				camera.position.z = 2.5;
 
 				// scene
 
 				scene = new THREE.Scene();
 
-				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, 15 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -87,7 +79,8 @@
 							.setPath( 'models/obj/male02/' )
 							.load( 'male02.obj', function ( object ) {
 
-								object.position.y = - 95;
+								object.position.y = - 0.95;
+								object.scale.setScalar( 0.01 );
 								scene.add( object );
 
 							}, onProgress );
@@ -96,12 +89,17 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				renderer.useLegacyLights = false;
+				document.body.appendChild( renderer.domElement );
+
+				//
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
+				const controls = new  OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 2;
+				controls.maxDistance = 7.5;
 
 				//
 
@@ -111,9 +109,6 @@
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -121,33 +116,16 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
-
-				mouseX = ( event.clientX - windowHalfX ) / 2;
-				mouseY = ( event.clientY - windowHalfY ) / 2;
-
-			}
-
 			//
 
 			function animate() {
 
 				requestAnimationFrame( animate );
-				render();
-
-			}
-
-			function render() {
-
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
-				camera.lookAt( scene.position );
-
 				renderer.render( scene, camera );
-
+			
 			}
 
+
 		</script>
 
 	</body>

examples/webgl_loader_pcd.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 );
 
 				scene = new THREE.Scene();

examples/webgl_loader_pdb.html

@@ -83,11 +83,11 @@
 				camera.position.z = 1000;
 				scene.add( camera );
 
-				const light1 = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				const light1 = new THREE.DirectionalLight( 0xffffff, 2.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				const light2 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light2.position.set( - 1, - 1, 1 );
 				scene.add( light2 );
 
@@ -99,6 +99,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.getElementById( 'container' ).appendChild( renderer.domElement );
 
 				labelRenderer = new CSS2DRenderer();

examples/webgl_loader_ply.html

@@ -112,16 +112,17 @@
 
 				// Lights
 
-				scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966 ) );
+				scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966, 3 ) );
 
-				addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
-				addShadowedLight( 0.5, 1, - 1, 0xffd500, 1 );
+				addShadowedLight( 1, 1, 1, 0xffffff, 3.5 );
+				addShadowedLight( 0.5, 1, - 1, 0xffd500, 3 );
 
 				// renderer
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 
 				renderer.shadowMap.enabled = true;
 

examples/webgl_loader_stl.html

@@ -149,15 +149,16 @@
 
 				// Lights
 
-				scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966 ) );
+				scene.add( new THREE.HemisphereLight( 0x8d7c7c, 0x494966, 3 ) );
 
-				addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
-				addShadowedLight( 0.5, 1, - 1, 0xffd500, 1 );
+				addShadowedLight( 1, 1, 1, 0xffffff, 3.5 );
+				addShadowedLight( 0.5, 1, - 1, 0xffd500, 3 );
 				// renderer
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 
 				renderer.shadowMap.enabled = true;
 

examples/webgl_loader_svg.html

@@ -59,6 +59,7 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -166,7 +167,7 @@
 					group.position.x = - 70;
 					group.position.y = 70;
 					group.scale.y *= - 1;
-					
+			
 					let renderOrder = 0;
 
 					for ( const path of data.paths ) {

examples/webgl_loader_tilt.html

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

examples/webgl_loader_usdz.html

@@ -55,17 +55,18 @@
 
 				scene.add( new THREE.GridHelper( 2, 4, 0xc1c1c1, 0x8d8d8d ) );
 
-				const light = new THREE.DirectionalLight( 0xffffff );
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				const light2 = new THREE.HemisphereLight( 0xffffff, 0xc1c1c1 );
+				const light2 = new THREE.HemisphereLight( 0xffffff, 0xc1c1c1, 3 );
 				scene.add( light2 );
 
 				// renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
 				document.body.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );

examples/webgl_loader_vox.html

@@ -47,14 +47,14 @@
 
 				// light
 
-				const hemiLight = new THREE.HemisphereLight( 0xcccccc, 0x444444, 1 );
+				const hemiLight = new THREE.HemisphereLight( 0xcccccc, 0x444444, 3 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.75 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
 				dirLight.position.set( 1.5, 3, 2.5 );
 				scene.add( dirLight );
 
-				const dirLight2 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const dirLight2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				dirLight2.position.set( - 1.5, - 3, - 2.5 );
 				scene.add( dirLight2 );
 
@@ -77,9 +77,10 @@
 
 				// renderer
 
-				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 );
 
 				// controls

examples/webgl_loader_vtk.html

@@ -36,7 +36,7 @@
 			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
 			import { VTKLoader } from 'three/addons/loaders/VTKLoader.js';
 
-			let container, stats;
+			let stats;
 
 			let camera, controls, scene, renderer;
 
@@ -45,7 +45,7 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.z = 0.2;
 
 				scene = new THREE.Scene();
@@ -54,10 +54,10 @@
 
 				// light
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 3 );
 				scene.add( hemiLight );
 
-				const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				const dirLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				dirLight.position.set( 2, 2, 2 );
 				scene.add( dirLight );
 
@@ -128,13 +128,11 @@
 
 				// renderer
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-				container.appendChild( renderer.domElement );
+				renderer.useLegacyLights = false;
+				document.body.appendChild( renderer.domElement );
 
 				// controls
 
@@ -144,7 +142,7 @@
 				controls.rotateSpeed = 5.0;
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				//
 

examples/webgl_loader_xyz.html

@@ -66,9 +66,10 @@
 
 				//
 
-				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 );
 
 				//

examples/webgl_materials_wireframe.html

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

examples/webgl_math_obb.html

@@ -62,7 +62,7 @@
 
 				raycaster = new THREE.Raycaster();
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x222222, 1.5 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x222222, 4 );
 				hemiLight.position.set( 1, 1, 1 );
 				scene.add( hemiLight );
 
@@ -110,6 +110,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 );
 
 				//