krpano XML 拓展使用指南

 🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《Krpano中文文档》

​ 

​        默认的krpano下载包包括用于各种用例的几个基于xml的扩展或帮助脚本。相关的xml文件可以在plugins文件夹中找到，并在需要时包含。由于这些都是xml文件，因此可以很容易地定制它们以满足进一步的需求。

可用的XML扩展:

• combobox.xml
• contextmenu.xml
• copy_to_clipboard.xml
• depthmap_measure3d.xml
• depthmap_navigation.xml
• doubleclick_style.xml
• fps.xml
• ios_iframe_fullscreen.xml
• iphone_fullscreen_swipe.xml
• minimap_zoomrect.xml
• showtext.xml
• webvr.xml
• webvr_autozoom.xml

contextmenu.xml (view)

• 为右键单击上下文菜单添加几个典型条目:
  • 若要更改全景控制模式(拖动或移动)，
  • 并设置几个不同的观看投影(如普通视图，鱼眼视图，建筑视图，小行星等)与动画过渡。
• 用法:

  <include url="plugins/contextmenu.xml" />

copy_to_clipboard.xml (view)

• 使用copy_to_clipboard(text)操作扩展krpano。
• 可用于将任何类型的文本动态复制到系统剪贴板。
• 用法:

<include url="plugins/copy_to_clipboard.xml" />

copy_to_clipboard('hello from krpano');

depthmap_measure3d.xml (view)

Depthmap例子

• 一个小的辅助工具和例子做测量在 Depthmap-Panos / 3D-Models.
• 提供操作和可选的用户界面，用于启动交互式测量。
• 可以通过编辑xml文件本身或在包含它的xml文件中重新定义其中的<style>元素来更改测量点和线条的设计/外观。
• 可用的设置:

  <depthmap_measure3d
      ui="true"
      ui_pos="left,10,0"
      ui_dragable="true"
      gap="0.0"
      showslope="false"
      unit_format="roundval(v,1) + ' cm'"
      />

  • ui - 显示可选的用户界面进行测量。
  • ui_pos- 默认用户界面的对齐和位置。
    语法:ui_pos = "对齐,x, y”
  • ui_dragable - 用户界面是否可拖动。
  • gap - 在表面与测量点之间增加间隙，可用于粗糙表面。
  • showslope - 显示垂直高度距离的斜率/角度(以度为单位)。
  • unit_format - 将测量结果格式化的表达式:
    • cm: roundval(v,1) + ' cm'
    • meters: roundval(v/100,2) + ' m'
    • inch: roundval(v/2.54,1) + '[dq]'
    • feet: roundval(v/30.48,2) + ' ft'
• 可用的操作:
  • start_measuring_between_points ()
    在任意两个三维点之间开始测量，用户需要双击两次来选择两个点。
  • start_measuring_between_surfaces()开始测量两个表面之间的距离。用户需要双击一次来选择表面上的一个点，然后测量将在该点和表面上的一个点之间进行，该点将被来自第一个表面的垂直线击中。测量房间大小的简单方法。
  • stop_measuring()停止测量电流(也可按esc键停止)。
• 使用:

  <include url="plugins/depthmap_measure3d.xml" />

depthmap_navigation.xml (view)

Depthmap例子

• 深度地图导航控件
  • 用于导航的一些基本控件 Depthmap-Panos / 3D-Models
• Arrow-keys or WASD-keys 或鼠标中/右键在桌面上导航
• 用于移动设备的屏幕触摸板
• vr控制器操纵杆/触摸板支持WebVR
• 可选深度贴图/ 3d模型命中/碰撞检测
  • 要么在移动方向上使用简单的碰撞，
  • 或者也可以选择与地面/地板和基于重力的移动模型碰撞。
  • 它允许上下楼梯和升降，甚至像在3d游戏中一样跳跃和蹲伏(但只是非常简单和基本的)。
• 键盘按键:
  • 箭头/WASD 方向键用于向前/向后/向左/向右移动
  • 按住SHIFT键移动更快
  • Q代表向上移动或跳跃
  • Y或Z表示向下移动或蹲下
  • 空格跳跃
  • C用于切换碰撞开关
  • F代表在行走和飞行之间切换
• 鼠标:
  • 鼠标左键:正常环顾四周/旋转
  • 左键+SHIFT或鼠标中键和右键:移动
  • 按住ALT, CTRL或shift键:上下移动
  • 在玩偶屋模式中，移动/上下控制被交换
• 设置(可随时更改/覆盖):

  <depthmap_navigation
      movemode="walking"
      touchmode="shift"
      speed="0.5"
      friction="0.9"
      collision="true"
      groundcollision="false"
      usevrfloorlevel="false"
      eyelevel="160.0"
      collisionlevel="100.0"
      smoothlevelchanges="0.15"
      stopdistance="30"
      moveback="1.2"
      bounceback="1.6"
      />

  • movemode = “行走”或“飞翔”
  • touchmode = “shift”(相对运动)或“move”(连续运动)
  • speed = 移动速度
  • friction = 运动摩擦
  • collision = 碰撞检测/停在墙上
  • groundcollision = 与地面的碰撞检测，使重力，应该只用于全纹理的3d模型
    • usevrfloorlevel = 在VR中使用真实的身体高度
    • eyelevel = 地面/地板到眼睛/相机之间的距离，单位为厘米
    • collisionlevel = 碰撞检查的高度以厘米为单位
    • smoothlevelchanges = 平滑水平/高度变化的因素
  • stopdistance = 保持与墙壁/表面的距离以厘米为单位
  • moveback = 撞墙时，后退x次
  • bounceback = 撞墙时，添加弹跳动作
