blend4web作为一个开源的框架,它提供了不少好的案例,在官网的案例中是不能打包到本地的,但是在项目管理页面中可以找到案例,并且能打包到本地,这样就可以研究它的代码和blender里面的一些设置。(这里重点讲一下:B4w的很多api必须和blender结合,只有在blender里面设置好了,才能在外部对模型对象进行相关的控制,比如:控制对象的显示隐藏,必须在blender里面设置物体为动态对象才可以,后续会仔细讲解这一设置)。
1、打包项目到本地
首先打开项目管理页面,然后点击 Back to index ,之后可以看到如下图页面:
然后点击红色圈圈内的链接,就可以看到如下图的案例界面:
上图左上角都是案例。可以选择看看,我现在做的项目,有不少功能都是在案例中找的办法。很值得研究。
左下角的make Project 点击,就可以把案例打包到本地。
点击make 就会自动打包项目
打包完成界面;
返回到项目管理界面就可以找到刚刚打包的项目了
在第三列中,可以打开它的Blender文件,然后研究想关的设置了
红色圈内的相当于图层管理器,图层的名称在做项目的时候还是先统一规划好,在编写程序的时候会方便,同时也便于后期维护。下面那个小框框内的是各种属性选择及下面与之对应的属性面板。至此,怎么打包案例到本地也就算是完成了。下面开始算是正式进行web开发了,但是怎么把这些项目集成到系统里面,作为其中的一部分功能,同时在编译器里面进行编译。目前我发现两种集成的方法,下面我会详细介绍:
2、项目集成到系统的两种方法:
(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用的人很少。资料也基本上是找不到的。我写这些也就是希望避免再跳入自己走过的坑,让大家有更多的精力去做更有意义的研发。也希望有更多人一起探索这个新大陆。