src/lib/three/WebVR.js

// adapted from Three.js, r88, https://github.com/mrdoob/three.js/blob/r88/examples/js/vr/WebVR.js

/**
 * @author mrdoob / http://mrdoob.com
 * @author Mugen87 / https://github.com/Mugen87
 *
 * Based on @tojiro's vr-samples-utils.js
 */

var WEBVR = {
    createButton: function(renderer) {
        function showEnterVR(display) {
            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() {
                display.isPresenting ? display.exitPresent() : display.requestPresent([{source: renderer.domElement}])
            }

            renderer.vr.setDevice(display)
        }

        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 = 'transparent'
            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 ('getVRDisplays' in navigator) {
            var button = document.createElement('button')
            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
            )

            navigator.getVRDisplays().then(function(displays) {
                if (displays.length > 0) {
                    showEnterVR(displays[0])
                } else {
                    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.')
    },
}

export default WEBVR