AR 생일카드를 만들어 봤는데, 생일이신 분들을 조금이나마 행복하게 해드릴 수 있을 것 같아요.

11212 단어 aframeHTMLAR.jsWebARAR

완성물: 입체 생일 카드



👇저는 AR 생일카드(iOS는 사파리로 열면 돼요)https://t.co/9I30r4o25M-Kosuke Yoshimura(@Yoshimura Kosuke)October 7, 2018

safari로 링크를 열고 카메라로 아래 그림을 찍으면 AR가 나올 것입니다br/>


AR.js 만져봐.


친구 생일 때 좀 놀래키고 싶었는데 지금까지 아이오나 안드로이드에서만 AR을 했는데 최근에 AR.js의 존재를 알고 AR로 뭔가를 하고 싶었어요. 그게 제가 이 일을 하게 된 계기였어요.ios의safari는ver11(2017년 9월)부터 웹RTC에 대응하기 때문에 ios에서도 AR.js를 이동할 수 있습니다p>

사용한 라이브러리



먼저 HTML 파일 만들기


index.).


AR.js의 저자가 쓴 tutorial를 참고하여 다음과 같은 내용을 기술합니다.p>


index.html


<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
    <a-marker preset="hiro">
            <a-box position='0 0.5 0' material='color: black;'></a-box>
    </a-marker>
    <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>


3D 모델 가져오기



Google Poly에서 케이크의 대상을 다운로드했습니다.Google Poly에는 다양한 3D 모델이 있기 때문에 편리합니다.


3D 모델 구성


Google Poly에서 다운로드한 zip 폴더를 열면obj와 Cake.안에 mtl이라는 파일이 있어요.이 두 index를사용obj2gltf 프로그램 라이브러리를 OBJ 형식에서 glb 형식으로 경량화하는 등급입니다.obj2gltf를 설치한 후 다음 명령을 실행하면 변환할 수 있습니다.


obj2gltf -i Cake.obj -o Cake.glb

변환에 성공하면 다음과 같이 Cake가 표시됩니다.glb라는 파일이 있어야 합니다.



만들어진 케이크.<a-asset-item>에서glb를 호출합니다.



index.html

 <a-assets>
      <a-asset-item id="cake" src="Cake.glb"></a-asset-item>
 </a-assets>


그리고 <a-entity>에서 대상의 위치 등을 지정합니다.



index.html

<a-entity gltf-model="#cake" play-all-model-animations="" position="0 0 1" rotation="0 0 0" scale="0.05 0.05 0.05" visible="true">
</a-entity>


이상이면 케이크가 나타날 수 있습니다.


원본 태그 작성


AR을 표시하기 위해 식별되는 이미지(태그)는 기본적으로 지루하기 때문에 오리지널 태그를 만들기로 했습니다.p>

marker-training

원본 태그를 만들기 위해 여기에 그림만 올릴 수 있습니다.


내가 이런 느낌을 만들었어



원래 태그 포함


마지막 읽기 <a-marker> 에서 만든 원시 태그 (pattern-marker.patt)p>


index.html

<a-marker preset='custom' type='pattern' url="pattern-marker.patt">

...

</a-marker>


여기.에 모든 코드를 설치합니다.


버전 소스 코드 완성



index.html

<!DOCTYPE html>
<html>
<head>
  <title></title>

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
</head>

<body style='margin : 0px; overflow: hidden;'>


  <a-scene embedded arjs="debugUIEnabled:false; sourceType: webcam;" vr-mode-ui="enabled: false">
    <a-assets>
      <a-asset-item id="cake" src="Cake.glb"></a-asset-item>
    </a-assets>

    <a-marker preset='custom' type='pattern' url="pattern-marker.patt">
      <a-text value="Happy Birthday!!!" position=" 0 0 -0.1" align="center" rotation="-90 0 0" color="#f442eb" >
      </a-text>

      <a-entity gltf-model="#cake" play-all-model-animations="" position="0 0 1" rotation="0 0 0" scale="0.05 0.05 0.05" visible="true">
      </a-entity>
    </a-marker>

    <a-entity camera></a-entity>

  </a-scene>

</body>

</html>


가동 여부를 확인하다


웹 RTC의 일부인 브라우저에서 카메라를 사용할 수 있는 기술을 사용하기 위해https통신을 사용해야 한다.나는github에서push만https통신을 실현할 수 있는githubpages가 가장 간단하다고 생각해서 이번에githubpages를 사용했다.github 페이지의 사용 방법 참조여기.p>


이렇게 github 페이지에 공개되면ios의safari에서 열어 보세요."Happy birthday"랑 케이크가 아마 있을 거예요.p>

총결산


AR.js를 사용하면 HTML 30줄만 있으면 AR을 개발할 수 있습니다.이번에는 생일을 위해 생일카드를 만들었어요. 어버이날과 어버이날도 사용할 수 있어요!명함으로도 사용할 수 있습니다!!


참고 문헌



C# convert data in service result
elk 구성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage