Examples: Use RoomEnvironment in webgl_animation_keyframes

examples/webgl_animation_keyframes.html

@@ -34,6 +34,8 @@
 			import Stats from './jsm/libs/stats.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';
+
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
@@ -51,8 +53,11 @@
 			renderer.outputEncoding = THREE.sRGBEncoding;
 			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;
 
 			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 			camera.position.set( 5, 2, 8 );
@@ -63,21 +68,6 @@
 			controls.enablePan = false;
 			controls.enableDamping = true;
 
-			scene.add( new THREE.HemisphereLight( 0xffffff, 0x000000, 0.4 ) );
-
-			const dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
-			dirLight.position.set( 5, 2, 8 );
-			scene.add( dirLight );
-
-			// envmap
-			const path = 'textures/cube/Park2/';
-			const format = '.jpg';
-			const envMap = new THREE.CubeTextureLoader().load( [
-				path + 'posx' + format, path + 'negx' + format,
-				path + 'posy' + format, path + 'negy' + format,
-				path + 'posz' + format, path + 'negz' + format
-			] );
-
 			const dracoLoader = new DRACOLoader();
 			dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 
@@ -88,12 +78,6 @@
 				const model = gltf.scene;
 				model.position.set( 1, 1, 0 );
 				model.scale.set( 0.01, 0.01, 0.01 );
-				model.traverse( function ( child ) {
-
-					if ( child.isMesh ) child.material.envMap = envMap;
-
-				} );
-
 				scene.add( model );
 
 				mixer = new THREE.AnimationMixer( model );