WestLangley пре 7 година
родитељ
комит
83b0e4980d
1 измењених фајлова са 12 додато и 17 уклоњено
  1. 12 17
      examples/webgl_postprocessing_unreal_bloom.html

+ 12 - 17
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>
 			<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>			
 			<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
 				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.
 				is better in quality and performance.
 			</p>
 			</p>
 			Model: <a href="https://sketchfab.com/models/d3f50a66fee74c6588dd9bc92f7fe7b3" target="_blank" rel="noopener">Primary Ion Drive</a> by
 			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 composer, renderer, mixer;
 
 
 			var params = {
 			var params = {
-				projection: 'normal',
-				background: false,
 				exposure: 1,
 				exposure: 1,
 				bloomStrength: 1.5,
 				bloomStrength: 1.5,
 				bloomThreshold: 0,
 				bloomThreshold: 0,
@@ -92,23 +90,22 @@
 			scene = new THREE.Scene();
 			scene = new THREE.Scene();
 
 
 			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 			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 = new THREE.OrbitControls( camera, renderer.domElement );
 			controls.maxPolarAngle = Math.PI * 0.5;
 			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 ) );
 			scene.add( new THREE.AmbientLight( 0x404040 ) );
 
 
 			pointLight = new THREE.PointLight( 0xffffff, 1 );
 			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 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.renderToScreen = true;
 			bloomPass.threshold = params.bloomThreshold;
 			bloomPass.threshold = params.bloomThreshold;
 			bloomPass.strength = params.bloomStrength;
 			bloomPass.strength = params.bloomStrength;
@@ -140,7 +137,11 @@
 
 
 			var gui = new dat.GUI();
 			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 ) {
 			gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
 
 
@@ -181,19 +182,13 @@
 				const delta = clock.getDelta();
 				const delta = clock.getDelta();
 
 
 				mixer.update( delta );
 				mixer.update( delta );
-				controls.update( delta );
-
-				pointLight.position.copy( camera.position );
 
 
 				stats.update();
 				stats.update();
 
 
-				renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );
-
 				composer.render();
 				composer.render();
 
 
 			}
 			}
 
 
-
 		</script>
 		</script>
 
 
 	</body>
 	</body>