three.js中文文档学习之如何本地运行详解
前言
本文属于系列问题,需要的朋友们开始之前可以参考以下的两篇文章:
1、three.js中文文档学习之创建场景
2、three.js中文文档学习之通过模块导入
如果你只是使用程序化的几何体,不需要加载任何材质,网页应该直接从文件系统加载,只需要双击文件管理器中HTML文件,应该在你的浏览器能够运行(地址栏长这样子:file:///yourFile.html)
从外部文件加载内容
如果你从外部文件下载模块和材质,由于浏览器的同源政策的安全限制,会引发安全异常而加载失败。
有两种解决办法:
在浏览器中对于本地文件修改安全性。你才能这样进入网页:
file:///yourFile.html
从本地web服务器运行文件,你能这样进入网页:
http://localhost/yourFile.html
如果你使用第一种,要注意你使用同一个浏览器(修改安全性之后的)进行正常上网时会让自己处于易受攻击状态。你可以创建一个独立的浏览器配置和快捷方式,仅用作本地开发来确保安全。让我们依次看看每种方法。
运行本地服务器
很多编程语言有内置的HTTP服务器。他们没有像Apache或者NGINX的全部功能,但对于测试three.js应用已足够。
Node.js服务器
有一个简单的HTTP服务器安装包,安装:
npminstallhttp-server-g
运行:
http-server-p8000
Python服务器
如果你安装了Python,在你的工作目录下运行以下命令行:
//Python2.x python-mSimpleHTTPServer //Python3.x python-mhttp.server
会从当前目录转到localhost的80端口发起服务,地址栏是这样:
http://localhost:8000/
PHP服务器
PHP也有内置的web服务器,php5.4.0及以后:
php-Slocalhost:8000
Ruby服务器
如果你安装了这个,你可以运行如下代码:
ruby-rwebrick-e"s=WEBrick::HTTPServer.new(:Port=>8000,:DocumentRoot=>Dir.pwd);trap('INT'){s.shutdown};s.start"
Lighttpd
它是一个非常轻量的通用web服务器。我们以安装了HomeBrew的OSX系统为例。不像上述服务器,lighttpd是一个成熟的服务器产品。
通过homebrew安装
brewinstallloghttpd
在你想运行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-flighttpd.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
其他简单都方法也在StackOverflow中有讨论。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。