本機上使用Three.js載入紋理
怎樣載入紋理
// 首先, 創建一個紋理var mapUrl = "../images/molumen_small_funny_angry_monster.jpg";
var map = THREE.ImageUtils.loadTexture(mapUrl);
//然後, 創建phong 材質來顯示光影效果，把紋理傳給該材質
var material = new THREE.MeshPhongMaterial({ map: map });
// 創建幾何對象
var geometry = new THREE.CubeGeometry(1, 1, 1);
// 把幾何體對象和紋理材質整合到一個面片集合中
cube = new THREE.Mesh(geometry, material);
參考WebGL Up and Running by Tony Parisi
怎樣使用本地文件
WebGL默認情況下不同意使用本機上的紋理、模型文件的。
假設你僅僅是在使用WebGL繪制幾何圖形什麽的，沒有紋理載入直接點擊html文件以文件協議訪問就可以。地址欄顯示的格式如右：file:///C:/dir/to/example.html
載入外部文件
若想載入外部模型和紋理文件，由於同源策略的安全限制從文件系統載入文件會由於安全異常而失敗。
只是有兩個辦法能夠解決：
1、減少瀏覽器的安全級別
2、在本機上建立一個server。把外部文件放到該server作為網絡文件訪問。
If you use option 1, be aware that you may open yourself to some vulnerabilities if using the same browser for a regular web surfing. You may want to create a separate browser profile / shortcut used just for local development to be safe.
Change local files security policy
Safari
Enable the develop menu using the preferences panel, under Advanced -> "Show develop menu in menu bar"
Then from the safari "Develop" menu, select "Disable local file restrictions", it is also worth noting safari has some odd behaviour with caches, so it is advisable to use the "Disable caches" option in the same menu; if you are editing & debugging using safari.
Chrome
Close all running chrome instances first. Then start Chrome executable with a command line flag:
chrome --allow-file-access-from-files
On Windows, the easiest is probably to create a special shortcut which has added flag (right-click on shortcut -> properties -> target).
Firefox
Go to about:config
Find security.fileuri.strict_origin_policy parameter
Set it to false
Run local server
The simplest probably is to use Python‘s built-in http server.
If you have Python installed, it should be enough to run this from a command line:
# Python 2.x
python -m SimpleHTTPServer
# Python 3.x
python -m http.server
This will serve files from the current directory at localhost under port 8000:
http://localhost:8000/
If you have Ruby installed, you can get the same result running this instead:
ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap(‘INT‘) { s.shutdown }; s.start"
PHP also has a built-in web server, starting with php 5.4.0:
php -S localhost:8000
Node.js has a simple HTTP server package. To install:
npm install http-server -g
To run:
http-server .
Other simple alternatives are discussed here on Stack Overflow.
Of course, you can use any other regular full-fledged web server like Apache or nginx.
Example with lighttpd, which is a very lightweight general purpose webserver (on MAC OSX):
Install it via homebrew brew install lighttpd
Create a configuration file called lighttpd.conf in the directory where you want to run your webserver. There is a sample in this page.
In the conf file, change the server.document-root with the directory you want to serve
Start it with lighttpd -f lighttpd.conf
Navigate to http://localhost:3000/ and it will serve static files from the directory you chose.
本機上使用Three.js載入紋理