Updating Godrays values

[Ahlecss]

Hi !
I hope you're all doing well,

I'm working with @react-three/postprocessing right now, and I wish to update some props, especially the exposure of the Godrays Effect ( you can find doc here https://docs.pmnd.rs/react-postprocessing/effects/god-rays )

But here is the thing : I don't find how to do it properly.

I see that here with Leva, useControl can be pretty useful for updating smoothly and without to much rerenders

I've tried putting a useState to the value of exposure, and setting the new value (from 0 to 1 smoothly in 0.5 seconds) in useFrame, but it's quite not performance wise at all.

Can you give me an explanation of how useControls works, or how you'd do it ?

Thanks, have a nice day !

[Jonathan71111]

Hi there!

It sounds like you're looking for a way to smoothly update the exposure prop of the Godrays Effect in @react-three/postprocessing without causing performance issues. You mentioned that you've tried using useState and updating the value in useFrame, but it's not performance-wise.

One approach you can try is using the useControl hook from Leva to manage the exposure value. Leva is a library that provides UI controls for tweaking values in your application, and useControl is a hook that allows you to create controls for your state variables.

Here's a basic example of how you can use use Control with Leva to manage the exposure value:
import { useControl } from 'leva';

const MyComponent = () => {
// Define a state variable for the exposure value
const [exposure, setExposure] = useState(0.5);

// Use useControl to create a slider control for the exposure value
useControl('Exposure', { value: exposure, min: 0, max: 1 }, (value) => {
setExposure(value);
});

// Render your scene with the Godrays Effect using the exposure value
return (




);
};
We use useState to define a state variable for the exposure value.
We use useControl to create a slider control for the exposure value, with a minimum value of 0 and a maximum value of 1. The callback function is called whenever the value changes, updating the state variable accordingly.
We render our scene with the Godrays Effect, passing the exposure value as a prop to control the intensity of the effect.
With this approach, you can smoothly update the exposure value using the Leva UI controls without causing performance issues. I hope this helps! Let me know if you have any questions.