Blog

Blog

PHODAL

Node.js Leap Motion Hello World——开启AR的小窗

Leap Motion的官方已经有一个名为LeapJS的库,但是官方没有做好一个Node.js的Demo,有的都是Client Side的一些示例。

在最开始的时候给我造成了极大的困惑,我以为启动Leap Motion的应用就可以直接运行官方的Demo——在这个应用里会运行WebSocket的Server。

Leap Motion Node.js 服务端

这时候,我们需要一个简单的服务端代码来启动这个WebSocket Server。按照官方的node包,则是setupConnectionEvents

首先,我们需要先初始化一个controller:

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

然后就是在启动和断开的时候打个Log

controller.on('connect', function (data) {
  console.log("Successfully connected.");
});

controller.on('streamingStarted', function (data) {
  console.log("A Leap device has been connected.");
});

controller.on('streamingStopped', function (data) {
  console.log("A Leap device has been disconnected.");
});

接着,就可以连接了:

controller.connect();

最后,我们就可以在浏览器上访问这个WebSocket Server了。

Leap Motion 浏览器访问

Leap Motion提供了leapjs,用于浏览器访问。如其源码所示,默认的端口是6437:

BaseConnection.prototype.getUrl = function() {
  return this.scheme + "//" + this.host + ":" + this.port + "/v" + this.opts.requestProtocolVersion + ".json";
}

BaseConnection.prototype.getScheme = function(){
  return 'ws:'
}

BaseConnection.prototype.getPort = function(){
  return 6437
}

接着,我们所需要做的就是创建一个web app。然后,先用官方的Demo:

Leap.loop({

  hand: function(hand){
    console.log( hand.screenPosition() );
  }

}).use('screenPosition');

然后,启动Server,刷新浏览器,在Leap Motion上面动动,就会有下面的结果:

[-65.61160000000001, 160.66859999999997, 72.7992]
[-165.05679999999995, 172.716, 83.8854]
[-222.02319999999997, 157.9176, 83.9886]
[-270.48220000000003, 164.90820000000002, 86.7462]
[-319.08939999999996, 189.69539999999995, 86.4468]
[-347.6512, 236.19600000000003, 76.0038]
[-407.668, 261.657, 72.2484]

现在,我们就可以连接更多的东西~~。

关于我

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

微信公众号: 与我沟通

标签