Three version update and not working react three fiber canvas linear

Questions
, , ,
1

When I was using the “three”: “^0.160.0” version, I could change the linear property of the Canvas component in React Three Fiber by toggling a button, which allowed me to enable or disable gamma correction on the canvas.
However, after updating to the “three”: “^0.163.0” version, the linear value is now fixed to the initial value, and changing it programmatically no longer affects the canvas.
Do you know the reason for this behavior? Could it be a conflict between the updated React Three Fiber functionality and the new Three.js version?

const CanvasComponent = ({ children }) => {
  const [rgbEnables, setRgbEnables] = useState(false);
  return (
    <>
      <div>
        <button
          onClick={() => {
            setRgbEnables((pre) => !pre);
          }}
        >
          change
        </button>
      </div>

      <Canvas
        // flat
        linear={rgbEnables}
      >
        {children}
      </Canvas>
    </>
  );
};
export default CanvasComponent;

image
image579×510 41.7 KB

image
image737×529 43.1 KB

i upgrade version drei , fiber please let me know reason why not working

2

I’m not aware of any reason ‘linear’ should be immutable. Are you using post-processing, and if so, does the issue occur without that? A live demo would help to debug this, or you may want to try asking on the Poimandres Discord server.

1 Like
3

i just wanted change linear use button because for check model quality with linear or not
but i couldn’t change use button after version upgrade and i don’t use post-processing now.
i solved this problem three.js docs use this, but not control in react three fiber
thank you for help me