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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  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>如何在本地运行Three.js([name])</h1>
  12. <p>
  13. 倘若你只是使用Three.js库中所提供的几何体,且不载入任何纹理贴图,则网页是可以从本地的文件系统中打开,并且是能够直接运行的,只需在文件管理器中双击HTML文件,它就可以在浏览器中进行显示。
  14. (此时你将在地址栏中看到类似这样的URL:<em>file:///yourFile.html</em>)
  15. </p>
  16. <h2>从外部文件载入的内容</h2>
  17. <div>
  18. <p>
  19. 倘若你需要从外部文件里载入几何体或是纹理贴图,由于浏览器[link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy](同源策略)的安全限制,从本地文件系统载入外部文件将会失败,同时抛出安全性异常。
  20. </p>
  21. <p>这里有两种方法来解决这个问题:</p>
  22. <ol>
  23. <li>
  24. 在浏览器中改变本地文件的安全策略,这将使你可以通过<code>file:///yourFile.html</code>来直接运行*本地文件系统*中的文件。
  25. </li>
  26. <li>
  27. 从本地的服务器运行文件,这可以让你通过<code>http://localhost/yourFile.html</code>来访问运行在*本地服务器*上的文件。
  28. </li>
  29. </ol>
  30. <p>
  31. 倘若你选择第一种方法,请小心,倘若你使用同一个浏览器来进行日常网络冲浪,你将可能会触发一些漏洞。
  32. 你或许可以创建一个用于开发环境的独立的浏览器配置文件或者快捷方式,仅仅用于本地开发;这将使得日常使用环境与开发环境相分离,以保证日常使用环境的安全性。
  33. 接下来,我们来看一看除此之外的别的方法。
  34. </p>
  35. </div>
  36. <h2>运行一个本地的服务器</h2>
  37. <div>
  38. <p>
  39. 很多的编程语言都具有一个内置的简易HTTP服务器。它们的功能并不像能够被用于生产环境的服务器,例如[link:https://www.apache.org/ Apache] 或者 [link:https://nginx.org NGINX]那样完善,
  40. 但对于你来测试three.js应用程序来说,它们就已经足够了。
  41. </p>
  42. <h3>Node.js server</h3>
  43. <div>
  44. <p>Node.js 具有一个简单的HTTP服务器包,如需安装,请执行:</p>
  45. <code>npm install http-server -g</code>
  46. <p>若要从本地目录下运行,请执行:</p>
  47. <code>http-server . -p 8000</code>
  48. </div>
  49. <h3>Python server</h3>
  50. <div>
  51. <p>
  52. 如果你已经安装好了[link:http://python.org/ Python],只需要从命令行里便可以运行它(从工作目录):
  53. </p>
  54. <code>
  55. //Python 2.x
  56. python -m SimpleHTTPServer
  57. //Python 3.x
  58. python -m http.server
  59. </code>
  60. <p>这将会在为当前目录在8000端口创建一个服务器,也就是说你可以在地址栏里输入这个地址来访问已经创建好的服务器:</p>
  61. <code>http://localhost:8000/</code>
  62. </div>
  63. <h3>Ruby server</h3>
  64. <div>
  65. <p>如果你已经安装好了Ruby,通过执行下列命也可以创建同样的服务器:</p>
  66. <code>
  67. ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
  68. </code>
  69. </div>
  70. <h3>PHP server</h3>
  71. <div>
  72. <p>PHP自从5.4.0版本开始,就内置了一个Web服务器:</p>
  73. <code>php -S localhost:8000</code>
  74. </div>
  75. <h3>Lighttpd</h3>
  76. <div>
  77. <p>
  78. Lighttpd是一个轻量级的通用Web服务器,在这里,我们将介绍如何在OS X上使用HomeBrew来安装它。
  79. 和我们在这里讨论的其他服务器不同,lighttpd是一个成熟的、准用于生产环境的服务器。
  80. </p>
  81. <ol>
  82. <li>
  83. 通过HomeBrew安装lighttpd
  84. <code>brew install lighttpd</code>
  85. </li>
  86. <li>
  87. 在你希望作为服务器来运行的目录里,创建一个名为lighttpd.conf的配置文件。
  88. 这是一个配置文件的样本:[link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration TutorialConfiguration]。
  89. </li>
  90. <li>
  91. 在配置文件里,将server.document-root更改为你将要创建的服务器中的文件的所在的目录。
  92. </li>
  93. <li>
  94. 通过这个命令来启动:
  95. <code>lighttpd -f lighttpd.conf</code>
  96. </li>
  97. <li>
  98. 使用浏览器打开http://localhost:3000/,然后服务器将可以从你所选择的目录中向你提供静态文件。
  99. </li>
  100. </ol>
  101. </div>
  102. <h2>更改本地文件的安全策略</h2>
  103. <div>
  104. <h3>Safari</h3>
  105. <div>
  106. <p>
  107. 在“偏好”面板中启用开发菜单,位于“高级”-&gt“在菜单栏中显示开发菜单”
  108. </p>
  109. <p>
  110. 之后从Safari中的“开发”菜单中,选择“停用本地文件限制”,同样需要注意的是,Safari对于缓存有一些奇怪的行为,
  111. 因此建议,在同一菜单中打开“停用缓存”的选项;如果你正在编辑,请使用Safari进行调试。
  112. </p>
  113. </div>
  114. <h3>Chrome</h3>
  115. <div>
  116. <p>请关闭Chrome浏览器正在运行的*所有*实例,注意这里非常重要的关键字是“*所有*”。</p>
  117. <p>
  118. 在Windows中,你可以在任务管理器中查看所有正在运行的Chorme浏览器的实例。
  119. 此外,如果你在系统任务栏中看到了Chrome图标,请鼠标右键打开它的上下文菜单,点击关闭。这样就应当已经关闭所有正在运行的Chrome浏览器实例了。
  120. </p>
  121. <p>
  122. 然后使用命令行执行Chrome浏览器,并在命令行中添加允许访问本地文件的参数:</p>
  123. <code>chrome --allow-file-access-from-files</code>
  124. <p>
  125. 在Windows中,最简单的做法或许就是创建一个特别的快捷方式图标,快捷方式的目标指向上面的命令行
  126. (右键点击快捷方式图标-&gt;属性-&gt;目标)。
  127. </p>
  128. <p>在Mac OS X中,你可以用这种方法来添加允许访问本地文件的参数并运行Chrome:</p>
  129. <code>open /Applications/Google\ Chrome.app --args --allow-file-access-from-files</code>
  130. </div>
  131. <h3>Firefox</h3>
  132. <div>
  133. <ol>
  134. <li>
  135. 在地址栏中,键入<code>about:config</code>
  136. </li>
  137. <li>
  138. 找到这个参数<code>security.fileuri.strict_origin_policy</code>
  139. </li>
  140. <li>
  141. 将其设置为<em>false</em>
  142. </li>
  143. </ol>
  144. </div>
  145. </div>
  146. <p>
  147. 其它简单的替代方案你可以在Stack Overflow上找到:[link:http://stackoverflow.com/q/12905426/24874 click here]。
  148. </p>
  149. </div>
  150. </body>
  151. </html>