krpano入门资料

做全景播放器的时候，我们们通常会用到各种各样的图标，播放暂停啊，全屏VR啊什么的，如果每个图标都用单张图片来引入的话，势必会产生非常多的HTTP请求，而我们知道，过多的HTTP请求是页面性能的大杀器，还好 Krpano-xml 的 layer 提供了 crop 属性给我们，这个属性可以让我们对图片进行切割，只显示切割出来的区域，和 CSS 精灵图使用 background-image 和 background-position 来进行图片显示的方式非常类似。

下面是 krpano crop 属性示例：

<layer 
	name="some-image-layer"
	url="/foo/bar/image.png"
	crop="0|0|64|64"
	/>
//上述代码的意思就是，从 x=0 y=0 坐标开始，截取图片的64x64宽高的区域来显示。

现在我们有了 krpano 精灵图的使用方法，但是当你有很多张图片的时候，手动管理这些坐标点的位置是一件非常非常非常麻烦的事情。

CSS 精灵图已经有各种成熟的解决方案，比如博主喜欢的 gulp 插件 sprity ，它可以一键拼合零碎图片，并且生成 CSS/LESS/SASS 代码，可惜 krpano-xml 相对来说太小众了，我找遍 google 并没有找到一个好的解决方案，所以是时候造个轮子了:grin:。

Krpano-Plugins

Videoplayer

Videoplayer插件可用于在krpano内播放视频。
作为屏幕上的平面layer元素使用：
作为3D变形热点使用：
作为全景视频使用：

krpano工程问题

autorotate 自动旋转,自动播放
全景图在开启了自动旋转后,会自动在间隔时间内,加载其他scene,但是自动旋转却会停止;
KEEPMOVING Autorotate
浏览器接受蓝牙控制

蓝牙作为信息输入

Web Bluetooth

caniuse

Web Bluetooth API

热点

热点资源

将多张图片合并成一个png序列图的小小工具-PngMergeHelper 密码: wf65
将多张jpg图片合并成一个jpg序列图的小小工具-JPGCombine 密码: ecpr
将gif分离成多个png的小工具-GIF分离器密码: kti6

动态热点代码分析

<action name="do_animation_hotspot">
    <!-- add attributes to the hotspot -->
    registerattribute(xframes, calc((imagewidth / %1) BOR 0));
    registerattribute(yframes, calc((imageheight / %2) BOR 0));
    registerattribute(frames, calc(xframes * yframes));
    registerattribute(frame, 0);
    set(crop, '0|0|%1|%2');
    setinterval(calc('crop_anim_' + name), calc(1.0 / %3),
        if(loaded,
            inc(frame);
            if(frame GE frames, if(onlastframe !== null, onlastframe() ); set(frame,0); );
            mod(xpos, frame, xframes);
            div(ypos, frame, xframes);
            Math.floor(ypos);
            mul(xpos, %1);
            mul(ypos, %2);
            calc(crop, xpos + '|' + ypos + '|%1|%2');
          ,
            clearinterval(calc('crop_anim_' + name));
          );
      );
</action>

动态热点上添加始终显示的文字

插件

ABS-获取绝对位置

折叠菜单

Accordion Menu Plugin

KRPANO二维码自动生成插件

高德地图导航插件

说一说插件

多屏互动

KRPANO多屏互动原理
 firstlook360

编辑器

krtonducthang
参考
Arliki
关注

测试工程搭建

tour_testingserver.exe

导航图功能

实现浏览器后退加载场景

//load pano on browser backbutton
            window.onpopstate = function (event) {
                var scene = event.state.scene;
                var vars = "view.hlookat=" + event.state.view.hlookat;
                vars += "&view.vlookat="+ event.state.view.vlookat;
                vars += "&view.fov="+ event.state.view.fov;
               krpano().call("loadscene(" + scene + "," + vars + ", MERGE, BLEND(1));");
            };

function krpano() {
    return document.getElementById("krpanoSWFObject");
}
//called by scene loading
function krp_pushState(scene, spot) {
    history.pushState({ scene: scene, refspot:spot }, scene, location.origin + "/?ambiente=" + scene);
}
function krp_replaceState(scene, view) {
    history.replaceState({ scene: scene, view:view },
                            scene,
                            location.origin + "/?ambiente=" + scene);
}

krpano入门资料

About 简介

成熟商业网站

awesome krpano

Krpano 学习

Embedding into HTML

XML文档

Actions / Scripting 动态执行动作及脚本

HTML5

Javascript接口调用

全景场景插入平面视频

Krpano 精灵图（雪碧图 || sprites）完美解决方案