openleap / aframe-leap-hands Goto Github PK

View Code? Open in Web Editor NEW

165.0 17.0 24.0 538 KB

A-Frame VR component for Leap Motion.

License: MIT License

JavaScript 100.00%

leap-motion aframe

aframe-leap-hands's Introduction

A-Frame VR `leap-hand` for Leap Motion

A-Frame VR component for Leap Motion controller.

Installation (Scripts)

In the dist/ folder, download either the minified or unminified build. Include the scripts on your page, and all components are automatically registered for you.

Or, use a CDN-hosted version:

<script src="//unpkg.com/aframe-leap-hands/dist/aframe-leap-hands.umd.js"></script>

Installation (NPM)

Using NPM and Browserify or Webpack:

npm install --save aframe-leap-hands

require('aframe');
require('aframe-leap-hands');

Usage

<a-entity camera="near: 0.01" look-controls position="0 1.5 0">
  <a-entity leap-hand="hand: left"></a-entity>
  <a-entity leap-hand="hand: right"></a-entity>
</a-entity>

Options

`leap-hand` component:

Property	Default	Description
hand	—	`left` or `right`
enablePhysics	false	Adds a physics body for aframe-physics-system.
holdDistance	0.2	Holding distance, in meters.
holdDebounce	100	Debouncing on grip, in milliseconds.
holdSelector	`[holdable]`	Selector that limits which objects may be held.
holdSensitivity	0.95	0—1.
releaseSensitivity	0.75	0–1.
debug	false	Shows a grip target indicator.

`leap` system:

Property	Default	Description
vr	true	If true, sets default VR position and quaternion.
scale	0.001
position	`0 0 0`
quaternion	`0 0 0 1`

For example, to set both hands to desktop configuration:

<a-scene leap="vr: false">
  <a-entity leap-hand="hand: left"></a-entity>
  <a-entity leap-hand="hand: right"></a-entity>
</a-scene>

References:

Official

Third-party

THREE.LeapMotion Wrapper discussion and GitHub

aframe-leap-hands's People

Contributors

Stargazers

Watchers

aframe-leap-hands's Issues

Rotation is unreliable / off

Not sure what's going on here. My quaternion-foo isn't cutting it.

Grabby UX

Merge grab/pinch gestures into a single more reliable gesture.
Use the raycaster (palmNormal + index finger) for simpler picking.
~~Use a distanceTo() fallback for fiddly stuff, perhaps.~~

No hands, no errors in a-frame 7.1

I pasted the 'usage' example into a simple a-frame scene. It seems to work fine in older versions of a-frame, up to 6.0, but when I try it in a-frame 7.1, I can't see my hands. I also don't get any errors in the console, so I'm not really sure how to go about debugging this.

Is this project still maintained? Is it even intended to work with newer versions of a-frame?

Thanks!

Dist is excluded from NPM :/

... which breaks A-Frame inspector.

Add docs on system options

changing orientation, etc.

Rotation isn't available in physics bodies

Desktop/VR Toggle

Aframe hands automatically assumes you are using VR but doesn't provide a way to switch to Desktop mode.

I also noticed in your Leap-System, the VR flag is defined in the schema, but then not used beyond that.

Are you planning on implementing this toggle functionality?

Cheers,
Tom

Enhancement: Disabling HMD Mode when not in VR Mode

While AFrame is primarily a VR framework, I find the declarative nature of AFrame in building Three.js scenes much more readable and maintainable. For that reason, I suggest that this library does not assume the Leap Motion is being used as part of an HMD.

I have, as an experiment, already created listeners for the scene that will change the transform to HMD when put in VR mode. However, it may be more desirable to have the HMD mode to exist independent of the mode in which AFrame is operating.

Either way, let me know if you think this is a feature worth considering.

Enhancement: Allow for Update of Transform Plugin

The position, rotation, and scale properties of the Transform plugin are currently locked. Proposed enhancement would expose an API on the leap system to allow for alteration of these properties. These properties would also be set declaratively by leap-configuration component.

Getting started

https://aframe.io/faq/#Is-anyone-working-on-Leap-Motion-support

Planning to start on this repo when HMD arrives.

Raycaster is flakey

Bad direction? Origin? Raycaster's fault?

Other resources

https://github.com/leapmotion/javascript/pulse

https://github.com/leapmotion/leapjs-rigged-hand

'ReferenceError: assignment to undeclared variable Leap', when using Webpack

When importing aframe and aframe-leap-hands, I think somehow the latter isn't loaded before the a-scene is created, because it results in the following error: 'ReferenceError: assignment to undeclared variable Leap'. Maybe the fact that the main.js file is loaded in the body is the culprit here?

Would you perhaps know what the issue could be here?

webpack.config.js:

const path = require('path');

module.exports = { 
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: './dist'
  }
};

src/index.js:

import aframe from 'aframe';
import 'aframe-leap-hands';

And finally, the adjusted code from your example leap-hands.
dist/index.html:

<!doctype html>
  <html>
   <head>
    	<title>Getting Started</title>
   </head>
   <body>
   	<script src="main.js"></script>

<a-scene>
      <!-- Player -->
      <a-entity camera="near: 0.01" look-controls>
        <a-entity leap-hand="hand: left"></a-entity>
        <a-entity leap-hand="hand: right"></a-entity>
      </a-entity>

      <!-- Terrain -->
      <a-grid></a-grid>

      <!-- Lighting -->
      <a-light type="ambient" color="#ccc"></a-light>
      <a-light color="#ddf" distance="100" intensity="0.4" type="point"></a-light>
      <a-light color="#ddf" position="3 10 -10" distance="50" intensity="0.4" type="point"></a-light>
    </a-scene>


   </body>
  </html>

Consider running under openleap org

probably decide before stable release

Create dist/ files.

Issues with CANNON and this.physics

When downloading the repository and running the examples, I run into an issue where this.physics is undefined in the hand-body.js script. Also, I have learned recently that CANNON physics engine no longer works with A-Frame. I was wondering if we could implement a version that uses AMMO instead? Ammo.js is still compatible withA-Frame and aframe-physics-system. Thank you!

Type error for enablePhysics: true

I'm getting a type error using the grabbing example.

I'm using aframe 0.8.2, aframe-extras and aframe-system-physics

TypeError: this.physics.Phase is undefined[Learn More]

Any tips much appreciated!
Thanks
Michael