Estoy tratando de detectar si la punta del pulgar y el dedo índice se han tocado. Pero no estoy seguro si estoy haciendo esto correctamente.

 const hand = result.multiHandLandmarks[0]; //Returns {x,y,z} of each landmark. //hand[4] is the tip of the thumb - Returns {x,y,z} of the tip of thumb. //hand[8] is the tip of the index finger - Returns {x,y,z} of the tip of index finger. //I don't know exactly if I am doing this right to get the distance between two tip of fingers. const x = hand[4].x - hand[8].x; const y = hand[4].y - hand[8].y; const z = hand[8].z; const distance = Math.sqrt(x * x + y * y); const element = document.getElementById("card") //--Here I want to check if the user's index and thumb finger is touching each other. //if it is, then move the element based on the position of index finger.

He intentado hacerlo de esta manera, pero parece que no es la mejor manera de hacerlo.

 //I'm not sure about 0.045, if it's enough distance to detect a touch between two finger. if (distance <= 0.045) { element.style.left = `${indexFinger.x - element.offsetWidth / 2}px`; element.style.top = `${indexFinger.y - element.offsetHeight / 2}px`; console.log("grabbing"); } else { console.log("NOT Grabbing", distance, z); }

También quiero considerar la posición Z del dedo índice, si la mano está demasiado cerca de la cámara, entonces quiero que aparezca una alerta emergente para notificar al usuario que aleje su mano en una posición perfecta. Porque creo que X e Y dependen de la posición Z. Si una mano está demasiado cerca de la cámara, x e y devuelven un número más alto.