Krpano 全景热点轮播开场插件 兼容小行星开场

2019年5月22日 4 条评论 402 次阅读 3 人点赞

一、功能特性

用户打开全景的时候,当前场景会先根据设定的坐标,移动视角以及显示弹窗图片,这样可以强调场景的关注点。等待全景播放完设置的动画,会恢复到小行星画面并且在屏幕上显示开始游览的按钮。用户点击按钮从小行星视角进入正常的视角。

涉及的Krpano知识点:

  1.  Krpano载入完成事件和小行星载入完成事件的控制
  2.  Javascript 代码动态生成和删除layer
  3.  Krpano 过渡的应用
  4.  Javascript 代码调用Krpano的函数
  5.  通过Javascript 实现点击任意地方获取坐标(按F12,在console中查看)
  6.  Krpano xml语言中调用Javascript函数

二、下载地址

GitHub: https://github.com/ping-xiong/krpano-auto-focus-intro

三、演示视频

B站观看地址:https://www.bilibili.com/video/av53284908/

四、使用方法

在HTML页面中引入js文件:

引入完毕后,还不能自动调用,需要将js函数添加到Krpano的完成事件中运行。下面分两种情况:

1.非小行星开场的引入

2. 小行星开场的引入:

如果在onready中调用,会出现视角错乱的情况。这时需要在skin\vtourskin.xml文件中修改小行星结束后调用js函数。如果启用了小行星就无需krpanoReady函数了,只需修改skin\vtourskin.xml文件为下面的代码,添加 js('runScript'):

 

所有的动画配置都在focusPlugin.js里面,根据注释来修改。

 

修改动画的顺序和位置

在focusPlugin.js的174行开始,数量不限。

 

在屏幕上显示开始游览按钮

复制下面代码到HTML文件中任意位置,并且修改图片地址: './image/btn.png' 为按钮图片的地址。确保onclick="resetLP()"能够点击触发。ID不能随便修改,如要把btn改为其他ID,请在js文件中相应的地方同步修改。

 

平兄

做任何一件事情,计划和努力应当留给自己看,成果才适合秀给他人看。

文章评论(4)

  • 包裹

    好久没看你发了,先抢个沙发! :razz:

    2019年5月23日
    • 平兄

      @包裹 哈哈哈 最近忙

      2019年5月31日
  • 简单

    怎么去下载别人的网站的全景图片?

    2019年8月7日
    • 平兄

      @简单 目前来说是靠一些工具下载 我只是了解过 没有实际搞过

      2019年8月8日