一、功能特性
用户打开全景的时候，当前场景会先根据设定的坐标，移动视角以及显示弹窗图片，这样可以强调场景的关注点。等待全景播放完设置的动画，会恢复到小行星画面并且在屏幕上显示开始游览的按钮。用户点击按钮从小行星视角进入正常的视角。
涉及的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>
网友评论