utopiah
/
text-code-xr-engine
1
0
Fork 0
Code Issues 81 Pull Requests Projects Releases Wiki Activity

events based princh primary (rather than .addEventListener()

Browse Source
in-situ-instructions
Fabien Benetou 8 months ago
parent 58b1ec5d69
commit c7e76c8efc
2 changed files with 55 additions and 88 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      index.html
  2. 141
      jxr-core.js

2
index.html
Unescape View File

@ -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>

141
jxr-core.js
Unescape View File

@ -149,95 +149,62 @@ 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 )
let dist = 100
init: function () { if ( document.querySelector("#box") )
var el = this.el dist = event.detail.position.distanceTo( document.querySelector("#box").object3D.position )
this.el.addEventListener('pinchended', function (event) { if (dist < .1){
// if positioned close enough to a target zone, trigger action setFeedbackHUD("close enough, replaced shortcut with "+ selectedElement.getAttribute("value") )
// see own trigger-box component. Could use dedicated threejs helpers instead. wristShortcut = selectedElement.getAttribute("value")
// https://github.com/Utopiah/aframe-triggerbox-component/blob/master/aframe-triggerbox-component.js#L66 }
// could make trigger zones visible as debug mode if (selectedElement){
var closests = getClosestTargetElements( event.detail.position ) let content = selectedElement.getAttribute("value")
//if (closests && closests.length > 0) // avoiding self reference selectedElement.emit('released', {element:selectedElement, timestamp:Date.now(), primary:true})
// setFeedbackHUD("close enough, could stack with "+ closests[1].el.getAttribute("value") ) }
/* // unselect current target if any
somehow #box MUST exist, otherwise craches?! selectedElement = null;
*/ if ( groupingMode ) addToGroup( event.detail.position )
let dist = 100 selectionPinchMode = false
if ( document.querySelector("#box") ) setTimeout( _ => primaryPinchStarted = false, 200) // delay otherwise still activate on release
dist = event.detail.position.distanceTo( document.querySelector("#box").object3D.position ) var newPinchPos = new THREE.Vector3()
if (dist < .1){ newPinchPos.copy(event.detail.position )
setFeedbackHUD("close enough, replaced shortcut with "+ selectedElement.getAttribute("value") ) pinches.push({position:newPinchPos, timestamp:Date.now(), primary:true})
wristShortcut = selectedElement.getAttribute("value") dl2p = distanceLastTwoPinches()
} },
if (selectedElement){ pinchmoved: function (event) {
let content = selectedElement.getAttribute("value") if (selectionPinchMode){
selectedElement.emit('released', {element:selectedElement, timestamp:Date.now(), primary:true}) bbox.max.copy( event.detail.position )
} if (!bbox.min.equal(zeroVector3))
// unselect current target if any selectionBox.update();
selectedElement = null; }
if ( groupingMode ) addToGroup( event.detail.position ) if (selectedElement && !groupingMode) {
selectionPinchMode = false selectedElement.setAttribute("position", event.detail.position)
/* document.querySelector("#rightHand").object3D.traverse( e => {
setHUD( AFRAME.utils.coordinates.stringify( bbox.min ), if (e.name == "ring-finger-tip"){
AFRAME.utils.coordinates.stringify( bbox.max ) ) selectedElement.object3D.rotation.copy( e.rotation )
bbox.min.copy( zeroVector3 ) }
bbox.man.copy( zeroVector3 ) })
*/ // rotation isn't ideal with the wrist as tend not have wrist flat as we pinch
setTimeout( _ => primaryPinchStarted = false, 200) // delay otherwise still activate on release }
if (selectedElement) selectedElement.emit("moved") // consider adding as data selectedElement
var newPinchPos = new THREE.Vector3() },
newPinchPos.copy(event.detail.position ) pinchstarted: function (event) {
pinches.push({position:newPinchPos, timestamp:Date.now(), primary:true}) primaryPinchStarted = true
dl2p = distanceLastTwoPinches() if (!selectionPinchMode) bbox.max.copy( zeroVector3 )
}); selectedElement = getClosestTargetElement( event.detail.position )
this.el.addEventListener('pinchmoved', function (event) { if (selectedElement) {
// move current target if any selectedElements.push({element:selectedElement, timestamp:Date.now(), primary:true})
if (selectionPinchMode){ selectedElement.emit("picked")
bbox.max.copy( event.detail.position ) }
if (!bbox.min.equal(zeroVector3))
selectionBox.update();
}
if (selectedElement && !groupingMode) {
selectedElement.setAttribute("position", event.detail.position)
document.querySelector("#rightHand").object3D.traverse( e => {
if (e.name == "ring-finger-tip"){
selectedElement.object3D.rotation.copy( e.rotation )
}
})
// rotation isn't ideal with the wrist as tend not have wrist flat as we pinch
}
if (selectedElement) selectedElement.emit("moved")
});
this.el.addEventListener('pinchstarted', function (event) {
primaryPinchStarted = true
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 )
if (selectedElement) {
selectedElements.push({element:selectedElement, timestamp:Date.now(), primary:true})
selectedElement.emit("picked")
} }
// is it truly world position? See https://github.com/aframevr/aframe/issues/5182 }
// setFeedbackHUD( AFRAME.utils.coordinates.stringify( event.detail.position ) ) // should remove event listeners
// 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.
}
});
// 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

Write Preview
Loading…
Cancel
Save