javascript
/
three.js
cermin dari https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887
							<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<script src="../build/three.js"></script>
	<script src="js/Detector.js"></script>
	<script src="js/libs/stats.min.js"></script>
	<script src="js/controls/OrbitControls.js"></script>
	<script src="js/loaders/OBJLoader.js"></script>
	<script src='js/libs/dat.gui.min.js'></script>
	<script src="js/libs/photons.min.js"></script>

	<style>
		body {
			font-family: Monospace;
			background-color: #000;
			color: #fff;
			margin: 0px;
			overflow: hidden;
		}
		#info {
			position: absolute;
			top: 10px;
			width: 100%;
			text-align: center;
			z-index: 50;
			display:block;
		}
		#info a { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
	</style>
	<title>Three.js Particle System</title>
</head>
<body>

<div id="info">
	<a href="http://threejs.org" target="_blank">three.js</a> - Photons: General purpose particle system by <a href="https://github.com/mkkellogg" target="_new">mkkellogg</a>
	<br />
	Full source on <a href="https://github.com/mkkellogg/Photons" target="_new">GitHub</a>
</div>

<div id="renderingContainer" style="position: absolute; left:0px; top:0px"></div>

<script>

	var ParticleSystemIDs = Object.freeze(
		{
			Smoke1: 1,
			Smoke2: 2,
			Flame: 3,
			FlameEmbers: 4
		} );

	var ParticleEnvironmentIDs = Object.freeze(
		{
			Campfire: 1
		} );

	var rendererContainer;
	var screenWidth, screenHeight;
	var pointLight, ambientLight;
	var particleSystems, loadingManager;
	var scene, camera, renderer, controls, stats, clock;
	var currentEnvironmentID;
	var smokeActive, smokeType;
	var particleSystemsParent;


	window.addEventListener( "load", function load( event ) {

		window.removeEventListener( "load", load, false );
		init();

	}, false );


	function init() {

		clock = new THREE.Clock();

		getScreenDimensions();

		initScene();
		initGUI();
		initListeners();

		initLights();
		PHOTONS.Util.initializeLoadingManager();
		initSceneGeometry( function() {

			initParticleSystems();
			startParticleSystemEnvironment ( ParticleEnvironmentIDs.Campfire );
			initRenderer();
			initControls();
			initStats();
			animate();

		} );

	}

	function initParticleSystems() {

		particleSystems = {};
		initializeFlameSystem();
		initializeSmokeSystem();

	}

	function initializeSmokeSystem() {

		var _TPSV = PHOTONS.SingularVector;

		smokeType = ParticleSystemIDs.Smoke1;

		var textureLoader = new THREE.TextureLoader();

		var smoke1Atlas = new PHOTONS.Atlas( textureLoader.load( 'textures/campfire/smokeparticle.png' ), true );
		var smoke2Atlas = PHOTONS.Atlas.createGridAtlas( textureLoader.load( 'textures/campfire/smokeparticles.png' ), 0.0, 1.0, 1.0, 0.0, 4.0, 4.0, false, true );

		var altVertexShader = [

			PHOTONS.ParticleSystem.Shader.VertexVars,
			"varying vec4 vPosition;",

			PHOTONS.ParticleSystem.Shader.ParticleVertexQuadPositionFunction,

			"void main()",
			"{",
				"vColor = customColor;",
				"vUV = uv;",
				"vec4 quadPos = getQuadPosition();",
				"vPosition = viewMatrix * quadPos;",
				"gl_Position = projectionMatrix * vPosition;",
			"}"

		].join( "\n" );

		var altFragmentShader = [

			PHOTONS.ParticleSystem.Shader.FragmentVars,
			"varying vec4 vPosition;",

			THREE.ShaderChunk[ "common" ],
			THREE.ShaderChunk[ "bsdfs" ],
			THREE.ShaderChunk[ "lights_pars" ],

			"void main()",
			"{",

				"vec4 textureColor = texture2D( texture, vUV );",
				"vec4 viewPosition = -vPosition;",
				"vec3 outgoingLight = vec3( 0.0 );",
				"vec4 diffuseColor = vColor * textureColor;",

				"vec3 totalDiffuseLight = vec3( 0.0 );",

				"#if NUM_POINT_LIGHTS > 0",
					"for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {",
						"vec3 lightColor = pointLights[ i ].color;",
						"vec3 lightPosition = pointLights[ i ].position;",
						"vec3 lVector = lightPosition + viewPosition.xyz;",
						"vec3 lightDir = normalize( lVector );",
						"float attenuation = punctualLightIntensityToIrradianceFactor( length( lVector ), pointLights[ i ].distance, pointLights[ i ].decay );",
						"totalDiffuseLight += lightColor * attenuation;",
					"}",
				"#endif",

				"gl_FragColor = diffuseColor * vec4( totalDiffuseLight, 1.0 );",
			"}"

		].join( "\n" );

		var customUniforms1 = THREE.UniformsUtils.merge( [ THREE.UniformsLib[ 'lights' ], THREE.UniformsLib[ 'ambient' ] ] );

		var altMaterial1 = PHOTONS.ParticleSystem.createMaterial( altVertexShader, altFragmentShader, customUniforms1 );
		altMaterial1.lights = true;
		altMaterial1.blending = THREE.CustomBlending;
		altMaterial1.blendSrc = THREE.SrcAlphaFactor;
		altMaterial1.blendDst = THREE.OneMinusSrcAlphaFactor;
		altMaterial1.blendEquation = THREE.AddEquation;
		altMaterial1.uniforms.texture.value = smoke1Atlas.getTexture();

		var altMaterial2 = altMaterial1.clone();
		altMaterial2.uniforms.texture.value = smoke2Atlas.getTexture();

		var particleSystemParams1 = {

			material: altMaterial1,
			zSort: true,
			particleAtlas : smoke1Atlas,
			particleReleaseRate : 100,
			particleLifeSpan : 3.0,
			lifespan : 0

		};

		var particleSystemParams2 = {

			material: altMaterial2,
			zSort: true,
			particleAtlas : smoke2Atlas,
			particleReleaseRate : 100,
			particleLifeSpan : 3.0,
			lifespan : 0

		};

		var particleSystem1 = new PHOTONS.ParticleSystem();
		particleSystem1.initialize( camera, scene, particleSystemParams1 );

		var particleSystem2 = new PHOTONS.ParticleSystem();
		particleSystem2.initialize( camera, scene, particleSystemParams2 );

		var positionModifier = new PHOTONS.RandomModifier(
			{
				offset: new THREE.Vector3( 0, 0, 0 ),
				range: new THREE.Vector3( 10, 0, 10 ),
				rangeEdgeClamp: false,
				rangeType: PHOTONS.RangeType.Sphere
			} );

		var velocityModifier = new PHOTONS.RandomModifier(
			{
				offset: new THREE.Vector3( 0, 75, 0 ),
				range: new THREE.Vector3( 5, 30, 5 ),
				rangeEdgeClamp: false,
				rangeType: PHOTONS.RangeType.Sphere
			} );

		var accelerationModifier = new PHOTONS.RandomModifier(
			{
				offset: new THREE.Vector3( 0, - 22, 0 ),
				range: new THREE.Vector3( 35, 20, 35 ),
				rangeEdgeClamp: false,
				rangeType: PHOTONS.RangeType.Cube
			} );

		var rotationModifier = new PHOTONS.RandomModifier(
			{
				offset: new PHOTONS.SingularVector( 0 ),
				range: new PHOTONS.SingularVector( 360 )
			} );

		var rotationalSpeedModifier = new PHOTONS.RandomModifier(
			{
				offset: new PHOTONS.SingularVector( 50 ),
				range: new PHOTONS.SingularVector( 400 )
			} );

		var atlas1Modifier = new PHOTONS.EvenIntervalIndexModifier ( 1 );

		var sizeModifier = new PHOTONS.FrameSetModifier(
			new PHOTONS.FrameSet(
				[ 0, 3 ],
				[ new THREE.Vector2( 10, 10 ),
				new THREE.Vector2( 40, 40 ) ],
				false )
		);

		var alphaModifier = new PHOTONS.FrameSetModifier(
			new PHOTONS.FrameSet(
				[ 0, 1.0, 2.0, 3.0 ],
				[ new _TPSV( 0.0 ), new _TPSV( 0.1 ), new _TPSV( 0.075 ), new _TPSV( 0.0 ) ],
				true
				) );

		var colorModifier = new PHOTONS.FrameSetModifier(
			new PHOTONS.FrameSet(
				[ 0.0, 1.5, 3 ],
				[ new THREE.Vector3( 0.1, 0.1, 0.1 ),
				new THREE.Vector3( 0.35, 0.35, 0.35 ),
				new THREE.Vector3( 0.7, 0.7, 0.7 ) ],
				false )
		);

		particleSystem1.bindInitializer( 'position', positionModifier );
		particleSystem1.bindInitializer( 'velocity', velocityModifier );
		particleSystem1.bindInitializer( 'acceleration', accelerationModifier );
		particleSystem1.bindInitializer( 'rotation', rotationModifier );
		particleSystem1.bindInitializer( 'rotationalSpeed', rotationalSpeedModifier );
		particleSystem1.bindModifier( 'atlas', atlas1Modifier );
		particleSystem1.bindModifier( 'size', sizeModifier );
		particleSystem1.bindModifier( 'alpha', alphaModifier );
		particleSystem1.bindModifier( 'color', colorModifier );

		var atlas2Modifier = new PHOTONS.EvenIntervalIndexModifier ( 16 );

		particleSystem2.bindInitializer( 'position', positionModifier );
		particleSystem2.bindInitializer( 'velocity', velocityModifier );
		particleSystem2.bindInitializer( 'acceleration', accelerationModifier );
		particleSystem2.bindInitializer( 'rotation', rotationModifier );
		particleSystem2.bindInitializer( 'rotationalSpeed', rotationalSpeedModifier );
		particleSystem2.bindModifier( 'atlas', atlas2Modifier );
		particleSystem2.bindModifier( 'size', sizeModifier );
		particleSystem2.bindModifier( 'alpha', alphaModifier );
		particleSystem2.bindModifier( 'color', colorModifier );

		particleSystems[ ParticleSystemIDs.Smoke1 ] = particleSystem1;
		particleSystems[ ParticleSystemIDs.Smoke2 ] = particleSystem2;

		particleSystemsParent.add ( particleSystems[ ParticleSystemIDs.Smoke1 ] );
		particleSystemsParent.add ( particleSystems[ ParticleSystemIDs.Smoke2 ] );

	}

	function initializeFlameSystem() {

		var _TPSV = PHOTONS.SingularVector;

		// ---------------------
		// flame particle system
		// ---------------------

		var flameMaterial = PHOTONS.ParticleSystem.createMaterial();
		flameMaterial.blending = THREE.AdditiveBlending;

		var particleSystemParams = {

			material: flameMaterial,
			particleAtlas : PHOTONS.Atlas.createGridAtlas( new THREE.TextureLoader().load( 'textures/campfire/fireloop3.jpg' ), 0.0, 1.0, 1.0, 0.0, 8.0, 8.0, false, true ),
			particleReleaseRate : 3,
			particleLifeSpan : 3,
			lifespan : 0

		};
		var particleSystem = new PHOTONS.ParticleSystem();
		particleSystem.initialize( camera, scene, particleSystemParams );

		particleSystem.bindModifier( "atlas", new PHOTONS.EvenIntervalIndexModifier ( 64 ) );

		particleSystem.bindModifier( "size", new PHOTONS.FrameSetModifier(
			new PHOTONS.FrameSet(
				[ 0, 3 ],
				[ new THREE.Vector3( 20, 25 ),
				new THREE.Vector3( 20, 25 ) ],
				false )
		) );

		particleSystem.bindModifier( "alpha", new PHOTONS.FrameSetModifier(
			new PHOTONS.FrameSet(
				[ 0, 0.2, 1.2, 2.0, 3 ],
				[ new _TPSV( 0 ), new _TPSV( .3 ), new _TPSV( 1 ), new _TPSV( 1 ), new _TPSV( 0 ) ],
				true )
		) );

		particleSystem.bindModifier( "color", new PHOTONS.FrameSetModifier(
			new PHOTONS.FrameSet(
				[ 0, 3 ],
				[ new THREE.Vector3( 1.4, 1.4, 1.4 ),
				new THREE.Vector3( 1.4, 1.4, 1.4 ) ],
				false )
		) );

		particleSystem.bindInitializer( 'position', new PHOTONS.RandomModifier(
			{
				offset: new THREE.Vector3( 0, 0, 0 ),
				range: new THREE.Vector3( 0, 0, 0 ),
				rangeEdgeClamp: false,
				rangeType: PHOTONS.RangeType.Sphere
			} ) );

		particleSystem.bindInitializer( 'velocity', new PHOTONS.RandomModifier(
			{
				offset: new THREE.Vector3( 0, 25, 0 ),
				range: new THREE.Vector3( 10, 2, 10 ),
				rangeEdgeClamp: false,
				rangeType: PHOTONS.RangeType.Sphere
			} ) );

		particleSystems[ ParticleSystemIDs.Flame ] = particleSystem;
		particleSystemsParent.add ( particleSystems[ ParticleSystemIDs.Flame ] );


		// ---------------------
		// flame embers particle system
		// ---------------------

		var emberMaterial = PHOTONS.ParticleSystem.createMaterial();
		emberMaterial.blending = THREE.AdditiveBlending;

		particleSystemParams = {

			material: emberMaterial,
			particleAtlas : new PHOTONS.Atlas( new THREE.TextureLoader().load( 'textures/campfire/Puff.png' ), true ),
			particleReleaseRate : 18,
			particleLifeSpan : 3,
			lifespan : 0

		};
		particleSystem = new PHOTONS.ParticleSystem();
		particleSystem.initialize( camera, scene, particleSystemParams );

		particleSystem.bindModifier( "atlas", new PHOTONS.EvenIntervalIndexModifier ( 1 ) );

		particleSystem.bindModifier( 'size', new PHOTONS.RandomModifier(
			{
				offset: new THREE.Vector3( .25, .25, 0.0 ),
				range: new THREE.Vector3( 0.05, 0.05, 0.0 ),
				rangeEdgeClamp: false,
				rangeType: PHOTONS.RangeType.Sphere,
				runOnce: true
			} ) );

		particleSystem.bindModifier( "alpha", new PHOTONS.FrameSetModifier(
			new PHOTONS.FrameSet(
				[ 0, 0.2, 1.2, 2.0, 3 ],
				[ new _TPSV( 0 ), new _TPSV( 1 ), new _TPSV( 1 ), new _TPSV( 1 ), new _TPSV( 0 ) ],
				true )
		) );

		particleSystem.bindModifier( "color", new PHOTONS.FrameSetModifier(
			new PHOTONS.FrameSet(
				[ 0, 2, 3 ],
				[ new THREE.Vector3( 1.3, 1.3, 0 ),
				new THREE.Vector3( .75, .4, .4 ),
				new THREE.Vector3( .6, .6, .6 ) ],
				false )
		) );

		particleSystem.bindInitializer( 'position', new PHOTONS.RandomModifier(
			{
				offset: new THREE.Vector3( 0, 7, 0 ),
				range: new THREE.Vector3( 3, 0, 3 ),
				rangeEdgeClamp: false,
				rangeType: PHOTONS.RangeType.Sphere
			} ) );

		particleSystem.bindInitializer( 'velocity', new PHOTONS.RandomModifier(
			{
				offset: new THREE.Vector3( 0, 25, 0 ),
				range: new THREE.Vector3( 15, 25, 15 ),
				rangeEdgeClamp: true,
				rangeType: PHOTONS.RangeType.Sphere
			} ) );

		particleSystem.bindModifier( 'acceleration', new PHOTONS.RandomModifier(
			{
				offset: new THREE.Vector3( 0, 15, 0 ),
				range: new THREE.Vector3( 180, 280, 180 ),
				rangeEdgeClamp: true,
				rangeType: PHOTONS.RangeType.Sphere
			} ) );

		particleSystems[ ParticleSystemIDs.FlameEmbers ] = particleSystem;
		particleSystemsParent.add( particleSystems[ ParticleSystemIDs.FlameEmbers ] );

	}

	function initGUI() {

		gui = new dat.GUI();
		parameters =
			{
				smoke: function() {

					smokeActive = ! smokeActive; updateSmokeType();

				},
				smokeType: null,
				embers: function() {

					toggleParticleSystem( ParticleSystemIDs.FlameEmbers );

				},
				flame: function() {

					toggleParticleSystem( ParticleSystemIDs.Flame );

				},
			};

		gui.add( parameters, 'smokeType', { Basic: ParticleSystemIDs.Smoke1, Animated: ParticleSystemIDs.Smoke2 } ).name( "Smoke type" ).onChange( function() {

				smokeType = parameters.smokeType;
				updateSmokeType();

			} );
		gui.add( parameters, 'smoke' ).name( "Toggle smoke" );
		gui.add( parameters, 'embers' ).name( "Toggle embers" );
		gui.add( parameters, 'flame' ).name( "Toggle flame" );
		gui.open();

		gui.domElement.parentNode.style.zIndex = 100;

	}

	function initListeners() {

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

	}

	function initRenderer() {

		renderer = new THREE.WebGLRenderer();
		renderer.setSize( screenWidth, screenHeight );
		renderer.setClearColor( 0x000000 );
		renderer.shadowMap.enabled = true;
		renderer.shadowMap.type = THREE.BasicShadowMap;
		rendererContainer = document.getElementById( 'renderingContainer' );
		rendererContainer.appendChild( renderer.domElement );

	}

	function initLights() {

		ambientLight = new THREE.AmbientLight( 0x101010 );
		scene.add( ambientLight );

		pointLight = new THREE.PointLight( 0xffffff, 2, 1000, 1 );
		pointLight.position.set( 0, 40, 0 );
		pointLight.castShadow = true;
		pointLight.shadow.camera.near = 1;
		pointLight.shadow.camera.far = 1000;
		pointLight.shadow.mapSize.width = 4096;
		pointLight.shadow.mapSize.height = 2048;
		pointLight.shadow.bias = - 0.5;
		scene.add( pointLight );

	}

	function initSceneGeometry( onFinished ) {

		var loadedCount = 0;
		var targetLoadCount = 3;
		var onFinishedCalled = false;

		function incrementAndCheckLoadComplete() {

			loadedCount ++;

			if ( ! onFinishedCalled && loadedCount >= targetLoadCount && onFinished ) {

				onFinishedCalled = true;
				onFinished();

			}

		}

		// ---------------------
		// create ground
		// ---------------------

		var groundTexture = new THREE.TextureLoader().load( 'textures/campfire/grass1.jpg' );
		groundTexture.wrapS = THREE.RepeatWrapping;
		groundTexture.wrapT = THREE.RepeatWrapping;
		groundTexture.repeat.set( 10, 10 );

		var groundMaterial = new THREE.MeshLambertMaterial( {

			color: 0xffffff,
			map: groundTexture,
			vertexColors: THREE.NoColors,
			side: THREE.BackSide

		} );

		var groundGeometry = new THREE.PlaneGeometry( 1000, 1000, 30, 30 );
		var groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
		groundMesh.position.y = 0;
		groundMesh.rotation.x = Math.PI / 2.0;
		groundMesh.receiveShadow = true;
		scene.add( groundMesh );

		// ---------------------
		// load campfire
		// ---------------------
		var campFireMaterial = new THREE.MeshLambertMaterial( {

			color: 0xffffff,
			vertexColors: THREE.NoColors,
			side: THREE.FrontSide

		} );

		PHOTONS.Util.loadObj( 'models/campfire/campfire.obj', 'models/campfire/campfire_texture.png', campFireMaterial,

			function( mesh ) {

				mesh.castShadow = true;
				mesh.receiveShadow = false;

			},
				function( object ) {

					object.position.set( 0, 0, 0 );
					object.scale.set( 7, 7, 7 );
					scene.add( object );

					incrementAndCheckLoadComplete();

				}

			);

		// ---------------------
		// load rocks
		// ---------------------

		var rockMaterial = new THREE.MeshLambertMaterial( {

			color: 0xffffff,
			vertexColors: THREE.NoColors,
			side: THREE.FrontSide

		} );

		PHOTONS.Util.loadObj( 'models/campfire/brownrock.obj', 'models/campfire/brownrock.png', rockMaterial,

			function( mesh ) {

				mesh.castShadow = true;
				mesh.receiveShadow = true;

			},
				function( object ) {

					object.position.set( - 70, 0, 0 );
					object.scale.set( .55, .55, .55 );
					scene.add( object );

					var rockObject2 = object.clone();
					rockObject2.rotation.z = - Math.PI / 4;
					rockObject2.rotation.x = Math.PI / 2;
					rockObject2.position.set( - 55, - 1, 25 );
					rockObject2.scale.set( .35, .35, .35 );
					scene.add( rockObject2 );

					var rockObject3 = object.clone();
					rockObject3.rotation.z = Math.PI / 4;
					rockObject3.rotation.x = Math.PI / 2;
					rockObject3.position.set( 45, 10, 45 );
					rockObject3.scale.set( .65, .65, .85 );
					scene.add( rockObject3 );

					incrementAndCheckLoadComplete();

				}

			);

		// ---------------------
		// load trees
		// ---------------------

		var treeMaterial = new THREE.MeshLambertMaterial( {

			color: 0xffffff,
			vertexColors: THREE.NoColors,
			side: THREE.FrontSide

		} );

		PHOTONS.Util.loadObj( 'models/campfire/pinetree_doubleface.obj', 'models/campfire/pinetree.jpg', treeMaterial,

			function( mesh ) {

				mesh.castShadow = true;
				mesh.receiveShadow = true;

			},
				function( object ) {

					object.rotation.z = Math.PI / 64;
					object.rotation.x = Math.PI / 64;
					object.position.set( - 20, - 1, - 80 );
					object.scale.set( 1.155, 1.155, 1.155 );
					scene.add( object );

					var treeObject2 = object.clone();
					treeObject2.rotation.z = - Math.PI / 16;
					treeObject2.rotation.x = Math.PI / 32;
					treeObject2.position.set( 15, - 1, - 80 );
					treeObject2.scale.set( .855, .855, .855 );
					scene.add( treeObject2 );

					incrementAndCheckLoadComplete();

				}

			);

		particleSystemsParent = new THREE.Object3D();
		particleSystemsParent.position.set( 0, 0, 0 );
		particleSystemsParent.matrixAutoUpdate = true;
		scene.add( particleSystemsParent );

	}

	function initScene() {

		scene = new THREE.Scene();

		camera = new THREE.PerspectiveCamera( 45, 1.0, 2, 2000 );
		scene.add( camera );
		resetCamera();

	}

	function initStats() {

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

	}

	function initControls() {

		controls = new THREE.OrbitControls( camera, renderer.domElement );
		controls.target.set( 0, 0, 0 );
		controls.update();

	}

	function onWindowResize() {

		getScreenDimensions();
		renderer.setSize( screenWidth, screenHeight );
		resetCamera();

	}

	var flickerPointLight = ( function() {

		var lastAdjuster;

		return function flickerPointLight() {

			var adjuster = ( Math.random() - 0.5 );

			if ( lastAdjuster ) {

				diff = ( adjuster - lastAdjuster ) * .2;
				adjuster = lastAdjuster + diff;

			}

			var intensity = 4;
			intensity += adjuster * 4;
			pointLight.intensity = intensity;

			pointLight.distance = adjuster * 50 + 200;
			pointLight.decay = adjuster * 5 + 3;

			lastAdjuster = adjuster;

		}

	} )();

	function updateSmokeType() {

		particleSystems[ ParticleSystemIDs.Smoke1 ].deactivate();
		particleSystems[ ParticleSystemIDs.Smoke2 ].deactivate();

		if ( smokeActive ) {

			particleSystems[ smokeType ].activate();

		}

	}

	function toggleParticleSystem( id ) {

		if ( particleSystems[ id ] ) {

			if ( particleSystems[ id ].isActive ) {

				particleSystems[ id ].deactivate();

			} else {

				particleSystems[ id ].activate();

			}

		}

	}

	function startParticleSystemEnvironment( id ) {

		resetCamera();

		Object.keys( particleSystems ).forEach( function( key ) {

			var system = particleSystems[ key ];
			system.deactivate();

		} );

		currentEnvironmentID = id;
		if ( id == ParticleEnvironmentIDs.Campfire ) {

			smokeActive = true;
			particleSystems[ ParticleSystemIDs.Flame ].activate();
			particleSystems[ ParticleSystemIDs.FlameEmbers ].activate();
			updateSmokeType();
			pointLight.distance = 300;
			pointLight.intensity = 6;
			pointLight.color.setRGB( 1, .8, .4 );
			pointLight.decay = 2;
			pointLight.position.set( 0, 40, 0 );

			ambientLight.color.setRGB( .08, .08, .08 );

		} else {

			return;

		}

	}

	function getScreenDimensions() {

		screenWidth = window.innerWidth;
		screenHeight = window.innerHeight;

	}

	function resetCamera() {

		getScreenDimensions();
		camera.aspect = screenWidth / screenHeight;
		camera.updateProjectionMatrix();
		camera.position.set( 0, 200, 400 );
		camera.lookAt( scene.position );

	}

	function updateParticleSystems() {

		var deltaTime = clock.getDelta();

		Object.keys( particleSystems ).forEach( function( key ) {

			var system = particleSystems[ key ];
			if ( system.isActive ) {

				system.update( deltaTime );

			}

		} );

		if ( currentEnvironmentID == ParticleEnvironmentIDs.Campfire ) {

			flickerPointLight();

		}

	}

	function animate() {

		requestAnimationFrame( animate );
		update();
		render();

	}

	function update() {

		var time = performance.now() * 0.001;

		//particleSystemsParent.position.x = Math.sin( time ) * 49;
		//particleSystemsParent.position.z = Math.sin( time * 1.2 ) * 49;

		controls.update();
		stats.update();
		updateParticleSystems();

	}

	function render() {

		renderer.render( scene, camera );

	}

</script>
</body>
</html>