Worldspace DOM object in WebAR not aligning to Mesh

Questions
, , ,
1

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){
        annotationImage.style.display = "block";
        currentMeshForAnnotate.updateWorldMatrix(true, true);
        currentMeshForAnnotate.getWorldPosition(tempV);
        camera.updateMatrixWorld();
        tempV.project(camera);  
        
        // 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
        annotationImage.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
    }    
    else{
        annotationImage.style.display = "none";
    }
    //World space interaction annotation position update - End Region
1 Like