Fbo / useFBO

Summary

Creates a THREE.WebGLRenderTarget.

type FBOSettings = Omit<FboProps, 'width' | 'height' | 'children'>

export function useFBO(
  /** Width in pixels, or settings (will render fullscreen by default) */
  width?: number | FBOSettings,
  /** Height in pixels */
  height?: number,
  /** Settings, see constructor's `options`: https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget */
  settings?: FBOSettings
): THREE.WebGLRenderTarget {

const target = useFBO({ stencilBuffer: false })

The rendertarget is automatically disposed when unmounted.

`<Fbo>` Component

export type FboProps = {
  children?: (renderTarget: Fbo) => React.ReactNode
  width?: UseFBOParams[0]
  height?: UseFBOParams[1]
} & FBOSettings

You can access the renderTarget via children's render prop:

<Fbo width={1024} height={1024} stencilBuffer={false}>
  {(renderTarget) => (
    <mesh>
      <planeGeometry />
      <meshBasicMaterial map={renderTarget.texture} />
    </mesh>
  )}

or exposed via ref:

const renderTargetRef = useRef()
<Fbo ref={renderTargetRef} />

src/core/Fbo.tsx

Edit this page