Skip to content

Commit 1ff53c5

Browse files
mrdoobmrdoob
committed
Examples: Deprecated WebVR.js and added VRButton.js
1 parent 8a67ba5 commit 1ff53c5

15 files changed

+289
-24
lines changed

‎examples/js/vr/WebVR.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ THREE.WEBVR = {
99

1010
createButton: function ( renderer, options ) {
1111

12+
console.warn( 'WEBVR.js has been deprecated. Use VRButton.js instead.' );
13+
1214
if ( options && options.referenceSpaceType ) {
1315

1416
renderer.vr.setReferenceSpaceType( options.referenceSpaceType );

‎examples/jsm/vr/WebVR.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ var WEBVR = {
1111

1212
createButton: function ( renderer, options ) {
1313

14+
console.warn( 'WEBVR.js has been deprecated. Use VRButton.js instead.' );
15+
1416
if ( options && options.referenceSpaceType ) {
1517

1618
renderer.vr.setReferenceSpaceType( options.referenceSpaceType );

‎examples/jsm/webxr/VRButton.js‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
/**
2+
* @author mrdoob / http://mrdoob.com
3+
* @author Mugen87 / https://github.com/Mugen87
4+
*/
5+
6+
var VRButton = {
7+
8+
createButton: function ( renderer, options ) {
9+
10+
if ( options && options.referenceSpaceType ) {
11+
12+
renderer.vr.setReferenceSpaceType( options.referenceSpaceType );
13+
14+
}
15+
16+
function showEnterVR( device ) {
17+
18+
button.style.display = '';
19+
20+
button.style.cursor = 'pointer';
21+
button.style.left = 'calc(50% - 50px)';
22+
button.style.width = '100px';
23+
24+
button.textContent = 'ENTER_VR';
25+
26+
button.onmouseenter = function () {
27+
28+
button.style.opacity = '1.0';
29+
30+
};
31+
32+
button.onmouseleave = function () {
33+
34+
button.style.opacity = '0.5';
35+
36+
};
37+
38+
button.onclick = function () {
39+
40+
device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] );
41+
42+
};
43+
44+
renderer.vr.setDevice( device );
45+
46+
}
47+
48+
function showEnterXR( /*device*/ ) {
49+
50+
var currentSession = null;
51+
52+
function onSessionStarted( session ) {
53+
54+
session.addEventListener( 'end', onSessionEnded );
55+
56+
renderer.vr.setSession( session );
57+
button.textContent = 'EXIT VR';
58+
59+
currentSession = session;
60+
61+
}
62+
63+
function onSessionEnded( /*event*/ ) {
64+
65+
currentSession.removeEventListener( 'end', onSessionEnded );
66+
67+
renderer.vr.setSession( null );
68+
button.textContent = 'ENTER VR';
69+
70+
currentSession = null;
71+
72+
}
73+
74+
//
75+
76+
button.style.display = '';
77+
78+
button.style.cursor = 'pointer';
79+
button.style.left = 'calc(50% - 50px)';
80+
button.style.width = '100px';
81+
82+
button.textContent = 'ENTER VR';
83+
84+
button.onmouseenter = function () {
85+
86+
button.style.opacity = '1.0';
87+
88+
};
89+
90+
button.onmouseleave = function () {
91+
92+
button.style.opacity = '0.5';
93+
94+
};
95+
96+
button.onclick = function () {
97+
98+
if ( currentSession === null ) {
99+
100+
// WebXR's requestReferenceSpace only works if the corresponding feature
101+
// was requested at session creation time. For simplicity, just ask for
102+
// the interesting ones as optional features, but be aware that the
103+
// requestReferenceSpace call will fail if it turns out to be unavailable.
104+
// ('local' is always available for immersive sessions and doesn't need to
105+
// be requested separately.)
106+
107+
var sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor' ] };
108+
navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted );
109+
110+
} else {
111+
112+
currentSession.end();
113+
114+
}
115+
116+
};
117+
118+
}
119+
120+
function disableButton() {
121+
122+
button.style.display = '';
123+
124+
button.style.cursor = 'auto';
125+
button.style.left = 'calc(50% - 75px)';
126+
button.style.width = '150px';
127+
128+
button.onmouseenter = null;
129+
button.onmouseleave = null;
130+
131+
button.onclick = null;
132+
133+
}
134+
135+
function showVRNotFound() {
136+
137+
disableButton();
138+
139+
button.textContent = 'VR NOT FOUND';
140+
141+
renderer.vr.setDevice( null );
142+
143+
}
144+
145+
function showXRNotFound() {
146+
147+
disableButton();
148+
149+
button.textContent = 'VR NOT FOUND';
150+
151+
}
152+
153+
function stylizeElement( element ) {
154+
155+
element.style.position = 'absolute';
156+
element.style.bottom = '20px';
157+
element.style.padding = '12px 6px';
158+
element.style.border = '1px solid #fff';
159+
element.style.borderRadius = '4px';
160+
element.style.background = 'rgba(0,0,0,0.1)';
161+
element.style.color = '#fff';
162+
element.style.font = 'normal 13px sans-serif';
163+
element.style.textAlign = 'center';
164+
element.style.opacity = '0.5';
165+
element.style.outline = 'none';
166+
element.style.zIndex = '999';
167+
168+
}
169+
170+
if ( 'xr' in navigator ) {
171+
172+
var button = document.createElement( 'button' );
173+
button.style.display = 'none';
174+
175+
stylizeElement( button );
176+
177+
navigator.xr.isSessionSupported( 'immersive-vr' ).then( function ( supported ) {
178+
179+
if ( supported ) {
180+
181+
showEnterXR();
182+
183+
} else {
184+
185+
showXRNotFound();
186+
187+
}
188+
189+
} );
190+
191+
return button;
192+
193+
} else if ( 'getVRDisplays' in navigator ) {
194+
195+
var button = document.createElement( 'button' );
196+
button.style.display = 'none';
197+
198+
stylizeElement( button );
199+
200+
window.addEventListener( 'vrdisplayconnect', function ( event ) {
201+
202+
showEnterVR( event.display );
203+
204+
}, false );
205+
206+
window.addEventListener( 'vrdisplaydisconnect', function ( /*event*/ ) {
207+
208+
showVRNotFound();
209+
210+
}, false );
211+
212+
window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
213+
214+
button.textContent = event.display.isPresenting ? 'EXIT_VR' : 'ENTER_VR';
215+
216+
}, false );
217+
218+
window.addEventListener( 'vrdisplayactivate', function ( event ) {
219+
220+
event.display.requestPresent( [ { source: renderer.domElement } ] );
221+
222+
}, false );
223+
224+
navigator.getVRDisplays()
225+
.then( function ( displays ) {
226+
227+
if ( displays.length > 0 ) {
228+
229+
showEnterVR( displays[ 0 ] );
230+
231+
} else {
232+
233+
showVRNotFound();
234+
235+
}
236+
237+
} ).catch( showVRNotFound );
238+
239+
return button;
240+
241+
} else {
242+
243+
var message = document.createElement( 'a' );
244+
message.href = 'https://immersive-web.github.io/webxr/';
245+
message.innerHTML = 'WEBXR NOT SUPPORTED';
246+
247+
message.style.left = 'calc(50% - 90px)';
248+
message.style.width = '180px';
249+
message.style.textDecoration = 'none';
250+
251+
stylizeElement( message );
252+
253+
return message;
254+
255+
}
256+
257+
}
258+
259+
};
260+
261+
export { VRButton };

‎examples/webxr_vr_ballshooter.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
import * as THREE from '../build/three.module.js';
2222

2323
import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
24-
import { WEBVR } from './jsm/vr/WebVR.js';
24+
import { VRButton } from './jsm/webxr/VRButton.js';
2525

2626
var camera, scene, renderer;
2727
var controller1, controller2;
@@ -86,7 +86,7 @@
8686

8787
//
8888

89-
document.body.appendChild( WEBVR.createButton( renderer ) );
89+
document.body.appendChild( VRButton.createButton( renderer ) );
9090

9191
// controllers
9292

‎examples/webxr_vr_cubes.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
import * as THREE from '../build/three.module.js';
2222

2323
import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
24-
import { WEBVR } from './jsm/vr/WebVR.js';
24+
import { VRButton } from './jsm/webxr/VRButton.js';
2525

2626
var clock = new THREE.Clock();
2727

@@ -120,7 +120,7 @@
120120
window.addEventListener( 'vrdisplaypointerrestricted', onPointerRestricted, false );
121121
window.addEventListener( 'vrdisplaypointerunrestricted', onPointerUnrestricted, false );
122122

123-
document.body.appendChild( WEBVR.createButton( renderer ) );
123+
document.body.appendChild( VRButton.createButton( renderer ) );
124124

125125
}
126126

