I'm using ar.js and a-frame framework to try augmented reality. And I have a simple problem : my elements are not appearing right above the marker in the scene (they are all shifted downwards). So I decided to come back to a simply html file that show a box above the marker and when the marker appears, the box is shifted downwards (it seems to be a y-axis problem since z and x positions seem ok). Does anyone had already gone through such thing ? thanks for your help Heres is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="./aframe-ar.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
<a-scene>
<a-marker preset="hiro" emitevents="true">
<a-box position='0 0 0' material='opacity: 0.5'></a-box>
</a-marker>
</a-scene>
</body>
<script src="index.js" defer></script>
</html>
and here is my console log when project is initialized:
[Log] A-Frame Version: 1.3.0 (Date 2022-02-04, Commit #cc3516ce) (aframe.min.js, line 45273)
[Log] THREE Version (https://github.com/supermedium/three.js): – "^0.137.0" (aframe.min.js, line 45273)
[Log] WebVR Polyfill Version: – "^0.10.12" (aframe.min.js, line 45273)
[Log] starting... (index.js, line 1)
[Log] core:component:warn The component `markerhandler` was registered in a <script> tag after the scene. Component <script> tags in an HTML file should be declared *before* the scene such that the component is available to entities during scene initialization. (aframe.min.js, line 19)
[Log] AR.js – "3.4.5" – "- trackingBackend:" – "artoolkit" (aframe-ar.js, line 1)
[Log] ARjs.Anchor - – "changeMatrixMode:" – "modelViewMatrix" – "/ markersAreaEnabled:" – false (aframe-ar.js, line 1)
[Warning] ArMarkerControls: 'markersAreaEnabled' is not a property of this material. (aframe-ar.js, line 1)
[Info] ARToolkit – "0.3.0" (aframe-ar.js, line 1)
[Log] [ARController] – "ARToolkit initialized" (aframe-ar.js, line 1)
[Log] [ARController] – "Camera params loaded with ID" – 0 (aframe-ar.js, line 1)
[Warning] [info] Allocated videoFrameSize 1228800 (aframe-ar.js, line 1)
[Log] [ARController] – "Got ID from setup" – 0 (aframe-ar.js, line 1)
[Warning] [info] Pattern detection mode set to 1. (aframe-ar.js, line 1)
[Warning] [info] Pattern ratio size set to 0.500000. (aframe-ar.js, line 1)
[Warning] [info] Labeling mode set to 1 (aframe-ar.js, line 1)
[Log] actual source dimensions – 1440 – 480 (aframe-ar.js, line 1)
[Log] source orientation – "landscape" (aframe-ar.js, line 1)
[Log] actual source dimensions – 1440 – 480 (aframe-ar.js, line 1)
[Log] source orientation – "landscape" (aframe-ar.js, line 1)
I've tried severals thing with or attributes but nothing worthy. also tried in chrome and safari browser nothing changed.