You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
239 lines
5.0 KiB
239 lines
5.0 KiB
/**
|
|
* @author mrdoob / http://mrdoob.com
|
|
* @author Mugen87 / https://github.com/Mugen87
|
|
*
|
|
* Based on @tojiro's vr-samples-utils.js
|
|
*/
|
|
|
|
var WEBVR = {
|
|
|
|
createButton: function ( renderer, options ) {
|
|
|
|
if ( options && options.frameOfReferenceType ) {
|
|
|
|
renderer.vr.setFrameOfReferenceType( options.frameOfReferenceType );
|
|
|
|
}
|
|
|
|
function showEnterVR( device ) {
|
|
|
|
button.style.display = '';
|
|
|
|
button.style.cursor = 'pointer';
|
|
button.style.left = 'calc(50% - 50px)';
|
|
button.style.width = '100px';
|
|
|
|
button.textContent = 'ENTER VR';
|
|
|
|
button.onmouseenter = function () { button.style.opacity = '1.0'; };
|
|
button.onmouseleave = function () { button.style.opacity = '0.5'; };
|
|
|
|
button.onclick = function () {
|
|
|
|
device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] );
|
|
|
|
};
|
|
|
|
renderer.vr.setDevice( device );
|
|
|
|
}
|
|
|
|
function showEnterXR( device ) {
|
|
|
|
var currentSession = null;
|
|
|
|
function onSessionStarted( session ) {
|
|
|
|
session.addEventListener( 'end', onSessionEnded );
|
|
|
|
renderer.vr.setSession( session );
|
|
button.textContent = 'EXIT VR';
|
|
|
|
currentSession = session;
|
|
|
|
}
|
|
|
|
function onSessionEnded( event ) {
|
|
|
|
currentSession.removeEventListener( 'end', onSessionEnded );
|
|
|
|
renderer.vr.setSession( null );
|
|
button.textContent = 'ENTER VR';
|
|
|
|
currentSession = null;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
button.style.display = '';
|
|
|
|
button.style.cursor = 'pointer';
|
|
button.style.left = 'calc(50% - 50px)';
|
|
button.style.width = '100px';
|
|
|
|
button.textContent = 'ENTER VR';
|
|
|
|
button.onmouseenter = function () { button.style.opacity = '1.0'; };
|
|
button.onmouseleave = function () { button.style.opacity = '0.5'; };
|
|
|
|
button.onclick = function () {
|
|
|
|
if ( currentSession === null ) {
|
|
|
|
device.requestSession( { immersive: true, exclusive: true /* DEPRECATED */ } ).then( onSessionStarted );
|
|
|
|
} else {
|
|
|
|
currentSession.end();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
renderer.vr.setDevice( device );
|
|
|
|
}
|
|
|
|
function showVRNotFound() {
|
|
|
|
button.style.display = '';
|
|
|
|
button.style.cursor = 'auto';
|
|
button.style.left = 'calc(50% - 75px)';
|
|
button.style.width = '150px';
|
|
|
|
button.textContent = 'VR NOT FOUND';
|
|
|
|
button.onmouseenter = null;
|
|
button.onmouseleave = null;
|
|
|
|
button.onclick = null;
|
|
|
|
renderer.vr.setDevice( null );
|
|
|
|
}
|
|
|
|
function stylizeElement( element ) {
|
|
|
|
element.style.position = 'absolute';
|
|
element.style.bottom = '20px';
|
|
element.style.padding = '12px 6px';
|
|
element.style.border = '1px solid #fff';
|
|
element.style.borderRadius = '4px';
|
|
element.style.background = 'rgba(0,0,0,0.1)';
|
|
element.style.color = '#fff';
|
|
element.style.font = 'normal 13px sans-serif';
|
|
element.style.textAlign = 'center';
|
|
element.style.opacity = '0.5';
|
|
element.style.outline = 'none';
|
|
element.style.zIndex = '999';
|
|
|
|
}
|
|
|
|
if ( 'xr' in navigator ) {
|
|
|
|
var button = document.createElement( 'button' );
|
|
button.style.display = 'none';
|
|
|
|
stylizeElement( button );
|
|
|
|
navigator.xr.requestDevice().then( function ( device ) {
|
|
|
|
device.supportsSession( { immersive: true, exclusive: true /* DEPRECATED */ } )
|
|
.then( function () { showEnterXR( device ); } )
|
|
.catch( showVRNotFound );
|
|
|
|
} ).catch( showVRNotFound );
|
|
|
|
return button;
|
|
|
|
} else if ( 'getVRDisplays' in navigator ) {
|
|
|
|
var button = document.createElement( 'button' );
|
|
button.style.display = 'none';
|
|
|
|
stylizeElement( button );
|
|
|
|
window.addEventListener( 'vrdisplayconnect', function ( event ) {
|
|
|
|
showEnterVR( event.display );
|
|
|
|
}, false );
|
|
|
|
window.addEventListener( 'vrdisplaydisconnect', function ( event ) {
|
|
|
|
showVRNotFound();
|
|
|
|
}, false );
|
|
|
|
window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
|
|
|
|
button.textContent = event.display.isPresenting ? 'EXIT VR' : 'ENTER VR';
|
|
|
|
}, false );
|
|
|
|
window.addEventListener( 'vrdisplayactivate', function ( event ) {
|
|
|
|
event.display.requestPresent( [ { source: renderer.domElement } ] );
|
|
|
|
}, false );
|
|
|
|
navigator.getVRDisplays()
|
|
.then( function ( displays ) {
|
|
|
|
if ( displays.length > 0 ) {
|
|
|
|
showEnterVR( displays[ 0 ] );
|
|
|
|
} else {
|
|
|
|
showVRNotFound();
|
|
|
|
}
|
|
|
|
} ).catch( showVRNotFound );
|
|
|
|
return button;
|
|
|
|
} else {
|
|
|
|
var message = document.createElement( 'a' );
|
|
message.href = 'https://webvr.info';
|
|
message.innerHTML = 'WEBVR NOT SUPPORTED';
|
|
|
|
message.style.left = 'calc(50% - 90px)';
|
|
message.style.width = '180px';
|
|
message.style.textDecoration = 'none';
|
|
|
|
stylizeElement( message );
|
|
|
|
return message;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// DEPRECATED
|
|
|
|
checkAvailability: function () {
|
|
console.warn( 'WEBVR.checkAvailability has been deprecated.' );
|
|
return new Promise( function () {} );
|
|
},
|
|
|
|
getMessageContainer: function () {
|
|
console.warn( 'WEBVR.getMessageContainer has been deprecated.' );
|
|
return document.createElement( 'div' );
|
|
},
|
|
|
|
getButton: function () {
|
|
console.warn( 'WEBVR.getButton has been deprecated.' );
|
|
return document.createElement( 'div' );
|
|
},
|
|
|
|
getVRDisplay: function () {
|
|
console.warn( 'WEBVR.getVRDisplay has been deprecated.' );
|
|
}
|
|
|
|
};
|