blend4web做为一个开源的框架,它提供了很多好的案例,在官网的案例中是不能打包到本地的,可是在项目管理页面中能够找到案例,而且能打包到本地,这样就能够研究它的代码和blender里面的一些设置。(这里重点讲一下:B4w的不少api必须和blender结合,只有在blender里面设置好了,才能在外部对模型对象进行相关的控制,好比:控制对象的显示隐藏,必须在blender里面设置物体为动态对象才能够,后续会仔细讲解这一设置)。html
一、打包项目到本地web
首先打开项目管理页面,而后点击 Back to index ,以后能够看到以下图页面:json
而后点击红色圈圈内的连接,就能够看到以下图的案例界面:api
上图左上角都是案例。能够选择看看,我如今作的项目,有很多功能都是在案例中找的办法。很值得研究。框架
左下角的make Project 点击,就能够把案例打包到本地。工具
点击make 就会自动打包项目开发工具
打包完成界面;ui
返回到项目管理界面就能够找到刚刚打包的项目了htm
在第三列中,能够打开它的Blender文件,而后研究想关的设置了对象
红色圈内的至关于图层管理器,图层的名称在作项目的时候仍是先统一规划好,在编写程序的时候会方便,同时也便于后期维护。下面那个小框框内的是各类属性选择及下面与之对应的属性面板。至此,怎么打包案例到本地也就算是完成了。下面开始算是正式进行web开发了,可是怎么把这些项目集成到系统里面,做为其中的一部分功能,同时在编译器里面进行编译。目前我发现两种集成的方法,下面我会详细介绍:
二、项目集成到系统的两种方法:
(1)直接先进行编译,最后构建部署。(开发工具我用的是Hbuilder)
在项目管理页面看到的本地项目,都是能够在以前下载的 Blender ce文件夹下的projects文件下找的到的。
而后我把整个project文件夹都放到hbuilder中
虽然这个里面有html。可是不能直接打开它,打开是不能加载三维场景的。只能是编写代码后,在项目管理页面中打开页面。
若是代码编译完成以后,须要在项目管理页面点击build project
而后再去看开发工具中能够看到多了很多东西
它是多了一个builde文件夹,这里面的才是最后项目须要的代码和页面,这个html页面是能够直接打开的。
可是这里面的Camera Animation.min.js里面的代码是压缩的
因此不能直接编写更改内容。若是想要编写代码,须要在外层的Camera Animation.js中编写。而后再次build project一下才能用。那有的同窗可能会问有没有方法能够直接编写的,这个问题我当时也是摸索了大半天才找到方法。下面我介绍第二个方法。
(2) 直接构建项目,而后再编译
这个方法的关键点是在建立项目的时候要在设置里面进行以下图的选项,(我在第二篇介绍过为何这么这样设置的缘由)
建立好以后,builde project一下,而后在开发工具中,能够看到以下图所示:
能够看到,demo2.min.js不是压缩的,而后就能够直接进行编写了。
因为初始建立的时候,blender里面会自动建立一个场景,若是咱们须要把官网案例的场景移植到本身的blender文件中去,有个偷懒的快捷方法,就是Crtl +C 和Ctrl +V。
在建立的项目中的blender文件,快捷键A 全选,而后del删除以后,再到案例的blender文件中,全选,Crtl +C,再切换到项目的blender文件中,Ctrl +V。就能够了。
而后记得保存,保存以后,因为是更改了blender文件里面的内容,须要从新导出一json文件,
同时必须保证,导出的文件必须和 blender CE文件夹是在一个磁盘下。否则不能导出。
个人blender ce是在c盘下放置的,因此我能够导出到桌面,我在桌面新建一个json文件夹,而后导出两个文件
把这两个文件复制,而后直接覆盖这里面的两个文件就能够了。
我我的比较喜欢这个方法,毕竟修改模型是不多的。若是是多人协同编写代码,若是采用第一个方法是很麻烦进行协助编译的。
总结:这短短的三篇内容,倒是我耗费了几周的时间和精力总结出来的,因为以前没有用过三维建模软件,更加没有用过blender,因此我一边本身摸索,一边在群里面很不要脸的反复问着基础的问题。没有办法,如今blend4web用的人不多。资料也基本上是找不到的。我写这些也就是但愿避免再跳入本身走过的坑,让你们有更多的精力去作更有意义的研发。也但愿有更多人一块儿探索这个新大陆。