javascript
/
three.js
zrkadlo https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - particles - dynamic - postprocessing</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
		    body {
			color: #fff;
			font-family:Monospace;
			font-size:13px;
			text-align:center;
			font-weight: bold;

			background-color: #000;
			margin: 0px;
			overflow: hidden;
		    }

		    #info {
					color:#fff;
			position: absolute;
			top: 0px; width: 100%;
			padding: 5px;

		    }

		    a { color: red; }

		</style>
	</head>
	<body>

		<div id="container"></div>
		<div id="info">
				<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl dynamic particles + postprocessing
				- models by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1" target="_blank">Reallusion</a>
				<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255" target="_blank">iClone</a>,
				<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a>

			</div>

		<script src="../build/three.min.js"></script>

		<script src="js/shaders/BlitShader.js"></script>
		<script src="js/shaders/ConvolutionShader.js"></script>
		<script src="js/shaders/FilmShader.js"></script>
		<script src="js/shaders/FocusShader.js"></script>

		<script src="js/postprocessing/EffectComposer.js"></script>
		<script src="js/postprocessing/MaskPass.js"></script>
		<script src="js/postprocessing/RenderPass.js"></script>
		<script src="js/postprocessing/BloomPass.js"></script>
		<script src="js/postprocessing/ShaderPass.js"></script>
		<script src="js/postprocessing/FilmPass.js"></script>

		<script src="js/Detector.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var SCREEN_HEIGHT = window.innerHeight;
			var SCREEN_WIDTH = window.innerWidth;

			var container;

			var camera, scene, renderer, mesh, directionalLight;

			var parent, meshes = [], clonemeshes = [];

			var p;

			var aloader, bloader;

			var total = 0, totaln = 0;

			var composer, effectFocus;

			var clock = new THREE.Clock();

			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );

				camera = new THREE.PerspectiveCamera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 50000 );
				camera.position.set( 0, 700, 7000 );

				scene = new THREE.Scene();
				scene.fog = new THREE.FogExp2( 0x000104, 0.0000675 );

				camera.lookAt( scene.position );

				//

				aloader = new THREE.JSONLoader( );
				bloader = new THREE.BinaryLoader( true );

				document.body.appendChild( bloader.statusDomElement );

				aloader.load( "obj/terrain.js", function( geometry ) {

					createMesh( geometry, scene, 16.8, -11000, -200,  -5000, 0x00ff44, false );
					createMesh( geometry, scene, 16.8,  11000, -200, -15000, 0x00ff33, false );
					createMesh( geometry, scene, 16.8,      0, -200, -15000, 0x00ff33, false );
					createMesh( geometry, scene, 16.8,      0, -200,  15000, 0x00ff33, false );
					createMesh( geometry, scene, 16.8,  11000, -200,  15000, 0x00ff22, false );
					createMesh( geometry, scene, 16.8, -11000, -200,   5000, 0x00ff11, false );
					createMesh( geometry, scene, 16.8,  13000, -200,   5000, 0x00ff55, false );
					createMesh( geometry, scene, 16.8,  13000, -200,  -5000, 0x00ff66, false );

				} );

				bloader.load( "obj/veyron/VeyronNoUv_bin.js", function( geometry ) { createMesh( geometry, scene, 6.8, 2200, -200, -100, 0x0055ff, false ) } );

				bloader.load( "obj/female02/Female02_bin.js", function( geometry ) {

					createMesh( geometry, scene, 4.05, -1000, -350,    0, 0xffdd44, true );
					createMesh( geometry, scene, 4.05,     0, -350,    0, 0xffffff, true );
					createMesh( geometry, scene, 4.05,  1000, -350,  400, 0xff4422, true );
					createMesh( geometry, scene, 4.05,   250, -350, 1500, 0xff9955, true );
					createMesh( geometry, scene, 4.05,   250, -350, 2500, 0xff77dd, true );

				} );

				bloader.load( "obj/male02/Male02_bin.js", function( geometry ) {

					createMesh( geometry, scene, 4.05,  -500, -350,   600, 0xff7744, true );
					createMesh( geometry, scene, 4.05,   500, -350,     0, 0xff5522, true );
					createMesh( geometry, scene, 4.05,  -250, -350,  1500, 0xff9922, true );
					createMesh( geometry, scene, 4.05,  -250, -350, -1500, 0xff99ff, true );

				} );

				//

				renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
				renderer.autoClear = false;
				renderer.sortObjects = false;
				container.appendChild( renderer.domElement );

				renderer.setClearColor( scene.fog.color, 1 );

				//

				parent = new THREE.Object3D();
				scene.add( parent );

				var grid = new THREE.ParticleSystem( new THREE.PlaneGeometry( 15000, 15000, 64, 64 ), new THREE.ParticleBasicMaterial( { color: 0xff0000, size: 10 } ) );
				grid.position.y = -400;
				grid.rotation.x = - Math.PI / 2;
				parent.add( grid );

				totaln += 1;
				total += grid.geometry.vertices.length;

				// postprocessing

				var renderModel = new THREE.RenderPass( scene, camera );
				var effectBloom = new THREE.BloomPass( 0.75 );
				var effectFilm = new THREE.FilmPass( 0.5, 0.5, 1448, false );

				effectFocus = new THREE.ShaderPass( THREE.FocusShader );

				effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
				effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;

				effectFocus.renderToScreen = true;

				composer = new THREE.EffectComposer( renderer );

				composer.addPass( renderModel );
				composer.addPass( effectBloom );
				composer.addPass( effectFilm );
				composer.addPass( effectFocus );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			//

			function onWindowResize( event ) {

				renderer.setSize( window.innerWidth, window.innerHeight );

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				camera.lookAt( scene.position );

				composer.reset();

				effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
				effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;

			}

			//

			function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) {

				var i, c;

				var vertices = originalGeometry.vertices;
				var vl = vertices.length;

				var geometry = new THREE.Geometry();
				var vertices_tmp = [];

				for ( i = 0; i < vl; i ++ ) {

					p = vertices[ i ];

					geometry.vertices[ i ] = p.clone();
					vertices_tmp[ i ] = [ p.x, p.y, p.z, 0, 0 ];

				}

				var clones = [

					[  6000, 0, -4000 ],
					[  5000, 0, 0 ],
					[  1000, 0, 5000 ],
					[  1000, 0, -5000 ],
					[  4000, 0, 2000 ],
					[ -4000, 0, 1000 ],
					[ -5000, 0, -5000 ],

					[ 0, 0, 0 ]

				];

				if ( dynamic ) {

					for ( i = 0; i < clones.length; i ++ ) {

						c = ( i < clones.length -1 ) ? 0x252525 : color;

						mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleBasicMaterial( { size: 3, color: c } ) );
						mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;

						mesh.position.x = x + clones[ i ][ 0 ];
						mesh.position.y = y + clones[ i ][ 1 ];
						mesh.position.z = z + clones[ i ][ 2 ];

						parent.add( mesh );

						clonemeshes.push( { mesh: mesh, speed: 0.5 + Math.random() } );

					}

					totaln += clones.length;
					total += clones.length * vl;

				} else {

					mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleBasicMaterial( { size: 3, color: color } ) );
					mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;

					mesh.position.x = x;
					mesh.position.y = y;
					mesh.position.z = z;

					parent.add( mesh );

					totaln += 1;
					total += vl;

				}

				bloader.statusDomElement.style.display = "none";

				meshes.push( {
					mesh: mesh, vertices: geometry.vertices, vertices_tmp: vertices_tmp, vl: vl,
					down: 0, up: 0, direction: 0, speed: 35, delay: Math.floor( 200 + 200 * Math.random() ),
					started: false, start: Math.floor( 100 + 200 * Math.random() ),
					dynamic: dynamic
				} );

			}


			var j, jl, cm, data, vertices, vertices_tmp, vl, d, vt;

			function animate () {

				requestAnimationFrame( animate );
				render();

			}

			function render () {

				delta = 10 * clock.getDelta();

				delta = delta < 2 ? delta : 2;

				parent.rotation.y += -0.02 * delta;

				for( j = 0, jl = clonemeshes.length; j < jl; j ++ ) {

					cm = clonemeshes[ j ];
					cm.mesh.rotation.y += -0.1 * delta * cm.speed;

				}

				for( j = 0, jl = meshes.length; j < jl; j ++ ) {

					data = meshes[ j ];
					mesh = data.mesh;
					vertices = data.vertices;
					vertices_tmp = data.vertices_tmp;
					vl = data.vl;

					if ( ! data.dynamic ) continue;

					if ( data.start > 0 ) {

						data.start -= 1;

					} else {

						if ( !data.started ) {

							data.direction = -1;
							data.started = true;

						}

					}

					for ( i = 0; i < vl; i ++ ) {

						p = vertices[ i ];
						vt = vertices_tmp[ i ];

						// falling down

						if ( data.direction < 0 ) {

							// var d = Math.abs( p.x - vertices_tmp[ i ][ 0 ] ) + Math.abs( p.y - vertices_tmp[ i ][ 1 ] ) + Math.abs( p.z - vertices_tmp[ i ][ 2 ] );
							// if ( d < 200 ) {

							if ( p.y > 0 ) {

								// p.y += data.direction * data.speed * delta;

								p.x += 1.5 * ( 0.50 - Math.random() ) * data.speed * delta;
								p.y += 3.0 * ( 0.25 - Math.random() ) * data.speed * delta;
								p.z += 1.5 * ( 0.50 - Math.random() ) * data.speed * delta;

							} else {

								if ( ! vt[ 3 ] ) {

									vt[ 3 ] = 1;
									data.down += 1;

								}

							}

						}

						// rising up

						if ( data.direction > 0 ) {

							//if ( p.y < vertices_tmp[ i ][ 1 ] ) {

							//	p.y += data.direction * data.speed * delta;

							d = Math.abs( p.x - vt[ 0 ] ) + Math.abs( p.y - vt[ 1 ] ) + Math.abs( p.z - vt[ 2 ] );

							if ( d > 1 ) {

								p.x += - ( p.x - vt[ 0 ] ) / d * data.speed * delta * ( 0.85 - Math.random() );
								p.y += - ( p.y - vt[ 1 ] ) / d * data.speed * delta * ( 1 + Math.random() );
								p.z += - ( p.z - vt[ 2 ] ) / d * data.speed * delta * ( 0.85 - Math.random() );

							} else {

								if ( ! vt[ 4 ] ) {

									vt[ 4 ] = 1;
									data.up += 1;

								}

							}

						}


					}

					// all down

					if ( data.down === vl ) {

						if ( data.delay === 0 ) {

							data.direction = 1;
							data.speed = 10;
							data.down = 0;
							data.delay = 320;

							for ( i = 0; i < vl; i ++ ) {

								vertices_tmp[ i ][ 3 ] = 0;

							}

						} else {

							data.delay -= 1;

						}


					}

					// all up

					if ( data.up === vl ) {

						if ( data.delay === 0 ) {

							data.direction = -1;
							data.speed = 35;
							data.up = 0;
							data.delay = 120;

							for ( i = 0; i < vl; i ++ ) {

								vertices_tmp[ i ][ 4 ] = 0;

							}

						} else {

							data.delay -= 1;

						}


					}

					mesh.geometry.verticesNeedUpdate = true;

				}

				renderer.clear();
				composer.render( 0.01 );

			}

		</script>

	</body>

</html>