.png)
많은 AR.js 튜토리얼 영상들을 참고하면 hiro 마커나 人 마커가 사용되는 것을 볼 수 있다.
내가 원하는 모양의 마커를 사용할 수는 없는걸까? 라는 궁금증에 구글링을 했는데 역시 방법이 있었다.
원하는 패턴을 준비하고 위 사이트에서 Upload하면 마커의 .patt파일과 .png파일을 다운받을 수 있다.
.png파일은 출력하거나 핸드폰 같은 기기로 띄우고,
.patt파일은 a-marker 태그에 url attribute 자리에 넣어주면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Preview</title>
<!-- Aframe을 위하여 -->
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"> </script>
<!-- Aframe AR을 위하여 -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<!-- 애니메이션을 위하여 -->
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.0.0/dist/aframe-extras.min.js"></script>
</head>
<body style="margin: 0px; overflow: hidden">
<a-scene embedded arjs>
<a-assets>
<a-asset-items id="box" src="gltf 파일의 경로"></a-asset-items>
</a-assets>
<a-marker preset="custom" type="pattern" url="patt파일의 경로">
<a-entity id="box-asset" rotate="0 0 90" gltf-model="#box"></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>패턴을 활용한 간단한 예시 코드이다.
더 다양하고 개성있는 마커를 사용할 수 있게 해준 Ar.js Marker Trainer야 고마워~!!
뭐라도 더 하자~