原文地址：WebGL展示3D房屋内景
由于生活和工作上的原因,从年前开始一直到处奔波,没有太多的时间去关注和学习WebGL图形学相关的技术, 不过陆陆续续都有学习使用blender进行3D建模, 而这篇文章涉及到的房屋内景3D建模就是我这段时间以来的学习成果,现在展示出来.
实例和效果请看如下,文件模型比较大,页面加载比较慢,请耐心等候:
餐厅 dinning hall 3D
Blender是开源的建模和动画制作软件,功能虽然没有3dmax和maya强大,但它精简,易学易用,而且还是开源的, 非常适合像我这样的入门级新手.如果你也想做模型和特效,创建自己心目中的3D世界,Blender值得你去尝试.
入门教程推荐台湾大神的blender教程全集
在blender制作好模型之后,接着就是导出obj文件,接着就是使用js读取obj文件,之后就开始涉及到WebGL,具体的步骤可以参考我之前的文章 WebGL学习(3) - 3D模型
着色器着色器代码实现的是WebGL最基本的功能,使用了一个平行光源,关照部分有环境光,漫反射,冯氏高光镜面反射.代码详情如下:
顶点着色器
attribute vec4 a_position;//顶点位置 attribute vec4 a_color;//顶点颜色 attribute vec4 a_scolor;//顶点高光颜色 attribute vec4 a_normal;//法向量 uniform mat4 u_MvpMatrix;//mvp矩阵 uniform mat4 u_ModelMatrix;//模型矩阵 uniform mat4 u_NormalMatrix; varying vec4 v_Color; varying vec4 v_Scolor; varying vec3 v_Normal; varying vec3 v_Position; void main() { gl_Position = u_MvpMatrix * a_position; // 计算顶点在世界坐标系的位置，以便计算点光源在顶点处点位置 v_Position = vec3(u_ModelMatrix * a_position); // 计算变换后的法向量 v_Normal = vec3(u_NormalMatrix * a_normal); v_Color = a_color; v_Scolor = a_scolor; }