Rotate image target to change object

🧑‍💻 Technical Support
1

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

2

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.

3

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?

4

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

// 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)
      })
  },
})
5

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

6

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

7

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

8

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.

9

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

10

Perfect - thank you!

11

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.

13

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

1 Like