How-to-run-things-locally.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p>
  12. If you use just procedural geometries and don't load any textures, webpages should work
  13. straight from the file system, just double-click on HTML file in a file manager and it
  14. should appear working in the browser (you'll see <em>file:///yourFile.html</em> in the address bar).
  15. </p>
  16. <h2>Content loaded from external files</h2>
  17. <div>
  18. <p>
  19. If you load models or textures from external files, due to browsers' [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy]
  20. security restrictions, loading from a file system will fail with a security exception.
  21. </p>
  22. <p>There are two ways to solve this:</p>
  23. <ol>
  24. <li>
  25. Change security for local files in a browser. This allows you to access your page as: <code>file:///yourFile.html</code>
  26. </li>
  27. <li>
  28. Run files from a local web server. This allows you to access your page as: <code>http://localhost/yourFile.html</code>
  29. </li>
  30. </ol>
  31. <p>
  32. If you use option 1, be aware that you may open yourself to some vulnerabilities if using
  33. the same browser for a regular web surfing. You may want to create a separate browser
  34. profile / shortcut used just for local development to be safe. Let's go over each option in turn.
  35. </p>
  36. </div>
  37. <h2>Run a local server</h2>
  38. <div>
  39. <p>
  40. Many programming languages have simple HTTP servers built in. They are not as full featured as
  41. production servers such as [link:https://www.apache.org/ Apache] or [link:https://nginx.org NGINX], however they should be sufficient for testing your
  42. three.js application.
  43. </p>
  44. <h3>Plugins for popular code editors</h3>
  45. <div>
  46. <p>Some code editors have plugins which will spawn a simple server on demand.</p>
  47. <ul>
  48. <li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] for Visual Studio Code.</li>
  49. <li>[link:https://atom.io/packages/atom-live-server Live Server] for Atom.</li>
  50. </ul>
  51. </div>
  52. <h3>Servez</h3>
  53. <div>
  54. <p>
  55. [link:https://greggman.github.io/servez Servez] is a simple server with a GUI.
  56. </p>
  57. </div>
  58. <h3>Node.js http-server</h3>
  59. <div>
  60. <p>Node.js has a simple HTTP server package. To install:</p>
  61. <code>npm install http-server -g</code>
  62. <p>To run (from your local directory):</p>
  63. <code>http-server . -p 8000</code>
  64. </div>
  65. <h3>Python server</h3>
  66. <div>
  67. <p>
  68. If you have [link:http://python.org/ Python] installed, it should be enough to run this
  69. from a command line (from your working directory):
  70. </p>
  71. <code>
  72. //Python 2.x
  73. python -m SimpleHTTPServer
  74. //Python 3.x
  75. python -m http.server
  76. </code>
  77. <p>This will serve files from the current directory at localhost under port 8000, i.e in the address bar type:</p>
  78. <code>http://localhost:8000/</code>
  79. </div>
  80. <h3>Ruby server</h3>
  81. <div>
  82. <p>If you have Ruby installed, you can get the same result running this instead:</p>
  83. <code>
  84. ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
  85. </code>
  86. </div>
  87. <h3>PHP server</h3>
  88. <div>
  89. <p>PHP also has a built-in web server, starting with php 5.4.0:</p>
  90. <code>php -S localhost:8000</code>
  91. </div>
  92. <h3>Lighttpd</h3>
  93. <div>
  94. <p>
  95. Lighttpd is a very lightweight general purpose webserver. We'll cover installing it on OSX with
  96. HomeBrew here. Unlike the other servers discussed here, lighttpd is a full fledged production
  97. ready server.
  98. </p>
  99. <ol>
  100. <li>
  101. Install it via homebrew
  102. <code>brew install lighttpd</code>
  103. </li>
  104. <li>
  105. Create a configuration file called lighttpd.conf in the directory where you want to run
  106. your webserver. There is a sample [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration here].
  107. </li>
  108. <li>
  109. In the conf file, change the server.document-root to the directory you want to serve files from.
  110. </li>
  111. <li>
  112. Start it with
  113. <code>lighttpd -f lighttpd.conf</code>
  114. </li>
  115. <li>
  116. Navigate to http://localhost:3000/ and it will serve static files from the directory you
  117. chose.
  118. </li>
  119. </ol>
  120. </div>
  121. <h3>IIS</h3>
  122. <div>
  123. <p>If you are using Microsoft IIS as web server. Please add a MIME type settings regarding .fbx extension before loading.</p>
  124. <code>File name extension: fbx MIME Type: text/plain</code>
  125. <p>By default, IIS blocks .fbx, .obj files downloads. You have to configure IIS to enable these kind of files can be download.</p>
  126. </div>
  127. <p>
  128. Other simple alternatives are [link:http://stackoverflow.com/q/12905426/24874 discussed here]
  129. on Stack Overflow.
  130. </p>
  131. </div>
  132. </body>
  133. </html>