使用 Leap motion 执行手势时在 X3DOM 中模拟鼠标单击

Question

当我使用 Leap Motion 做抓取手势时，我试图在 X3DOM 中模拟鼠标点击。例如，我有两个立方体，我想在对它做抓取手势时选择红色的立方体。 changeColor() 是点击功能的事件处理程序，它将立方体的颜色从红色变为绿色，反之亦然（使用虚拟手，如本例所示：http://examples.x3dom.org/Demos/ClassroomVR/classroom-rift-leap-webvr.html）

现在，抓取手势确实触发了点击事件，但它被触发了whenever/wherever我抓取了。我希望仅当我在那个特定的红色立方体上做抓取手势时才会触发它。任何建议将不胜感激。谢谢

<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

我不知道 Leap Motion，但是有一个 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 会给你一个 pickObject，你必须将它与你的框匹配并触发点击。

使用 Leap motion 执行手势时在 X3DOM 中模拟鼠标单击

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

html

javascript

x3dom

leap-motion