krpano教程--控制熱點跳轉到場景的指定視角

有這麼一種情況,假設我們用三個場景,這三個場景恰好是一條街道的同一方向的三個拍攝點。如上圖。

我們可以通過設置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_hotspotstylestyle元素。

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));

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章