# Issues with image tracking rotation, position, scaling

**URL:** <https://forum.8thwall.com/t/issues-with-image-tracking-rotation-position-scaling/1876>\
**Category:** Technical Support\
**Tags:** image-targets\
**Created:** [June 28, 2024, 7:53am UTC](https://forum.8thwall.com/t/issues-with-image-tracking-rotation-position-scaling/1876 "2024-06-28T07:53:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quantum\_Universe](https://avatars.discourse-cdn.com/v4/letter/q/d26b3c/32.png) [@Quantum\_Universe](https://forum.8thwall.com/u/Quantum_Universe)\
**Post date:** [June 28, 2024, 7:53am UTC](https://forum.8thwall.com/t/issues-with-image-tracking-rotation-position-scaling/1876/1 "2024-06-28T07:53:11Z")

</div>

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

```auto
<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

```auto
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

```auto
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

> [@Issues with image tracking orientation/ scaling](https://forum.8thwall.com/t/issues-with-image-tracking-orientation-scaling/781):
>
> Hi, We’re developing an image target based app that’s designed to be viewed at an angle, and have experienced frequent tracking loss when aiming the phone at aggressive angles. We’re trying to avoid having a user manually place/ scale the objects in the scene, and want the image target to automatically trigger our experience. To avoid the tracking loss, we switched over to using SLAM tracking once an image target is first detected which has worked fairly well. However, sometimes the initial im…

so I refering to my project but nothing changed