2
0

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

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