Threejs + Vanilla JS 和 React-Three-Fiber + Create-React-App 之间的颜色差异

Question

这已经困扰我一段时间了。为什么 React-Three Fiber 中的材质颜色看起来比 Threejs 中暗淡

• 两种实现中的对象及其属性是相同的。
• Threejs 版本相同。
• 在新引导的 create-react-app 中实现，没有额外的依赖项。

三人组

反应三纤维

Answer 1

正如Don McCurdy所回答的，将渲染器toneMapping 设置为默认值确实有帮助。

<Canvas onCreated={({ gl }) => { gl.toneMapping = THREE.NoToneMapping }}>

Answer 2

r3f 在 srgb 色彩空间中使用正确的伽玛，并自动将颜色和纹理转换为 srgb。这与 aframe 的做法类似。Threejs 在线性色彩空间中的伽玛设置不正确，这不是很有用。错误的伽马值是导致 3D 场景廉价且具有可塑性的第一大原因。请参阅：https ://www.donmccurdy.com/2020/06/17/color-management-in- Threejs

如果您想要线性色彩空间，只需执行以下操作：<Canvas colorManagement={false}>现在您的颜色就会匹配。

Answer 3

以下组合为我提供了与 Threejs 中的颜色最匹配的组合。

  <Canvas
    gl={{ antialias: true, toneMapping: THREE.NoToneMapping }}
    linear
  >

谢谢唐和德夫阿桑。