KRpano 360° 旋轉物體效果,插件

說明:根據一定數量的某個物體的各位面圖生成360°旋轉物體,使用krpano 設置layer 自動旋轉或使用鼠標轉動。
圖片數量大概35~70 張。本示例爲35張圖

生成之前的xml代碼(使用thinkphp):

解釋
$row 爲物體的信息,類似下面這些信息:

效果:
這裏寫圖片描述

array(10) { 
    ["id"]=> string(2) "11"  物體id
    ["member_id"]=> string(1) "1"  
    ["pano_id"]=> string(2) "67" 場景ID
    ["title"]=> string(12) "暫無名稱" 
    ["file"]=> string(52)  圖片路徑 "/uploads/user/238a0b923820dcc/67/cube/cube1497234090" 
    ["width"]=> string(3) "750"  圖片寬
    ["height"]=> string(3) "450"  圖片高
    ["imagetype"]=> string(1) "2"  圖片類型
    ["len"]=> string(2) "35"  圖片數量
    ["is_ok"]=> string(1) "0" 是否可用
    }
$cube_id 爲旋轉物體ID(只是保證此旋轉物體的name唯一,使用隨機數也可以,但要保證唯一)
<?xml version="1.0" encoding="UTF-8"?>
<krpano>
    <skin_settings cube{$cube_id}_id="1" cube{$cube_id}_total="{$row['len']}" cube{$cube_id}_autogo="{$cuberow['is_auto']}" 
            cube{$cube_id}_speed="0" cube{$cube_id}_go="0" cube{$cube_id}_dir="-1" 
            cube{$cube_id}_mx="0" cube{$cube_id}_my="0" cube{$cube_id}_fd="{$fd}" cube{$cube_id}_sp="{$speed}"
        />
    <events onresize="action(setcube{$cube_id}wh);" />
    <layer name="cube{$cube_id}" visible="False" enabled="True" keep="false" type="container" bgcolor="0xffffff" bgalpha="0.5" align="center" width="100%" height="100%" x="0" y="0" zorder="1000">
        <layer name="infotext" url="__PUBLIC__/pano/plugins/textfield.swf" enabled="true" border="false" background="false" zorder="1003"
        align="righttop" x="10" y="10" width="80" autoheight="true" onclick="set(layer[cube{$cube_id}].visible,false);"
        css="text-align:center; color:#FF0000; font-family:微軟雅黑; font-weight:bold; font-size:14px;"
        html="點擊關閉"
        />
        <layer name="cube{$cube_id}_eventpage" url="__PUBLIC__/member/images/common/none.png" ondown="cube{$cube_id}start();" onup="cube{$cube_id}stop();" visible="True" keep="false" align="center"  edge="center" width="100%" height="100%" x="0" y="0" zorder="1002"></layer>
        <layer name="cube{$cube_id}_photoshow" keep="false" type="container" bgcolor="0x000000" bgalpha="0" scalechildren="true" align="center" width="{$row['width']}" height="{$row['height']}" x="0" y="0" zorder="1001">
            <for start="0" end="$row['len']">
                <if condition="$i eq 0">
                    <layer  name="cube{$cube_id}_img{$i+1}" visible="True" handcursor="False" url="{:CC('web_root')}{$row['file']}/cube{$i}.{$end[$row['imagetype']]}" align="center" edge="center" width="{$row['width']}" height="{$row['height']}" x="0" y="0"/>
                    <else/>
                    <layer  name="cube{$cube_id}_img{$i+1}" visible="false" handcursor="False" url="{:CC('web_root')}{$row['file']}/cube{$i}.{$end[$row['imagetype']]}" align="center"  edge="center"  width="{$row['width']}" height="{$row['height']}" x="0" y="0"/>
                </if>
            </for>
        </layer>
    </layer>
    <!--設置寬高-->
    <action name="setcube{$cube_id}wh">
        set(winw,get(stagewidth));
        set(winh,get(stageheight));
        div(wxp,winw,{$row['width']});
        div(whp,winh,{$row['height']});
        if(wxp GT whp,
            if(winh LT {$row['height']},set(layer[cube{$cube_id}_photoshow].scale,get(whp)););
            ,
            if(winw LT {$row['width']},set(layer[cube{$cube_id}_photoshow].scale,get(wxp)););
        );
    </action>
    <!--點擊播放-->
    <action name="cube{$cube_id}start">        
            set(skin_settings.cube{$cube_id}_go,1);
            set(skin_settings.cube{$cube_id}_speed,0);
            set(skin_settings.cube{$cube_id}_mx,get(mouse.stagex));
            set(skin_settings.cube{$cube_id}_my,get(mouse.stagey));
            action("cube{$cube_id}doing");
            action("cube{$cube_id}next");
    </action>
    <!--點擊暫停-->
    <action name="cube{$cube_id}stop">
            set(skin_settings.cube{$cube_id}_go,0);
            set(skin_settings.cube{$cube_id}_mx,0);
            set(skin_settings.cube{$cube_id}_my,0);
    </action>

    <action name="cube{$cube_id}doing">
            set(cube_mx,get(skin_settings.cube{$cube_id}_mx));
            set(cube_nx,get(mouse.stagex));
            sub(cube_xx,cube_nx,cube_mx);

            set(cube_fd,get(skin_settings.cube{$cube_id}_fd));
            set(cube_sp,get(skin_settings.cube{$cube_id}_sp));

            if(cube_xx GT 0,
                set(cube_dr,1);
                mul(cube_ds,cube_sp,1)
                ,
                set(cube_dr,-1);
                mul(cube_ds,cube_sp,1)
            );
            if(cube_xx EQ 0,
                set(cube_dr,1);
                set(cube_ds,0)
            );
            mul(cube_dr,cube_fd);
            set(skin_settings.cube{$cube_id}_speed,get(cube_ds));
            set(skin_settings.cube{$cube_id}_dir,get(cube_dr));
            set(skin_settings.cube{$cube_id}_mx,get(cube_nx));

            set(cube_ono,get(skin_settings.cube{$cube_id}_go));
            if(cube_ono GT 0,
                delayedcall(cube{$cube_id}reads,0.00001, cube{$cube_id}doing());
            );
    </action>
    <!--旋轉函數-->
    <action name="cube{$cube_id}next">
            set(cube_d,get(skin_settings.cube{$cube_id}_dir));
            set(cube_sp,get(skin_settings.cube{$cube_id}_speed));
            if(cube_sp GT 0,
                if(cube_d GT 0,
                    if(skin_settings.cube{$cube_id}_id LT skin_settings.cube{$cube_id}_total,
                        set(cubenow,get(skin_settings.cube{$cube_id}_id));
                        add(cubenext,get(skin_settings.cube{$cube_id}_id),1);
                        ,
                        set(cubenow,get(skin_settings.cube{$cube_id}_id));
                        set(cubenext,1);
                    );
                    ,
                    if(skin_settings.cube{$cube_id}_id GT 1,
                        set(cubenow,get(skin_settings.cube{$cube_id}_id));
                        sub(cubenext,get(skin_settings.cube{$cube_id}_id),1);
                        ,
                        set(cubenow,get(skin_settings.cube{$cube_id}_id));
                        set(cubenext,get(skin_settings.cube{$cube_id}_total));
                    );
                );
                txtadd(cubenowlayer,cube{$cube_id}_img,get(cubenow));
                txtadd(cubenextlayer,cube{$cube_id}_img,get(cubenext));
                set(layer[get(cubenowlayer)].visible,false);
                set(layer[get(cubenextlayer)].visible,true);
                set(skin_settings.cube{$cube_id}_id,get(cubenext));
            );
            set(cube_on,get(skin_settings.cube{$cube_id}_go));
            set(skin_settings.cube{$cube_id}_autogo,0);

            if(cube_on GT 0,
                delayedcall(cube{$cube_id}action,get(cube_sp), cube{$cube_id}next());
            );
    </action>
    <!--自動旋轉函數-->
    <action name="cube{$cube_id}autonext">
            set(cube_d,get(skin_settings.cube{$cube_id}_dir));
            set(cube_sp,get(skin_settings.cube{$cube_id}_sp));
            set(cube_on,get(skin_settings.cube{$cube_id}_autogo));
            if(cube_on GT 0,
                if(cube_sp GT 0,
                    if(cube_d GT 0,
                        if(skin_settings.cube{$cube_id}_id LT skin_settings.cube{$cube_id}_total,
                            set(cubenow,get(skin_settings.cube{$cube_id}_id));
                            add(cubenext,get(skin_settings.cube{$cube_id}_id),1);
                            ,
                            set(cubenow,get(skin_settings.cube{$cube_id}_id));
                            set(cubenext,1);
                        );
                        ,
                        if(skin_settings.cube{$cube_id}_id GT 1,
                            set(cubenow,get(skin_settings.cube{$cube_id}_id));
                            sub(cubenext,get(skin_settings.cube{$cube_id}_id),1);
                            ,
                            set(cubenow,get(skin_settings.cube{$cube_id}_id));
                            set(cubenext,get(skin_settings.cube{$cube_id}_total));
                        );
                    );
                    txtadd(cubenowlayer,cube{$cube_id}_img,get(cubenow));
                    txtadd(cubenextlayer,cube{$cube_id}_img,get(cubenext));
                    set(layer[get(cubenowlayer)].visible,false);
                    set(layer[get(cubenextlayer)].visible,true);
                    set(skin_settings.cube{$cube_id}_id,get(cubenext));
                ); 

                delayedcall(cube{$cube_id}action,get(cube_sp), cube{$cube_id}autonext());
            );
    </action>
