krpano

Krpano 可以方便快速的構(gòu)建出全景圖或全景視頻（demo）

目錄

• Krpano Droplet
  • MAKE PANO (NORMAL)
  • MAKE PANO (MULTIRES)
  • MAKE PANO (SINGLESWF)
  • MAKE PANO (FLAT)
  • MAKE VTOUR (NORMAL)
  • MAKE VTOUR (MULTIRES)
  • MAKE OBJECT
  • Convert SPHERE to CUBE
  • Convert CUBE to SPHERE
  • Encrypt XML
• vtour 文件夾說明
  • vtour 文件夾結(jié)構(gòu)
  • vtour 運作機制
• krpano XML結(jié)構(gòu)
  • Krpano 內(nèi)置元素說明
• 常用設(shè)置
  • 小行星開場
  • 加載動畫
  • 修改右鍵菜單
    • 添加動態(tài)熱點
  • 動態(tài)熱點添加始終顯示的文字
  • 熱點和或圖層在鼠標點擊或鼠標懸停時進入動態(tài)模式
  • 拖拽熱點
  • 添加簡單的全景視頻
  • 添加雨雪特效
  • 自動旋轉(zhuǎn)
  • 無按鈕控制的自動旋轉(zhuǎn)
  • 按鈕控制的自動旋轉(zhuǎn)
  • 添加陀螺儀
  • 場景過渡效果
  • 隱藏顯示熱點
  • 獲取全景視頻進度

原文鏈接：
https://krpano.milly.me/
http://www.krpano360.com/

GitHub: nodeKrpano

Krpano Droplet

MAKE PANO (NORMAL)

用法說明

• 生成普通 (=單分辨率) 全景
• 制作典型的 360 度全景
• 全部全景圖將會一次性載入. 默認下方塊最大變長為 2048 像素(可以在配置文件中修改)
• 包括默認的導(dǎo)航皮膚
• 支持 Flash 和 HTML5

Droplet 說明

• 配置文件: normal.config
• 默認模版/皮膚配置文件: defaultbuttons.skin

MAKE PANO (MULTIRES)

用法說明

• 生成多分辨率全景
• 制作所有類型的全景
• 只有特定的切片在需要時載入 沒有尺寸/分辨率限制
• 包含默認的導(dǎo)航皮膚
• 支持 Flash 和 HTML5

Droplet 說明

配置文件: multiresconfig
默認模版/皮膚配置文件: defaultbuttonsskin

MAKE PANO (SINGLESWF)

用法說明

• 生成普通 (=單分辨率) 全景同時將所有文件嵌在一個SWF文件中只輸出一個SWF文件和一個HTML文件
• 制作典型的360度全景
• 全部全景圖將會一次性載入 默認下方塊最大變長為2048像素(可以在配置文件中修改)
• 包含默認的導(dǎo)航皮膚
• 僅支持 Flash

Droplet 說明

配置文件: singleswfconfig
默認模版/皮膚配置文件: defaultbuttonsskin

MAKE PANO (FLAT)

用法說明

• 生成平面切片多分辨率圖像
• 制作平面圖像 輸出時既定為平面圖像
• 只有特定的切片在需要時載入 沒有尺寸/分辨率限制
• 包含有默認導(dǎo)航按鈕的皮膚栋豫，針對特定的視角
• 支持 Flash 與 HTML5

Droplet 說明

• 配置文件: flatconfig
• 默認模版/皮膚配置文件: flatxml / flatskinxml

MAKE VTOUR (NORMAL)

用法說明

• 生成普通 (=單分辨率) 全景并將它們整合到一個虛擬漫游中
• 制作典型的 360 度全景
• 全部全景圖將會一次性載入 默認下方塊最大變長為 2048 像素(可以在配置文件中修改)
• 包含一個包括導(dǎo)航按鈕、可滾動縮略圖以及可選擇必應(yīng)地圖以及重力感應(yīng)插件的默認皮膚
• 支持 Flash 和 HTML5

Droplet 說明

• 配置文件: vtour-normalconfig
• 默認模版/皮膚配置文件: vtourskin-thumbnails-bingmaps-gyroskin

MAKE VTOUR (MULTIRES)

用法說明

• 生成多分辨率全景并將它們整合到一個虛擬漫游中
• 制作所有類型全景圖像
• 只有特定的切片在需要時載入 沒有尺寸/分辨率限制
• 包含一個包括導(dǎo)航按鈕、可滾動縮略圖以及可選擇必應(yīng)地圖以及重力感應(yīng)插件的默認皮膚
• 支持 Flash 和 HTML5

Droplet 說明

• 配置文件: vtour-multiresconfig
• 默認模版/皮膚配置文件: vtourskin-thumbnails-bingmaps-gyroskin

MAKE OBJECT

用法說明

• 生成若干個平面多分辨率圖像并將它們整合到一個可縮放旋轉(zhuǎn)的 360 物體影像中
• 制作平面圖像物體 所有物體圖片的尺寸必須一致
• 只有特定的切片在需要時載入 沒有尺寸/分辨率限制
• 包含一個特定的控制物體的皮膚
• 僅支持 Flash

Droplet 說明

• 配置文件: objectconfig
• 默認模版/皮膚配置文件: objectxml / objectskinxml

Convert SPHERE to CUBE

用法說明

• 將球面圖像轉(zhuǎn)換至立方體圖
• 輸出的立方體格式羹奉、尺寸以及圖像尺寸可以在配置文件中修改

Droplet 說明

• 配置文件: convertdropletsconfig

Convert CUBE to SPHERE

用法說明

• 將六張立方體圖像轉(zhuǎn)換成一張球面全景圖
• 輸出的圖像尺寸和格式可以在配置文件中修改

Droplet 說明

• 配置文件: convertdropletsconfig

Encrypt XML

用法說明

• 將 xml 文件拖放進 droplet 進行加密
• 加密過程中 xml 文件會自動被壓縮

自定義 droplet

如果內(nèi)置 droplet 不能滿足需求或者需要對一些參數(shù)進行自定義钧汹。只要復(fù)制并重命名一個配置文件與皮膚配置文件，然后復(fù)制并重命名一個 droplet，修改里面的配置路徑即可征绎。

vtour 文件夾說明

vtour 文件夾結(jié)構(gòu)

vtour/
| -- panos/             #存放全景切片圖片的文件夾
| -- skin/              #存放皮膚相關(guān)文件
| -- plugins/           #用來存放插件
| -- tour.swf           #krpano flash viewer
| -- tour.js            #krpano HTML5 viewer
| -- tour.xml           #生成全景的相關(guān)配置
| -- tour.html          #用來瀏覽全景的頁面占键，需要本地服務(wù)環(huán)境
| -- tour_editor.html   #添加熱點（hotspot）與初始化視角的設(shè)置

vtour 運作機制

<div id="pano"></div>
<script src="tour.js"></script>
<script>
embedpano({
    swf: "tour.swf", //有則表示加載flash引擎昔善，如果設(shè)置html5:only則不需要該值
    xml: "tour.xml", //啟動時的配置文件
    target: "pano", //要渲染到的目標容器ID
    html5: "only", //如果有需要用到flash，可設(shè)置為auto
    //id: "krpanoSWFObject", //默認的krpano對象畔乙，每一個viewer對應(yīng)唯一id君仆，與JS交互時要用到
    mobilescale: 1.0, //移動設(shè)備縮放，1表示不縮放牲距，默認0.5
    passQueryParameters: false //是否接受URL傳參返咱，例如：tour.html?html5=only&startscene=scene2
});
</script>

krpano XML結(jié)構(gòu)

