letsee - Letsee Web AR SDK API Reference

Constructor

new letsee()

WebAR SDK가 실행되면, window.letsee로 접근가능한 Letsee class 입니다. 아래는 가장 간단하게 WebAR SDK를 다운받고 place media 태그를 사용하여 Hello World 문자열을 마커위에 출력하는 예제입니다.

Example

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Letsee WebAR SDK Test WebApp</title>
      <script src="https://developer.letsee.io/api/webar?key=YOUR_APP_KEY"></script>
      <style media="place" type="text/css">
         #container {
             -letsee-target: uri('toystory.json');
             width: 140px;
             height: 200px;
             border: 4px solid red;
         }
      </style>
   </head>
   <body>
      <div id="container">
         <button>Hello World</button>
      </div>
      <script>
         letsee.ready(() => {
                letsee.start();
            });
         letsee.init();
      </script>
   </body>
</html>

Methods

init(config)

Letsee의 SDK의 Engine을 준비를 시작하고 초기화를 진행하여 SDK가 동작할 준비를 합니다. SDK의 AR기능을 실행할때 어떤 종류의 Tracker를 활성화 시킬지에 대한 옵션 객체를 Init함수 인자로 전달하여 선언할 수 있습니다.
기본적으로 어떤 옵션도 없으면 Image Tracker를 활성화합니다.

Example

// 예제 1: Image Tracker를 활성화 (default)
letsee.init();

// 예제 2: Image Tracker 활성화 (option 사용)
letsee.init({ trackerType: 'image' });

// 예제 3: Aruco Tracker 활성화
letsee.init({ trackerType: 'marker' });

// 예제 4: QRCode Tracker 활성화
letsee.init({ trackerType: 'qrcode' });

Parameters:

Name Type Description

config

object

Properties

Name	Type	Default	Description
`trackerType`	string	`"image"`	"image" : Image 마커 Tracker 설정 "marker" : Aruco 마커 Tracker 설정 "qrcode" : QR 코드 Tracker 설정

ready(callback)

Letsee SDK의 Engine 준비가 완료되고 하고 기본적인 초기화가 모두 진행된후 호출되는 콜백 이벤트를 등록합니다.

Example

letsee.ready(() => {
    console.log('SDK 초기화 완료'); // letsee.init() 함수 수행 완료 후 호출됩니다.
});

Parameters:

Name	Type	Description
`callback`	function	SDK Engine이 준비가 되면 호출되는 callback 함수.

start(option)

Letsee SDK를 실제로 동작시킵니다. letsee.start()가 호출되면 디바이스로부터 카메라 프레임을 얻어온 뒤 이미지로 바꾼 후, 매 프레임마다 Engine으로 해당 이미지를 전달합니다. letsee.start()는 항상 letsee.ready()의 콜백 함수 안에 선언되어야합니다.
기본적으로 SDK에서는 후면카메라를 사용하지만, 옵션을 통해 전면카메라 또는 비디오 파일이 저장된 Uri 주소를 이용하여 SDK구동에 사용되는 Stream을 지정할 수도 있습니다.

Example

letsee.ready(() => {
   // 예제 1: 후면 카메라를 통한 SDK 구동 (default)
   letsee.start();

   // 예제 2: 전면 카메라를 통한 SDK 구동
   letsee.start({ cameraDirection: 'front' }); // 'back' 일때 후면카메라 사용

   // 예제 3: 비디오 파일을 통한 SDK 구동
   letsee.start({
       isVideo: true,
       loop: true, // true일때는 반복재생, false일때는 반복재생 사용 X
       uri: 'https://example.com/test.mp4' // mp4파일 경로, './test.mp4'와 같은 상대경로로도 사용 가능
   });
});

Parameters:

Name Type Description

option

object

Properties

Name	Type	Default	Description
`isVideo`	boolean	`False`	True: uri 주소의 video의 stream을 이용하여 SDK 구동 여부 False: video file 사용하지 않음
`uri`	string		video file의 uri 경로
`loop`	boolean	`False`	True: video file을 통한 SDK 구동시 video file 반복재생 False: video file을 통한 SDK 구동시 video file 반복재생 X
`cameraDirection`	cameraDirection	`"back"`	"front": 전면카메라의 stream을 사용하여 SDK 구동 "back": 후면카메라의 stream을 사용하여 SDK 구동

pause(pose)

