结合Blender和Three.js使用WEBGL

来源:互联网 发布:淘宝发货单打印软件 编辑:程序博客网 时间:2024/05/22 14:23

这篇文章详解使用的基本流程,以及相关注意事项。

http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/


第一步,下载blender,安装。根据教程画了个GingerBread的小人。目前Blender官网没有2.60的教程,只有2.4的。所以在使用blender时候遇到很多界面及操作上的问题。慢慢摸索,最终画出了这个小人。



和教程上的不太一样,主要是在设置texture时候实在找不到和教程中一致的设置。


第二步,将该小人导出obj文件伴随会有mtl文件生成。具体的导出设置参考文前的链接教程。如果使用了自己制作的texture,记得保存为图片。(这个在使用中貌似以前版本的blender是可以导出伴随贴图文件的文件夹,2.60之后貌似不支持了。另外Maya支持导出obj和相关的mtl以及贴图文件,如果对maya熟悉的同学也可以尝试。我在尝试时候总是遇到png图片贴图到webgl中显示不正常,遂放弃。)


第三步,导出的obj文件,需要使用Three.js中的converter.py脚本转换为js文件。在使用中为了方便,我直接将python路径添加到PATH中,将converter.py拷贝到生成obj目录下。cmd直接进入该路径,运行脚本。命令格式为:convert_obj_three.py -i gingerbread.obj -o gingerbread.js。

第四步,下载Three.js。在example中放入gingerbread.js。 直接修改example中webgl_objconvert_test.html文件中的male或者female,替换为自己的js文件。用浏览器打开,可以看到效果


注意使用支持webgl的浏览器。(除了IE的貌似都可以, ^_^ )


但是发现blender中的texture效果没出来,只出来最基本的颜色和材质效果。