Letsee WebAR SDK 는 WebGL 기반의 3D 프레임워크인 three.js 를 지원합니다. XRElement 처럼 3D Object 를 XR 공간을 생성하는 인식대상인 엔터티의 자식 객체로 관리됩니다. 단, XRElement 와 다른 점은 엔터티가 3D Scene의 자식 객체로 등록된다는 것 입니다. 이를 통해, 엔터티의 좌표를 바탕으로 3D Object를 3D 공간에서 인식, 추적이 가능하게 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letsee WebApp: Simple 3D Object #1</title>
<!-- THREE.js -->
<script src="<https://unpkg.com/[email protected]/build/three.min.js>"></script>
<!-- Letsee WebAR SDK -->
<script src="<https://developer.letsee.io/api/webar?key=**YOUR_AUTHENTICATION_KEY**>"></script>
</head>
<body>
<script>
let scene;
let renderer;
let entity;
letsee.ready(() => {
letsee.start();
letsee.addTHREE(THREE).then(obj => {
renderer = obj.renderer;
scene = obj.scene;
letsee.addTarget('**[YOUR_TARGET_URI]**')
.then(_entity => {
entity = _entity;
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
cube.scale.set(30, 30, 30);
cube.position.z = 30;
entity.add(cube);
scene.add(entity);
const animate = async function() {
requestAnimationFrame(animate);
const camera = letsee.threeRenderer().getDeviceCamera();
renderer.render(scene, camera);
await letsee.threeRenderer().update();
};
animate();
});
});
});
letsee.init({trackerType: 'image'});
</script>
</body>
</html>
위의 예제는 이미지 타겟을 등록하여 생성한 entity 에 3D Cube 를 자식 객체로 추가하고, 해당 entity 를 3D Scene 의 자식 객체로 추가한 뒤에 정의한 rendering 함수를 실행시켜서 3D Scene 에 WebGL renderer 를 이용하여 3D Cube 를 rendering 할 수 있도록 구성한 예제이다. 이 때, Letsee WebAR SDK는 해당 3D Cube 가 등록된 이미지 타겟의 인식, 추적을 통해 증강이 될 수 있도록 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letsee WebApp: Simple 3D Object #1</title>
<!-- THREE.js -->
<script src="<https://unpkg.com/[email protected]/build/three.min.js>"></script>
<!-- Letsee WebAR SDK -->
<script src="<https://developer.letsee.io/api/webar?key=**YOUR_AUTHENTICATION_KEY**>"></script>
</head>
<body>
<script>
let scene;
let renderer;
letsee.ready(() => {
letsee.start();
**letsee.addTHREE(THREE).then(obj => {
renderer = obj.renderer;
scene = obj.scene;
});**
});
letsee.init({trackerType: 'image'});
</script>
</body>
</html>
Letsee WebAR SDK 는 three.js 를 사용하던 방법 그대로 통합할 수 있도록 하기 위해 일반적으로 three.js 라이브러리를 로드하여 쓰는 방식을 그대로 유지하되, 해당 three.js 객체를 Letsee WebAR SDK 에 전달하는 방식을 취한다. THREE 객체를 Letsee WebAR SDK 에 전달하면 three.js 와 SDK 사이의 환경 조건을 일치시킨 WebGL renderer, Scene, Perspective Camara 를 생성하여 반환한다.
three.js 를 통해 3D Object 를 생성, 로드 및 제어하고 싶은 컨텐츠 개발자는 이 반환된 renderer, scene, camera 를 이용하여 코드를 작성하면 SDK 와 three.js 의 연동은 자연스럽게 이루어지게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letsee WebApp: Simple 3D Object #1</title>
<!-- THREE.js -->
<script src="<https://unpkg.com/[email protected]/build/three.min.js>"></script>
<!-- Letsee WebAR SDK -->
<script src="<https://developer.letsee.io/api/webar?key=**YOUR_AUTHENTICATION_KEY**>"></script>
</head>
<body>
<script>
let scene;
let renderer;
let entity;
letsee.ready(() => {
letsee.start();
letsee.addTHREE(THREE).then(obj => {
...
**letsee.addTarget('[YOUR_TARGET_URI]')
.then(_entity => {
entity = _entity;
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
cube.scale.set(30, 30, 30);
cube.position.z = 30;
entity.add(cube);**
...
**});**
});
});
letsee.init({trackerType: 'image'});
</script>
</body>
</html>
entity 의 add 함수를 이용하면 생성된 3D Object 를 엔터티의 자식 객체로 추가할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letsee WebApp: Simple 3D Object #1</title>
<!-- THREE.js -->
<script src="<https://unpkg.com/[email protected]/build/three.min.js>"></script>
<!-- Letsee WebAR SDK -->
<script src="<https://developer.letsee.io/api/webar?key=**YOUR_AUTHENTICATION_KEY**>"></script>
</head>
<body>
<script>
let scene;
let renderer;
let entity;
letsee.ready(() => {
letsee.start();
letsee.addTHREE(THREE).then(obj => {
renderer = obj.renderer;
scene = obj.scene;
letsee.addTarget('**[YOUR_TARGET_URI]**')
.then(_entity => {
entity = _entity;
...
**scene.add(entity);**
...
});
});
});
letsee.init({trackerType: 'image'});
</script>
</body>
</html>
마찬가지로 scene 의 add 함수를 이용하면 entity 를 scene 의 자식 객체로 추가할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letsee WebApp: Simple 3D Object #1</title>
<!-- THREE.js -->
<script src="<https://unpkg.com/[email protected]/build/three.min.js>"></script>
<!-- Letsee WebAR SDK -->
<script src="<https://developer.letsee.io/api/webar?key=**YOUR_AUTHENTICATION_KEY**>"></script>
</head>
<body>
<script>
let scene;
let renderer;
let entity;
letsee.ready(() => {
letsee.start();
letsee.addTHREE(THREE).then(obj => {
renderer = obj.renderer;
scene = obj.scene;
letsee.addTarget('**[YOUR_TARGET_URI]**')
.then(_entity => {
...
**const animate = async function() {
requestAnimationFrame(animate);
const camera = letsee.threeRenderer().getDeviceCamera();
renderer.render(scene, camera);
await letsee.threeRenderer().update();
};
animate();**
});
});
});
letsee.init({trackerType: 'image'});
</script>
</body>
</html>
먼저 animate 함수를 선언한다. animate 함수는 async 함수로 선언하는 바, 그 이유는 Letsee WebAR SDK 에서 3D Object 의 좌표정보를 업데이트 해주는 함수가 async 로 선언되어 있기 때문이다.
animate 함수 내부에선 requestAnimationFrame 의 인자로 해당 animate 함수를 전달한다. 이를 통해, rendering loop 이 동작된다.