chore/better-handcontrol: work in progress [might break]

src/3rd/js/aframe/pressable.js

@@ -1,55 +0,0 @@
-//// this makes WebXR hand controls able to click things (by touching it)
-
-AFRAME.registerComponent('pressable', {
-
-  init: function(){
-    let handEls = [...document.querySelectorAll('[hand-tracking-controls]')]
-
-    for( let i in handEls ){
-      let handEl = handEls[i]
-      handEl.addEventListener('model-loaded', () => {
-        if( handEl.pressable ) return
-
-        // wait for bones get initialized
-        setTimeout( () => {
-          let bones = handEl.components['hand-tracking-controls'].bones
-          let indexFinger
-          for( let i = 0; i < bones.length; i++){
-            if( bones[i].name == "index-finger-tip" ){
-              indexFinger = i
-              break
-            }
-          }
-          // add obb-collider to index finger-tip
-          let aentity = document.createElement('a-entity')
-          trackedObject3DVariable = `parentNode.components.hand-tracking-controls.bones.${indexFinger}`;
-          console.log(trackedObject3DVariable)
-          handEl.appendChild(aentity)
-          aentity.setAttribute('obb-collider', {trackedObject3D: trackedObject3DVariable, size: 0.015});
-        },500)
-      })
-    }
-
-  },
-
-
-  events:{
-    obbcollisionstarted: function(e){
-      if( !e.detail.trackedObject3D ) return
-      if( e.currentTarget && e.currentTarget.emit ){
-        //e.currentTarget.emit('click',
-      }
-      console.dir(e)
-    },
-    "xrf-get": function(){
-      //this.el.setAttribute('obb-collider',{trackedObject3D: 'el.object3D.child' }) // set collider on xrf-get object
-      let aentity = document.createElement('a-entity')
-      trackedObject3DVariable = this.el.object3D.child ? `parentNode.object3D.child` : `parentNode.object3D`
-      console.log(trackedObject3DVariable)
-      this.el.appendChild(aentity)
-      aentity.setAttribute('obb-collider', {trackedObject3D: trackedObject3DVariable});
-    }
-
-  }
-
-})

src/3rd/js/aframe/xrf-button.js

@@ -40,7 +40,7 @@ window.AFRAME.registerComponent('xrf-button', {
             transparent:true,
             opacity:0.3
         });
-        el.setAttribute('pressable', '');
+        el.setAttribute('xrf-pressable', '');
         labelEl.setAttribute('position', '0 0 0.01');
         labelEl.setAttribute('text', {
             value: this.data.label,

src/3rd/js/aframe/xrf-pressable.js

@@ -14,6 +14,11 @@ AFRAME.registerComponent('xrf-pressable', {
       if( !e.detail.trackedObject3D ) return
       console.dir(e)
     },
+    indexFingerReady: function(){
+      if( this.system.indexFinger.length == 2){
+        console.dir(this.system.indexFinger)
+      }
+    }
   }
 
 })
@@ -28,34 +33,40 @@ AFRAME.registerSystem('xrf-pressable',{
     let handEls      = [...document.querySelectorAll('[hand-tracking-controls]')]
     this.indexFinger = []
 
-    for( let i in handEls ){
+    const me = this
-      let handEl = handEls[i]
-      handEl.addEventListener('model-loaded', () => {
 
-        // wait for bones get initialized
+    const addColliderToFingerTip = function(handEl,indexFinger){
-        setTimeout( () => {
-          let bones = handEl.components['hand-tracking-controls'].bones
-          let indexFinger
-          for( let j = 0; j < bones.length; i++){
-            if( bones[j].name == "index-finger-tip" ){
-              indexFinger = j
-              console.log("ja")
-              this.indexFinger.push(bones[j])
-              console.dir(this.indexFinger)
-              break
-            }
-          }
       // add obb-collider to index finger-tip
       let aentity = document.createElement('a-entity')
       trackedObject3DVariable = `parentNode.components.hand-tracking-controls.bones.${indexFinger}`;
       handEl.appendChild(aentity)
       aentity.setAttribute('obb-collider', {trackedObject3D: trackedObject3DVariable, size: 0.015});
-          console.dir(this.indexFinger)
+      return this
+    }
+
+    for( let i in handEls ){
+      let handEl = handEls[i]
+      handEl.addEventListener('model-loaded', function(e){
+        const handEl = this
+        // wait for bones get initialized
+        setTimeout( () => {
+          let bones = handEl.components['hand-tracking-controls'].bones
+          let indexFinger
+          for( let j = 0; j < bones.length; j++){
+            if( bones[j].name == "index-finger-tip" ){
+              indexFinger = j
+              me.indexFinger.push(bones[j])
+              addColliderToFingerTip(handEl,indexFinger)
+              const els = [...document.querySelectorAll('[xrf-pressable]')]
+              els.map( (el) => el.emit('indexFingerReady',{}) )
+              break
+            }
+          }
         },500)
       })
     }
 
-  },
+  }
 
 
 })