<krpano>
    <include>
    <preview>
    <image>
    <view>
    <area>
    <display>
    <control>
    <cursors>
    <autorotate>
    <plugin>
    <layer>
    <hotspot>
    <style>
    <events>
    <action>
    <contextmenu>
    <network>
    <memory>
    <security>
    <textstyle>
    <lensflareset>
    <lensflare>
    <data>
    <scene>
</krpano>

Krpano 內(nèi)置元素說明

01.krpano

krpano 元素是 krpano xml 文件的根元素。任何一個 krpano xml 文件內(nèi)的其它元素都要被 krpano 元素所嵌套牍鞠。

02.include

include 元素可引入其它 xml 文件的內(nèi)容咖摹，例如我們常要用到的 vtourskin.xml 就是使用 include 嵌入到主 xml 中。

03.preview

預(yù)覽圖設(shè)置皮服，也就是全景圖完全載入之前的模糊圖像楞艾，但因為體積較小，因此載入速度較快龄广，會在全景圖之前先載入硫眯，避免黑屏。

04.image

image 元素控制全景圖設(shè)置择同，包括全景圖類型两入，漸進分辨率切片顯示等。

05.view

view 元素控制全景的視野敲才，例如起始視角裹纳、視角限制與縮放等等择葡。當要設(shè)置限制視角或設(shè)定特定的初始視角時，需要自行設(shè)定或使用插件獲取代碼剃氧。

06.area

area 元素控制全景圖在瀏覽器窗口中顯示區(qū)域大小敏储。

07.display

控制全景圖的顯示品質(zhì)。

08.control

設(shè)置鼠標朋鞍、鍵盤以及觸摸設(shè)備對全景瀏覽的控制方式已添。

09.cursors

設(shè)置鼠標光標樣式。

10.autorotate

控制自動旋轉(zhuǎn)滥酥。

11.plugin

用來調(diào)用插件更舞、插入圖片或生成容器。

12.layer

與 plugin 作用相同坎吻，只是名稱不同缆蝉。

13.hotspot

熱點，可在 3D 空間中插入圖片瘦真，使之隨著 3D 空間一同運動刊头，可制作很多特效。

14.style

可以保存其它元素的屬性子集吗氏。

15.events

可調(diào)用各類型事件芽偏，例如全景載入的不同階段以及鼠標觸發(fā)的不同行為等。

16.action

自定義動態(tài)代碼弦讽。

17.contextmenu

定義右鍵菜單的內(nèi)容污尉。

18.network

控制圖像的下載、緩存與解碼往产。

19.menory

控制全景圖在設(shè)備中的存儲被碗。

20.security

Flashplayer 和 HTML5 相關(guān)的安全/跨域設(shè)置。

21.lensflareset

鏡頭眩光的設(shè)置（目前只能在 flash 下使用）仿村。

22.lensflare

生成鏡頭眩光（目前只能在 flash 下使用）锐朴。

23.data

可放置任意的數(shù)據(jù)。

24.scene

可放置任意 krpano 元素蔼囊。每個 scene 元素只有在被 loadscene 時才會被載入到瀏覽器進行解析焚志。

常用設(shè)置

小行星開場

開啟小行星，先找到 tour.xml 畏鼓，然后搜索 littleplanetintro 將其值設(shè)置為 true 即可酱酬。

<skin_settings
    ...
    littleplanetintro="true"
    ...
/>

加載動畫

在官方的案例文件夾中找到 loading-progress 這個文件夾，將需要的文件內(nèi)容復(fù)制到項目中的 skin 文件夾云矫，然后在 tour.xml 文件中引入該文件即可膳沽，這樣重新打開就可以看到有動態(tài)的進度條了。

<include url="skin/loadingbar.xml" />

修改右鍵菜單

找到引入的皮膚文件，默認在 vtourskin.xml 挑社，然后修改下面這些地方即可自定義右鍵菜單陨界，但像版權(quán)、全屏菜單即使刪除也會存在痛阻。

