使用Leadmotion移动DIV

Moving DIV with Leapmotion

本文关键字：DIV 移动 Leadmotion 使用      更新时间：2023-09-26

我正在尝试使用leapmotion JS API在网站上移动div。

我找到了一个教程，并对它进行了一些修改，因为它似乎不起作用。

这是我到目前为止所想到的，但是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>

两件事：1.Leap.js库恢复了曾经实现的Vector类。所以向量（再次）是数组而不是对象。这使得它成为translation[0]而不是translation.x。2.您必须检查帧的有效性。Leap Motion API中的对象可能无效，这意味着它们是完全形成的对象，但具有0/identity属性。这有助于避免大量未定义的对象，但也有一些问题。在存储帧之前，请尝试检查!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});
      });
相关文章：