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