今天起,我决心开一个three.js的大坑,一来是为自己的新书做准备,二来也是觉得国内3D绘图方面的资料有些贫乏,而且多为E文. 总之诸多原因吧,我决心再做一次技术的搬运工,已尽绵薄之力.

threejs 是一个3D图形库

threejs 最早是 Ricardo Cabello(一个西班牙小伙) 在 GitHub上发布的一个基于webgl的3D图形库, 当然,除了Threejs还有其他类似3D图形库比如 Babylon.js , PhiloGL, GLGE, scenejs, osgjs, c3dl 他们的功能都差不多.感兴趣的童鞋可以都了解下.

但到目前为止 threejs 已经在github上疯狂的收割了 27525 个 star.

巨型传送门:https://github.com/mrdoob/three.js

那么问题来了,我们为什么需要 threejs 这样的3D图形库?

要知道3D绘图是一种非常复杂的工作, 中间涉及到宿主语言(浏览器中是js) 和 glsl 的很多知识, 直接调用这些底层的API是非常痛苦且低效的.我们需要一种 工具来简化这个操作. 于是 threejs 就诞生了. 使用 threejs , 短短几行代码就可以实现一个非常复杂的3D场景. 而且 threejs 还提供了各种 loader 来兼容目前主流的3D模型文件.方便我们直接导入到场景里.

下面我们来看一个threejs 例子:

源码其实只有短短的几行.

threejs 的背后是 webgl

threejs的官网上有很多非常华丽的 demo ,这充分体现了 threejs 的功能是多么的强大. threejs的高性能底层得益于webgl, 而webgl正在成为一个行业标准, 以有越来越多的浏览器宣布支持它. webVR 等新技术的诞生也都离不开 webgl.

有gpu加速的浏览器, 必然如虎添翼. 我们现在既可以享受 webpage 带来的便捷,又可以得到native的性能体验. 真是爽歪歪..

记得Jquery当年有个口号: write less,do more, 我想这个同样适用于我们将要学习的 threejs.