MeshBasicMaterial渲染颜色与输入值不符问题求助

问题描述 #

场景无额外灯光或干扰因素，使用meshBasicMaterial（该材质本应不受灯光影响），但材质呈现的色调与预期（Canvas背景色#013566）完全不符。

原因分析 #

meshBasicMaterial的颜色默认采用线性颜色空间解析，而Canvas的background样式是在sRGB颜色空间下渲染的。直接传入十六进制颜色字符串时，Three.js会将其当作线性颜色处理，导致最终显示的色调和DOM元素的sRGB颜色产生偏差。

解决方案 #

有两种简单的修复方式：

方式1：指定材质的颜色空间为sRGB（Three.js r152及以上版本支持） #

直接给meshBasicMaterial添加colorSpace属性，设置为sRGB：

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

function Scene() {
  return (
    <>
      <Box args={[1, 1, 1]}>
        {/* 显式指定颜色空间为sRGB，匹配Canvas背景色 */}
        <meshBasicMaterial color="#013566" colorSpace="srgb" />
      </Box>
    </>
  )
}

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

方式2：手动转换颜色空间（兼容旧版本Three.js） #

通过THREE.Color的convertSRGBToLinear方法，将sRGB颜色转换为Three.js需要的线性颜色：

import React, { Suspense, useRef, useEffect } from 'react'
import { Canvas } from 'react-three-fiber'
import { Box, OrbitControls } from 'drei'
import * as THREE from 'three'

function Scene() {
  const materialRef = useRef(null)

  useEffect(() => {
    if (materialRef.current) {
      // 将sRGB颜色转换为线性颜色后赋值
      materialRef.current.color.set('#013566').convertSRGBToLinear()
    }
  }, [])

  return (
    <>
      <Box args={[1, 1, 1]}>
        <meshBasicMaterial ref={materialRef} />
      </Box>
    </>
  )
}

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

内容的提问来源于stack exchange，提问作者Aite Boye