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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - fire - texture</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 {
				background:#222;
				padding:0;
				margin:0;
				overflow:hidden;
			}

			#info {
				position: absolute;
				top: 0px;
				width: 100%;
				color: #ffffff;
				padding: 5px;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
			}

			a {
				color: #ffffff;
			}
		</style>

		<script src="../build/three.js"></script>
		<script src="js/WebGL.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>
		<script src="js/libs/stats.min.js"></script>
		<script src="js/objects/Fire.js"></script>

	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> fire and smoke demo <br/>
		</div>

		<div id="overlay">
			<div>
			</div>
		</div>

		<script>

			if ( WEBGL.isWebGLAvailable() === false ) {

				document.body.appendChild( WEBGL.getWebGLErrorMessage() );

			}

			var camera, scene, renderer, stats;
			var fire;

			var params = {
				color1: '#ffffff',
				color2: '#ffa000',
				color3: '#000000',
				colorBias: 0.8,
				burnRate: 0.35,
				diffuse: 1.33,
				viscosity: 0.25,
				expansion: - 0.25,
				swirl: 50.0,
				drag: 0.35,
				airSpeed: 12.0,
				windX: 0.0,
				windY: 0.75,
				speed: 500.0,
				massConservation: false
			};

			init();
			animate();

			function init() {

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

				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
				camera.position.z = 25;

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x000000 );

				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
				scene.add( ambientLight );

				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
				camera.add( pointLight );
				scene.add( camera );

				var plane = new THREE.PlaneBufferGeometry( 20, 20 );
				fire = new THREE.Fire( plane, {
					textureWidth: 512,
					textureHeight: 512,
					debug: false
				} );
				fire.position.z = - 2;
				scene.add( fire );

				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.autoClear = false;
				document.body.appendChild( renderer.domElement );

				function updateColor1( value ) {

					fire.color1.set( value );

				}

				function updateColor2( value ) {

					fire.color2.set( value );

				}

				function updateColor3( value ) {

					fire.color3.set( value );

				}

				function updateColorBias( value ) {

					fire.colorBias = value;

				}

				function updateBurnRate( value ) {

					fire.burnRate = value;

				}

				function updateDiffuse( value ) {

					fire.diffuse = value;

				}

				function updateViscosity( value ) {

					fire.viscosity = value;

				}

				function updateExpansion( value ) {

					fire.expansion = value;

				}

				function updateSwirl( value ) {

					fire.swirl = value;

				}

				function updateDrag( value ) {

					fire.drag = value;

				}

				function updateAirSpeed( value ) {

					fire.airSpeed = value;

				}

				function updateWindX( value ) {

					fire.windVector.x = value;

				}

				function updateWindY( value ) {

					fire.windVector.y = value;

				}

				function updateSpeed( value ) {

					fire.speed = value;

				}

				function updateMassConservation( value ) {

					fire.massConservation = value;

				}

				params.Single = function () {

					fire.clearSources();
					fire.addSource( 0.5, 0.1, 0.1, 1.0, 0.0, 1.0 );

				};

				params.Multiple = function () {

					fire.clearSources();
					fire.addSource( 0.45, 0.1, 0.1, 0.5, 0.0, 1.0 );
					fire.addSource( 0.55, 0.1, 0.1, 0.5, 0.0, 1.0 );

				};

				params.Text = function () {

					var text = "Three JS";
					var size = 180;
					var color = "#FF0040";
					var canvas = document.createElement( "canvas" );
					canvas.width = 1024;
					canvas.height = 1024;
					var context = canvas.getContext( "2d" );
					context.font = size + "pt Arial";

					context.strokeStyle = "black";
					context.strokeRect( 0, 0, canvas.width, canvas.height );
					context.textAlign = "center";
					context.textBaseline = "middle";
					context.lineWidth = 5;
					context.strokeStyle = color;
					context.fillStyle = "black";

					context.strokeText( text, canvas.width / 2, canvas.height * 0.75 );
					var texture = new THREE.Texture( canvas );
					texture.needsUpdate = true;

					fire.setSourceMap( texture );

				};

				// dat.gui
				var gui = new dat.GUI();

				gui.add( params, "Single" );
				gui.add( params, "Multiple" );
				gui.add( params, "Text" );

				gui.addColor( params, 'color1' ).onChange( updateColor1 );
				gui.addColor( params, 'color2' ).onChange( updateColor2 );
				gui.addColor( params, 'color3' ).onChange( updateColor3 );
				gui.add( params, 'colorBias', 0.0, 1.0 ).onChange( updateColorBias );
				gui.add( params, 'burnRate', 0.0, 10.0 ).onChange( updateBurnRate );
				gui.add( params, 'diffuse', 0.0, 5.0 ).step( 0.01 ).onChange( updateDiffuse );
				gui.add( params, 'viscosity', 0.0, 5.0 ).step( 0.01 ).onChange( updateViscosity );
				gui.add( params, 'expansion', - 1.0, 1.0 ).step( 0.01 ).onChange( updateExpansion );
				gui.add( params, 'swirl', 0.0, 50.0 ).step( 0.01 ).onChange( updateSwirl );
				gui.add( params, 'drag', 0.0, 1.0 ).onChange( updateDrag );
				gui.add( params, 'airSpeed', 0.0, 50.0 ).onChange( updateAirSpeed );
				gui.add( params, 'windX', - 5, 5 ).step( 0.01 ).onChange( updateWindX );
				gui.add( params, 'windY', - 5, 5 ).step( 0.01 ).onChange( updateWindY );
				gui.add( params, 'speed', 0, 1000 ).onChange( updateSpeed );
				gui.add( params, 'massConservation' ).onChange( updateMassConservation );

				function updateAll() {

					updateColor1( params.color1 );
					updateColor2( params.color2 );
					updateColor3( params.color3 );
					updateColorBias( params.colorBias );
					updateBurnRate( params.burnRate );
					updateDiffuse( params.diffuse );
					updateViscosity( params.viscosity );
					updateExpansion( params.expansion );
					updateSwirl( params.swirl );
					updateDrag( params.drag );
					updateAirSpeed( params.airSpeed );
					updateWindX( params.windX );
					updateWindY( params.windY );
					updateSpeed( params.speed );
					updateMassConservation( params.massConservation );

					for ( var i in gui.__controllers ) {

						gui.__controllers[ i ].updateDisplay();

					}

				}

				params.Candle = function () {

					params.color1 = 0xffffff;
					params.color2 = 0xffa000;
					params.color3 = 0x000000;
					params.windX = 0.0;
					params.windY = 0.5;
					params.colorBias = 0.3;
					params.burnRate = 1.6;
					params.diffuse = 1.33;
					params.viscosity = 1.33;
					params.expansion = 0.0;
					params.swirl = 0.0;
					params.drag = 0.0;
					params.airSpeed = 8.0;
					params.speed = 500.0;
					params.massConservation = false;

					updateAll();

				};
				gui.add( params, 'Candle' );

				params.Torch = function () {

					params.color1 = 0xffdcaa;
					params.color2 = 0xffa000;
					params.color3 = 0x000000;
					params.windX = 0.0;
					params.windY = 0.75;
					params.colorBias = 0.9;
					params.burnRate = 1.0;
					params.diffuse = 1.33;
					params.viscosity = 0.25;
					params.expansion = 0.0;
					params.swirl = 50.0;
					params.drag = 0.35;
					params.airSpeed = 10.0;
					params.speed = 500.0;
					params.massConservation = false;

					updateAll();

				};
				gui.add( params, 'Torch' );

				params.Campfire = function () {

					params.color1 = 0xffffff;
					params.color2 = 0xffa000;
					params.color3 = 0x000000;
					params.windX = 0.0;
					params.windY = 0.75;
					params.colorBias = 0.8;
					params.burnRate = 0.3;
					params.diffuse = 1.33;
					params.viscosity = 0.25;
					params.expansion = - 0.25;
					params.swirl = 50.0;
					params.drag = 0.35;
					params.airSpeed = 12.0;
					params.speed = 500.0;
					params.massConservation = false;

					updateAll();

				};
				gui.add( params, 'Campfire' );

				params.Fireball = function () {

					params.color1 = 0xffffff;
					params.color2 = 0xffa000;
					params.color3 = 0x000000;
					params.windX = 0.0;
					params.windY = 0.75;
					params.colorBias = 0.8;
					params.burnRate = 1.2;
					params.diffuse = 3.0;
					params.viscosity = 0.0;
					params.expansion = 0.0;
					params.swirl = 6.0;
					params.drag = 0.0;
					params.airSpeed = 20.0;
					params.speed = 500.0;
					params.massConservation = false;

					updateAll();

				};
				gui.add( params, 'Fireball' );

				params.Iceball = function () {

					params.color1 = 0x00bdf7;
					params.color2 = 0x1b3fb6;
					params.color3 = 0x001869;
					params.windX = 0.0;
					params.windY = - 0.25;
					params.colorBias = 0.25;
					params.burnRate = 2.6;
					params.diffuse = 5.0;
					params.viscosity = 0.5;
					params.expansion = 0.75;
					params.swirl = 30.0;
					params.drag = 0.0;
					params.airSpeed = 40.0;
					params.speed = 500.0;
					params.massConservation = false;

					updateAll();

				};
				gui.add( params, 'Iceball' );

				params.Smoke = function () {

					params.color1 = 0xd2d2d2;
					params.color2 = 0xd7d7d7;
					params.color3 = 0x000000;
					params.windX = - 0.05;
					params.windY = 0.15;
					params.colorBias = 0.95;
					params.burnRate = 0.0;
					params.diffuse = 1.5;
					params.viscosity = 0.25;
					params.expansion = 0.2;
					params.swirl = 3.75;
					params.drag = 0.4;
					params.airSpeed = 18.0;
					params.speed = 500.0;
					params.massConservation = false;

					updateAll();

				};
				gui.add( params, 'Smoke' );

				params.Cigar = function () {

					params.color1 = 0xc5c5c5;
					params.color2 = 0x787878;
					params.color3 = 0x000000;
					params.windX = 0.0;
					params.windY = 0.3;
					params.colorBias = 0.55;
					params.burnRate = 0.0;
					params.diffuse = 1.3;
					params.viscosity = 0.05;
					params.expansion = - 0.05;
					params.swirl = 3.7;
					params.drag = 0.6;
					params.airSpeed = 6.0;
					params.speed = 500.0;
					params.massConservation = false;

					updateAll();

				};
				gui.add( params, 'Cigar' );

				gui.open();

				params.Campfire();
				params.Single();

				stats = new Stats();
				document.body.appendChild( stats.dom );

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

			}

			function onWindowResize() {

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

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

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

			}

			function animate() {

				requestAnimationFrame( animate );

				renderer.clear();
				renderer.render( scene, camera );
				stats.update();

			}

		</script>

	</body>
</html>