Blog

Blog

PHODAL

Leap Motion JavaScript开发 手势控制基础篇

在上篇《Node.js Leap Motion 开启AR的小窗 》中,我们介绍了如何写一个Leap Motion的Hello World。

这一篇,让我们来玩玩简单的手势控制。

Leap Motion JavaScript手势控制

这次,我们需要在起Server的时候,允许手势控制:

var  leapjs = require('leapjs'),
  controller = new leapjs.Controller({
    enableGestures: true,
    frameEventName: 'animationFrame'
  });

然后,就是客户端代码。

这时,我们的客户端将通过ws://127.0.0.1:6437/v6.json来获取一些相关的数据,如下是一个手势时返回的数据:

[
    {
        "currentFrameRate": 115.121,
        "devices": [],
        "gestures": [
            {
                "direction": [
                    0.043004399999999998,
                    0.99689099999999997,
                    -0.066029199999999996
                ],
                "duration": 0,
                "handIds": [
                    646
                ],
                "id": 7,
                "pointableIds": [
                    6461
                ],
                "position": [
                    -33.822299999999998,
                    196.53899999999999,
                    -100.524
                ],
                "speed": 223.33099999999999,
                "startPosition": [
                    -39.386699999999998,
                    67.549899999999994,
                    -91.980800000000002
                ],
                "state": "start",
                "type": "swipe"
            }
        ]
   ...
]

通过判断数据中的gesture.type,我们可以判断这是一个Swipe(滑动)手势。

如下是一个circle类似:

"gestures": [
            {
                "center": [
                    -41.580500000000001,
                    124.26600000000001,
                    -15.910399999999999
                ],
                "duration": 0,
                "handIds": [
                    645
                ],
                "id": 11,
                "normal": [
                    0.75557799999999997,
                    -0.176064,
                    0.63095400000000001
                ],
                "pointableIds": [
                    6450
                ],
                "progress": 0.78971100000000005,
                "radius": 36.578299999999999,
                "state": "start",
                "type": "circle"
            }
        ],

我们只需要通过判断gesture.direction的值就可以判断是往哪个方面,代码如下:

var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
//Classify as right-left or up-down
if (isHorizontal) {
  if (gesture.direction[0] > 0) {
    swipeDirection = "right";
  } else {
    swipeDirection = "left";
  }
} else { //vertical
  if (gesture.direction[1] > 0) {
    swipeDirection = "up";
  } else {
    swipeDirection = "down";
  }
}

Leap Motion手势控制

So,我们可以判断下手势的类似:

Leap.loop(function (frame) {
    if (frame.valid && frame.gestures.length > 0) {
      frame.gestures.forEach(function (gesture) {
        switch (gesture.type) {
          case "circle":
            console.log("Circle Gesture");
            break;
          case "keyTap":
            console.log("Key Tap Gesture");
            break;
          case "screenTap":
            console.log("Screen Tap Gesture");
            break;
          case "swipe":
            console.log("Swipe");
            handleSwipe(gesture);
            break;
        }
      });
    }

随后,依据手势的类似来判断方向,如:

      var handleSwipe = function (gesture) {
        var swipeDirection;
        //Classify swipe as either horizontal or vertical
        var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
        //Classify as right-left or up-down
        if (isHorizontal) {
          if (gesture.direction[0] > 0) {
            swipeDirection = "right";
          } else {
            swipeDirection = "left";
          }
        } else { //vertical
          if (gesture.direction[1] > 0) {
            swipeDirection = "up";
          } else {
            swipeDirection = "down";
          }
        }
        console.log(swipeDirection);
        window.swipeDirection = swipeDirection;
        return swipeDirection;
      };

等我们完成了更多的连接和判断,我们就可以完成与Oculus的集成。


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签