krpano动态加载设置热点

krpano动态加载设置热点

月光魔力鸭

2018-09-13 16:49 阅读 3892 喜欢 4 krpano动态加载 设置hotspot

上一章中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。

我们的思路

实现

关于xml中的代码这里就不贴了,主要贴下动态加载的js代码。

/****
 * Krpano util ,通用函数类
 * @author lixun
 * @create 2018年9月11日 17:37:44
 ***/
 var krpano = null;
 var Common = {
     //获得场景信息
     getScene : function( id,cb ){
         //这里使用假数据
        var map = {
            '1' : {
                type : 'scenea.xml',//场景类型
                next : '2',//下一个场景ID
                prev : '3',//上一个场景ID
                imgs : [	//对应场景内的图片展示
                    '/img/1.jpg',
                    '/img/2.jpg',
                    '/img/3.jpg',
                    '/img/4.jpg',
                    '/img/5.jpg',
                    '/img/6.jpg',
                    '/img/7.jpg',
                    '/img/8.jpg',
                    '/img/9.jpg',
                    '/img/10.jpg',
                    '/img/11.jpg',
                    '/img/12.jpg',
                    '/img/13.jpg',
                    '/img/14.jpg',
                    '/img/15.jpg',
                    '/img/16.jpg',
                    '/img/17.jpg',
                    '/img/18.jpg',
                    '/img/19.jpg',
                    '/img/20.jpg',
                ]
            }//这里使用的是假数据,后续的就不贴了,占空间
        };
        if(cb){
            cb(map[id]);
        }
     },
     //加载场景
     loadPano : function(xml,imgs,next,prev){
        if(krpano){
            removepano('newId');
        }
        embedpano({
            swf : 'tour.swf', 		// path to flash viewer (use null if no flash fallback will be requiered)
            id : "newId", 
            xml : xml, 
            target : 'pano', 
            consolelog : true,					// trace krpano messages also to the browser console
            passQueryParameters : true, 		// pass query parameters of the url to krpano
            onready : function(krpano_interface){
                krpano = krpano_interface;
                //继续操作
                console.log('delay...');
                Common.setHot(imgs,next,prev);
            }
        });
         
     },
     //设置热点图片路径
     setHot : function(imgs,next,prev){
         console.log('hot setting')
         if (krpano){
             setTimeout(function(){
                 imgs.forEach(function(imgPath,index){
     				krpano.set("hotspot[dyn_img"+(index+1)+"].url", imgPath);	
     			})
     			//设置场景跳转
                krpano.set('hotspot[spot1].onhover','showtext(去往第1展厅,hotspottextstyle)');
                krpano.set('hotspot[spot2].onhover','showtext(去往第2展厅,hotspottextstyle)');
                krpano.set('hotspot[spot1].onclick','js(showScene('+prev+'))');
                krpano.set('hotspot[spot2].onclick','js(showScene('+next+'))');
                //随机观察点
                krpano.call("lookto(" + (Math.random() * 360.0 - 180.0) + "," + (Math.random() * 180.0 - 90.0) + "," + (80.0 + Math.random() * 100.0) + ")");
             },200)
        }
     }
 };

代码中基本上注释都写清楚了,主要的思路就是先根据展厅ID获得对应的xml以及图片,然后在加载另外的场景的时候,先移除掉现在的场景,然后重新加载。

JS调用:

//加载场景
var imgs = [];
function showScene(id){
    console.log('加载场景'+id);
    Common.getScene(id,function(obj){
        imgs = obj.imgs;
        Common.loadPano(obj.type,obj.imgs,obj.next,obj.prev);
    })
}

byy.require('win',function(){
    
    //第一次加载需要先确定场景,然后初始化场景,然后加载图片
    //后续的需要获得场景信息,然后加载不同的pano,然后加载图片信息
    Common.getScene(1,function(obj){
        console.log(obj);
        Common.loadPano(obj.type,obj.imgs,obj.next,obj.prev);
    })
    
})

这样,我们就能够在加载的时候动态加载我们需要的场景了,不需要一次全部加载,相对耗时短一些,当然对于图片的处理还是需要的,不然每个图片都很大的话,加载还是很慢的,两边要一起优化。

以上代码暂时只能用于demo的实现,具体生产中还没有开始使用,仅供借鉴!

相关文章: 初识Krpano

转载请注明出处: https://chrunlee.cn/article/3d-krpano-2.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最近在做直播,是用的webrtc,然后找的免费的starrtc ,当然,可能由于种种原因吧.. 用起来并没有特别顺畅,后续还希望能够深入这部分,从现在开始学习..当然,websocket 是顺带的,可以用来发消息什么的肯定也是要用到的。
一直有跑着puppeteer在做pdf的生成,可以今天突然发现一个问题:预览与打印生成的PDF不一致,猜测可能是边距导致的,应该是没设置好... 然后当我在本地尝试的时候也发现了这个问题..要么是字符,要么是版本
接下来,我们综合上面的配置,再加一个选项页面配置,做一个天气预报的小栗子。
当我们使用web打印相关的解决方案的时候,还有不少小坑值得注意下,同时需要了解几个小技巧提升在web打印上的友好度,以下整理一些常见的小技巧
通过frp做穿透实现https 访问本地http项目。
昨天客户发现了个小BUG,文章发布使用的ueditor, 上传视频的时候当时好好的,后来怎么就是播放不了?
本篇文章以一个实际的小项目为主题进行从头到尾的讲解实现,该项目总计开发时长约6小时,主要是有很多页面或功能都是现成的,直接复制过来的,剩下的就调整下样式、字段内容等。
小程序需要用到用户的手机号码,看了下API 以及相关的demo,基本都是服务端进行解密的,问题是需要的参数并没有用到secret,只需要 session_key / iv /encryptedData 即可,那完全可以在客户端进行处理啊。