Package Exports

react-postprocessing

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-postprocessing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-postprocessing

npm npm

This is a postprocessing wrapper for react-three-fiber.

# using npm
npm install postprocessing react-postprocessing

# using yarn
yarn add postprocessing react-postprocessing

What does it look like?

Well, you can do pretty much anything, but here's an example combining a couple of effects (live demo).

import React from 'react'
import { EffectComposer, DepthOfField, Bloom, Noise, Vignette } from 'react-postprocessing'
import { Canvas } from 'react-three-fiber'

function App() {
  return (
    <Canvas>
      {/* Your regular scene contents go here, like always ... */}
      <Suspense fallback={null}>
        <EffectComposer>
          <DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />
          <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
          <Noise opacity={0.02} />
          <Vignette eskil={false} offset={0.1} darkness={1.1} />
        </EffectComposer>
      </Suspense>
    </Canvas>
  )
}

Documentation

api.md