Conflict with... cursor="rayOrigin: mouse" #148
Comments
|
I cam to post the exact same issue so +1 on this. Happens both on desktop chrome and iOS11 Safari. |
|
here this is due to the camera having a custom projection matrix. and this being trouble with three.js. aka this is a complex hairy problem to fix. that said here people just want to be able to click on object. and this one could be provided more easily! let me reread this issue under this angle :) |
|
@dreinstein10 sorry i dunno the cursor= stuff. can you provide me a simple example of it working in webvr. Just for me to quickly learn more about this component. i have the feeling it will be faster for resolving this issue update: no more need. i did my homework see below. thanks :) |
|
from here - https://mayognaise.github.io/aframe-mouse-cursor-component/basic/index.html |
|
ok so i got a lead... Currently aframe-mouse-cursor-component use the rendering camera to do the raycasting. This is perfect in a normal case. But here it trigger an issue in three.js raycasting and how it interfere with the AR camera calibration. So we need to work around that. and this can be done if aframe-mouse-cursor-component can use the camera we would specify and not the rendering camera. hello @mayognaise, are you following all this ? :) |
|
at first sight, it seems around here https://github.com/mayognaise/aframe-mouse-cursor-component/blob/master/index.js#L396 |
|
@jeromeetienne This has slightly changed (hence that |
|
Hi @dmarcos, do you know about this ? |
|
Hi, |
|
Also got bit by this. Dear @jeromeetienne, could you make any progress thus far? |
|
This is afflicting me also |
|
Having issues with this as well. Got to the end of my MVP and realized I have to choose between click functionality on mobile and the camera lol. @jeromeetienne let me know if I can help in anyway. |
|
any progress here?, need to be able to detect a click on an element urgently, but so far clicks are detected across the entire canvas and screen, how could we detect a click on an specific element triggered by the marker? |
|
I was able to workaround this issue by using event-set-component in addition to mouse-cursor-component. Was able to set visual properties, although no luck with running functions from clicks. Ex using: I use javascript to create a box with the mouse click functionality
|
|
Hello, I am facing the same problem, I want to click on the object, but it is not work. Here are my code. and the click js is, multiple: true, init: function () { update: function () { |
|
Hello, I search an solution for this problem, and I have try to use a Three.js raytracer for get a clickable element. But I' noob, so I grope and I fail... this is my function : (in orign I code in Coffee Script, but I translate for you in es6 (more and less)) AFRAME.registerComponent( 'clickable-ar', { }); I' want to know if I'm in a good way, or it's ridiculus ? And any suggestion.. Sorry for my very bad English.. I'm French :P |
|
Hi guys. It's kind of hack/exploit, but works really well. Below only the parts that matter (please note there is no hyphen in a-marker-camera): and for the event, in my case, this: |
|
i'm closing this, as we got a working solutions. also topic seems obsolete. |
|
@nicolocarpignoli: If @enquel's workaround/hack was working before, it isn't now! |
|
This PR has been closed due to inactivity. Please open a new, updated issue if the problem or the question is still relevant. |
|
Everything became extremely slow, when adding rayOrigin: mouse |
|
so it looks like no one has really figured this out still. I got it working in react web ar, but does not work well. Triggering animations by clicking entities has some issues with recognizing the click. the raycaster is not fine tuned enough. Please I hope someone finally figures this out, or updates ar.js. I wish I could be of more help. I will post my react example when I have some time to do a write up. |
|
I got it working with a hacky solution. It is far from perfect but test users didn't notice anything. The problem The ugly solution
HTML: JS: AFRAME.registerComponent("raycaster-listen", {
init: function () {
// Use events to figure out what raycaster is listening so we don't have to
// hardcode the raycaster.
let el = this.el;
let myRaycaster;
let canvas = this.el.sceneEl.canvas;
let clickPosUpdated = new THREE.Vector3();
let distanceMultiplierX = 0.6;
let distanceMultiplierY = 0.45;
let isMobile = this.el.sceneEl.isMobile;
this.el.addEventListener("raycaster-intersected", (evt) => {
this.raycaster = evt.detail.el;
myRaycaster = this.raycaster;
});
this.el.addEventListener("raycaster-intersected-cleared", (evt) => {
this.raycaster = null;
myRaycaster = null;
});
canvas.addEventListener("touchstart", function (evt) {
console.log(evt);
// GET MOUSE XY
var _canvasSize = canvas.getBoundingClientRect(),
w = _canvasSize.width,
h = _canvasSize.height,
offsetW = _canvasSize.left,
offsetH = _canvasSize.top;
var cx = void 0,
cy = void 0;
if (isMobile) {
var touches = evt.touches;
if (!touches || touches.length !== 1) {
return;
}
var touch = touches[0];
cx = touch.clientX;
cy = touch.clientY;
} else {
cx = evt.clientX;
cy = evt.clientY;
}
cx = cx - offsetW;
cy = cy - offsetH;
var mouseX = (cx / w) * 2 - 1;
var mouseY = -(cy / h) * 2 + 1;
// RAYCAST
let intersection = myRaycaster.components.raycaster.getIntersection(el);
if (!intersection) {
return;
}
// console.log(intersection.point);
// CALCULATE UDPATED POS
clickPosUpdated.x = intersection.point.x + intersection.distance * distanceMultiplierX * mouseX;
clickPosUpdated.y = intersection.point.y + intersection.distance * distanceMultiplierY * mouseY;
clickPosUpdated.z = intersection.point.z;
console.log("clickPosUpdated", clickPosUpdated);
// SET DEBUG BOX
debugBox.setAttribute("position", clickPosUpdated);
});
},
});Left to do: calculate the Z offset based on the angle of the collision / rotation of the marker. EDIT: fixed the code. it seemed I had uploaded a wrong version. |
|
What’s the difference about the ar.js camera? Is not a perspective one with
a pose? Has the cursor ever worked? When did it break?
Diego
…On Tue, Mar 31, 2020 at 1:12 AM Nikola Georgiev ***@***.***> wrote:
I got it working with a hacky solution. It is far from perfect but test
users didn't notice anything.
*The problem*
As far as I understand the problem is that arjs uses a different
projection matrix than the actual rendering camera, so when you initiate a
mouse raycast it is not aimed properly as it uses a camera with different
properties.
None of the solutions I found online seemed to work on a mobile.
*The ugly solution*
My logic was that a raycast originating from the cursor (center) should
aim at the same direction no matter the camera projection matrix. So when a
user clicks anywhere on the screen we can send a raycast from the cursor
and then calculate the offset using the collision point, distance and angle.
1. Create a large plane as a child of the <a-marker and give it the
.collidable class
2. When the user clicasdks on the screen send a raycast from the cursor
3. Detect the collision point on the plane
4. Calculate the actual desired collision position (get where the user
clicked on the screen, multiply it by a distance factor and place it on the
plane accordingly - this is your raycast hit)
5. Cycle through your real collidable objects and check if the
distance between the new hitpoint and the the collidbale is bellow your
threshold.
HTML:
<a-marker id="marker" type="barcode" value="5" smooth="true" marker-detected keep-model-visible>
<a-plane raycaster-listen class="collidable" color="#CCC" height="20" width="20" rotation="-90 0 0" material="opacity:0.001"></a-plane>
</a-marker>
<a-box scale='.1 .1 .1' id="debug-box"></a-box>
<a-entity camera>
<a-entity id="ray-rot-x">
<a-entity raycaster="objects: .collidable; showLine: false; far: 30; useWorldCoordinates: true"
id="ray-rot-y"></a-entity>
</a-entity>
<a-entity cursor="fuse: false" position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: white; shader: flat; opacity:.05">
</a-entity>
</a-entity>
JS:
AFRAME.registerComponent("raycaster-listen", {
init: function () {
let el = this.el
let myRaycaster
let canvas = this.el.sceneEl.canvas;
let clickPosUpdated = new THREE.Vector3();
let distanceMultiplierX = .6;
let distanceMultiplierY = .45;
let isMobile = this.el.sceneEl.isMobile;
this.el.addEventListener("raycaster-intersected", evt => {
this.raycaster = evt.detail.el;
myRaycaster = this.raycaster;
});
this.el.addEventListener("raycaster-intersected-cleared", evt => {
this.raycaster = null;
myRaycaster = null
});
canvas.addEventListener("touchstart", function (evt) {
console.log(evt)
// GET MOUSE XY
var _canvasSize = canvas.getBoundingClientRect(),
w = _canvasSize.width,
h = _canvasSize.height,
offsetW = _canvasSize.left,
offsetH = _canvasSize.top;
var cx = void 0,
cy = void 0;
if (isMobile) {
var touches = evt.touches;
if (!touches || touches.length !== 1) {
return;
}
var touch = touches[0];
cx = touch.clientX;
cy = touch.clientY;
} else {
cx = evt.clientX;
cy = evt.clientY;
}
cx = cx - offsetW;
cy = cy - offsetH;
var mouseX = (cx / w) * 2 - 1;
var mouseY = -(cy / h) * 2 + 1;
// RAYCAST
let intersection = myRaycaster.components.raycaster.getIntersection(el);
if (!intersection) {
return;
}
// CALCULATE UDPATED POS
clickPosUpdated.x = intersection.point.x + intersection.distance * distanceMultiplierX * mouseX;
clickPosUpdated.y = intersection.point.y + intersection.distance * distanceMultiplierY * mouseY;
clickPosUpdated.z = intersection.point.z; // ToDo - calculate the Z offset based on the angle of the collision
// SET THE DEBUG BOX TO SEE WHERE IT HIG
debugBox.setAttribute("position", clickPosUpdated);
});
}
});
*Left to do*: calculate the Z offset based on the angle of the collision
/ rotation of the marker.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#148 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAAJTLTNWYIPRSSWW76IBZTRKGQXJANCNFSM4DVKNSBA>
.
|
|
What’s the difference about the ar.js camera? - I never found out. I based my assumption on jeromme etiene's comment saying that this is "due to the camera having a custom projection matrix.". Has the cursor ever worked? - the cursor seems to work fine if it is not setup with rayOrigin: mouse When did it break? - I've only tried it in the past month I had a job for a client where users had to tap on moving objects in arjs. The default a-frame implementation (cursor="rayOrigin: mouse") did not work with arjs. I looked all over the Internet for solutions and did not find anything working on mobile (there was smth for desktop though). This topic was the closest I got to an explanation or solution to the issue. In one of the earlier comments jeromme etiene says that this is "due to the camera having a custom projection matrix.". Based on this I tried to inspect the three scene and see if I can do anything about the camera. I failed and never really got to the bottom of the problem. Pressed by the project's timeline I tried a few workarounds and the one I've written above gave decent results so I shared it :) |
|
@kvabakoma Hi There! I tried your code. There is Also, I suggest you all to continue discussing this on this PR, on the new Repo, this one has been deprecated: AR-js-org/AR.js#66 |
|
@nicolocarpignoli thanks for pointing out the code ain't working. It seems I've put a wrong version. I've updated my previous post with what should be working. |
/5.png){kind=link}
First of all, congratulations for your great work, it's awesome.
The latest a-frame version 0.6.1 now includes Mayognaise "aframe-mouse-cursor-component" which works fine on its own. I'm trying to integrate this component into aframe-ar by adding: cursor="rayOrigin: mouse" on the a-marker-camera but I get this error:
This is the code I'm using:
Everything works fine until I add... cursor="rayOrigin: mouse". I guess this is not currently supported because it's a new aframe component, but I was wondering if anyone else has tried to use it with success. And if not, where can I start digging into to try to fix this issue?
Thanks in advance
Keep up the awesomeness !
The text was updated successfully, but these errors were encountered: