How to run thing locally

最新推荐文章于 2021-05-18 14:12:33 发布

GLJK24

最新推荐文章于 2021-05-18 14:12:33 发布

阅读量338

点赞数

分类专栏： three.js 文章标签： three-js

three.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

如果只需要用到程序上的几何图形，而不需要加载纹理的话，页面可以直接从文件系统里面加载。只需要双击HTML文件，它就可以在浏览器中展示出来（以file:///yourFile.html的形式）。

Content loaded from external files

如果需要从外部文件中加载模型或者是纹理，由于浏览器的 same origin policy 安全限制，从文件系统加载会因为安全异常而失败。

有两个方法可以解决这个问题：
1. 更改浏览器中本地文件的安全性。这个方法允许用这个方式访问页面：
file:///yourFile.html
2. 在本地的web server中加载文件。这个方法允许用这个方式访问页面：
http://localhost/yourFile.html
如果选择1，那么需要注意在使用浏览器上网时防止漏洞。为了安全，需要创建单独的浏览器配置文件/快捷方式，仅用于本地开发。下面来尝试一下这两种选择。

Run a local server

很多编程语言都内置了简单的HTTP服务器。它们不像Apache或者是Nginx那么完善，但是足够测试这儿的three.js应用。

Node.js server

Node.js有一个简单的HTTP server包。这样安装:

npm install http-server -g

这样运行（从本地文件夹）：

http-server . p 8000

Python server

如果安装了Python，用命令行运行就可以了(从你的工作目录):

// Python 2.x
python -m SimpleHTTPServer
// Python 3.x
python -m http.server

这将在localhost的8000端口提供文件。例如地址栏中的地址是：

http://localhost:8000

Ruby server

如果安装了Ruby，你可以执行以下代码:

ruby -r webrick -e "s=WEBrick::HTTPServer.new(:Port=>8000,:DocumentRoot=>Dir.pwd);trap('INT'){s.shutdown};s.start"

PHP server

从php5.4.0开始，PHP也有内置的web server了：

php -S localhost:8000

Lighttpd

Lighttpd是一个轻量级的通用webserver。在这里介绍怎么使用HomeBrew在OSX上安装它。不同于这里讨论的其他服务器，lighttpd是一个完备的生态就绪服务器。
1. 使用homebrew安装：brew install lighttpd
2. 在webserver运行的文件夹中创建一个配置文件，名叫lighttpd.conf。这儿有一个例子
3. 在conf 文件中，将document-root的指向的文件夹修改为自己本地的文件夹。
4. 启动：lighttpd -f lighttpd.conf
5. 打开地址http://localhost:3000，会展示你本地文件夹的文件。

Change local files security policy

Safari

使用首选项启用“develop”菜单，Advanced -> Show develop menu in menu bar。
如果你在使用Safari调试，请在“develop”菜单中，选择“Disabled local file restrictions”。值得注意的是，Safari在缓存上有些奇怪的问题，所以建议在“develop”中设置“Disabled caches”develop

Chrome

关闭所有的Chrome窗口，注意是所有哦。
在windows操作系统上，你可以在任务管理器上查看是否真的关闭了。另外，如果你在任务栏上看到了chrome的图标，请右键点击退出它。这样就保证了真的完全退出了。
然后使用命令行启动Chrome

chrome --allow-file-access-from-files

在Windows上，可能最简单的是添加一个特殊快捷方式，这个快捷方式会包含上面的设置（right-click on shortcut -> properties -> target）。
在Mac OSX中，可以这样做：

open /Application/Google\ Chrome.app --args --allow-file-access-files

Firefox

在地址栏输入：about:config
找到security.fileuri.strict_origin_policy参数
设置这个参数为false

其他的方案将在Stack Overflow讨论