In React three fiber when using both meshBasicMaterial and when using meshStanderard material in the component used to render a box with an image texture, the texture looks different than the original image. I have tried putting colorManagement={false}> in the canvas component,but nothing changed. Thanks in advance.

In React Three Fiber

Original Images Used

Code Used

function Element( props ) {
const ref = useRef()
props = props.props
useFrame((state, delta) => (ref.current.rotation.y  = 0.01))
const texture = useLoader(TextureLoader, props.texture)
return (
    <mesh
    ref={ref}
    position={props.position}
    rotation={[0,0,-10]}
    >
        <boxGeometry args={[1,0,1]}/>
        <meshBasicMaterial map={texture} texture={'sRGB'} transparent={true} />
    </mesh >
)

}


const CameraControls = () => {
const {
    camera,
    gl: { domElement },
} = useThree();
// Ref to the controls, so that we can update them on every frame using useFrame
const controls = useRef();
useFrame((state) => controls.current.update());
return <orbitControls ref={controls} args={[camera, domElement]} />;
};

export default function App() {
return (
    <>
        <div style={{
            height: '100vh',
            width: '100vw',
        }}>
            <Canvas>
                <CameraControls />
                <ambientLight color={ '#ffffff' } intensity={.5}/>
                <group>
                    <Element props={{texture: 'react.png', position: [1,1,0]}}/>
                    <Element props={{texture: 'js.png', position: [3,3,-2]}}/>
                </group>


            </Canvas>
        </div>
    </>
);
}

CodePudding user response：

as seen in Color differences between threejs vanilla js and react-three-fiber create-react-app This worked although not the answer on that thread it worked better than what was chosen as the answer. <Canvas gl={{ antialias: true, toneMapping: NoToneMapping }} linear>