Worldspace DOM object in WebAR not aligning to Mesh

I am working on a implemementation for positioning a DOM element on a 3D mesh. I am using the following code in the Render loop. It is working perfectly in 3D mode (non-AR mode). But in AR mode, The DOM is not getting positioned on the mesh. Its going all over the place and when I get my device up close to the mesh, then the DOM object tried to get itself aligned to the mesh.

Please help me solve the issue, Thanks

//World space interaction annotation position update - Region
    if(currentMeshForAnnotate != null){ = "block";
        currentMeshForAnnotate.updateWorldMatrix(true, true);
        // convert the normalized position to CSS coordinates
        const x = (tempV.x *  .5 + .5) * canvas.clientWidth;
        const y = (tempV.y * -.5 + .5) * canvas.clientHeight;
        // move the elem to that position = `translate(-50%, -50%) translate(${x}px,${y}px)`;
    else{ = "none";
    //World space interaction annotation position update - End Region
1 Like