pmndrs/react-postprocessing

这是什么？

核心功能

• 01在 EffectComposer 中以声明式组件使用 Bloom、DepthOfField、Noise、Vignette 等效果
• 02将多个效果合并为一个渲染通道，减少渲染操作
• 03每个效果可独立设置混合函数
• 04默认内置伽马校正与 WebGL2 MSAA 抗锯齿
• 05基于 TypeScript 开发，与 react-three-fiber 配合使用

适用场景

• 为 react-three-fiber 场景添加泛光、暗角或胶片颗粒效果
• 通过景深模糊引导视线，突出 3D 场景的局部
• 无需手写渲染通道，快速搭建简单的线性视觉效果链

快速上手

1. 1

   安装软件包

   npm install @react-three/postprocessing
2. 2

   在 react-three-fiber 的 Canvas 中，用 EffectComposer 包裹场景并添加效果组件

使用前须知

• !不适合复杂的效果编排，更适合简单的效果链。
• !需要配合 @react-three/fiber 使用，仅适用于 react-three-fiber 场景。

标签

常见问题

react-postprocessing 是什么？

为 react-three-fiber 提供后期处理效果的 React 封装，可用 JSX 组件声明式地添加效果。 react-postprocessing 是把 postprocessing 库接入 @react-three/fiber（Three.js 的 React 渲染器）的封装。无需手动搭建渲染通道，只需在 Canvas 中的 EffectComposer 里放入 Bloom、DepthOfField、Noise、Vignette 等效果组件即可。

react-postprocessing 可以免费使用吗？用的什么许可证？

react-postprocessing 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

react-postprocessing 还在维护吗？

活跃维护中。react-postprocessing 最近一次提交是在 2026年10月19日。

react-postprocessing 适合用来做什么？

为 react-three-fiber 场景添加泛光、暗角或胶片颗粒效果 通过景深模糊引导视线，突出 3D 场景的局部 无需手写渲染通道，快速搭建简单的线性视觉效果链

react-postprocessing 怎么安装和运行？

安装软件包: npm install @react-three/postprocessing 在 react-three-fiber 的 Canvas 中，用 EffectComposer 包裹场景并添加效果组件

在哪里获取 react-postprocessing？

源代码和安装说明在 GitHub 上：https://github.com/pmndrs/react-postprocessing