How to update anchor position

Here, anchors.addAnchorPointUsingHitTestResultAsync() adds a anchor when scene.onPointerDown is performed. So when I touch the screen multiple times, on every touch a anchor is added which has id values as id=1, id=2, id=3 … . How do I avoid adding multiple anchors and use only one anchor to move the mesh on hittest. Any help is much appreciated.

 if (anchors) {

        anchors.onAnchorAddedObservable.add(anchor => {

            mesh.isVisible = true;

            mesh.setEnabled(true); 

            anchor.attachedNode = mesh;

            anchor.attachedNode.rotation = new BABYLON.Vector3(0,270,0);

            

        });

        anchors.onAnchorRemovedObservable.add(anchor => {

            console.log('disposing', anchor);

            if (anchor) {

                anchor.attachedNode.isVisible = false;

                anchor.attachedNode.dispose();

            }

        });

    }


    scene.onPointerDown = (evt, pickInfo) => {

        if (hitTest && anchors && xr.baseExperience.state === BABYLON.WebXRState.IN_XR) {

                anchors.addAnchorPointUsingHitTestResultAsync(hitTest);    
        }

    }

also tried this one to restrict to only one anchor, but was not able to update mesh position when touching the screen.

var noofanchors =0;
scene.onPointerDown = (evt, pickInfo) => {
if (hitTest && anchors && xr.baseExperience.state === BABYLON.WebXRState.IN_XR) {
      if(noofanchors<1){
           anchors.addAnchorPointUsingHitTestResultAsync(hitTest);
           noofanchors+=1;
        }else{   return; }             
      }
  }

An anchor is a fixed point in space and cannot be changed. If you change it, you technically dispose it and re-create a new one. It is updated by the underlying system constantly.
So, if you want only one, dispose the old one, get the mesh attached to it, and attach it to a new anchor.

I have just started exploring Babylon js WebXR features. So I don’t have much knowledge on WebXR and I’m not able to find examples. How to dispose the previous anchor and attach the mesh to new one?

That’s great! You will need to understand the concepts behind those features (like what an anchor is) as well. Having said that - each WebXRAnchor object has a remove() function. It also has an anchorNode that is the mesh you are attaching to it. All you need to do it to assign the node to a different anchor. There is no real need to remove the old one (unless you are planning on having a lot of anchors at the same time).

So the workflow would be - Have a reference of the last anchor added, have a single transform node that you will attach to a newly created node. Now - when adding a new anchor, if the old anchor is defined, remove it. Attach the single transformNode to the newly created anchor. And that’s it.

Please tell me how can I refer to the anchor when clicking on the mesh attached to it?

That would be a part of your application architecture. You are the one shedding the mesh to the anchor. With the right data structure you can also reference the anchor from the mesh.
So - it depends on your architecture, there is no Babylon-way to do it directly.

More precisely, when I refer to anchors, it has an array of anchors in its structure, but sometimes it is empty, even if the anchor actually still exists.
How can I refer to an anchor by its id for example?

the anchors array is just meant as an easy access point using the anchor’s id. It is more than possible that one element in the array will be empty, mainly after it was removed.
If the array is empty, but there are still anchors in the scene that are active and were not removed, it is an error. can you reproduce that in the playground?

I created a PG but now everything is fine) the array is not empty. Perhaps the error was elsewhere.

The minute you can reproduce the behavior, I will be happy to check. Don’t forget that the playground is usuing the latest preview build, so this might have already been fixed.