I’m currently experimenting a bit with WebXR using Three.js and cannot seem to get my head around how I should properly use anchors.
I tried implementing them based on the demo from the Immersive Web group but with no success so far, my objects still shift from their original position after being put down.
https://github.com/immersive-web/webxr-samples/blob/2d144c75ca537d2cb95625c31f46c2830a0e7850/anchors.html
I use the result from hittesting to place the anchor and then once the anchor is properly created I set everything up based on the example with the main difference that instead of just a single object, I add multiple objects to a single anchor.
reticleHitTestResult.createAnchor().then((anchor) =>
{
anchor.context = {};
anchor.context.sceneObject = [];
Point1.anchor = anchor;
Point2.anchor = anchor;
anchor.context.sceneObject.push(Point1);
anchor.context.sceneObject.push(Point2);
})
Once the anchors are created I update them on every XRFrame as shown in the demo but adapted so it works with an array of linked sceneobjects instead of a single object
const tracked_anchors = frame.trackedAnchors;
if(tracked_anchors){
all_previous_anchors.forEach(anchor => {
if(!tracked_anchors.has(anchor))
{
for (let currObject = 0; currObject < anchor.context.sceneObject.length;++currObject)
{
this.scene.remove(anchor.context.sceneObject[currObject]);
}
}
});
tracked_anchors.forEach(anchor => {
const anchorPose = frame.getPose(anchor.anchorSpace, this.localReferenceSpace);
if (anchorPose)
{
for (let currObject = 0; currObject < anchor.context.sceneObject.length;++currObject)
{
anchor.context.sceneObject[currObject].matrix.set(anchorPose.transform.matrix);
}
}
else
{
for (let currObject = 0; currObject < anchor.context.sceneObject.length;++currObject)
{
anchor.context.sceneObject[currObject].visible = false;
}
}
});
all_previous_anchors = tracked_anchors;
}
else {
all_previous_anchors.forEach(anchor =>
{
for (let currObject = 0; currObject < anchor.context.sceneObject.length;++currObject)
{
this.scene.remove(anchor.context.sceneObject[currObject]);
}
});
all_previous_anchors = new Set();
}
Have been able to get a lot of different features of the WebXR API up and running in some form but this one has been bugging me for a while so if anyone knows what could be the issue or knows of any good resources regarding working with WebXR anchors, it would be a great help.