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

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

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

联系我: h@phodal.com

微信公众号: 与我沟通

标签