hand-tracking-controls component detaches children (+fix & ideas)

• A-Frame Version: 1.5.0
• Platform / Device: Firefox/Brave

Normal/Expected behaviour:

<a-entity laser-controls="hand:left">
  <!-- adding objects here will attach it to the controller just fine -->
</a-entity>

however...after adding hand-tracking-controls

<a-entity laser-controls="hand:left" hand-tracking-controls="hand:left">
  <!-- here the objects no longer show up..neither with controller nor hand-tracking :/ -->
</a-entity>

Fix

This patch will re-attach the children to the wrist.

AFRAME.components['hand-tracking-controls'].Component.prototype.onModelLoaded = function(onModelLoaded){
  return function(e){
    onModelLoaded.apply(this);
    // re-attach children 
    ([...this.el.children]).map( (c) => {
      if( c.object3D ){
        this.el.object3D.getObjectByName("wrist").add(c.object3D)
      }
    })
  }
}(AFRAME.components['hand-tracking-controls'].Component.prototype.onModelLoaded)

I'm not really sure what the right solution is, as not every hand model might contain a 'wrist' object.

I played with several ideas:

• add the code above directly to onModelLoaded of hand-tracking-controls
• introduce an attribute <a-entity hand-tracking-controls="children: 'wrist'"> which is wrist by default e.g.
• introduce an component hand-attach="wrist: #foo; index: #bar which allows for finer-grained parenting

One remaining question is how to deal with switching between hands/laser-controllers.

Hope this helps!

Start at the hand-tracking-controls component's onModelLoaded entry point and reproduce the child-detachment example in Firefox or Brave. Review the proposed wrist re-attachment and the alternatives in the issue; done requires a decided behavior for children across hand models and hand/controller switching, with regression coverage.