https://foldingspace.github.io/enfolding/js/vr/webvr2.js

1/**
2 * @author mrdoob / http://mrdoob.com
3 * @author Mugen87 / https://github.com/Mugen87
4 *
5 * Based on @tojiro's vr-samples-utils.js
6 */
7
8var WEBVR = {
9
10	createButton: function ( renderer ) {
11
12		function showEnterVR( display ) {
13
14			button.style.display = '';
15
16			button.style.cursor = 'pointer';
17			//button.style.left = 'calc(50% - 50px)';
18			button.style.width = '100px';
19
20			button.textContent = 'ENTER VR';
21
22			button.onmouseenter = function () { button.style.opacity = '1.0'; };
23			button.onmouseleave = function () { button.style.opacity = '0.5'; };
24
25			button.onclick = function () {
26
27				display.isPresenting ? display.exitPresent() : display.requestPresent( [ { source: renderer.domElement } ] );
28
29			};
30
31			renderer.vr.setDevice( display );
32
33		}
34
35		function showVRNotFound() {
36
37			button.style.display = '';
38
39			button.style.cursor = 'auto';
40			//button.style.left = 'calc(50% - 75px)';
41			button.style.width = '150px';
42
43			button.textContent = 'VR NOT FOUND';
44
45			button.onmouseenter = null;
46			button.onmouseleave = null;
47
48			button.onclick = null;
49
50			renderer.vr.setDevice( null );
51
52		}
53
54		function stylizeElement( element ) {
55
56			//element.style.position = 'absolute';
57			element.style.bottom = '20px';
58			element.style.padding = '12px 6px';
59			element.style.border = '1px solid #fff';
60			element.style.borderRadius = '4px';
61			element.style.background = 'transparent';
62			element.style.color = '#000';
63			element.style.font = 'normal 13px sans-serif';
64			element.style.textAlign = 'center';
65			element.style.opacity = '0.5';
66			element.style.outline = 'none';
67			element.style.zIndex = '999';
68
69		}
70
71		if ( 'getVRDisplays' in navigator ) {
72
73			var button = document.createElement( 'button' );
74			button.style.display = 'none';
75
76			stylizeElement( button );
77
78			window.addEventListener( 'vrdisplayconnect', function ( event ) {
79
80				showEnterVR( event.display );
81
82			}, false );
83
84			window.addEventListener( 'vrdisplaydisconnect', function ( event ) {
85
86				showVRNotFound();
87
88			}, false );
89
90			window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
91
92				button.textContent = event.display.isPresenting ? 'EXIT VR' : 'ENTER VR';
93
94			}, false );
95
96			window.addEventListener( 'vrdisplayactivate', function ( event ) {
97
98				event.display.requestPresent( [ { source: renderer.domElement } ] );
99
100			}, false );
101
102			navigator.getVRDisplays()
103				.then( function ( displays ) {
104
105					if ( displays.length > 0 ) {
106
107						showEnterVR( displays[ 0 ] );
108
109					} else {
110
111						showVRNotFound();
112
113					}
114
115				} );
116
117			return button;
118
119		} else {
120
121			var message = document.createElement( 'a' );
122			message.href = 'https://webvr.info';
123			message.innerHTML = 'WEBVR NOT SUPPORTED';
124
125			message.style.left = 'calc(50% - 90px)';
126			message.style.width = '180px';
127			message.style.textDecoration = 'none';
128
129			stylizeElement( message );
130
131			return message;
132
133		}
134
135	},
136
137	// DEPRECATED
138
139	checkAvailability: function () {
140		console.warn( 'WEBVR.checkAvailability has been deprecated.' );
141		return new Promise( function () {} );
142	},
143
144	getMessageContainer: function () {
145		console.warn( 'WEBVR.getMessageContainer has been deprecated.' );
146		return document.createElement( 'div' );
147	},
148
149	getButton: function () {
150		console.warn( 'WEBVR.getButton has been deprecated.' );
151		return document.createElement( 'div' );
152	},
153
154	getVRDisplay: function () {
155		console.warn( 'WEBVR.getVRDisplay has been deprecated.' );
156	}
157
158};