setup.html 4.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html><html lang="en"><head>
  2. <meta charset="utf-8">
  3. <title>Setup</title>
  4. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  5. <meta name="twitter:card" content="summary_large_image">
  6. <meta name="twitter:site" content="@threejs">
  7. <meta name="twitter:title" content="Three.js – Setup">
  8. <meta property="og:image" content="https://threejs.org/files/share.png">
  9. <link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
  10. <link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
  11. <link rel="stylesheet" href="/manual/resources/lesson.css">
  12. <link rel="stylesheet" href="/manual/resources/lang.css">
  13. <!-- Import maps polyfill -->
  14. <!-- Remove this when import maps will be widely supported -->
  15. <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
  16. <script type="importmap">
  17. {
  18. "imports": {
  19. "three": "../../build/three.module.js"
  20. }
  21. }
  22. </script>
  23. </head>
  24. <body>
  25. <div class="container">
  26. <div class="lesson-title">
  27. <h1>Setup</h1>
  28. </div>
  29. <div class="lesson">
  30. <div class="lesson-main">
  31. <p>This article is one in a series of articles about three.js.
  32. The first article was <a href="fundamentals.html">about three.js fundamentals</a>.
  33. If you haven't read that yet you might want to start there.</p>
  34. <p>Before we go any further we need to talk about setting up your
  35. computer to do development. In particular, for security reasons,
  36. WebGL cannot use images from your hard drive directly. That means
  37. in order to do development you need to use a web server. Fortunately
  38. development web servers are super easy to setup and use.</p>
  39. <p>First off if you'd like you can download this entire site from <a href="https://github.com/gfxfundamentals/threejsfundamentals/archive/gh-pages.zip">this link</a>.
  40. Once downloaded double click the zip file to unpack the files.</p>
  41. <p>Next download one of these simple web servers.</p>
  42. <p>If you'd prefer a web server with a user interface there's
  43. <a href="https://greggman.github.io/servez">Servez</a></p>
  44. <p></p><div class="threejs_image border">
  45. <img class="" src="../resources/servez.gif">
  46. </div>
  47. <p></p>
  48. <p>Just point it at the folder where you unzipped the files, click "Start", then go to
  49. in your browser <a href="http://localhost:8080/"><code class="notranslate" translate="no">http://localhost:8080/</code></a> or if you'd
  50. like to browse the samples go to <a href="http://localhost:8080/threejs"><code class="notranslate" translate="no">http://localhost:8080/threejs</code></a>.</p>
  51. <p>To stop serving pick stop or quit Servez.</p>
  52. <p>If you prefer the command line (I do), another way is to use <a href="https://nodejs.org">node.js</a>.
  53. Download it, install it, then open a command prompt / console / terminal window. If you're on Windows the installer will add a special "Node Command Prompt" so use that.</p>
  54. <p>Then install the <a href="https://github.com/greggman/servez-cli"><code class="notranslate" translate="no">servez</code></a> by typing</p>
  55. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">npm -g install servez
  56. </pre><p>If you're on OSX use</p>
  57. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">sudo npm -g install servez
  58. </pre><p>Once you've done that type</p>
  59. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">servez path/to/folder/where/you/unzipped/files
  60. </pre><p>Or if you're like me</p>
  61. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">cd path/to/folder/where/you/unzipped/files
  62. servez
  63. </pre><p>It should print something like</p>
  64. <p></p><div class="threejs_image ">
  65. <img class="" src="../resources/servez-response.png">
  66. </div>
  67. <p></p>
  68. <p>Then in your browser go to <a href="http://localhost:8080/"><code class="notranslate" translate="no">http://localhost:8080/</code></a>.</p>
  69. <p>If you don't specify a path then servez will serve the current folder.</p>
  70. <p>If either of those options are not to your liking
  71. <a href="https://stackoverflow.com/questions/12905426/what-is-a-faster-alternative-to-pythons-servez-or-simplehttpserver">there are many other simple servers to choose from</a>.</p>
  72. <p>Now that you have a server setup we can move on to <a href="textures.html">textures</a>.</p>
  73. </div>
  74. </div>
  75. </div>
  76. <script src="/manual/resources/prettify.js"></script>
  77. <script src="/manual/resources/lesson.js"></script>
  78. </body></html>