<contextmenu>
    <item name="fv" caption="魚眼視圖" onclick="skin_view_fisheye();" showif="view.vlookatrange == 180" devices="flash|webgl" separator="true" />
</contextmenu>

contextmenu元素

• caption 右鍵菜單顯示的文字
• onclick 控制點擊后執(zhí)行的動作菌瘪，動作由 action 定義
• showif 顯示條目的條件
• devices 控制在 flash/webgl 哪個模式中出現(xiàn)
• separator 顯示分隔符來分隔菜單

自定義熱點

配置 <hotspot> 中 style 的屬性對應(yīng)的元素（skin對應(yīng)的文件夾）

<hotspot name="spot1" style="skin_hotspotstyle" ath="93.531" atv="-1.109" linkedscene="scene_shuilifang" />

<!-- skin_hotspotstyle - style for the hotspots -->
    <style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" distorted="true"
           tooltip=""
           linkedscene=""
           linkedscene_lookat=""
           onclick="skin_hotspotstyle_click();"
           onover="tween(scale,0.55);"
           onout="tween(scale,0.5);"
           onloaded="if(linkedscene AND skin_settings.tooltips_hotspots, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); );"
           />

隱藏皮膚

<action name="startup" autorun="onstart">
    <!--添加代碼 隱藏皮膚 -->
    set(events[skin_events].name, null);
    for(set(i,0), i LT layer.count, inc(i), 
    copy(layername, layer[get(i)].name);
    subtxt(namestart, get(layername), 0, 5);
    if(namestart == 'skin_', removelayer(get(layername)); dec(i); );
  );
</action>

自定義熱點

配置 <hotspot> 中 style 的屬性對應(yīng)的元素（skin對應(yīng)的文件夾）

<hotspot name="spot1" style="skin_hotspotstyle" ath="93.531" atv="-1.109" linkedscene="scene_shuilifang" />

<!-- skin_hotspotstyle - style for the hotspots -->
    <style name="skin_hotspotstyle" url="vtourskin_hotspot.png" scale="0.5" edge="top" distorted="true"
           tooltip=""
           linkedscene=""
           linkedscene_lookat=""
           onclick="skin_hotspotstyle_click();"
           onover="tween(scale,0.55);"
           onout="tween(scale,0.5);"
           onloaded="if(linkedscene AND skin_settings.tooltips_hotspots, copy(tooltip,scene[get(linkedscene)].title); loadstyle(skin_tooltips); );"
           />

隱藏皮膚

<action name="startup" autorun="onstart">
    <!--添加代碼 隱藏皮膚 -->
    set(events[skin_events].name, null);
    for(set(i,0), i LT layer.count, inc(i), 
    copy(layername, layer[get(i)].name);
    subtxt(namestart, get(layername), 0, 5);
    if(namestart == 'skin_', removelayer(get(layername)); dec(i); );
  );
</action>

動態(tài)熱點

在 tour.xml 空白處的scene標簽的外面，添加動作代碼

<action name="do_crop_animation">
    <!-- 為熱點注冊屬性 -->
    registerattribute(xframes, calc((imagewidth / %1) BOR 0));
    registerattribute(yframes, calc((imageheight / %2) BOR 0));
    registerattribute(frames, calc(xframes * yframes));
    registerattribute(frame, 0);
 
    set(crop, '0|0|%1|%2');
 
    setinterval(calc('crop_anim_' + name), calc(1.0 / %3),
        if(loaded,
            inc(frame);
            if(frame GE frames, if(onlastframe !== null, onlastframe() ); set(frame,0); );
            mod(xpos, frame, xframes);
            div(ypos, frame, xframes);
            Math.floor(ypos);
            mul(xpos, %1);
            mul(ypos, %2);
            calc(crop, xpos + '|' + ypos + '|%1|%2');
          ,
            clearinterval(calc('crop_anim_' + name));
          );
      );
</action>

