Multi-targets: Objects don't get clickable using React and A-Frame

[jessicachrist]

Hi there

I'm currently experiencing the problem, that none of the two targets are clickable with React as Multi Targets (used the example with the multi-target band marker). With just one target from the card example it works.

Any ideas what I am missing? Many thanks in advance!

Here's the code inside my MindAR functional component:

 useEffect(() => {
    // add listener for target found & clickable
    const addTargetListener = (targetObject, action) => {
        targetObject.addEventListener('targetFound', event => {
            console.log("target found")
            targetObject.addEventListener("click", action);
        });
    };

    // remove listener for target found & clickable
    const removeTargetListener = (targetObject, action) => {
        targetObject.addEventListener('targetLost', event => {
            console.log("target lost")
            targetObject.removeEventListener("click", action);
        });
    };

    // select all targets and add/remove the event listeners
    const racoonTarget = document.querySelector('#racoon');
    addTargetListener(racoonTarget, () => console.log("Racoon"));
    removeTargetListener(racoonTarget, () => console.log("Racoon"));

    const bearTarget = document.querySelector('#bear');
    addTargetListener(bearTarget, () => console.log("Bear"));
    removeTargetListener(bearTarget, () => console.log("Bear"));
},)

and in the return:

<a-scene ref={sceneRef}
             class="a-scene-container"
             mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.0/examples/image-tracking/assets/band-example/band.mind; autoStart: false; uiLoading: no; uiError: no; uiScanning: yes;"
             color-space="sRGB" embedded renderer="colorManagement: true, physicallyCorrectLights"
             vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
        <a-assets>
            <a-asset-item id="bearModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.0/examples/image-tracking/assets/band-example/bear/scene.gltf"></a-asset-item>
            <a-asset-item id="raccoonModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.0/examples/image-tracking/assets/band-example/raccoon/scene.gltf"></a-asset-item>
        </a-assets>

        <a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;"
                  raycaster="far: ${customFields.libVersion}; objects: .clickable"></a-camera>

        <a-entity class="clickable" mindar-image-target="targetIndex: 0" id="racoon">
            <a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="0.05 0.05 0.05" src="#raccoonModel" animation-mixer/>
        </a-entity>
        <a-entity class="clickable" mindar-image-target="targetIndex: 1" id="bear">
            <a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="0.05 0.05 0.05" src="#bearModel" animation-mixer/>
        </a-entity>
    </a-scene>

`

[jessicachrist]

@hiukim Do you know what could be wrong? Thanks!

[hiukim]

I can't see obvious mistakes at first scan. It's hard to tell without further debugging.

It might have something to do with the lifecycle of aframe and react, and the listener just didn't register properly. Or maybe the the model just didn't capture the click. But I guess if it works on one target, then it shouldn't be the case.

[jessicachrist]

Thanks for your feedback. Maybe there's an issue with the two gLTF files (bear and racoon) from the multi target example, e.g. that they don't have a bounding box. When I changed the gLTF file but kept the band.mind file, it worked.