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