AR object keep teleporting randomly

Questions
, ,
1

I’m working on an AR project (with hit-test feature) and I’m encountering a problem where when loading the model it randomly rotate 90 degree, if you imagine I’m standing and I placed the reticle in front of me and spawned the model, once in a random event it teleported to the right of me, as follow:

AR
AR1024×1024 35.6 KB

it happens once and in a random time (1 sec after spawn, 5 sec, etc.) then it stays there normally, note: I think the tracking accuracy drops noticeably!

here is my code: (I re-wrote my project again without any of my modification to test the problem, and I replaced the model with a cube )

import './style.css'
import * as THREE from 'three';
import { ARButton } from 'three/addons/webxr/ARButton.js';

const scene = new THREE.Scene();
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

let hitTestSource = null;
let hitTestSourceRequested = false;

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 20);
const container = document.createElement('div');
document.body.appendChild(container);

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(sizes.width, sizes.height);
renderer.xr.enabled = true;
container.appendChild(renderer.domElement);

document.body.appendChild(ARButton.createButton(renderer, { requiredFeatures: ['hit-test'] }));

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(0.5, 0.5, 0.5),
  new THREE.MeshBasicMaterial({ color: 0xff00ff })
);

let spawnOnce = true;
function onSelect() {
  if (spawnOnce ) {
    once = false;
    if (reticle.visible) {
      reticle.matrix.decompose(cube.position, cube.quaternion, cube.scale);
      scene.add(cube);
    }
  }
}

const controller = renderer.xr.getController(0);
controller.addEventListener('select', onSelect);
scene.add(controller);

const reticle = new THREE.Mesh(
  new THREE.RingGeometry(0.15, 0.2, 32).rotateX(- Math.PI / 2),
  new THREE.MeshBasicMaterial()
);
reticle.matrixAutoUpdate = false;
reticle.visible = false;
scene.add(reticle);

animate();
function animate() {
  renderer.setAnimationLoop(render);
}

function render(timestamp, frame) {
  if (frame) {
    const referenceSpace = renderer.xr.getReferenceSpace();
    const session = renderer.xr.getSession();
    if (hitTestSourceRequested === false) {
      session.requestReferenceSpace('viewer').then(function (referenceSpace) {
        session.requestHitTestSource({ space: referenceSpace }).then(function (source) {
          hitTestSource = source;
        });
      });
      session.addEventListener('end', function () {
        hitTestSourceRequested = false;
        hitTestSource = null;
      });
      hitTestSourceRequested = true;
    }
    if (hitTestSource) {
      const hitTestResults = frame.getHitTestResults(hitTestSource);
      if (hitTestResults.length) {
        const hit = hitTestResults[0];
        reticle.visible = true;
        reticle.matrix.fromArray(hit.getPose(referenceSpace).transform.matrix);
      } else {
        reticle.visible = false;
      }
    }
  }
  renderer.render(scene, camera);
}

I’m using vsCode, vite. my phone is Samsung S21 ultra, all up to date, testing the build using npm i @vitejs/plugin-basic-ssl and then npm run dev -- --host --https I’ve also uploaded it to my server and the problem stays. Here is a link to the build in my server testAR

Thanks for the help.

2

I’ve tested this example on my phone and 3 other phones, and the issue exist!

3

it seems the same issue than New Webxr AR bug camera rotate 90 deg after few seconds of augmented reality - #7 by MauroM

4

Yea I’ve been looking into this for two days, I think it’s a google ARCore bug!

5

Yep, maybe for now I just wait and work around this, hope they fix this my level didn’t allow me for contributing to this

6

There is a work around, using anchors:
quote from this page

Blockquote
I’ve noticed this also happens when running the official hit-test sample (Hit Test). The model places well on detected surface but after a couple of seconds it jumps to another location. It works well when combining hit-test with anchors (Hit Test with Anchors).