Issues with rotation, position, scaling when image tracking

🧑‍💻 Technical Support
1

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

<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

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

2

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 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.