| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 | class VRButton {	static createButton( renderer, options ) {		if ( options ) {			console.error( 'THREE.VRButton: The "options" parameter has been removed. Please set the reference space type via renderer.xr.setReferenceSpaceType() instead.' );		}		const button = document.createElement( 'button' );		function showEnterVR( /*device*/ ) {			let currentSession = null;			async function onSessionStarted( session ) {				session.addEventListener( 'end', onSessionEnded );				await renderer.xr.setSession( session );				button.textContent = 'EXIT VR';				currentSession = session;			}			function onSessionEnded( /*event*/ ) {				currentSession.removeEventListener( 'end', onSessionEnded );				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 ) {					// WebXR's requestReferenceSpace only works if the corresponding feature					// was requested at session creation time. For simplicity, just ask for					// the interesting ones as optional features, but be aware that the					// requestReferenceSpace call will fail if it turns out to be unavailable.					// ('local' is always available for immersive sessions and doesn't need to					// be requested separately.)					const sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor', 'hand-tracking', 'layers' ] };					navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted );				} else {					currentSession.end();				}			};		}		function disableButton() {			button.style.display = '';			button.style.cursor = 'auto';			button.style.left = 'calc(50% - 75px)';			button.style.width = '150px';			button.onmouseenter = null;			button.onmouseleave = null;			button.onclick = null;		}		function showWebXRNotFound() {			disableButton();			button.textContent = 'VR NOT SUPPORTED';		}		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 ) {			button.id = 'VRButton';			button.style.display = 'none';			stylizeElement( button );			navigator.xr.isSessionSupported( 'immersive-vr' ).then( function ( supported ) {				supported ? showEnterVR() : showWebXRNotFound();			} );			return button;		} else {			const message = document.createElement( 'a' );			if ( window.isSecureContext === false ) {				message.href = document.location.href.replace( /^http:/, 'https:' );				message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message			} else {				message.href = 'https://immersiveweb.dev/';				message.innerHTML = 'WEBXR NOT AVAILABLE';			}			message.style.left = 'calc(50% - 90px)';			message.style.width = '180px';			message.style.textDecoration = 'none';			stylizeElement( message );			return message;		}	}}export { VRButton };
 |