使用Leapmotion移動DIV

我正在嘗試使用leapmotion JS API在網站上移動div。使用Leapmotion移動DIV

我發現了一個tutorial並修改了一下，因爲它似乎沒有工作。

這是我到目前爲止，但translation.x即將在控制檯日誌undefined。有沒有其他人搞砸了JS API？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf8"> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script src="leap.js"></script> 
    </head> 
    <body> 
<script> 
var controller = new Leap.Controller({enableGestures: true}); 
var firstValidFrame = null; 

     controller.loop(function(frame) { 
     if (!firstValidFrame) firstValidFrame = frame; 
     var translation = frame.translation(firstValidFrame); 
     console.log("X:" + translation.x); 
     $('#box').css({marginLeft: translation.x}); 
     }); 
</script> 

    <div id="box" style="width: 200px; border: 1px solid #666666; padding: 10px 10px 70px 10px; display: inline-block"></div> 
    </body> 
</html>

來源

2013-07-25 Jako

兩件事情： 1. Leap.js庫恢復這是在一個點上實現Vector類。所以矢量（再次）是數組而不是對象。這使得它translation[0]，而不是translation.x。 2.你必須檢查幀的有效性。 Leap Motion API中的對象可能無效，這意味着它們是完全形成的對象，但具有0 /標識屬性。這有助於避免大量未定義的對象，但確實有一些陷阱。在存儲幀之前，請嘗試檢查!firstValidFrame && frame.valid。

var controller = new Leap.Controller({enableGestures: true}); 
var firstValidFrame = null; 

     controller.loop(function(frame) { 
     if (!firstValidFrame && frame.valid) firstValidFrame = frame; 
     var translation = frame.translation(firstValidFrame); 
     console.log("X:" + translation[0]); 
     $('#box').css({marginLeft: translation.x}); 
     });

來源

2013-07-25 23:56:29

謝謝，這幫助我朝着正確的方向前進！ – Jako

使用Leapmotion移動DIV

回答

相關問題