# Issues with rotation, position, scaling when image tracking

**URL:** <https://forum.8thwall.com/t/issues-with-rotation-position-scaling-when-image-tracking/1891>\
**Category:** Technical Support\
**Tags:** image-targets\
**Created:** [July 1, 2024, 1:15am UTC](https://forum.8thwall.com/t/issues-with-rotation-position-scaling-when-image-tracking/1891 "2024-07-01T01:15:06Z")\
**Posts on this page:** 2\
**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:** [July 1, 2024, 1:15am UTC](https://forum.8thwall.com/t/issues-with-rotation-position-scaling-when-image-tracking/1891/1 "2024-07-01T01:15:06Z")

</div>

I am using the image targets technology and printing the target image and placing it on the floor. 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; 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;">
  </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

> [@](#):
>
> 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 this article to my project but nothing changed. Since this is an issue that must be resolved, we eagerly await the developer’s response. thank you

---

<div class="post-metadata">

**Author:** ![Florencia\_Solari](https://avatars.discourse-cdn.com/v4/letter/f/c0e974/32.png) [@Florencia\_Solari](https://forum.8thwall.com/u/Florencia_Solari)\
**Post date:** [July 4, 2024, 3:20pm UTC](https://forum.8thwall.com/t/issues-with-rotation-position-scaling-when-image-tracking/1891/2 "2024-07-04T15:20:15Z")

</div>

Hi!

When you do this: const showImage = ({detail}) =\> {}

You can access position, rotation and scale of the target this way:  
detail.position, detail.rotation and detail.scale.

I normally set my object transforms to match those of the target, like this:  
object3D.position.set(detail.position.x, detail.position.y, detail.position.z)

For rotation you can use object3D.quaternion.copy and only make the object copy the rotation axis that matter to you. This depends on the result you want to achieve.

In some cases you need to fine tune some transforms values and use factors to calibrate to the target, but make sure that the image you’re using follows the [guidelines for a good image target](https://www.8thwall.com/docs/guides/image-targets/) because that can drastically affect how good the tracking works.

I hope it’s clear enough! Let me know if you have any other questions.