Letsee WebAR SDK supports three.js - a 3D framework based on WebGL. Just like the RElement, 3D Object is managed as a child object of the entity to be recognized that creates XR space. However, the difference from XRElement is that the entity is registered as a child object of the 3D Scene. Through this, it is possible to recognize and track 3D objects in 3D space based on the coordinates of the entity.
<!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>
In the example above, a 3D Cube is added as a child object to the entity created by registering an image target. This example of configuring so that 3D Cube can be rendered using WebGL renderer in 3D Scene by executing the defined rendering function after adding the entity as a child object of 3D Scene. At this time, Letsee WebAR SDK allows the 3D Cube to be augmented through the recognition and tracking of the registered image target.
<!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 generally maintains the method of loading and using the three.js library in order to be able to integrate three.js in the same way it was used, but it takes a method of passing the three.js object to the Letsee WebAR SDK. Passing the HREE object to Letsee WebAR SDK creates and returns the WebGL renderer, Scene, and Perspective Camara that match the environmental conditions between three.js and SDK.
Content developers who want to create, load, and control 3D Objects through three.js write code using the returned renderer, scene, and camera, and the integration between SDK and three.js will occur naturally.
<!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>
By using the add function of entity, created 3D Object can be added as a child object of the entity.
<!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>
Similarly, you can add entity as a child object of the scene by using the add function of the 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>
First, declare the animate function. The animate function is declared as async function, because the function that updates the coordinate information of 3D objects in Letsee WebAR SDK is declared as async.
Inside the animate function, the relevant animate function is passed as an argument of requestAnimationFrame. Rendering loop is operated through this.