MeshBasicMaterial渲染不正确的输入颜色

Question

我的问题是我没有其他灯光或任何影响场景的东西，但材料的阴影与我想要的完全不同。

我使用的是meshBasicMaterial，因为我最初认为这个问题与灯光有关，这种材质类型不受灯光的影响。

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

嘿，我基本上遇到了和你一样的问题。

看起来和音调映射有关

似乎在三个js默认是NoToneMapping: https://threejs.org/docs/?q=renderer#api/en/renderers/WebGLRenderer

同时，react-three-fiber的默认值是ACESFilmicToneMapping，如图所示https://react-three-fiber/packages/fiber/src/core/store.ts在第164行if (!flat) gl.toneMapping = THREE.ACESFilmicToneMapping

我通过在meshBasicMaterial中设置tonemap属性为false来解决这个问题。希望这对你有帮助!