javascript
/
three.js
peilaus alkaen https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
							<!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;
				font-size: 15px;
				overflow: hidden;
			}

			#panel	{

				position: fixed;

				width: 260px;

				overflow: auto;

			}

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

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

			#viewer {
				overflow: auto;
			}

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

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

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

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

				#viewer pre, code {
					margin-top: 20px;
					margin-bottom: 20px;
				}
				#viewer code {
					display: block;
					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 = {
				"Array": "Array",
				"Number": "Number"
			};

			var list = {

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

				"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" }
				],

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

				"Materials": [
					{ name: "Material", path: "materials/Material" },
					{ name: "LineBasicMaterial", path: "materials/LineBasicMaterial" },
					{ name: "MeshBasicMaterial", path: "materials/MeshBasicMaterial" },
					{ name: "MeshDepthMaterial", path: "materials/MeshDepthMaterial" },
					{ name: "MeshFaceMaterial", path: "materials/MeshFaceMaterial" },
					{ name: "MeshLambertMaterial", path: "materials/MeshLambertMaterial" },
					{ name: "MeshNormalMaterial", path: "materials/MeshNormalMaterial" },
					{ name: "MeshPhongMaterial", path: "materials/MeshPhongMaterial" },
					{ name: "ParticleBasicMaterial", path: "materials/ParticleBasicMaterial" },
					{ name: "ParticleCanvasMaterial", path: "materials/ParticleCanvasMaterial" },
					{ name: "ParticleDOMMaterial", path: "materials/ParticleDOMMaterial" },
					{ name: "ShaderMaterial", path: "materials/ShaderMaterial" }

				],

				"Objects": [
					{ name: "Bone", path: "objects/Bone" },
					{ name: "Line", path: "objects/Line" },
					{ name: "LOD", path: "objects/LOD" },
					{ name: "Mesh", path: "objects/Mesh" },
					{ name: "MorphAnimMesh", path: "objects/MorphAnimMesh" },
					{ name: "Particle", path: "objects/Particle" },
					{ name: "ParticleSystem", path: "objects/ParticleSystem" },
					{ name: "Ribbon", path: "objects/Ribbon" },
					{ name: "SkinnedMesh", path: "objects/SkinnedMesh" },
					{ name: "Sprite", path: "objects/Sprite" }

				],

				"Renderers": [
					{ name: "CanvasRenderer", path: "renderers/CanvasRenderer" },
					{ name: "DOMRenderer", path: "renderers/DOMRenderer" },
					{ name: "SVGRenderer", path: "renderers/SVGRenderer" },
					{ name: "WebGLRenderer", path: "renderers/WebGLRenderer" },
					{ name: "WebGLRenderTarget", path: "renderers/WebGLRenderTarget" },
					{ name: "WebGLRenderTargetCube", path: "renderers/WebGLRenderTargetCube" },
					{ name: "WebGLShaders", path: "renderers/WebGLShaders" }
				],

				"Renderers / Renderables": [
					{ name: "RenderableFace3", path: "renderers/renderables/RenderableFace3" },
					{ name: "RenderableFace4", path: "renderers/renderables/RenderableFace4" },
					{ name: "RenderableLine", path: "renderers/renderables/RenderableLine" },
					{ name: "RenderableObject", path: "renderers/renderables/RenderableObject" },
					{ name: "RenderableParticle", path: "renderers/renderables/RenderableParticle" },
					{ name: "RenderableVertex", path: "renderers/renderables/RenderableVertex" }
				],

				"Scenes": [
					{ name: "Fog", path: "scenes/Fog" },
					{ name: "FogExp2", path: "scenes/FogExp2" },
					{ name: "Scene", path: "scenes/Scene" }
				],

				"Textures": [
					{ name: "DataTexture", path: "textures/DataTexture" },
					{ name: "Texture", path: "textures/Texture" }
				],

				"Extras": [
					{ name: "ColorUtils", path: "extras/ColorUtils" },
					{ name: "GeometryUtils", path: "extras/GeometryUtils" },
					{ name: "ImageUtils", path: "extras/ImageUtils" },
					{ name: "SceneUtils", path: "extras/SceneUtils" },
					{ name: "ShaderUtils", path: "extras/ShaderUtils" }
				],

				"Extras / Animation": [
					{ name: "Animation", path: "extras/animation/Animation" },
					{ name: "AnimationHandler", path: "extras/animation/AnimationHandler" },
					{ name: "AnimationMorphTarget", path: "extras/animation/AnimationMorphTarget" },
					{ name: "KeyFrameAnimation", path: "extras/animation/KeyFrameAnimation" }
				],

				"Extras / Cameras": [
					{ name: "CombinedCamera", path: "extras/cameras/CombinedCamera" },
					{ name: "CubeCamera", path: "extras/cameras/CubeCamera" }
				],

				"Extras / Controls": [
					{ name: "FirstPersonControls", path: "extras/controls/FirstPersonControls" },
					{ name: "FlyControls", path: "extras/controls/FlyControls" },
					{ name: "PathControls", path: "extras/controls/PathControls" },
					{ name: "RollControls", path: "extras/controls/RollControls" },
					{ name: "TrackballControls", path: "extras/controls/TrackballControls" }
				],

				"Extras / Core": [
					{ name: "BufferGeometry", path: "extras/core/BufferGeometry" },
					{ name: "Curve", path: "extras/core/Curve" },
					{ name: "CurvePath", path: "extras/core/CurvePath" },
					{ name: "EventTarget", path: "extras/core/EventTarget" },
					{ name: "Gyroscope", path: "extras/core/Gyroscope" },
					{ name: "Path", path: "extras/core/Path" },
					{ name: "Shape", path: "extras/core/Shape" },
					{ name: "TextPath", path: "extras/core/TextPath" }
				],

				"Extras / Geometries": [
					{ name: "CubeGeometry", path: "extras/geometries/CubeGeometry" },
					{ name: "CylinderGeometry", path: "extras/geometries/CylinderGeometry" },
					{ name: "ExtrudeGeometry", path: "extras/geometries/ExtrudeGeometry" },
					{ name: "IcosahedronGeometry", path: "extras/geometries/IcosahedronGeometry" },
					{ name: "LatheGeometry", path: "extras/geometries/LatheGeometry" },
					{ name: "OctahedronGeometry", path: "extras/geometries/OctahedronGeometry" },
					{ name: "PlaneGeometry", path: "extras/geometries/PlaneGeometry" },
					{ name: "PolyhedronGeometry", path: "extras/geometries/PolyhedronGeometry" },
					{ name: "SphereGeometry", path: "extras/geometries/SphereGeometry" },
					{ name: "TetrahedronGeometry", path: "extras/geometries/TetrahedronGeometry" },
					{ name: "TextGeometry", path: "extras/geometries/TextGeometry" },
					{ name: "TorusGeometry", path: "extras/geometries/TorusGeometry" },
					{ name: "TorusKnotGeometry", path: "extras/geometries/TorusKnotGeometry" }
				],

				"Extras / Helpers": [
					{ name: "AxisHelper", path: "extras/helpers/AxisHelper" },
					{ name: "CameraHelper", path: "extras/helpers/CameraHelper" }
				],

				"Extras / Loaders": [
					{ name: "BinaryLoader", path: "extras/loaders/BinaryLoader" },
					{ name: "ColladaLoader", path: "extras/loaders/ColladaLoader" },
					{ name: "JSONLoader", path: "extras/loaders/JSONLoader" },
					{ name: "Loader", path: "extras/loaders/Loader" },
					{ name: "SceneLoader", path: "extras/loaders/SceneLoader" },
					{ name: "UTF8Loader", path: "extras/loaders/UTF8Loader" }
				],

				"Extras / Modifiers": [
					{ name: "SubdivisionModifier", path: "extras/modifiers/SubdivisionModifier" }
				],

				"Extras / Objects": [
					{ name: "LensFlare", path: "extras/objects/LensFlare" },
					{ name: "MarchingCubes", path: "extras/objects/MarchingCubes" }
				],

				"Extras / Renderers": [
					{ name: "AnaglyphWebGLRenderer", path: "extras/renderers/AnaglyphWebGLRenderer" },
					{ name: "CrosseyedWebGLRenderer", path: "extras/renderers/CrosseyedWebGLRenderer" },
					{ name: "ParallaxBarrierWebGLRenderer", path: "extras/renderers/ParallaxBarrierWebGLRenderer" }
				],

				"Extras / Renderers / Plugins": [
					{ name: "LensFlarePlugin", path: "extras/renderers/plugins/LensFlarePlugin" },
					{ name: "ShadowMapPlugin", path: "extras/renderers/plugins/ShadowMapPlugin" },
					{ name: "SpritePlugin", path: "extras/renderers/plugins/SpritePlugin" }
				],

				"Extras / Shaders": [
					{ name: "ShaderFlares", path: "extras/shaders/ShaderFlares" },
					{ name: "ShaderSprite", path: "extras/shaders/ShaderSprite" }
				],

			};

			var html = '';

			for ( var category in list ) {

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

				html += '<ul>';

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

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

				}

				html += '</ul>';

			}

			panel.innerHTML += html;

			// 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 ) ) {

						var text = xhr.responseText;
						
						text = text.replace(/\[path\]/gi, path);
						text = text.replace(/\[page:(\w+)\]/gi, function ( str, p1 ) {

							return "<a href=\"javascript:goTo('" + pages[ p1 ] + "')\">" + p1 + "</a>";

						} );

						viewer.innerHTML = text + '<br>';

					}

				};

				xhr.send( null );

			}

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

			// Layout

			var margin = 280;

			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>