网易乐得技术团队

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

上一篇文章已经比较详细的讲解了“一镜到底”的制作方法,本篇文章将主要讲解一个特殊效果“柱状全景”的做法。

全景(Panorama)的概念:

全景(Panorama)是把相机环360度拍摄的一组或多组照片拼接成一个全景图像。

这个概念有点抽象,举个栗子:把一个人关在一个完全封闭的超级大的箱子里,在箱子的内部贴上景色的壁纸,再辅以灯光,这个人看到的就是一个全景图。小demo
围住人的箱子的形状不同,真实度也不同,上边的demo是比较简单一种“立方体全景”。

全景的大概分为三类

1、立方体全景:效率最高,需要全景相机,目前比较常用,很多仿真展示都用这个,例如谷歌地图,百度地图,房形展示等。
2、圆柱体全景:效率也很高,很多活动都用,比如去年的造物节。
3、球形全景:球形比较吃效率,不是很常用,但是最接近人的视角。

柱状全景的做法:

柱状全景就是一个圆柱体把人围在中心,简单demo效果:

上方demo的整体背景图为:

这是一个长方形,它的最左侧和最右侧可以相融合,从而围成一个圆柱形。

因为全景的背景读取与别的效果稍有不同,所以制作之前需要先选中切换效果:

把这张大图平均切割为四等分,从左向右依次作为背景上传到工具中,得到四个只有背景的页面

点击预览,如下图,背景已经围成了一个柱状:

因为整体全景的上下和背景中有镂空的区域,所以需要加上整体背景,插入新页(第五页),修改背景,第五页的背景就会变为总体背景:

圆柱体除了四周这个长方体围成的柱状面以外,还有上下两个底,
它们分别取的第六页第七页的第一个图片元素(图片默认在正中心):

经过了上述这些步骤我们就把这个柱状全景的壳做好了。

下面我们可以在里边添加人物,装饰品等,在前四页的背景的相应位置添加物品,人物的图片元素:


当然也可以修改z坐标,z坐标最好大于0,尽量小于300,也可以为其添加事件。

一切就绪,设置loading图标,预览,发布就生成了一个酷炫的全景了。

关于特效

目前提供了两种整页的特效,飘雪和星空:

飘雪适合应用于冬季主题或者圣诞主题的场景:

星空适合应用于宇宙主题,暗色的主题。

关于设计

柱状全景对于设计的要求比较高,但相应的效果也非常的好,前几天网易的20周年活动页也简单的应用到了柱状全景,目前插画的风格比较多,上下区域最好能灵活的延展。

总结

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

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