Three.js: Mapping of Mobile Gyroscope Data(Quaternion) to 3D mesh in THREE.JS

[f138150]

Background: I am a newbie in game development I'm creating motion sensor game Air Table Tennis on THREE.JS in which user can control the paddle of table tennis with his/her smartphone. I am using gyroscope/rotational data of mobile in the form of Quaternion to avoid Gimble Lock and sending the data to server(nodeJS).

Problem: So, I am using paddle.setRotationFromQuaternion(Quaternion);, But I am unable to map my paddle as my device. (paddle is not exactly in the position where my mobile is currently now, although moving on x,y,z axix give me correct result). So my question is how to calibrate/Map 3D object same as my mobile device like DeviceOrientationControls control which is used in mobile?

@mrdoob Sir kindly suggest me something..

Thanks in Advance

[f138150]

@WestLangley Can you please help me, I'm stuck here for days !

[WestLangley]

Sorry, this is not a help site. If there is a particular device you feel three.js should support, then that would be an enhancement request.

Unfortunately, is not clear to me from your post what you are trying to do.

[f138150]

@WestLangley Sir can you just point me in the direction how to 'Subtract two quaternions in THREE JS'.

[WestLangley]

Quaternions in three.js represent rotations. It does not make sense to 'subtract' them.

You can, however, calculate the quaternion which represents the rotation from quaternion q1 to q2:

var q = new THREE.Quaternion();

q.multiply( q2, q1.inverse() );

@mrdoob Is there a device here we need to support? For example, how to use a phone to control the orientation of a device rendered on another display?

I assume that is what this question is about.

[mrdoob]

I assume that is what this question is about.

I'm not sure... I think what he wants to do is new THREE.DeviceOrientationControls( mesh ).

[WestLangley]

Something like this should work.

var dummyCamera = new THREE.PerspectiveCamera();
var controls = new THREE.DeviceOrientationControls( dummyCamera );
...
controls.update();
quaternion.copy( controls.object.quaternion ); // quaternion to server
...
mesh.quaternion.copy( quaternion ); // quaternion from server

The mesh geometry must be oriented to face the negative-z axis -- with positive-y up.

[f138150]

@WestLangley @mrdoob Sir, thank you so much for your responses.

Here is what i want to implement.

My game runs on web(laptop), and from mobile I'm just getting gyro sensor data and send it to server (nodeJS) which then send this data to client. Initially on loading my mesh(paddle of table tennis) I'm setting my mesh's(paddle) rotation to

paddle.setRotationFromQuaternion(new THREE.Quaternion(0,0,0,1));

Then when game starts, mobile sends sensor data to game, and then I was setting (data is coming form mobile) and this function is continuously calling

var endQuaternion = new THREE.Quaternion(data.X,data.Y,data.Z,data.W); paddle.setRotationFromQuaternion(endQuaternion);
What i actually want, to take the difference between paddle initial rotation and the data coming from mobile, First time i receive data from mobile I want to take

var offset=initial_paddle.Quaternion - endQuaternion;
Then add this offset to every other endQuaternion Data coming from mobile.

var result= endQuaternion+offset
paddle.setRotationFromQuaternion(endQuaternion);

Sir kindly help me, I'll be very thankful.

[WestLangley]

All I can tell you is you should set the quaternion directly; there is no need to set the rotation.

paddle.quaternion.set( x, y, z, w );