forked from videojs/videojs-vr
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
86 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 }; | ||
} )(); |