javascript
/
three.js
spiegel van https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
							<!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/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 mesh, texture, 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.PlaneGeometry( 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;
				renderer.antialias = true;
				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";

					var margin = 10;
					var textWidth = context.measureText(text).width;

					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>