마커에 증강된 Entity의 증강(Tracking)을 멈추고 화면에서 일시적으로 Pause를 수행합니다. 만약 16자리의 Pose Array(ModelView Matrix)를 인자로 넘겨주면 해당 pose Matrix 위치로 이동하여 Pause를 수행합니다.

Example

letsee.pause();

Parameters:

Name	Type	Description
`pose`	undefined \| Array(16)	16자리 ModelView Matrix Array

resume()

멈춰진 Entity가 마커에서 다시 증강(Tracking)되어 보일수 있도록 Resume을 수행합니다. 만약 16자리의 Pose Array(ModelView Matrix)를 인자로 넘겨주면 해당 pose Matrix 위치로 이동하여 Resume를 수행합니다.

Example

letsee.resume();

onTrackStart(callback)

TrackStart 이벤트가 전파됬을 때 동작하는 콜백 이벤트를 등록합니다. Entity(마커)가 카메라 화면 안에 들어와 SDK Engine이 마커 검출(detection)을 성공했을때 TrackStart 이벤트가 발생합니다.

Example

// 마커 Tracking 시작 후 호출
letsee.onTrackStart(e => {
    console.log('TrackStart 이벤트 호출');
    console.log(e); // TrackEvent 출력
})

Parameters:

Name	Type	Description
`callback`	onTrackEventCallback	TrackStart Event 전달

onTrackMove(callback)

TrackMove 이벤트가 전파됬을 때 동작하는 콜백 이벤트를 등록합니다. 마커 검출(detection) 이후, 카메라 화면안에서 Entity(마커)가 움직일때 해당 마커에 대해 SDK Engine이 해당 마커를 추적(Tracking)합니다. 추적(Tracking) 중일 때 마커가 화면 안에 있으면 반복적으로 TrackMove 이벤트가 발생합니다.

Example

// 마커 Tracking 동작 중일때 호출
letsee.onTrackMove(e => {
    console.log('TrackMove 이벤트 호출');
    console.log(e); // TrackEvent 출력
})

Parameters:

Name	Type	Description
`callback`	onTrackEventCallback	TrackMove Event 전달

onTrackEnd(callback)

TrackEnd 이벤트가 전파됬을 때 동작하는 콜백 이벤트를 등록합니다. 추적(Tracking)상태에서 마커(Entity)가 화면 밖으로 이동하여 마커가 화면밖에서 벗어나거나, 일부 가려졌을 때, 추적(Tracking)이 풀리게 됩니다. 이 때 TrackEnd 이벤트가 발생합니다.

Example

// 마커 Tracking 종료 후 호출
letsee.onTrackEnd(e => {
    console.log('TrackEnd 이벤트 호출');
    console.log(e); // TrackEvent 출력
})

Parameters:

Name	Type	Description
`callback`	onTrackEventCallback	TrackEnd Event 전달

addTarget(uri) → {Entity}

마커의 이미지 타겟(descriptor)을 SDK 엔진에 등록하고, 결과로 마커(Entity) 객체를 얻어옵니다. 이후 XRElement를 생성 후 해당 Entity를 타겟으로 등록(binding)시켜 화면에 출력합니다.

Example

