快捷導(dǎo)航

three.js中文文檔學(xué)習(xí)之如何本地運行詳解

更新時間：2017年11月20日 11:31:35 作者：larny

這篇文章主要給大家介紹了關(guān)于three.js中文文檔學(xué)習(xí)之如何在本地運行的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

本文屬于系列問題，需要的朋友們開始之前可以參考以下的兩篇文章：

1、three.js中文文檔學(xué)習(xí)之創(chuàng)建場景

2、three.js中文文檔學(xué)習(xí)之通過模塊導(dǎo)入

如果你只是使用程序化的幾何體，不需要加載任何材質(zhì)，網(wǎng)頁應(yīng)該直接從文件系統(tǒng)加載，只需要雙擊文件管理器中 HTML 文件，應(yīng)該在你的瀏覽器能夠運行（地址欄長這樣子：file:///yourFile.html）

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

如果你從外部文件下載模塊和材質(zhì)，由于瀏覽器的同源政策的安全限制，會引發(fā)安全異常而加載失敗。

有兩種解決辦法：

在瀏覽器中對于本地文件修改安全性。你才能這樣進(jìn)入網(wǎng)頁：

file:///yourFile.html

從本地 web 服務(wù)器運行文件，你能這樣進(jìn)入網(wǎng)頁：

http://localhost/yourFile.html

如果你使用第一種，要注意你使用同一個瀏覽器（修改安全性之后的）進(jìn)行正常上網(wǎng)時會讓自己處于易受攻擊狀態(tài)。你可以創(chuàng)建一個獨立的瀏覽器配置和快捷方式，僅用作本地開發(fā)來確保安全。讓我們依次看看每種方法。

運行本地服務(wù)器

很多編程語言有內(nèi)置的 HTTP 服務(wù)器。他們沒有像 Apache或者 NGINX的全部功能，但對于測試 three.js 應(yīng)用已足夠。

Node.js 服務(wù)器

有一個簡單的 HTTP 服務(wù)器安裝包，安裝：

npm install http-server -g

運行：

http-server -p 8000

Python 服務(wù)器

如果你安裝了 Python，在你的工作目錄下運行以下命令行：

//Python 2.x
python -m SimpleHTTPServer

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

會從當(dāng)前目錄轉(zhuǎn)到 localhost 的 80 端口發(fā)起服務(wù)，地址欄是這樣：

http://localhost:8000/

PHP 服務(wù)器

PHP 也有內(nèi)置的 web 服務(wù)器，php 5.4.0 及以后：

php -S localhost:8000

Ruby 服務(wù)器

如果你安裝了這個，你可以運行如下代碼：

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

Lighttpd

它是一個非常輕量的通用 web服務(wù)器。我們以安裝了 HomeBrew 的 OSX 系統(tǒng)為例。不像上述服務(wù)器，lighttpd 是一個成熟的服務(wù)器產(chǎn)品。

通過 homebrew 安裝

brew install loghttpd

在你想運行 web 服務(wù)器的地方創(chuàng)建名為 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 到你需要服務(wù)的目錄。

開啟：