krpano实践之全景图缩放,旋转,倾斜,自动旋转,VR,全屏方法-js调用

Posted 李佳鹏-前端

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了krpano实践之全景图缩放,旋转,倾斜,自动旋转,VR,全屏方法-js调用相关的知识,希望对你有一定的参考价值。

/*定义控件*/
var krpano = document.getElementById("krpanoSWFObject");
/*获取变量*/
var fov = Number(krpano.get("view.fov"));
var hlookat = Number(krpano.get("view.hlookat"));
var vlookat = Number(krpano.get("view.vlookat"));
/*放大*/
 fov -= 10.0;
 krpano.set("view.fov", fov);
/*缩小*/
 fov += 10.0;
 krpano.set("view.fov", fov);
/*左旋转*/
 hlookat += 10.0;
 krpano.set("view.hlookat", hlookat);
/*右旋转*/
 hlookat -= 10.0;
 krpano.set("view.hlookat", hlookat);
/*上倾斜*/
 vlookat -= 10.0;
 krpano.set("view.vlookat", vlookat);
/*下倾斜*/
 vlookat += 10.0;
 krpano.set("view.vlookat", vlookat);
/*自动旋转*/
 krpano.set("autorotate.enabled", true);
/*VR模式*/
 krpano.call("WebVR.enterVR();");
/*全屏*/
 krpano.set("fullscreen", true);
/*停止旋转*/
 krpano.set("autorotate.enabled", false);
 
 以上的方法如放大缩小是不带动画的,有卡顿的感觉。下面的方法利用setTimeout方法实现平滑过渡。
 
 /*放大*/
 krpano.set("fov_moveforce",-1);
 setTimeout("krpano.set(‘fov_moveforce‘,0)",200);
 /*缩小*/
 krpano.set("fov_moveforce",1);
 setTimeout("krpano.set(‘fov_moveforce‘,0)",200);
 /*左旋转*/
 krpano.set("hlookat_moveforce",-1);
 setTimeout("krpano.set(‘hlookat_moveforce‘,0)",200);
 /*右旋转*/
 krpano.set("hlookat_moveforce",1);
 setTimeout("krpano.set(‘hlookat_moveforce‘,0)",200);
 /*上倾斜*/
 krpano.set("vlookat_moveforce",-1);
 setTimeout("krpano.set(‘vlookat_moveforce‘,0)",200);
 /*下倾斜*/
 krpano.set("vlookat_moveforce",1);
 setTimeout("krpano.set(‘vlookat_moveforce‘,0)",200);

  

 

以上是关于krpano实践之全景图缩放,旋转,倾斜,自动旋转,VR,全屏方法-js调用的主要内容,如果未能解决你的问题,请参考以下文章

每天一个Js小demo之移动端全景图场景实现-全景装修图。主要知识点:css3,旋转角度检测

Css3旋转位移缩放倾斜动画

CSS缩放函数, 旋转函数与倾斜函数

零基础学前端之css3高级特效

零基础学前端之css3高级特效

KRPANO资源分析工具下载720YUN全景图