<script id="skyVS">
  varying vec2 vUv;
varying float time;
uniform float delta;

void main()
{
    vUv = uv;
	gl_Position = projectionMatrix * modelViewMatrix *  vec4(position,1.0);
}

</script>

<script id="skyFS">
      #ifdef GL_ES
precision highp float;
#endif

uniform vec2 resolution;
uniform float time;
uniform float delta;

varying vec2 vUv;        

void main(void)
{
	vec2 position = vUv;

	float red = 0.1;
	float green = 0.0;
	float blue = 0.1;
	
	
	if (vUv.y < 0.85) {
		float offset = 0.1 + (0.85 - vUv.y) * (1.0 + sin(delta * 0.1) * 1.0);
	
		blue = offset;
		red = offset;
		
		//blue *= (1.1 + cos(vUv.x + delta * 0.3) * 0.05);
		blue *= 1.0 + cos(vUv.x + delta * 0.3) * 0.05;
		
	}
	
	if (vUv.y < 0.8) {
		blue += 0.0 + cos(vUv.x + delta * 0.2) * 0.01;
	
	}

    vec3 rgb = vec3(red, green, blue);
    vec4 color = vec4(rgb, 1.0);
    
	gl_FragColor = color;	
}
    </script>

    <canvas id="ground"></canvas>
		<div id="whitepanel"></div>
		
		<div id="deck">
			<section id="cover" class="cover slide slide--green" data-x="0" data-y="0" data-z="0">
        <h2>the great fall</h2>
        <h3>scroll down</h3>
			</section>
		
			<section class="section">
				<figure class="right">
					<figcaption>
						<h2>Conflict</h2>
						<p>Conflict arises from attempts to control the flow of mana by use of technology or magic between different civilizations.</p>
					</figcaption>
				</figure>
			</section>
		
			<section class="section">
				<figure class="left">
					<figcaption>
						<h2>knights</h2>
						<p>An order of knights work to maintain balance of mana in the world to avert disaster, and protect the Mana Tree.</p>
					</figcaption>
				</figure>
			</section>
		
			<section class="section">
				<figure class="right">
					<figcaption>
						<h2>cataclysm</h2>
						<p>Hints that a cataclysm may be on the horizon, or has already happened in the past also play a large part in both games.</p>
					</figcaption>
				</figure>
			</section>
		
			<section class="section">
				<figure class="left">
					<figcaption>
						<h2>Disobeying</h2>
						<p>Disobeying their Elder's instructions, three boys from the small Potos village trespass into a local waterfall where a treasure is said to be kept.</p>
					</figcaption>
				</figure>
			</section>
			
			<section class="section">
				<figure class="right">
					<figcaption>
						<h2>Randi</h2>
						<p>One of the boys, the game's protagonist (named Randi in the original Japanese version), stumbles and falls into the lake, where he finds a rusty sword embedded in a stone.</p>
					</figcaption>
				</figure>
			</section>
		
			<section class="section">
				<figure class="left">
					<figcaption>
						<h2>Sword</h2>
						<p>Guided by a disembodied voice, he pulls the sword free, inadvertently unleashing monsters in the surrounding countryside of the village. </p>
					</figcaption>
				</figure>
			</section>
			
			<section class="section">
				<figure class="right">
					<figcaption>
						<h2>Omen</h2>
						<p>The villagers interpret the sword's removal as a bad omen and banish the boy from Potos forever. </p>
					</figcaption>
				</figure>
			</section>
		
			<section class="section">
				<figure class="left">
					<figcaption>
						<h2>Jema</h2>
						<p>An elderly knight named Jema recognizes the blade as the legendary Mana Sword, and encourages the hero to re-energize it by visiting the eight Mana Temples.</p>
					</figcaption>
				</figure>
			</section>
			
			<section class="section">
				<figure class="right">
					<figcaption>
						<h2>journey</h2>
						<p>During his journey, the hero is joined by an amnesiac sprite child and the daughter of a nobleman from Pandora. </p>
					</figcaption>
				</figure>
			</section>
		
			<section class="section">
				<figure class="left">
					<figcaption>
						<h2>Sprite</h2>
						<p>The orphaned sprite (named Popoi in the original Japanese version) initially tries to con the hero out of his money, but later accompanies him in hope of recovering his lost memory.</p>
					</figcaption>
				</figure>
			</section>
			
			<section class="section">
				<figure class="right">
					<figcaption>
						<h2>THE Girl</h2>
						<p>The girl (named Purimu in the original Japanese version) joins the party in search of her lost love, Dyluck, an officer in Pandora's army who has gone missing.</p>
					</figcaption>
				</figure>
			</section>
	
		</div>
		<script src="//use.edgefonts.net/open-sans-condensed:n3,i3,n7;open-sans.js"></script>
@import "compass/css3";

/* custom styles */
body{
	font-family: open-sans, sans-serif;
	overflow-x: hidden;
	color: white;
  background: black;
}

h2, h3{
	position: relative;
	text-transform: uppercase;
	font-family: open-sans-condensed, sans-serif;
	font-size: 3rem;
	font-weight: 100;
	letter-spacing: .1em;
	margin: 0 0 .5rem 0;
	text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

h3{
  font-size: 1.5rem;
}

a{
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: 500;
	
	&:hover{
		color: white;
	};
}

ol{
	font-size: 3rem;
	text-transform: uppercase;
	list-style-type: decimal;
}

li{
	line-height: 1.5;
}

.slide{
	position: relative;
  display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-align-items: center;
	-webkit-justify-content: center;
	-moz-flex-direction: column;
	-moz-align-items: center;
	-moz-justify-content: center;
	width: 100vw;
	height: 100vh;
}

figure{
	position: relative;
	padding: 50px 80px;
	width: 400px;
	opacity: 0;
	@include transition(-webkit-clip-path 1s, opacity .2s);
	
	canvas{
		position: absolute;
		top: 0;
		@include transform(scale(0));
		@include transition(-webkit-transform .5s);
	}
	
	&.in{
		opacity: 1;
		canvas{
			@include transform(scale(1));
		}
		
		figcaption{
			opacity: 1;
		}
	}
	
	&.right{
		float: right;
		canvas{
			left: 0;
		}
		
		figcaption{
			border-left: 2px solid white;
			text-align: left;
		}
	}
	
	&.left{
		float: left;
		
		canvas{
			right: 0;
		}
		
		figcaption{
			border-right: 2px solid white;
			text-align: right;
		}
	}
}

figcaption{
	position: relative;
	padding: 0 10px;
	z-index: 1;
	text-transform: uppercase;
	font-family: open-sans-condensed, sans-serif;
	font-size: 1.3rem;
	opacity: 0;

	@include transition(-webkit-clip-path 1s, opacity 1s);
	
	p{
		line-height: 1.5;	
	}
}

.section{
	width: 100vw;
	height: 100vh;
}

.slide{
	-webkit-box-sizing: border-box;
	padding: 1rem;
}

#title{
  margin: auto;
}

