Search code examples
javascriptthree.jsrotationeuler-anglesgopro

Trying to convert Go Pro GYRO Data to rotation in Three.js

I'm trying to convert Go Pro gyro data to Three.js coordinates so that I can project the footage onto the inside of a sphere, rotate the sphere and have 3D stabilisation.

enter image description here

The camera is orientated as such, and the order of the coordinates is Z,X,Y

I'm attempting to apply this vector to rotate the sphere, something like this

    this._nextVec3.set(this._next[0],this._next[1],this._next[2])
    this.el.object3D.rotation.setFromVector3(this._nextVec3)

But I can't get the rotation to match the rotation of the camera, and I assume it's something to do with the left/right hand configuration?

Can anyone help?

Solution

  • First of all, make sure you specify the correct rotation.order attribute. Since you said it's ZXY, then it should be a simple

    this.el.object3D.rotation.order = "ZXY";

    Secondly, check out the Three.js axes, taken from the editor:

    enter image description here

    As you can see, the WebGL axes are different than the GoPro. I think you'll have to flip the X-axis, and swap the Z and Y. So maybe something like:

    let xRot = this._next[0];
let yRot = this._next[1];
let zRot = this._next[2];
this.el.object3D.rotation.set(-xRot, zRot, yRot);