Hi all
Please could someone help me with this issue, I am pulling my hair out.
I have created a Stereoscopic virtual tour using cube maps, which runs and looks great online and in the Meta Quest 3.
I have now added a floating pop up menu that follows the user, that works great, taken and adapted from the webvr example from Krpano.
Some scenes also use the lensflare.js script, that also works amazing. But both wont work together?
I have attached some screenshots and the code for each. The lensflare code is added into the individual scenes code in the tour.xml, but the code for the floating menu will work in both the tour.xml or the vtourskin.xml. If I remove the code for the menu the lens flares work perfectly, as soon as I add the menu back in the lens flare breaks, with different affects in each scene even though the lens flare code settings are the same?
I am not a coder but a 3D artist so any help needs to be in layman's terms, I understand it could be to do with using JavaScript and webgl and layering within the scene? If it comes to it the menu works and is more important so could drop the lens flare, but it does help to tour.
If there are any problems with the code I would like to make it better and more streamlined so please be free to condense. The lensflare is the main issue but some further questions are below. I have cut the code for menu down for posting.
- Would the paid zFlare Plugin fix the issue, though still a JavaScript?
- The menu "vr_menu_over" works but the "vr_menu_out" doesn't put the menu back to start depth and stays at the over depth size from then on?
- Is the action name="vr_menu_setvisibility" doing anything? I change settings but nothing seems happen, is it required?
- Is the code for the menu better in the vtourskin.xml or tour.xml, or is that just editing preference?
<!-- the VR menu - home button, scene buttons -->
<style name="vr_menu_style" renderer="webgl" depth="700" scale="0.15" distorted="true" ath="0" atv="60" alpha="0.3" torigin="view" visible="true"/>
<hotspot name="vr_menu_bg" style="vr_menu_style" keep="true" zorder="0.1" type="text" bgcolor="0x000000" bgalpha="0.85" width="2050" height="300" roundedge="50" handcursor="false" onover="vr_menu_over(); " onout="vr_menu_out();" />
<hotspot name="vr_menu_home" style="vr_menu_style" keep="true" zorder="0.2" url="menu.png" crop="0|0|400|100" ox="0" oy="-17" onover="vr_menu_over(); delayedcall(0,tween(alpha,0.8,0.1));" onout="vr_menu_out();" startupxml="" onloaded="" vr_timeout="1000" onclick="loadscene(scene_000_menu_straight_in_between,null,MERGE|KEEPMOVING, BLEND(1));" />
<hotspot name="vr_menu_3" style="vr_menu_style" keep="true" zorder="0.2" url="menu.png" crop="400|0|400|100" ox="-120" oy="-5" handcursor="false" onover="null;" onout="null;" vr_timeout="" onclick="" />
<hotspot name="vr_menu_4" style="vr_menu_style" keep="true" zorder="0.2" url="menu.png" crop="2400|0|400|100" ox="128" oy="16" onover="vr_menu_over(); delayedcall(0,tween(alpha,0.8,0.1));" onout="vr_menu_out();" vr_timeout="700" onclick="loadscene(scene_286_sd_0005,null,MERGE|KEEPMOVING, BLEND(1));" />
<action name="vr_menu_over">
callwith(hotspot[vr_menu_bg], tween(alpha|depth,1.0|600); );
callwith(hotspot[vr_menu_home], tween(alpha|depth,0.5|600); );
callwith(hotspot[vr_menu_3], tween(alpha|depth,0.5|600); );
callwith(hotspot[vr_menu_4], tween(alpha|depth,0.5|600); );
</action>
<action name="vr_menu_out">
if(hotspot[vr_menu].hovering == false,
callwith(hotspot[vr_menu_bg], tween(alpha|depth,0.25|700); );
callwith(hotspot[vr_menu_home], tween(alpha|depth,0.25|700); );
callwith(hotspot[vr_menu_3], tween(alpha|depth,0.25|700); );
);
</action>
<action name="vr_menu_setvisibility">
set(hotspot[vr_menu_bg].visible, %1);
set(hotspot[vr_menu_home].visible, %1);
if(scene.count GT 1,
set(hotspot[vr_menu_bg].width, 600);
set(hotspot[vr_menu_3].visible, %1);
set(hotspot[vr_menu_4].visible, %1);
,
set(hotspot[vr_menu_bg].width, 300);
set(hotspot[vr_menu_3].visible, false);
set(hotspot[vr_menu_4].visible, false);
);
</action>
<events name="vr_menu_events" keep="true" onviewchange="vr_menu_following();" />
<action name="vr_menu_following" type="Javascript">
<![CDATA[
var hs1 = krpano.get("hotspot[vr_menu_bg]");
var hs2 = krpano.get("hotspot[vr_menu_home]");
var hs3 = krpano.get("hotspot[vr_menu_3]");
var hs4 = krpano.get("hotspot[vr_menu_4]");
if(!hs1.hovering && !hs2.hovering && !hs3.hovering && !hs4.hovering)
{
var f = 0.03; // follow speed factor
var h = krpano.view.hlookat;
var v = krpano.view.vlookat;
var hsh = hs1.ath;
var hsv = hs1.atv;
// map to -180 to +180
h = (h -(h|0)) + (((h|0) +360180)%360) - 180.0;
hsh = (hsh-(hsh|0)) + (((hsh|0)+360180)%360) - 180.0;
// get the shortest horizontal distance
var dh = h - hsh;
dh += (dh>180) ? -360 : (dh<-180) ? 360 : 0
// follow slowing horizontally
hsh += dh*f;
// fade out when farther away
var a = Math.abs(v - hs1.atv) / 90.0;
a = 0.5 * Math.max(1.0 - 2.0*Math.sqrt(a), 0);
// move up the more looking down
v = v + 70.0 - v*1.5;
hsv = hsv*(1-f) + v*f;
// set everything
hs2.alpha = hs1.alpha = a;
if(!hs3.hovering) hs3.alpha = a;
if(!hs4.hovering) hs4.alpha = a;
hs4.ath = hs3.ath = hs2.ath = hs1.ath = hsh;
hs4.atv = hs3.atv = hs2.atv = hs1.atv = hsv;
}
]]>
</action><!-- LENSFLARE -->
<include url="skin/lensflare.xml"/>
<lensflare_settings editor="false"
zorder="1.0"
ath="213.0" atv="-31.5"
sun="0.1"
glare="0.1"
r_ring="0.15"
exposure="true"
exposure_bias="-1.0"/>