Look at function in useFrame works only once (frame congestion?)

Questions
1

On this sandbox, you can see turning planets:

The position of each one is updated from the parent component with :

useFrame(() => {
...
sphereApi.position.set(
      radius * Math.cos((sphereX * 2 * Math.PI) / image.periode),
      0,
      radius * Math.sin((sphereX * 2 * Math.PI) / image.periode)
    );
...
}

When a planet is hovered, I would like a other useFrame inside the final component to update a mesh. The mesh is a three drei component containing the name of the planet to look at the camera. This mesh follows the planet itself.
This seems to work but only once:

useFrame(({ gl, scene, camera }) => {
    if (hoveredd && myMesh2.current && myMesh.current ) {
      myMesh.current.parent.lookAt(0, camera.position[1], 0);
    }
  }, 1);

Can you look at what is going on ? I think there is competition betwenn useFrame even if the properties impacted are not the same. (or is there a problem with the lookAt function ?)

The two useFrame concerned are in the component Planet and TextPlanet where you can find the two codes shown above.

Thanks for your help.

2

the sandbox seems broken, doesn’t run.

i would keep hover at the local level, the planet component itself can manage hover state. everything the planet can do by itself should be done here: hover, spinning around its axis, etc.

the parental component will apply stuff to the whole group of children, for instance rotating all planets, it should not try to move children individually because that messes with separation of concerns.

btw useFrame(() => ..., 1) goes into full manual mode, it will stop rendering, that’s now your concern. if you don’t need to render i don’t understand why you have that index there. see: React Three Fiber Documentation