我只是想在网页上画个地球……

最近微信的小游戏跳一跳很火，我跳了三个星期之后终于超过了100分。看到介绍说，这个游戏是用three.js开发的，一个WebGL的框架。

看了一下three.js的文档，想把Y单倍群的迁移路线画到三维的地球（PM：形式远大于内容）。考虑到我在bootstrap和jquery上的经验，加上对three.js文档的初步探索，估计出一人天的工作量。

下载three.js，加到html页面里：

两个小时之后，一切顺利，地球画出来了。

为啥不能动呢？这一静态的货，怎么展示3D效果。于是施展GOP（Github Oriented Programming）大法，找来一个three.js的orbit-controls插件。使用起来很简单：

JS里面啥时候有require这个关键字了。。。

经历一串Google之后，我开始安装npm，写配置文件。当然，又折腾若干小时后，我开始安装webpack，再然后是开始写webpack的配置文件。接下来是entry文件，学着启动webpack的watch模式，打包bundle文件，浏览器调试...

于是，我一个有正儿八经计算机博士学位，学过计算机图形学的人，在折腾将近一个星期之后，终于画了个渣渣出来：

在我放弃继续精进的前端技能之后，在github上看到一个前端开发的知识路线图：

我之前对前端的了解基本上停留在第一个“Getting Deeper”之前，现在远远的观望了一下之后的节点。