后期处理 是一种用于在场景 渲染后应用特效 的技术。这通常用于添加像 模糊、辉光 和 颜色校正等效果。

如果正确使用，后期处理可以 大大增强 场景的视觉质量。

这是我们要处理的场景：

以及我们最终得到的结果：

结果看起来好多了，对吧？

React Postprocessing

React Postprocessing 是一个库，可以轻松为 React Three Fiber 项目 添加 后期处理效果。

尽管有 其他方法 可以为 Three.js 添加后期处理效果，但 React Postprocessing 自动组织 和 合并 任何给定的 效果组合。

它使得在场景中 添加效果 变得 更加简单，并且性能开销 极小。

让我们从 安装这个库 开始：

Copy
yarn add @react-three/postprocessing

要使用它，我们只需将效果 包装 到 EffectComposer 组件中。

为了保持代码的整洁，让我们创建一个新文件 components/Effects.jsx 并添加以下代码：

Copy
import { EffectComposer } from "@react-three/postprocessing";

export const Effects = () => {
  return <EffectComposer></EffectComposer>;
};

我们现在可以在 App.jsx 文件中 导入 并 使用 这个组件：

Copy
import { Effects } from "./components/Effects";

import { Canvas } from "@react-three/fiber";
import { Effects } from "./components/Effects";
import { Experience } from "./components/Experience";
function App() {
  return (
    <>
      <Canvas camera={{ position: [-1, 0.225, 5.91], fov: 42 }}>
        <color attach="background" args={["#333333"]} />
        <Experience />
        <Effects />
      </Canvas>
    </>
  );
}

export default App;

如果我们看一下我们的场景，会看到所有对象似乎都在使用 meshNormalMaterial。

这是因为默认情况下，EffectComposer 组件将使用 NormalPass 效果 渲染场景。由于我们没有添加其他效果，因此这就是我们看到的全部内容。

我们可以通过将 disableNormalPass 属性设置为 true 来禁用它：

Copy
<EffectComposer disableNormalPass></EffectComposer>

现在我们的 EffectComposer 已准备好 接收效果。

可用效果的列表可以在 React Postprocessing 文档 中找到。

对于 每种效果，它都包含一个 代码示例，并提供了可供 定制 的 不同属性。一些效果还附带了 CodeSandbox 示例，供 可视化 和 实验。

让我们一起来探索其中的一些效果！

Vignette

如果你从事摄影，你可能对术语 vignette（渐晕效果）很熟悉。它是一种图像角落的渐暗效果。

Vignette 有助于将观众的注意力吸引到场景的中心。

让我们将其添加到我们的 Effects.jsx 文件中：