javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - postprocessing - unreal bloom</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
		#info > * {
			max-width: 650px;
			margin-left: auto;
			margin-right: auto;
		}
		</style>
	</head>
	<body>

		<div id="container"></div>

		<div id="info">
			<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 Unreal Engine. It creates a mip map chain of bloom textures and blurs them
				with different radii. Because of the weighted 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://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Primary Ion Drive</a> by
			<a href="http://mjmurdock.com/" target="_blank" rel="noopener">Mike Murdock</a>, CC Attribution.
		</div>

		<script type="module">

			import * as THREE from '../build/three.module.js';

			import Stats from './jsm/libs/stats.module.js';
			import { GUI } from './jsm/libs/dat.gui.module.js';

			import { OrbitControls } from './jsm/controls/OrbitControls.js';
			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
			import { UnrealBloomPass } from './jsm/postprocessing/UnrealBloomPass.js';

			var scene, camera, controls, pointLight, stats;
			var composer, renderer, mixer;

			var params = {
				exposure: 1,
				bloomStrength: 1.5,
				bloomThreshold: 0,
				bloomRadius: 0
			};

			var clock = new THREE.Clock();
			var container = document.getElementById( 'container' );

			stats = new Stats();
			container.appendChild( stats.dom );

			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.toneMapping = THREE.ReinhardToneMapping;
			container.appendChild( renderer.domElement );

			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
			camera.position.set( - 5, 2.5, - 3.5 );
			scene.add( camera );

			controls = new OrbitControls( camera, renderer.domElement );
			controls.maxPolarAngle = Math.PI * 0.5;
			controls.minDistance = 1;
			controls.maxDistance = 10;

			scene.add( new THREE.AmbientLight( 0x404040 ) );

			pointLight = new THREE.PointLight( 0xffffff, 1 );
			camera.add( pointLight );

			var renderScene = new RenderPass( scene, camera );

			var bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
			bloomPass.threshold = params.bloomThreshold;
			bloomPass.strength = params.bloomStrength;
			bloomPass.radius = params.bloomRadius;

			composer = new EffectComposer( renderer );
			composer.addPass( renderScene );
			composer.addPass( bloomPass );

			new GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {

				var model = gltf.scene;

				scene.add( model );

				// Mesh contains self-intersecting semi-transparent faces, which display
				// z-fighting unless depthWrite is disabled.
				var core = model.getObjectByName( 'geo1_HoloFillDark_0' );
				core.material.depthWrite = false;

				mixer = new THREE.AnimationMixer( model );
				var clip = gltf.animations[ 0 ];
				mixer.clipAction( clip.optimize() ).play();

				animate();

			} );

			var gui = new GUI();

			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 ) {

				bloomPass.threshold = Number( value );

			} );

			gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {

				bloomPass.strength = Number( value );

			} );

			gui.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {

				bloomPass.radius = Number( value );

			} );

			window.onresize = function () {

				var width = window.innerWidth;
				var height = window.innerHeight;

				camera.aspect = width / height;
				camera.updateProjectionMatrix();

				renderer.setSize( width, height );
				composer.setSize( width, height );

			};


			function animate() {

				requestAnimationFrame( animate );

				const delta = clock.getDelta();

				mixer.update( delta );

				stats.update();

				composer.render();

			}

		</script>

	</body>

</html>