Look At animation and custom component only working in simulator - not on device

🧑‍💻 Technical Support
1

My project is similar to World Effects, but the object I spawn has one child and two grandchildren (for now). The child acts as a gimble for the grandchildren as it uses a Look At Animation component with the Camera as its target.

The problem I’m having is the animation doesn’t start-and, in fact, the gimble entity is not shown-unless I “bonk it on the head.” By that I mean I select the entity in the editor and choose a target manually. It automatically refreshes the entity and it realizes it’s supposed to be shown and looking at the camera.

Below is my custom component which changes the scale of the gimble based on the camera’s distance to it (smaller if closer). You may notice that it adds the Look At Animation in the .onEnter(). This was an attempt at trying to get it to load automatically, but it hasn’t worked.

The component:

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

const distanceSizeAnimation = ecs.registerComponent({
  name: 'DistanceSizeAnimation',
  schema: {
    // Add data that can be configured on the component.
  },
  schemaDefaults: {
    // Add defaults for the schema fields.
  },
  data: {
    // Add data that cannot be configured outside of the component.
  },
  stateMachine: ({world, eid, schemaAttribute}) => {
    ecs.defineState('default')
      .initial()
      .onEnter(() => {
        ecs.LookAtAnimation.set(world, eid, {target: world.camera.getActiveEid()})
      })
      .onTick(() => {
        const curScale = ecs.Scale.get(world, eid)
        const setToScale = ecs.math.vec3.from(curScale)
        const camPosition = ecs.math.vec3.from(ecs.Position.get(world, world.camera.getActiveEid()))
        const myPosition = ecs.math.vec3.from(ecs.Position.get(world, world.getParent(eid)))
        const distToCam = camPosition.distanceTo(myPosition)
        setToScale.setX(Math.min(Math.max((distToCam / 8) ** 2, 0.25), 1))
        setToScale.setY(Math.min(Math.max((distToCam / 8) ** 2, 0.25), 1))
        setToScale.setZ(Math.min(Math.max((distToCam / 8) ** 2, 0.25), 1))
        world.setScale(eid, setToScale.x, setToScale.y, setToScale.z)
      })
  },
})
export {distanceSizeAnimation}

I have tried connecting my device through incognito mode to avoid caching.
My device is an iPhone XR. I have also tried on an iPhone 16 Pro, and one of my team members tried on his Android (I do not know the model). My code doesn’t work on any of these devices, so it leads me to believe it is not a hardware issue.

Simulator (Working):

Device (iPhone XR, Not working)

2

UPDATE:
My team member tried again and it works fine; the UI/Gimble faces the camera. He has a Samsung A70.

Now I’m inclined to think it is a hardware issue… Because it doesn’t seem to work on iPhones.