get ref externally, or object position from another component.

[EightArmsWebmaster]

I have an Character who runs forwards past Walls with a Camera rig following them:

// App.jsx
<Canvas shadows dpr={[1, 2]} tabIndex="-1" onKeyDown={handleKeyDown}>
  <Dolly />
  <Walls />
</Canvas>

The Character component is inside the dolly component, and the camera position moves forwards:

// Dolly.jsx render function

// Zustand state:
const dollySpeed = useStore((state) => state.dollySpeed);

useFrame(() => {
  dolly.current.position.z =
    (dolly.current.position.z + dollySpeed);
  cam.current.lookAt(0, 0.5, dolly.current.position.z - 6);
});

return (
  <Suspense>
    <group ref={dolly}>
      <PerspectiveCamera
        makeDefault
        position={[0, 0.1, 0]}
        zoom={2}
        args={[120, 1.777777777777777, 0.1, 1000]}
        ref={cam}
      />
      <Character />
    </group>
  </Suspense>
);

The issue I have is that sometimes the camera passes through walls, or the walls end up between the camera and character. I'd like to fade out each wall as the camera gets too close to them.

So I'd like to change this function:

// Walls.jsx render function
return (
  <group>
    {segment.walls.map((position) => {
      return (
        <Wall
          key={`wall-${position.z}`}
          z={position.z}
        />
      );
    })}
  </group>
);

To include something like:

useFrame(() => {
  wall.current.opacity = lerp(wall.current.opacity, dolly.current.position.z - wall.current.position.z < 1 ? 0 : 1, 0.1));
});

But as far as I can tell there is no way to access the camera from the wall component.

I have purposely used the Zustand state to control the camera speed, not the position, as I don't want to update it every frame.

Am I missing a trick for how to let these components communicate between each other?

[IvanChernoborodov]

Did you deal with it?