forked from pmndrs/react-xr
/
VRButton.js
128 lines (96 loc) · 3.58 KB
/
VRButton.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
class VRButton {
static createButton(renderer, sessionInit = {}) {
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 optionalFeatures = [sessionInit.optionalFeatures, 'local-floor', 'bounded-floor', 'hand-tracking'].flat().filter(Boolean)
navigator.xr.requestSession('immersive-vr', { ...sessionInit, optionalFeatures }).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 }