【krpano】VRモードの時に任意のhotspotだけ表示する

Pocket
LinkedIn にシェア
LINEで送る

krpanoでコンテンツを作っていると、デフォルト設定ではhotspotは通常表示とVR表示の両方で表現されますが、「特定の画像はVRで表示したくないんだよなあ」って状況が発生します。その時の対処です。

やってみよう

事前準備は2つ。

  • pluginsフォルダにwebvr.jswebvr.xmlが入っているか確認します。
  • tour.xmlにwebvr=”true”が書かれていることを確認します。

1.tour.xmlに追記

tour.xmlのうち、消したいhotspotに対してvr=”true”を設定します。

<scene name=”scene_R0010239-2″ title=”シーン2” onstart=”” thumburl=”panos/R0010239-2.tiles/thumb.jpg” lat=”” lng=”” heading=””>

<hotspot name=”spot0″ url=”icon_architecture.png” ath=”-90″ atv=”-60″ />
<hotspot name=”spot1″ url=”icon_architecture.png” ath=”-30″ atv=”14″ scale=”0.2″ vr=”true” />
<hotspot name=”spot2″ url=”icon_architecture.png” ath=”0″ atv=”-30″ scale=”0.2″ rotate=”30″ />
<hotspot name=”spot3″ url=”icon_architecture.png” ath=”30″ atv=”20″ scale=”0.2″ rotate=”30″ alpha=”0.5″ />

<layer name=”screenimg1″ url=”facade-of-gifu-city-chuo-library-_29593657641_o.jpg” x=”50″ y=”50″ scale=”1.0″ />

2.webvr.xmlに追記

plugins/webvr.xmlを開き、以下のソースを追記してください。コピペでOK。<!–add–>と書かれたaction作成や追記をします。
考え方としては、既存プログラムではlayerはVRモード時の表現の考慮されているのに、hotspotの考慮は記述がないってことなので、自前でactionを作った、というわけです。
actionの作りもlayerをhotspotに文字列を置換しただけです。


<!–add–>
<action name=”webvr_hide_all_non_vr_hotspots”>
for(set(i,0), i LT hotspot.count, inc(i),
copy(lr, hotspot[get(i)]);
if(lr.vr !== true,
copy(lr.vr_backup_visible, lr.visible);
set(lr.visible, false);
);
);
</action>

<!–add–>
<action name=”webvr_restore_hotspots”>
for(set(i,0), i LT hotspot.count, inc(i),
copy(lr, hotspot[get(i)]);
if(lr.vr_backup_visible,
copy(lr.visible, lr.vr_backup_visible);
delete(lr.vr_backup_visible);
);
);
</action>

<action name=”webvr_onentervr”>
if(layer[webvr_enterbutton], tween(layer[webvr_enterbutton].alpha,0,0); );

webvr_showbuttons();
webvr_hide_all_non_vr_layers();
webvr_hide_all_non_vr_hotspots(); <!–add–>

if(webvr.isfake, webvr_show_fakemode_info(true); );

webvr_load_vr_cursor_hs();
</action>

<action name=”webvr_onexitvr”>
removehotspot(‘vr_cursor’);
removehotspot(‘vr_controller_l’);
removehotspot(‘vr_controller_r’);
set(have_vr_controllers, false);

stopdelayedcall(vr_button_fadeout);

if(layer[webvr_enterbutton], tween(layer[webvr_enterbutton].alpha,1); );
tween(layer[webvr_exitbutton].alpha,0);
tween(layer[webvr_setupbutton].alpha,0);

webvr_show_fakemode_info(false);

webvr_restore_layers();
webvr_restore_hotspots(); <!–add–>
</action>

デモ

VRモードにすると3つのロゴマークのうち左下だけが表示されます。

別ウインドウで見る場合はこちら

ソースコード

Githubに全部アップロードしているのでよければご参照を。画像もそのままどうぞ。
https://github.com/christinayan01/demo/tree/master/krpano20210317

今回編集した2ファイルのソース全文です。

tour.xml

<krpano version=”1.20″ title=”ぎふメディアコスモス”>

<include url=”skin/vtourskin.xml” />

<!– customize skin settings: maps, gyro, webvr, thumbnails, tooltips, layout, design, … –>
<skin_settings maps=”false”
maps_type=”google”
maps_bing_api_key=””
maps_google_api_key=””
maps_zoombuttons=”false”
maps_loadonfirstuse=”true”
gyro=”true”
gyro_keeplookingdirection=”false”
webvr=”true”
webvr_keeplookingdirection=”true”
webvr_prev_next_hotspots=”true”
littleplanetintro=”false”
followmousecontrol=”false”
title=”true”
thumbs=”true”
thumbs_width=”120″ thumbs_height=”80″ thumbs_padding=”10″ thumbs_crop=”0|40|240|160″
thumbs_opened=”false”
thumbs_text=”false”
thumbs_dragging=”true”
thumbs_onhoverscrolling=”false”
thumbs_scrollbuttons=”false”
thumbs_scrollindicator=”false”
thumbs_loop=”false”
tooltips_buttons=”false”
tooltips_thumbs=”false”
tooltips_hotspots=”false”
tooltips_mapspots=”false”
deeplinking=”false”
loadscene_flags=”MERGE”
loadscene_blend=”OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)”
loadscene_blend_prev=”SLIDEBLEND(0.5, 180, 0.75, linear)”
loadscene_blend_next=”SLIDEBLEND(0.5, 0, 0.75, linear)”
loadingtext=”loading…”
layout_width=”100%”
layout_maxwidth=”814″
controlbar_width=”-24″
controlbar_height=”40″
controlbar_offset=”20″
controlbar_offset_closed=”-40″
controlbar_overlap.no-fractionalscaling=”10″
controlbar_overlap.fractionalscaling=”0″
design_skin_images=”vtourskin.png”
design_bgcolor=”0x2D3E50″
design_bgalpha=”0.8″
design_bgborder=”0″
design_bgroundedge=”1″
design_bgshadow=”0 4 10 0x000000 0.3″
design_thumbborder_bgborder=”3 0xFFFFFF 1.0″
design_thumbborder_padding=”2″
design_thumbborder_bgroundedge=”0″
design_text_css=”color:#FFFFFF; font-family:Arial;”
design_text_shadow=”1″
/>

<!–
For an alternative skin design either change the <skin_settings> values
from above or optionally include one of the predefined designs from below.
–>
<!– <include url=”skin/vtourskin_design_flat_light.xml” /> –>
<!– <include url=”skin/vtourskin_design_glass.xml” /> –>
<!– <include url=”skin/vtourskin_design_ultra_light.xml” /> –>
<!– <include url=”skin/vtourskin_design_117.xml” /> –>
<!– <include url=”skin/vtourskin_design_117round.xml” /> –>
<!– <include url=”skin/vtourskin_design_black.xml” /> –>

<!– startup action – load the first scene –>
<action name=”startup” autorun=”onstart”>
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
</action>
<!–
<action name=”hide_hotspot_hoge”>
for(set(i,0), i LT hotspot.count, inc(i),
if(hotspot[get(i)].hogetype == 1,
copy(lr.vr_backup_visible, lr.visible);
set(hotspot[get(i)].visible, false);
);
);
</action>
<action name=”show_hotspot_hoge”>
for(set(i,0), i LT hotspot.count, inc(i),
copy(lr, hotspot[get(i)]);
if(lr.vr_backup_visible,
copy(lr.visible, lr.vr_backup_visible);
delete(lr.vr_backup_visible);
);
);
</action>
–>
<scene name=”scene_R0010239-2″ title=”シーン2” onstart=”” thumburl=”panos/R0010239-2.tiles/thumb.jpg” lat=”” lng=”” heading=””>

<hotspot name=”spot0″ url=”icon_architecture.png” ath=”-90″ atv=”-60″ />
<hotspot name=”spot1″ url=”icon_architecture.png” ath=”-30″ atv=”14″ scale=”0.2″ vr=”true” />
<hotspot name=”spot2″ url=”icon_architecture.png” ath=”0″ atv=”-30″ scale=”0.2″ rotate=”30″ />
<hotspot name=”spot3″ url=”icon_architecture.png” ath=”30″ atv=”20″ scale=”0.2″ rotate=”30″ alpha=”0.5″ />

<layer name=”screenimg1″ url=”facade-of-gifu-city-chuo-library-_29593657641_o.jpg” x=”50″ y=”50″ scale=”1.0″ />
<layer name=”screenimg2″ url=”study-space-of-gifu-city-chuo-library-_28979695803_o.jpg” x=”80%” y=”75%” scale=”0.8″ />

<view hlookat=”0.0″ vlookat=”0.0″ fovtype=”MFOV” fov=”120″ maxpixelzoom=”2.0″ fovmin=”70″ fovmax=”140″ limitview=”auto” />

<preview url=”panos/R0010239-2.tiles/preview.jpg” />

<image prealign=”0|45.0|0″>
<cube url=”panos/R0010239-2.tiles/pano_%s.jpg” />
</image>

</scene>

<scene name=”scene_R0010234-2″ title=”シーン3” onstart=”” thumburl=”panos/R0010234-2.tiles/thumb.jpg” lat=”” lng=”” heading=””>

<view hlookat=”292.5″ vlookat=”0.0″ fovtype=”MFOV” fov=”120″ maxpixelzoom=”2.0″ fovmin=”70″ fovmax=”140″ limitview=”auto” />

<preview url=”panos/R0010234-2.tiles/preview.jpg” />

<image prealign=”0|292.5|0″>
<cube url=”panos/R0010234-2.tiles/pano_%s.jpg” />
</image>

</scene>

<scene name=”scene_R0010237-2″ title=”シーン1” onstart=”” thumburl=”panos/R0010237-2.tiles/thumb.jpg” lat=”” lng=”” heading=””>

<view hlookat=”60.0″ vlookat=”-15.0″ fovtype=”MFOV” fov=”120″ maxpixelzoom=”2.0″ fovmin=”70″ fovmax=”140″ limitview=”auto” />

<preview url=”panos/R0010237-2.tiles/preview.jpg” />

<image prealign=”0|0.0|0″>
<cube url=”panos/R0010237-2.tiles/pano_%s.jpg” />
</image>

</scene>

</krpano>

plugins/webvr.xml

<krpano>
<!–
webvr.xml
– krpano 1.20.1

https://krpano.com/plugins/webvr/
–>

<!– load the WebVR plugin and assign it to a global ‘webvr’ variable –>
<plugin name=”webvr” devices=”html5″ keep=”true”
url=”webvr.js”
mobilevr_support=”true”
mobilevr_touch_support=”true”
mobilevr_fake_support=”true”
mobilevr_profile.normal=”90|60|42|0|0|0″
mobilevr_profile.mobile=”80|60|42|35|0.441|0.156″
mobilevr_wakelock=”true”
fullscreen_mirroring=”false”
mouse_pointerlock=”true”
vr_cursor_onover=”if(handcursor, tween(hotspot[vr_cursor].scale,0.4,0.1); vr_auto_click(get(vr_timeout)); );”
vr_cursor_onout=”tween(hotspot[vr_cursor].scale,0.3,0.1);”
onavailable=”webvr_onavailable();”
onunavailable=””
onunknowndevice=”webvr_onunknowndevice();”
onvrcontrollers=”webvr_onvrcontrollers();”
onentervr=”webvr_onentervr();”
onexitvr=”webvr_onexitvr();”
/>

<!– the VR cursor hotspot –>
<style name=”vr_cursor_style”
url=”webvr_vrcursor.png”
visible=”false”
enabled=”false”
distorted=”true”
crop=”0|0|80|80″
scale=”0.3″
depth=”120″
/>

<action name=”webvr_load_vr_cursor_hs” scope=”local”>
addhotspot(‘vr_cursor’, hs);
hs.loadstyle(vr_cursor_style);
set(hs.keep, true);
set(webvr.vr_cursor, ‘hotspot[vr_cursor]’);
</action>

<action name=”webvr_load_vr_controller_hs” scope=”private:VRCONTROLLERS” args=”controllerstyle”>
removehotspot(‘vr_controller_l’);
removehotspot(‘vr_controller_r’);
addhotspot(‘vr_controller_l’, vr_ctrl_l);
addhotspot(‘vr_controller_r’, vr_ctrl_r);
set(vr_ctrl_l.keep, true);
set(vr_ctrl_r.keep, true);
vr_ctrl_l.loadstyle(calc(controllerstyle ? controllerstyle : ‘vrcontroller_light_and_point’));
vr_ctrl_r.loadstyle(calc(controllerstyle ? controllerstyle : ‘vrcontroller_light_and_point’));

<!– optional: vibrate the controllers on hovering:
vr_ctrl_l.addevent(‘onover’, pulse(1.0, 0.25) );
vr_ctrl_r.addevent(‘onover’, pulse(1.0, 0.25) ); –>
vr_ctrl_l.addevent(‘onvrcontrollerbutton’, ‘if(vrbuttonindex == 3 AND vrbuttonstate == “up”, vrsetup_open(); );’ );
vr_ctrl_r.addevent(‘onvrcontrollerbutton’, ‘if(vrbuttonindex == 3 AND vrbuttonstate == “up”, vrsetup_open(); );’ );

set(global.webvr.vr_controller, ‘vr_controller_l,vr_controller_r’);
set(global.have_vr_controllers, true);

if(global.webvr.isvrbrowser AND global.webvr.vrcontrollers[0].buttons.length LE 2,
<!– when there are only two buttons on the VR controller (e.g. Oculus Go) use an extra hotspot for the VR-setup –>
addhotspot(‘webvr_vrsetup’, vr_setup_hs);
vr_setup_hs.loadstyle(‘webvr_button_style’);
set(vr_setup_hs, keep=true, ath=0, atv=90, depth=160, zorder=999, torigin=view, html=’VR SETUP’, oversampling=3, scale=0.2, onclick=’vrsetup_open();’, onloaded=’renderloop( copy(ath,view.hlookat); );’);
);
</action>

<action name=”webvr_onvrcontrollers” scope=”private:VRCONTROLLERS”>
if(!global.have_vr_controllers, webvr_load_vr_controller_hs(); );
</action>

<style name=”vrcontroller_laser”
url=”webvr_laser.png”
distorted=”true”
enabled=”false”
visible=”false”
width=”0.5″ height=”1000″ edge=”bottom” oref=”1″ oy=”0″
torigin=”world” tx=”0″ ty=”0″ tz=”0″ depth=”0″
zorder=”99999″
depthbuffer=”true”
onloaded=”asyncloop(loaded,
calc(height, (target AND target.hitd GT 0 ? target.hitd : 1000) / display.hotspotworldscale);
);”
/>

<style name=”vrcontroller_light_and_point”
url=”webvr_light.png”
distorted=”true”
enabled=”false”
visible=”false”
width=”0.5″ height=”18″ edge=”bottom” oref=”1″ oy=”0″
torigin=”world” tx=”0″ ty=”0″ tz=”0″ depth=”0″
zorder=”99999″
depthbuffer=”true”
onloaded=”vrcontroller_target_point();”
/>

<style name=”vrcontroller_handcursor_and_point”
url=”webvr_handcursor.png”
distorted=”true”
enabled=”false”
visible=”false”
width=”10″ height=”10″ edge=”center” oref=”1″ oy=”-1″
torigin=”world” tx=”0″ ty=”0″ tz=”0″ depth=”0″
zorder=”99999″
depthbuffer=”true”
onloaded=”vrcontroller_target_point();”
/>

<action name=”vrcontroller_target_point” scope=”localonly”>
addhotspot(auto, hs);
set(hs, keep=true, type=text, bgcolor=0xFFFFFF, bgalpha=1.0, width=10, height=10, bgroundedge=5, bgborder=’1 0x000000 1.0′, oversampling=2,
scale=0.4, torigin=world, depth=0, distorted=false, zoom=true, zorder=99998, enabled=false
);
renderloop(
if(!caller.loaded,
removehotspot(get(hs.name));
stoprenderloop();
,
if(global.display.havedepthmap,
<!– use the laser for depthmap panos –>
removehotspot(get(hs.name));
stoprenderloop();
webvr_load_vr_controller_hs(‘vrcontroller_laser’);
,
calc(hs.bgcolor, caller.pressed ? 0x049AFF : (caller.hovering ? 0x00FF00 : 0xFFFFFF));
calc(distance, (caller.target AND caller.target.hitd GT 0 ? caller.target.hitd : 1000));
calc(hs.scale, 0.4 * (distance GT 1000 ? distance / 1000 : (distance LT 200 ? 0.25 : (0.25 + (distance – 200)/800 * 0.75))));
calc(hs.tx, caller.tx + caller.dx * distance);
calc(hs.ty, caller.ty + caller.dy * distance);
calc(hs.tz, caller.tz + caller.dz * distance);
);
);
);
</action>

<!– vr_auto_click() – call this action in the onover event of a
hotspot to trigger automatically a click after some time. –>
<action name=”vr_auto_click” scope=”local” args=”vr_aclk_timeout”>
if(webvr.isenabled,
if(vr_aclk_timeout == null, set(vr_aclk_timeout, 2000));
copy(vr_aclk_t1, timertick);
set(vr_aclk_waiting, true);
copy(webvr.vr_aclk_hotspot, caller.name);
set(hotspot[vr_cursor].crop,’0|0|80|80′);

asyncloop(vr_aclk_waiting AND webvr.vr_aclk_hotspot == caller.name,
sub(dt, timertick, vr_aclk_t1);

if(!caller.hovering,
set(vr_aclk_waiting, false);
set(hotspot[vr_cursor].crop,’0|0|80|80′);
,
div(f, dt, vr_aclk_timeout);
mul(f, 16);
roundval(f);
Math.min(f, 16);
mul(f, 80);

txtadd(hotspot[vr_cursor].crop,get(f),’|0|80|80′);

<!– wait another 100ms delay after finishing the animation before doing the click –>
sub(dt, 100);
if(dt GT vr_aclk_timeout,
set(vr_aclk_waiting,false);
set(hotspot[vr_cursor].crop,’0|0|80|80′);
<!– call onclick –>
callwith(caller, scope(global, ondown();onup();onclick(); ); );
);
);
);
);
</action>

<!– by pressing SPACE the headset could be re-centered –>
<events name=”webvr_events” devices=”html5″ keep=”true”
onmousedown=”if(webvr AND webvr.isenabled, webvr_showbuttons() );”
/>

<!– when WebVR support is available show an EnterVR button –>
<action name=”webvr_onavailable”>
webvr.loadsettings();
if(layer[webvr_enterbutton], delayedcall(0.5, tween(layer[webvr_enterbutton].alpha,1.0); ); );
</action>

<action name=”webvr_onunknowndevice”>
if(webvr.isfake AND device.desktop AND webvr.havesettings == false,
<!– set the ‘no distortion’ headset for fake desktop usage –>
set(webvr.mobilevr_lens_overlap, 1.0);
set(webvr.mobilevr_lens_fov, 96.0);
set(webvr.mobilevr_lens_dist, 0.0);
set(webvr.mobilevr_lens_dist2, ‘1|0|0|0’);
set(webvr.mobilevr_lens_ca, 0.0);
set(webvr.mobilevr_lens_vign, 100);
);
</action>

<action name=”webvr_onentervr”>
if(layer[webvr_enterbutton], tween(layer[webvr_enterbutton].alpha,0,0); );

webvr_showbuttons();
webvr_hide_all_non_vr_layers();
webvr_hide_all_non_vr_hotspots();

if(webvr.isfake, webvr_show_fakemode_info(true); );

webvr_load_vr_cursor_hs();
</action>

<action name=”webvr_onexitvr”>
removehotspot(‘vr_cursor’);
removehotspot(‘vr_controller_l’);
removehotspot(‘vr_controller_r’);
set(have_vr_controllers, false);

stopdelayedcall(vr_button_fadeout);

if(layer[webvr_enterbutton], tween(layer[webvr_enterbutton].alpha,1); );
tween(layer[webvr_exitbutton].alpha,0);
tween(layer[webvr_setupbutton].alpha,0);

webvr_show_fakemode_info(false);

webvr_restore_layers();
webvr_restore_hotspots();
</action>

<action name=”webvr_hide_all_non_vr_layers” scope=”local”>
for(set(i,0), i LT layer.count, inc(i),
copy(lr, layer[get(i)]);
if(lr.vr !== true,
copy(lr.vr_backup_visible, lr.visible);
set(lr.visible, false);
);
);
</action>

<action name=”webvr_restore_layers” scope=”local”>
for(set(i,0), i LT layer.count, inc(i),
copy(lr, layer[get(i)]);
if(lr.vr_backup_visible,
copy(lr.visible, lr.vr_backup_visible);
delete(lr.vr_backup_visible);
);
);
</action>

<!– add –>
<action name=”webvr_hide_all_non_vr_hotspots”>
for(set(i,0), i LT hotspot.count, inc(i),
copy(lr, hotspot[get(i)]);
if(lr.vr !== true,
copy(lr.vr_backup_visible, lr.visible);
set(lr.visible, false);
);
);
</action>

<!– add –>
<action name=”webvr_restore_hotspots”>
for(set(i,0), i LT hotspot.count, inc(i),
copy(lr, hotspot[get(i)]);
if(lr.vr_backup_visible,
copy(lr.visible, lr.vr_backup_visible);
delete(lr.vr_backup_visible);
);
);
</action>

<action name=”webvr_show_fakemode_info” scope=”local” args=”show”>
if(show == true,
addlayer(webvr_fakemode_info);
set(layer[webvr_fakemode_info],
type=’text’,
keep=true,
align=’bottom’,
y=80,
bg=false,
css=’color:#FFFFFF;text-align:center;’,
html='[i][u]Simulated WebVR Mode![/u][br]For real WebVR with headset tracking use a [a href=”http://webvr.info” target=”_blank” style=”color:#FFFFFF;”]WebVR-capable[/a] browser or a mobile device and a VR headset.[/i]’
);
,
removelayer(webvr_fakemode_info);
);
</action>

<!– ensure the same scaling on mobiles (regardless if mobilescale is 0.5 or 1.0) –>
<krpano webvr_setup_scale=”calc:(1.0 + 1.0*(device.mobile AND stagescale LT 1.0)) / (1.0 + 1.0*device.mobile)”
webvr_button_scale.normal=”1.0″
webvr_button_scale.mobile=”1.6″
/>

<!– the EnterVR/ExitVR and SetupVR buttons –>
<style name=”webvr_button_style”
type=”text”
bgcolor=”0x000000″
bgalpha=”0.5″
bgroundedge=”0″
css=”calc:’color:#FFFFFF;font-size:’ + 20*webvr_setup_scale*webvr_button_scale + ‘px;'”
padding=”calc:6*webvr_setup_scale*webvr_button_scale + ‘ ‘ + 10*webvr_setup_scale*webvr_button_scale”
/>

<layer name=”webvr_enterbutton” keep=”true” vr=”true”
style=”webvr_button_style”
html=”Enter VR”
align=”top” y=”24″
autoalpha=”true” alpha=”0.0″
onclick=”webvr.enterVR();”
/>

<layer name=”webvr_exitbutton” keep=”true” vr=”true”
style=”webvr_button_style”
html=”Exit VR”
align=”top” y=”24″
autoalpha=”true” alpha=”0.0″
onclick=”webvr.exitVR();”
/>

<layer name=”webvr_setupbutton” keep=”true” vr=”true”
style=”webvr_button_style”
html=”VR Setup”
align=”bottom” y=”24″
autoalpha=”true” alpha=”0.0″
onclick=”vrsetup_open();”
/>

<action name=”webvr_showbuttons”>
stopdelayedcall(vr_button_fadeout);
tween(layer[webvr_exitbutton].alpha|layer[webvr_setupbutton].alpha, 1.0|1.0, 0.25);
delayedcall(vr_button_fadeout, 3.0, tween(layer[webvr_exitbutton].alpha|layer[webvr_setupbutton].alpha, 0.0|0.0, 1.0); );
</action>

<!– VR SETUP –>

<mobilevr_presets>
<headset name=”cbv1″ caption=”Cardboard V1″ profile=”80|60|42|35|0.441|0.156″ />
<headset name=”cbv2″ caption=”Cardboard V2″ profile=”120|64|39|35|0.34|0.55″ />
<headset name=”dydm” caption=”Daydream” profile=”104|60|41|35|0.42|0.51″ />
<headset name=”nodt” caption=”No Distortion” profile=”90|60|42|0|0|0″ />
</mobilevr_presets>

<action name=”vrsetup_open”>
if(!vrsetup_open_js, vrsetup_init(); );
vrsetup_open_js();
</action>

<action name=”vrsetup_init” type=”Javascript”><![CDATA[

var webvr = krpano.webvr;
var padding = 20;

function vrsetup_dlg_create(type)
{
var dlg = {type:type, bg:null, y:0, scale:1, elements:[]};

if (type == ‘layer’)
{
dlg.bg = krpano.addlayer();
dlg.bg.keep = true;
dlg.bg.type = ‘container’;
dlg.bg.align = ‘center’;
}
else // ‘hotspot’
{
dlg.scale = 0.15;
dlg.bg = krpano.addhotspot();
dlg.bg.keep = true;
dlg.bg.type = ‘text’;
dlg.bg.distorted = true;
dlg.bg.ath = krpano.view.hlookat;
dlg.bg.atv = 0;
dlg.bg.depth = 150;
dlg.bg.torigin = ‘world’;
dlg.bg.tx = krpano.view.tx;
dlg.bg.ty = krpano.view.ty;
dlg.bg.tz = krpano.view.tz;
}

dlg.bg.bgcolor = 0x000000;
dlg.bg.bgalpha = 0.5;
dlg.bg.bgcapture = true;
dlg.bg.handcursor = false;
dlg.bg.capture = false;
dlg.bg.zorder = 100;
dlg.bg.visible = false;

dlg.y = 0;

return dlg;
}

function vrsetup_dlg_addline(dlg, linetext, customcss, onclick)
{
var txt;

if (dlg.type == ‘layer’)
{
txt = krpano.addlayer();
txt.keep = true;
txt.type = ‘text’;
txt.align = ‘center’;
txt.zorder = 101;
}
else // ‘hotspot’
{
txt = krpano.addhotspot();
txt.keep = true;
txt.type = ‘text’;
txt.distorted = true;
txt.zorder = 101;
txt.ath = dlg.bg.ath;
txt.atv = dlg.bg.atv;
txt.depth = dlg.bg.depth – 1;
txt.oversampling = 2;
txt.scale = dlg.scale;
txt.torigin = dlg.bg.torigin;
txt.tx = dlg.bg.tx;
txt.ty = dlg.bg.ty;
txt.tz = dlg.bg.tz;
}

txt.onautosized = function()
{
txt.havesize = true;
}

txt.edge = ‘top’;
txt.visible = false;
txt.bg = false;
txt.html = “” + linetext;
txt.css = ‘font-size:32px;font-weight:bold;color:#FFFFFF; line-height:90%;’ + (customcss || ”);

if (onclick)
{
txt.onclick = onclick;
}
else
{
txt.enabled = false;
}

dlg.elements.push( txt );

return txt;
}

function vrsetup_dlg_addctrl(dlg, changedelay, callback)
{
var txt = vrsetup_dlg_addline(dlg, callback(0) );

var inc;
var dec;

if(dlg.type == ‘layer’)
{
inc = krpano.addlayer();
inc.keep = true;
inc.type = ‘text’;
inc.align = ‘center’;
inc.zorder = 101;

dec = krpano.addlayer();
dec.keep = true;
dec.type = ‘text’;
dec.align = ‘center’;
dec.zorder = 101;
}
else // ‘hotspot’
{
inc = krpano.addhotspot();
inc.keep = true;
inc.type = ‘text’;
inc.distorted = true;
inc.zorder = 101;
inc.ath = dlg.bg.ath;
inc.atv = dlg.bg.atv;
inc.depth = dlg.bg.depth – 1;
inc.oversampling = 2;
inc.scale = dlg.scale;
inc.torigin = dlg.bg.torigin;
inc.tx = dlg.bg.tx;
inc.ty = dlg.bg.ty;
inc.tz = dlg.bg.tz;

dec = krpano.addhotspot();
dec.keep = true;
dec.type = ‘text’;
dec.distorted = true;
dec.zorder = 101;
dec.ath = dlg.bg.ath;
dec.atv = dlg.bg.atv;
dec.depth = dlg.bg.depth – 1;
dec.oversampling = 2;
dec.scale = dlg.scale;
dec.torigin = dlg.bg.torigin;
dec.tx = dlg.bg.tx;
dec.ty = dlg.bg.ty;
dec.tz = dlg.bg.tz;
}

inc.edge = ‘top’;
inc.visible = false;
inc.bg = false;
inc.html = ‘>’;
inc.css = ‘font-size:32px;font-weight:bold;color:#FFFFFF; line-height:90%;’;
inc.padding = ‘0 10’;

dec.edge = ‘top’;
dec.visible = false;
dec.bg = false;
dec.html = ‘<’;
dec.css = ‘font-size:32px;font-weight:bold;color:#FFFFFF; line-height:90%;’;
dec.padding = ‘0 10’;

inc.vr_timeout = changedelay * 1000;
dec.vr_timeout = changedelay * 1000;
inc.ondown = function(){ txt.html = “”+callback(+1); inc.enabled = false; setTimeout(function(){ inc.enabled = true; },0); };
dec.ondown = function(){ txt.html = “”+callback(-1); dec.enabled = false; setTimeout(function(){ dec.enabled = true; },0); };

txt.ctrlchilds = [inc,dec];

txt.updateControl = function()
{
txt.html = callback(0);
}

return txt;
}

function vrsetup_dlg_addspace(dlg, customspace)
{
dlg.elements.push(customspace|| padding);
}

function vrsetup_dlg_finish(dlg)
{
var i, w=0, h=0;
var waitforsizes=false;

for (i=0; i < dlg.elements.length; i++)
{
var e = dlg.elements[i];
if ( isNaN(e) )
{
if ( e.havesize )
{
w = Math.max( w, e.width * 1);
h += e.height * 1;
}
else
{
waitforsizes = true;
break;
}
}
else
{
h += e;
}
}

if (waitforsizes)
{
setTimeout( function(){ vrsetup_dlg_finish(dlg); }, 16 );
}
else
{
var y = 0;

dlg.bg.width = Math.ceil((w + padding*2)*dlg.scale);
dlg.bg.height = Math.ceil((h + padding*2)*dlg.scale);

for (i=0; i < dlg.elements.length; i++)
{
var e = dlg.elements[i];
if ( isNaN(e) )
{
e.oy = Math.round((-h/2 + y) * dlg.scale);
e.visible = true;

y += e.height * 1;

if (e.ctrlchilds )
{
for (var j=0; j < e.ctrlchilds.length; j++)
{
var sube = e.ctrlchilds[j];
sube.ox = Math.round(((j&1)-0.5) * (-w) * dlg.scale);
sube.oy = e.oy;
sube.visible = true;
}
}
}
else
{
y += e;
}
}

dlg.bg.visible = true;
}
}

function vrsetup_dlg_remove(dlg)
{
var removefu = dlg.type == ‘layer’ ? krpano.removelayer : krpano.removehotspot;

var i,j;
for (i=0; i < dlg.elements.length; i++)
{
var e = dlg.elements[i];
if ( isNaN(e) )
{
if (e.ctrlchilds )
{
for (j=0; j < e.ctrlchilds.length; j++)
{
var sube = e.ctrlchilds[j];
removefu(sube.name);
}
}

removefu(e.name);
}
}

removefu(dlg.bg.name);
}

function vrsetup_webvr_dialog()
{
// WebVR API rendering
var dlg = vrsetup_dlg_create(‘hotspot’);
vrsetup_dlg_addline(dlg, ‘WebVR Setup’);
vrsetup_dlg_addspace(dlg);

vrsetup_dlg_addline(dlg, ‘Oversampling:’, ‘font-size:16px;’)
var ctrl_ss = vrsetup_dlg_addctrl(dlg, 1.0, function(change)
{
var p = webvr.oversampling;

if (change < 0) { p = Math.max(0.2, Number(p) – 0.1); webvr.oversampling = p; } else
if (change > 0) { p = Math.min(4.0, Number(p) + 0.1); webvr.oversampling = p; }

krpano.actions.delayedcall(0, function()
{
var gl = krpano.webGL.context;
var gl_width = gl.drawingBufferWidth | 0;
var gl_height = gl.drawingBufferHeight | 0;

renderres.html = gl_width + “x” + gl_height;
});

return p.toFixed(1);
});
vrsetup_dlg_addspace(dlg,8);
vrsetup_dlg_addline(dlg, ‘Rendering Resolution:’, ‘font-size:16px;’);
var renderres = vrsetup_dlg_addline(dlg, ”);
vrsetup_dlg_addspace(dlg);
vrsetup_dlg_addline(dlg, ‘CLOSE’, ”, vrsetup_close);
vrsetup_dlg_finish(dlg);

return dlg;
}

function vrsetup_mobilevr_dialog()
{
// MobileVR / Cardboard rendering
var dlg = vrsetup_dlg_create(0 ? ‘hotspot’ : ‘layer’);
vrsetup_dlg_addline(dlg, ‘MobileVR SETUP’);
vrsetup_dlg_addspace(dlg);
vrsetup_dlg_addline(dlg, ‘Screensize (inch):’, ‘font-size:16px;’)
vrsetup_dlg_addctrl(dlg, 1.0, function(change){ var ss = Number(webvr.mobilevr_screensize); if (isNaN(ss)) ss = 5.0; if (change < 0) { ss = Math.max(4.0, ss – 0.1); webvr.mobilevr_screensize = ss; } else if (change > 0) { ss = Math.min(10.0, ss + 0.1); webvr.mobilevr_screensize = ss; } return ss.toFixed(1); });
vrsetup_dlg_addspace(dlg);
vrsetup_dlg_addline(dlg, ‘VR Headset Preset:’, ‘font-size:16px;’)
var ctrl_ps = vrsetup_dlg_addctrl(dlg, 1.0, function(change)
{
var preset_index = -1;
var i;

var profile = webvr.mobilevr_profile;
var presets = krpano.get(“mobilevr_presets.headset”);
if (presets)
{
presets = presets.getArray();

for (i=0; i < presets.length; i++)
{
if ( profile == presets[i].profile )
{
preset_index = i;
break;
}
}

if (change < 0)
{
preset_index–;
if (preset_index < 0)
preset_index = presets.length – 1;

webvr.mobilevr_profile = presets[preset_index].profile;
}
else if (change > 0)
{
preset_index++;
if (preset_index >= presets.length)
preset_index = 0;

webvr.mobilevr_profile = presets[preset_index].profile;
}
}

if (preset_index >= 0)
{
return presets[preset_index].caption;
}

return ‘Custom’;
});
vrsetup_dlg_addspace(dlg);
vrsetup_dlg_addline(dlg, ‘Customize Headset’, ‘font-size:25px;’, function()
{
vrsetup_dlg_remove(dlg);
dlg=null;

vrsetup_dialog = vrsetup_mobilevr_interactive_dialog();

});
vrsetup_dlg_addline(dlg, ‘(Interactive Adjustment in VR)’, ‘font-size:12px;’);
vrsetup_dlg_addspace(dlg);
vrsetup_dlg_addline(dlg, ‘CLOSE’, ”, vrsetup_close);
vrsetup_dlg_finish(dlg);

return dlg;
}

function vrsetup_mobilevr_interactive_dialog()
{
// MobileVR / Cardboard rendering
var ctrl_preset, ctrl_fov, ctrl_ild, ctrl_stl, ctrl_ttl, ctrl_k1, ctrl_k2, ctrl_os;

var dlg = vrsetup_dlg_create(‘hotspot’);
vrsetup_dlg_addline(dlg, ‘MobileVR SETUP’);
vrsetup_dlg_addspace(dlg);
vrsetup_dlg_addline(dlg, ‘Preset:’, ‘font-size:16px;’)

ctrl_preset = vrsetup_dlg_addctrl(dlg, 1.0, function(change)
{
var preset_index = -1;
var i;

var profile = webvr.mobilevr_profile;
var presets = krpano.get(“mobilevr_presets.headset”);
if (presets)
{
presets = presets.getArray();

for (i=0; i < presets.length; i++)
{
if ( profile == presets[i].profile )
{
preset_index = i;
break;
}
}

if (change < 0)
{
preset_index–;
if (preset_index < 0)
preset_index = presets.length – 1;

webvr.mobilevr_profile = presets[preset_index].profile;
}
else if (change > 0)
{
preset_index++;
if (preset_index >= presets.length)
preset_index = 0;

webvr.mobilevr_profile = presets[preset_index].profile;
}

if (change != 0)
{
ctrl_fov.updateControl();
ctrl_ild.updateControl();
ctrl_stl.updateControl();
if (ctrl_ttl) ctrl_ttl.updateControl();
ctrl_k1.updateControl();
ctrl_k2.updateControl();
}
}

if (preset_index >= 0)
{
return presets[preset_index].caption;
}

return ‘Custom’;
});

vrsetup_dlg_addspace(dlg);
vrsetup_dlg_addline(dlg, ‘Lens-Field-of-View:’, ‘font-size:16px;’);
ctrl_fov = vrsetup_dlg_addctrl(dlg, 0.25, function(change){ var p = webvr.mobilevr_profile.split(“|”); if (change < 0) { p[0] = Number(p[0]) – 1.0; webvr.mobilevr_profile = p.join(“|”); } else if (change > 0) { p[0] = Number(p[0]) + 1.0; webvr.mobilevr_profile = p.join(“|”); } if (change != 0) ctrl_preset.updateControl(); return Number(p[0]).toFixed(0); });
vrsetup_dlg_addspace(dlg, 8);
vrsetup_dlg_addline(dlg, ‘Inter-Lens-Distance (mm):’, ‘font-size:16px;’);
ctrl_ild = vrsetup_dlg_addctrl(dlg, 0.25, function(change){ var p = webvr.mobilevr_profile.split(“|”); if (change < 0) { p[1] = Number(p[1]) – 1.0; webvr.mobilevr_profile = p.join(“|”); } else if (change > 0) { p[1] = Number(p[1]) + 1.0; webvr.mobilevr_profile = p.join(“|”); } if (change != 0) ctrl_preset.updateControl(); return Number(p[1]).toFixed(0); });
vrsetup_dlg_addspace(dlg, 8);
vrsetup_dlg_addline(dlg, ‘Screen-to-Lens-Distance (mm):’, ‘font-size:16px;’);
ctrl_stl = vrsetup_dlg_addctrl(dlg, 0.25, function(change){ var p = webvr.mobilevr_profile.split(“|”); if (change < 0) { p[2] = Number(p[2]) – 1.0; webvr.mobilevr_profile = p.join(“|”); } else if (change > 0) { p[2] = Number(p[2]) + 1.0; webvr.mobilevr_profile = p.join(“|”); } if (change != 0) ctrl_preset.updateControl(); return Number(p[2]).toFixed(0); });
vrsetup_dlg_addspace(dlg, 8);
if (!webvr.isfake)
{
vrsetup_dlg_addline(dlg, ‘Tray-to-Lens-Center-Distance: (mm):’, ‘font-size:16px;’);
ctrl_ttl = vrsetup_dlg_addctrl(dlg, 0.25, function(change){ var p = webvr.mobilevr_profile.split(“|”); if (change < 0) { p[3] = Number(p[3]) – 1.0; webvr.mobilevr_profile = p.join(“|”); } else if (change > 0) { p[3] = Number(p[3]) + 1.0; webvr.mobilevr_profile = p.join(“|”); } if (change != 0) ctrl_preset.updateControl(); return Number(p[3]).toFixed(0); });
vrsetup_dlg_addspace(dlg, 8);
}
vrsetup_dlg_addline(dlg, ‘Lens-Distortion Coefficients:’, ‘font-size:16px;’);
ctrl_k1 = vrsetup_dlg_addctrl(dlg, 0.1, function(change){ var p = webvr.mobilevr_profile.split(“|”); if (change < 0) { p[4] = Number(p[4]) – 0.01; webvr.mobilevr_profile = p.join(“|”); } else if (change > 0) { p[4] = Number(p[4]) + 0.01; webvr.mobilevr_profile = p.join(“|”); } if (change != 0) ctrl_preset.updateControl(); return Number(p[4]).toFixed(3); });
ctrl_k2 = vrsetup_dlg_addctrl(dlg, 0.1, function(change){ var p = webvr.mobilevr_profile.split(“|”); if (change < 0) { p[5] = Number(p[5]) – 0.01; webvr.mobilevr_profile = p.join(“|”); } else if (change > 0) { p[5] = Number(p[5]) + 0.01; webvr.mobilevr_profile = p.join(“|”); } if (change != 0) ctrl_preset.updateControl(); return Number(p[5]).toFixed(3); });
vrsetup_dlg_addspace(dlg);
vrsetup_dlg_addline(dlg, ‘Oversampling:’, ‘font-size:16px;’);
ctrl_os = vrsetup_dlg_addctrl(dlg, 0.25, function(change){ var p = webvr.oversampling; if (change < 0) { p = Math.max(0.2, Number(p) – 0.1); webvr.oversampling = p; } else if (change > 0) { p = Math.min(4.0, Number(p) + 0.1); webvr.oversampling = p; } return p.toFixed(1); });
vrsetup_dlg_addspace(dlg);
vrsetup_dlg_addline(dlg, ‘CLOSE’, ”, vrsetup_close);
vrsetup_dlg_finish(dlg);

return dlg;
}

var vrsetup_dialog = null;
var vrsetup_events = null;

function vrsetup_close()
{
if (vrsetup_dialog)
{
webvr.savesettings();

vrsetup_dlg_remove(vrsetup_dialog);
vrsetup_dialog = null;
}

if (vrsetup_events)
{
krpano.events.removeItem(vrsetup_events.name);
vrsetup_events = null;
}
}

krpano.vrsetup_close = function()
{
vrsetup_close();
}

krpano.vrsetup_open_js = function()
{
if (vrsetup_dialog != null)
{
// already open…
return;
}

if (webvr.iswebvr)
{
vrsetup_dialog = vrsetup_webvr_dialog();
}
else
{
vrsetup_dialog = vrsetup_mobilevr_dialog();
}

vrsetup_events = krpano.events.createItem(“auto”);
vrsetup_events.keep = true;

vrsetup_events.webvr_onexitvr = function()
{
vrsetup_close();
}
}

]]></action>

<!– A list of devices and their screensize –>
<mobilevr_device_database>
<device name=”iPhone 5/5S/SE” screen=”320x568x2″ size=”4.0″ bevel=”3″ />
<device name=”iPhone 6/6S/7/8″ screen=”375x667x2″ size=”4.7″ />
<device name=”iPhone 6/6S/7/8 Plus” screen=”414×736″ size=”5.5″ />
<device name=”iPhone 6/6S/7/8 Plus (zoomed)” screen=”375x667x3″ size=”5.5″ />
<device name=”iPhone X/XS/11Pro” screen=”375x812x3″ size=”5.85|5.33″ />
<device name=”iPhone XS/11Pro Max” screen=”414x896x3″ size=”6.46|5.95″ />
<device name=”iPhone XR/11″ screen=”414x896x2″ size=”6.06|5.58″ />
<device name=”Samsung S6″ ua=”sm-g930″ size=”5.1″ />
<device name=”Samsung S6 Edge” ua=”sm-g925″ size=”5.1″ />
<device name=”Samsung S6 Edge Plus” ua=”sm-g928″ size=”5.7″ />
<device name=”Samsung S7″ ua=”sm-g930″ size=”5.1″ />
<device name=”Samsung S7 Edge” ua=”sm-g935″ size=”5.5″ />
<device name=”Samsung S8″ ua=”sm-g950″ size=”5.8″ />
<device name=”Samsung S8+” ua=”sm-g955″ size=”6.2″ />
<device name=”Samsung S9″ ua=”sm-g960″ size=”5.8″ />
<device name=”Samsung S9+” ua=”sm-g965″ size=”6.2″ />
<device name=”Samsung S10e” ua=”sm-g970″ size=”5.8″ />
<device name=”Samsung S10″ ua=”sm-g973″ size=”6.1″ />
<device name=”Samsung S10+” ua=”sm-g975″ size=”6.4″ />
<device name=”Samsung S10 5G” ua=”sm-g977″ size=”6.7″ />
<device name=”Samsung Note 7″ ua=”sm-n930″ size=”5.7″ />
<device name=”Samsung Note 8″ ua=”sm-n950″ size=”6.3″ />
<device name=”Samsung Note 9″ ua=”sm-n960″ size=”6.4″ />
<device name=”Samsung Note 10″ ua=”sm-n970″ size=”6.3″ />
<device name=”Samsung Note 10 5G” ua=”sm-n971″ size=”6.3″ />
<device name=”Samsung Note 10+” ua=”sm-n975″ size=”6.8″ />
<device name=”Samsung Note 10+ 5G” ua=”sm-n976″ size=”6.8″ />
<device name=”Huawei P10 Lite” ua=”HUAWEIWAS-TL10″ size=”5.2″ />
<device name=”Huawei P20 Lite” ua=”HUAWEIANE-LX1″ size=”5.84″ />
</mobilevr_device_database>

</krpano>

参考サイト

How to restrict some hotspots appearing when in VR mode – krpano.com Forum

お気に召していただけましたか?

購入によるお支払(ご支援)も承っています。お値段は200円からお好きな価格を。

ご注意:返金のご対応はいたしかねます。

JPY

管理人が読んだおすすめの建築本

    

コメントを残す

BackToTop