MeshBasicMaterial renders incorrect input color

Question

My issue is that I have no other lights or anything affecting the scene and yet the shade of the material is completely different from the one I intended for.

I'm using meshBasicMaterial because I initially thought the issue was related to lights and this material type isn't affected by lights.

import React, { Suspense } from 'react'
import { Canvas } from 'react-three-fiber'
import { Box, OrbitControls } from 'drei'

function Scene() {
  return (
    <>
      <Box args={[1, 1, 1]}>
        {/* Incorrect shade of blue */}
        <meshBasicMaterial color="#013566" />
      </Box>
    </>
  )
}

export function App() {
  return (
    // Desired shade of blue
    <Canvas style={{ background: '#013566' }}>
      <OrbitControls />
      <Suspense fallback={null}>
        <Scene />
      </Suspense>
    </Canvas>
  )

Answer 1

Hey I basically faced the same issue you did.

Looks like it's related to tone mapping

It seems the default in three js is NoToneMapping: https://threejs.org/docs/?q=renderer#api/en/renderers/WebGLRenderer

Meanwhile the default in react-three-fiber is ACESFilmicToneMapping as shown here https://react-three-fiber/packages/fiber/src/core/store.ts in line 164 if (!flat) gl.toneMapping = THREE.ACESFilmicToneMapping

I solved this issue by setting toneMapped property in meshBasicMaterial to false. Hope this helps!