最近微信的小游戏跳一跳很火,我跳了三个星期之后终于超过了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”之前,现在远远的观望了一下之后的节点。
领取专属 10元无门槛券
私享最新 技术干货