krpano課堂(肥宗) · 2015-07-13 19:32
有這么一種情況，假設我們用三個場景，這三個場景恰好是一條街道的同一方向的三個拍攝點。如上圖。
我們可以通過設置A、B、C三個場景中的view元素中的hlookat屬性，實現了從A到B、從B到C保持同一個方向。假設我們的圖是左東右西的方向。那我們站在A點面向B的方向，我們會看到鏈接到B的熱點，當我們點擊該熱點時，初始視角應該還是面向東方，也就是能看到更遠處的鏈接到C的熱點。簡單來說，保持了方位的統一。
問題來了，當我們從C回到B，或者從B回到A時，進入場景的時候初始視角還是面向東方，而不是面向西方，這樣就沒有保持方位的統一。如何在krpano的默認熱點中實現方位的統一呢？
krpano默認生成熱點的代碼控制分為兩個部分，一個是tour.xml中的每個hotspot元素，一個是在vtourskin.xml中對應的名為skin_hotspotstyle的style元素。
tour.xml中某個熱點：
| <hotspot name="spot1" style="skin_hotspotstyle" ath="200.496" atv="10.890"linkedscene="scene_a1kt" /> |
vtourskin.xml中的style：
| <style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" oy="0"distorted="false" tooltip="" onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll(); );" onloaded="if(skin_settings.tooltips_hotspots, if(linkedscene, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); ));" /> |
當然，指定到特定的場景這個是沒有問題的，本來熱點就是指定到某個場景的。基本上我們要指定一個新的hlookat值。因此我們對hotspot的部分，例如是從C回到B時的熱點，也就是在C場景中，linkedscene為B的熱點：
| <hotspot name="spot1" style="skin_hotspotstyle" ath="200.496" atv="10.890"linkedscene="scene_B" hlookat="200" />
|
可以看到我們加了一個hlookat=”200″，這個就是我們從C進入到B時的初始視角。該值的獲取可以使用options插件。
然后我們將style改為：
| <style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" oy="0"distorted="false" tooltip="" onclick="if(linkedscene, skin_hidetooltips(); tween(scale,0.25,0.5); tween(oy,-20,0.5); tween(alpha,0,0.5); looktohotspot(); loadscene(get(linkedscene),null,get(skin_settings.loadscene_flags),get(skin_settings.loadscene_blend)); skin_updatescroll();if(hlookat,lookat(get(hlookat),get(view.vlookat),110)); );" onloaded="if(skin_settings.tooltips_hotspots, if(linkedscene, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); ));" /> |
其實這里我們是在onclick事件中的if中增加了一個
| if(hlookat,lookat(get(hlookat),get(view.vlookat),110)); |
意思就是如果存在hlookat，那么就使用lookat這個action，跳轉到指定的位置。分別對應的是球面坐標中的水平和垂直位置以及視角fov