360全景製作筆記

1、製作專案啟動畫面

專案封面設定

    <!--  啟動畫面開始  -->

    <layer name="intro_jpg" 
      url.normal="common/sw.jpg"    //PC端啟動畫面圖
      url.mobile="common/sw.jpg"   //移動端啟動畫面圖
      preload="true"
      handcursor="false"
      enabled="true"
      children="true"
      visible=""
      zorder
 
="90"
      maskchildren="true"
      keep="true"
      width="100%"
      height="100%" 
      >

        <layer name="skin_title_logo3"
            zorder="100"
            keep="true"
            enabled="false"
            visible="false"
            x="14%"    //圖示位置偏移
            y="30%"
            alpha
 
="0"
            align="center"
            url="skin/vtourskin_hotspot.png"    //箭頭、logo圖，點選可進入專案
            crop=""
            scale.normal="0.9"
            scale.mobile="0.5"
            onclick="
            tween(layer[intro_jpg].ox,-2500,2); 
            delayedcall(2,set(layer[intro_jpg].enabled,false)); 
            "
 
 
            onover="stoptween(alpha);set(alpha,1);"
            onout="tweenintrobuttonalpha(0.35);"
        />

    </layer>

    <action name="tweenintrobuttonalpha" >
        if(%1 == 0.35,
        set(alphavalue,1),
        set(alphavalue,0.35)
        );
        tween(layer[skin_title_logo3].alpha,%1,1,default,tweenintrobuttonalpha(get(alphavalue)));
    </action>

    <events name="startlogoevents" keep="true"
      onloadcomplete="
          set(layer[skin_title_logo3].enabled,true);
          set(layer[skin_title_logo3].visible,true);
          tweenintrobuttonalpha(1);
          "
      onnewpano="
      set(layer[navi_title].visible,false);
      set(layer[navi_title].visible,true);" 

      onresize="
        if(stagewidth GT stageheight,      //視窗大小改變時
         set(layer[intro_jpg].url,common/sw.jpg),   //視窗變大時圖
         set(layer[intro_jpg].url,common/sw.jpg)    //視窗變小時圖
        );

       "   
    />

    <!-- 啟動畫面結束 -->

2、個別場景小行星開場動畫

設定skin_settings中的

littleplanetintro="false"

然後在tour.xml的scene標籤外找個位置寫：

    <events name="littleplanetintro_control" keep="true"
        onnewpano="
        if(scene[get(xml.scene)].index == 0 OR scene[get(xml.scene)].index == 4,
        stoptween(view.hlookat|view.vlookat|view.fov|view.distortion);
                skin_setup_littleplanetintro()
        )"

        />

index是場景序號，0是第一個場景，4是第五個場景，也就是在第一個和第五個場景執行小行星，如果有更多的場景需要小行星，則繼續OR，例如第三個場景也需要小行星。

3、給場景新增雨雪掉落特效

1，找到krpano-1.19-pr13資料夾下的krpano-1.19-pr13\viewer\examples\snow路徑下的snow.xml檔案，把snow.xml檔案複製到專案中與tour.xml同一目錄下。

2，找到krpano-1.19-pr13\viewer\plugins路徑下的snow.swf和snow.js檔案，複製到vtour資料夾的plugins資料夾中。

3，然後在你想要的scene裡的onstart中新增onstart=”snowballs();” 即選擇了雪球特效。然後在該scene裡面寫上，如下面程式碼所示：

<scene name="scene_achilleion-hof-unten" title="Achilleion - Garden" onstart="snowballs();"  thumburl="panos/achilleion-hof-unten.tiles/thumb.jpg" lat="39.563340" lng="19.904324" heading="0.0">

 <view hlookat="-1" vlookat="11" fovtype="MFOV" fov="120" fovmin="70" fovmax="140" limitview="auto" />

 <preview url="panos/achilleion-hof-unten.tiles/preview.jpg" />

 <image>
     <cube url="panos/achilleion-hof-unten.tiles/mobile_%s.jpg" />
  </image>

<include url="snow.xml" />

</scene>

    <action name="girls">
        set(plugin[snow].mode,          image);
        set(plugin[snow].imageurl,      '%CURRENTXML%/snow_image/girl.png');
        set(plugin[snow].blendmode,     normal);
        set(plugin[snow].flakes,        250);
        set(plugin[snow].imagescale,    0.5);
        set(plugin[snow].speed,         1.0);
        set(plugin[snow].shake,         4.0);
        set(plugin[snow].speedvariance, 2.0);
        set(plugin[snow].spreading,     1.5);
        set(plugin[snow].wind,          0.0);
    </action>

