Issues with image tracking rotation, position, scaling

🧑‍💻 Technical Support
1

I am using image targets and printing the target image and placing it on the floor. When, the width of the car should fit exactly in the direction of the QR code, but the rotation, postiton, and scale of the model that appears on the image are sometimes distorted.

How should I solve this problem? I will also show you the source code I used.

body.html

<a-scene
  xrextras-loading
  xrextras-gesture-detector
  xrextras-runtime-error
  gltf-model="dracoDecoderPath: https://cdn.8thwall.com/web/aframe/draco-decoder/"
  renderer="colorManagement: true"
  xrweb="allowedDevices: any;
    defaultEnvironmentFogIntensity: 0.5; 
    defaultEnvironmentFloorTexture: #groundTex; 
    defaultEnvironmentFloorColor: #FFF;
    defaultEnvironmentSkyBottomColor: #B4C4CC; 
    defaultEnvironmentSkyTopColor: #5ac8fa;
    defaultEnvironmentSkyGradientStrength: 0.5;
    scale: absolute">

  <a-assets id="assetsContainer">
    <a-asset-item id="carModel" src="car"></a-asset-item>
  </a-assets>

  <a-camera
    id="camera"
    position="0 4 4"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;"
    orbit-controls="enabled: false; target: #car">
  </a-camera>

  <xrextras-named-image-target name="code" keep-visible>
    <!-- Add a child entity of the image target. -->
    <a-entity
      id="car"
      proximity
      gltf-model="#carModel"
      position="0 0.5 0"
      rotation="90 0 0"
      reflections="type: static;"
      shadow="receive: false">
    </a-entity>
  </xrextras-named-image-target>
</a-scene>

belowing components is showing model

const initialIntroduceComponent = {
  init() {
    const car = document.getElementById('car')

    const showImage = ({detail}) => {

      car.object3D.visible = true
    }

    this.el.sceneEl.addEventListener('xrimagefound', showImage)
    this.el.sceneEl.addEventListener('xrimageupdated', showImage)
  },
}
export {initialIntroduceComponent}

and last code is related about prevent image lost

const keepVisibleComponent = {
  init() {
    this.el.sceneEl.addEventListener('xrimagelost', () => {
      this.el.object3D.visible = true
    })
  },
}
export {keepVisibleComponent}

As I saw, I have a similar issue with this article

so I refering to my project but nothing changed