Examples: Update webgl_morphtargets_*, use physically-based lights (#25537)

* Examples: Update webgl_morphtargets_*, use physically-based lights.

* Update screenshot for webgl_morphtargets_sphere

* Bump sphere lighting

examples/webgl_morphtargets.html

@@ -34,6 +34,8 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, camera, scene, renderer, mesh;
 
 			init();
@@ -49,9 +51,9 @@
 				camera.position.z = 10;
 				scene.add( camera );
 
-				scene.add( new THREE.AmbientLight( 0x8FBCD4, 0.4 ) );
+				scene.add( new THREE.AmbientLight( 0x8FBCD4, 1.5 ) );
 
-				const pointLight = new THREE.PointLight( 0xffffff, 1 );
+				const pointLight = new THREE.PointLight( 0xffffff, 200 );
 				camera.add( pointLight );
 
 				const geometry = createGeometry();
@@ -69,6 +71,8 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.useLegacyLights = false;
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.setAnimationLoop( function () {
 
 					renderer.render( scene, camera );

examples/webgl_morphtargets_horse.html

@@ -43,6 +43,8 @@
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 			let camera, scene, renderer;
 			let mesh, mixer;
@@ -69,11 +71,11 @@
 
 				//
 
-				const light1 = new THREE.DirectionalLight( 0xefefff, 1.5 );
+				const light1 = new THREE.DirectionalLight( 0xefefff, 5 );
 				light1.position.set( 1, 1, 1 ).normalize();
 				scene.add( light1 );
 
-				const light2 = new THREE.DirectionalLight( 0xffefef, 1.5 );
+				const light2 = new THREE.DirectionalLight( 0xffefef, 5 );
 				light2.position.set( - 1, - 1, - 1 ).normalize();
 				scene.add( light2 );
 
@@ -97,6 +99,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.outputEncoding = THREE.sRGBEncoding;
+				renderer.useLegacyLights = false;
 
 				container.appendChild( renderer.domElement );
 

examples/webgl_morphtargets_sphere.html

@@ -33,6 +33,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer, clock;
 
 			let mesh;
@@ -54,11 +56,11 @@
 
 				clock = new THREE.Clock();
 
-				const light1 = new THREE.PointLight( 0xff2200, 0.7 );
+				const light1 = new THREE.PointLight( 0xff2200, 50000 );
 				light1.position.set( 100, 100, 100 );
 				scene.add( light1 );
 
-				const light2 = new THREE.PointLight( 0x22ff00, 0.7 );
+				const light2 = new THREE.PointLight( 0x22ff00, 10000 );
 				light2.position.set( - 100, - 100, - 100 );
 				scene.add( light2 );
 
@@ -92,6 +94,10 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				renderer.outputEncoding = THREE.sRGBEncoding;
+				renderer.useLegacyLights = false;
+
 				container.appendChild( renderer.domElement );
 
 				//