Imported "ThreeJS + WebVR" Boilerplate

static/js/webvr.js

@@ -0,0 +1,242 @@
+/**
+ * @author mrdoob / http://mrdoob.com
+ * @author Mugen87 / https://github.com/Mugen87
+ *
+ * Based on @tojiro's vr-samples-utils.js
+ */
+
+var WEBVR = {
+
+    createButton: function ( renderer, options ) {
+
+        // if ( options && options.frameOfReferenceType ) {
+        //
+        //     renderer.vr.setFrameOfReferenceType( options.frameOfReferenceType );
+        //
+        // }
+
+        function showEnterVR( device ) {
+
+            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 () {
+
+                device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] );
+
+            };
+
+            renderer.vr.setDevice( device );
+
+        }
+
+        function showEnterXR( device ) {
+
+            var currentSession = null;
+
+            function onSessionStarted( session ) {
+
+                session.addEventListener( 'end', onSessionEnded );
+
+                renderer.vr.setSession( session );
+                button.textContent = 'EXIT VR';
+
+                currentSession = session;
+
+            }
+
+            function onSessionEnded( event ) {
+
+                currentSession.removeEventListener( 'end', onSessionEnded );
+
+                renderer.vr.setSession( null );
+                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 ) {
+
+                    device.requestSession( { immersive: true, exclusive: true /* DEPRECATED */ } ).then( onSessionStarted );
+
+                } else {
+
+                    currentSession.end();
+
+                }
+
+            };
+
+            renderer.vr.setDevice( device );
+
+        }
+
+        function showVRNotFound() {
+
+            button.style.display = '';
+
+            button.style.cursor = 'auto';
+            // button.style.left = 'calc(50% - 75px)';
+            // button.style.width = '150px';
+
+            button.textContent = 'VR NOT FOUND';
+
+            button.onmouseenter = null;
+            button.onmouseleave = null;
+
+            button.onclick = null;
+
+            renderer.vr.setDevice( null );
+
+        }
+
+        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 ) {
+
+            var button = document.createElement( 'button' );
+            button.style.display = 'none';
+
+            stylizeElement( button );
+
+            navigator.xr.requestDevice().then( function ( device ) {
+
+                device.supportsSession( { immersive: true, exclusive: true /* DEPRECATED */ } )
+                    .then( function () { showEnterXR( device ); } )
+                    .catch( showVRNotFound );
+
+            } ).catch( showVRNotFound );
+
+            return button;
+
+        } else if ( 'getVRDisplays' in navigator ) {
+
+            var button = document.createElement( 'button' );
+            button.setAttribute("id","enter-vr")
+            button.setAttribute("disabled",true)
+            button.style.display = 'none';
+
+            stylizeElement( button );
+
+            window.addEventListener( 'vrdisplayconnect', function ( event ) {
+
+                showEnterVR( event.display );
+
+            }, false );
+
+            window.addEventListener( 'vrdisplaydisconnect', function ( event ) {
+
+                showVRNotFound();
+
+            }, false );
+
+            window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
+
+                button.textContent = event.display.isPresenting ? 'EXIT VR' : 'ENTER VR';
+
+            }, false );
+
+            window.addEventListener( 'vrdisplayactivate', function ( event ) {
+
+                event.display.requestPresent( [ { source: renderer.domElement } ] );
+
+            }, false );
+
+            navigator.getVRDisplays()
+                .then( function ( displays ) {
+
+                    if ( displays.length > 0 ) {
+
+                        showEnterVR( displays[ 0 ] );
+
+                    } else {
+
+                        showVRNotFound();
+
+                    }
+
+                } ).catch( showVRNotFound );
+
+            return button;
+
+        } else {
+
+            var message = document.createElement( 'a' );
+            message.href = 'https://webvr.info';
+            message.innerHTML = 'WEBVR NOT SUPPORTED';
+
+            message.style.left = 'calc(50% - 90px)';
+            message.style.width = '180px';
+            message.style.textDecoration = 'none';
+
+            stylizeElement( message );
+
+            return message;
+
+        }
+
+    },
+
+    // DEPRECATED
+
+    checkAvailability: function () {
+        console.warn( 'WEBVR.checkAvailability has been deprecated.' );
+        return new Promise( function () {} );
+    },
+
+    getMessageContainer: function () {
+        console.warn( 'WEBVR.getMessageContainer has been deprecated.' );
+        return document.createElement( 'div' );
+    },
+
+    getButton: function () {
+        console.warn( 'WEBVR.getButton has been deprecated.' );
+        return document.createElement( 'div' );
+    },
+
+    getVRDisplay: function () {
+        console.warn( 'WEBVR.getVRDisplay has been deprecated.' );
+    }
+
+};