网易乐得技术团队

新版h5maker,教你如何h5制作立体场景(二)

上一篇文章已经比较详细的讲解了新版h5maker的基础用法,本篇文章将主要讲解一个特殊效果“一镜到底”的做法。

这种效果的原理就是把2d的图片延z轴纵向从前往后依次排列,镜头延z轴向前移动,先直观的感受一下“一镜到底”的效果:


具体做法

在开始设计之初将整个场景拆分为n个小场景:

以上面第一张动图为例:
第一页是一个门:

第二页是大桥,船,云朵:

第三页是石狮子,雕像,门:

依次一共有十页左右:

注意每个页面都要按立体空间编辑元素的z轴,以第三页为例:

因为所有页面组成一个立体场景,所以只有一个公共背景,第一页的背景图片:

最后在拓展中的切换效果里选中一镜到底:

预览,就能看到一个立体感超强的一镜到底效果了。

设计上的一个要点

中心漏空法则:每一页场景的中心区域最好是透明的,这样不会有阻挡视线的感觉,几种比较好的做法:做成门,通道,小空洞等;
每个小场景排列的元素越多,立体感越强,视觉冲击越大。

总结

上述例子的模板链接为:https://fa.163.com/nfop/h5/threejs_0628/index.htm
感兴趣的同学可以导入到工具中,自行摸索。

相关文章:
新版h5maker,教你如何h5制作立体场景(一)
新版h5maker,教你如何h5制作立体场景(三)