Ryan
Reputation: 319
AR.JS / Aframe - Multiple custom markers not working correctly
Bug:
Currently I have setup an AR.JS project with two different custom patterns, each showing a different 3D object (blue and red cubes). When I use AR, both patterns show the same cube and it is not working correctly.
Expected:
I would see a red cube for one pattern and a blue cube for the other pattern.
Note:
I have tested this with both of the default markers (kanji and hiro), and both work correctly so the issue seems to be with custom markers.
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body>
<a-scene embedded arjs vr-mode-ui="enabled: false">
<a-marker
preset="custom"
type="pattern"
url="patterns/pattern-01000110.patt"
registerevents
>
<a-entity
material="color: blue"
geometry="primitive: box"
scale="0.5 0.5 0.5"
position="0 0 0"
></a-entity>
</a-marker>
<a-marker
preset="custom"
type="pattern"
url="patterns/pattern-01000101.patt"
registerevents
>
<a-entity
material="color: red"
geometry="primitive: box"
scale="0.5 0.5 0.5"
position="0 0 0"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Any help would be appreciated, thanks.
Upvotes: 0
Views: 21