akaibukai commented 2 years ago

Hello!

I'm just starting with AR (actually with the whole Web XR ecosystem, AFrame etc.)

First of all, kudos for that library! Your library is working flawlessly (upon some test based on image tracking) and better than the ARJS library! And it was so easy to follow along with your documentation! Again thank you very much! I hope I'll be able to contribute in the near future :)

So, I tried to implement basic click handling with the following https://hiukim.github.io/mind-ar-js-doc/examples/events-handling Here, the click event, indeed works at the beginning, but once the AR kicks in.. The click no longer works..

I guess I'm missing something but I don't have enough experience with AFrame etc. to understand how to fix that.

Do you mind telling me what to do to be able to continue clicking after the blue box is appearing here in that example?

Thank you very much!

snmabaur commented 2 years ago

Hi

also from my side a huge thank you, works really good but I have the same problem as akaibukai that the click won't trigger

I compared the code from your live demo Events.html and the code your wrote on your page events-handling and there is a small difference in the <a-camera tag

Correct Camera Tag <a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" raycaster="far: 10000; objects: .clickable"></a-camera>

Incorrect Camera Tag <a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" raycaster="far: 1.1.5; objects: .clickable"></a-camera>

The raycaster option is set to 10000 in the first line of code and then the click works :)

Cheers ;)

snmabaur commented 2 years ago

There is also a different problem with the clicks

With Multi-Tracks it's not working correctly...

With the code below I can track two different images and it shows a blue cube on the first and a red cube on the second one... when I click the blue cube it happens nothing and as soon as the red cube is shown I can click anywhere and I get a an event even though I don't have an eventlistener for the second one

Is there a way to fix this? Or another way to get a click event on different objects?

Thanks and cheers

Here is my whole code to reproduce

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const examplePlane = document.querySelector('#example-plane');
            // detect click event
            examplePlane.addEventListener("click", event => {
                console.log("plane click");
            });
        });
    </script>
</head>
<body>

<a-scene
        mindar-image="imageTargetSrc: DataNFT/targets.mind; maxTrack: 2; uiLoading:no; uiScanning:no;uiLoading:no"
        embedded
        color-space="sRGB"
        renderer="colorManagement: true, physicallyCorrectLights"
        vr-mode-ui="enabled: false"
        device-orientation-permission-ui="enabled: false"
>
    <a-camera
            position="0 0 0"
            look-controls="enabled: false"
            cursor="fuse: false; rayOrigin: mouse;"
            raycaster="far: 10000; objects: .clickable"
    ></a-camera>

    <a-entity id="example-target" mindar-image-target="targetIndex: 0">
        <a-plane
                id="example-plane"
                class="clickable"
                color="blue"
                opaciy="0.5"
                position="0 0 0"
                height="0.552"
                width="1"
                rotation="0 0 0"
        ></a-plane>
    </a-entity>
    <a-entity mindar-image-target="targetIndex: 1">
        <a-plane
                class="clickable"
                color="red"
                opaciy="0.5"
                position="0 0 0"
                height="0.552"
                width="1"
                rotation="0 0 0"
        ></a-plane>
    </a-entity>
</a-scene>
</body>
</html>

Following the images to track: pinball

And the .mind file, zipped since GitHub doesn't allow .mind extension targets.mind.zip

snmabaur commented 2 years ago

I tested further and I think the problem is with multiple tags

When I write multiple a-entity tags with each an own new component or also with default click eventListener it has to scan all the objects and then the click on each of them works... If only a party of the images ar recognized then the clicks are not working correctly

I have a tapestry with 20 people on it and 10 of this people should be scannable and a button should appear to click on it which opens a bootstrap modal... So in my usecase the user has to scan at first all 10 faces before he can click on any button... If he starts on the left side and e.g. only scans 4 faces at first then the clicks are not workin

Is there a possibility to fix this?

Thank you very much

Cheers

jessicachrist commented 1 year ago

Hi @snmabaur , I'm currently experiencing a similar problem with multi-targets (click event doesn't work) - have you found a solution in the meantime?

snmabaur commented 1 year ago

Hey @jessicachrist unfortunately no but haven't checked it further... got some different projects to work on :D

jessicachrist commented 1 year ago

@hiukim

tsxoxo commented 1 year ago

also ran into the same issue - click events stop working after I click the AR button and the site goes full screen.

The same thing happens with all the other official AR examples in the aframe docs.

( on mobile now. links coming)

Questions

Just to make sure --- for you folks, @akaibukai @jessicachrist @snmabaur --- click events work for you and the example in the mindar docs works after correcting the far attribute?
This has been quite touch to research in part because I lack the vocabulary and I haven't seen this explained anywhere. I'd be grateful if anyone could give some info or point to relevant resources about this:

2a. What happens after I click the AR button and the app goes full screen? I gather that an XRSession of the type immersiveAR starts up, but I haven't looked at the code yet to confirm.

2b. What is happening before I click on the AR button? The app is still showing a camera feed with transposed 3d graphics. seems like AR to me. But I suspect it's kind of a "simulated" AR or something? Does this mode have a name? Is it using XR? (I suspect not since I can run it in Firefox). I find this one especially confusing

hiukim commented 1 year ago

fixed in v1.2.2

hiukim / mind-ar-js

Correct way to handle click events (with cursor rayOrigin: mouse)? - example from the docs #239

Questions