【代码分享】VR功能实现GIF热点,获取VR坐标的功能

编辑地址http://www.mugeda.com/animation/edit/f13167f3
 
1:在舞台上放一个VR控件,命名为“vr”
2:加入两个文本框,分别命名为"hvalue"与"vvalue"
3:将需要加入gif的vr热点命名为"gif"
4:将以下代码复制进脚本框内

// VR对象名称
var vrName = 'vr';

// 这里提供你想要添加动画gif的热点的名字
var spotName = "gif";

// 显示坐标的对象名称
var hValueName = 'hvalue';
var vValueName = 'vvalue';

mugeda.addEventListener('renderready', function(){
    var hValue = mugeda.scene.getObjectByName(hValueName);
    var vValue = mugeda.scene.getObjectByName(vValueName);
    var holder = mugeda.scene.getObjectByName(vrName);
    if(holder){
        var scenes = holder.data.param.vrData.scenes;
        var hotspotId = null;
        scenes.map(function(scene){
            var hotspots = scene.hotspots;
            hotspots.map(function(hotspot){
                if(hotspot.name == spotName)
                    hotspotId = hotspot.id;
            })
           
        })
       
       var changeHotspot = function(){
            var pano = holder.dom.querySelector('.vr_panorama');
            var done = false;
            if(pano){
                var hotspot = pano.get("hotspot['hotspot_"+hotspotId+"']");
                if(hotspot){
                    done = true;
                    hotspot.distorted=true;
                    hotspot.renderer = 'css3d';
                }
                
                MugedaTools.onViewChanged = function(){
                    var h = pano.get("view.hlookat");
                    var v = pano.get("view.vlookat");
                    hValue.text = h;
                    vValue.text = v;
                }
                pano.set("events.onviewchanged","js(MugedaTools.onViewChanged)");
                pano.set("events.keep",true);
            }
            
            if(!done){
                setTimeout(changeHotspot, 100);
            }
       };
       setTimeout(changeHotspot, 100);
       
   }
        
}) 
接下来,可以调取VR的坐标去实现一些判断与关联,实现元件的控制等
已邀请:

zgs

赞同来自: qqa749c6d748

这些需要代码加的功能以后都会直接加入mugeda里作为默认功能

totalacg

赞同来自:

厉害了这个,这样就可以把元件加进去当热点用了,现在元件能覆盖在VR层上面了吗?

totalacg

赞同来自:

如果可以通过{{热点名称.top}}方式来获取热点在舞台中二维坐标的话,可能体验会更好

ddbackhome

赞同来自:

https://cn.mugeda.com/animation/edit/49fd805b   如果上述链接过期了,可以打开这个查看效果

要回复问题请先登录注册