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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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>Node.js server</h3>
  46. <div>
  47. <p>Node.js has a simple HTTP server package. To install:</p>
  48. <code>npm install http-server -g</code>
  49. <p>To run (from your local directory):</p>
  50. <code>http-server . -p 8000</code>
  51. </div>
  52. <h3>Python server</h3>
  53. <div>
  54. <p>
  55. If you have [link:http://python.org/ Python] installed, it should be enough to run this
  56. from a command line (from your working directory):
  57. </p>
  58. <code>
  59. //Python 2.x
  60. python -m SimpleHTTPServer
  61. //Python 3.x
  62. python -m http.server
  63. </code>
  64. <p>This will serve files from the current directory at localhost under port 8000, i.e in the address bar type:</p>
  65. <code>http://localhost:8000/</code>
  66. </div>
  67. <h3>Ruby server</h3>
  68. <div>
  69. <p>If you have Ruby installed, you can get the same result running this instead:</p>
  70. <code>
  71. ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
  72. </code>
  73. </div>
  74. <h3>PHP server</h3>
  75. <div>
  76. <p>PHP also has a built-in web server, starting with php 5.4.0:</p>
  77. <code>php -S localhost:8000</code>
  78. </div>
  79. <h3>Lighttpd</h3>
  80. <div>
  81. <p>
  82. Lighttpd is a very lightweight general purpose webserver. We'll cover installing it on OSX with
  83. HomeBrew here. Unlike the other servers discussed here, lighttpd is a full fledged production
  84. ready server.
  85. </p>
  86. <ol>
  87. <li>
  88. Install it via homebrew
  89. <code>brew install lighttpd</code>
  90. </li>
  91. <li>
  92. Create a configuration file called lighttpd.conf in the directory where you want to run
  93. your webserver. There is a sample [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration here].
  94. </li>
  95. <li>
  96. In the conf file, change the server.document-root to the directory you want to serve files from.
  97. </li>
  98. <li>
  99. Start it with
  100. <code>lighttpd -f lighttpd.conf</code>
  101. </li>
  102. <li>
  103. Navigate to http://localhost:3000/ and it will serve static files from the directory you
  104. chose.
  105. </li>
  106. </ol>
  107. </div>
  108. <p>
  109. Other simple alternatives are [link:http://stackoverflow.com/q/12905426/24874 discussed here]
  110. on Stack Overflow.
  111. </p>
  112. </div>
  113. </body>
  114. </html>