three.js 中文文档 4.如何本地运行

4.如何本地运行

标签： 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 中有讨论。