threejs + vanilla js 和 react-three-fiber + create-react-app 之间的颜色差异

Question

这已经困扰我一段时间了。为什么 react-three-fiber 中的 material 颜色比 threejs

中的颜色暗淡

两种实现中的对象及其属性相同。
threejs版本相同
在刚启动的情况下实施 create-react-app 没有额外的依赖。

三个js

反应三纤

Answer 1

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

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

Answer 2

r3f 在 srgb 色彩空间中使用正确的伽玛，并自动将颜色和纹理转换为 srgb。这类似于 aframe 所做的。 threejs 在线性色彩空间中的 gamma 设置不正确，这不是很有用。错误的 gamma 是廉价、塑料外观 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
  >

谢谢 Don 和 devAhsan。

threejs + vanilla js 和 react-three-fiber + create-react-app 之间的颜色差异

Color differences between threejs + vanilla js and react-three-fiber + create-react-app

three.js

reactjs

react-three-fiber