diff --git a/examples/webgl_materials_standard.html b/examples/webgl_materials_standard.html index 0d79678e9f496f..8672526b3f7d5e 100644 --- a/examples/webgl_materials_standard.html +++ b/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();