AFRAME.registerComponent('wearable', {
  schema:{
    el: {type:"selector"},
    position: {type:"vec3"}, 
    rotation: {type:"vec3"} 
  }, 
  init: function(){
    this.position = this.el.object3D.position.clone()
    this.rotation = this.el.object3D.rotation.clone()
    if( !this.el ) return console.warn(`wear.js: cannot find ${this.data.el}`)
    let ctl = this.data.el

    // hand vs controller attach-heuristics
    this.el.sceneEl.addEventListener('controllersupdated', (e) => {
      if( !this.data.el.components['hand-tracking-controls'].controllerPresent ){
        this.attach( ctl.components['hand-tracking-controls'].wristObject3D ) 
      }else{
        this.attach( ctl.object3D )
      }
    })
  },

  attach: function(target){
    if( target.uuid == this.el.object3D.parent.uuid ) return; // already attached 
    target.add(this.el.object3D)
    this.el.object3D.position.copy( this.data.position )
    this.el.object3D.rotation.copy( this.data.rotation )
    target.updateMatrixWorld();
  }
})