• 使用:

  <include url="plugins/depthmap_navigation.xml" />

  更改设置(静态):

  <depthmap_navigation groundcollision="true" usevrfloorlevel="true" />

  更改设置(动态):

  depthmap_navigation.groundcollision=true;

  
  

doubleclick_style.xml (view)

• 帮助器<style>用于单次/双击检测图层和热点元素。
• 通过添加双击样式到图层或热点，元素将被扩展为:
  • onsingleclick和
  • ondoubleclick事件。
• 注意-与正常的onclick事件相比，onsingleclick事件将以较短的延迟分派，因为检测器需要等待潜在的第二次点击。
• 用法:

  <include url="plugins/doubleclick_style.xml" />

  <layer ...
         style="doubleclick"
         onsingleclick="trace('-single click-');"
         ondoubleclick="trace('-double click-');"
         />

fps.xml (view)

• FPS(帧每秒)性能测量工具。
• 这个工具在左上角显示当前的平均渲染帧率。
• 用法:

  ​<include url="plugins/fps.xml" />

ios_iframe_fullscreen.xml (view)

• 一个从iframe内部进入iOS“全屏模式”的辅助脚本。
• iOS本身不支持iPhone上的HTML5全屏API，所以没有办法让pano窗口比iframe区域本身更大。
• 因此，该脚本添加了一个伪全屏模式支持，并将浏览器窗口直接重定向到内部iframe页面，以使iframe本身成为完整的浏览器页面。
• 这可以在pano作为“较小”的iframe元素嵌入网站的情况下使用。当嵌入为“整页元素”时，这是不必要的。
• 注意:这个脚本只启用全屏上下文菜单项，依赖于设备的自定义xml元素。Fullscreensupport '状态需要手动启用。这是因为xml解析和xml元素“设备过滤”发生在脚本运行之前。对于“手动启用”，例如，从xml文件的相关元素中删除“fullscreensupport”设备检查。
• 用法:

​<include url="plugins/ios_iframe_fullscreen.xml" />

iphone_fullscreen_swipe.xml (view)

• 在iPhone上进入全屏模式的辅助脚本。
• iOS本身并不支持iPhone上的HTML5全屏API，所以我们无法直接进入全屏模式。但有一个“窍门”:当iPhone旋转到横屏模式时，url/导航栏可能会“滚动”出来，从而进入一种全屏模式。
• 这个xml脚本添加了如何进入全屏模式的用户说明。
• 这里有一个视频展示了它的作用:krpano iPhone全屏模式
• 用法:​​​​​​​​

​<include url="plugins/iphone_fullscreen_swipe.xml" />

minimap_zoomrect.xml (view)

例子 

• 一个辅助脚本，用于为迷你概览地图添加缩放/平移指示器。
• 将在图像图层中添加一个矩形(带有全景图像的小图像)，并且该矩形的大小和位置将根据缩放和平移自动更新。
• 此外，矩形将可拖动以平移，地图图像将可点击以平移到某个位置。
• 在高分辨率/高变焦平面全景上效果最好，但也可以用于所有其他类型的全景。
• 用法:​​​​​​​

​<include url="plugins/minimap_zoomrect.xml" />

<layer name="minimap"
       url="map.jpg"
       bgborder="1 0xFFFFFF"
       align="lefttop" x="10" y="10"
       ...
       style="minimap_zoomrect"
       zoomrect_border="1 0x0000FF"
       zoomrect_dragable="true"
       zoomrect_movetoclick="true"
       />

webvr.xml (view)

WebVR例子​​​​​​​

• webvr.xml是一个辅助工具，它为使用VR提供了几个界面元素:
• 进入/退出VR模式按钮。
• 一个设置菜单，用于交互式定制基于移动电话的谷歌纸板式VR耳机的镜头失真。
• 镜头失真预设为常见的耳机。
• 无控制器设备的动画VR“指针光标”(指向/盯着一个元素几秒钟，与之互动)。
• 多种VR控制器风格的真正的VR控制器(激光，线+生命点，手光标+生命点)。
• 支持“假VR模式”，可以在非VR系统上测试VR模式。
• 一个可编辑的内置手机及其屏幕尺寸列表，以获得正确的镜头失真。
• 用法:​​​​​​​

<include url="plugins/webvr.xml" />
<-- optionally adjust some of the webvr.js default settings: -->
<plugin name="webvr"
        mobilevr_support="true"
        mobilevr_fake_support="true"
        mobilevr_wakelock="true"
        ...
        />

webvr_autozoom.xml (view)

• 一个在VR中缩放的辅助脚本。
• 凝视一个点约2秒后，视野开始慢慢放大。
• 当环顾四周时，放大停止，视图开始慢慢缩小到正常视图(环顾得越快，缩小得越快)。
• 用法:​​​​​​​

<include url="plugins/webvr.xml" />
<include url="plugins/webvr_autozoom.xml" />

✨ 结语

        

​