vanilla touch UI demo of touching button with indexfinger #24
Conversation
|
|
||
| function onTouch(){ | ||
| let $msg = document.querySelector('#msg') | ||
| msg.innerText = String(new Date()).substr(15,10) |
There was a problem hiding this comment.
Remove the dollar in the variable. The code is working because in javascript all ids are variables in the global scope.
| } | ||
| }, | ||
| detectPress: function(){ | ||
| if( !this.el.sceneEl.renderer.xr.isPresenting ) return // ignore events in desktop mode |
There was a problem hiding this comment.
if (!this.el.sceneEl.is("vr-mode")) is a more common way to check if we're in not vr.
There was a problem hiding this comment.
in that case we need to add a check for "ar-mode" too then (I can do that, not the end of the world)
There was a problem hiding this comment.
You can keep isPresenting. I see that the ar-hit-test component is using it like this as well.
| let minDistance = 5 | ||
|
|
||
| // compensate for an object inside a group | ||
| let object3D = this.el.object3D.type == "Group" ? this.el.object3D.children[0] : this.el.object3D |
There was a problem hiding this comment.
In what case this.el.object3D is not a group?
There was a problem hiding this comment.
The problem here is twofold:
- raycasters cannot cast with object3D type 'Group'
- AFRAME uses type 'Group' for
this.el.object3D
Perhaps better would be object3D.getObjectByProperty("Mesh") (gets the first object3D of type Mesh).
There was a problem hiding this comment.
Yes so the check is unneeded, this is what I'm saying. It could have just been
let object3D = this.el.object3D.children[0];but yes better use here:
let object3D = this.el.getObject3D('mesh')There was a problem hiding this comment.
Perhaps object3D.getObjectByProperty("Mesh") would be a safer/flexible bet.
'mesh' is AFRAME-only (ArrayMap), and is empty quite often, depending on the implementation of certain components, or when dealing with an object from an glTF.
Another approach could be, what obb-collider does, it tries to mitigate this by offering an object3Dpath (or something similar).
We could also do both, to avoid silent false positives:
let object3D = this.getMesh(this.data.trackedObject3D) || this.el.object3D.getObjectByProperty("Mesh")There was a problem hiding this comment.
Ah yes, it's "html" not "mesh" we want here
aframe-htmlmesh/src/aframe-html.js
Line 60 in 6caf36f
and I guess you want that pressable component to work not only with htmlmesh entities.
We can do something similar to flattenObject3DMaps in aframe raycaster component https://github.com/aframevr/aframe/blob/96c37a38dbe1be9df477adb9b9bf2be4d69d9682/src/components/raycaster.js#L411
getting all meshes from el.object3DMap.
| this.handEls = document.querySelectorAll('[hand-tracking-controls]'); | ||
| this.pressed = false; | ||
| this.distance = -1 | ||
| // we throttle by distance, to support scenes with loads of clickable objects (far away) |
There was a problem hiding this comment.
clickable -> pressable
|
My resources are limited, before amending this PR I first need to get a heads up from AdaRoseCannon on this. |
|
You probably won't have any feedback from her. She gave me the rights on all the repositories, so this is me that will do the merge. |
|
awesome, I'll try to amend the PR asap then |
|
There is no hurry, you can amend the PR whenever you have time. |
This, it's tricky for me to do OSS right now Thanks @vincentfretin I really appreciate your continued support of these projects. |
Besides the awesome handy-works, here's an example on how to click a button via indexfinger-press in a vanilla AFRAME scene.