reactjs - 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 颜色空间中使用正确的 gamma，并自动将颜色和纹理转换为 srgb。这类似于 aframe 所做的。threejs 在线性色彩空间中的伽马设置不正确，这不是很实用。错误的 gamma 是廉价、可塑的 3D 场景的第一大原因。见：https ://www.donmccurdy.com/2020/06/17/color-management-in-threejs

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