Letsee WebAR SDK 를 이용하여 AR contents 를 제작하는 것은 일반적인 웹 페이지를 제작하는 것과 같습니다. 다만, AR 환경을 위한 몇가지 제약이 있으며, 이 제약 범위를 준수하는 선에서 WebAR contents 의 제작이 가능합니다.

WebAR contents의 아주 간단한 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Example</title>
		<script src="<https://developer.letsee.io/api/webar?key=**[AUTHENTICATION_KEY_OF_YOUR_PROJECT]**>"></script>
</head>
<body>
<div id="container">
    Hello, world!
</div>
<script>
    letsee.ready(() => {
      letsee.start();
      letsee.addTarget('**<https://developer.letsee.io/api-tm/target-manager/target-uid/609ca3af398942b60ead2d06**>')
        .then(entity => {
            let xrElement = letsee.createXRElement(document.getElementById('container'));
            letsee.bindXRElement(xrElement, entity);
        });
    });
    letsee.init({trackerType: 'image'});
</script>
</body>
</html>

letsee/webar-tutorials-example

위의 간단한 예제를 보면서 AR contents 를 제작하는데 필요한 rule에 대해 설명하겠습니다.

  1. SDK 스크립트의 로드 방법
  2. ready callback 함수의 등록
  3. Target 의 등록
  4. initialize

이를 통해 알 수 있는 SDK engine 이 시작되는 과정은 아래와 같습니다.

<aside> 💡 SDK 스크립트 로드 → ready callback 함수 등록 → initialize → ready callback 함수 실행 → 엔진 스타트 → 타겟 등록 → 증강 대상체 구성

</aside>