KRpano 360° 旋转物体效果，插件
来源：互联网 发布：2014年进出口数据 编辑：程序博客网 时间：2024/06/07 07:39
说明：根据一定数量的某个物体的各位面图生成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>阅读全文
0 0
- KRpano 360° 旋转物体效果，插件
- krpano 教程 - 雪花效果插件的使用
- krpano 教程 - 重力效果插件的使用
- Krpano插件的使用
- Unity鼠标控制物体360°旋转和点击移动
- 物体旋转
- unity2d 实现物体跟随鼠标绕一个点旋转效果
- unity2d 实现物体跟随鼠标绕一个点旋转效果
- css效果实现一个物体的旋转小demo
- Unity——Rigidbody实现真实的物体旋转效果/解决物体添加刚体后不随父物体移动/hingejoint
- Krpano插件---view标签说明
- Krpano插件--event事件注释
- 360度旋转效果
- js---360旋转效果
- krpano元素之autorotate自动旋转标签
- krpano
- KRPano
- 物体移动和旋转
- 欢迎使用CSDN-markdown编辑器
- Android ANR学习资源
- ubuntu安装mongdb & 常用命令
- SurfaceView
- Android GestureDetector手势识别
- KRpano 360° 旋转物体效果，插件
- Eclipse 教程
- win10 64系统如何换成win7 32系统？
- Spring 4 官方文档学习（⑦）Web MVC 框架之HTTP caching support
- JS引用类型深度拷贝浅拷贝
- Fiddler：显示请求花费的时间
- uboot的配置
- 20170305听课笔记（漫谈进程和线程）
- Intellij IDEA 十大快捷键