letsee.init();
letsee.ready(() => {
   letsee.start();
   letsee.addTarget('test.json').then(entity => {
       const helloWorldElem = document.createElement('div');
       helloWorldElem.innerHTML = 'Hello world!';
       const xrElement = letsee.createXRElement(helloWorldElem);
       letsee.bindXRElement(xrElement, entity);
});

Parameters:

Name	Type	Description
`uri`	string	마커 이미지의 uri 경로

Returns:

Type: Entity

addTHREE(threejs) → {Promise.<addTHREEPromiseCallback>}

THREE.js를 연동하고 Three.js의 3D world를 마커(Entity)위에 증강시킬 수 있는 환경을 구축할때 사용합니다. 첫번째로, THREE 라이브러리를 연동하고 해당 THREE 라이브러리를 Promise 함수로 전달합니다. 이후, callback 함수를 통해 letsee SDK의 THREE.js world를 증강시키는 SDK의 THREERenderer에 대한 renderer, camera, scene, update를 얻어옵니다.

renderer

Letsee SDK와 연동 된 three.js의 renderer 입니다.
renderer 3D 공간을 마커(Entity) 위에 render할 때 필요합니다.

camera

Letsee SDK와 연동 된 three.js의 perspective camera 객체입니다.
해당 camera는 SDK를 구동시키는 모바일 디바이스에 대한 fov값과 aspect ratio를 가지고 있습니다.

scene

Letsee SDK와 연동 된 three.js의 Scene 객체입니다.
SDK를 사용하는 개발자가 해당 Scene 객체 위에 자신이 증강시키고 싶은 Three.js의 컨텐츠를 만들고 해당 Scene위에 추가할 수 있습니다.

update

requestAnimationFrame() 에서 Scene이 한번 render 될 때마다 호출 시켜줘야하는 함수입니다.
해당 함수가 호출되면, Letsee SDK Engine이 입력받은 한 Frame에 대한 연산을 수행하고 대기합니다.

Example

letsee.ready(() => {
    letsee.start();
    letsee.addTHREE(THREE).then(obj => { // 1. Three라이브러리를 param으로 삽입하고 결과로 3D를 그릴때 사용되는 renderer, camera, scene, update를 얻어옵니다.
        console.log(obj)
        renderer = obj.renderer; // WebGLRenderer
        scene = obj.scene; // Three.js Scene (Object3D)
        update = obj.update; // SDK 다음 Frame을 그리도록 호출하는 함수
        letsee.addTarget('toystory.json').then(entity => {
            toystory = entity; // 2. 마커에 대한 Entity 객체를 얻어옵니다.
            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            cube.scale.set(50, 50, 50);
            toystory.add(cube); // Entity에 cube mesh 삽입
            scene.add(toystory); // 3. mesh Object들을 담은 Entity 객체를 Three.js Scene에 추가합니다.

            const animate = async function() {
                requestAnimationFrame(animate);
                await update(); // 4. Letsee SDK에서 다음 Frame을 호출합니다.
                const camera = letsee.threeRenderer().getDeviceCamera(); // 5. Three.Camera를 가져옵니다.
                renderer.render(scene, camera); // 6. WebGLRenderer를 통해 scene을 렌더링합니다.
            };
            animate();
        });
    });
});

Parameters:

Name Type Description

Name	Type	Description
`threejs`	THREE	three.js 라이브러리. 아래와 같이 Script를 삽입하면 THREE가 global로 생성됨. `<script src="https://unpkg.com/three@0.121.1/build/three.min.js"></script>`

threejs

THREE

three.js 라이브러리. 아래와 같이 Script를 삽입하면 THREE가 global로 생성됨.

<script src="https://unpkg.com/three@0.121.1/build/three.min.js"></script>

Returns:

renderer, camera, scene, update를 전달받는 addTHREE() Promise 함수에 대한 callback

Type: Promise.<addTHREEPromiseCallback>

getEntityByUri(uri) → {Entity}

HTMLElement 혹은 DOM string을 이용하여 XRElement를 생성합니다. Entity를 인자로 받은 경우, XRElement를 Entity(마커)에 연결합니다.

Example

// test.json을 descriptor uri로 가지는 Entity를 조회
letsee.getEntityByUri('test.json');

Parameters:

Name	Type	Description
`uri`	string	해당 uri를 갖는 Entity를 검색할때 사용하는 문자열

Returns:

Letsee의 Entity 객체

Type: Entity

createXRElement(htmlElement, entity) → {XRElement}

HTMLElement 혹은 DOM string을 이용하여 XRElement를 생성합니다. Entity를 인자로 받은 경우, XRElement를 Entity(마커)에 연결합니다.

Example

// 예제 1 : HTMLElement로 XRElement 생성
const divElement = document.createElement('div');
divElement.innerHTML = 'example';
const xrElement1 = letsee.createXRElement(divElement);

// 예제 2 : DOM String을 통해 XRElement 생성
const xrElement2 = letsee.createXRElement('<div>example</div>')

// 예제 3 : XRElement 생성 후, Entity로 binding
const entity = letsee.getEntityByUri('test.json');
letsee.createXRElement('<div>example</div>', entity);

Parameters:

Name	Type	Description
`htmlElement`	HTMLElement \| string	HTMLElement 또는 `<div></div>`와 같은 Dom 형식의 문자열
`entity`	Entity	letsee의 Entity 객체

Returns:

생성된 XRElement를 반환

Type: XRElement

bindXRElement(xrElement, entity) → {XRElement}

입력받은 XRElement를 Entity(마커)에 연결합니다.

Example

// XRElement 생성 후, Entity에 binding
const xrElement = letsee.createXRElement('<div>example</div>')
const entity = letsee.getEntityByUri('test.json');
letsee.bindXRElement(xrElement, entity)

Parameters:

Name	Type	Description
`xrElement`	XRElement \| Entity	HTMLElement 또는 `<div></div>`와 같은 Dom 형식의 문자열
`entity`	Entity	letsee의 Entity 객체

Returns:

Entity에 연결된 XRElement를 반환

Type: XRElement

unbindXRElement(xrElement) → {XRElement}

입력받은 XRElement와 Entity(마커)의 연결을 끊습니다. THREE.js를 이용하여 AR컨텐츠를 만들 때, THREE 라이브러리를 연동하고, 결과로 letsee의 THREE.js에 대한 renderer, camera, scene, update을 얻어옵니다.

Example

// xrElement를 찾은 뒤, entity와의 연결을 unbind
const xrElementById = letsee.getXRElementById('id-selector'); // id 선택자를 통해 XRElement 조회
letsee.unbindXRElement(xrElementById)

Parameters:

Name	Type	Description
`xrElement`	XRElement	Letsee의 XRElement 객체

Returns:

Entity로부터 연결이 끊긴 XRElement를 반환

Type: XRElement

getXRElementById(id, entity) → {XRElement}

입력받은 id 선택자를 지닌 XRElement를 검색하여 반환합니다.

Example

letsee.createXRElement(`<div id="hello">Hello World.</div>`)  // 1. xrElement 생성
const xrElementById = letsee.getXRElementById('test'); // 2. id로 xrElement 조회

Parameters:

Name	Type	Description
`id`	string	XRElement가 가지고 있는 HTMLElement 최상위 부모의 id 선택자
`entity`	Entity	letsee의 Entity 객체

Returns:

id 선택자로 검색된 XRElement를 반환

Type: XRElement

getXRElementByClassName(className) → {Array.<XRElement>}

입력받은 class 선택자를 지닌 XRElement 배열을 검색하여 반환합니다.

Example

letsee.createXRElement(`<div class="hello">Hello World.</div>`) // 1. 첫번째 xrElement 생성
letsee.createXRElement(`<div class="hello">Hello World.</div>`) // 2. 두번째 xrElement 생성
const xrElementsByClass = [];
xrElementsByClass = letsee.getXRElementByClassName('hello'); // 3. class 선택자를 통해, XRElements 목록을 조회

Parameters:

Name	Type	Description
`className`	string	XRElement가 가지고 있는 HTMLElement 최상위 부모의 className 선택자

Returns:

class 선택자로 검색된 XRElement 배열을 반환

Type: Array.<XRElement>

getAllXRElements(entity) → {Array.<XRElement>}

모든 XRElement들을 배열에 담아 반환합니다. 만약 Entity를 인자로 받은 경우 Entity에 연결된 XRElement들을 배열에 담아 반환합니다.

Example

// 예제 1 : 모든 XRElement 조회
const allXRElements = [];
allXRElements = letsee.getAllXRElements();

// 예제 2 : 인자로 전달한 Entity에 binding 되어 있는 XRElement 조회
const allXRElementsByEntity = [];
const entity = letsee.getEntityByUri('test.json');
const allXRElementsByEntity = letsee.getAllXRElements(entity);

Parameters:

Name	Type	Description
`entity`	Entity \| undefined	Letsee의 Entity 객체, 혹은 빈 값

Returns:

모든 XRElement 배열을 반환

Type: Array.<XRElement>

removeXRElement(xrElement) → {XRElement}

입력받은 XRElement를 Entity와의 연결을 끊고 SDK의 XRElement 관리 목록에서 삭제합니다.

Example

// 예제 1 : id로 XRElement 조회 후, SDK의 XRElement 관리 목록에서 삭제
const xrElementById = letsee.getXRElementById('id-selector');
letsee.removeXRElement(xrElementById);

// 예제 2 : 모든 XRElement 조회 후, 반복문을 통해 SDK의 XRElement 관리 목록에서 삭제
const allXRElements = letsee.getAllXRElements();
allXRElements.forEach((xrElement) => {
    letsee.removeXRElement(xrElement);
})

Parameters:

Name	Type	Description
`xrElement`	XRElement	Letsee의 XRElement 객체

Returns:

삭제된 XRElement 를 반환

Type: XRElement

removeAllXRElements(entity) → {Array.<XRElement>}

모든 XRElement를 Entity와의 연결을 끊고 xrElement 관리 목록에서 삭제합니다. 인자로 Entity를 전달받은 경우 해당 Entity에 연결된 XRElement 들의 연결을 끊고 목록에서 삭제합니다.

Example

// 예제 1 : 모든 XRElement의 Entity와의 연결을 unbinding한 뒤, SDK의 XRElement 관리 목록에서 삭제
letsee.removeAllXRElements();

// 예제 2 : 인자로 입력받은 Entity에 연결된 XRElement의 연결을 unbinding한 뒤, SDK의 XRElement 관리 목록에서 삭제
const entity = letsee.getEntityByUri('test.json');
letsee.removeAllXRElements(entity);

Parameters:

Name	Type	Description
`entity`	Entity \| undefined	Letsee의 Entity 객체 혹은 빈 값

Returns:

삭제된 XRElement 배열을 반환

Type: Array.<XRElement>

useRaycaster(isUse)

Raycaster 기능에 대한 사용 여부를 지정합니다.

Example

letsee.addTHREE(THREE).then(obj => {
    camera = obj.camera;
    renderer = obj.renderer;
    scene = obj.scene;
    update = obj.update;
    raycaster = new THREE.Raycaster();
    letsee.useRaycaster(true); // 1. raycaster 사용 여부 True로 지정
})

Parameters:

Name	Type	Description
`isUse`	boolean	True: Raycaster 기능 사용 False: Raycaster 기능 사용 X

addRaycasterTargets(targets, isRecursive)

Raycaster를 통해 충돌검사를 수행할 Object3D를의 배열을 등록합니다. Letsee SDK에서는 Entity의 children들을 넘겨주어 Three 렌더러의 충돌검사 타겟을 등록합니다.

Example

letsee.addTHREE(THREE).then(obj => {
    camera = obj.camera;
    renderer = obj.renderer;
    scene = obj.scene;
    update = obj.update;
    raycaster = new THREE.Raycaster();
    letsee.useRaycaster(true); // 1. raycaster 사용 여부 True로 지정

    const entity = letsee.getEntityByUri('example.json'); // 2. 현재 증강시킬 마커에 대한 Entity 객체를 불러옴
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    const cube = new THREE.Mesh( geometry, material ); // 3. cube 모양의 mesh 생성
    cube.scale.set(50, 50, 50);

    entity.add(cube); // 4. entity의 자식(children)으로 cube 추가

    letsee.addRaycasterTargets(entity.children , false); // 5. entity의 children 배열을 Raycaster의 타겟으로 등록
})

Parameters:

Name	Type	Description
`targets`	Array	충돌검사를 수행하기 위한 Object3D 배열
`isRecursive`	Boolean	true이면 입력받은 Object3D 배열들의 자식(children)을 순회하여 충돌검사를 수행 / false이면 현재 배열 목록안에 있는 Object3D만 충돌검사 수행

removeRaycasterTargets(targets)

Raycaster를 통해 충돌검사를 수행할 Object3D를 등록을 해지합니다.

Example

letsee.addRaycasterTargets(entity.children , false); // 1. entity의 children 배열을 Raycaster의 타겟으로 등록
letsee.removeRaycasterTargets(entity.children); // 2. entity의 children 배열을 Raycaster의 타겟에서 제거

Parameters:

Name	Type	Description
`targets`	Array	충돌검사를 수행을 해지할 Object3D 배열

onIntersectedRaycasterTargets(callback)

Raycaster를 통한 충돌검사에서 3D 객체가 검출되었을때, 해당 검출된 3D 객체들에 대한 정보를 전달하는 이벤트 콜백 리스너를 등록합니다.

Example

letsee.addTHREE(THREE).then(obj => {
    camera = obj.camera;
    renderer = obj.renderer;
    scene = obj.scene;
    update = obj.update;
    raycaster = new THREE.Raycaster();
    letsee.useRaycaster(true); // 1. raycaster 사용 여부 True로 지정

    const entity = letsee.getEntityByUri('example.json'); // 2. 현재 증강시킬 마커에 대한 Entity 객체를 불러옴
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    const cube = new THREE.Mesh( geometry, material ); // 3. cube 모양의 mesh 생성
    cube.scale.set(50, 50, 50);

    entity.add(cube); // 4. entity의 자식(children)으로 cube 추가
    letsee.addRaycasterTargets(entity.children , false); // 5. entity의 children 배열을 Raycaster의 타겟으로 등록

    letsee.onIntersectedRaycasterTargets(objects => { // 6. 충돌검사 이후 검출된 3D 객체들에 대한 정보를 전달받은 callback 함수 등록
        console.log(objects);
    });

    scene.add(entity); // 7. scene에 Entity 객체를 추가

    const animate = async function() {
        requestAnimationFrame(animate);
        const camera = letsee.threeRenderer().getDeviceCamera();
        await letsee.threeRenderer().update();
        renderer.render(scene, camera); // 8. 매 프래임마다 scene과 camera 렌더링
    };
    animate();
 });

Parameters:

Name	Type	Description
`callback`	function	Raycaster를 통해 등록된 Object3D 타겟이 검출되었을때, 검출된 값을 전달받을 callback 함수

onAccelerationChange(callback)

모바일 단발기가 직선방향으로 움직일 때, 가속도센서(acceleration)로부터 직선 운동에 대한 가속도에 정보의 값을 전달하는 이벤트 콜백 리스너를 등록합니다.

Example

letsee.onAccelerationChange(e => {
    const {x, y, z} = e;
    console.log(x); // x축 방향에 대한 가속도 (m/초2)
    console.log(y); // y축 방향에 대한 가속도 (m/초2)
    console.log(z); // z축 방향에 대한 가속도 (m/초2)
});

Parameters:

Name	Type	Description
`callback`	onAccelerationChangeEventCallback	가속도센서로부터 직선 운동의 가속도에 대한 정보를 전달받는 callback 함수

onAccelerationIncludingGravityChange(callback)

모바일 단말기가 직선방향으로 움직일 때, 가속도센서(acceleration)로부터 중력이 적용된 직선 운동에 대한 가속도 정보를 전달하는 이벤트 콜백 리스너를 등록합니다.

Example

letsee.onAccelerationIncludingGravityChange(e => {
    const {x, y, z} = e;
    console.log(x); // x축 방향에 대한 중력이 적용된 가속도 (m/초2)
    console.log(y); // y축 방향에 대한 중력이 적용된 가속도 (m/초2)
    console.log(z); // z축 방향에 대한 중력이 적용된 가속도 (m/초2)
});

Parameters:

Name	Type	Description
`callback`	onAccelerationIncludingGravityChangeEventCallback	가속도센서로부터 중력이 적용된 직선 운동의 가속도에 대한 정보를 전달받는 callback 함수

onRotationRateChange(callback)

모바일 단말기가 회전할 때, 자이로스코프센서(gyroscope)로부터 회전운동에 대한 각속도 정보를 전달하는 이벤트 콜백 리스너를 등록합니다.

Example

letsee.onRotationRateChange(e => {
    const {alpha, beta, gamma} = e;
    console.log(alpha); // z축을 기준으로 한 초당 회전 각도 (°/초)
    console.log(beta); // x축을 기준으로 한 초당 회전 각도 (°/초)
    console.log(gamma); // y축을 기준으로 한 초당 회전 각도 (°/초)
});

Parameters:

Name	Type	Description
`callback`	onRotationRateChangeEventCallback	자이로스코프 센서로부터 회전 운동에 대한 각속도 정보를 전달받는 callback 함수

onOrientationChange(callback)

모바일 단말기가 회전하거나 이동할 때, 가속도센서(acceleration), 자이로스코프센서(gyroscope), 자력센서(magneto)을 통해 센서 퓨전된 데이터로부터 지구 좌표계에 대한 기기의 현재 위치 변화에 대한 정보를 전달하는 이벤트 콜백 리스너를 등록합니다.

Example

letsee.onOrientationChange(e => {
    const {alpha, beta, gamma} = e;
    console.log(alpha); // z축의 중심을 기준으로 얼마만큼 회전했는지에 대한 각도값 (°), 기기 상단이 정북향을 가리킬 때 alpha값이 0°이며, 기기가 시계 반대 방향으로 회전할수록 alpha 값이 증가 (0~360°)
    console.log(beta); // x축의 중심을 기준으로 얼마만큼 회전했는지에 대한 각도값 (°), 기기 상단과 하단이 지면에서 등거리에 있을 때 beta값은 0°이며, 기기의 상단이 지면을 향해 기울어질수록 값이 증가 (-180°~180°)
    console.log(gamma); // y축의 중심을 기준으로 얼마만큼 회전했는지에 대한 각도값 (°), 기기 왼쪽과 오른쪽 가장자리가 지면에서 등거리에 있을 때 gamma값은 0°이며, 기기의 오른쪽이 지면을 향해 기울어질수록 값이 증가 (-180°~180°)
});

Parameters:

Name	Type	Description
`callback`	onOrientationChangeEventCallback	센서 퓨전으로부터 지구좌표계를 기준으로한 방향의 정보를 전달받는 callback 함수