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>
  )

can you try the solution mentioned in this question: when-do-we-need-to-use-renderer-outputencoding-three-srgbencoding — Bilal
– Bilal, Commented Jan 15, 2023 at 21:05

kris collins · Accepted Answer · 2023-04-12 21:25:03Z

5

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!

answered Apr 12, 2023 at 21:25

kris collins

661 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zaytri Over a year ago

I found out that you can also set flat in the Canvas props to globally apply no tone mapping instead of having to set the toneMapped prop on every meshBasicMaterial

Collectives™ on Stack Overflow

MeshBasicMaterial renders incorrect input color

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related