HTML 10줄로 증강 현실 구현하는 방법

웹에서 증강 현실을 하시겠습니까? 이제 HTML 10줄로 할 수 있습니다! 진지하게! 코드를 안내해 드리겠습니다. 정말 간단합니다.

우리는 AR.js을 발표 최근. 별도의 앱 설치 없이 스마트폰에서 바로 효율적인 웹용 증강현실을 경험할 수 있습니다. 하지만 더 나아가 자신만의 증강 현실 경험을 만드는 방법을 살펴보겠습니다. AR.js의 가장 짧은 예는 a-frame 의 마법 덕분에 단 10줄의 HTML 입니다. codepen에서 라이브로 볼 수 있습니다 .

HTML 10줄의 AR.js 예제

라인별로 정리해 보겠습니다.

도서관 포함

스크립트 포함하다

먼저 MozillaVR 에서 VR 경험을 구축 하기 위해 시작한 노력인 a-frame 을 포함 합니다 . A-frame에는 three.js 가 포함되어 있습니다 . 그런 다음 프레임에 AR.js를 포함하기만 하면 됩니다. AR.js는 2-3년 된 휴대폰일지라도 AR에 표시되는 3D를 휴대폰에서 매우 빠르게 실행하도록 합니다!

바디 정의

일반적인 html 본문 - 별로 많지 않습니다.

이 단계에서는 모든 것이 평소와 같이 진행됩니다. 모든 HTML 페이지에서와 같이 본문을 정의합니다.

3D 장면 만들기

장면을 선언하고 arttoolkit을 사용하고 있음을 지정합니다.

다음으로 프레임 장면을 만들 것입니다. ARToolkit 구성 요소도 추가해야 합니다. ARToolKit 은 전화 카메라를 통해 현지화하는 데 사용하는 오픈 소스 라이브러리입니다.

간단한 콘텐츠 추가

그냥 단순한 상자

3D 장면을 만들었으면 여기에 개체를 추가할 수 있습니다. 이 줄에서 간단한 상자를 추가합니다. 그런 다음 재질을 수정하여 투명하게 만듭니다. 또한 AR 마커 위에 표시되도록 위치를 변경합니다.

AR 카메라 추가

마커 위치로 제어되는 카메라 정의

이 마지막 단계에서는 카메라를 추가합니다. 사전 설정 'hiro'를 포함합니다( Hiro marker 에서와 같이 ). 마지막으로, 우리는 그것이 당신의 전화인 것처럼 움직입니다. 쉽죠?

축하합니다! 완료되었습니다. 이제 HTML 10줄로 된 증강 현실이 휴대폰에서 무료로 빠르게 실행됩니다.

튜토리얼로 만든 이 비디오 버전을 확인하십시오.