Wrong position click on model AR.js

JesusR25 commented 1 year ago

When I show a model with the marker and try to click on it from the mobile, it detects the click in an incorrect position. I've tried everything but it doesn't work.

nickw1 commented 1 year ago

Hi @JesusR25 are you looking at up-to-date examples?

Make sure you set up cursor and raycaster components, e.g see this example:

https://github.com/AR-js-org/AR.js/blob/master/aframe/examples/new-location-based/click-places/index.html

JesusR25 commented 1 year ago

Hi @nickw1 In my case, to solve the click on the models, I only need to add the lines? cursor='rayOrigin: mouse' raycaster='near: 0; far: 50000'

I also copied the example and for some reason nothing appears, do I have to change the latitude and longitude values? Replace the libraries with the links. This is how it turned out:

<!DOCTYPE html>
<html> 
    <head>
        <title>AR.js Click Places Example</title>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script>
        <script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js'></script>
        <script>
        AFRAME.registerComponent('clicker', {
            init: function() {
                this.el.addEventListener('click', e => {
                    alert('Box clicked!');
                });
            }
        });
        </script>
    </head>
    <body>
    <a-scene
        vr-mode-ui="enabled: false"
        cursor='rayOrigin: mouse'
        raycaster='near: 0; far: 50000'
        arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'
        renderer='antialias: true; alpha: true'>
            <a-camera gps-new-camera='simulateLatitude: 51.049; simulateLongitude: -0.723'></a-camera>
            <a-box gps-new-entity-place='latitude: 51.0596; longitude: -0.7170' color='red' scale='200 200 200' clicker></a-box>
    </a-scene>
    </body>
</html>

JesusR25 commented 1 year ago

@nickw1 I was able to show the page on my PC, but the cube does not appear on my cell phone, is it because of the latitude and longitude? And how to apply the click for a marker?

nickw1 commented 1 year ago

@JesusR25 this is probably because the GPS on your phone overrides the simulated latitude and longitude, so you move away from the simulated location and therefore do not see the box. If you add the box at somewhere close to (0.001 degrees from) your actual location you should see it.

I am not sure about markers I have to admit, but if they are models, you can add click events to them just like you can with primitive objects such as boxes, spheres, etc.

nickw1 commented 1 year ago

Hi @nickw1 In my case, to solve the click on the models, I only need to add the lines? cursor='rayOrigin: mouse' raycaster='near: 0; far: 50000'

Yes, that's correct, that will set up the scene to receive click events. Essentially a ray is cast into the scene from the mouse click position (on the surface) and any object intersecting this ray will receive a click event. The raycaster component defines the distance range of this ray.

JesusR25 commented 1 year ago

Hi @nickw1 , I tried to add the raycaster and cursor, it works for me in the first model, but when I add another model and try to add another method to detect the touch of this second model, it doesn't detect it on the model but on another side of the map, I already tried of all and I have not been able to get it to work. I don't know if it's a marker problem.

nickw1 commented 1 year ago

Hi @JesusR25 I'm not too sure to be honest, as you can certainly set up click events on multiple entities in the same scene. Are you able to share your code?

JesusR25 commented 1 year ago

Hi @nickw1 , my code is in my repository, this is the link: https://github.com/JesusR25/Bacubirito-WebXR/blob/master/pagina/Prueba.html

nickw1 commented 1 year ago

Hi @JesusR25, the cursor and raycaster components need to be added to the a-scene.

See https://github.com/AR-js-org/AR.js/blob/master/aframe/examples/new-location-based/click-places/index.html for an example.

JesusR25 commented 1 year ago

Hi @nickw1 , I just tried that, but the click on the models no longer recognizes me. https://github.com/JesusR25/Bacubirito-WebXR/blob/master/pagina/Prueba.html

nickw1 commented 1 year ago

Does removing embedded from the a-scene work?

If not, then I have to admit I'm not sure, I maintain the location-based side of things and not so much the marker aspect. @kalwalt or @nicolocarpignoli may be able to help if they have time.

JesusR25 commented 1 year ago

Hi @nickw1 ,I tried to remove it but it still doesn't work.

nickw1 commented 1 year ago

EDIT: Ah, sorry, just seem you are using a very old version of AR.js. That's unlikely to work now.

Look at the examples in the current repository to see the correct version to include, e.g

https://github.com/AR-js-org/AR.js/tree/master/aframe/examples/marker-based

viyamKUN commented 1 year ago

Hi. I found a temporary expedient. Try changing the camera's fov value. I changed the fov 80 to 45, then click position was fixed.

JesusR25 commented 1 year ago

Hi @viyamKUN, how do I do that?

nickw1 commented 1 year ago

@JesusR25 set the fov property of the a-camera, e.g.

<a-camera fov='45' .... />

See docs:

https://aframe.io/docs/1.3.0/components/camera.html

AR-js-org / AR.js

Wrong position click on model AR.js #493