From 58ab5ba4e3cfce49a57594c08c98c1833643dab9 Mon Sep 17 00:00:00 2001 From: James Broberg Date: Mon, 29 Jul 2024 15:15:04 +1000 Subject: [PATCH] Disable Cardboard by default --- src/plugin.js | 9 +- vendor/three/DeviceOrientationControls.js | 164 +++++++++++----------- 2 files changed, 86 insertions(+), 87 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index 775d332..90b9a58 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -33,6 +33,10 @@ const defaults = { disableTogglePlay: false }; +const POLYFILL_CONFIG = { + cardboard: false +}; + const errors = { 'web-vr-out-of-date': { headline: '360 is out of date', @@ -82,7 +86,7 @@ class VR extends Plugin { return; } - this.polyfill_ = new WebXRPolyfill(); + this.polyfill_ = new WebXRPolyfill(POLYFILL_CONFIG); this.handleVrDisplayActivate_ = videojs.bind(this, this.handleVrDisplayActivate_); this.handleVrDisplayDeactivate_ = videojs.bind(this, this.handleVrDisplayDeactivate_); @@ -772,7 +776,8 @@ void main() { devicePixelRatio: window.devicePixelRatio, alpha: false, clearColor: 0xffffff, - antialias: true + antialias: true, + powerPreference: 'high-performance' }); const webglContext = this.renderer.getContext('webgl'); diff --git a/vendor/three/DeviceOrientationControls.js b/vendor/three/DeviceOrientationControls.js index 5000504..1d5183a 100644 --- a/vendor/three/DeviceOrientationControls.js +++ b/vendor/three/DeviceOrientationControls.js @@ -1,153 +1,147 @@ -import { - Euler, - EventDispatcher, - MathUtils, - Quaternion, - Vector3 -} from '../../node_modules/three/build/three.module.js'; +( function () { -const _zee = new Vector3( 0, 0, 1 ); -const _euler = new Euler(); -const _q0 = new Quaternion(); -const _q1 = new Quaternion( - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis + const _zee = new THREE.Vector3( 0, 0, 1 ); -const _changeEvent = { type: 'change' }; + const _euler = new THREE.Euler(); -class DeviceOrientationControls extends EventDispatcher { + const _q0 = new THREE.Quaternion(); - constructor( object ) { + const _q1 = new THREE.Quaternion( - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis - super(); - if ( window.isSecureContext === false ) { + const _changeEvent = { + type: 'change' + }; - console.error( 'THREE.DeviceOrientationControls: DeviceOrientationEvent is only available in secure contexts (https)' ); + class DeviceOrientationControls extends THREE.EventDispatcher { - } - - const scope = this; - - const EPS = 0.000001; - const lastQuaternion = new Quaternion(); + constructor( object ) { - this.object = object; - this.object.rotation.reorder( 'YXZ' ); + super(); - this.enabled = true; + if ( window.isSecureContext === false ) { - this.deviceOrientation = {}; - this.screenOrientation = 0; + console.error( 'THREE.DeviceOrientationControls: DeviceOrientationEvent is only available in secure contexts (https)' ); - this.alphaOffset = 0; // radians + } - const onDeviceOrientationChangeEvent = function ( event ) { + const scope = this; + const EPS = 0.000001; + const lastQuaternion = new THREE.Quaternion(); + this.object = object; + this.object.rotation.reorder( 'YXZ' ); + this.enabled = true; + this.deviceOrientation = {}; + this.screenOrientation = 0; + this.alphaOffset = 0; // radians - scope.deviceOrientation = event; + const onDeviceOrientationChangeEvent = function ( event ) { - }; + scope.deviceOrientation = event; - const onScreenOrientationChangeEvent = function () { + }; - scope.screenOrientation = window.orientation || 0; + const onScreenOrientationChangeEvent = function () { - }; + scope.screenOrientation = window.orientation || 0; - // The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y'' + }; // The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y'' - const setObjectQuaternion = function ( quaternion, alpha, beta, gamma, orient ) { - _euler.set( beta, alpha, - gamma, 'YXZ' ); // 'ZXY' for the device, but 'YXZ' for us + const setObjectQuaternion = function ( quaternion, alpha, beta, gamma, orient ) { - quaternion.setFromEuler( _euler ); // orient the device + _euler.set( beta, alpha, - gamma, 'YXZ' ); // 'ZXY' for the device, but 'YXZ' for us - quaternion.multiply( _q1 ); // camera looks out the back of the device, not the top - quaternion.multiply( _q0.setFromAxisAngle( _zee, - orient ) ); // adjust for screen orientation + quaternion.setFromEuler( _euler ); // orient the device - }; + quaternion.multiply( _q1 ); // camera looks out the back of the device, not the top - this.connect = function () { + quaternion.multiply( _q0.setFromAxisAngle( _zee, - orient ) ); // adjust for screen orientation - onScreenOrientationChangeEvent(); // run once on load + }; - // iOS 13+ + this.connect = function () { - if ( window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function' ) { + onScreenOrientationChangeEvent(); // run once on load + // iOS 13+ - window.DeviceOrientationEvent.requestPermission().then( function ( response ) { + if ( window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function' ) { - if ( response == 'granted' ) { + window.DeviceOrientationEvent.requestPermission().then( function ( response ) { - window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent ); - window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent ); + if ( response == 'granted' ) { - } + window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent ); + window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent ); - } ).catch( function ( error ) { + } - console.error( 'THREE.DeviceOrientationControls: Unable to use DeviceOrientation API:', error ); + } ).catch( function ( error ) { - } ); + console.error( 'THREE.DeviceOrientationControls: Unable to use DeviceOrientation API:', error ); - } else { + } ); - window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent ); - window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent ); + } else { - } + window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent ); + window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent ); - scope.enabled = true; + } - }; + scope.enabled = true; - this.disconnect = function () { + }; - window.removeEventListener( 'orientationchange', onScreenOrientationChangeEvent ); - window.removeEventListener( 'deviceorientation', onDeviceOrientationChangeEvent ); + this.disconnect = function () { - scope.enabled = false; + window.removeEventListener( 'orientationchange', onScreenOrientationChangeEvent ); + window.removeEventListener( 'deviceorientation', onDeviceOrientationChangeEvent ); + scope.enabled = false; - }; + }; - this.update = function () { + this.update = function () { - if ( scope.enabled === false ) return; + if ( scope.enabled === false ) return; + const device = scope.deviceOrientation; - const device = scope.deviceOrientation; + if ( device ) { - if ( device ) { + const alpha = device.alpha ? THREE.MathUtils.degToRad( device.alpha ) + scope.alphaOffset : 0; // Z - const alpha = device.alpha ? MathUtils.degToRad( device.alpha ) + scope.alphaOffset : 0; // Z + const beta = device.beta ? THREE.MathUtils.degToRad( device.beta ) : 0; // X' - const beta = device.beta ? MathUtils.degToRad( device.beta ) : 0; // X' + const gamma = device.gamma ? THREE.MathUtils.degToRad( device.gamma ) : 0; // Y'' - const gamma = device.gamma ? MathUtils.degToRad( device.gamma ) : 0; // Y'' + const orient = scope.screenOrientation ? THREE.MathUtils.degToRad( scope.screenOrientation ) : 0; // O - const orient = scope.screenOrientation ? MathUtils.degToRad( scope.screenOrientation ) : 0; // O + setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient ); - setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient ); + if ( 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) { - if ( 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) { + lastQuaternion.copy( scope.object.quaternion ); + scope.dispatchEvent( _changeEvent ); - lastQuaternion.copy( scope.object.quaternion ); - scope.dispatchEvent( _changeEvent ); + } } - } + }; - }; + this.dispose = function () { - this.dispose = function () { + scope.disconnect(); - scope.disconnect(); + }; - }; + this.connect(); - this.connect(); + } } -} + THREE.DeviceOrientationControls = DeviceOrientationControls; -export { DeviceOrientationControls }; +} )(); \ No newline at end of file