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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>three.js - JavaScript 3D library</title>
		<style>
			@font-face {
				font-family: 'inconsolata';
				src: url('files/inconsolata.woff') format('woff');
				font-weight: normal;
				font-style: normal;
			}

			body {

				background-color: #ffffff;

				margin: 0px;
				padding: 19px 0px 30px 180px;

				font-family: 'inconsolata';
				font-size: 15px;

			}

			h1 {
				color: #444;
				font-size: 25px;
				font-weight: normal;

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

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

				margin-top: 12px;
			}

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

			a {
				color: #2194CE;
				font-size: 15px;
			}

			#panel	{

				position: fixed;

				left: 0px;
				top: 0px;

				width: 140px;
				height: 100%;

				padding: 20px 20px 0px 20px;

			}

			.images {

				line-height: 0px;
				margin-bottom: 40px;

			}

		</style>
	</head>
	<body>

		<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">
			<h1>three.js<span style="font-size: 50%; vertical-align: super;"> r58</span></h1>

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

			<a href="http://www.aerotwist.com/lab/getting-started-with-three-js/">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 />

			<center>
			<a href="http://www.udacity.com/overview/Course/cs291/" target="_blank"><img src="files/udacity.png" width="121" height="152" style="border:1px solid #ccc" /></a><br /><br />

			<a href="http://shop.oreilly.com/product/0636920024729.do" target="_blank"><img src="files/webglbook.png" width="100" height="132" style="border:1px solid #ccc" /></a>
			</center>

		</div>

		<h2>featured projects</h2>
		<div id="featured" class="images"></div>
		<script>

		var files = [

			[ "hyperlapse", "http://hyperlapse.tllabs.io/" ],
			[ "wwmaze", "http://chrome.com/maze/" ],
			[ "paleodictyon", "http://antivj.com/paleodictyon_app/" ],
			[ "findyourwaytooz", "http://www.findyourwaytooz.com/" ],
			[ "voxeljs", "http://voxeljs.com/" ],
			[ "neverseenthesky", "http://christmasexperiments.com/23/" ],
			[ "zeitgeist2012", "http://www.google.com/zeitgeist/2012/#explore" ],
			[ "zoetrope", "http://lab.sehsucht.de/" ],
			[ "mvsw", "http://www.pillandpillow.com/mvsw/site/" ],
			[ "thecarpandtheseagull", "http://thecarpandtheseagull.thecreatorsproject.com/" ],
			[ "100000stars", "http://workshop.chromeexperiments.com/stars/" ],
			[ "theywilleatyou", "http://theywilleatyou.com/" ],
			[ "blast", "http://blast.hellohikimori.com/" ],
			[ "hexgl", "http://hexgl.bkcore.com/" ],
			[ "armsglobe", "http://workshop.chromeexperiments.com/projects/armsglobe/" ],
			[ "carvisualizer", "http://carvisualizer.plus360degrees.com/threejs/" ],
			[ "chromeweblab", "http://www.chromeweblab.com/" ],
			[ "lightgraffiti", "http://lightgraffiti.littlesun.com/" ],
			[ "tntfortwo", "http://www.pajamaclubmusic.com/3d/" ],
			[ "chaostoperfection", "http://www.chaostoperfection.com/" ],
			[ "livecodelab", "http://www.sketchpatch.net/labs/livecodelabIntro.html" ],
			[ "kaiopua", "http://collinhover.github.com/kaiopua/" ],
			[ "physijs", "http://chandlerprall.github.com/Physijs/" ],
			[ "googlecube", "http://www.playmapscube.com/" ],
			[ "triggerrally", "http://triggerrally.com/" ],
			[ "zombiesvscow", "http://yagiz.me/zombiesvscow/" ],
			[ "threefab", "http://blackjk3.github.com/threefab/" ],
			[ "nyancat", "http://dl.dropbox.com/u/6213850/WebGL/nyanCat/nyan.html" ],
			[ "threenodes", "http://idflood.github.com/ThreeNodes.js/public/index.html" ],
			[ "f50", "http://www.adidas.com/football/uk/pages/f50/" ],
			[ "lights", "http://lights.elliegoulding.com/" ],
			[ "beanstalk", "http://inear.se/beanstalk/" ],
			[ "missioncontrol", "http://superfad.com/missioncontrol/" ],
			[ "rome", "http://ro.me/" ],
			[ "globe", "http://data-arts.appspot.com/globe" ],
			[ "helloracer", "http://helloracer.com/webgl/" ]

		];

		var element = document.getElementById( 'featured' );

		for ( var i = 0; i < 15; i ++ ) {

			var file = files[ i ];
			element.innerHTML += '<a href="' + file[ 1 ] + '" target="_blank"><img src="files/projects/' + file[ 0 ] + '.jpg" width="200" height="150"></a>';

		}

		for ( var i = 15; i < files.length; i ++ ) {

			var file = files[ i ];
			element.innerHTML += '<a href="' + file[ 1 ] + '" name="extra" style="display:none" target="_blank"><img src="files/projects/' + file[ 0 ] + '.jpg" width="200" height="150"></a>';

		}

		var button = document.createElement( 'div' );
		button.style.display = 'inline-table';
		button.style.textAlign = 'center';
		button.style.backgroundColor = '#f0f0f0';
		button.style.width = '200px';
		button.style.height = '150px';
		button.style.cursor = 'pointer';
		button.addEventListener( 'click', toggle, false );
		element.appendChild( button );

		var text = document.createElement( 'div' );
		text.style.display = 'table-cell';
		text.style.verticalAlign = 'middle';
		text.style.color = '#2194CE';
		text.style.textDecoration = 'underline';
		text.textContent = 'more';
		button.appendChild( text );

		var visible = false;

		function toggle() {

			visible = !visible;

			var elements = document.getElementsByName( 'extra' );

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

				var element = elements[ i ];
				element.style.display = visible === true ? 'inline' : 'none';

			}

			text.textContent = visible === true ? 'less' : 'more';

		}


		</script>


		<h2>webgl examples</h2>
		<div id="webgl" class="images"></div>
		<script>

		var files = [

			"webgl_animation_cloth",
			"webgl_animation_skinning",
			"webgl_animation_skinning_morph",
			"webgl_buffergeometry",
			"webgl_buffergeometry_lines",
			"webgl_buffergeometry_particles",
			"webgl_camera",
			"webgl_custom_attributes",
			"webgl_custom_attributes_lines",
			"webgl_custom_attributes_particles",
			"webgl_custom_attributes_particles2",
			"webgl_custom_attributes_particles3",
			"webgl_geometries",
			// "webgl_geometries2",
			"webgl_geometry_colors",
			"webgl_geometry_colors_blender",
			"webgl_geometry_convex",
			"webgl_geometry_cube",
			"webgl_geometry_dynamic",
			"webgl_geometry_extrude_shapes",
			"webgl_geometry_extrude_splines",
			// "webgl_geometry_extrude_uvs2",
			"webgl_geometry_hierarchy",
			"webgl_geometry_hierarchy2",
			"webgl_geometry_large_mesh",
			"webgl_geometry_minecraft",
			"webgl_geometry_minecraft_ao",
			"webgl_geometry_shapes",
			"webgl_geometry_subdivision",
			"webgl_geometry_terrain",
			"webgl_geometry_terrain_fog",
			"webgl_geometry_tessellation",
			"webgl_geometry_text",
			"webgl_hdr",
			"webgl_interactive_cubes",
			"webgl_interactive_cubes_gpu",
			"webgl_interactive_draggablecubes",
			"webgl_interactive_voxelpainter",
			"webgl_kinect",
			"webgl_lensflares",
			"webgl_lights_pointlights",
			"webgl_lights_pointlights2",
			"webgl_lines_colors",
			"webgl_lines_cubes",
			"webgl_lines_sphere",
			"webgl_lines_splines",
			"webgl_loader_collada",
			"webgl_loader_collada_keyframe",
			"webgl_loader_ctm",
			"webgl_loader_ctm_materials",
			"webgl_loader_json_blender",
			"webgl_loader_json_objconverter",
			"webgl_loader_obj",
			"webgl_loader_scene",
			"webgl_loader_scene_blender",
			"webgl_loader_utf8",
			"webgl_loader_vtk",
			"webgl_lod",
			"webgl_marching_cubes",
			"webgl_materials",
			"webgl_materials2",
			"webgl_materials_blending",
			"webgl_materials_blending_custom",
			"webgl_materials_bumpmap",
			"webgl_materials_bumpmap_skin",
			"webgl_materials_cars",
			"webgl_materials_cars_anaglyph",
			"webgl_materials_cars_camaro",
			"webgl_materials_cars_camaro_crosseyed",
			"webgl_materials_cars_parallaxbarrier",
			"webgl_materials_cubemap",
			"webgl_materials_cubemap_balls_reflection",
			"webgl_materials_cubemap_balls_reflection_anaglyph",
			"webgl_materials_cubemap_balls_refraction",
			"webgl_materials_cubemap_balls_refraction_crosseyed",
			"webgl_materials_cubemap_dynamic",
			"webgl_materials_cubemap_dynamic2",
			"webgl_materials_cubemap_escher",
			"webgl_materials_cubemap_refraction",
			"webgl_materials_grass",
			"webgl_materials_normalmap",
			"webgl_materials_normalmap2",
			"webgl_materials_shaders",
			"webgl_materials_shaders_fresnel",
			"webgl_materials_skin",
			"webgl_materials_texture_anisotropy",
			"webgl_materials_texture_filters",
			"webgl_materials_video",
			"webgl_materials_wireframe",
			"webgl_morphnormals",
			"webgl_morphtargets",
			"webgl_morphtargets_horse",
			"webgl_morphtargets_md2",
			"webgl_morphtargets_md2_control",
			"webgl_multiple_canvases_circle",
			"webgl_multiple_canvases_complex",
			"webgl_multiple_canvases_grid",
			"webgl_multiple_views",
			"webgl_panorama_equirectangular",
			"webgl_particles_billboards",
			"webgl_particles_billboards_colors",
			"webgl_particles_dynamic",
			"webgl_particles_random",
			"webgl_particles_shapes",
			"webgl_particles_sprites",
			"webgl_performance",
			"webgl_performance_doublesided",
			"webgl_performance_static",
			"webgl_postprocessing",
			"webgl_postprocessing_dof",
			"webgl_postprocessing_godrays",
			"webgl_ribbons",
			"webgl_rtt",
			"webgl_sandbox",
			"webgl_shader",
			"webgl_shader2",
			"webgl_shader_lava",
			"webgl_shading_physical",
			"webgl_shadowmap",
			"webgl_shadowmap_performance",
			"webgl_sprites",
			"webgl_terrain_dynamic",
			"webgl_test_memory",
			"webgl_test_memory2",
			"webgl_trails"

		];

		var element = document.getElementById( 'webgl' );

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

			var file = files[ i ];
			element.innerHTML += '<a href="examples/' + file + '.html" target="_blank"><img src="files/examples/' + file + '.jpg" width="200" height="150"></a>';

		}

		</script>


		<h2>webgl deferred examples</h2>
		<div id="deferred" class="images"></div>
		<script>

		var files = [

			"webgldeferred_animation",
			"webgldeferred_arealights",
			"webgldeferred_pointlights"

		];

		var element = document.getElementById( 'deferred' );

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

			var file = files[ i ];
			element.innerHTML += '<a href="examples/' + file + '.html" target="_blank"><img src="files/examples/' + file + '.jpg" width="200" height="150"></a>';

		}

		</script>


		<h2>css3d examples</h2>
		<div id="css3d" class="images"></div>
		<script>

		var files = [

			"css3d_molecules",
			"css3d_panorama",
			"css3d_periodictable",
			"css3d_sandbox",
			"css3d_youtube"

		];

		var element = document.getElementById( 'css3d' );

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

			var file = files[ i ];
			element.innerHTML += '<a href="examples/' + file + '.html" target="_blank"><img src="files/examples/' + file + '.jpg" width="200" height="150"></a>';

		}

		</script>


		<h2>canvas examples</h2>
		<div id="canvas" class="images"></div>
		<script>

		var files = [

			"canvas_ascii_effect",
			"canvas_camera_orthographic",
			"canvas_camera_orthographic2",
			"canvas_geometry_birds",
			"canvas_geometry_cube",
			"canvas_geometry_earth",
			"canvas_geometry_hierarchy",
			"canvas_geometry_panorama",
			"canvas_geometry_panorama_fisheye",
			"canvas_geometry_terrain",
			"canvas_geometry_text",
			"canvas_interactive_cubes",
			"canvas_interactive_cubes_tween",
			"canvas_interactive_particles",
			"canvas_interactive_voxelpainter",
			"canvas_lights_pointlights",
			"canvas_lights_pointlights_smooth",
			"canvas_lines",
			"canvas_lines_sphere",
			"canvas_materials",
			"canvas_materials_depth",
			"canvas_materials_normal",
			"canvas_materials_reflection",
			"canvas_materials_video",
			"canvas_particles_floor",
			"canvas_particles_random",
			"canvas_particles_shapes",
			"canvas_particles_sprites",
			"canvas_particles_waves",
			"canvas_performance",
			"canvas_sandbox"

		];

		var element = document.getElementById( 'canvas' );

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

			var file = files[ i ];
			element.innerHTML += '<a href="examples/' + file + '.html" target="_blank"><img src="files/examples/' + file + '.jpg" width="200" height="150"></a>';

		}

		</script>


		<h2>software examples</h2>
		<div id="software" class="images"></div>
		<script>

		var files = [

			"software_sandbox"

		];

		var element = document.getElementById( 'software' );

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

			var file = files[ i ];
			element.innerHTML += '<a href="examples/' + file + '.html" target="_blank"><img src="files/examples/' + file + '.jpg" width="200" height="150"></a>';

		}

		</script>


		<h2>misc examples</h2>
		<div id="misc" class="images"></div>
		<script>

		var files = [

			"misc_controls_fly",
			"misc_controls_path",
			"misc_controls_orbit",
			"misc_controls_trackball",
			"misc_controls_pointerlock",
			"misc_lights_test",
			"misc_lookat",
			"misc_sound",
			"misc_ubiquity_test"

		];

		var element = document.getElementById( 'misc' );

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

			var file = files[ i ];
			element.innerHTML += '<a href="examples/' + file + '.html" target="_blank"><img src="files/examples/' + file + '.jpg" width="200" height="150"></a>';

		}

		</script>

	</body>
</html>