-
Notifications
You must be signed in to change notification settings - Fork 905
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Raycaster is off center or scaled based on window size #40
Comments
Hi @maximus123123 , thank you! Does it happens also with the other examples? |
I believe so. Heres another person with the same issue: jeromeetienne/AR.js#584 The issue, I think, Or the canvas size isn't updating correctly the size correctly for the calculation thus giving the wrong calculation. I have tried using vector3 as well but it didn't help |
Thank you @maximus123123, we also need to know which version of Ar.js are you using, at the moment we have ar.js and ar-nft.js because they use different version of jsartoolkit5: the first the oldest the last the newest version with NFT. Maybe this bug occur the oldest but not the newest version? Please tell me exactly you setup. 🙂 |
It occurs in the old and new version. I am currently using the new basic version: |
Ok thank you so much! We will see how to fix this, i have not a clear idea how to solve now. |
Are you able to reproduce the error? |
i will try later if i have time. 😄 |
@maximus123123 with the basic example i got this error:
i tested only on Desktop (Ubuntu 18.04.03) |
I will look deeper into it when i have time, maybe it's not a bug, probably needs the right setup. 😄 |
Right, you need to change THREE.Camera to THREE.PerspectiveCamera |
@maximus123123 , try to replace this part: mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1 with this: var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1
mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1 |
I am using ar.js with aframe and have similar problem. If I am not using embedded on the a-scene images and videos are distorted and clicks accurate but when I use embedded ratios of elements (images, video) are correct but clicks are off target big time. |
Same issues here. The targets are off, and they're off in different ways depending on if its a mobile sized screen or a regular desktop/laptop. Here's a link to my codepen with the issue: https://codepen.io/riggitynick/pen/MWaOOeb?editors=1010 There are 3D shapes, and when you click on them, they should vanish, the targets are off a bit(and in really strange ways-weather I open it on my phone or laptop). |
Is this problem solved? I have been developing similar functions recently In my test
Very similar to @XiaNi provided above My Test
I will generate a object (3D model) on the AR marker, and click on the object with the mouse to stick on a small ball at the click position to display the raycaster coordinates.
The ratio of display (1920x1440) is setting to same as the source (640x480), both are 4:3.
In the above cases, due to different screen heights, the offset can be clearly seen as the closer to the upper and lower sides of the screen, the greater the Y-axis offset, and the closer to the center point, the smaller the offset. BTW, other screen tests can also have perfect results as long as the screen ratio setting same as source.
The ratio of source (640x360) is setting to same as the display (1920x1080), both are 16:9.
So, it seems that I cannot adjust the ratio of source to match the display. It is difficult to ensure that the camera (source) and screen resolution (display) supported by each device will be in the same ratio. Any suggestions? Or this problem already correcting? |
Hi. |
how to solve this problem? |
hello @kalwalt, do you have any news related to this issue ? thanks ! |
Hi anyone have an update on this problem??? |
Hey, people. I've fallen in this problem as well. |
Hello there! const scene = AFRAME.scenes[0];
if (!scene) {
return;
}
const mouseCursor = document.createElement('a-entity');
mouseCursor.setAttribute('cursor', 'rayOrigin', 'mouse');
scene.appendChild(mouseCursor); I hope this can help us to fix the problem in its source ✌️ |
Thank you!!
I'll try this soon....
…-----------------------------------------------------------
*DYNAMIC MANAGEMENT GROUP LTD.*
-----------------------------------------------------------
*ADDRESS:*
Room A, 4th Floor Sing Teck Factory Bldg.
44 Wong Chuk Hang Road, Hong Kong
Tel: +852-26633524
Cell: +852-90888971
----------------------------------------------------------------------------
Dynamic Events and Marketing Specialist
https://.dynevents.com <https://www.dynevents.com>
----------------------------------------------------------------------------
KidsGOLF - the fastest way to learn golf.
https://.kidsGOLF.hk <https://www.kidsGOLF.hk>
-----------------------------------------------------------------------------
On Fri, 1 Oct 2021 at 22:14, Marcelo Kopmann ***@***.***> wrote:
Hello there!
I've managed to fix this problem by following this Stackoverflow Question
<https://stackoverflow.com/questions/67519054/wrong-position-of-a-clickable-object-on-ar-js-scene/67534948#67534948>
and attaching a cursor component after the scene is initialized
const scene = AFRAME.scenes[0];
if (!scene) {
return;
}
const mouseCursor = document.createElement('a-entity');
mouseCursor.setAttribute('cursor', 'rayOrigin', 'mouse');
scene.appendChild(mouseCursor);
I hope this can help us to fix the problem in its source ✌️
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#40 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AOXFELGSBUQQEOCNDVEPG23UEW6ZTANCNFSM4LCTD5XQ>
.
|
This worked for me! I basically just created a new Component and attached it to the . The component is like this: AFRAME.registerComponent('custom-cursor', {
init: function () {
setTimeout(() => {
const scene = AFRAME.scenes[0];
const mouseCursor = document.createElement('a-entity');
mouseCursor.setAttribute('cursor', 'rayOrigin', 'mouse');
mouseCursor.setAttribute('raycaster', 'objects', '.clickable');
scene.appendChild(mouseCursor);
}, 2000);
},
}); and then just I was literally looking for an answer for days and finally came across the solution. |
Hello, @Yzuriha thanks for your answer that helped me a lot. However when I tried your example, the target intersection seems to be with the marker rather than the entity which has ".clickable" class. (I'm trying to use it, with an I tried different things, but none of them work. This line has no effect, Raycaster only detect intersection inside marker area If you have a solution, I'm a taker ! |
Hey everyone I've created this little example to show how you can make it work with aframe 0.9.2. Unfortunately it doesn't work with more recent versions than that :( |
Has anyone examined the source code of this demo from 8th Wall? How did they overcome this problem? |
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
OnClick events and the raycaster will give the wrong scaling of the model depending on the size of the screen resulting in missing the target when it should hit or hitting the target when it should miss.
If the current behavior is a bug, please provide the steps to reproduce.
add a mouse down event in the basic example then click next the torus knot or just above/below it
Please mention other relevant information such as the browser version, Operating System and Device Name
Chrome on PC and Phone
What is the expected behavior?
Accurate mousedown events causing the correct
If this is a feature request, what is motivation or use case for changing the behavior?
The text was updated successfully, but these errors were encountered: