#сниппет #threejs #js #webgl #deviceorientation

Так как на эту задачу было потрачено больше 5-ти минут то положу сюда сниппет по тому, как правильно забирать данные с гироскопа (тут нет части с тем, как правильно забирать разрешения на ios) Но по разрешениям:

1) DeviceOrientationEvent не работает без https
2) DeviceOrientationEvent не работает в iframe
3) DeviceOrientationEvent можно запросить только по действию пользователя, типа клика на кнопку

Пересчёт кватерниона ориентации устройства:

function getQuaternion( alpha, beta, gamma ) {
    let degtorad = Math.PI / 180;
    let _x = beta  ? beta * degtorad : 0;
    let _y = gamma ? gamma * degtorad : 0;
    let _z = alpha ? alpha * degtorad : 0;

    let cX = Math.cos( _x/2 );
    let cY = Math.cos( _y/2 );
    let cZ = Math.cos( _z/2 );
    let sX = Math.sin( _x/2 );
    let sY = Math.sin( _y/2 );
    let sZ = Math.sin( _z/2 );

    let w = cX * cY * cZ - sX * sY * sZ;
    let x = sX * cY * cZ - cX * sY * sZ;
    let y = cX * sY * cZ + sX * cY * sZ;
    let z = cX * cY * sZ + sX * sY * cZ;

    return [ w, x, y, z ];
}

Применение в three.js:

window.addEventListener('deviceorientation',(event) => {
            let threeQuaternion = new Matrix3();
            let quat = getQuaternion(event.alpha, event.beta, event.gamma);
            threeQuaternion.w = quat[0];
            threeQuaternion.x = quat[1];
            threeQuaternion.y = quat[2];
            threeQuaternion.z = quat[3];
            this.camera.setRotationFromQuaternion(threeQuaternion);
            this.camera.rotation.x -= Math.PI / 2;
        });

Важно добавить к повороту по X пи пополам (90 градусов в радианах), так как по умолчанию ориентация устройства (по крайней мере на ios) будет смотреть вперёд, когда камера телефона смотрит вниз