Javascript DeviceOrientation Гимбальный замок - PullRequest
Новая
       40

Javascript DeviceOrientation Гимбальный замок

0 голосов
/ 18 апреля 2020

Я пытаюсь сопоставить ориентацию устройства с положением x / y видео на экране.

Я пытался отобразить результат непосредственно с deviceorientation даже на css translate, но Я побежал в печально известный замок на тарелке. Осматривая, я обнаружил, что вместо этого должен использовать quaternions.

Итак, я сделал это, и я получаю матрицу Matrix3d. Тем не менее, матрица вращает и наклоняет элемент, в то время как мне просто нужно переместить его по оси x / y.

Есть ли способ использовать только определенную c часть матрицы, чтобы я только двигал элемент, или мне нужно сделать другой подход.

Любые идеи, куда я должен идти дальше?

Код перед использованием кватернионов: 

window.addEventListener("deviceorientation", function(event) {
    setVideoPosition({
        x: event.gamma,
        y: event.beta
    })
}, true);

<video 
    style={{
        transform: `translate(${videoPosition.x}px ${videoPositon.y}px)`
    }}
/>

Это работает довольно ну, пока я не держу телефон на уровне горизонта, то начинают происходить странные движения.

И попытка с кватернионами / matrix3d ​​с использованием библиотеки Quaternion JS 

const Quaternion = require('quaternion');

window.addEventListener("deviceorientation", function(event) {
    let matrix = Quaternion.fromEuler(event.alpha * rad, event.beta * rad, event.gamma * rad,  'ZXY');
    setVideoPosition(matrix)
}, true);

<video 
    style={{
        transform: `matrix3d(${videoPosition})`
    }}
/>
...