KRpano 360° 旋转物体效果,插件

该博客介绍了如何利用KRpano插件结合XML代码,将35到70张物体各面图片整合,实现360°旋转的视觉效果。文章提供了一个基于ThinkPHP生成XML代码的示例,并展示了生成后的XML结构,其中layer标签内的url字段指定了图片路径。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

说明:根据一定数量的某个物体的各位面图生成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{
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值