Search code examples
reactjsreact-nativequaternionsreact-360

I want to change my quaternions coordinate to rotation coordinates


I am getting the quaternions coordinate [x,y,z,w] from a sensor. I want to change that coordinate so that I can rotate my React VR application scene to rotating that scene. I need to change the quaternions coordinate to the rotation coordinate. But the rotation here is not smooth for the smooth rotation "quaternion coordinate" must be converted to rotation.

import {VRInstance} from 'react-vr-web';
import scene from 'three.js';
//let us assume x,y,z,w are my coordinate in quaternion formate which I //am taking through web socket
function init(bundle, parent, options) 
{
 //scene=new scene()//three.js

  const vr = new VRInstance(bundle, 'musical_exp_react_vr_pusher', 
 parent, {
    // Add custom options here
    ...options,
  });
  vr.render = function() {
  //but its not working as I took the quaternion coordiate
 //smoothness is not there
 vr.scene.rotationx=x;
 vr.scene.rotationx=y;
 vr.scene.rotationx=z;

 //it is also not working
 vr.scene.quaternion.x=x;
 vr.scene.quaternion.y=y;
 vr.scene.quaternion.z=z;

  // Any custom behavior you want to perform on each frame goes here
  };
  // Begin the animation loop
  vr.start();
  return vr;
 }

 window.ReactVR = {init};

The main problem is that I need to find the rotation axis coordinate from quaternion coordinate.


Solution

  • Quaternions and Euler angles are two separate concepts, and cannot be converted via simple assignment. Depending on the type of Euler angles your framework is using, the conversion algorithm can be a bit complex.

    Three.js implements this conversion in the Euler.setFromQuaternion() method.

    However, looking at the documentation of three.js, it seems the quaternion assignment should work as you intend - you just need to assign all 4 elements of the quaternion (your code is missing the W element).