</krpano>

生成之後的xml :

<?xml version="1.0" encoding="UTF-8"?>
<!--
cube4_dir 方向大於0 向左轉,小於0 向右轉

cube4_total 總圖片數
cube4_autogo 是否自動播放 10 否
cube4_speed 
cube4_sp 播放速度(大於1 鼠標左右拖動效果不明顯)
-->
<krpano onstart="cube4autonext">
    <skin_settings 
        cube4_id="1" 
        cube4_total="34" 
        cube4_autogo="1" 
        cube4_speed="0" 
        cube4_go="0" 
        cube4_dir="1" 
        cube4_mx="0" 
        cube4_my="0" 
        cube4_fd="1" 
        cube4_sp="1"
        />
    <events onresize="action(setcube4wh);" />
    <layer name="cube4" visible="true" enabled="True" keep="false" type="container" bgcolor="0xffffff" bgalpha="0.5" align="center" width="100%" height="100%" x="0" y="0" zorder="1000">
        <layer name="infotext" url="plugins/textfield.swf" enabled="true" border="false" background="false" zorder="1003"
        align="righttop" x="10" y="10" width="80" autoheight="true" onclick="set(layer[cube4].visible,false);"
        css="text-align:center; color:#FF0000; font-family:微軟雅黑; font-weight:bold; font-size:14px;"
        html="點擊關閉"
        />
        <layer name="cube4_eventpage" url="images/none.png" ondown="cube4start();" onup="cube4stop();" visible="True" keep="false" align="center"  edge="center" width="100%" height="100%" x="0" y="0" zorder="1002"></layer>
        <layer name="cube4_photoshow" keep="false" type="container" bgcolor="0x000000" bgalpha="0" scalechildren="true" align="center" width="750" height="450" x="0" y="0" zorder="1001">
            <layer  name="cube4_img1" visible="True" handcursor="False" url="images/cube0.jpg" align="center" edge="center" width="750" height="450" x="0" y="0"/>
           <layer  name="cube4_img2" visible="false" handcursor="False" url="images/cube1.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img3" visible="false" handcursor="False" url="images/cube2.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img4" visible="false" handcursor="False" url="images/cube3.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img5" visible="false" handcursor="False" url="images/cube4.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img6" visible="false" handcursor="False" url="images/cube5.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img7" visible="false" handcursor="False" url="images/cube6.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img8" visible="false" handcursor="False" url="images/cube7.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img9" visible="false" handcursor="False" url="images/cube8.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img10" visible="false" handcursor="False" url="images/cube9.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img11" visible="false" handcursor="False" url="images/cube10.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img12" visible="false" handcursor="False" url="images/cube11.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img13" visible="false" handcursor="False" url="images/cube12.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img14" visible="false" handcursor="False" url="images/cube13.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img15" visible="false" handcursor="False" url="images/cube14.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img16" visible="false" handcursor="False" url="images/cube15.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img17" visible="false" handcursor="False" url="images/cube16.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img18" visible="false" handcursor="False" url="images/cube17.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img19" visible="false" handcursor="False" url="images/cube18.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img20" visible="false" handcursor="False" url="images/cube19.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img21" visible="false" handcursor="False" url="images/cube20.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img22" visible="false" handcursor="False" url="images/cube21.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img23" visible="false" handcursor="False" url="images/cube22.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img24" visible="false" handcursor="False" url="images/cube23.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img25" visible="false" handcursor="False" url="images/cube24.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img26" visible="false" handcursor="False" url="images/cube25.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img27" visible="false" handcursor="False" url="images/cube26.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img28" visible="false" handcursor="False" url="images/cube27.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img29" visible="false" handcursor="False" url="images/cube28.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img30" visible="false" handcursor="False" url="images/cube29.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img31" visible="false" handcursor="False" url="images/cube30.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img32" visible="false" handcursor="False" url="images/cube31.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img33" visible="false" handcursor="False" url="images/cube32.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>                    <layer  name="cube4_img34" visible="false" handcursor="False" url="images/cube33.jpg" align="center"  edge="center"  width="750" height="450" x="0" y="0"/>        

        </layer>
    </layer>
    <!--窗口大小改變時-->
    <action name="setcube4wh">
        set(winw,get(stagewidth));
        set(winh,get(stageheight));
        div(wxp,winw,750);
        div(whp,winh,450);
        if(wxp GT whp,
            if(winh LT 450,set(layer[cube4_photoshow].scale,get(whp)););
            ,
            if(winw LT 750,set(layer[cube4_photoshow].scale,get(wxp)););
        );
    </action>
    <!--點擊播放-->
    <action name="cube4start">        
            set(skin_settings.cube4_go,1);
            set(skin_settings.cube4_speed,0);
            set(skin_settings.cube4_mx,get(mouse.stagex));
            set(skin_settings.cube4_my,get(mouse.stagey));
            action("cube4doing");
            action("cube4next");
    </action>
    <!--點擊暫停-->
    <action name="cube4stop">
            set(skin_settings.cube4_go,0);
            set(skin_settings.cube4_mx,0);
            set(skin_settings.cube4_my,0);
    </action>
    <action name="cube4doing">
            set(cube_mx,get(skin_settings.cube4_mx));
            set(cube_nx,get(mouse.stagex));
            sub(cube_xx,cube_nx,cube_mx);

            set(cube_fd,get(skin_settings.cube4_fd));
            set(cube_sp,get(skin_settings.cube4_sp));

            if(cube_xx GT 0,
                set(cube_dr,1);
                mul(cube_ds,cube_sp,1)
                ,
                set(cube_dr,-1);
                mul(cube_ds,cube_sp,1)
            );
            if(cube_xx EQ 0,
                set(cube_dr,1);
                set(cube_ds,0)
            );
            mul(cube_dr,cube_fd);
            set(skin_settings.cube4_speed,get(cube_ds));
            set(skin_settings.cube4_dir,get(cube_dr));
            set(skin_settings.cube4_mx,get(cube_nx));

            set(cube_ono,get(skin_settings.cube4_go));
            if(cube_ono GT 0,
                delayedcall(cube4reads,0.00001, cube4doing());
            );
    </action>
    <!--轉動-->
    <action name="cube4next">
            set(cube_d,get(skin_settings.cube4_dir));
            set(cube_sp,get(skin_settings.cube4_speed));
            if(cube_sp GT 0,
                if(cube_d GT 0,
                    if(skin_settings.cube4_id LT skin_settings.cube4_total,
                        set(cubenow,get(skin_settings.cube4_id));
                        add(cubenext,get(skin_settings.cube4_id),1);
                        ,
                        set(cubenow,get(skin_settings.cube4_id));
                        set(cubenext,1);
                    );
                    ,
                    if(skin_settings.cube4_id GT 1,
                        set(cubenow,get(skin_settings.cube4_id));
                        sub(cubenext,get(skin_settings.cube4_id),1);
                        ,
                        set(cubenow,get(skin_settings.cube4_id));
                        set(cubenext,get(skin_settings.cube4_total));
                    );
                );
                txtadd(cubenowlayer,cube4_img,get(cubenow));
                txtadd(cubenextlayer,cube4_img,get(cubenext));
                set(layer[get(cubenowlayer)].visible,false);
                set(layer[get(cubenextlayer)].visible,true);
                set(skin_settings.cube4_id,get(cubenext));
            );
            set(cube_on,get(skin_settings.cube4_go));
            set(skin_settings.cube4_autogo,0);

            if(cube_on GT 0,
                delayedcall(cube4action,get(cube_sp), cube4next());
            );
    </action>
    <!--自動播放-->
    <action name="cube4autonext">
            set(cube_d,get(skin_settings.cube4_dir));
            set(cube_sp,get(skin_settings.cube4_sp));
            set(cube_on,get(skin_settings.cube4_autogo));

            if(cube_on GT 0,
                if(cube_sp GT 0,
                    if(cube_d GT 0,
                        if(skin_settings.cube4_id LT skin_settings.cube4_total,
                            set(cubenow,get(skin_settings.cube4_id));
                            add(cubenext,get(skin_settings.cube4_id),1);
                            ,
                            set(cubenow,get(skin_settings.cube4_id));
                            set(cubenext,1);
                        );
                        ,
                        if(skin_settings.cube4_id GT 1,
                            set(cubenow,get(skin_settings.cube4_id));
                            sub(cubenext,get(skin_settings.cube4_id),1);
                            ,
                            set(cubenow,get(skin_settings.cube4_id));
                            set(cubenext,get(skin_settings.cube4_total));
                        );
                    );
                    txtadd(cubenowlayer,cube4_img,get(cubenow));
                    txtadd(cubenextlayer,cube4_img,get(cubenext));
                    set(layer[get(cubenowlayer)].visible,false);
                    set(layer[get(cubenextlayer)].visible,true);
                    set(skin_settings.cube4_id,get(cubenext));
                ); 

                delayedcall(cube4action,get(cube_sp), cube4autonext());
            );
    </action>
</krpano>

layer 標籤中的url 爲圖片的路徑

多張示例

單張示例

使用:

<script src="krpano.js"></script>

<div id="pano" style="width:100%;height:100%;">
<!-- <input type="text" value="" id="polycount"> -->
    <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>
        embedpano({swf:"tour.swf", xml:"3601.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
    </script>
</div>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章