#scroll-btn{
	position: fixed;
	bottom: 0;
	left: 50%;
	margin-left: -54px;
	opacity: 1;
	@include transition(opacity .2s);
	@include transform(translateZ(0));
	
	&.out{
		opacity: 0;
	}
}

#ground{
  top: 0;
  left: 0;
   position: fixed;
  width: 100%;
  height: 100%;
}

#deck{
  z-index: 2;
}
View Compiled
var width = window.innerWidth,
		height = window.innerHeight;

var tree3JSON = {

	"metadata" :
	{
		"formatVersion" : 3.1,
		"generatedBy"   : "Blender 2.66 Exporter",
		"vertices"      : 20,
		"faces"         : 20,
		"normals"       : 20,
		"colors"        : 0,
		"uvs"           : [],
		"materials"     : 1,
		"morphTargets"  : 0,
		"bones"         : 0
	},

	"scale" : 1.000000,

	"materials" : [	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	}],

	"vertices" : [-0.384493,2.15155,0.450871,-0.450871,2.04304,-0.450871,0.450871,2.04304,-0.450871,0.450871,2.04304,0.450871,0,2.94479,-1.28721e-07,-0.903065,0.131832,0.991255,-1.02229,0.303017,-0.904973,0.971855,0.305063,-1.03035,1.09108,0.297934,0.865882,0.0333262,1.65988,-0.0143675,-0.456714,1.63861,0.53556,-0.53556,1.57575,-0.53556,0.53556,1.57575,-0.53556,0.53556,1.57575,0.53556,0,2.64687,-1.15699e-07,-0.623452,0.923065,0.731083,-0.731083,0.90026,-0.731083,0.731083,0.90026,-0.731083,0.731083,0.90026,0.731083,0,2.36243,-1.03265e-07],

	"morphTargets" : [],

	"normals" : [-0.647328,-0.26838,0.71337,-0.684561,-0.363506,-0.631825,0.654927,-0.376934,-0.654927,0.652242,-0.369182,0.661977,0.000763,0.999908,-0.011841,-0.620594,-0.356273,0.698477,-0.724784,-0.265603,-0.63567,0.640645,-0.259743,-0.722556,0.730247,-0.270974,0.627094,-0.015564,0.999664,0.020203,-0.638447,-0.318827,0.700491,-0.683309,-0.355205,-0.637867,0.658864,-0.363018,-0.658864,0.657735,-0.359294,0.661977,-0.007172,0.999939,-0.003082,-0.631367,-0.352702,0.690603,-0.682791,-0.348857,-0.641926,0.661611,-0.352824,-0.661611,0.661367,-0.351848,0.662404,-0.012299,0.999908,0.002564],

	"colors" : [],

	"uvs" : [],

	"faces" : [35,0,1,2,3,0,0,1,2,3,34,1,0,4,0,1,0,4,34,4,2,1,0,4,2,1,34,4,3,2,0,4,3,2,34,4,0,3,0,4,0,3,35,5,6,7,8,1,5,6,7,8,34,6,5,9,1,6,5,9,34,9,7,6,1,9,7,6,34,9,8,7,1,9,8,7,34,9,5,8,1,9,5,8,35,10,11,12,13,2,10,11,12,13,34,11,10,14,2,11,10,14,34,14,12,11,2,14,12,11,34,14,13,12,2,14,13,12,34,14,10,13,2,14,10,13,35,15,16,17,18,3,15,16,17,18,34,16,15,19,3,16,15,19,34,19,17,16,3,19,17,16,34,19,18,17,3,19,18,17,34,19,15,18,3,19,15,18],

	"bones" : [],

	"skinIndices" : [],

	"skinWeights" : [],

	"animation" : {}


};

var tree2JSON = {

	"metadata" :
	{
		"formatVersion" : 3.1,
		"generatedBy"   : "Blender 2.66 Exporter",
		"vertices"      : 25,
		"faces"         : 25,
		"normals"       : 25,
		"colors"        : 0,
		"uvs"           : [],
		"materials"     : 1,
		"morphTargets"  : 0,
		"bones"         : 0
	},

	"scale" : 1.000000,

	"materials" : [	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	}],

	"vertices" : [-0.381251,2.46059,0.481524,-0.368815,2.57757,-0.372408,0.373601,2.57757,-0.372408,0.373601,2.57757,0.370008,0.00239308,3.76995,-0.00120012,-0.335636,2.00953,0.543474,-0.494786,1.99896,-0.437448,0.419681,2.02364,-0.540157,0.552143,1.98717,0.382232,0.00472311,3.13064,0.023332,-0.38015,1.46569,0.673591,-0.66296,1.51017,-0.524917,0.307214,1.48438,-0.738231,0.667519,1.48917,0.353632,0.00250664,2.70949,-0.0278959,-0.513291,0.894477,0.77311,-0.853857,1.10794,-0.427833,0.411038,0.980745,-0.809265,0.769126,0.939622,0.391932,0.102907,2.45177,-0.0123701,-0.666356,0.258842,0.921625,-0.988865,0.329769,-0.606348,0.619169,0.24497,-0.95924,0.953303,0.221119,0.56905,0.0783232,2.06883,-0.0116724],

	"morphTargets" : [],

	"normals" : [-0.57561,-0.481765,0.660695,-0.632038,-0.40025,-0.663533,0.651173,-0.389721,-0.651173,0.696524,-0.401379,0.594714,-0.000244,0.999908,-0.011383,-0.527238,-0.386242,0.756828,-0.728202,-0.378368,-0.571429,0.567766,-0.3549,-0.742698,0.748802,-0.398938,0.529221,-0.019013,0.99939,0.029176,-0.460799,-0.375896,0.803949,-0.786798,-0.337596,-0.516648,0.444105,-0.374676,-0.813837,0.822504,-0.367992,0.433637,0.015595,0.999725,0.016511,-0.467605,-0.415052,0.780389,-0.85699,-0.254769,-0.44792,0.412519,-0.375408,-0.829951,0.794824,-0.429029,0.42909,0.092288,0.995514,0.019623,-0.523515,-0.363445,0.770592,-0.803156,-0.318461,-0.503464,0.48619,-0.384655,-0.7846,0.767388,-0.406934,0.495468,0.051973,0.998596,0.007172],

	"colors" : [],

	"uvs" : [],

	"faces" : [35,0,1,2,3,0,0,1,2,3,34,1,0,4,0,1,0,4,34,4,2,1,0,4,2,1,34,4,3,2,0,4,3,2,34,4,0,3,0,4,0,3,35,5,6,7,8,1,5,6,7,8,34,6,5,9,1,6,5,9,34,9,7,6,1,9,7,6,34,9,8,7,1,9,8,7,34,9,5,8,1,9,5,8,35,10,11,12,13,2,10,11,12,13,34,11,10,14,2,11,10,14,34,14,12,11,2,14,12,11,34,14,13,12,2,14,13,12,34,14,10,13,2,14,10,13,35,15,16,17,18,3,15,16,17,18,34,16,15,19,3,16,15,19,34,19,17,16,3,19,17,16,34,19,18,17,3,19,18,17,34,19,15,18,3,19,15,18,35,20,21,22,23,4,20,21,22,23,34,21,20,24,4,21,20,24,34,24,22,21,4,24,22,21,34,24,23,22,4,24,23,22,34,24,20,23,4,24,20,23],

	"bones" : [],

	"skinIndices" : [],

	"skinWeights" : [],

	"animation" : {}


};

