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


一、功能特性

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

涉及的Krpano知识点:

 Krpano载入完成事件和小行星载入完成事件的控制

 Javascript 代码动态生成和删除layer

 Krpano 过渡的应用

 Javascript 代码调用Krpano的函数

 通过Javascript 实现点击任意地方获取坐标(按F12,在console中查看)

 Krpano xml语言中调用Javascript函数

二、下载地址

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

三、演示视频

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

四、使用方法

在HTML页面中引入js文件:

<script src="focusPlugin.js"></script>

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

1.非小行星开场的引入

<script>

  embedpano({

      swf:"tour.swf",

      xml:"tour.xml",

      target:"pano",

      html5:"auto",

      mobilescale:1.0,

      passQueryParameters:true,

      // onready 必须添加!!!

      onready:krpanoReady

  });

  // 全景启动的时候,转向某个角度并且显示图片,如果不要显示图片,img的值设置为null

  function krpanoReady(krpano)

  {

      // 下面两种调用根据实际情况来取消注释调用

      // 单个动画, ath和atv分别是坐标

      // var target = {

      //    ath: '120.9971124595112',

      //    atv: '-0.994138452236871',

      //    img: '1.png'

      // };

      // // 调用函数

      // start_foucus(target.ath, target.atv, target.img);

      // 连续的动画

      // runScript()

  }

</script>

2. 小行星开场的引入:

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

<action name="skin_setup_littleplanetintro">

copy(lp_scene, xml.scene);

copy(lp_hlookat, view.hlookat);

copy(lp_vlookat, view.vlookat);

copy(lp_fov, view.fov);

copy(lp_fovmax, view.fovmax);

copy(lp_limitview, view.limitview);

set(view.fovmax, 170);

set(view.limitview, lookto);

set(view.vlookatmin, 90);

set(view.vlookatmax, 90);

lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);

set(events[lp_events].onloadcomplete,

delayedcall(0.5,

if(lp_scene === xml.scene,

set(control.usercontrol, off);

copy(view.limitview, lp_limitview);

set(view.vlookatmin, null);

set(view.vlookatmax, null);

tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lp_hlookat + '|' + lp_vlookat + '|' + lp_fov + '|' + 0.0),

3.0, easeOutQuad,

set(control.usercontrol, all);

tween(view.fovmax, get(lp_fovmax));

<!--小行星动画载入完毕,开始调用脚本-->

js('runScript')

);

  );

  );

  );

</action>


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


修改动画的顺序和位置

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

    var target = [

        {

            ath: getRandomViewH(),

            atv: getRandomViewV(),

            img: './image/1.png'

        },

        {

            ath: getRandomViewH(),

            atv: getRandomViewV(),

            img: './image/2.png'

        },

        {

            ath: getRandomViewH(),

            atv: getRandomViewV(),

            img: './image/3.jpg'

        },

        {

            ath: getRandomViewH(),

            atv: getRandomViewV(),

            img: './image/4.png'

        },

        {

            ath: getRandomViewH(),

            atv: getRandomViewV(),

            img: './image/5.png'

        },

        {

            ath: getRandomViewH(),

            atv: getRandomViewV(),

            img: './image/6.png'

        }

    ];


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

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

<div id="btn" style="position: absolute; width: 100%; display: none; justify-content: center; bottom: 90px">

<img  src="./image/btn.png" alt=""  onclick="resetLP()">

</div>

更多作品,访问我的博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249