category : WebGL|ThreeJs

ThreeJs中文教程笔记教程

学习WebGL很长时间了,但是总是东拼一下,西凑一点,没有系统总结。趁现在经济危机,俺要发奋图强。这里总结一下,基于ThreeJs官网(http://www.threejs.org ) 和其他网上看的博客内容,定期更新本系列课程。今天突然发现,博客写了两三年了,人还是没变。我还是坚持做自己喜欢的事情。可是现在觉得自己越走越远,总结更新一下最近学习的知识。

3D模型的加载与使用

模型的基础知识既然在讲3D世界,那么我们这里提到的模型就是3D模型。我不想将一些书上的定义摘抄给大家,那些概念对大家的理解帮助并不大,而接下来,我会将我最直接通俗的理解告诉大家。 我们知道,在3DMAX,MAYA等软件(这是一些三维编辑软件)中,可以制作出3D模型。这些模型可用于室内设计,三维影视,三维游戏等领域。那么3D模型是怎么定义的呢?看看下面我的定义: 3D模型由顶点(vertex)组成,顶点之间连成三角形或四边形(在一个平面上),多个三角形或者四边形就能够组成复杂的立体模型. 如下图所示:

WebGL中的Canvas纹理合成

纹理合成从本质上来说,纹理只是图片而已,它是由像素点组成。无论在内存还是显存中,它都是由4个分量组成,这四个分量是R、G、B和A。唯一的不同的,在显存中,会比内存中更快的渲染到显示器上。这是毋庸置疑的,因为显存中的帧缓冲本来就是和显示器上 的像素一一对应的。 从上面的概念中,我们就能够引申出一些重要的理解了,就是只要是图像数据,准确的说是内存或者显存中的图像数据,都可以作为纹理,显示在屏幕中。 上面的课程,我们讲了通过loadtexture函数在服务器上加载一张图片作为纹理,这一节课,我们来讲通过html中的canvas来作为纹理。它非常重要,以后的课程中我们会经常使用这个技巧。 它们两者之间有很多差别,这个差别就是图片和canvas的差别,图片是通过图像处理软件,如photoshop来处理的。而canvas是通过浏览器的绘图API来绘制的。显示canvas能够给程序员更多的想象空间,从而做出更有意思的效果出来。本节的效果,是一个可以旋转的三维时钟。如下图所示,

WebGL中的图片纹理合成

纹理合成纹理对于我们来说是多么的重要,以至于大家已经忘记了它的重要性。闭上眼睛想一想,如果你心爱的女人,没有穿衣服,该是多么的令你心动啊。哦,说错了,是她不仅没有穿衣服,而且没有皮肤,就像画皮中的没有皮的周迅一样,你就不会喜欢它了,因为她奇丑无比。 纹理之于3D世界,就像皮肤之于动物世界一样。如果没有皮肤,那么人就会非常的丑陋,没有纹理,那么3D世界也就不会那么吸引人了。

WebGL中的各种光

世界有了光,就不在黑暗宇宙间的物体有的是发光的,有的是不发光的,我们把发光的物体叫做光源。太阳、电灯、燃烧着的蜡烛等都是光源。在Threejs的世界里,有了光,就不会在黑暗。看美剧 冰与火之歌:权力的游戏 第六季 里面就有火神 呵呵

运动的场景

动起手来官方文档中其实给了很多的实例效果,可惜时间过得飞快,都没来得及仔细分析,学习。这一次让我们静下心,仔细的研究Three.js的每一个细节,终将成为这个领域的高手。不仅是成为three.js的高手,更重要的是理解图形学的概念,轻易掌握其他3D图形库。不是吹牛,大家阅读完这套课程,能够轻易的实现艳丽的粒子系统、模拟多种物理现象(如衣服在风中飘动),让浏览器中2D和3D混合等令人大饱眼福的效果。

WebGL中的相机

动起手来在第一课里,我们提到后续课程会详细讲解相机,那么今天就是我履行诺言的时刻了。嘿,这一刻,有点激动,想到相机,大学时,一直想买一个单反,但是要1万多。工作后,当一个月的工资就能买一个单反时,内心充满了骄傲和自豪。所以,各位大大们,技术还是有用的,至少技术可以用来挣钱。 家有万贯,不如一技在手,加油。 对WebGL感兴趣,还不知道如何入门的大大们,看看本教程吧,我有信心看完本教程,特别是看完本教程的中级和高级篇,你应该对3D世界有一个自己的理解了。使用你做的绚丽的demo去找一份不做的工作,就应该没有问题。

点线面基本作图

WebGL中的点线面在计算机世界里,3D世界是由点组成,两个点能够组成一条直线,三个不在一条直线上的点就能够组成一个三角形面,无数三角形面就能够组成各种形状的物体,如下图:

初始WebGL和ThreeJS

什么是WebGL简而言之,WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。而ThreeJS是一个Javascript类库,用于方便再浏览器中使用js完成WebGL中3d场景的绘制,模型的渲染。