說明:根據一定數量的某個物體的各位面圖生成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 是否自動播放 1 是 0 否
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>