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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
							<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>three.js - documentation</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				color: #555;
				font-family: Arial, sans-serif;
				overflow: hidden;
			}

			h1 {
				color: #999;
				font-size: 18px;
				margin-top: 20px;
			}

			#panel	{

				position: fixed;

				left: 0px;
				top: 0px;

				width: 200px;
				height: 100%;

				padding-left: 20px;

				font-size: 15px;

				overflow: auto;

			}

				#panel ul {
					list-style-type: none;
					padding: 0px;
					margin: 0px;
				}

			#viewer {
				overflow: auto;
			}

				#viewer h1 {
					color: #444;
					font-size: 25px;
				}

				#viewer h2 {
					color: #999;
					font-size: 18px;
					margin-top: 40px;
				}

				#viewer h3 {
					font-size: 15px;
					margin-top: 30px;
				}

				#viewer div {
					padding-left: 30px;
				}

				#viewer code {
					display: block;
					margin: 0px;
					width: 90%;
					padding: 20px;
					white-space: pre;
					background-color: #f9f9f9;
					overflow: auto;
				}
		</style>
	</head>
	<body>
		<div id="panel"></div>
		<div id="viewer"></div>

		<script>

			var panel = document.getElementById( 'panel' );
			var viewer = document.getElementById( 'viewer' );

			var pages = {

				"Core": [
					{ name: "Clock", path: "core/Clock" },
					{ name: "Color", path: "core/Color" },
					{ name: "Edge", path: "core/Edge" },
					{ name: "Face3", path: "core/Face3" },
					{ name: "Face4", path: "core/Face4" },
					{ name: "Frustum", path: "core/Frustum" },
					{ name: "Geometry", path: "core/Geometry" },
					{ name: "Math", path: "core/Math" },
					{ name: "Matrix3", path: "core/Matrix3" },
					{ name: "Matrix4", path: "core/Matrix4" },
					{ name: "Object3D", path: "core/Object3D" },
					{ name: "Projector", path: "core/Projector" },
					{ name: "Quaternion", path: "core/Quaternion" },
					{ name: "Ray", path: "core/Ray" },
					{ name: "Rectangle", path: "core/Rectangle" },
					{ name: "Spline", path: "core/Spline" },
					{ name: "UV", path: "core/UV" },
					{ name: "Vector2", path: "core/Vector2" },
					{ name: "Vector3", path: "core/Vector3" },
					{ name: "Vector4", path: "core/Vector4" },
					{ name: "Vertex", path: "core/Vertex" }
				],

				"Cameras": [
					{ name: "PerspectiveCamera", path: "cameras/PerspectiveCamera" },
					{ name: "OrtographicCamera", path: "cameras/OrtographicCamera" }
				],

				"Lights": [
					{ name: "AmbientLight", path: "lights/AmbientLight" },
					{ name: "DirectionalLight", path: "lights/DirectionalLight" },
					{ name: "PointLight", path: "lights/PointLight" },
					{ name: "SpotLight", path: "lights/SpotLight" },
				]

			};

			var html = '';

			for ( var category in pages ) {

				html += '<h1>' + category + '</h1>';

				for ( var i = 0; i < pages[ category ].length; i ++ ) {

					var page = pages[ category ][ i ];
					html += '<li><a href="javascript:goTo(\'' + page.path + '\')">' + page.name + '</a></li>';

				}

			}

			panel.innerHTML += '<ul>' + html + '</ul>';

			// Page loading

			function goTo( path ) {

				viewer.innerHTML = '';

				window.location.hash = path

				var xhr = new XMLHttpRequest();
				xhr.open( 'GET', 'api/' + path + '.html', true );
				xhr.onreadystatechange = function () {

					if ( xhr.readyState == 4 && ( xhr.status == 200 || xhr.status == 0 ) ) {

						viewer.innerHTML = xhr.responseText + '<br>';

					}

				};

				xhr.send( null );

			}

			goTo( window.location.hash.substring(1) );

			// Layout

			var margin = 200;

			function updateLayout() {

				panel.style.height = window.innerHeight + 'px';

				viewer.style.marginLeft = margin + 'px';
				viewer.style.width = ( window.innerWidth - margin ) + 'px';
				viewer.style.height = window.innerHeight + 'px';

			}

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

			updateLayout();

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