Krpano教程tour.xml详解

最新推荐文章于 2023-12-18 18:31:51 发布

原创最新推荐文章于 2023-12-18 18:31:51 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#krpano #vtour

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了krpano全景展示系统的核心配置项，包括根元素设置、自动旋转控制、场景与视角设置、预览图及图像资源加载等。通过具体示例展示了如何灵活配置这些参数以实现丰富的全景展示效果。

文章目录

krpano（唯一根元素）

krpano（唯一根元素）

<krpano version="1.18"     		//版本号  
    onstart=""                  //网页启动时调用的函数  
    basedir="%FIRSTXML%"        //设置程序根目录  
    bgcolor=""                  //页面背景颜色  
    idletime="0.5"              //没用户干预情况下的调用时间  
    colorcorrection="default"   //flash 10配送方案  
    logkey="true"               //是否输出日志  
    showerrors="true"          //是否输出错误信息  
    debugmode="false"          //编译模式是否打开  
>  
//...  
</krpano>  

//krpano作为XML文件唯一根元素，必须设置！  

//样例：   
<krpano version="1.18" onstart="loadscene(scene1);">  
  <scene name="scene1">  
  //...  
  </scene>  
</krpano>

autorotate（自动旋转、扭曲／移动，缩放）

<autorotate enabled="false"     //是否开启自动旋转  
    waittime="1.5"      //用户不对屏幕操作后，开始自动旋转的等待秒数  
    accel="1.0"         //旋转扭曲的速度：角度/秒  
    speed="10.0"        //最大旋转速度：角度/秒  
    horizon="0.0"       //旋转到特定的水平位置  
    tofov="off"         //缩放到特定的区域视角  
/>  
  
//当无用户交互时．自动旋转、扭曲／移动，缩放  

//样例：  
<autorotate enabled="true"  
    waittime="5.0"   
    speed="-3.0"   
    horizon="0.0"   
    tofov="120.0"   
/>

自动旋转控制：

switch(autorotate.enabled);


<krpano version="1.18" onstart="switch(autorotate.enabled);">

include

skin_settings

action

scene（场景）

view（默认视角的参数设置和视角限制设置）

<view hlookat="0.0"    //水平视角  -180 至  180 之间  
      vlookat="0.0"    //垂直视角  -90  至  90  之间  
      camroll="0.0"    //镜头旋转视角  
      fovtype="VFOV"   //定义视场角类型  
      fov="90.0"        //默认视角的缩放  
      fovmin="1.0"      //默认视角缩放最大值  
      fovmax="179.0"    //默认视角缩放最小值  
      maxpixelzoom=""   //默认视角最大缩放倍数  
      fisheye="0.0"     //鱼眼视角设置 0.0 至  1.0 之间（扭曲程度）  
      fisheyefovlink="0.5"  //fov值与鱼眼视角的关联值，默认0.5(0.0-3.0之间)  
      stereographic="false" //是否启动立体鱼眼投影效果（小行星）  
      pannini="false"       //启用/禁用“Pannini / vedutismo”投影效果  
      architectural="0.0"   //建筑视角设置 0.0 至  1.0 之间  
      architecturalonlymiddle="false"  //是否只对中间区域的图像实行建筑投影  
      limitview="auto"    //视角限制类型  
      hlookatmin=""   //最小水平视角范围  (-180 .. +180).  
      hlookatmax=""   //最大水平视角范围  (-180 .. +180).  
      vlookatmin=""   //最小垂直视角范围  (-90 .. +90).  
      vlookatmax=""   //最大垂直视角范围  (-90 .. +90).  
/>  

fovtype 几种选项（在手机和平板设备的默认值将MFOV！）：

 - vfov -垂直视场，基于屏幕的高度  。
 - HFOV -水平视野，基于屏幕宽度
 - DFOV -看对角线场，基于屏幕的对角线
 - MFOV -最大的视场（动态混合vfov和HFOV）

limitview 几种选项：

 - off--不限制在所有  
 - auto--自动限制（默认）  
 - lookat--限制查看变量直。（接“hlookatmin”，“hlookatmax”，“vlookatmin”，“vlookatmax”）
 - range--限制的地区设置（由“hlookatmin”，“hlookatmax”，“vlookatmin”，“vlookatmax”，只有在这个范围内，允许观察）  
 - fullrage--的地区设置（由“hlookatmin”，“hlookatmax”，“vlookatmin”，“vlookatmax”，但允许放大看到整个图像  ）
 - offrange---限制的地区设置（由“hlookatmin”，“hlookatmax”，“vlookatmin”，“vlookatmax”，但不以任何方式限制缩放。  ）


//默认视角的参数设置和视角限制设置  
//样例：   
//正常: 
<view hlookat="0" vlookat="0" fov="80" />  
  
//小行星视角
<view hlookat="0"  
      vlookat="90"  
      fisheye="1.0"  
      stereographic="true"  
      fov="150"  
      fovmax="150"  
      />  
  
//平面全景
<view hlookat="0"  
      vlookat="0"  
      maxpixelzoom="1.0"  
      limitview="fullrange"  
      />

preview（指定一张全景预览图）

<preview type=""              //过渡全景图的类型  
    url="previewpano.jpg"     /过渡全景图路径  
    striporder="LFRBUD"       //定义图像顺序  
    details="16"              //图像细节质量调整，越大越清晰  
/>  

//指定一张全景预览图，以便在读取过程中，过渡显示   

//样例：  
<preview url="pano_preview.jpg" />  
<preview type="grid(CUBE,16,16,512,0xCCCCCC,0xFFFFFF,0x999999);" />  
<preview type="SPHERE" url="spherepreview.jpg" details="16" />  
<preview type="CUBESTRIP" url="cspreview.jpg" />

image（加载图片资源）

<image type="CUBE"                //全景图类型（六面体）  
       tiled="false"              //是否使用平铺图像  
       tiledimagewidth="..."      //平铺图像宽度  
       tiledimageheight="..."     //平铺图像高度  
       tilesize="..."             //平铺图像大小  
       baseindex="1"              //图像读取默认索引数字(第一个)  
       frames="1"                 //当前图像帧数       
       frame="1"  
       prealign=""                //prealign,采用X|Y|Z轴对齐方式  
 >  
    <cube url="pano_%s.jpg" />  
</image>  
//where "%s" is the placeholder of the cube-side character (l,f,r,b,u,d)  

//以上是数字索引方式读取切片图片，以下是通过定义六个方向的图片路径读取切片，文件后缀要加上_l，_f....方式来识别。  

<image type="CUBE"  
       tiled="false"   
       tiledimagewidth="..."   
       tiledimageheight="..."   
       tilesize="..."  
       baseindex="1"  
       frames="1"   
       frame="1"  
       prealign=""  
 >  
    <left  url="pano_l.jpg" rotate="0" flip="" />  
    <front url="pano_f.jpg" rotate="0" flip="" />  
    <right url="pano_r.jpg" rotate="0" flip="" />  
    <back  url="pano_b.jpg" rotate="0" flip="" />  
    <up    url="pano_u.jpg" rotate="0" flip="" />  
    <down  url="pano_d.jpg" rotate="0" flip="" />  
</image>