letsee

letsee

new letsee()

WebAR SDK가 실행되면, window.letsee로 접근가능한 Letsee class 입니다.

Methods

init()

렛시 SDK를 초기화하고, 시작할 준비를 합니다.

ready(callback)

렛시 SDK를 초기화한 이후, Engine(이미지트래커)이 준비될때 호출되는 콜백 이벤트를 등록합니다.

Parameters:
Name Type Description
callback function

start()

렛시 SDK를 시작하고 디바이스로부터 카메라를 얻어옵니다.

Example
letsee.init(); // Letsee SDK 초기화.
letsee.ready(() => { // Letsee SDK 트래커 Engine 초기화.
   letsee.start(); // Device의 카메라를 얻어오고 SDK 동작 시작.
});

onTrackStart(callback)

마커가 카메라 화면 안으로 들어와 증강이 시작됬을때 발생하는 콜백 이벤트를 등록합니다.

Parameters:
Name Type Description
callback function
Properties
Name Type Description
event TrackEvent

onTrackMove(callback)

마커가 카메라 화면에서 증강 중일때 발생하는 콜백 이벤트를 등록합니다.

Parameters:
Name Type Description
callback function
Properties
Name Type Description
event TrackEvent

onTrackEnd(callback)

마커가 화면에서 벗어났을때 호출되는 콜백 이벤트를 등록합니다.

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

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

// 마커 Tracking 종료 후 호출
letsee.onTrackMove(e => {
    console.log('TrackEnd 이벤트 호출');
    console.log(e); // TrackEvent 출력
})
Parameters:
Name Type Description
callback function
Properties
Name Type Description
event TrackEvent

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

THREE.js를 이용하여 AR컨텐츠를 만들 때, THREE 라이브러리를 연동하고, 결과로 letsee의 THREE.js에 대한 renderer, camera, scene, update을 얻어옵니다.

Parameters:
Name Type Description
threejs THREE

three.js 라이브러리

Returns:
Type
Promise.<ThreeRendererEvent>

addTarget(uri) → {Entity}

마터 이미지 타겟을 등록하고 결과로 Entity(마커) Object3D 객체를 얻어옵니다. 이후 해당 Entity를 이용하여 Three.js의 Scene을 Entity에 추가합니다.

Example
<script src="https://developer.letsee.io/api/webar?key=YOUR_APP_KEY"></script> // <!-- Letsee SDK 로드 -->
<script src="https://unpkg.com/three@0.121.1/build/three.min.js"></script> <!--  1. Three.js 라이브러리를 cdn으로 로드합니다. -->
<script>
    letsee.init();
    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();
            });
        });
    });
</script>
Parameters:
Name Type Description
uri string

마커 이미지의 uri 경로

Returns:
Type
Entity