Merge pull request #14728 from WestLangley/dev-example_cleanup_2

Unreal Bloom Example: cleanup

examples/webgl_postprocessing_unreal_bloom.html

@@ -40,7 +40,7 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
 			<p>			
 				This Bloom Pass is inspired by the bloom pass of the Unreal Engine. It creates a mip map chain of bloom textures and blur them
-				with different radii. Because of the weigted combination of mips, and since larger blurs are done on higher mips this bloom
+				with different radii. Because of the weigted combination of mips, and since larger blurs are done on higher mips, this bloom
 				is better in quality and performance.
 			</p>
 			Model: <a href="https://sketchfab.com/models/d3f50a66fee74c6588dd9bc92f7fe7b3" target="_blank" rel="noopener">Primary Ion Drive</a> by
@@ -69,8 +69,6 @@
 			var composer, renderer, mixer;
 
 			var params = {
-				projection: 'normal',
-				background: false,
 				exposure: 1,
 				bloomStrength: 1.5,
 				bloomThreshold: 0,
@@ -92,23 +90,22 @@
 			scene = new THREE.Scene();
 
 			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
-			camera.position.set( - 5, 2.5, -3.5 );
-			camera.lookAt( 0, 0, 0 );
+			camera.position.set( - 5, 2.5, - 3.5 );
+			scene.add( camera );
 
 			controls = new THREE.OrbitControls( camera, renderer.domElement );
 			controls.maxPolarAngle = Math.PI * 0.5;
-			controls.minDistance = 0.1;
-			controls.maxDistance = 20;
+			controls.minDistance = 1;
+			controls.maxDistance = 10;
 
 			scene.add( new THREE.AmbientLight( 0x404040 ) );
 
 			pointLight = new THREE.PointLight( 0xffffff, 1 );
-			pointLight.position.copy( camera.position );
-			scene.add( pointLight );
+			camera.add( pointLight );
 
 			var renderScene = new THREE.RenderPass( scene, camera );
 
-			var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 ); //1.0, 9, 0.5, 512);
+			var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
 			bloomPass.renderToScreen = true;
 			bloomPass.threshold = params.bloomThreshold;
 			bloomPass.strength = params.bloomStrength;
@@ -140,7 +137,11 @@
 
 			var gui = new dat.GUI();
 
-			gui.add( params, 'exposure', 0.1, 2 );
+			gui.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
+
+				renderer.toneMappingExposure = Math.pow( value, 4.0 );
+
+			} );
 
 			gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
 
@@ -181,19 +182,13 @@
 				const delta = clock.getDelta();
 
 				mixer.update( delta );
-				controls.update( delta );
-
-				pointLight.position.copy( camera.position );
 
 				stats.update();
 
-				renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );
-
 				composer.render();
 
 			}
 
-
 		</script>
 
 	</body>