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?
This is really just related to start positions is it not? Make sure at the beginning of the program, you ask the users to hold their mobile device out directly in front of them for callibration. It is also worth noting that you should think about how the human hand/arm interacts with the device, and how the arm moves.
@TheCodeCrafter Thank you so much for your response, yes that’s exactly i wanted to implement, but the problem is
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
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);
If you want to at first, use a different strategy than usual, simply add a “First Message” attribute to your server message, and then you will use that, and then send another message that says: “First message received”. And then move from there.
Plus, I suggest that you will use this function from then on. This should allow for smooth tweening. I think that is what you were looking for as well, within this problem!
Here is a simple little function that should accomplish what you need!
var tweenRotateOnAxis = function() {
// axis is assumed to be normalized
// angle is in radians
var qStart = new THREE.Quaternion();
var o = new THREE.Object3D();
return function tweenRotateOnAxis( object, axis, angle ) {
var qEnd, time = { t: 0 };
// start quaternion
qStart.copy( object.quaternion );
// end quaternion
o.quaternion.copy( qStart );
o.rotateOnAxis( axis, angle );
qEnd = o.quaternion;
// tween
new TWEEN.Tween( time )
.to( { t : 1 }, 1000 )
.easing( TWEEN.Easing.Linear.EaseNone )
.onUpdate( function() {
THREE.Quaternion.slerp( qStart, qEnd, object.quaternion, time.t );
} )
.onComplete( function() {
object.quaternion.copy( qEnd ); // to be exact
} )
.start();
};
}();
I hope this makes everything more clear. This function is well-commented, but if you have any questions, or I completely messed up, and didn’t answer your question, just say so
I relooked at your wording, and I think I understand. Maybe you should just go through some trial and error, to find our exactly where this “reset position” is. Then you can use that quaternion. In fact, simply use the devices accelerometer, and take the values from it, and then you can use that to translate a good quaternion that should be usable.
I’m not sure how to answer your question, so, since I am trying to give you a nice, helpful answer, could you try re-wording it, so that I can more easily understand.
