首頁  >  文章  >  web前端  >  詳解three.js本地運行的方法

詳解three.js本地運行的方法

小云云
小云云原創
2017-12-18 14:18:394943瀏覽

本文主要為大家介紹了關於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 中有討論。

相關推薦:

JS函式庫之Three.js基礎入門

Three.js之如何建立一個場景

Three.js基礎部分學習

以上是詳解three.js本地運行的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn