diff --git a/examples/js/vr/WebVR.js b/examples/js/vr/WebVR.js index a814623fd73015d25af7ce52dbcd63c7bea37a5a..91068539c46397ce1dbc295af9aa16540b01de26 100644 --- a/examples/js/vr/WebVR.js +++ b/examples/js/vr/WebVR.js @@ -24,23 +24,60 @@ var WEBVR = { button.onclick = function () { - if ( 'xr' in navigator ) { + device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] ); - device.requestSession( { exclusive: true } ).then( function ( session ) { + }; + + renderer.vr.setDevice( device ); + + } + + function showEnterXR( device ) { + + var currentSession = null; + + function onSessionStarted( session ) { + + session.addEventListener( 'end', onSessionEnded ); + + renderer.vr.setSession( session ); + button.textContent = 'EXIT XR'; + + currentSession = session; + + } + + function onSessionEnded( event ) { - renderer.vr.setSession( session ); + renderer.vr.setSession( null ); + button.textContent = 'ENTER XR'; - session.addEventListener( 'end', function ( event ) { + currentSession = null; - renderer.vr.setSession( null ); + } + + // + + button.style.display = ''; + + button.style.cursor = 'pointer'; + button.style.left = 'calc(50% - 50px)'; + button.style.width = '100px'; + + button.textContent = 'ENTER XR'; + + button.onmouseenter = function () { button.style.opacity = '1.0'; }; + button.onmouseleave = function () { button.style.opacity = '0.5'; }; + + button.onclick = function () { - } ); + if ( currentSession === null ) { - } ); + device.requestSession( { exclusive: true } ).then( onSessionStarted ); } else { - device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] ); + currentSession.end(); } @@ -101,8 +138,7 @@ var WEBVR = { device.supportsSession( { exclusive: true } ).then( function () { - showEnterVR( device ); - button.textContent = 'ENTER XR'; // TODO + showEnterXR( device ); } ).catch( showVRNotFound );