Creating AR contents using Letsee WebAR SDK is the same as creating a web page. However, there are some restrictions for the AR environment, and it is possible to create WebAR contents within the scope of this restriction

Very simple example of 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>

Looking at the simple example above, follow the rules required to create AR contents.

  1. How to load SDK script

    /* Method 1 */
<script src="<https://developer.letsee.io/api/webar?key=**[AUTHENTICATION_KEY_OF_YOUR_PROJECT]**>"></script>

    How to use the SDK is no different from using other regular javascript libraries. However, when requesting the SDK library, you should use the Authentication Key issued by Letsee for Developers.

    After copying the issued authentication key, paste it in the [AUTHENTICATION_KEY_OF_YOUR_PROJECT] item into the script above.

  2. Registration of ready callback function

    letsee.ready(() => {
   letsee.start();
   ...
});

    When ready to start engine is completed it passes a callback function to execute an argument

    In this case letsee.start(); should be included, engine will not start immediately even if the engine is ready to start if it is not specified in the function

    In addition, if actions such as registering a target, creating or loading a 3D model or creating a DomElement are described together in the ready callback function, the contents of the function are executed as soon as the engine is ready to start.

  3. Registration of Target

    In the above example, the recognition target (target) is registered using the addTarget() function. For how to create a target, please refer to the Recognition target (entity) tutorial page

  4. initialize

    After registering the ready callback function, be sure to execute the letsee.init() function so that the engine can be initialized. trackerType must be specified as an initialization option, and the engine is ready to start so that it can be operated using the specified trackerType

    letsee.init({trackerType: 'image'});

The process of starting the SDK engine, which can be seen through this, is as follows

<aside> πŸ’‘ SDK script load β†’ Register ready callback function β†’ initialize β†’ ready callback function execution β†’ Engine start β†’ Target registration β†’ Augmented object composition

</aside>