events based princh primary (rather than .addEventListener()

in-situ-instructions
Fabien Benetou 8 months ago
parent 58b1ec5d69
commit c7e76c8efc
  1. 2
      index.html
  2. 57
      jxr-core.js

@ -8,7 +8,7 @@
<script src='dependencies/aframe-troika-text.min.js'></script> <script src='dependencies/aframe-troika-text.min.js'></script>
<script src='dependencies/webdav.js'></script> <script src='dependencies/webdav.js'></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.1.0/dist/aframe-extras.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.1.0/dist/aframe-extras.min.js"></script>
<script src='jxr-core.js?123456'></script> <script src='jxr-core.js?12345'></script>
<script src='jxr-postitnote.js?13235'></script> <script src='jxr-postitnote.js?13235'></script>
</head> </head>
<body> <body>

@ -149,24 +149,11 @@ AFRAME.registerComponent('pinchsecondary', {
} }
}); });
// grouping and distance between last two pinches should be rewritten, simplified and more reliable
AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right one, should be switchable AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right one, should be switchable
events: {
// consider instead https://github.com/AdaRoseCannon/handy-work/blob/main/README-AFRAME.md for specific poses pinchended: function (event) {
// or https://aframe.io/aframe/examples/showcase/hand-tracking/pinchable.js let closests = getClosestTargetElements( event.detail.position )
init: function () {
var el = this.el
this.el.addEventListener('pinchended', function (event) {
// if positioned close enough to a target zone, trigger action
// see own trigger-box component. Could use dedicated threejs helpers instead.
// https://github.com/Utopiah/aframe-triggerbox-component/blob/master/aframe-triggerbox-component.js#L66
// could make trigger zones visible as debug mode
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") )
/*
somehow #box MUST exist, otherwise craches?!
*/
let dist = 100 let dist = 100
if ( document.querySelector("#box") ) if ( document.querySelector("#box") )
dist = event.detail.position.distanceTo( document.querySelector("#box").object3D.position ) dist = event.detail.position.distanceTo( document.querySelector("#box").object3D.position )
@ -182,22 +169,13 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
selectedElement = null; selectedElement = null;
if ( groupingMode ) addToGroup( event.detail.position ) if ( groupingMode ) addToGroup( event.detail.position )
selectionPinchMode = false selectionPinchMode = false
/*
setHUD( AFRAME.utils.coordinates.stringify( bbox.min ),
AFRAME.utils.coordinates.stringify( bbox.max ) )
bbox.min.copy( zeroVector3 )
bbox.man.copy( zeroVector3 )
*/
setTimeout( _ => primaryPinchStarted = false, 200) // delay otherwise still activate on release setTimeout( _ => primaryPinchStarted = false, 200) // delay otherwise still activate on release
var newPinchPos = new THREE.Vector3() var newPinchPos = new THREE.Vector3()
newPinchPos.copy(event.detail.position ) newPinchPos.copy(event.detail.position )
pinches.push({position:newPinchPos, timestamp:Date.now(), primary:true}) pinches.push({position:newPinchPos, timestamp:Date.now(), primary:true})
dl2p = distanceLastTwoPinches() dl2p = distanceLastTwoPinches()
},
}); pinchmoved: function (event) {
this.el.addEventListener('pinchmoved', function (event) {
// move current target if any
if (selectionPinchMode){ if (selectionPinchMode){
bbox.max.copy( event.detail.position ) bbox.max.copy( event.detail.position )
if (!bbox.min.equal(zeroVector3)) if (!bbox.min.equal(zeroVector3))
@ -212,32 +190,21 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
}) })
// rotation isn't ideal with the wrist as tend not have wrist flat as we pinch // rotation isn't ideal with the wrist as tend not have wrist flat as we pinch
} }
if (selectedElement) selectedElement.emit("moved") if (selectedElement) selectedElement.emit("moved") // consider adding as data selectedElement
}); },
this.el.addEventListener('pinchstarted', function (event) { pinchstarted: function (event) {
primaryPinchStarted = true primaryPinchStarted = true
if (!selectionPinchMode) bbox.max.copy( zeroVector3 ) if (!selectionPinchMode) bbox.max.copy( zeroVector3 )
//var clone = getClosestTargetElement( event.detail.position ).cloneNode()
// might want to limit cloning to unmoved element and otherwise move the cloned one
//AFRAME.scenes[0].appendChild( clone )
//targets.push( clone )
//selectedElement = clone
selectedElement = getClosestTargetElement( event.detail.position ) selectedElement = getClosestTargetElement( event.detail.position )
if (selectedElement) { if (selectedElement) {
selectedElements.push({element:selectedElement, timestamp:Date.now(), primary:true}) selectedElements.push({element:selectedElement, timestamp:Date.now(), primary:true})
selectedElement.emit("picked") selectedElement.emit("picked")
} }
// is it truly world position? See https://github.com/aframevr/aframe/issues/5182
// setFeedbackHUD( AFRAME.utils.coordinates.stringify( event.detail.position ) )
// if close enough to a target among a list of potential targets, unselect previous target then select new
});
},
remove: function() {
// should remove event listeners here. Requires naming them.
} }
}); }
// should remove event listeners
})
// avoiding setOnDropFromAttribute() as it is not idiosyncratic and creates timing issues // avoiding setOnDropFromAttribute() as it is not idiosyncratic and creates timing issues
AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent with event name AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent with event name

Loading…
Cancel
Save