Marker content not aligned.

[allestaire]

Do you want to request a feature or report a bug?

What is the current behavior?
When scanning a barcode, seems like the marker content is not aligned to its position

If the current behavior is a bug, please provide the steps to reproduce.

• This issue is not occuring on plain html
• Instead this issue occurs on NextJS environment.
• My question is, what might be the cause of this issue?
• Or are there any some sort on parameter/configuration to realign the content of the marker?

Please use this link https://aliancial-ba0q6xfp8-allestaireacasio-ustpeduph.vercel.app/

Please mention other relevant information such as the browser version, Operating System and Device Name

What is the expected behavior?

The Object should be centered to markers point

If this is a feature request, what is motivation or use case for changing the behavior?

Example Code:

<a-scene embedded arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false; debug: true; detectionMode: mono_and_matrix; matrixCodeType: 5x5;">
        <a-marker type="barcode" value="300">
            <a-box position='0 0.5 0' color="red"></a-box>
        </a-marker>
        <a-entity camera></a-entity>
      </a-scene>

Versions:

• 1.4.2-aframe.min.js
• 3.4.5-aframe-ar.js

[allestaire]

Got this link for similar issue #241

[allestaire]

Also already tried the <a-box> positioning but I don't think this will solve my issue, what I want is to make its viewpoint similar to scene so that the markers content not needed to define its position attribute

[allestaire]

Untitled.1.mp4

This is an update. trying to figure out to place to center, but noticed that, the object is getting far away when the image is change on rotation

<a-box position='0.5 0.5 -2' color="red"></a-box>

[allestaire]

I found the issue now, seems like the problem is with the height of viewpoint,
because the scene was loading after anything else, (NextJS)

Screen.Recording.2023-06-02.at.9.36.36.AM.1.1.1.mp4

[allestaire]

An update to this issue,
An alternative solution is to use iframe, as what others did but it is not a good solution,
My idea on why it should be on NextJS or React, is to have a marker being dynamically loaded
Which is on this case, cant control the content

Screen.Recording.2023-06-02.at.12.55.26.PM.mp4

[madalin-fr]

Check out https://github.com/AR-js-org/AR.js/blob/master/aframe/examples/marker-based/minimal_ES6.html and the css used there

[allestaire]

Check out https://github.com/AR-js-org/AR.js/blob/master/aframe/examples/marker-based/minimal_ES6.html and the css used there

Thanks on this!!

[loganknecht]

Hello @allestaire - Were you able to resolve this?

I have been encountering the same issue and I cannot figure out what to do to resolve this.
See: #576

@madalin-fr - I have tried your Minimal ES6 example and I am still experiencing the offset issues. Do you have any other suggestions?

[allestaire]

Hi @loganknecht ,

Base on my diagnosis, there is a problem with the element wrapper on the canvas, it is using different width, but still dont know its source, I tried using the raw ARJS rather than the react package.

As of now this error only occurs on react, but not on RAW html version

[loganknecht]

@allestaire can you clarify which element you mentioned.

More than happy to track this down, but not sure what portion you're discussing.