React Three Drei 环境似乎不允许调整强度

Question

我一直在玩环境组件，我决定不使用图像，而是使用颜色来设置我需要的情绪和主题。我最初尝试使用环境光，效果很好，但我从 Blender 导入具有金属材质的模型，环境光似乎对它们不起作用，而使用设置为颜色的环境却可以。但是，我找不到调整环境颜色强度的选项。有选择吗？

<Environment>
        <color args={[sun_color]} attach="background" />
      </Environment>

我尝试在很多地方添加“强度”，但似乎在任何地方都找不到选项。

Answer 1

const texture = useLoader(RGBELoader, 'xxx.hdr')

然后试试这个：

<Environment background={false} blur={0}>
   <color attach="background" args={['black']} />
   <mesh rotation={[0, 0, 0]} scale={5}>
   <sphereGeometry />
   <meshBasicMaterial transparent opacity={0.4} map={texture} side={THREE.BackSide} toneMapped={false} />
   </mesh>
</Environment>

Answer 2

澄清该线程之前的答案，您将需要添加网格和材质组件并为其赋予纹理，以便您添加的金属材质可以反射灯光。 YouTube 上有很棒的示例 - 只需输入 React Three Fiber & Three.js - Materials Expanded

Answer 3

如果您使用的是 Three.js 并且想要调整环境组件中颜色集的强度，则可以通过操作颜色的 RGB 值来实现。

以下是调整颜色强度的方法：

import { Environment } from '@react-three/drei';
import { Color } from 'three';

// 用 RGB 值定义颜色

const sunColor = new Color(1, 0.5, 0); // Example color: orange

// 通过将 RGB 值乘以一个系数来调整强度

const intensity = 0.5; // Example intensity factor

// 将 RGB 值乘以强度因子

sunColor.multiplyScalar(intensity);

// 现在您可以将调整后的颜色与环境组件一起使用

<Environment>
  <color attach="background" args={[sunColor]} />
</Environment>

在此示例中，我将颜色设置为橙色（您可以根据需要调整 RGB 值），然后通过将 RGB 值乘以一个因子（强度变量）来调整其强度。这样，您可以有效地控制颜色的强度。根据您的需要调整强度值，以控制场景中颜色的强度。