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文件：

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

1.非小行星开场的引入

2. 小行星开场的引入：

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

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')

);

  );

  );

  );

所有的动画配置都在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文件中相应的地方同步修改。

更多作品，访问我的博客