blend4web的三维小场景的开发应用(3)

        blend4web作为一个开源的框架,它提供了不少好的案例,在官网的案例中是不能打包到本地的,但是在项目管理页面中可以找到案例,并且能打包到本地,这样就可以研究它的代码和blender里面的一些设置。(这里重点讲一下:B4w的很多api必须和blender结合,只有在blender里面设置好了,才能在外部对模型对象进行相关的控制,比如:控制对象的显示隐藏,必须在blender里面设置物体为动态对象才可以,后续会仔细讲解这一设置)。

    1、打包项目到本地

    首先打开项目管理页面,然后点击 Back to index ,之后可以看到如下图页面:

195902_OP9d_3783115.png

然后点击红色圈圈内的链接,就可以看到如下图的案例界面:

201137_IN9F_3783115.png

上图左上角都是案例。可以选择看看,我现在做的项目,有不少功能都是在案例中找的办法。很值得研究。

左下角的make Project 点击,就可以把案例打包到本地。

201617_urxj_3783115.png

点击make 就会自动打包项目

201740_adlr_3783115.png

打包完成界面;

返回到项目管理界面就可以找到刚刚打包的项目了

201853_7cYi_3783115.png

在第三列中,可以打开它的Blender文件,然后研究想关的设置了

202343_RAap_3783115.png

红色圈内的相当于图层管理器,图层的名称在做项目的时候还是先统一规划好,在编写程序的时候会方便,同时也便于后期维护。下面那个小框框内的是各种属性选择及下面与之对应的属性面板。至此,怎么打包案例到本地也就算是完成了。下面开始算是正式进行web开发了,但是怎么把这些项目集成到系统里面,作为其中的一部分功能,同时在编译器里面进行编译。目前我发现两种集成的方法,下面我会详细介绍:

2、项目集成到系统的两种方法:

(1)直接先进行编译,最后构建部署。(开发工具我用的是Hbuilder)

    在项目管理页面看到的本地项目,都是可以在之前下载的 Blender ce文件夹下的projects文件下找的到的。

205452_MFks_3783115.png

然后我把整个project文件夹都放到hbuilder中

205840_78L6_3783115.png

205921_bOpQ_3783115.png

虽然这个里面有html。但是不能直接打开它,打开是不能加载三维场景的。只能是编写代码后,在项目管理页面中打开页面。

如果代码编译完成之后,需要在项目管理页面点击build project210558_h803_3783115.png

然后再去看开发工具中可以看到多了不少东西

210739_QS6Y_3783115.png

它是多了一个builde文件夹,这里面的才是最后项目需要的代码和页面,这个html页面是可以直接打开的。

但是这里面的Camera Animation.min.js里面的代码是压缩的

211115_qF5l_3783115.png

所以不能直接编写更改内容。如果想要编写代码,需要在外层的Camera Animation.js中编写。然后再次build project一下才能用。那有的同学可能会问有没有方法可以直接编写的,这个问题我当时也是摸索了大半天才找到方法。下面我介绍第二个方法。

(2) 直接构建项目,然后再编译

这个方法的关键点是在创建项目的时候要在设置里面进行如下图的选项,(我在第二篇介绍过为什么这么这样设置的原因)

211828_KZtQ_3783115.png

创建好之后,builde project一下,然后在开发工具中,可以看到如下图所示:

212916_YSjT_3783115.png

可以看到,demo2.min.js不是压缩的,然后就可以直接进行编写了。

由于初始创建的时候,blender里面会自动创建一个场景,如果我们需要把官网案例的场景移植到自己的blender文件中去,有个偷懒的快捷方法,就是Crtl +C 和Ctrl +V。

在创建的项目中的blender文件,快捷键A 全选,然后del删除之后,再到案例的blender文件中,全选,Crtl +C,再切换到项目的blender文件中,Ctrl +V。就可以了。

212624_FP4O_3783115.png

然后记得保存,保存之后,由于是更改了blender文件里面的内容,需要重新导出一json文件,

213209_x8mt_3783115.png

同时必须保证,导出的文件必须和 blender CE文件夹是在一个磁盘下。不然不能导出。

我的blender ce是在c盘下放置的,所以我可以导出到桌面,我在桌面新建一个json文件夹,然后导出两个文件213550_L1rN_3783115.png

把这两个文件复制,然后直接覆盖这里面的两个文件就可以了。213640_5eUw_3783115.png

我个人比较喜欢这个方法,毕竟修改模型是很少的。如果是多人协同编写代码,如果采用第一个方法是很麻烦进行协助编译的。

总结:这短短的三篇内容,却是我耗费了几周的时间和精力总结出来的,由于之前没有用过三维建模软件,更加没有用过blender,所以我一边自己摸索,一边在群里面很不要脸的反复问着基础的问题。没有办法,现在blend4web用的人很少。资料也基本上是找不到的。我写这些也就是希望避免再跳入自己走过的坑,让大家有更多的精力去做更有意义的研发。也希望有更多人一起探索这个新大陆。

 

    

 

转载于:https://my.oschina.net/u/3783115/blog/1627485

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值