结合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效果没出来,只出来最基本的颜色和材质效果。
- 结合Blender和Three.js使用WEBGL
- three.js使用三:加载有纹理的模型,结合blender和convert_obj_three.py
- 检测使用 three.js 时的 WebGL 和浏览器兼容性(Detecting WebGL and browser compatibility with three.js)(转)
- three.js和webGL学习,初级
- WebGL和 Three.js 的关系
- Three.js使用Blender导出json文件U…
- WebGL three.js
- Webgl之three.js
- three.js(webGL库)
- three.js 与 webGL
- Blender加材料和纹理后Three.js却…
- Threejs 官网 - 检测使用 three.js 时的 WebGL 和浏览器兼容性(Detecting WebGL and browser compatibility with three.js)
- WebGL框架:Three.js和Babylon.js的比较
- WebGL库Three.js入门
- Blender Export Animation (Blender 导出 动画 THREE.js)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(5)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(1)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(2)
- gridview----删除
- C# 复制类内容
- 课后习题
- 监听连接
- 字符编码
- 结合Blender和Three.js使用WEBGL
- Java知识点之“写文件操作以及复制文件操作”
- Eclipse是著名的跨平台的自由集成开发环境(IDE)
- 使用call_usermodehelper在Linux内核中直接运行用户空间程序
- linux下svn密码查看
- Title
- 针对 Android Web 应用程序的事件记录器EventRecorder
- MFC CListCtrl 使用介绍
- BigTable学习