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

一、功能特性

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

涉及的Krpano知识点：

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

二、下载地址

GitHub: GitHub - ping-xiong/krpano-auto-focus-intro: Allows you to play a series of auto-moving perspectives and display picture animations when entering Krpano.

三、演示视频

视频播放器

B站观看地址：Krpano 全景热点轮播开场插件 兼容小行星开场_哔哩哔哩_bilibili

四、使用方法

在HTML页面中引入js文件：

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

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

1.非小行星开场的引入

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<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行开始，数量不限。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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' 为按钮图片的地址。确保οnclick="resetLP()"能够点击触发。ID不能随便修改，如要把btn改为其他ID，请在js文件中相应的地方同步修改。

1 2 3

<div id="btn" style="position: absolute; width: 100%; display: none; justify-content: center; bottom: 90px"> <img  src="./image/btn.png" alt=""  οnclick="resetLP()"> </div>