What is XRElement?

Letsee WebAR SDK can match and display HTMLElement in XR space recognized by the tracker. At this time, the HTMLElement (DomElement) to be matched to the XR space is referred to as XRElement.

XRElement is managed as a child object of the entity to be recognized that creates the XR space. Refer to the following tutorials to create XRElement and bind it to Entity.

Creation of XRElement

1. How to create XRElement using DomElement described as markup in HTML

   var dom = document.getElementById('[DomElement ID]');
   
   /* Only when creating XRElement */
   letsee.createXRElement(dom);
   
   /* When creating an XRElment and binding to an entity */
   var entity = letsee.getEntityByUri('[Generated ENTITY URI]');
   letsee.createXRElement(dom, entity);
   

2. How to create an HTML element using a script and create XRElement using this HTML element

   var dom = document.createElement('div');
   dom.id = 'xr_01';
   dom.innerHTML = 'This is XRElement';
   
   /* Only wwhen creating XRElement*/
   letsee.createXRElement(dom);
   
   /* When creating an XRElment and binding to an entity */
   var entity = letsee.getEntityByUri('[Generated ENTITY URI]');
   letsee.createXRElement(dom, entity);
   

Access the created XRElement object

1. Access using element ID

   var xrElement = letsee.getXRElementById('[DomElement ID]');
   

2. Access using element class name

   var xrElements = letsee.getXRElementByClassName('[DomElement class name]');
   

3. Access to all XRElements bound to the entity

   var entity = letsee.getEntityByUri('[Generated ENTITY URI]');
   var xrElements = letsee.getAllXRElements(entity);
   

Bind XRElement to Entity

var xrElement = letsee.getXRElementById('[DomElement ID]');
var entity = letsee.getEntityByUri('[Generated ENTITY URI]');

letsee.bindXRElement(xrElement, entity);

Unbind XRElement from Entity

var xrElement = letsee.getXRElementById('[DomElement ID]');
letsee.unbindXRElement(xrElement);

Remove the created XRElement

var xrElement = letsee.getXRElementById('[DomElement ID]');
letsee.removeXRElement(xrElement);

Remove all XRElements bound to Entity

var entity = letsee.getEntityByUri('[Generated ENTITY URI]');
letsee.removeAllXRElements(entity);