更新于 2020.11.19 krpano 1.20.9
本案例实现了使用鼠标或触摸拖动滑条来任意融合两个相似场景。同一场景不同季节的景色,如昼夜、开灯关灯等都可以使用该效果。
下载包位置
你电脑的路径\krpano-1.20.9\viewer\examples\slider-blend-cubes
演示
步骤
素材准备
我们看案例所在的文件夹的截图:
首先需要融合两个场景的全景图是由各自的6张立方体切片组成,分别是前后左右上下,你可以使用krpano下载文件夹中的
Convert SPHERE to CUBE droplet.bat
或者是较新版本中的
Convert SPHERE CUBE Droplet.exe
因默认会生成tif图片,所以在下载包的templates文件夹的convertdroplets.config文件中的下面的高亮行
1 2 3 4 |
[Convert SPHERE to CUBE] cubeformat=CUBE cubesize=auto outputformat=tif |
改为
1 2 3 4 |
[Convert SPHERE to CUBE] cubeformat=CUBE cubesize=auto outputformat=jpg |
这样生成的立方体切片就是jpg图片。保存convertdroplets.config文件。
把球面全景图(第一张全景图命名为pano1.jpg第二张全景图命名为pano2.jpg)拖拽到对应的droplet。然后把12张切片图片和案例中slider_background.png以及slider_grip.png两个图片都放在你的文件夹vtour里。
代码修改
假设你是针对tour.xml里众多scene标签中的其中一个进行滑条融合。我们找到这个scene,默认生成的scene里面的内容,应该有image标签。image标签定义了该场景的全景图。我们把整段image标签删掉。
1 2 3 |
<image> …… </image> |
把image标签内以及image标签删除以后,我们下面所做的复制粘贴内容都是从范例文件夹里的slider.xml到我们自己的xml进行。
首先我们把scene标签里的onstart里加上
onstart=”setblend(0);”
然后我们把下面所有的代码都放在这个scene标签内
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<layer name="slider_bg" url="slider_background.png" align="bottom" x="0" y="30" handcursor="false" width.mobile="220" /> <layer name="slider_grip" url="slider_grip.png" align="left" edge="center" parent="slider_bg" x="0" ondown="copy(drag_currentx, x); copy(drag_stagex, mouse.stagex); asyncloop(pressed, calc(newx, drag_currentx + (mouse.stagex - drag_stagex)); clamp(newx, 0, get(layer[slider_bg].pixelwidth)); copy(x, newx); setblend(calc(newx / layer[slider_bg].pixelwidth)); );" /> <style name="cubeface" distorted="true" width="1000" height="1000" enabled="false" alpha="0.0" /> <hotspot name="pano1_f" style="cubeface" url="pano1_f.jpg" ath="0" atv="0" /> <hotspot name="pano1_l" style="cubeface" url="pano1_l.jpg" ath="-90" atv="0" /> <hotspot name="pano1_r" style="cubeface" url="pano1_r.jpg" ath="+90" atv="0" /> <hotspot name="pano1_u" style="cubeface" url="pano1_u.jpg" ath="0" atv="-90" /> <hotspot name="pano1_d" style="cubeface" url="pano1_d.jpg" ath="0" atv="+90" /> <hotspot name="pano1_b" style="cubeface" url="pano1_b.jpg" ath="+180" atv="0" /> <hotspot name="pano2_f" style="cubeface" url="pano2_f.jpg" ath="0" atv="0" /> <hotspot name="pano2_l" style="cubeface" url="pano2_l.jpg" ath="-90" atv="0" /> <hotspot name="pano2_r" style="cubeface" url="pano2_r.jpg" ath="+90" atv="0" /> <hotspot name="pano2_u" style="cubeface" url="pano2_u.jpg" ath="0" atv="-90" /> <hotspot name="pano2_d" style="cubeface" url="pano2_d.jpg" ath="0" atv="+90" /> <hotspot name="pano2_b" style="cubeface" url="pano2_b.jpg" ath="+180" atv="0" /> <action name="setblend"> set(blend1, %1); sub(blend2, 1.0, %1); copy(hotspot[pano1_f].alpha, blend1); copy(hotspot[pano1_l].alpha, blend1); copy(hotspot[pano1_r].alpha, blend1); copy(hotspot[pano1_b].alpha, blend1); copy(hotspot[pano1_u].alpha, blend1); copy(hotspot[pano1_d].alpha, blend1); copy(hotspot[pano2_f].alpha, blend2); copy(hotspot[pano2_l].alpha, blend2); copy(hotspot[pano2_r].alpha, blend2); copy(hotspot[pano2_b].alpha, blend2); copy(hotspot[pano2_u].alpha, blend2); copy(hotspot[pano2_d].alpha, blend2); </action> |
修改以下代码中的x、y以及align属性可以改变滑条的位置。
1 |
<layer name="slider_bg" url="slider_background.png" align="bottom" x="0" y="30" handcursor="false" width.mobile="220" /> |
场景的无缝过渡
我们的需求很简单,好比现在有一个简约型装修的样板间,然后我们点击某个按钮,场景无缝融合到一个豪华型装修的样板间。也好比,这个场景是夏天,点击按钮后,场景无缝融合到冬天的场景。
在这样的需求下,首先相机的拍摄位置,包括三脚架的位置,镜头的高度,也就是节点在空间中的位置应该是一致的。你在拍摄这两个场景的时候就要注意点。就好比是拍摄户外的场景,需要明显的天气或气候对比时,利用其它工具记录好镜头的位置,以便下次拍摄第二个场景时保持在相同的位置。
在拼接的时候保证两张图片是一样的X位移,也就是如果有一个物体是两张图共有的,那么它应该出现在这两个球体全景图的相同的平面坐标上。
接下来就是我们需要实现的krpano的功能。我们只需要在场景1的按钮layer中加上一个简单的代码。
1 |
onclick="loadscene(scene2, null, KEEPVIEW|KEEPMOVING|NOPREVIEW, BLEND(1));" |
KEEPVIEW是保持相同的视角,包括切换前的hlookat以及vlookat和fov,KEEPMOVING blend(1)则保证了融合的速度有一秒的时间
下面是关于loadscene的详细说明: