From d0999b87e010a012e55c9e0a1d2aa1654a451b6e Mon Sep 17 00:00:00 2001 From: Fabien Benetou Date: Wed, 1 May 2024 17:04:59 +0200 Subject: [PATCH] examples --- index.html | 725 +++++++++++++++++++++++++++++++++++++++++----------- jxr-core.js | 30 ++- 2 files changed, 604 insertions(+), 151 deletions(-) diff --git a/index.html b/index.html index 3d663bf..5af902d 100644 --- a/index.html +++ b/index.html @@ -7,97 +7,542 @@ - + + -
@@ -221,8 +648,27 @@ setTimeout( _ => {
- - + + + + + + + + + + + + + + + + + { - - - - - - + - + - + - + + + + + + + + + + + + + + + + + + + + + - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/jxr-core.js b/jxr-core.js index 2c990c2..8167d97 100644 --- a/jxr-core.js +++ b/jxr-core.js @@ -33,11 +33,21 @@ AFRAME.registerComponent('target', { targets.push( this.el ) this.el.classList.add("collidable") } + // on remove should also remove from targets, e.g targets = targets.filter( e => e != target) }) -function getClosestTargetElements( pos, threshold=0.05 ){ +function getClosestTargetElements( pos, threshold=0.05 ){ // if done frequently on large amount of targets, e.g hover on keyboard keys, consider proper structure e.g octree instead // TODO Bbox intersects rather than position - return targets.filter( e => e.getAttribute("visible") == true).map( t => { return { el: t, dist : pos.distanceTo(t.getAttribute("position") ) } }) + return targets.filter( e => e.getAttribute("visible") == true) + // .map( t => { return { el: t, dist : pos.distanceTo(t.getAttribute("position") ) } }) + // limited to local position + .map( t => { + let posTarget = new THREE.Vector3() + t.object3D.getWorldPosition( posTarget ) + let d = pos.distanceTo( posTarget ) + return { el: t, dist : d } + }) + // needs reparenting to scene via attach() otherwise lead to strange behavior .filter( t => t.dist < threshold && t.dist > 0 ) .sort( (a,b) => a.dist > b.dist) } @@ -154,7 +164,12 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o var closests = getClosestTargetElements( event.detail.position ) //if (closests && closests.length > 0) // avoiding self reference // setFeedbackHUD("close enough, could stack with "+ closests[1].el.getAttribute("value") ) - var dist = event.detail.position.distanceTo( document.querySelector("#box").object3D.position ) + /* + somehow #box MUST exist, otherwise craches?! + */ + let dist = 100 + if ( document.querySelector("#box") ) + dist = event.detail.position.distanceTo( document.querySelector("#box").object3D.position ) if (dist < .1){ setFeedbackHUD("close enough, replaced shortcut with "+ selectedElement.getAttribute("value") ) wristShortcut = selectedElement.getAttribute("value") @@ -227,6 +242,7 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o // avoiding setOnDropFromAttribute() as it is not idiosyncratic and creates timing issues AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent with event name // could support multi +// could check if target component is already present on this.el, if not, add it as it's required events: { released: function (e) { let code = this.el.getAttribute('onreleased') @@ -242,6 +258,7 @@ AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent w AFRAME.registerComponent('onpicked', { // could support multi +// could check if target component is already present on this.el, if not, add it as it's required events: { picked: function (e) { let code = this.el.getAttribute('onpicked') @@ -600,8 +617,8 @@ AFRAME.registerComponent('start-on-press', { init: function(){ let el = this.el this.el.addEventListener('pressedended', function (event) { -console.log(event) -// should ignore that if we entered XR recently + console.log(event) + // should ignore that if we entered XR recently if (!primaryPinchStarted && wristShortcut.match(prefix)) interpretJXR(wristShortcut) // seems to happen also when entering VR // other action could possibly based on position relative to zones instead, i.e a list of bbox/functions pairs @@ -776,7 +793,8 @@ function switchSide(){ document.querySelector("#"+sides[secondarySide]+"Hand").removeAttribute("wristattachsecondary") document.querySelector("#"+sides[secondarySide]+"Hand").setAttribute("pinchprimary", "") document.querySelector("#"+sides[primarySide]+"Hand").setAttribute("pinchsecondary", "") - document.querySelector("#"+sides[primarySide]+"Hand").setAttribute("wristattachsecondary", "target: #box") + if ( document.querySelector("#box") ) + document.querySelector("#"+sides[primarySide]+"Hand").setAttribute("wristattachsecondary", "target: #box") if (primarySide == 0) { secondarySide = 0 primarySide = 1