Dies ist das Repository meines kleinen Portfolios.
Im Hintergrund läuft eine Planetensimulation, geschrieben in JavaScript und Three.js.
Die zu sehenden Texturen stammen von:
https://www.solarsystemscope.com/textures/
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.
169 lines
3.6 KiB
169 lines
3.6 KiB
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 };
|
|
|