I have a three.js object which is a cube. I want to translate and rotate it using my hand gestures. To rotate it i have used a simple motion of my non-gripped fist, while to translate it is where i have used the motion of my gripped fist.
The problem comes, firstly, when the leap motion controller fails to distinguish between the two shapes of fists (log of the event fired on my console), and secondly when it ceases to track my fists motion for a few microseconds resulting in an abrupt change in cube's position. I suppose that the latter has something to do with the device and browser's frame rate but i am still not sure of the glitch. Apart from that i had also resorted to the use of Debounce function to limit the rate at which event listener is called but it doesn't seem to play the trick. Following is the javascript code
P.S. - Controller is mounted on the top of screen with conventional z-axis pointing downwards
function move(frame){
if(frame.hands.length > 0){
console.log("hands detected");
var rightHand = frame.hands[0];
if(rightHandPrev==null){
rightHandPrev = rightHand;
return;
}
var dx = rightHandPrev.stabilizedPalmPosition[X] -rightHand.stabilizedPalmPosition[X];
var dy = rightHandPrev.stabilizedPalmPosition[Y] - rightHand.stabilizedPalmPosition[Y];
var dz = rightHandPrev.stabilizedPalmPosition[Z] - rightHand.stabilizedPalmPosition[Z]+5;
if(rightHand.grabStrength >= 1.0){
console.log("gripped hand");
cube.position.x = -dx/100;
cube.position.y = dz/100;
}else
{
console.log("UNgripped hand");
cube.rotation.y = -dx/100;
cube.rotation.x = -dz/10;
}
renderer.render(scene, camera);
}
}
//had tried all the variants within the first argument of Leap.loop
var controller = Leap.loop({
enableGestures: true,
frameEventName: 'animationFrame',
optimizeHMD: true,
loopWhileDisconnected: true
}, debounce(function(frame){ return move(frame)}, 10));