通過JS動態切換大場景xml

我們在利用krpano去制作720全景圖的時候，通常會遇到需要在兩個大場景下切換的情況，或許我們可以通過不同鏈接去跳轉，但是這樣用戶的體驗效果極差，因此我們可以通過JS動態切換大場景xml，具體步驟如下：

第一步：將需要切換的場景**.xml、panos里面的文件復制到相應目錄下

第二步：在tour.xml下的scene標簽內定義一個可點擊的熱點

<hotspot name="video" url="skin/vtourskin_mapspotactive.png" scale="0.4" ath="-162.243" atv="40.839" onclick="js(loadpano('zhongye.xml','scene_lqc'););" />

 

第三步：在tour.html 內定義點擊事件

<div id="pano" style="width:100%;height:100%;">
    <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
        <script>
            var krpano = null;
                embedpano({
                    swf: "tour.swf",
                    xml: "tour.xml",
                    target: "pano",
                    html5: "auto",
                    mobilescale: 1.0,
                    passQueryParameters: true,
                    onready: krpano_onready_callback
                });

            function krpano_onready_callback(krpano_interface) { krpano = krpano_interface;
            }

            function loadpano(xmlname,sceneName) {
                    if(krpano) {    
                                                 //動態切換xml，xmlname為tour.xml傳過來的值 
                                                 krpano.call("loadpano(" + xmlname + ", null, MERGE, BLEND(0.5));"); 
                                                  //sceneName為切換后加載的第一個場景
                                                 krpano.call("loadscene('" + sceneName + "')"); } } 
              </script>
  </div>

注： loadscene(scene2, null, KEEPVIEW|KEEPMOVING|NOPREVIEW, BLEND(1)一共有四個參數

第一參數：

name = 名稱可以是編號

第二參數：
載入附帶參數（如果沒有則使用null）。可以通過&符號合並多個var1=val1的設置形

sphere=image.jpg&view.fov=120&view.fisheye=0.35

第三個參數:

無縫融合相似場景

onclick="loadscene(scene2, null, KEEPVIEW|KEEPMOVING|NOPREVIEW, BLEND(1));"

KEEPVIEW 是保持相同的視角，包括切換前的hlookat以及vlookat和fov，blend(1)則保證了融合的速度有一秒的時間

載入時額外的標簽（如果沒有則使用null）。
可以使用 | 字符整合多個標簽。
可用的標簽：
MERGE (推薦使用)
將當前全景與新全景的所有設定相融。
如果新全景中有plugins和hotspots與需要保留的重名，則新元素不會被載入。
對於虛擬漫游推薦使用該設置。
KEEPIMAGE – 保留當前圖像（僅HTML5）
KEEPVIEW – 保留當前view設置
KEEPMOVING – 在混合過程保持運動 (僅HTML5)
KEEPSCENES – 保留當前場景 (僅loadpano)
KEEPDISPLAY – 保留當前display設置
KEEPCONTROL – 保留當前control設置
KEEPPLUGINS – 保留當前已經載入的plugins
KEEPHOTSPOTS – 保留當前已經載入的hotspots
NOPREVIEW – 忽略新xml的<preview>標簽
KEEPBASE – 預定義組合：
KEEPDISPLAY | KEEPCONTROL | KEEPPLUGINS
KEEPALL – 預定義組合：
KEEPVIEW | KEEPDISPLAY | KEEPCONTROL | KEEPPLUGINS
REMOVESCENES – 移除所有當前定義了的scene元素 (與 set(scene.count,0);作用一樣 )
IGNOREKEEP – 忽略keep設定，移除所有keep=”true”的元素
IMAGEONLY – 只加載全景圖像（以及預覽圖）（僅HTML5，不能用於loadpanoscene）

第四參數
混合淡入到下一個全景 – 轉場動畫。
可用的混合模式：

NOBLEND 無混合，直接切換到下一個全景（默認）。

BLEND(time, tweentype) 混合 / 淡入淡出當前全景與下一個全景。time – 以秒為單位的混合時間 (默認=2.0)。
tweentype – 混合曲線/運行形態，混合動畫的類型。(默認=easeInCubic) – 查看 tweentypes。

COLORBLEND(time, color, tweentype)混合至某種顏色，然后從該顏色轉到下一個全景。
time – 以秒為單位的混合時間 (默認=2.0)。
color – 轉場時兩個全景之間的顏色，十六進制顏色值 (默認=0x000000 = 黑色)。
tweentype – 混合曲線/運行形態，混合動畫的類型。(默認=easeInOutSine) – 查看 tweentypes。

LIGHTBLEND(time, color, colorscale, tweentype)添加或減去某種顏色，然后交叉淡化到下一個全景。
time – 以秒為單位的混合時間 (默認=2.0)。
color – 添加的顏色，十六進制顏色 (默認=0xFFFFFF = 白色)。
colorscale – 顏色的比例系數，使用負數表示減去 (默認=2.0)。
tweentype – 混合曲線/運行形態，混合動畫的類型。(默認=easeInCubic) – 查看 tweentypes。

SLIDEBLEND(time, angle, smooth, tweentype)在當前和下一個全景之間的幻燈片動畫。
time – 以秒為單位的混合時間 (默認=2.0)。
angle – 幻燈片切換的角度 (默認=0.0)。
smooth – 轉場線條的平滑/模糊程度 (0.0到 1.0, 默認=0.2)。
tweentype – 混合曲線/運行形態，混合動畫的類型。(默認=linear) – 查看 tweentypes。

(僅WebGL)OPENBLEND(time, shape, smooth, zoom, tweentype)在當前和下一個全景之間的展開動畫。
time – 以秒為單位的混合時間 (默認=2.0)。
shape – 定義展開形狀 (-1.0 到 +1.0) – 0.0=圓圈展開, -1.0=垂直展開, +1.0=水平展開 (默認=0.0)。
smooth – 轉場線條的平滑/模糊程度 (0.0 到 1.0, 默認=0.2)。
zoom – 對舊全景的放大。 (0.0 到 1.0, 默認=0.0).。
tweentype – 混合曲線/運行形態，混合動畫的類型。(默認=linear) – 查看 tweentypes。
(Flash或僅WebGL)

ZOOMBLEND(time, zoom, tweentype)放大到當前視域，交叉淡化到下一個全景。
time – 以秒為單位的混合時間 (默認=2.0)。
zoom – 縮放因子 (默認=2.0).
tweentype – 混合曲線/運行形態，混合動畫的類型。(默認=easeInOutSine) – 查看 tweentypes。