雨雪掉落效果

自定義需要自己配置

4、插入熱點視訊和平面視訊

插入熱點視訊，在某個場景scene下新增以下程式碼

<hotspot name="videospot"
         url.html5="%SWFPATH%/plugins/videoplayer.js"
         url.flash="%SWFPATH%/plugins/videoplayer.swf"
         videourl="cats.mp4|cats.webm"   //視訊路徑
         posterurl="cats-poster.jpg"    //視訊封面圖路徑
         distorted="true"
         ath="0"
         atv="0"
         edge="center"
         scale="1.0"
         rx="0"
         ry="0"
         rz="0"
         ox="0"
         oy="0"
         loop="true"
         pausedonstart="true"
         onclick="togglepause();"
         />

krpano程式碼

action標籤用於存放邏輯程式碼

<action name="image_layer">
            addlayer(button);   //動態新增圖層 button為name
            set(layer[button].url,image2.jpg);
            set(layer[button].align,bottom);    //新增屬性
            set(layer[button].x,10);
            set(layer[button].y,20);
            set(layer[button].onhover,showtext('hovering the new button'));   //在圖層中新增事件
            set(layer[button].onclick, removelayer(button) );
            set(layer[button].onover, set(iszoom, true);set(startzoom, true);copy(copy_mousefovchange, control.mousefovchange);copy(copy_touchzoom, control.touchzoom);set(control.mousefovchange, 0);set(control.touchzoom, false); );

            set(layer[button].onout, set(iszoom, false);copy(control.mousefovchange, copy_mousefovchange);copy(control.touchzoom, copy_touchzoom); );

        </action>

events（事件集合）的name沒有特殊含義，events裡的事件都是全域性事件，可在裡面加判斷以作用於區域性▲

<events onenterfullscreen=""          切換到全屏顯示執行  
        onexitfullscreen=""           從全屏切換回普通檢視時執行  
        onxmlcomplete=""              XML檔案載入完成時執行  
        onpreviewcomplete=""          預覽圖載入完成時執行  
        onloadcomplete=""             全景切片圖片載入完畢時執行  
        onnewpano=""                  當啟動新的全景場景時執行  
        onremovepano=""               當前場景被關閉時執行（載入新場景前）  
        onnewscene=""                 新場景載入完成時執行  
        onloaderror=""                載入錯誤時執行，執行被設定後，螢幕將不顯示預設的錯誤資訊  
        onkeydown=""                  當某個鍵盤被按下時執行  
        onkeyup=""                    當某個鍵盤松開時執行  
        onclick=""                    當滑鼠點選全景場景時執行  
        onmousedown=""                當滑鼠按下時執行  
        onmouseup=""                  當滑鼠鬆開時執行  
        onmousewheel=""               當滑鼠滾輪滾動時執行  
        onidle=""                     當無使用者操作在設定秒數後執行  
        onviewchange=""               當場景轉變時執行（渲染開始時）  
        onviewchanged=""              當場景轉變時執行（渲染完成時）  
        onresize=""                   當瀏覽器大小改變時執行  
        />  

<!-- 針對滑鼠滾輪縮放的事件 -->
        <events name="image_zoom_events" onmousewheel="image_onmousewheel();" />

        <!-- 通過手勢或滑鼠滾輪實現圖片縮放 -->
        <action name="image_onmousewheel">
        if(iszoom,
        if(wheeldelta_touchscale GT 0,
        <!-- 觸屏縮放 -->
        if(startzoom,
        set(startzoom,false);
        copy(start_wheeldelta_touchscale, wheeldelta_touchscale);
        copy(start_imagescale, layer[image].scale);
        );

        div(tmp, wheeldelta_touchscale, start_wheeldelta_touchscale);
        mul(layer[image].scale, start_imagescale, tmp);
        ,
        <!-- 滑鼠滾輪縮放 -->
        mul(sit,get(wheeldelta),0.05);
        mul(sit,layer[image].scale);
        add(layer[image].scale,sit);
        );
        );
        </action>

傳參：▲▲

copy(layer[radar].x, layer[%1].x);set(layer[radar].heading,%2);

%1：第一個引數，%2：第二個引數，。。。如此類推

引數代入： onclick=”test(abc,100)”

即執行：copy(layer[radar].x,layer[abc].x);set(layer[radar].heading,100);

distorted=”true” 讓熱點適應手機端