var tree1JSON = {

	"metadata" :
	{
		"formatVersion" : 3.1,
		"generatedBy"   : "Blender 2.66 Exporter",
		"vertices"      : 25,
		"faces"         : 25,
		"normals"       : 25,
		"colors"        : 0,
		"uvs"           : [],
		"materials"     : 1,
		"morphTargets"  : 0,
		"bones"         : 0
	},

	"scale" : 1.000000,

	"materials" : [	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	},

	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "default",
		"vertexColors" : false
	}],

	"vertices" : [-0.384493,2.15155,0.450871,-0.450871,2.04304,-0.450871,0.450871,2.04304,-0.450871,0.450871,2.04304,0.450871,0,2.94479,-1.28721e-07,-0.440028,1.79487,0.659569,-0.64158,1.70484,-0.532317,0.473414,1.71002,-0.656506,0.572686,1.70061,0.46373,0.0344466,2.50608,0.0317644,-0.464576,1.2496,0.820814,-0.808085,1.35004,-0.505353,0.370291,1.35131,-0.894201,0.807913,1.34607,0.431966,8.58753e-05,2.19146,-0.0334176,-0.514008,0.72839,0.939779,-0.951392,0.865516,-0.517962,0.581622,0.867154,-0.977926,1.01901,0.861444,0.479815,0.0339138,1.95241,-0.0148396,-0.738519,0.131832,1.12223,-1.14525,0.303017,-0.733694,0.806508,0.305063,-1.16143,1.21324,0.297934,0.694501,0.0337269,1.65988,-0.0143163],

	"morphTargets" : [],

	"normals" : [-0.647328,-0.26838,0.71337,-0.684561,-0.363506,-0.631825,0.654927,-0.376934,-0.654927,0.652242,-0.369182,0.661977,0.000763,0.999908,-0.011841,-0.559313,-0.218909,0.799493,-0.764916,-0.278848,-0.580615,0.583148,-0.297037,-0.756096,0.746849,-0.336894,0.573321,0.053743,0.99826,0.02356,-0.461226,-0.322336,0.826624,-0.842372,-0.255043,-0.474685,0.428053,-0.247017,-0.86932,0.85464,-0.255043,0.452223,0.003693,0.999817,0.018281,-0.446089,-0.356273,0.820978,-0.850032,-0.265603,-0.454787,0.460128,-0.259743,-0.848994,0.85342,-0.270974,0.445204,-0.01059,0.999664,0.023194,-0.506943,-0.356273,0.784875,-0.813196,-0.265603,-0.517808,0.523057,-0.259743,-0.811731,0.817286,-0.270974,0.508499,-0.012299,0.999664,0.02234],

	"colors" : [],

	"uvs" : [],

	"faces" : [35,0,1,2,3,0,0,1,2,3,34,1,0,4,0,1,0,4,34,4,2,1,0,4,2,1,34,4,3,2,0,4,3,2,34,4,0,3,0,4,0,3,35,5,6,7,8,1,5,6,7,8,34,6,5,9,1,6,5,9,34,9,7,6,1,9,7,6,34,9,8,7,1,9,8,7,34,9,5,8,1,9,5,8,35,10,11,12,13,2,10,11,12,13,34,11,10,14,2,11,10,14,34,14,12,11,2,14,12,11,34,14,13,12,2,14,13,12,34,14,10,13,2,14,10,13,35,15,16,17,18,3,15,16,17,18,34,16,15,19,3,16,15,19,34,19,17,16,3,19,17,16,34,19,18,17,3,19,18,17,34,19,15,18,3,19,15,18,35,20,21,22,23,4,20,21,22,23,34,21,20,24,4,21,20,24,34,24,22,21,4,24,22,21,34,24,23,22,4,24,23,22,34,24,20,23,4,24,20,23],

	"bones" : [],

	"skinIndices" : [],

	"skinWeights" : [],

	"animation" : {}


};