在 hotspot 或 layer 的代碼添加代碼录平， do_crop_animation(每幀寬,每幀高,fps)

url="explosion.png"  onloaded="do_crop_animation(100,100, 60)"

動態(tài)熱點添加始終顯示的文字

顯示 <scene> title 中的文字

<hotspot name="spot1" url="animatedhotspot_white.png" onloaded="do_crop_animation(64,64, 60);"   ath="-15" atv="-12" onclick="loadscene(get(linkedscene))" linkedscene="scene_01"/>

或者在 <hotpsot> text 中添加顯示自定義的文字

<hotspot name="spot1" url="animatedhotspot_white.png" onloaded="do_crop_animation(64,64, 60);"   ath="-15" atv="-12" onclick="loadscene(get(linkedscene))" text="自定義文字"/>

在熱點的 onload 事件中加上 add_all_the_time_tooltip()

onloaded="do_crop_animation(64,64, 60);add_all_the_time_tooltip()"

空白處加上 action

<action name="add_all_the_time_tooltip">
        txtadd(tooltipname, 'tooltip_', get(name));
        addplugin(get(tooltipname));
        txtadd(plugin[get(tooltipname)].parent, 'hotspot[', get(name), ']');
        set(plugin[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
        set(plugin[get(tooltipname)].align,top);
        set(plugin[get(tooltipname)].edge,bottom);
        set(plugin[get(tooltipname)].x,0);
        set(plugin[get(tooltipname)].y,0);
        set(plugin[get(tooltipname)].autowidth,true);
        set(plugin[get(tooltipname)].autoheight,true);
        set(plugin[get(tooltipname)].vcenter,true);
        set(plugin[get(tooltipname)].background,true);
        set(plugin[get(tooltipname)].backgroundcolor,0x000000);
        set(plugin[get(tooltipname)].roundedge,5);
        set(plugin[get(tooltipname)].backgroundalpha,0.65);
        set(plugin[get(tooltipname)].padding,5);
        set(plugin[get(tooltipname)].border,false);
        set(plugin[get(tooltipname)].glow,0);
        set(plugin[get(tooltipname)].glowcolor,0xFFFFFF);
        set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei;  font-size:24px;');
        if(device.mobile,set(plugin[get(tooltipname)].css,'text-align:center; color:#FFFFFF; font-family:MicrosoftYahei; font-weight:bold; font-size:24px;');
            );
        set(plugin[get(tooltipname)].textshadow,0);
        set(plugin[get(tooltipname)].textshadowrange,6.0);
        set(plugin[get(tooltipname)].textshadowangle,90);
        if(text == '' OR text === null,
        copy(plugin[get(tooltipname)].html,scene[get(linkedscene)].title),
        copy(plugin[get(tooltipname)].html,text)
        );    
        set(plugin[get(tooltipname)].enabled,false);    
</action>

熱點和或圖層在鼠標點擊或鼠標懸停時進入動態(tài)模式

<action name="do_crop_animation_onclick">   
        if(hotspot[get(name)].animated === null OR hotspot[get(name)].animated == false,
            set(hotspot[get(name)].animated,true);
            setinterval(calc('crop_anim_' + name), calc(1.0 / %3),          
                    inc(frame);
                    if(frame GE frames, if(onlastframe !== null, onlastframe() ); set(frame,0); );
                    mod(xpos, frame, xframes);
                    div(ypos, frame, xframes);
                    Math.floor(ypos);
                    mul(xpos, %1);
                    mul(ypos, %2);
                    calc(crop, xpos + '|' + ypos + '|%1|%2');                           
              );
              ,
            set(hotspot[get(name)].animated,false);  
            clearinterval(calc('crop_anim_' + name));
            set(crop, '0|0|%1|%2'); 
          );
</action>
 
<action name="do_crop_animation_register">
        registerattribute(xframes, calc((imagewidth / %1) BOR 0));
        registerattribute(yframes, calc((imageheight / %2) BOR 0));
        registerattribute(frames, calc(xframes * yframes));
        registerattribute(frame, 0);
        set(crop, '0|0|%1|%2'); 
</action>
 
 
 
<!-- example hotspots -->
<hotspot name="spot1" url="animatedhotspot_white.png" 
        onover="do_crop_animation_onclick(64,64,60)" onout="do_crop_animation_onclick(64,64,60)"   ath="-15" atv="-12" onloaded="do_crop_animation_register(64,64)" />
 
<hotspot name="spot1" url="animatedhotspot_white.png" 
        onclick="do_crop_animation_onclick(64,64,60)"  ath="-15" atv="-12" onloaded="do_crop_animation_register(64,64)" />

以上代碼執(zhí)行了一次動態(tài)循環(huán)后麻车，序列圖停留在第一幀，如果只是需要執(zhí)行一次動態(tài)循環(huán)斗这，并且序列圖停留在最后一幀的話，那么 do_crop_animation_onclick 需更改（區(qū)別就是 frame 這個變量沒有重置為 0 啤斗，并且沒有重新設(shè)置 crop ）

<action name="do_crop_animation_onclick"> 
    if(hotspot[get(name)].animated === null OR hotspot[get(name)].animated == false,
        set(hotspot[get(name)].animated,true);
      setinterval(calc('crop_anim_' + name), calc(1.0 / %3),  
 
          inc(frame);
          if(frame GE frames, if(onlastframe !== null, onlastframe() ); add(frame,frames,-1); );
          mod(xpos, frame, xframes);
          div(ypos, frame, xframes);
          Math.floor(ypos);
          mul(xpos, %1);
          mul(ypos, %2);
          calc(crop, xpos + '|' + ypos + '|%1|%2');               
        );
        ,
        set(hotspot[get(name)].animated,false);  
      clearinterval(calc('crop_anim_' + name));
     
      );
</action>

拖拽熱點

在 <hotspot/> 中添加代碼

    ondown="draghotspot();"

添加 action 代碼

    <action name="draghotspot">
        spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, 'l');
        sub(drag_adjustx, mouse.stagex, hotspotcenterx);
        sub(drag_adjusty, mouse.stagey, hotspotcentery);
        asyncloop(pressed,
            sub(dx, mouse.stagex, drag_adjustx);
            sub(dy, mouse.stagey, drag_adjusty);
            screentosphere(dx, dy, ath, atv);
          );
    </action>

添加簡單的全景視頻

從 viewer/examples/videopano 中復(fù)制 vtourskin.xml表箭，在主xml 添加代碼

    <scene name="videopano" title="戶外全景視頻">
        <!-- include the videoplayer interface / skin (with VR support) -->
        <include url="skin/videointerface.xml" />

        <!-- include the videoplayer plugin -->
        <plugin name="video"
                url.html5="%SWFPATH%/plugins/videoplayer.js"
                url.flash="%SWFPATH%/plugins/videoplayer.swf"
                pausedonstart="true"
                loop="true"
                volume="1.0"
                onloaded="add_video_sources();"
                />

        <!-- use the videoplayer plugin as panoramic image source -->
        <image>
            <sphere url="plugin:video" />
        </image>

        <!-- set the default view -->
        <view hlookat="0" vlookat="0" fovtype="DFOV" fov="130" fovmin="75" fovmax="150" distortion="0.0" />

        <!-- add the video sources and play the video -->
        <action name="add_video_sources">
            videointerface_addsource('1024x512', '%CURRENTXML%/video/video-1024x512.mp4|%CURRENTXML%/video/video-1024x512.webm|%CURRENTXML%/video/iphone-audio.m4a', '%CURRENTXML%/video/video-1024x512-poster.jpg');
            videointerface_addsource('1920x960', '%CURRENTXML%/video/video-1920x960.mp4|%CURRENTXML%/video/video-1920x960.webm|%CURRENTXML%/video/iphone-audio.m4a', '%CURRENTXML%/video/video-1920x960-poster.jpg');
            
            if(device.ios,
                <!-- iOS Safari has a very slow 'video-to-webgl-texture' transfer, therefore use a low-res video by default -->
                videointerface_play('1024x512');
              ,
                videointerface_play('1920x960');
              );
        </action>
    </scene>

添加雨雪特效

1. 添加文件 [http://pan.baidu.com/s/1gfLTx6N][snow] 密碼：6shh

2. 在 viewer\plugins 拷貝 snow.swf 和 snow.js

3. 添加 <scene onstart="snowballs();">

   目前可選的特效

   • 默認雪 onstart='defaultsnow();'
   • 雪球 onstart='snowball();'
   • 雪花 onstart='snowflakes();'
   • 銀色星星 onstart='silverstars();'
   • 金色星星 onstart='goldenstars();'
   • 心形 onstart='hearts();'
   • 笑臉 onstart='smileys();'
   • 錢 onstart='money();'
   • 雨 onstart='rain();'
   • 大雨 onstart='heavyrain();'

4. 在 <scene> 添加代碼

<include url="snow.xml" />

自動旋轉(zhuǎn)

添加代碼

<autorotate enabled="true"
waittime="5.0"
speed="-3.0"
horizon="0.0"
tofov="120.0"
/>

• waittime 代表在最近一次用戶交互行為之后要開始自動旋轉(zhuǎn)之前的等待時間。以秒為單位钮莲。
• speed 為旋轉(zhuǎn)速度免钻。當該數(shù)值為正值時向右旋轉(zhuǎn)，為負值時向左旋轉(zhuǎn)崔拥。
• horizon 為場景在自動旋轉(zhuǎn)時將達到的水平位置极舔。
• tofov 為旋轉(zhuǎn)中要達到的視場角。

無按鈕控制的自動旋轉(zhuǎn)

自動旋轉(zhuǎn)場景链瓦，場景旋轉(zhuǎn)一圈后自動進入下一個場景拆魏，最后一個場景瀏覽結(jié)束后，進入第一個場景慈俯。需添加如下代碼：

<autorotate enabled="true"
waittime="5.0"
speed="-3.0"
horizon="0.0"
tofov="120.0"
/>

修改 <action name="startup/> 中的代碼

<action name="startup">
if(startscene === null, copy(startscene,scene[0].name));
loadscene(get(startscene), null, MERGE);
if(autorotate.enabled,bombtimer(0));
</action>

在 xml 文件中加入下面的代碼

<events onmousedown="set(bt,0);" />
<action name="bombtimer">
set(autorotate.enabled,true);
set(bt,%1);
add(bt,1);
delayedcall(1, bombtimer(get(bt)));
copy(bt_1,autorotate.speed);
Math.abs(bt_1);
div(bt_2,360,bt_1);
add(bt_2,autorotate.waittime);
if(bt GE bt_2, set(bt,0); nextscene(););
</action>
<action name="nextscene">
set(ns, get(scene[get(xml.scene)].index));
set(maxs, get(scene.count));
add(ns,1);
if(ns == maxs, set(ns,0));
loadscene(get(scene[get(ns)].name), null, MERGE, BLEND(1.5));
</action>

按鈕控制的自動旋轉(zhuǎn)

添加代碼

<autorotate enabled="true"
waittime="5.0"
speed="-3.0"
horizon="0.0"
tofov="120.0"
/>

在對應(yīng)的按鈕渤刃，通常為 <layer> 標簽中找到 onclick 屬性替換，如果沒有則直接添加

<layer ... onclick="switch(autorotate.enabled);" ... />

添加陀螺儀

加載插件

<plugin name="gyro" devices="html5"
            url="%SWFPATH%/plugins/gyro2.js"
            enabled="false"
                onavailable="gyro_available_info();"
            />
 
<action name="gyro_available_info">
        set(layer[gyrobutton].visible, true);
</action>

控制按鈕

<layer name="gyrobutton" url="gyroicon.png" scale="0.5" align="right" x="10" visible="false" 
               onclick="switch(plugin[gyro].enabled);"
               />

默認皮膚開啟陀螺儀功能（在 tour.xml 的 skin_settings中設(shè)置）

gyro="true"

在 tour.xml 的 include 的下一行添加

<plugin name="skin_gyro" enabled="true"/>

場景過渡效果

修改全部過渡效果贴膘，只需修改 <skin_settings />中以下代碼

loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"

如果想為某個特殊的 loadscene 動作加上不一樣的過渡效果卖子，在主 xml 的 scene 外加入以下代碼

<blendmodes name="no blending"       description="無過渡效果"  blend="NOBLEND" />
<blendmodes name="simple crossblending" description="簡單淡入淡出" blend="BLEND(1.0, easeInCubic)" />
<blendmodes name="zoom blend"        description="縮放過渡"  blend="ZOOMBLEND(2.0, 2.0, easeInOutSine)" />
<blendmodes name="black-out"         description="黑場過渡"  blend="COLORBLEND(2.0, 0x000000, easeOutSine)" />
<blendmodes name="white-flash"       description="白場過渡"  blend="LIGHTBLEND(1.0, 0xFFFFFF, 2.0, linear)" />
<blendmodes name="right-to-left"     description="從右至左"  blend="SLIDEBLEND(1.0, 0.0, 0.2, linear)" />
<blendmodes name="top-to-bottom"     description="從上至下"   blend="SLIDEBLEND(1.0, 90.0, 0.01, linear)" />
<blendmodes name="diagonal"          description="對角線"     blend="SLIDEBLEND(1.0, 135.0, 0.4, linear)" />
<blendmodes name="circle open"       description="圓形展開"      blend="OPENBLEND(1.0, 0.0, 0.2, 0.0, linear)" />
<blendmodes name="vertical open"     description="垂直展開"     blend="OPENBLEND(0.7, 1.0, 0.1, 0.0, linear)" />
<blendmodes name="horizontal open"   description="水平展開"    blend="OPENBLEND(1.0, -1.0, 0.3, 0.0, linear)" />
<blendmodes name="elliptic + zoom"   description="橢圓縮放"      blend="OPENBLEND(1.0, -0.5, 0.3, 0.8, linear)" />

修改loadscene(scenename, null, MERGE, get(blendmodes[black-out].blend));

<hotspot onclick="loadscene(scene_shuilifang, null, MERGE, get(blendmodes[vertical open].blend));" />

隱藏顯示熱點

添加 <action>

<action name="hideBox">
  tween(%1.alpha,0,0.5);
  wait(1);
  set(%1.visible,false);
</action>

<action name="showBox">
  set(%1.alpha,0);
  set(%1.visible,true);
  tween(%1.alpha,1,0.5);
  tween(%1.scale,1,0.5,easeOutBack);
</action>

使用

<hotspot name="spot1" style="skin_hotspotstyle" ath="46.131" atv="24.389" visible="true" onclick="spot1Click" />
<action name="spot1Click">
    hideBox(hotspot[spot1]);
</action>

獲取全景視頻進度

<!-- 獲取視頻進度 -->
<action name="get_video_time">
  setinterval(skin_video_seek_updates0, 0.1, skin_video_updatetime0())
</action>

<action name="skin_video_updatetime0">
  setStop(4,video_pause_events(););
</action >
        
<action name="setStop">
  copy(t1, plugin[video].time);
  if(t1 GT %1,%2);
</action>
 
<!-- 視頻暫停回調(diào) -->
<action name="video_pause_events">
  plugin[video].pause();
  clearinterval(skin_video_seek_updates0);
</action>