diff --git a/src/3rd/js/aframe/index.js b/src/3rd/js/aframe/index.js index a201091..635e5b3 100644 --- a/src/3rd/js/aframe/index.js +++ b/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 diff --git a/src/3rd/js/aframe/xrf-get.js b/src/3rd/js/aframe/xrf-get.js index 7c80587..961f925 100644 --- a/src/3rd/js/aframe/xrf-get.js +++ b/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) diff --git a/src/3rd/js/aframe/xrf-pressable.js b/src/3rd/js/aframe/xrf-pressable.js new file mode 100644 index 0000000..4027bc7 --- /dev/null +++ b/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) + }) + } + + }, + + +}) + diff --git a/src/3rd/js/three/util/interactive.js b/src/3rd/js/three/util/interactive.js index 3b1c63a..19120a1 100644 --- a/src/3rd/js/three/util/interactive.js +++ b/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){