前言
本文属于系列问题,需要的朋友们开始之前可以参考以下的两篇文章:
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 服务器安装包,安装:
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 是一个成熟的服务器产品。