var cloud2JSON = {

	"metadata" :
	{
		"formatVersion" : 3.1,
		"generatedBy"   : "Blender 2.66 Exporter",
		"vertices"      : 23,
		"faces"         : 42,
		"normals"       : 23,
		"colors"        : 0,
		"uvs"           : [],
		"materials"     : 1,
		"morphTargets"  : 0,
		"bones"         : 0
	},

	"scale" : 1.000000,

	"materials" : [	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "Material",
		"blending" : "NormalBlending",
		"colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorSpecular" : [0.5, 0.5, 0.5],
		"depthTest" : true,
		"depthWrite" : true,
		"shading" : "Lambert",
		"specularCoef" : 50,
		"transparency" : 1.0,
		"transparent" : false,
		"vertexColors" : false
	}],

	"vertices" : [0.264565,0.190335,0.23983,-0.407119,0.282942,0.292677,-0.399785,0.337511,-0.300026,0.268916,0.190184,-0.234818,0.207358,0.456511,0.298214,-0.199247,0.406566,0.294489,-0.150372,0.469028,-0.297686,0.199243,0.509608,-0.294489,-0.210521,0.172333,-0.33376,-0.216009,0.172524,0.264947,0.341617,0.371295,0.181447,0.346175,0.408321,-0.175147,0.536695,0.167716,0.0936085,0.543608,0.159727,-0.063679,0.566838,0.26125,0.0837765,0.573751,0.253262,-0.0735111,-0.443357,0.339024,-0.00404965,-0.328773,0.373073,-0.0031145,-0.600928,0.264937,0.17272,-0.597605,0.264821,-0.18982,-0.688149,0.170952,-0.157842,-0.559727,0.166492,0.155074,-0.693294,0.268144,-0.00941288],

	"morphTargets" : [],

	"normals" : [-0.286019,0.956389,0.058992,-0.438643,0.516984,-0.735038,-0.548143,0.657582,-0.51677,0.295846,0.607746,0.73693,0.321055,0.698996,-0.638966,-0.219245,0.636219,0.739647,0.258614,-0.675375,0.690603,0.006653,-0.756706,0.653706,-0.373028,0.925108,0.070742,-0.029695,-0.651448,-0.75808,0.309915,-0.674306,-0.670247,0.653523,0.537522,0.532853,-0.406171,0.243629,0.880703,-0.433637,-0.790613,0.432234,0.541215,-0.688986,0.482009,-0.721793,0.346141,0.599292,0.686941,0.572253,-0.447859,0.541337,-0.750755,-0.378521,0.839442,0.306742,0.448531,-0.782464,-0.461745,-0.417707,-0.914151,0.362102,0.182104,-0.210456,0.771966,-0.59978,0.853755,0.202277,-0.47972],

	"colors" : [],

	"uvs" : [],

	"faces" : [34,16,2,19,0,0,1,2,34,4,7,5,0,3,4,5,34,0,4,9,0,6,3,7,34,16,17,2,0,0,8,1,34,8,7,3,0,9,4,10,34,7,4,10,0,4,3,11,34,9,1,21,0,7,12,13,34,0,3,12,0,6,10,14,34,1,16,18,0,12,0,15,34,3,11,13,0,10,16,17,34,14,12,13,0,18,14,17,34,21,18,20,0,13,15,19,34,11,10,14,0,16,11,18,34,3,7,11,0,10,4,16,34,10,0,12,0,11,6,14,34,4,0,10,0,3,6,11,34,1,5,17,0,12,5,8,34,0,9,8,0,6,7,9,34,8,9,21,0,9,7,13,34,2,8,20,0,1,9,19,34,22,16,19,0,20,0,2,34,7,6,5,0,4,21,5,34,6,17,5,0,21,8,5,34,4,5,9,0,3,5,7,34,5,1,9,0,5,12,7,34,17,6,2,0,8,21,1,34,2,6,8,0,1,21,9,34,6,7,8,0,21,4,9,34,11,7,10,0,16,4,11,34,1,18,21,0,12,15,13,34,3,13,12,0,10,17,14,34,16,22,18,0,0,20,15,34,11,15,13,0,16,22,17,34,15,14,13,0,22,18,17,34,18,22,20,0,15,20,19,34,22,19,20,0,20,2,19,34,15,11,14,0,22,16,18,34,14,10,12,0,18,11,14,34,16,1,17,0,0,12,8,34,3,0,8,0,10,6,9,34,20,8,21,0,19,9,13,34,19,2,20,0,2,1,19],

	"bones" : [],

	"skinIndices" : [],

	"skinWeights" : [],

	"animation" : {}


};

var mountainJSON = {

	"metadata" :
	{
		"formatVersion" : 3.1,
		"generatedBy"   : "Blender 2.66 Exporter",
		"vertices"      : 35,
		"faces"         : 62,
		"normals"       : 33,
		"colors"        : 0,
		"uvs"           : [],
		"materials"     : 1,
		"morphTargets"  : 0,
		"bones"         : 0
	},

	"scale" : 1.000000,

	"materials" : [	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "Material",
		"blending" : "NormalBlending",
		"colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorSpecular" : [0.5, 0.5, 0.5],
		"depthTest" : true,
		"depthWrite" : true,
		"shading" : "Lambert",
		"specularCoef" : 50,
		"transparency" : 1.0,
		"transparent" : false,
		"vertexColors" : false
	},

	{
		"DbgColor" : 15597568,
		"DbgIndex" : 1,
		"DbgName" : "Material.001",
		"blending" : "NormalBlending",
		"colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorSpecular" : [0.5, 0.5, 0.5],
		"depthTest" : true,
		"depthWrite" : true,
		"shading" : "Lambert",
		"specularCoef" : 50,
		"transparency" : 1.0,
		"transparent" : false,
		"vertexColors" : false
	}],

	"vertices" : [2.17009,0.153452,-2.17009,2.17009,0.153452,2.17009,-2.17009,0.153452,2.17009,-2.17009,0.153452,-2.17009,-2.91031e-07,4.49362,1.91619e-07,1.08504,2.32354,-1.08504,0.891023,2.32354,1.00672,-1.08504,2.32354,1.08504,-1.08504,2.32354,-1.08504,1.29347e-07,0.153452,-2.65402e-07,0.542521,3.40858,-0.542521,0.542521,3.40858,0.542522,-0.542522,3.40858,0.542521,-0.376421,3.40858,-0.400276,1.40716,1.2385,-1.57311,1.62756,1.2385,1.62756,-1.62756,1.2385,1.62756,-1.37014,1.2385,-1.62757,1.1841,2.24572,-1.1841,-1.1841,2.24572,1.1841,-1.11578,2.47252,-1.1069,-1.588e-07,4.61392,1.00529e-08,0.592051,3.42982,-0.592051,0.733736,3.42982,0.583214,-0.592051,3.42982,0.59205,-0.59205,3.42982,-0.592051,7.05779e-08,2.74005,-2.60927e-07,0.296025,4.02187,-0.296025,0.296025,4.02187,0.296025,-0.296025,4.02187,0.296025,-0.205393,4.02187,-0.21841,0.964179,2.83777,-0.922798,0.888076,2.83777,0.888076,-1.0379,2.83777,0.888076,-0.921388,2.83777,-0.888076],

	"morphTargets" : [],

	"normals" : [-0.039125,0.998566,-0.0365,0.548051,0.560198,-0.621113,-0.542863,0.568773,-0.617847,-0.563402,0.577227,0.591052,-0.605152,0.550859,-0.574694,-0.576586,0.585223,0.570086,0,-1,0,0.662618,-0.34904,0.662618,-0.662618,-0.34904,0.662618,0.659597,0.517777,-0.544786,0.523545,0.609272,-0.595508,-0.495315,0.587756,-0.639668,0.679312,-0.313791,-0.66335,0.624989,0.509537,0.591357,-0.582904,0.599414,0.548479,0.566485,0.575976,0.589312,0.565844,0.618549,0.545122,-0.683187,-0.315256,-0.65865,0.520768,0.57561,-0.630421,-0.528489,0.621265,0.578509,-0.545244,0.614643,-0.569994,-0.550676,0.623157,-0.555315,0.491043,0.631916,-0.599597,0.615497,0.540819,-0.573229,-0.639393,-0.355052,-0.681967,0.54564,0.609455,0.575121,-0.587054,0.605335,0.537461,0.640614,-0.277413,0.715964,0.6339,0.568743,0.524064,-0.646413,0.545885,0.533036,-0.517624,-0.52736,0.673727,0.633473,-0.519639,-0.57326,0.08591,-0.992523,0.086367],

	"colors" : [],

	"uvs" : [],

	"faces" : [34,4,10,13,0,0,1,2,34,7,8,16,0,3,4,5,34,9,1,2,0,6,7,8,34,13,10,5,0,2,1,9,34,14,17,5,0,10,11,9,34,14,0,17,0,10,12,11,34,10,4,11,0,1,0,13,34,11,4,12,0,13,0,14,34,13,8,12,0,2,4,14,34,12,4,13,0,14,0,2,34,10,11,6,0,1,13,15,34,15,14,6,0,16,10,15,34,15,0,14,0,16,12,10,34,11,12,6,0,13,14,15,34,16,15,6,0,5,16,15,34,15,16,1,0,16,5,7,34,3,2,16,0,17,8,5,34,0,1,9,0,12,7,6,34,0,9,3,0,12,6,17,34,8,7,12,0,4,3,14,34,3,9,2,0,17,6,8,34,8,13,5,0,4,2,9,34,17,8,5,0,11,4,9,34,17,0,3,0,11,12,17,34,1,0,15,0,7,12,16,34,5,10,6,0,9,1,15,34,14,5,6,0,10,9,15,34,16,2,1,0,5,8,7,34,12,7,6,0,14,3,15,34,7,16,6,0,3,5,15,34,17,3,16,0,11,17,5,34,8,17,16,0,4,11,5,34,21,27,30,1,0,18,2,34,24,25,34,1,19,20,21,34,30,27,22,1,2,18,22,34,31,34,22,1,23,21,22,34,34,31,20,1,21,23,24,34,27,21,28,1,18,0,25,34,28,21,29,1,25,0,26,34,30,25,29,1,2,20,26,34,29,21,30,1,26,0,2,34,27,28,22,1,18,25,22,34,32,31,23,1,27,23,28,34,28,29,24,1,25,26,19,34,33,32,24,1,29,27,19,34,32,33,19,1,27,29,30,34,20,19,33,1,24,30,29,34,32,18,31,1,27,31,23,34,18,26,20,1,31,32,24,34,26,18,32,1,32,31,27,34,19,26,32,1,30,32,27,34,26,19,20,1,32,30,24,34,33,24,34,1,29,19,21,34,25,30,22,1,20,2,22,34,34,25,22,1,21,20,22,34,31,18,20,1,23,31,24,34,31,22,23,1,23,22,28,34,28,23,22,1,25,28,22,34,23,28,24,1,28,25,19,34,32,23,24,1,27,28,19,34,34,20,33,1,21,24,29,34,25,24,29,1,20,19,26],

	"bones" : [],

	"skinIndices" : [],

	"skinWeights" : [],

	"animation" : {}


};

