DeviceOrientationToCamera

Source

index.js
const listeners = [];
const orientation = {
device: {},
screen: window.orientation || 0,
supported: !!window.DeviceMotionEvent,
update: false,
};

const SCREEN_ORIENTATION_MAP = {
'landscape-primary': 90,
'landscape-secondary': -90,
'portrait-secondary': 180,
'portrait-primary': 0,
};

function isEventValid(evt) {
return Number.isFinite(evt.alpha);
}

function onDeviceOrientationChangeEvent(evt) {
orientation.device = evt;
if (!Number.isFinite(evt.alpha)) {
orientation.supported = false;
}
}

function onScreenOrientationChangeEvent() {
orientation.screen =
SCREEN_ORIENTATION_MAP[
window.screen.orientation || window.screen.mozOrientation
] ||
window.orientation ||
0;
}

function addWindowListeners() {
window.addEventListener(
'orientationchange',
onScreenOrientationChangeEvent,
false
);
window.addEventListener(
'deviceorientation',
onDeviceOrientationChangeEvent,
false
);
orientation.update = true;
listeners
.filter((i) => !!i)
.forEach((i) => i.renderWindowInteractor.requestAnimation(i));
}

function removeWindowListeners() {
window.removeEventListener(
'orientationchange',
onScreenOrientationChangeEvent,
false
);
window.removeEventListener(
'deviceorientation',
onDeviceOrientationChangeEvent,
false
);
orientation.update = false;
listeners
.filter((i) => !!i)
.forEach((i) => i.renderWindowInteractor.cancelAnimation(i));
}

function addCameraToSynchronize(
renderWindowInteractor,
camera,
onCameraUpdate
) {
function onAnimation() {
if (orientation.update && isEventValid(orientation.device)) {
const { alpha, beta, gamma } = orientation.device;
const { screen } = orientation;
camera.setDeviceAngles(alpha, beta, gamma, screen);
if (onCameraUpdate) {
onCameraUpdate();
}
}
}

const subscription = renderWindowInteractor.onAnimation(onAnimation);
const listener = { subscription, renderWindowInteractor };
const listenerId = listeners.length;
listeners.push(listener);

if (orientation.update) {
listener.renderWindowInteractor.requestAnimation();
}

return listenerId;
}

function removeCameraToSynchronize(id, cancelAnimation = true) {
const listener = listeners[id];
if (listener) {
listener.subscription.unsubscribe();
if (cancelAnimation) {
listener.renderWindowInteractor.cancelAnimation();
}
}
listeners[id] = null;
}

function isDeviceOrientationSupported() {
return orientation.supported;
}

export default {
addCameraToSynchronize,
addWindowListeners,
isDeviceOrientationSupported,
removeCameraToSynchronize,
removeWindowListeners,
};