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

src/3rd/js/aframe/index.js

@@ -148,7 +148,7 @@ window.AFRAME.registerComponent('xrf', {
         let createEl            = function(c){
           let el = document.createElement("a-entity")
           // raycaster
-          el.setAttribute("pressable", '' )      // detect click via hand-detection
+          el.setAttribute("xrf-pressable", '' )  // detect click via hand-detection
           el.setAttribute("xrf-get",c.name )     // turn into AFRAME entity
           el.setAttribute("class","ray")         // expose to raycaster 
 

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

@@ -49,7 +49,7 @@ window.AFRAME.registerComponent('xrf-get', {
           this.el.object3D.child = mesh    // keep reference (because .children will be empty)
 
           if( !this.el.id ) this.el.setAttribute("id",`xrf-${mesh.name}`)
-          this.el.emit('xrf-get',{})
+          this.el.emit('model-loaded',{})
         }
 
       }, evt && evt.timeout ? evt.timeout: 500)

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

@@ -0,0 +1,62 @@
+//// this makes WebXR hand controls able to click things (by touching it)
+
+AFRAME.registerComponent('xrf-pressable', {
+
+  init: function(){
+  },
+
+  tick: function(){
+ //   if( this.system.indexFinger.length ) debugger
+  },
+
+  events:{
+    obbcollisionstarted: function(e){
+      if( !e.detail.trackedObject3D ) return
+      console.dir(e)
+    },
+  }
+
+})
+
+AFRAME.registerSystem('xrf-pressable',{
+
+  init: function(){
+    this.sceneEl.addEventListener('loaded', () => this.getFingers() )
+  },
+
+  getFingers: function(){
+    let handEls      = [...document.querySelectorAll('[hand-tracking-controls]')]
+    this.indexFinger = []
+
+    for( let i in handEls ){
+      let handEl = handEls[i]
+      handEl.addEventListener('model-loaded', () => {
+
+        // wait for bones get initialized
+        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)
+        },500)
+      })
+    }
+
+  },
+
+
+})
+

src/3rd/js/three/util/interactive.js

@@ -145,6 +145,23 @@ xrf.interactiveGroup = function(THREE,renderer,camera){
 
     }
 
+    intersectBox( obj ){
+      const mesh2Box = (mesh) => {
+        let b = new THREE.Box3()
+        b.expandByObject(mesh)
+        return b
+      }
+
+      const objBox   = mesh2Box(obj) 
+      let objects    = scope.raycastAll ? getAllMeshes(xrf.scene) : scope.objects 
+      let intersects = []
+      objects.map( (objB) => {
+        if( !objB.box ) objB.box = mesh2Box(objB)
+        if( objB.box.intersectsBox(objBox) ) intersects.push(obj.box)
+      })
+      return
+    }
+
     // we create our own add to avoid unnecessary unparenting of buffergeometries from 
     // their 3D model (which breaks animations)
     add(obj, unparent){