Examples: Improved webgl_animation_keyframes. (#32685)

examples/webgl_animation_keyframes.html

@@ -7,7 +7,7 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 			body {
-				background-color: #bfe3dd;
+				background-color: #e2e0e0;
 				color: #000;
 			}
 
@@ -43,7 +43,7 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+			import { Sky } from 'three/addons/objects/Sky.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
@@ -59,22 +59,34 @@
 			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
+			renderer.toneMapping = THREE.ACESFilmicToneMapping;
 			container.appendChild( renderer.domElement );
 
-			const pmremGenerator = new THREE.PMREMGenerator( renderer );
-
 			const scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0xbfe3dd );
-			scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
+
+			// Sky
+
+			const sky = new Sky();
+
+			const uniforms = sky.material.uniforms;
+			uniforms[ 'turbidity' ].value = 0;
+			uniforms[ 'rayleigh' ].value = 3;
+			uniforms[ 'mieDirectionalG' ].value = 0.7;
+			uniforms[ 'cloudElevation' ].value = 1;
+			uniforms[ 'sunPosition' ].value.set( - 0.8, 0.19, 0.56 ); // elevation: 11, azimuth: -55
+
+			const pmremGenerator = new THREE.PMREMGenerator( renderer );
+			const environment = pmremGenerator.fromScene( sky ).texture;
+			scene.background = environment;
+			scene.environment = environment;
 
 			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 			camera.position.set( 5, 2, 8 );
 
 			const controls = new OrbitControls( camera, renderer.domElement );
-			controls.target.set( 0, 0.5, 0 );
-			controls.update();
-			controls.enablePan = false;
 			controls.enableDamping = true;
+			controls.target.set( 0, 0.7, 0 );
+			controls.update();
 
 			const dracoLoader = new DRACOLoader();
 			dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
@@ -99,7 +111,6 @@
 
 			} );
 
-
 			window.onresize = function () {
 
 				camera.aspect = window.innerWidth / window.innerHeight;
@@ -109,7 +120,6 @@
 
 			};
 
-
 			function animate() {
 
 				const delta = clock.getDelta();