var cloud1JSON = {

	"metadata" :
	{
		"formatVersion" : 3.1,
		"generatedBy"   : "Blender 2.66 Exporter",
		"vertices"      : 23,
		"faces"         : 42,
		"normals"       : 23,
		"colors"        : 0,
		"uvs"           : [],
		"materials"     : 1,
		"morphTargets"  : 0,
		"bones"         : 0
	},

	"scale" : 1.000000,

	"materials" : [	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "Material",
		"blending" : "NormalBlending",
		"colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorSpecular" : [0.5, 0.5, 0.5],
		"depthTest" : true,
		"depthWrite" : true,
		"shading" : "Lambert",
		"specularCoef" : 50,
		"transparency" : 1.0,
		"transparent" : false,
		"vertexColors" : false
	}],

	"vertices" : [0.3966,0.238884,0.240987,-0.587449,0.35083,0.290995,-0.582013,0.439416,-0.301721,0.400953,0.238884,-0.233672,0.29364,0.745033,0.299076,-0.299076,0.831431,0.29364,-0.2097,0.909423,-0.298306,0.299076,0.831431,-0.29364,-0.297767,0.183136,-0.334636,-0.303258,0.183136,0.264085,0.499559,0.535611,0.182898,0.50283,0.595696,-0.173705,1.57441,0.217608,0.0981573,1.58424,0.205087,-0.0591095,1.61359,0.370436,0.0884378,1.62342,0.357915,-0.0688291,-0.644388,0.439416,-0.00590975,-0.495559,0.831431,-0.004545,-1.36215,0.310859,0.168796,-1.35882,0.310859,-0.193751,-1.48598,0.1541,-0.162139,-1.29715,0.1541,0.151338,-1.49778,0.310859,-0.0137364],

	"morphTargets" : [],

	"normals" : [-0.603076,0.791009,0.102603,-0.386029,0.372753,-0.843806,-0.319712,0.590777,-0.740745,0.386853,0.574602,0.721183,0.436933,0.670736,-0.599292,-0.21308,0.657826,0.722373,0.138096,-0.68096,0.719138,0.042116,-0.733573,0.678274,-0.683737,0.729423,0.02002,0.025422,-0.680135,-0.732627,0.173956,-0.687521,-0.704978,0.490677,0.528794,0.692496,-0.285958,0.177099,0.94171,-0.321116,-0.736595,0.595172,0.49382,-0.615101,0.614582,-0.550493,0.415601,0.724021,0.580462,0.583514,-0.567888,0.526566,-0.689505,-0.497238,0.696829,0.476363,0.536149,-0.722465,-0.525651,-0.44911,-0.882382,0.424451,0.202918,-0.13712,0.779077,-0.611713,0.733909,0.385876,-0.558946],

	"colors" : [],

	"uvs" : [],

	"faces" : [34,16,2,19,0,0,1,2,34,4,7,5,0,3,4,5,34,0,4,9,0,6,3,7,34,16,17,2,0,0,8,1,34,8,7,3,0,9,4,10,34,7,4,10,0,4,3,11,34,9,1,21,0,7,12,13,34,0,3,12,0,6,10,14,34,1,16,18,0,12,0,15,34,3,11,13,0,10,16,17,34,14,12,13,0,18,14,17,34,21,18,20,0,13,15,19,34,11,10,14,0,16,11,18,34,3,7,11,0,10,4,16,34,10,0,12,0,11,6,14,34,4,0,10,0,3,6,11,34,1,5,17,0,12,5,8,34,0,9,8,0,6,7,9,34,8,9,21,0,9,7,13,34,2,8,20,0,1,9,19,34,22,16,19,0,20,0,2,34,7,6,5,0,4,21,5,34,6,17,5,0,21,8,5,34,4,5,9,0,3,5,7,34,5,1,9,0,5,12,7,34,17,6,2,0,8,21,1,34,2,6,8,0,1,21,9,34,6,7,8,0,21,4,9,34,11,7,10,0,16,4,11,34,1,18,21,0,12,15,13,34,3,13,12,0,10,17,14,34,16,22,18,0,0,20,15,34,11,15,13,0,16,22,17,34,15,14,13,0,22,18,17,34,18,22,20,0,15,20,19,34,22,19,20,0,20,2,19,34,15,11,14,0,22,16,18,34,14,10,12,0,18,11,14,34,16,1,17,0,0,12,8,34,3,0,8,0,10,6,9,34,20,8,21,0,19,9,13,34,19,2,20,0,2,1,19],

	"bones" : [],

	"skinIndices" : [],

	"skinWeights" : [],

	"animation" : {}


};

