|
@@ -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>
|