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

Posted 2023-02-27

【中文标题】threejs + vanilla js 和 react-three-fiber + create-react-app 的颜色差异

【英文标题】：Color differences between threejs + vanilla js and 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 中使用什么设置来禁用它...

【参考方案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>，现在您的颜色将匹配。