Skip to content

Commit

Permalink
Add envmap options to webgl_materials_standard example
Browse files Browse the repository at this point in the history
This triggers initMaterial calls that switch the environment map without changing the shader program.
  • Loading branch information
Oletus committed Jan 10, 2021
1 parent fbeb3de commit 5dc65cc
Showing 1 changed file with 39 additions and 3 deletions.
42 changes: 39 additions & 3 deletions examples/webgl_materials_standard.html
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();

Expand Down

0 comments on commit 5dc65cc

Please sign in to comment.