WebGL开源项目研究之ViziCities

前言:

自己对地图、三维非常感兴趣,而一个偶然的机会碰到了开源的项目ViziCites(http://vizicities.com/)虚拟城市,根据github上的源码终于跑通了。

一、安装配置

参考github上的README.md

Install Node.js & NPM

If you haven't already, install Homebrew before going any further.

brew install node
Install the Grunt CLI
npm install -g grunt-cli
Install the NPM packages
cd /path/to/vizicities
npm install
这里出现了问题,而解决的方法是,npm install phantomjs时需要用墙外的网站,而如果是校内网的话就会下载失败,所以goagent一下就搞定。。
Build ViziCities and watch for file changes using Grunt
cd /path/to/vizicities
grunt dev
Serve examples using Grunt

Open a new terminal tab or window, then type:

cd /path/to/vizicities
grunt serve

Then open http://localhost:8000/examples

二、在自己电脑上运行结果

发现自己对Node.js和grunt是小白,想找个时间学习学习,而后深入研究一下three.js和其他类库在此环境中的使用。

最后结果:

➜  vizicities git:(master) grunt dev
Running "notify_hooks" task

Running "jshint:files" (jshint) task
>> 100 files lint free.

Running "concat:dist" (concat) task
File "build/vizi.js" created.

Running "notify:finish" (notify) task

Running "notify:watch" (notify) task

Running "watch" task
Waiting...
^C%                                                                             ➜  vizicities git:(master) grunt serve
Running "notify_hooks" task

Running "connect:server" (connect) task
Waiting forever...
Started connect web server on 127.0.0.1:8000.
[D] server GET /examples 301 - - 4 ms
[D] server GET /examples/ 200 685 - 6 ms
[D] server GET /examples/reset.css 200 1769 - 3 ms
[D] server GET /css/loading.css 200 2471 - 3 ms
[D] server GET /build/vizi.js 200 1599165 - 11 ms
[D] server GET /favicon.ico 404 - - 1 ms
[D] server GET /examples/worker/three.min.js 200 410947 - 4 ms
[D] server GET /examples/worker/GeometryExporter.js 200 4771 - 4 ms
[D] server GET /examples/worker/underscore.min.js 200 14358 - 2 ms
[D] server GET /examples/worker/three.min.js 304 - - 3 ms
[D] server GET /examples/worker/GeometryExporter.js 304 - - 1 ms
[D] server GET /examples/worker/underscore.min.js 304 - - 1 ms
[D] server GET /examples/worker/three.min.js 304 - - 1 ms
[D] server GET /examples/worker/GeometryExporter.js 304 - - - ms
[D] server GET /examples/worker/underscore.min.js 304 - - - ms
[D] server GET /examples/worker/three.min.js 304 - - 1 ms
[D] server GET /examples/worker/GeometryExporter.js 304 - - 2 ms
[D] server GET /examples/worker/underscore.min.js 304 - - 1 ms
[D] server GET /examples/worker/three.min.js 304 - - 2 ms
[D] server GET /examples/worker/GeometryExporter.js 304 - - 2 ms
[D] server GET /examples/worker/underscore.min.js 304 - - 2 ms
[D] server GET /examples/worker/three.min.js 304 - - 6 ms
[D] server GET /examples/worker/GeometryExporter.js 304 - - 4 ms
[D] server GET /examples/worker/underscore.min.js 304 - - 1 ms
[D] server GET /examples/worker/three.min.js 304 - - 2 ms
[D] server GET /examples/worker/GeometryExporter.js 304 - - 2 ms
[D] server GET /examples/worker/underscore.min.js 304 - - 1 ms
[D] server GET /examples/worker/three.min.js 304 - - 3 ms
[D] server GET /examples/worker/GeometryExporter.js 304 - - 1 ms
[D] server GET /examples/worker/underscore.min.js 304 - - 4 ms


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值