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

【问题标题】：Color differences between threejs + vanilla js and react-three-fiber + create-react-appthreejs + vanilla js 和 react-three-fiber + create-react-app 的颜色差异
【发布时间】：2021-03-02 02:42:39
【问题描述】：

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

两个实现中的对象及其属性相同。
threejs 版本相同。
在新引导中实现没有其他依赖项的 create-react-app。

三杰

反应三纤维

【问题讨论】：

看起来 react-three-fiber 可能默认启用了色调映射，这会稍微改变颜色。您可以使用 renderer.toneMapping 设置在 three.js 中启用它，但我不知道在 react-three-fiber 中使用什么设置来禁用它...

标签： reactjs three.js react-three-fiber

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：