Examples: Simplified webgl_pmrem_test.

examples/webgl_pmrem_test.html

@@ -11,12 +11,10 @@
 		<div id="container">
 			<div id="info">
 				<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
-				PMREM directional light test <a href="https://github.com/elalish" target="_blank" rel="noopener">Emmett Lalish</a>
-				<br>Top row is white metal
-				<br>Middle row is white dielectric
-				<br>Bottom row is black dielectric.
-				<br>Mouse-out is a standard Directional Light.
-				<br>Mouse-over is a PMREM of the skybox: a single bright pixel representing the same directional light source.
+				PMREM test by <a href="https://github.com/elalish" target="_blank" rel="noopener">Emmett Lalish</a>
+				<br>
+				<br>1: white metal. 2: white dielectric. 3: black dielectric.
+				<br>PMREM on: HDR with a single bright pixel. PMREM off: DirectionalLight.
 				<br>The difference between these renders indicates the error in the PMREM approximations.
 			</div>
 		</div>
@@ -40,6 +38,8 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
+
 			let scene, camera, controls, renderer;
 
 			function init() {
@@ -99,40 +99,27 @@
 				// angle of the pixel in steradians. This image is 1024 x 512,
 				// so the value is 1 / ( sin( phi ) * ( pi / 512 ) ^ 2 ) = 27,490 nits.
 
-				document.body.addEventListener( 'mouseover', function () {
-
-					scene.traverse( function ( child ) {
-
-						if ( child.isMesh ) {
-
-							child.material.envMapIntensity = 1;
-							directionalLight.intensity = 0;
+				const gui = new GUI();
+				gui.add( { enabled: true }, 'enabled' )
+					.name( 'PMREM' )
+					.onChange( value => {
 
-						}
-
-					} );
+						directionalLight.intensity = value ? 0 : 1;
 
-					render();
+						scene.traverse( function ( child ) {
 
-				} );
+							if ( child.isMesh ) {
 
-				document.body.addEventListener( 'mouseout', function () {
+								child.material.envMapIntensity = 1 - directionalLight.intensity;
 
-					scene.traverse( function ( child ) {
-
-						if ( child.isMesh ) {
+							}
 
-							child.material.envMapIntensity = 0;
-							directionalLight.intensity = 1;
+						} );
 
-						}
+						render();
 
 					} );
 
-					render();
-
-				} );
-
 			}
 
 			function createObjects() {