更新于 2020.9.15 krpano 1.20.8
本案例实现了热点在3D空间中穿梭的效果,会让浏览者产生一种更为真实的体验。
下载包位置
你电脑的路径\krpano-1.20.8\viewer\examples\slider-blend-cubes
演示
说明
在这个案例中,最底下的是正常使用image标签的全景效果。
1 2 3 |
<image> <cubestrip url="panos/boot.tiles/preview.jpg" /> </image> |
因为是demo,直接使用了preview预览图作为最下面的全景,当然也可以使用默认模式下的image标签。
在最上面一层则使用了立方体切片的六张hotspot图片
1 2 3 4 5 6 7 8 |
<style name="cubeface" distorted="true" keep="true" enabled="false" width="1000" height="1000" alpha="1" zorder="100" /> <hotspot name="pano_f" style="cubeface" url="../panos/boot.tiles/pano_f.png" ath="0" atv="0" rotate="0" details="30" /> <hotspot name="pano_r" style="cubeface" url="../panos/boot.tiles/pano_r.png" ath="90" atv="0" rotate="0" details="30"/> <hotspot name="pano_l" style="cubeface" url="../panos/boot.tiles/pano_l.png" ath="-90" atv="0" rotate="0" details="30" /> <hotspot name="pano_b" style="cubeface" url="../panos/boot.tiles/pano_b.png" ath="180" atv="0" rotate="0" details="30"/> <hotspot name="pano_u" style="cubeface" url="../panos/boot.tiles/pano_u.png" ath="0" atv="-90" rotate="0" details="30" /> <hotspot name="pano_d" style="cubeface" url="../panos/boot.tiles/pano_d.jpg" ath="0" atv="90" rotate="0" details="30" /> |
需要留意的是,这里都是透明的png图片,为了特定的效果,需要先行在ps里将需要抠掉的部分抠成透明。
这里六张png图片,图片本身的尺寸可以不是1000×1000,但在width和height中必须设置为1000。
同时前后左右上下六张热点图,也即是pano_f、pano_b、pano_r、pano_l、pano_u、pano_d。而这六张热点图的zorder设置为100。
我们放置一张鸭子图片作为中间层。
1 2 3 4 5 6 7 8 |
<events onloadcomplete="swim();" /> <hotspot name="duck" url="../skin/duck.png" keep="true" visible="false" enabled="false" scale="0.6" ath="40" atv="3" zorder="50" brightness="0.5" /> <action name="swim"> set(hotspot[duck].visible,true); tween(hotspot[duck].ath,-2008,500,linear,swim); </action> |
注意,这里duck这个热点的zorder是50,也即是处于底部全景图和六张透明png热点图之间。
使用swim动作让鸭子始终绕圈运动。
案例下载
链接:https://pan.baidu.com/s/1XJ-ev3P_r4tFh26k-qoAuQ
提取码:c4pi