反应三纤维色差答案

【问题标题】：Color Diffferance in React-three-fiber反应三纤维色差
【发布时间】：2022-12-23 20:39:56
【问题描述】：

在 React three fiber 中，当在组件中同时使用 meshBasicMaterial 和使用 meshStandardMaterial 来渲染带有图像纹理的框时，纹理看起来与原始图像不同。我试过将 colorManagement={false} 放在画布组件中，但没有任何改变。提前致谢。

在反应三纤维

使用的原始图像

使用的代码

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>
    </>
);
}

【问题讨论】：

标签： javascript reactjs three.js react-three-fiber

【解决方案1】：

正如Color differences between threejs + vanilla js and react-three-fiber + create-react-app 中所见，这虽然不是该线程上的答案，但比选择的答案效果更好。 <Canvas gl={{ antialias: true, toneMapping: NoToneMapping }} linear>

【讨论】：