Trying to render Leap.js boneHands in React-Three-Renderer (approach #1)

[frantic0]

Hello,

I am trying to build a React component to render the Leapmotion boneHand model from 'leapjs-plugins'. As advertised in the boneHand plugin demo code below should be the easiest way to add hands to a THREE.js application. In vanila JS this was straightforward with a canvas element.

 // At the simplest:
  Leap.loop()
    .use('boneHand', {
      targetEl: document.body,
      arm: true
    });

However I found that in React, I need to use React-Three-Renderer (R3R), which is a Three.js wrapper. I am running into issues trying to inject the Leap boneHand meshes into the Scene that is created by R3R in the React component Render method, just like bellow.

  render() {
    const { width, height } = this.props;

    return (
      <React3
        mainCamera="camera" // this points to the perspectiveCamera below
        width={width}
        height={height}
        onAnimate={this._onAnimate}>
        <scene ref={node => this.setupScene(node)}>
          <perspectiveCamera
            name="camera"
            fov={75}
            aspect={width / height}
            near={0.1}
            far={1000}
            position={this.cameraPosition}
          />
          <mesh rotation={this.state.cubeRotation1}>
            <boxGeometry
              width={1}
              height={1}
              depth={1}
            />
          <meshBasicMaterial color={0xff0000} />
          </mesh>
        </scene>
      </React3>
    );
  }
}

There is an optional parameter to provide a THREE.scene to Leap.loop(). I need to get the reference of the scene component above into an instance variable like so

<scene ref={node => this.setupScene(node)}>

Now, the first thing that I tried was to use React lifecycle componentDidMount method to start the Leap.loop

`componentDidMount(){

console.log('componentDidMount');
console.log(this.leapScene);

(window.controller = new Leap.Controller())
  .use('boneHand', {
    scene: this.leapScene,
    opacity: 3,
    arm : false
  })
  .connect()


// Leap.loop({background: true})  // ALTERNATIVE CODE THAT YIELDS THE SAME ERRORS
// .use('boneHand', {
//   scene: this.leapScene,
//   opacity: 3,
//   arm : false
// })
// .connect()

}`

This approach gives 86 errors of this type, which must refer to the different elements of the hand models.

index.js:2178 THREE.Object3D.add: object not an instance of THREE.Object3D. ./node_modules/leapjs-plugins/node_modules/three/three.js.THREE.Mesh 

I'm not sure what it is but it seems an internal incompatible type in the Leap.controller or Leap plugin.

Any ideas about this?

[speedo-sp7]

Hi, were you success in rendering the hand? I need something very similar but with no success. Thanks