脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-本机上使用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、在本机上建立一个服务器，把外部文件放到该服务器作为网络文件访问。

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:


https://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 https://localhost:3000/ and it will serve static files from the directory you chose.

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-本机上使用Three.js加载纹理全部内容，希望文章能够帮你解决javascript代码实例教程-本机上使用Three.js加载纹理所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。