反应色差-三纤维

Question

当同时使用meshBasicMaterial时和在组件中使用meshStanderard材料用图像纹理渲染一个盒子时，纹理看起来与原始图像不同。我尝试过将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>
    </>
);
}

​

Answer 1

正如在Color differences between threejs + vanilla js and react-three-fiber + create-react-app中所看到的，这是有效的，尽管这个线程上的答案不起作用，但它比所选择的答案更有效。<Canvas gl={{ antialias: true, toneMapping: NoToneMapping }} linear>