Camera shifts when AR is started, moves to on top of elements

Questions
,
1

During the first render of a scene, outside of AR mode, I can position the camera how I want it. However, no matter where I place the camera, when I click the button to start AR, the camera automatically becomes on top of the elements. How can I keep the camera where I initially placed it, once I enter AR mode? This is the code:

const container = document.createElement( 'div' );
document.body.appendChild( container );

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 400 );
camera.position.z = 2

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.xr.enabled = true
container.appendChild( renderer.domElement );

document.body.appendChild( ARButton.createButton( renderer ) );

const circleGeometry = new THREE.CircleGeometry( 0.1, 32 );
const circleMaterial = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
const circle = new THREE.Mesh( circleGeometry, circleMaterial );
scene.add( circle );

const clock = new THREE.Clock()

function render() {
    const elapsedTime = clock.getElapsedTime()

    circle.rotation.y = elapsedTime * 0.5

    renderer.render( scene, camera );
}
  
function animate() {
    renderer.setAnimationLoop( render );
}
animate()
2

I have no experience with AR, but similar effect happens in VR mode. In VR the camera position is controlled by the headset and depends on its assumption/setting where the floor is:

image
image1112×433 19.3 KB

Thus, your attempt to directly control the camera with position and rotation is being overridden. To have the camera where you want, its position must be readjusted after entering VR mode.

Maybe this also happens in AR mode?!?