‎examples/webxr_vr_dragging.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<script type="module">
2020

2121
import * as THREE from '../build/three.module.js';
22-
import { WEBVR } from './jsm/vr/WebVR.js';
22+
import { VRButton } from './jsm/webxr/VRButton.js';
2323

2424
var container;
2525
var camera, scene, renderer;
@@ -117,7 +117,7 @@
117117
renderer.vr.enabled = true;
118118
container.appendChild( renderer.domElement );
119119

120-
document.body.appendChild( WEBVR.createButton( renderer ) );
120+
document.body.appendChild( VRButton.createButton( renderer ) );
121121

122122
// controllers
123123

‎examples/webxr_vr_lorenzattractor.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<script type="module">
1616

1717
import * as THREE from '../build/three.module.js';
18-
import { WEBVR } from './jsm/vr/WebVR.js';
18+
import { VRButton } from './jsm/webxr/VRButton.js';
1919

2020
var camera, scene, renderer;
2121
var attractor, light;
@@ -136,7 +136,7 @@
136136
renderer.vr.enabled = true;
137137
document.body.appendChild( renderer.domElement );
138138

139-
document.body.appendChild( WEBVR.createButton( renderer ) );
139+
document.body.appendChild( VRButton.createButton( renderer ) );
140140

141141
//
142142

‎examples/webxr_vr_multiview.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424

2525
import * as THREE from '../build/three.module.js';
2626
import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
27-
import { WEBVR } from './jsm/vr/WebVR.js';
27+
import { VRButton } from './jsm/webxr/VRButton.js';
2828
import Stats from './jsm/libs/stats.module.js';
2929

3030
var container;
@@ -116,7 +116,7 @@
116116

117117
//
118118

119-
document.body.appendChild( WEBVR.createButton( renderer ) );
119+
document.body.appendChild( VRButton.createButton( renderer ) );
120120

121121
//
122122

‎examples/webxr_vr_paint.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
import * as THREE from '../build/three.module.js';
2222
import { OrbitControls } from './jsm/controls/OrbitControls.js';
2323
import { TubePainter } from './jsm/misc/TubePainter.js';
24-
import { WEBVR } from './jsm/vr/WebVR.js';
24+
import { VRButton } from './jsm/webxr/VRButton.js';
2525

2626
var container;
2727
var camera, scene, renderer;
@@ -95,7 +95,7 @@
9595
renderer.vr.enabled = true;
9696
container.appendChild( renderer.domElement );
9797

98-
document.body.appendChild( WEBVR.createButton( renderer ) );
98+
document.body.appendChild( VRButton.createButton( renderer ) );
9999

100100
// controllers
101101

0 commit comments

Comments
 (0)