Merge pull request #21043 from Oletus/envmap-switch-example

Add envmap options to webgl_materials_standard example

examples/webgl_materials_standard.html

@@ -19,6 +19,7 @@
 
 			import Stats from './jsm/libs/stats.module.js';
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
@@ -101,20 +102,55 @@
 
 					} );
 
-				new RGBELoader()
+				const environments = {
+
+					'Venice Sunset': { filename: 'venice_sunset_1k.hdr' },
+					'Overpass': { filename: 'pedestrian_overpass_1k.hdr' }
+
+				};
+
+				function loadEnvironment(name) {
+
+					if ( environments[ name ].texture !== undefined ) {
+
+						scene.background = environments[ name ].texture;
+						scene.environment = environments[ name ].texture;
+						return;
+
+					}
+
+					const filename = environments[ name ].filename;
+					new RGBELoader()
 					.setDataType( THREE.UnsignedByteType )
 					.setPath( 'textures/equirectangular/' )
-					.load( 'venice_sunset_1k.hdr', function ( hdrEquirect ) {
+					.load( filename, function ( hdrEquirect ) {
 
 						const hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirect );
 						hdrEquirect.dispose();
-						pmremGenerator.dispose();
 
 						scene.background = hdrCubeRenderTarget.texture;
 						scene.environment = hdrCubeRenderTarget.texture;
+						environments[ name ].texture = hdrCubeRenderTarget.texture;
 
 					} );
 
+				}
+
+				const params = {
+
+					environment: Object.keys( environments )[ 0 ]
+
+				};
+				loadEnvironment( params.environment );
+
+				const gui = new GUI();
+				gui.add( params, 'environment', Object.keys( environments ) ).onChange( function( value ) {
+
+					loadEnvironment(value);
+
+				} );
+				gui.open();
+
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();