# Rotate image target to change object

**URL:** <https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504>\
**Category:** Technical Support\
**Tags:** image-targets\
**Created:** [May 14, 2025, 12:39pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504 "2025-05-14T12:39:11Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pete\_Collins](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/pete_collins/32/2198_2.png) [@Pete\_Collins](https://forum.8thwall.com/u/Pete_Collins)\
**Post date:** [May 14, 2025, 12:39pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/1 "2025-05-14T12:39:11Z")

</div>

Anyone have an idea of the technique used on this image tracker where it’s rotating to change the tracked object?

> **[Interactive AR Cocktail Coaster | TEDx | Post Pop Studios | 8th Wall](https://www.8thwall.com/nefariouslabs/tedcoaster)**
>
> Users point their device at custom drink coasters and then rotate them to see 3D renders of the cocktails & beverages available behind the bar!

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [May 14, 2025, 4:19pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/2 "2025-05-14T16:19:42Z")

</div>

Hi, welcome to the forums!

I would do this by getting the rotation angle of the object parented to the Image Target. Then calculated on between two different angles you can display a certain item.

---

<div class="post-metadata">

**Author:** ![Pete\_Collins](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/pete_collins/32/2198_2.png) [@Pete\_Collins](https://forum.8thwall.com/u/Pete_Collins)\
**Post date:** [May 14, 2025, 5:08pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/3 "2025-05-14T17:08:58Z")

</div>

Hmm ok. The object is anchored to the image tracker and is rotating when the image tracker is rotated. I’m not sure how the difference is calculated between the two values?

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [May 14, 2025, 8:08pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/4 "2025-05-14T20:08:52Z")

</div>

Try using a component like this on your Image Target child object:

```ts
// This is a component file. You can use this file to define a custom component for your project.
// This component will appear as a custom component in the editor.

import * as ecs from '@8thwall/ecs' // This is how you access the ecs library.

ecs.registerComponent({
  name: 'rotation-check',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    const mat4 = ecs.math.mat4.i()
    const quat = ecs.math.quat.zero()
    const degrees = ecs.math.vec3.zero()

    ecs.defineState('default')
      .initial()
      .onTick(() => {
        world.transform.getWorldTransform(eid, mat4)
        mat4.decomposeR(quat)
        const difference = ecs.math.quat.zero().times(quat.inv())
        difference.pitchYawRollDegrees(degrees)
        console.log(degrees.y)
      })
  },
})

```

---

<div class="post-metadata">

**Author:** ![Pete\_Collins](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/pete_collins/32/2198_2.png) [@Pete\_Collins](https://forum.8thwall.com/u/Pete_Collins)\
**Post date:** [May 14, 2025, 9:04pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/5 "2025-05-14T21:04:13Z")

</div>

Appreciate the reply @GeorgeButler - I’ll give that a try tomorrow

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [May 14, 2025, 9:59pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/6 "2025-05-14T21:59:54Z")

</div>

Sounds good, make sure to have your camera set to World and don’t disable SLAM tracking, as this requires it.

---

<div class="post-metadata">

**Author:** ![Pete\_Collins](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/pete_collins/32/2198_2.png) [@Pete\_Collins](https://forum.8thwall.com/u/Pete_Collins)\
**Post date:** [May 15, 2025, 10:21am UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/7 "2025-05-15T10:21:22Z")

</div>

Thanks @GeorgeButler This works perfectly!! I’ve managed to figure out the rest - switching on/off objects depending on the rotation value.

---

<div class="post-metadata">

**Author:** ![Pete\_Collins](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/pete_collins/32/2198_2.png) [@Pete\_Collins](https://forum.8thwall.com/u/Pete_Collins)\
**Post date:** [May 15, 2025, 2:17pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/8 "2025-05-15T14:17:30Z")

</div>

Have another question if that’s OK. I would also like to have other objects tracked to the image tracker but if it’s rotated they stay in the original position and lookAt the camera.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [May 15, 2025, 3:42pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/9 "2025-05-15T15:42:39Z")

</div>

I would add a `lookAtAnimation` component to the Image Target child object. It’s a built-in component.

---

<div class="post-metadata">

**Author:** ![Pete\_Collins](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/pete_collins/32/2198_2.png) [@Pete\_Collins](https://forum.8thwall.com/u/Pete_Collins)\
**Post date:** [May 16, 2025, 8:27am UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/10 "2025-05-16T08:27:25Z")

</div>

Perfect - thank you!

---

<div class="post-metadata">

**Author:** ![Pete\_Collins](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/pete_collins/32/2198_2.png) [@Pete\_Collins](https://forum.8thwall.com/u/Pete_Collins)\
**Post date:** [May 16, 2025, 11:09am UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/11 "2025-05-16T11:09:06Z")

</div>

So I’ve been playing around with the component and I can’t quite get it to do what I need. Ultimately I want an object to maintain its position but only rotate on the Y axis to face the camera. Is there’s a way to apply that to the object? looking at the docs the function seems to only have position values.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [May 16, 2025, 8:47pm UTC](https://forum.8thwall.com/t/rotate-image-target-to-change-object/6504/13 "2025-05-16T20:47:51Z")

</div>

You’ll have to make a custom version of the `lookAtAnimation` component that only applies to the Y Axis.