index.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>three.js - documentation</title>
  6. <style>
  7. body {
  8. margin: 0;
  9. padding: 0;
  10. color: #555;
  11. font-family: Arial, sans-serif;
  12. font-size: 15px;
  13. overflow: hidden;
  14. }
  15. a {
  16. color: #2194CE;
  17. }
  18. #panel {
  19. position: fixed;
  20. width: 260px;
  21. overflow: auto;
  22. }
  23. #panel h1 {
  24. color: #444;
  25. font-size: 25px;
  26. margin-top: 25px;
  27. margin-left: 20px;
  28. }
  29. #panel h2 {
  30. color: #999;
  31. font-size: 16px;
  32. margin-top: 20px;
  33. margin-left: 20px;
  34. }
  35. #panel ul {
  36. list-style-type: none;
  37. padding: 0px;
  38. margin-left: 20px;
  39. }
  40. #viewer {
  41. overflow: auto;
  42. }
  43. #viewer h1 {
  44. color: #444;
  45. font-size: 25px;
  46. margin-top: 10px;
  47. }
  48. #viewer h2 {
  49. color: #8B2;
  50. font-size: 18px;
  51. margin-top: 40px;
  52. }
  53. #viewer h3 {
  54. color: #000;
  55. font-size: 16px;
  56. margin-top: 30px;
  57. font-weight: normal;
  58. }
  59. #viewer div {
  60. padding-left: 30px;
  61. margin-bottom: 20px;
  62. }
  63. #viewer div.desc {
  64. padding-left: 0px;
  65. }
  66. #viewer pre, code {
  67. margin-top: 20px;
  68. margin-bottom: 20px;
  69. }
  70. #viewer code {
  71. display: block;
  72. width: 90%;
  73. padding: 20px;
  74. white-space: pre;
  75. background-color: #f9f9f9;
  76. overflow: auto;
  77. }
  78. </style>
  79. </head>
  80. <body>
  81. <div id="panel"></div>
  82. <div id="viewer"></div>
  83. <script>
  84. var REVISION = '49dev';
  85. var panel = document.getElementById( 'panel' );
  86. var viewer = document.getElementById( 'viewer' );
  87. var pages = {
  88. "Integer": "Integer",
  89. "Float": "Float",
  90. "Array": "Array"
  91. };
  92. var list = {
  93. "Cameras": [
  94. { name: "Camera", path: "cameras/Camera" },
  95. { name: "OrthographicCamera", path: "cameras/OrthographicCamera" },
  96. { name: "PerspectiveCamera", path: "cameras/PerspectiveCamera" }
  97. ],
  98. "Core": [
  99. { name: "Clock", path: "core/Clock" },
  100. { name: "Color", path: "core/Color" },
  101. { name: "Face3", path: "core/Face3" },
  102. { name: "Face4", path: "core/Face4" },
  103. { name: "Frustum", path: "core/Frustum" },
  104. { name: "Geometry", path: "core/Geometry" },
  105. { name: "Math", path: "core/Math" },
  106. { name: "Matrix3", path: "core/Matrix3" },
  107. { name: "Matrix4", path: "core/Matrix4" },
  108. { name: "Object3D", path: "core/Object3D" },
  109. { name: "Projector", path: "core/Projector" },
  110. { name: "Quaternion", path: "core/Quaternion" },
  111. { name: "Ray", path: "core/Ray" },
  112. { name: "Rectangle", path: "core/Rectangle" },
  113. { name: "Spline", path: "core/Spline" },
  114. { name: "UV", path: "core/UV" },
  115. { name: "Vector2", path: "core/Vector2" },
  116. { name: "Vector3", path: "core/Vector3" },
  117. { name: "Vector4", path: "core/Vector4" }
  118. ],
  119. "Lights": [
  120. { name: "Light", path: "lights/Light" },
  121. { name: "AmbientLight", path: "lights/AmbientLight" },
  122. { name: "DirectionalLight", path: "lights/DirectionalLight" },
  123. { name: "PointLight", path: "lights/PointLight" },
  124. { name: "SpotLight", path: "lights/SpotLight" }
  125. ],
  126. "Loaders": [
  127. { name: "Loader", path: "loaders/Loader" },
  128. { name: "BinaryLoader", path: "loaders/BinaryLoader" },
  129. { name: "JSONLoader", path: "loaders/JSONLoader" },
  130. { name: "SceneLoader", path: "loaders/SceneLoader" },
  131. ],
  132. "Materials": [
  133. { name: "Material", path: "materials/Material" },
  134. { name: "LineBasicMaterial", path: "materials/LineBasicMaterial" },
  135. { name: "MeshBasicMaterial", path: "materials/MeshBasicMaterial" },
  136. { name: "MeshDepthMaterial", path: "materials/MeshDepthMaterial" },
  137. { name: "MeshFaceMaterial", path: "materials/MeshFaceMaterial" },
  138. { name: "MeshLambertMaterial", path: "materials/MeshLambertMaterial" },
  139. { name: "MeshNormalMaterial", path: "materials/MeshNormalMaterial" },
  140. { name: "MeshPhongMaterial", path: "materials/MeshPhongMaterial" },
  141. { name: "ParticleBasicMaterial", path: "materials/ParticleBasicMaterial" },
  142. { name: "ParticleCanvasMaterial", path: "materials/ParticleCanvasMaterial" },
  143. { name: "ParticleDOMMaterial", path: "materials/ParticleDOMMaterial" },
  144. { name: "ShaderMaterial", path: "materials/ShaderMaterial" }
  145. ],
  146. "Objects": [
  147. { name: "Bone", path: "objects/Bone" },
  148. { name: "Line", path: "objects/Line" },
  149. { name: "LOD", path: "objects/LOD" },
  150. { name: "Mesh", path: "objects/Mesh" },
  151. { name: "MorphAnimMesh", path: "objects/MorphAnimMesh" },
  152. { name: "Particle", path: "objects/Particle" },
  153. { name: "ParticleSystem", path: "objects/ParticleSystem" },
  154. { name: "Ribbon", path: "objects/Ribbon" },
  155. { name: "SkinnedMesh", path: "objects/SkinnedMesh" },
  156. { name: "Sprite", path: "objects/Sprite" }
  157. ],
  158. "Renderers": [
  159. { name: "CanvasRenderer", path: "renderers/CanvasRenderer" },
  160. { name: "DOMRenderer", path: "renderers/DOMRenderer" },
  161. { name: "SVGRenderer", path: "renderers/SVGRenderer" },
  162. { name: "WebGLRenderer", path: "renderers/WebGLRenderer" },
  163. { name: "WebGLRenderTarget", path: "renderers/WebGLRenderTarget" },
  164. { name: "WebGLRenderTargetCube", path: "renderers/WebGLRenderTargetCube" },
  165. { name: "WebGLShaders", path: "renderers/WebGLShaders" }
  166. ],
  167. "Renderers / Renderables": [
  168. { name: "RenderableFace3", path: "renderers/renderables/RenderableFace3" },
  169. { name: "RenderableFace4", path: "renderers/renderables/RenderableFace4" },
  170. { name: "RenderableLine", path: "renderers/renderables/RenderableLine" },
  171. { name: "RenderableObject", path: "renderers/renderables/RenderableObject" },
  172. { name: "RenderableParticle", path: "renderers/renderables/RenderableParticle" },
  173. { name: "RenderableVertex", path: "renderers/renderables/RenderableVertex" }
  174. ],
  175. "Scenes": [
  176. { name: "Fog", path: "scenes/Fog" },
  177. { name: "FogExp2", path: "scenes/FogExp2" },
  178. { name: "Scene", path: "scenes/Scene" }
  179. ],
  180. "Textures": [
  181. { name: "DataTexture", path: "textures/DataTexture" },
  182. { name: "Texture", path: "textures/Texture" }
  183. ],
  184. "Extras": [
  185. { name: "ColorUtils", path: "extras/ColorUtils" },
  186. { name: "GeometryUtils", path: "extras/GeometryUtils" },
  187. { name: "ImageUtils", path: "extras/ImageUtils" },
  188. { name: "SceneUtils", path: "extras/SceneUtils" },
  189. { name: "ShaderUtils", path: "extras/ShaderUtils" }
  190. ],
  191. "Extras / Animation": [
  192. { name: "Animation", path: "extras/animation/Animation" },
  193. { name: "AnimationHandler", path: "extras/animation/AnimationHandler" },
  194. { name: "AnimationMorphTarget", path: "extras/animation/AnimationMorphTarget" },
  195. { name: "KeyFrameAnimation", path: "extras/animation/KeyFrameAnimation" }
  196. ],
  197. "Extras / Cameras": [
  198. { name: "CombinedCamera", path: "extras/cameras/CombinedCamera" },
  199. { name: "CubeCamera", path: "extras/cameras/CubeCamera" }
  200. ],
  201. "Extras / Controls": [
  202. { name: "FirstPersonControls", path: "extras/controls/FirstPersonControls" },
  203. { name: "FlyControls", path: "extras/controls/FlyControls" },
  204. { name: "PathControls", path: "extras/controls/PathControls" },
  205. { name: "RollControls", path: "extras/controls/RollControls" },
  206. { name: "TrackballControls", path: "extras/controls/TrackballControls" }
  207. ],
  208. "Extras / Core": [
  209. { name: "BufferGeometry", path: "extras/core/BufferGeometry" },
  210. { name: "Curve", path: "extras/core/Curve" },
  211. { name: "CurvePath", path: "extras/core/CurvePath" },
  212. { name: "EventTarget", path: "extras/core/EventTarget" },
  213. { name: "Gyroscope", path: "extras/core/Gyroscope" },
  214. { name: "Path", path: "extras/core/Path" },
  215. { name: "Shape", path: "extras/core/Shape" },
  216. { name: "TextPath", path: "extras/core/TextPath" }
  217. ],
  218. "Extras / Geometries": [
  219. { name: "CubeGeometry", path: "extras/geometries/CubeGeometry" },
  220. { name: "CylinderGeometry", path: "extras/geometries/CylinderGeometry" },
  221. { name: "ExtrudeGeometry", path: "extras/geometries/ExtrudeGeometry" },
  222. { name: "IcosahedronGeometry", path: "extras/geometries/IcosahedronGeometry" },
  223. { name: "LatheGeometry", path: "extras/geometries/LatheGeometry" },
  224. { name: "OctahedronGeometry", path: "extras/geometries/OctahedronGeometry" },
  225. { name: "PlaneGeometry", path: "extras/geometries/PlaneGeometry" },
  226. { name: "PolyhedronGeometry", path: "extras/geometries/PolyhedronGeometry" },
  227. { name: "SphereGeometry", path: "extras/geometries/SphereGeometry" },
  228. { name: "TetrahedronGeometry", path: "extras/geometries/TetrahedronGeometry" },
  229. { name: "TextGeometry", path: "extras/geometries/TextGeometry" },
  230. { name: "TorusGeometry", path: "extras/geometries/TorusGeometry" },
  231. { name: "TorusKnotGeometry", path: "extras/geometries/TorusKnotGeometry" }
  232. ],
  233. "Extras / Helpers": [
  234. { name: "AxisHelper", path: "extras/helpers/AxisHelper" },
  235. { name: "CameraHelper", path: "extras/helpers/CameraHelper" }
  236. ],
  237. "Extras / Modifiers": [
  238. { name: "SubdivisionModifier", path: "extras/modifiers/SubdivisionModifier" }
  239. ],
  240. "Extras / Objects": [
  241. { name: "LensFlare", path: "extras/objects/LensFlare" },
  242. { name: "MarchingCubes", path: "extras/objects/MarchingCubes" }
  243. ],
  244. "Extras / Renderers / Effects": [
  245. { name: "AnaglyphEffect", path: "extras/renderers/effects/AnaglyphEffect" },
  246. { name: "CrosseyedEffect", path: "extras/renderers/effects/CrosseyedEffect" },
  247. { name: "ParallaxBarrierEffect", path: "extras/renderers/effects/ParallaxBarrierEffect" }
  248. ],
  249. "Extras / Renderers / Plugins": [
  250. { name: "LensFlarePlugin", path: "extras/renderers/plugins/LensFlarePlugin" },
  251. { name: "ShadowMapPlugin", path: "extras/renderers/plugins/ShadowMapPlugin" },
  252. { name: "SpritePlugin", path: "extras/renderers/plugins/SpritePlugin" }
  253. ],
  254. "Extras / Shaders": [
  255. { name: "ShaderFlares", path: "extras/shaders/ShaderFlares" },
  256. { name: "ShaderSprite", path: "extras/shaders/ShaderSprite" }
  257. ]
  258. };
  259. var html = '<h1>three.js <span style="font-size: 50%; vertical-align: super;">r' + REVISION + '</span></h1>';
  260. for ( var category in list ) {
  261. html += '<h2>' + category + '</h2>';
  262. html += '<ul>';
  263. for ( var i = 0; i < list[ category ].length; i ++ ) {
  264. var page = list[ category ][ i ];
  265. pages[ page.name ] = page.path;
  266. html += '<li><a href="javascript:goTo(\'' + page.name + '\')">' + page.name + '</a></li>';
  267. }
  268. html += '</ul>';
  269. }
  270. panel.innerHTML += html;
  271. // Page loading
  272. function goTo( name ) {
  273. var path = pages[ name ];
  274. window.location.hash = name;
  275. viewer.innerHTML = '';
  276. var xhr = new XMLHttpRequest();
  277. xhr.open( 'GET', 'api/' + path + '.html', true );
  278. xhr.onreadystatechange = function () {
  279. if ( xhr.readyState == 4 && ( xhr.status == 200 || xhr.status == 0 ) ) {
  280. // TODO: Set title.
  281. var text = xhr.responseText;
  282. text = text.replace(/\[name\]/gi, name);
  283. text = text.replace(/\[path\]/gi, path);
  284. text = text.replace(/\[page:(\w+)\]/gi, "[page:$1 $1]" ); // [page:name] to [page:name title]
  285. text = text.replace(/\[page:(\w+) ([\w|\.]+)\]/gi, "<a href=\"javascript:goTo('$1')\" title=\"$1\">$2</a>" ); // [page:name title]
  286. text = text.replace(/\[link:([\w|\:|\/|\.|\-|\_]+)\]/gi, "[link:$1 $1]" ); // [link:url] to [link:url title]
  287. text = text.replace(/\[link:([\w|\:|\/|\.|\-|\_]+) ([\w|\:|\/|\.|\-|\_]+)\]/gi, "<a href=\"$1\" target=\"_blank\">$2</a>" ); // [link:url title]
  288. text = text.replace(/\*([\w|\ |\-|\/|\+|\-|\(|\)|\=|\,|\.\"]+)\*/gi, "<strong>$1</strong>" ); // *
  289. viewer.innerHTML = '<br>' + text + '<br><br>';
  290. }
  291. };
  292. xhr.send( null );
  293. }
  294. goTo( window.location.hash.substring(1) );
  295. // Layout
  296. var margin = 280;
  297. function updateLayout() {
  298. panel.style.height = window.innerHeight + 'px';
  299. viewer.style.marginLeft = margin + 'px';
  300. viewer.style.width = ( window.innerWidth - margin ) + 'px';
  301. viewer.style.height = window.innerHeight + 'px';
  302. }
  303. window.addEventListener( 'resize', updateLayout, false );
  304. updateLayout();
  305. </script>
  306. </body>
  307. </html>