Simulate mouse click in X3DOM when performing a gesture using Leap motion

Question

I am trying to simulate a mouse click in X3DOM when I do a grab gesture using Leap Motion. For example, I have two cubes and I want to pick the red cube when I do a grab gesture on it. The changeColor() is the event handler for click function which changes the color of that cube from red to green & vice versa (Using virtual hand as shown in this example: http://examples.x3dom.org/Demos/ClassroomVR/classroom-rift-leap-webvr.html)

Right now, the grab gesture does trigger the click event but it is triggered whenever/wherever I do the grab. I want it to be triggered only when I do the grab gesture on that particular red cube. Any suggestions will be appreciated. Thanks.

<x3d>
  <scene>
               <Transform id = "boxTrafo1" DEF="boxTrafo1" translation="-1 0 0">
                    <Shape id = "boxShape1" DEF="boxShape1" onclick = "changeColor(event);">
                        <Appearance DEF="boxApp1">
                              <Material id ="boxMat1" diffuseColor="1 0 0" specularColor=".5 .5 .5" ></Material>
                         </Appearance>
                         <Box  size="4.5 4.5 4.5"></Box>
                    </Shape>
               </Transform>


                <Transform translation='-11 0 3' id="boxTrafo2" >
                      <Shape id = "boxShape2">
                            <Appearance id = "boxApp2">
                                 <Material id ="boxMat2" diffuseColor='0 1 0' specularColor='.5 .5 .5'></Material>  
                             </Appearance>
                             <Box  size="4.5 4.5 4.5"></Box>
                        </Shape>
                 </Transform>

</scene>
</x3d>

<script>
var controller = Leap.loop({enableGestures: true}, function (frame)
        {
            if (frame.hands.length)
            {
                var hand_frame = frame.hands[0];
                if (hand_frame.grabStrength === 1) {
                  var box = document.getElementById("boxShape1");
                  box.click();
                }
            }
});

 function changeColor(event) {

            if (document.getElementById("boxMat1").getAttribute("diffuseColor") === "1 0 0")
                document.getElementById("boxMat1").setAttribute("diffuseColor", "0 1 0");
            else
                document.getElementById("boxMat1").setAttribute("diffuseColor", "1 0 0");
        }
</script>

Answer 1

I don't know Leap Motion, but there is a https://developer.leapmotion.com/documentation/javascript/api/Leap.Hand.html#Hand.palmPosition which you might want to use with together with https://github.com/x3dom/x3dom/blob/1.7.1/src/Runtime.js#L328 which will give you a pickObject, which you have to match to your box and fire the click.