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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>three.js - Javascript 3D library</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>

			@font-face {
				font-family: 'inconsolata';
				src: url('files/inconsolata.woff') format('woff');
				font-weight: normal;
				font-style: normal;
			}

			* {
				box-sizing: border-box;
			}

			body {
				background-color: #ffffff;
				margin: 0px;
				font-family: 'inconsolata';
				font-size: 15px;
				line-height: 18px;
				color: #555;
			}

			h1 {
				margin-top: 30px;
				margin-bottom: 30px;
				margin-left: 20px;
				font-size: 25px;
				font-weight: normal;
			}

			h2 {
				color: #999;
				font-size: 18px;
				font-weight: normal;

				margin-top: 5px;
				margin-bottom: 30px;
			}

			hr {
				border: 0px;
				height: 1px;
				background-color: #ddd;
				margin: 30px 0px;
			}

			sup {
				position: relative;
				margin-left: 5px;
				font-size: 15px;
				top: -0.5em;
				vertical-align: top;
			}

			a {
				color: #2194CE;
				text-decoration: none;
			}

			a:hover {
				text-decoration: underline;
			}

			#panel {
				position: fixed;
				left: 0px;
				top: 0px;
				bottom: 0px;
				width: 180px;
				background: #ffffff;
			}

				#panel #content {
					padding: 0px 20px;
				}

				#panel img {
					outline: 1px solid #ccc;
					vertical-align: middle;
				}

				#panel #editor {
					margin-top: 30px;
					text-align: center;
				}

				#panel #resource {
					text-align: center;
				}

				#panel #book {
					margin-top: 20px;
					text-align: center;
				}

			#viewer {
				position: absolute;
				top: 0px;
				right: 0px;
				left: 180px;
				padding: 28px 20px;
			}

				#viewer #submit {
					position: absolute;
					top: 32px;
					right: 20px;
				}

				#viewer #projects a {
					display: block;
					width: 200px;
					height: 150px;
					float: left;
				}

				#viewer #projects img {
					width: 100%;
					height: 100%;
				}

				#viewer #projects img:hover {
					opacity: 0.75;
				}

			/* mobile */

			#expandButton {
				display: none;
				position: absolute;
				right: 20px;
				top: 12px;
				width: 32px;
				height: 32px;
			}

				#expandButton span {
					height: 2px;
					background-color: #2194CE;
					width: 16px;
					position: absolute;
					left: 8px;
					top: 10px;
				}

				#expandButton span:nth-child(1) {
					top: 16px;
				}

				#expandButton span:nth-child(2) {
					top: 22px;
				}

			@media all and ( max-width: 640px ) {
				h1 {
					margin-top: 20px;
					margin-bottom: 20px;
				}
				h2 {
					margin-bottom: 20px;
				}
				#panel {
					position: absolute;
					left: 0;
					top: 0;
					height: 480px;
					width: 100%;
					right: 0;
					z-index: 100;
					overflow: hidden;
					border-bottom: 1px solid #dedede;
				}
				#content {
					position: absolute;
					left: 0;
					top: 60px;
					right: 0;
					bottom: 0;
					font-size: 17px;
					line-height: 22px;
					text-align: center;
					overflow: auto;
				}
				#viewer {
					position: absolute;
					left: 0;
					top: 56px;
					width: 100%;
					height: calc(100% - 56px);
					overflow: auto;
				}
				#expandButton {
					display: block;
				}
				#panel.collapsed {
					height: 56px;
				}
			}

		</style>
	</head>
	<body>

		<script src="//cdn.webglstats.com/stat.js" defer="defer" async="async"></script>

		<script type="text/javascript">

		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-86951-15']);
		  _gaq.push(['_trackPageview']);

		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();

		</script>

		<div id="panel" class="collapsed">
			<h1>three.js<sup><a href="http://github.com/mrdoob/three.js/releases">r97</a></sup></h1>
			<a id="expandButton" href="#">
				<span></span>
				<span></span>
				<span></span>
			</a>
			<div id="content">
				<a href="docs/index.html#manual/introduction/Creating-a-scene">documentation</a><br />
				<a href="examples/">examples</a><br /><br />

				<a href="https://github.com/mrdoob/three.js/archive/master.zip">download</a><br /><br />

				<a href="https://github.com/mrdoob/three.js/">source code</a><br />
				<a href="https://stackoverflow.com/questions/tagged/three.js">questions</a><br />
				<a href="https://discourse.threejs.org/">forum</a><br />
				<a href="http://webchat.freenode.net/?channels=three.js">irc</a><br />
				<a href="https://threejs-slack.herokuapp.com">slack</a><br />
				<a href="https://plus.google.com/+ThreejsOrg">google+</a>

				<div id="editor">
					<a href="editor/"><img src="files/editor.png" width="127" height="89" /></a>
				</div>

				<hr />

				<div id="resource">
				<script>
					var resources = [
						'<a href="https://www.udacity.com/course/interactive-3d-graphics--cs291" target="_blank"><img src="files/udacity.png" width="121" height="152" /></a>',
						'<a href="http://davidscottlyons.com/threejs-intro/" target="_blank"><img src="files/intro.png" width="121" height="106" /></a>'
					];
					document.write( resources[ Math.floor( Math.random() * resources.length ) ] );
				</script>
				</div>

				<div id="book">
				<script>
					var books = [
						'<a href="http://shop.oreilly.com/product/0636920024729.do" target="_blank"><img src="files/books/webgl.png" width="100" height="132" /></a>',
						'<a href="https://www.packtpub.com/web-development/learning-threejs-javascript-3d-library-webgl-second-edition" target="_blank"><img src="files/books/learning-threejs-javascript-3d-library-webgl-second.png" width="100" height="123" /></a>',
						'<a href="https://www.packtpub.com/game-development/game-development-threejs" target="_blank"><img src="files/books/game-development-threejs.png" width="100" height="123" /></a>',
						'<a href="https://www.packtpub.com/web-development/threejs-essentials" target="_blank"><img src="files/books/threejs-essentials.png" width="100" height="124" /></a>',
						'<a href="https://www.packtpub.com/web-development/threejs-cookbook" target="_blank"><img src="files/books/threejs-cookbook.png" width="100" height="123" /></a>'
					];
					document.write( books[ Math.floor( Math.random() * books.length ) ] );
				</script>
				</div>
			</div>
		</div>

		<script>
		var panel = document.getElementById( 'panel' );
		var expandButton = document.getElementById( 'expandButton' );
		expandButton.addEventListener( 'click', function ( event ) {

			panel.classList.toggle( 'collapsed' );
			event.preventDefault();

		} );
		</script>

		<div id="viewer">

			<h2>featured projects</h2>
			<a id="submit" href="https://docs.google.com/forms/d/e/1FAIpQLSfrfc5cKz5HlWOYuYKP4igo0U0iUNtacfIwM54WEYXReJOO2Q/viewform">submit project</a>

			<div id="projects">

				<!-- July 2018 -->
				<a href="https://vr.with.in/" target="_blank"><img src="files/projects/within.png"></a>
				<a href="https://demos.littleworkshop.fr/track" target="_blank"><img src="files/projects/track.png"></a>
				<!-- June 2018 -->
				<a href="https://heraclosgame.com/" target="_blank"><img src="files/projects/heraclos.png"></a>
				<a href="http://goinghome.302chanwoo.com/" target="_blank"><img src="files/projects/goinghome.png"></a>
				<a href="http://oatthegoat.co.nz/" target="_blank"><img src="files/projects/oatthegoat.png"></a>
				<!-- May 2018 -->
				<a href="http://mathis-biabiany.fr/" target="_blank"><img src="files/projects/mathis-biabiany.png"></a>
				<a href="https://worlddraw.withgoogle.com/" target="_blank"><img src="files/projects/worlddraw.png"></a>
				<!-- January 2018 -->
				<a href="http://dddance.party/" target="_blank"><img src="files/projects/dddance.png"></a>
				<a href="http://demos.littleworkshop.fr/infinitown" target="_blank"><img src="files/projects/infinitown.png"></a>
				<a href="http://taotajima.jp/" target="_blank"><img src="files/projects/taotajima.png"></a>
				<!-- November 2017 -->
				<a href="https://poly.google.com/" target="_blank"><img src="files/projects/poly.png"></a>
				<a href="http://bertrandcandas.com/" target="_blank"><img src="files/projects/bertrandcandas.png"></a>
				<a href="https://hajimewatanabe.jp/portfolio/" target="_blank"><img src="files/projects/hajimewatanabe.png"></a>
				<a href="https://normanvr.com/" target="_blank"><img src="files/projects/normanvr.png"></a>
				<a href="http://www.nationalgeographic.com/science/2017/09/cassini-saturn-nasa-3d-grand-tour/" target="_blank"><img src="files/projects/cassinigrandtour.png"></a>
				<!-- October 2017 -->
				<a href="http://playdoh-lagaleriedesespeces.com/en/" target="_blank"><img src="files/projects/lagaleriedesespeces.png"></a>
				<!-- September 2017 -->
				<a href="https://alexanderperrin.com.au/paper/shorttrip/" target="_blank"><img src="files/projects/shorttrip.png"></a>
				<a href="https://experiments.withgoogle.com/webvr/inside-music/view/" target="_blank"><img src="files/projects/insidemusic.png"></a>
				<a href="http://vr.ff.com/us/" target="_blank"><img src="files/projects/ff.png"></a>
				<!-- August 2017 -->
				<a href="https://tonite.dance/" target="_blank"><img src="files/projects/dancetonite.png"></a>
				<!-- July 2017 -->
				<a href="https://emmitfenn.com/" target="_blank"><img src="files/projects/emmitfenn.png"></a>
				<a href="http://www.nationalgeographic.com/science/2016/11/exploring-mars-map-panorama-pictures/" target="_blank"><img src="files/projects/rewindtheredplanet.png"></a>
				<a href="https://panic.com/transmit/" target="_blank"><img src="files/projects/transmit5.png"></a>
				<a href="http://changegout.com/" target="_blank"><img src="files/projects/changegout.png"></a>
				<a href="http://showroom.littleworkshop.fr/" target="_blank"><img src="files/projects/webvrshowroom.png"></a>
				<a href="https://beinternetawesome.withgoogle.com/interland" target="_blank"><img src="files/projects/interland.png"></a>
				<a href="http://www.larsberg.net/" target="_blank"><img src="files/projects/larsberg.png"></a>
				<a href="http://www.nationalgeographic.com/magazine/2017/06/nodosaur-3d-interactive-dinosaur-fossil/" target="_blank"><img src="files/projects/resurrectingadragon.png"></a>
				<a href="http://letsplay.ouigo.com/" target="_blank"><img src="files/projects/ouigo.png"></a>
				<a href="https://nunustudio.org/" target="_blank"><img src="files/projects/nunustudio.png"></a>
				<a href="https://moments.epic.net/" target="_blank"><img src="files/projects/moments.png"></a>
				<a href="https://with.in/watch/under-neon-lights/" target="_blank"><img src="files/projects/neonlights.png"></a>
				<a href="http://vrdust.org.uk/" target="_blank"><img src="files/projects/vrdust.png"></a>
				<a href="https://3dc.io/" target="_blank"><img src="files/projects/3dc.png"></a>
				<a href="http://lab.samsy.ninja/" target="_blank"><img src="files/projects/samsylab.png"></a>
				<a href="http://www.veilhymn.com/" target="_blank"><img src="files/projects/veilhymn.png"></a>
				<a href="https://2050.earth/" target="_blank"><img src="files/projects/earth2050.png"></a>
				<a href="http://anagram.paris/" target="_blank"><img src="files/projects/anagram.png"></a>
				<a href="http://campoallecomete.it/" target="_blank"><img src="files/projects/campoallecomete.png"></a>
				<a href="https://saydnaya.amnesty.org/" target="_blank"><img src="files/projects/saydnaya.png"></a>
				<a href="https://weather.withspotify.com/" target="_blank"><img src="files/projects/climatune.png"></a>
				<a href="http://topotopo.io/" target="_blank"><img src="files/projects/topotopo.png"></a>
				<a href="http://www.welcometofillory.com/" target="_blank"><img src="files/projects/fillory.png"></a>
				<a href="http://www.5572320.jp/mu/" target="_blank"><img src="files/projects/5572320.png"></a>
				<a href="https://lucyhardcastle-thefifthsense.i-d.co/en_gb/" target="_blank"><img src="files/projects/lucyhardcastle.png"></a>
				<a href="http://www.acsl.co.jp/" target="_blank"><img src="files/projects/acsl.png"></a>

				<a href="http://christmasexperiments.com/" target="_blank"><img src="files/projects/christmasexperiments2016.png"></a>
				<a href="https://throughthedark.withgoogle.com/" target="_blank"><img src="files/projects/throughthedark.png"></a>
				<a href="https://paperplanes.world/" target="_blank"><img src="files/projects/paperworld.png"></a>
				<a href="http://www.robertadicamerino.com/" target="_blank"><img src="files/projects/robertadicamerino.png"></a>
				<a href="https://facebook.github.io/react-vr/" target="_blank"><img src="files/projects/reactvr.png"></a>
				<a href="https://predictiveworld.watchdogs.com/en/" target="_blank"><img src="files/projects/predictiveworld.png"></a>
				<a href="http://www.deprogrammed.org/" target="_blank"><img src="files/projects/deprogrammed.png"></a>
				<a href="http://www.gsmlondon.ac.uk/global-oil-map/" target="_blank"><img src="files/projects/globaloilmap.png"></a>
				<a href="http://analysis.4sceners.de/" target="_blank"><img src="files/projects/analysis.png"></a>
				<!-- <a href="https://kuva.io/" target="_blank"><img src="files/projects/kuva.png"></a> -->
				<a href="https://tkmh.me/" target="_blank"><img src="files/projects/tkmh.png"></a>
				<a href="https://masteredfromchaos.com/" target="_blank"><img src="files/projects/masteredfromchaos.png"></a>
				<!-- <a href="http://www.apple.com/macos/sierra/" target="_blank"><img src="files/projects/macossierra.png"></a> -->
				<a href="http://swissarmyman.com/" target="_blank"><img src="files/projects/swissarmyman.png"></a>
				<a href="http://annualreport.airbusgroup.com/" target="_blank"><img src="files/projects/flyingahead.png"></a>
				<a href="http://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/" target="_blank"><img src="files/projects/aviator.png"></a>
				<a href="http://particle-love.com/" target="_blank"><img src="files/projects/particlelove.png"></a>
				<a href="https://virtualart.chromeexperiments.com/" target="_blank"><img src="files/projects/virtualart.png"></a>
				<a href="http://ludumdare.com/compo/ludum-dare-35/?action=preview&uid=3671" target="_blank"><img src="files/projects/lasertown.png"></a>
				<a href="http://www.nowyouseeme.movie/" target="_blank"><img src="files/projects/nowyouseeme.png"></a>
				<a href="http://thelawofthejungle.com/" target="_blank"><img src="files/projects/lawjungle.png"></a>
				<a href="http://www.360syria.com/" target="_blank"><img src="files/projects/360syria.png"></a>
				<a href="http://www.lhbzr.com/" target="_blank"><img src="files/projects/lhbzr.png"></a>
				<a href="http://falter.wild.plus/" target="_blank"><img src="files/projects/falter.png"></a>
				<a href="https://uniqueflow.me/" target="_blank"><img src="files/projects/uniqueflow.png"></a>
				<!-- <a href="http://lafrenchtouch.martell.com/" target="_blank"><img src="files/projects/lafrenchtouch.png"></a> -->
				<!-- <a href="http://codeology.braintreepayments.com/" target="_blank"><img src="files/projects/codeology.png"></a> -->
				<a href="http://hands.wtf/" target="_blank"><img src="files/projects/handswtf.png"></a>
				<a href="http://www.ashortjourney.com/" target="_blank"><img src="files/projects/ashortjourney.png"></a>
				<a href="http://homunculus.jp/" target="_blank"><img src="files/projects/homunculus.png"></a>
				<a href="http://void-ii.hi-res.net/" target="_blank"><img src="files/projects/voidii.png"></a>
				<a href="http://2016.makemepulse.com/" target="_blank"><img src="files/projects/makemepulse2016.png"></a>
				<a href="https://aframe.io/" target="_blank"><img src="files/projects/aframe.png"></a>
				<a href="http://www.warof1996.com/" target="_blank"><img src="files/projects/warof1996.png"></a>
				<a href="http://www.ford.com/cars/mustang/customizer/#!/customize" target="_blank"><img src="files/projects/mustang.png"></a>
				<a href="https://kamra.invisi-dir.com/" target="_blank"><img src="files/projects/dejavu.png"></a>
				<a href="http://crystallizedskins.com/" target="_blank"><img src="files/projects/crystallizedskins.png"></a>
				<a href="http://www.cryptarismission.com/" target="_blank"><img src="files/projects/cryptaris.png"></a>
				<a href="http://rainforest.arkivert.no/" target="_blank"><img src="files/projects/rainforest.png"></a>
				<a href="http://lacostewinter.seeourwork.cn/en/" target="_blank"><img src="files/projects/lacostewinter.png"></a>
				<a href="http://breakthrough.nationalgeographic.com/" target="_blank"><img src="files/projects/breakthrough.png"></a>
				<a href="https://robertsspaceindustries.com/starmap" target="_blank"><img src="files/projects/starmap.png"></a>
				<a href="http://campaign.au.kddi.com/hello/" target="_blank"><img src="files/projects/warpscreen.png"></a>
				<a href="https://www.uberviz.io/" target="_blank"><img src="files/projects/uberviz.png"></a>
				<!-- <a href="http://www.porsche.com/microsite/911/usa.aspx#showroom/911-carrera-s/3/3/50/0/0" target="_blank"><img src="files/projects/porsche.png"></a> -->
				<a href="http://networkeffect.io/" target="_blank"><img src="files/projects/networkeffect.png"></a>
				<a href="http://unseen-music.com/yume/" target="_blank"><img src="files/projects/yume.png"></a>
				<a href="https://sparklinlabs.itch.io/superpowers" target="_blank"><img src="files/projects/superpowers.png"></a>
				<!-- <a href="https://ds-signatureart.com/" target="_blank"><img src="files/projects/signatureart.png"></a> -->
				<a href="http://www.playkeepout.com/" target="_blank"><img src="files/projects/playkeepout.png"></a>

				<!-- <a href="http://www.sennheiser-reshapingexcellence.com/" target="_blank"><img src="files/projects/reshapingexcellence.png"></a> -->
				<!-- <a href="http://www.orchestredeparis.com/resonance/" target="_blank"><img src="files/projects/resonance.png"></a> -->
				<a href="http://www.activation-nodeplus.com/" target="_blank"><img src="files/projects/nodeplus.png"></a>
				<a href="http://renaultespace.littleworkshop.fr/" target="_blank"><img src="files/projects/renaultespace.png"></a>
				<a href="http://ommexperience.com/" target="_blank"><img src="files/projects/ommexperience.png"></a>
				<!-- <a href="https://crazyskills.panasonic.com/" target="_blank"><img src="files/projects/crazyskills.png"></a> -->
				<a href="http://brunoquintela.com/" target="_blank"><img src="files/projects/brunoquintela.png"></a>
				<a href="http://void.hi-res.net/" target="_blank"><img src="files/projects/void.png"></a>
				<a href="http://cabbi.bo/enough/" target="_blank"><img src="files/projects/enough.png"></a>
				<!-- <a href="http://www.insidious-movie.net/entertheroom/" target="_blank"><img src="files/projects/entertheroom.png"></a> -->
				<a href="http://news-lab-trends-experiment.appspot.com/" target="_blank"><img src="files/projects/newslabtrends.png"></a>
				<a href="http://www.dennis.video/" target="_blank"><img src="files/projects/dennis.png"></a>
				<a href="http://www.fallen.io/ww2/" target="_blank"><img src="files/projects/fallenio.png"></a>
				<a href="http://www.sbs.com.au/theboat/" target="_blank"><img src="files/projects/theboat.png"></a>
				<a href="http://www.simonreeves.com/projects/db5/" target="_blank"><img src="files/projects/db5.png"></a>
				<!-- <a href="http://rainbowroad.jp/special03/" target="_blank"><img src="files/projects/rainbowroad.png"></a> -->
				<a href="http://earth.plus360degrees.com/" target="_blank"><img src="files/projects/earth.png"></a>
				<a href="http://phoboslab.org/wipeout/" target="_blank"><img src="files/projects/wipeout.png"></a>
				<!-- <a href="http://interactivehaiku.com/lifeisshort/" target="_blank"><img src="files/projects/lifeisshort.png"></a> -->
				<a href="http://vaalentin.github.io/2015/" target="_blank"><img src="files/projects/vaalentin.png"></a>
				<a href="http://wildflower.resn.co.nz/" target="_blank"><img src="files/projects/wildflower.png"></a>
				<a href="http://www.dilladimension.com/" target="_blank"><img src="files/projects/dilladimension.png"></a>
				<a href="http://www.clicktorelease.com/code/cruciform/" target="_blank"><img src="files/projects/cruciform.png"></a>
				<a href="http://a-way-to-go.com/" target="_blank"><img src="files/projects/waytogo.png"></a>
				<!-- <a href="http://www.urbangalaxyonline.com/" target="_blank"><img src="files/projects/urbangalaxyonline.jpg"></a> -->
				<!-- <a href="http://www.leiainc.com/" target="_blank"><img src="files/projects/leiainc.png"></a> -->
				<a href="http://www.heroforge.com/" target="_blank"><img src="files/projects/heroforge.png"></a>
				<!-- <a href="http://www.bullseyesplayground.com/" target="_blank"><img src="files/projects/bullseyesplayground.jpg"></a> -->
				<!-- <a href="http://christmasexperiments.com/" target="_blank"><img src="files/projects/christmasexperiments2014.png"></a> -->
				<a href="http://cabbi.bo/" target="_blank"><img src="files/projects/cabbibo.png"></a>
				<a href="http://thedivergentseries.com/" target="_blank"><img src="files/projects/thedivergentseries.png"></a>
				<a href="http://mozvr.com/" target="_blank"><img src="files/projects/mozvr.jpg"></a>
				<a href="http://peoplebehindthepixels.com/" target="_blank"><img src="files/projects/peoplebehindthepixels.jpg"></a>
				<a href="http://brian.peiris.io/RiftSketch/" target="_blank"><img src="files/projects/riftsketch.jpg"></a>
				<a href="http://pablotheflamingo.com/" target="_blank"><img src="files/projects/pablotheflamingo.jpg"></a>
				<a href="http://www.shapespark.com/" target="_blank"><img src="files/projects/shapespark.png"></a>
				<a href="http://witnessgotham.com/" target="_blank"><img src="files/projects/witnessgotham.jpg"></a>
				<a href="http://autodesk360.com/" target="_blank"><img src="files/projects/a360.png"></a>
				<!-- <a href="http://willbeatsnoise.com/" target="_blank"><img src="files/projects/gisele.jpg"></a> -->
				<a href="http://cityofdrones.io/" target="_blank"><img src="files/projects/cityofdrones.png"></a>
				<!-- <a href="https://www.g-star.com/en_nl/newdenimarrivals" target="_blank"><img src="files/projects/newdenimarrivals.png"></a> -->
				<a href="https://www.batmanarkhamknight.com/en_US/batmobile" target="_blank"><img src="files/projects/batmanarkhamknight.jpg"></a>
				<a href="http://www.potree.org/" target="_blank"><img src="files/projects/potree.jpg"></a>
				<a href="http://www.overthetinyhills.com/" target="_blank"><img src="files/projects/overthetinyhills.jpg"></a>
				<a href="http://vr.chromeexperiments.com/" target="_blank"><img src="files/projects/cardboard.jpg"></a>
				<a href="http://gorescript.com/classic/" target="_blank"><img src="files/projects/gorescript.jpg"></a>
				<a href="https://www.google.com/doodles/rubiks-cube" target="_blank"><img src="files/projects/rubiks-cube.jpg"></a>
				<a href="http://www.georgeandjonathan.com/" target="_blank"><img src="files/projects/georgeandjonathan.jpg"></a>
				<a href="http://www.nike.com/xp/b/genealogyofthefree/zoetrope.html" target="_blank"><img src="files/projects/genealogyofthefree.jpg"></a>
				<a href="http://i-remember.fr/en" target="_blank"><img src="files/projects/iremember.png"></a>
				<!-- <a href="http://ogreen.special-t.com/en/" target="_blank"><img src="files/projects/ogreen.jpg"></a> -->
				<!-- <a href="http://verold.com/" target="_blank"><img src="files/projects/verold.png"></a> -->
				<a href="http://carvisualizer.plus360degrees.com/classics/" target="_blank"><img src="files/projects/classics.png"></a>
				<!-- <a href="http://photosynth.net/preview" target="_blank"><img src="files/projects/photosynth.png"></a> -->
				<!-- <a href="http://helloracer.com/racer-s/" target="_blank"><img src="files/projects/racer-s.jpg"></a> -->
				<!-- <a href="http://christmasexperiments.com/2013/" target="_blank"><img src="files/projects/christmasexperiments.jpg"></a> -->
				<a href="http://middle-earth.thehobbit.com/" target="_blank"><img src="files/projects/thehobbit.jpg"></a>
				<a href="http://kiddisco.asmallgame.com/" target="_blank"><img src="files/projects/kiddisco.jpg"></a>
				<!-- <a href="http://gravitymovie.warnerbros.com/" target="_blank"><img src="files/projects/gravity.jpg"></a> -->
				<a href="https://www.justareflektor.com/" target="_blank"><img src="files/projects/reflektor.jpg"></a>
				<a href="http://clara.io/" target="_blank"><img src="files/projects/clara.png"></a>
				<a href="http://hellorun.helloenjoy.com" target="_blank"><img src="files/projects/hellorun.jpg"></a>
				<a href="http://acko.net/" target="_blank"><img src="files/projects/acko.jpg"></a>
				<!-- <a href="http://advertising.apple.com/" target="_blank"><img src="files/projects/iad.png"></a> -->
				<a href="http://cubeslam.com/" target="_blank"><img src="files/projects/cubeslam.jpg"></a>
				<!-- <a href="http://hyperlapse.tllabs.io/" target="_blank"><img src="files/projects/hyperlapse.jpg"></a> -->
				<!-- <a href="http://chrome.com/maze/" target="_blank"><img src="files/projects/wwmaze.jpg"></a> -->
				<!-- <a href="http://antivj.com/paleodictyon_app/" target="_blank"><img src="files/projects/paleodictyon.jpg"></a> -->
				<!-- <a href="http://www.findyourwaytooz.com/" target="_blank"><img src="files/projects/findyourwaytooz.jpg"></a> -->
				<a href="http://voxeljs.com/" target="_blank"><img src="files/projects/voxeljs.jpg"></a>
				<!-- <a href="http://christmasexperiments.com/2012/23/" target="_blank"><img src="files/projects/neverseenthesky.jpg"></a> -->
				<!-- <a href="http://www.google.com/zeitgeist/2012/#explore" target="_blank"><img src="files/projects/zeitgeist2012.jpg"></a> -->
				<a href="http://lab.sehsucht.de/" target="_blank"><img src="files/projects/zoetrope.jpg"></a>
				<a href="http://www.pillandpillow.com/mvsw/site/" target="_blank"><img src="files/projects/mvsw.jpg"></a>
				<!-- <a href="http://thecarpandtheseagull.thecreatorsproject.com/" target="_blank"><img src="files/projects/thecarpandtheseagull.jpg"></a> -->
				<a href="http://workshop.chromeexperiments.com/stars/" target="_blank"><img src="files/projects/100000stars.jpg"></a>
				<!-- <a href="http://theywilleatyou.com/" target="_blank"><img src="files/projects/theywilleatyou.jpg"></a> -->
				<!-- <a href="http://blast.hellohikimori.com/" target="_blank"><img src="files/projects/blast.jpg"></a> -->
				<a href="http://hexgl.bkcore.com/" target="_blank"><img src="files/projects/hexgl.jpg"></a>
				<a href="http://workshop.chromeexperiments.com/projects/armsglobe/" target="_blank"><img src="files/projects/armsglobe.jpg"></a>
				<a href="http://carvisualizer.plus360degrees.com/threejs/" target="_blank"><img src="files/projects/carvisualizer.jpg"></a>
				<a href="http://www.chromeweblab.com/" target="_blank"><img src="files/projects/chromeweblab.jpg"></a>
				<a href="http://lightgraffiti.littlesun.com/" target="_blank"><img src="files/projects/lightgraffiti.jpg"></a>
				<!-- <a href="http://www.pajamaclubmusic.com/3d/" target="_blank"><img src="files/projects/tntfortwo.jpg"></a> -->
				<a href="http://www.chaostoperfection.com/" target="_blank"><img src="files/projects/chaostoperfection.jpg"></a>
				<a href="http://www.sketchpatch.net/labs/livecodelabIntro.html" target="_blank"><img src="files/projects/livecodelab.jpg"></a>
				<a href="http://collinhover.github.com/kaiopua/" target="_blank"><img src="files/projects/kaiopua.jpg"></a>
				<a href="http://chandlerprall.github.com/Physijs/" target="_blank"><img src="files/projects/physijs.jpg"></a>
				<a href="http://www.playmapscube.com/" target="_blank"><img src="files/projects/googlecube.jpg"></a>
				<!-- <a href="http://triggerrally.com/" target="_blank"><img src="files/projects/triggerrally.jpg"></a> -->
				<!-- <a href="http://yagiz.me/zombiesvscow/" target="_blank"><img src="files/projects/zombiesvscow.jpg"></a> -->
				<!-- <a href="http://blackjk3.github.com/threefab/" target="_blank"><img src="files/projects/threefab.jpg"></a> -->
				<!-- <a href="http://dl.dropbox.com/u/6213850/WebGL/nyanCat/nyan.html" target="_blank"><img src="files/projects/nyancat.jpg"></a> -->
				<a href="http://idflood.github.io/ThreeNodes.js/" target="_blank"><img src="files/projects/threenodes.jpg"></a>
				<!-- <a href="http://www.adidas.com/football/uk/pages/f50/" target="_blank"><img src="files/projects/f50.jpg"></a> -->
				<!-- <a href="http://lights.helloenjoy.com/" target="_blank"><img src="files/projects/lights.jpg"></a> -->
				<a href="http://inear.se/beanstalk/" target="_blank"><img src="files/projects/beanstalk.jpg"></a>
				<!-- <a href="http://superfad.com/missioncontrol/" target="_blank"><img src="files/projects/missioncontrol.jpg"></a> -->
				<a href="http://www.ro.me/" target="_blank"><img src="files/projects/rome.jpg"></a>
				<a href="https://www.chromeexperiments.com/globe" target="_blank"><img src="files/projects/globe.jpg"></a>
				<a href="http://helloracer.com/webgl/" target="_blank"><img src="files/projects/helloracer.jpg"></a>
			</div>

		<script>

			// I wish I could do this with CSS

			var projects = document.getElementById( 'projects' );

			function resize() {

				var baseWidth = 200;
				var baseHeight = 150;

				var fullWidth = projects.clientWidth;
				var width = ( fullWidth / ( Math.ceil( fullWidth / baseWidth ) * baseWidth ) ) * baseWidth;
				var height = ( width / baseWidth ) * baseHeight;

				for ( var i = 0; i < projects.children.length; i ++ ) {

					var child = projects.children[ i ];

					child.style.width = width + 'px';
					child.style.height = height + 'px';

				}

			}

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

		</script>

		</div>

	</body>
</html>