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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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>
  23. To solve this, run files from a local web server. This allows you to access your page as:
  24. </p>
  25. <p>
  26. <code>http://localhost/yourFile.html</code>
  27. </p>
  28. <p>
  29. While it is also possible to change browser security settings instead of running a local server,
  30. we do not recommend that approach. Doing so may open your device up to vulnerabilities, if the
  31. same browser is used for regular web surfing. Use of a local server is standard practice in
  32. web development, and we explain how to install and use a local server below.
  33. </p>
  34. </div>
  35. <h2>Run a local server</h2>
  36. <div>
  37. <p>
  38. Many programming languages have simple HTTP servers built in. They are not as full featured as
  39. production servers such as [link:https://www.apache.org/ Apache] or [link:https://nginx.org NGINX], however they should be sufficient for testing your
  40. three.js application.
  41. </p>
  42. <h3>Plugins for popular code editors</h3>
  43. <div>
  44. <p>Some code editors have plugins which will spawn a simple server on demand.</p>
  45. <ul>
  46. <li>[link:https://marketplace.visualstudio.com/items?itemName=yandeu.five-server Five Server] for Visual Studio Code.</li>
  47. <li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] for Visual Studio Code.</li>
  48. <li>[link:https://atom.io/packages/atom-live-server Live Server] for Atom.</li>
  49. </ul>
  50. </div>
  51. <h3>Servez</h3>
  52. <div>
  53. <p>
  54. [link:https://greggman.github.io/servez Servez] is a simple server with a GUI.
  55. </p>
  56. </div>
  57. <h3>Node.js five-server</h3>
  58. <div>
  59. <p>Development server with live reload capability. To install:</p>
  60. <code>
  61. # Remove live-server (if you have it)
  62. npm -g rm live-server
  63. # Install five-server
  64. npm -g i five-server
  65. # Update five-server (from time to time)
  66. npm -g i five-server@latest
  67. </code>
  68. <p>To run (from your local directory):</p>
  69. <code>five-server . -p 8000</code>
  70. </div>
  71. <h3>Node.js http-server</h3>
  72. <div>
  73. <p>Node.js has a simple HTTP server package. To install:</p>
  74. <code>npm install http-server -g</code>
  75. <p>To run (from your local directory):</p>
  76. <code>http-server . -p 8000</code>
  77. </div>
  78. <h3>Python server</h3>
  79. <div>
  80. <p>
  81. If you have [link:http://python.org/ Python] installed, it should be enough to run this
  82. from a command line (from your working directory):
  83. </p>
  84. <code>
  85. //Python 2.x
  86. python -m SimpleHTTPServer
  87. //Python 3.x
  88. python -m http.server
  89. </code>
  90. <p>This will serve files from the current directory at localhost under port 8000, i.e in the address bar type:</p>
  91. <code>http://localhost:8000/</code>
  92. </div>
  93. <h3>Ruby server</h3>
  94. <div>
  95. <p>If you have Ruby installed, you can get the same result running this instead:</p>
  96. <code>
  97. ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
  98. </code>
  99. </div>
  100. <h3>PHP server</h3>
  101. <div>
  102. <p>PHP also has a built-in web server, starting with php 5.4.0:</p>
  103. <code>php -S localhost:8000</code>
  104. </div>
  105. <h3>Lighttpd</h3>
  106. <div>
  107. <p>
  108. Lighttpd is a very lightweight general purpose webserver. We'll cover installing it on OSX with
  109. HomeBrew here. Unlike the other servers discussed here, lighttpd is a full fledged production
  110. ready server.
  111. </p>
  112. <ol>
  113. <li>
  114. Install it via homebrew
  115. <code>brew install lighttpd</code>
  116. </li>
  117. <li>
  118. Create a configuration file called lighttpd.conf in the directory where you want to run
  119. your webserver. There is a sample [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration here].
  120. </li>
  121. <li>
  122. In the conf file, change the server.document-root to the directory you want to serve files from.
  123. </li>
  124. <li>
  125. Start it with
  126. <code>lighttpd -f lighttpd.conf</code>
  127. </li>
  128. <li>
  129. Navigate to http://localhost:3000/ and it will serve static files from the directory you
  130. chose.
  131. </li>
  132. </ol>
  133. </div>
  134. <h3>IIS</h3>
  135. <div>
  136. <p>If you are using Microsoft IIS as web server. Please add a MIME type settings regarding .fbx extension before loading.</p>
  137. <code>File name extension: fbx MIME Type: text/plain</code>
  138. <p>By default, IIS blocks .fbx, .obj files downloads. You have to configure IIS to enable these kind of files can be download.</p>
  139. </div>
  140. <p>
  141. Other simple alternatives are [link:http://stackoverflow.com/q/12905426/24874 discussed here]
  142. on Stack Overflow.
  143. </p>
  144. </div>
  145. </body>
  146. </html>