0
154
ViewsColor Diffferance in React-three-fiber
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>
</>
);
}
·
Santiago Gelvez
1 answers
Answer question0
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>
·
Santiago Gelvez
Report
Answer question