three.js 中文文檔 4.如何本地運行

4.如何本地運行

標籤： three.js

若是你只是使用程序化的幾何體，不須要加載任何材質，網頁應該直接從文件系統加載，只須要雙擊文件管理器中 HTML 文件，應該在你的瀏覽器可以運行（地址欄長這樣子：file:///yourFile.html）

從外部文件加載內容

若是你從外部文件下載模塊和材質，因爲瀏覽器的 同源政策 的安全限制，會引起安全異常而加載失敗。

有兩種解決辦法：

• 在瀏覽器中對於本地文件修改安全性。你才能這樣進入網頁：

file:///yourFile.html

• 從本地 web 服務器運行文件，你能這樣進入網頁：

http://localhost/yourFile.html

若是你使用第一種，要注意你使用同一個瀏覽器（修改安全性以後的）進行正常上網時會讓本身處於易受攻擊狀態。你能夠建立一個獨立的瀏覽器配置和快捷方式，僅用做本地開發來確保安全。讓咱們依次看看每種方法。

運行本地服務器

不少編程語言有內置的 HTTP 服務器。他們沒有像 Apache或者 NGINX的所有功能，但對於測試 three.js 應用已足夠。

Node.js 服務器

有一個簡單的 HTTP 服務器安裝包，安裝：

npm install http-server -g

運行：

http-server -p 8000

Python 服務器

若是你安裝了 Python，在你的工做目錄下運行如下命令行：

//Python 2.x
python -m SimpleHTTPServer

//Python 3.x
python -m http.server

會從當前目錄轉到 localhost 的 80 端口發起服務，地址欄是這樣：

http://localhost:8000/

PHP 服務器

PHP 也有內置的 web 服務器，php 5.4.0 及之後：

php -S localhost:8000

Ruby 服務器

若是你安裝了這個，你能夠運行以下代碼：

ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"

Lighttpd

它是一個很是輕量的通用 web服務器。咱們以安裝了 HomeBrew 的 OSX 系統爲例。不像上述服務器，lighttpd 是一個成熟的服務器產品。

• 經過 homebrew 安裝

brew install loghttpd

• 在你想運行 web 服務器的地方建立名爲 lighttpd.conf 的配置文件。示例：

server.document-root = "/var/www/servers/www.example.org/pages/" 

server.port = 3000

mimetype.assign = (
  ".html" => "text/html", 
  ".txt" => "text/plain",
  ".jpg" => "image/jpeg",
  ".png" => "image/png" 
)

• 在配置文件中，改變 server.document-root 到你須要服務的目錄。
• 開啓：

lighttpd -f lighttpd.conf

• 輸入 http://localhost:3000/ 就能從你選擇的目錄提供靜態文件的服務。

改變本地文件的安全政策

Safari

使用偏好設置面板開啓開發者選項：高級 -> "在菜單欄中顯示開發菜單".

而後在 開發 -> 停用本地文件限制。若是你使用 Safari 來編輯和調試的話，值得注意的是 safari 對於緩存總有異常行爲，因此在一樣的菜單下點擊 停用緩存 是個明智的選擇。

chrome

首先關閉全部運行的chrome 實例，記住是全部。

在 Windows下，你須要用進程管理器檢查是否都關閉了。或者，若是你在系統托盤裏看見了 chrome 圖標，打開右鍵菜單點擊 退出。應該能關閉全部實例。

而後經過命令行標記啓動 chrome 程序：

chrome --allow-file-access-from-files

在 Window 下，最簡單的方法就是建立一個特殊的快捷方式圖標，在結尾添加如上的標識。（右鍵 chrome 的快捷方式 -> 屬性 -> 目標）

Firefox

• 在地址欄，輸入 about:config
• 找到 security.fileuri.strict_origin_policy 參數
• 設定爲 false

其餘簡單都方法也在 Stack Overflow 中有討論。