three
Version:
JavaScript 3D library
159 lines (99 loc) • 3.42 kB
JavaScript
/**
* @author mrdoob / http://mrdoob.com
* @author Mugen87 / https://github.com/Mugen87
*
* Based on @tojiro's vr-samples-utils.js
*/
var WEBVR = {
createButton: function ( renderer ) {
function showEnterVR( display ) {
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 () {
display.isPresenting ? display.exitPresent() : display.requestPresent( [ { source: renderer.domElement } ] );
};
renderer.vr.setDevice( display );
}
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 = 'transparent';
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 ( '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();
}
} );
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.' );
}
};