javascript
/
three.js
zrkadlo https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
							<!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: #ccc;
				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 {
					border: 1px solid #ccc;
				}

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

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

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

				#viewer #more {
					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;
					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">r71</a></sup></h1>
			<a id="expandButton" href="#">
				<span></span>
				<span></span>
				<span></span>
			</a>
			<div id="content">
				<a href="examples/">examples</a>,
				<a href="http://stemkoski.github.io/Three.js/">more</a><br /><br />

				<a href="http://github.com/mrdoob/three.js/zipball/master">download</a>,
				<a href="http://cdnjs.com/libraries/three.js/">cdn</a><br /><br />

				<a href="docs/index.html#Manual/Introduction/Creating_a_scene">getting started</a><br />
				<a href="docs/">documentation</a><br />
				<a href="http://webchat.freenode.net/?channels=three.js">chat</a><br />
				<a href="http://stackoverflow.com/questions/tagged/three.js">help</a><br /><br />

				<a href="http://github.com/mrdoob/three.js/">github</a><br />
				<a href="http://github.com/mrdoob/three.js/contributors">contributors</a><br />
				<a href="http://github.com/mrdoob/three.js/wiki">wiki</a><br />
				<a href="http://github.com/mrdoob/three.js/issues">issues</a><br /><br />

				<a href="editor/">editor</a> (beta)

				<hr />

				<div id="resource">
				<script>
					var resources = [
						'<a href="http://www.udacity.com/overview/Course/cs291/" target="_blank"><img src="files/udacity.png" width="121" height="152" /></a>',
						'<a href="http://davidscottlyons.com/threejs/presentations/frontporch14/" 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" target="_blank"><img src="files/books/learning-threejs-javascript-3d-library-webgl.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="more" href="https://plus.google.com/+ThreejsOrg">more projects</a>

			<div id="projects">
				<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://gisele.underarmour.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://potree.org/wp/demo/" 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://timeinvariant.github.io/gorescript/play/" target="_blank"><img src="files/projects/gorescript.jpg"></a>
				<a href="http://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://asmallgame.com/kiddisco/" 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://ro.me/" target="_blank"><img src="files/projects/rome.jpg"></a>
				<a href="http://data-arts.appspot.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>