/* POLYGON */
var POL = function (vertices, obj) {
		var comma,
			i;
			
		if (vertices instanceof Array === true) {
			this.vertices = vertices;
		} else if (typeof(vertices) == 'string') {
			comma = vertices.indexOf(' ') > vertices.indexOf(',') ? false : true; //determine if comma or space delimeted

			if (comma) {
				this.vertices = vertices.split(',');
				for (i = 0; i < this.vertices.length; i += 1) {
					this.vertices[i] = this.vertices[i].split(' ');
				}
			} else {
				this.vertices = vertices.split(' ');
				for (i = 0; i < this.vertices.length; i += 1) {
					this.vertices[i] = this.vertices[i].split(',');
				}
			}
		}
	};
	
	POL.prototype.setContext = function (ctx) {
		this.ctx = ctx;
	};

	POL.prototype.setClip = function (clipTarget) {
		this.clipTarget = clipTarget;
	};
	
	POL.prototype.getVertices = function () {
		return this.vertices;
	};
	
	/**
	* create canvas polygon out of vertices
	*/
	POL.prototype.canvasPolygon = function (vertices) {
		var i,
			vertices = vertices ? vertices : this.vertices;

		if (this.ctx) {
			this.ctx.beginPath();
			this.ctx.moveTo(vertices[0][0], vertices[0][1]);

			for (i = 1; i < vertices.length; i += 1) {
				this.ctx.lineTo(vertices[i][0], vertices[i][1]);
			}

			this.ctx.closePath();
		}
	};

	/**
	* create clip path out of vertices
	*/
	POL.prototype.clipPolygon = function (vertices) {
		var i,
			clipString,
			vertices = vertices ? vertices : this.vertices;

		if (this.clipTarget) {
			clipString = "polygon(";

			for (i = 0; i < vertices.length; i += 1) {
				clipString += vertices[i][0] + "px " + vertices[i][1] + 'px';

				if (i < vertices.length - 1) {
					clipString += ", ";
				}
			}

			clipString += ")";
			this.clipTarget.style.webkitClipPath = clipString;
		}
	};


var FigureView = function (options) {
  this.el = options.el;
  this.$el = $(this.el);
  this.initialize();
};

FigureView.prototype = {

		initialize: function () {
			this.figcaption = this.$el.find('figcaption')[0];
			
			this.canvas = document.createElement('canvas');
			this.canvas.width = 500;
			this.canvas.height = 300;
			
			this.ctx = this.canvas.getContext('2d');
			
			this.$el.prepend(this.canvas);
			
			var vertices1 = '176.507,26.975 270.11,0 399.519,6.939 457.684,61.974 443.204,138.881 469.982,213.852 331.876,235.904 196.589,209.441 61.302,236.454 0,158.726 42.279,99.191 66.587,28.076';
			this.polygon1 = new POL(vertices1);
			this.polygon1.setContext(this.ctx);
			
			var vertices2 = '61.985,79.344 47.188,135.573 87.351,198.417 182.475,198.417 273.37,188.494 309.306,208.34 404.43,191.802 404.43,120.689 423.454,69.233 326.217,33.038 253.289,69.233 205.727,33.038 123.287,69.233';
			this.polygon2 = new POL(vertices2);
			this.polygon2.setContext(this.ctx);
			
			var vertices3 = '180.758,85.892 180.128,88.285 181.837,90.958 185.885,90.958 189.752,90.536 191.281,91.381 195.329,90.677 195.329,87.651 196.138,85.462 192.001,83.922 188.898,85.462 186.874,83.922 183.366,85.462';
			this.clip1 = new POL(vertices3);
			
			var vertices4 = '-105.931,17.51 -131.035,112.902 -62.898,219.517 98.479,219.517 252.684,202.683 313.649,236.351 475.026,208.295 475.026,87.651 507.301,0.356 342.338,-61.049 218.616,0.356 137.927,-61.049 -1.933,0.356';
			this.clip2 = new POL(vertices4);
			
			this.clip1.setClip(this.figcaption);
			this.clip2.setClip(this.figcaption);
		      
      window.addEventListener('scroll', function() {
        console.log('mousewheel');
			  if (this.$el.offset().top >= window.pageYOffset
			  	&& this.$el.offset().top + (this.$el.height() / 2) <= window.pageYOffset + height) 
			  {
			  	if (!this.$el.hasClass('in')) {
			  		this.$el.addClass('in');
			  	}
			  } else {
			  	if (this.$el.hasClass('in')) {
			  		this.$el.removeClass('in');
			  	}
		  	}
      }.bind(this));
      
			this.render();
		},
		
		render: function () {
			this.ctx.fillStyle = "rgba(38, 14, 10, 0.7)";
			this.polygon1.canvasPolygon();	
			this.ctx.fill();
			
			this.ctx.fillStyle = "rgba(38, 14, 10, 0.7)";
			this.polygon2.canvasPolygon();	
			this.ctx.fill();
		},
		
		resize: function () {
			width = window.innerWidth;
			height = window.innerHeight;
		}
}

$('figure').each(function () {
  new FigureView({el: this});
});


//BG
	var models = [
    {url: 'http://radiolights.com/TEST/scroll/assets/models/waterfall.js', json: cloud1JSON, geometry: null},
    {url: 'http://radiolights.com/TEST/scroll/assets/models/cloud1.js', json: cloud1JSON, geometry: null},
		{url: 'http://radiolights.com/TEST/scroll/assets/models/cloud2.js', json: cloud2JSON, geometry: null},{url: 'http://radiolights.com/TEST/scroll/assets/models/tree1.js', json: tree1JSON, geometry: null},
		{url: 'http://radiolights.com/TEST/scroll/assets/models/tree2.js', json: tree2JSON, geometry: null},
		{url: 'http://radiolights.com/TEST/scroll/assets/models/tree3.js', json: tree3JSON, geometry: null},
		{url: 'http://radiolights.com/TEST/scroll/assets/models/mountain1.js', json: mountainJSON, geometry: null}
	];

