移花接木(36)- 利用透明PNG热点制作层叠效果

更新于 2020.9.15 krpano 1.20.8

本案例实现了热点在3D空间中穿梭的效果,会让浏览者产生一种更为真实的体验。

下载包位置

你电脑的路径\krpano-1.20.8\viewer\examples\slider-blend-cubes

演示

 

说明

在这个案例中,最底下的是正常使用image标签的全景效果。

因为是demo,直接使用了preview预览图作为最下面的全景,当然也可以使用默认模式下的image标签。

在最上面一层则使用了立方体切片的六张hotspot图片

需要留意的是,这里都是透明的png图片,为了特定的效果,需要先行在ps里将需要抠掉的部分抠成透明。

这里六张png图片,图片本身的尺寸可以不是1000×1000,但在width和height中必须设置为1000。

同时前后左右上下六张热点图,也即是pano_f、pano_b、pano_r、pano_l、pano_u、pano_d。而这六张热点图的zorder设置为100。

 

我们放置一张鸭子图片作为中间层。

注意,这里duck这个热点的zorder是50,也即是处于底部全景图和六张透明png热点图之间。

使用swim动作让鸭子始终绕圈运动。

 

案例下载

链接:https://pan.baidu.com/s/1XJ-ev3P_r4tFh26k-qoAuQ
提取码:c4pi