change Fog color at runtime

[carmandale]

Does anyone know if it is possible to change the fog color dynamically? with a click? it isn't working for me, but I wanted to check. I have the color in a state, and would like it to change on mouse clicks. It is working for the ground and light colors. But not the fog.

thanks,
Dale

[drcmda]

havent tried but this should work

<Canvas>
  <fog attach="fog" color="hotpink" near={1} far={10} />

...

const scene = useThree(state => state.scene)
// ..
scene.fog.color.set('peachpuff')

[drcmda]

useThree is only valid inside the canvas component, its context based. https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#hooks

[carmandale]

thank you so much....slowly but surely getting the hang of things.

[carmandale]

moving const { scene } = useThree((state) => state.scene); into a component solves the error. thanks.

But now, the "scene" is not part of the canvas, so fog doesn't work. And if I move fog back up to the Canvas, then the function doesn't know about the fog. I have to create the "scene" in the child, and the function needs to know about the scene and the fog.

I am sure I am just making basic react errors, but I am not sure how to get it all together.

App - is where my canvas is living and where fog is living
Scene - is where the models, lights, animation, and THREE scene const and function live.

Is this a case where I should use Zustand? (haven't dived into that yet)

thanks again for any assistance.

Dale

[carmandale]

also related to this, I believe. I want to set the clear color too.
which is on the canvas as onCreated={({ gl }) => gl.setClearColor("pink")}

would this same solution let me change the clear color?

[carmandale]

@drcmda - ALL SOLVED!

just had to wrestle a little bit.
I created a state in App for the colors I wanted and passed those down.

used const scene = useThree((state) => state.scene); const bg = useThree((state) => state.gl);

and all is working.

thanks, again,
Dale