var Background = function () {
  var instance = this;
 			this.d = 0;
			this.worldCenter = {y: -3500 + window.innerWidth / 2};
			loadModels(); 
    
  function addBg(x, y) {
    var geometry,
			 	material,
				mountains;
				
			geometry= new THREE.CubeGeometry( 14000, 120, 2000, 10, 10, 10 );
			THREE.GeometryUtils.triangulateQuads(geometry);
			
			for (var i = 0; i < geometry.vertices.length; i += 1) {
				var vertice = geometry.vertices[i];
                vertice.y = vertice.y + Math.random() * 200;
                vertice.x = vertice.x + Math.random() * 100;

				if (vertice.z > 0) {
					vertice.y -= 100;
				}
			}
			
			material = new THREE.MeshLambertMaterial({
				ambient: 0x000000, 
				color: 0x443053, 
				shading: THREE.FlatShading
			});
			
			mountains = new THREE.Mesh(geometry, material);
			mountains.position.set(0, instance.worldCenter.y + 3500, -4000);
			instance.scene.add(mountains);
  }
  
  function addSky() {
    			var sky,
				material,
				geometry;
					
			geometry = new THREE.PlaneGeometry(30000, 20000, 10, 10);
			
			skyUniforms = {
            	time: {
                	type: 'f',
                	value: 1.0
            	},
				delta: {
                	type: 'f',
                	value: 1.0
            	}
            };

            material = new THREE.ShaderMaterial({
                uniforms: skyUniforms,
                vertexShader: document.getElementById('skyVS').innerText,
                fragmentShader: document.getElementById('skyFS').innerText
            });
			
			sky = new THREE.Mesh(geometry, material);
			sky.position.set(0, -5000, -5000);
			
			instance.scene.add(sky);
  }
  
  function addStars() {
    
  }
  
  function addTerrain() {
    var worldGeometry = new THREE.CubeGeometry( 14000, 7000, 3000, 100, 50, 50 );
			THREE.GeometryUtils.triangulateQuads(worldGeometry);
			
			var colorArray = [0x2c1914, 0x231410, 0x341e18, 0x39201a]
			
			for (var i = 0; i < worldGeometry.faces.length; i += 1) {
				var face = worldGeometry.faces[i];
				random = Math.floor(Math.random() * colorArray.length);
				face.color.setHex(colorArray[random]);
			}
			
			for (var i = 0; i < worldGeometry.vertices.length; i += 1) {
				var vertice = worldGeometry.vertices[i];
				if (vertice.x < -500 || vertice.x > 500) {
                	vertice.z = vertice.z + Math.random() * 50;
                	vertice.y = vertice.y + Math.random() * 50;
                	vertice.x = vertice.x + Math.random() * 50;
				} else if (vertice.y == 3500) {
					vertice.y -= 100;
				} else if (vertice.y == -3500) {
					vertice.y += 100;
				}
				
				if (vertice.z == 1500) {
					vertice.z -= 100;
				}
				
			}
			
			var worldMaterial = new THREE.MeshLambertMaterial({
				ambient: 0xffffff, 
				color: 0xcccccc, 
				vertexColors: THREE.FaceColors, 
				shading: THREE.FlatShading, 
				shadows: true,
				receiveShadow: true
			});

			instance.terrain = new THREE.Mesh( worldGeometry, worldMaterial );
			instance.terrain.receiveShadow = true;
			instance.terrain.position.y = -3500 + window.innerWidth / 2;
			instance.terrain.position.z = -1500;		
			instance.scene.add( instance.terrain );
  }
  
  function addWater() {
    			var material,
				geometry;
				
			geometry = new THREE.CubeGeometry( 3010, 7010, 1000, 10, 60, 10 );
			THREE.GeometryUtils.triangulateQuads(geometry);
			
			var colorArray = [0x142c4c, 0x132a49, 0x1a3a65, 0x112541];
			
			for (var i = 0; i < geometry.faces.length; i += 1) {
				var face = geometry.faces[i];
				random = Math.floor(Math.random() * colorArray.length);
				face.color.setHex(colorArray[random]);
			}
			
			for (var i = 0; i < geometry.vertices.length; i += 1) {
				var vertice = geometry.vertices[i];
                vertice.z = vertice.z + Math.random() * 50; //connect at seam
                vertice.y = vertice.y + Math.random() * 50; //connect at seam
			}
			
			material = new THREE.MeshPhongMaterial({
				vertexColors: THREE.FaceColors, 
				emissive: 0x333333, 
				specular: 0xcccccc, 
				color: 0xcccccc, 
				opacity: 0.85, 
				transparent: true, 
				shading: THREE.FlatShading
			});
			instance.water = new THREE.Mesh(geometry, material);
			instance.water.position.x = 40;
			instance.water.position.y = -3500 + window.innerWidth / 2;
			instance.water.position.z = -1500;
			instance.water.rotation.y = -90 * Math.PI / 180;
			
			instance.scene.add(instance.water);
  }
  
  function addMountains(x, y, z) {
    	var tree,
				material,
				geometry,
				size,
				i,
				branch,
				scale = 3 + Math.random() * 1;
			
			tree = new THREE.Object3D();
			tree.receiveShadow = true;
		
			geometry = models[6].geometry;
			THREE.GeometryUtils.triangulateQuads(geometry);
			
			materials = models[6].materials;			
			
			//white
			var colorArray = [0xcdced7, 0xdbdeef, 0xccd2ef];
			
			for (var j = 0; j < geometry.faces.length; j += 1) {
				var face = geometry.faces[j];
				random = Math.floor(Math.random() * colorArray.length);
				face.color.setHex(colorArray[random]);
			}
						
			materials[1] = new THREE.MeshLambertMaterial({
				ambient: 0x000000, 
				color: 0xe6e7f3, 
				lights: true, 
				shadows: true, 
				receiveShadow: true,
				vertexColors: THREE.FaceColors, 
				shading: THREE.FlatShading
			});
			
			//gray
			var colorArray = [0x8d8c9e, 0xaaa8be, 0x92919e];
			
			for (var j = 0; j < geometry.faces.length; j += 1) {
				var face = geometry.faces[j];
				random = Math.floor(Math.random() * colorArray.length);
				face.color.setHex(colorArray[random]);
			}
			
			materials[0] = new THREE.MeshLambertMaterial({
				ambient: 0x000000, 
				color: 0x525162, 
				lights: true, 
				shadows: true, 
				receiveShadow: true,
				vertexColors: THREE.FaceColors, 
				shading: THREE.FlatShading
			});
			
			var material = new THREE.MeshFaceMaterial(materials);
			
			tree = new THREE.Mesh(geometry, material);
			
			tree.scale.set(200, 200, 200);
			tree.position.set(x, y, z);
			
			instance.scene.add(tree);
  }
  
  function addClouds(x, y, z) {
    console.log('hi');
    var cloud,
				material,
				geometry,
				scale = 0.4 + Math.random() * 0.3;
		
			var randCloud = 1 + Math.floor(Math.random() * 2);
			geometry = models[randCloud].geometry;

			material = new THREE.MeshLambertMaterial({
				ambient: 0x000000, 
				color: 0x7e559f, 
				opacity: 0.2, 
				transparent: true,
				side: THREE.DoubleSide,
				shading: THREE.FlatShading
			});
			cloud = new THREE.Mesh(geometry, material);
			cloud.position.set(x, y, z);
			cloud.scale.set(500 * (1 + Math.random()), 500 * (0.5 + Math.random() * 0.5), 500);
			
			instance.clouds.push(cloud);
			instance.scene.add(cloud);
  }
  
  function addTree(x, y, z) {
    			var tree,
				material,
				geometry,
				size,
				i,
				branch,
				scale = 1.0 + Math.random() * 0.5;
			
			var randTree = 3 + Math.floor(Math.random() * 3);
			geometry = models[randTree].geometry;			
			THREE.GeometryUtils.triangulateQuads(geometry);
			
			materials = models[randTree].materials;			
			
			var colorArray = [0x22520a, 0x2b4509]; //0x529b13
    
			for (i = 0; i < materials.length; i += 1) {
			  materials[i] = new THREE.MeshLambertMaterial({
					ambient: 0x000000, 
					color: colorArray[Math.floor(Math.random() * colorArray.length)], 
					lights: true, 
					shadows: true, 
					receiveShadow: true,
					castShadow: true, 
					shading: THREE.FlatShading
				});
			}
			
			var material = new THREE.MeshFaceMaterial(materials);
			
			tree = new THREE.Mesh(geometry, material);
			tree.castShadow = true;
			tree.recieveShadow = true;
			tree.position.set(x, y, z);
			tree.rotation.y = Math.random() * 360;
			tree.scale.set(150 * scale, 100, 150 * scale);
			
			instance.scene.add(tree);
  }
  
  function modelsLoaded() {
        			
			instance.scene = new THREE.Scene();
			instance.scene.fog = new THREE.Fog(0x3d3248, 3000, 6000);			
      instance.scene.add(new THREE.AmbientLight(0xcccccc));
			
			instance.spotLight = new THREE.SpotLight(0xcccccc, 3, 10000);
			instance.spotLight.position.set(window.innerWidth, 0, 2000);
			instance.spotLight.castShadow = true;
			instance.spotLight.shadowMapWidth = 1024;
			instance.spotLight.shadowMapHeight = 1024;
			instance.spotLight.shadowCameraNear = 2;
			instance.spotLight.shadowCameraFar = 20000;
			instance.spotLight.shadowCameraFov = 35;
			instance.scene.add( instance.spotLight );
			
			instance.projector = new THREE.Projector();
			instance.mouse = new THREE.Vector2();
			
		  addBg();
			addSky();
			addStars();
			addTerrain();
			addWater();
			
			addMountains(2300, instance.worldCenter.y + 3500, -1000);
			addMountains(1900, instance.worldCenter.y + 3500, -2300);
			addMountains(1000, instance.worldCenter.y + 3500, -2000);
			addMountains(-2000, instance.worldCenter.y + 3500, -2000);
			addMountains(-2900, instance.worldCenter.y + 3500, -3000);
			addMountains(-3000, instance.worldCenter.y + 3500, -1000);
			
			instance.clouds = [];
			for (var i = 0; i < 3; i += 1) {
				var x = -5000 + Math.random() * 10000, 
					y = 1300 + Math.random() * 500, 
					z = -3000 + Math.random() * -1000;
				
				addClouds(x, y, z);
			}
			
			for (var i = 0; i < 100; i += 1) {
				var x = -3000 + Math.random() * 6000, 
					y = instance.worldCenter.y + 3500, 
					z = -3000 + Math.random() * 2500;
				
				x = x > 600 || x < -600 ? x : x + 1200;
				addTree(x, y, z);
			}

			// RENDERER
			instance.renderer = new THREE.WebGLRenderer({canvas: document.getElementById('ground'), antialias: true});
			instance.renderer.setSize( window.innerWidth, window.innerHeight );
			
			instance.camera = new THREE.PerspectiveCamera(35, width / height * 2, 2, 10000);
			instance.camera.position.set(0, 850, 2000 );
			instance.camera.rotation.set(0 * Math.PI / 180, 0, 0);
  };
  
  function loadModels() {
    var i = 0,
				loader,
        data,
				loaded = 0;
			        
    function parseModels(d) {
          models[loaded].geometry = d.geometry;
				  models[loaded].materials = d.material || d.materials;
				  loaded += 1;
          if (loaded == models.length) {
					  modelsLoaded();
				  } else {
				  	loader = new THREE.JSONLoader();
            data = loader.parse(models[loaded].json);
            parseModels(data);
				  }
    };
        
    loader = new THREE.JSONLoader();
    data = loader.parse(models[loaded].json);
    parseModels(data);
  };
  
  instance.render = function () {
    instance.d += 0.1;
    
    if (skyUniforms) {
				skyUniforms.delta.value += 0.1;
	  }
    
    if (instance.water) {
				for (var i = 0; i < instance.water.geometry.vertices.length; i += 1) {
					var vertice = instance.water.geometry.vertices[i];
					if (vertice.y > 3480) {
		                vertice.y = 3500 + Math.sin(instance.d + i + vertice.z) * 10;
					} else if (vertice.x > 1450) {	
						vertice.x = 1500 + Math.sin(instance.d + i + vertice.y) * 30;
					}
				}
				instance.water.geometry.verticesNeedUpdate = true;
    }
    
    if (instance.clouds) {
				for (var i = 0; i < instance.clouds.length; i += 1) {
					instance.clouds[i].position.x += 1;
				}
			}
    
    if (instance.camera) {
      //var scrollPos = -document.documentElement.scrollTop;
            let rect = document.documentElement.getBoundingClientRect();
      console.log(document.documentElement.scrollTop, rect.height, document.documentElement.scrollTop / (rect.height - window.innerHeight));
      
      let scrollPercent = document.documentElement.scrollTop / (rect.height - window.innerHeight);
      let scrollPos = -6661 * scrollPercent;
      instance.camera.position.y = 850 + scrollPos;
			instance.spotLight.position.y = scrollPos + 2000;
			instance.spotLight.target.position.y = scrollPos + 1000;

      instance.renderer.render( instance.scene, instance.camera );
		}	
    
  };
  
  instance.resize = function () {
    if (instance.renderer) {
				width = window.innerWidth;
				height = window.innerHeight;
				instance.renderer.setSize(width, height);
				instance.camera = new THREE.PerspectiveCamera(35, width / height * 2, 2, 10000);
				instance.camera.position.set(0, 850, 2000 );
				instance.camera.rotation.set(0 * Math.PI / 180, 0, 0);
				instance.renderer.render(instance.scene, instance.camera );
			}
  };
  
}

var bg = new Background();

function render() {
  bg.render();
  requestAnimationFrame(render);
}

requestAnimationFrame(render);
window.addEventListener('resize', bg.resize);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js