three.js 如何在本地運行Three.js

倘若你只是使用Three.js庫中所提供的幾何體，且不載入任何紋理貼圖，則網(wǎng)頁是可以從本地的文件系統(tǒng)中打開，并且是能夠直接運行的，只需在文件管理器中雙擊HTML文件，它就可以在瀏覽器中進行顯示。 （此時你將在地址欄中看到類似這樣的URL：file:///yourFile.html）

從外部文件載入的內(nèi)容

倘若你需要從外部文件里載入幾何體或是紋理貼圖，由于瀏覽器same origin policy（同源策略）的安全限制，從本地文件系統(tǒng)載入外部文件將會失敗，同時拋出安全性異常。

這里有兩種方法來解決這個問題：

1. 在瀏覽器中改變本地文件的安全策略，這將使你可以通過

file:///yourFile.html

來直接運行本地文件系統(tǒng)中的文件。


2. 從本地的服務器運行文件，這可以讓你通過

http://localhost/yourFile.html

來訪問運行在本地服務器上的文件。

倘若你選擇第一種方法，請小心，倘若你使用同一個瀏覽器來進行日常網(wǎng)絡沖浪，你將可能會觸發(fā)一些漏洞。 你或許可以創(chuàng)建一個用于開發(fā)環(huán)境的獨立的瀏覽器配置文件或者快捷方式，僅僅用于本地開發(fā)；這將使得日常使用環(huán)境與開發(fā)環(huán)境相分離，以保證日常使用環(huán)境的安全性。 接下來，我們來看一看除此之外的別的方法。

運行一個本地的服務器

很多的編程語言都具有一個內(nèi)置的簡易HTTP服務器。它們的功能并不像能夠被用于生產(chǎn)環(huán)境的服務器，例如Apache 或者 NGINX那樣完善， 但對于你來測試three.js應用程序來說，它們就已經(jīng)足夠了。

流行的代碼編輯器插件

一些代碼編輯器具有插件，可以根據(jù)需要生成簡單的服務器。

• Visual Studio Code Live Server 插件。
• Atom Live Server 插件。

Servez

Servez 一個具有界面的簡單服務器。

Node.js server

Node.js 具有一個簡單的HTTP服務器包，如需安裝，請執(zhí)行：

npm install http-server -g

若要從本地目錄下運行，請執(zhí)行：

http-server . -p 8000

Python server

如果你已經(jīng)安裝好了Python，只需要從命令行里便可以運行它（從工作目錄）：

//Python 2.x
python -m SimpleHTTPServer

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

這將會在為當前目錄在8000端口創(chuàng)建一個服務器，也就是說你可以在地址欄里輸入這個地址來訪問已經(jīng)創(chuàng)建好的服務器：

http://localhost:8000/

Ruby server

如果你已經(jīng)安裝好了Ruby，通過執(zhí)行下列命也可以創(chuàng)建同樣的服務器：

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

PHP server

PHP自從5.4.0版本開始，就內(nèi)置了一個Web服務器：

php -S localhost:8000

Lighttpd

Lighttpd是一個輕量級的通用Web服務器，在這里，我們將介紹如何在OS X上使用HomeBrew來安裝它。 和我們在這里討論的其他服務器不同，lighttpd是一個成熟的、準用于生產(chǎn)環(huán)境的服務器。

1. 通過HomeBrew安裝lighttpd

brew install lighttpd

2. 在你希望作為服務器來運行的目錄里，創(chuàng)建一個名為lighttpd.conf的配置文件。 這是一個配置文件的樣本：TutorialConfiguration。
3. 在配置文件里，將server.document-root更改為你將要創(chuàng)建的服務器中的文件的所在的目錄。
4. 通過這個命令來啟動：

lighttpd -f lighttpd.conf

5. 使用瀏覽器打開http://localhost:3000/，然后服務器將可以從你所選擇的目錄中向你提供靜態(tài)文件。

IIS

如果你正在使用Microsoft IIS來作為網(wǎng)站服務器，在服務器載入之前，請為.fbx擴展名增加MIME類型。

File name extension: fbx        MIME Type: text/plain

在默認情況下，IIS阻止 .fbx、 .obj 文件的下載，因此你必須對IIS進行配置，使得這些類型的文件可以被下載。

其它簡單的替代方案你可以在Stack Overflow上找到：click here。