Skip to content

Home

Jump to bottom
Łukasz Kwas edited this page Mar 1, 2026 · 9 revisions

What Is fiber-photo-mode?

fiber-photo-mode is a React Three Fiber library that adds photo mode and screenshot capture functionality to 3D scenes. It provides:

  • High-resolution screenshot capture independent of canvas size and pixel ratio. It also
  • Post-processing effects (Bloom, Vignette, Chromatic Aberration, Grain, Hue/Saturation, Brightness/Contrast).
  • Real-world camera parameters — aperture, focal length, focus distance — applied to the Three.js camera.
  • Depth-of-field with autofocus.

For step-by-step integration instructions, see Getting Started.

What Problem Does It Solve?

Creating a “photo mode” in a 3D scene often requires:

  • Taking high-quality screenshots that may exceed the canvas resolution.
  • Applying post-processing effects consistently across renders.
  • Managing camera parameters (focal length, aperture, focus) to mimic real-world photography.
  • Adding depth-of-field effects with automatic or manual focus.

Without fiber-photo-mode, developers must implement all of these from scratch, which is time-consuming, error-prone, and hard to maintain. This library centralizes these features into an easy-to-use API that works seamlessly with React Three Fiber.

Why I Created This Library

I built fiber-photo-mode while working on a complex, realistic 3D product configurator. In that project:

  • The configurator has a photo mode for users, where they can position the camera and take a screenshot of the product or scene, which is immediately downloaded to their device.
  • The configurator dynamically adjusts quality settings and pixel ratio depending on the user’s device. The canvas often has very low pixel ratio, but screenshots need to be captured at full resolution for output.
  • At the end of the configuration, a screenshot is taken automatically (without user knowledge) and sent to an API to generate a PDF. This screenshot must always capture the exact same camera view, regardless of what the user is currently seeing and be at specific width and height. I've used onBeforeScreenshot callback to position the camera precisely in that case.

Because this use case is complex and involves multiple layers (camera, DOF, effects, resolution handling), I decided to create a reusable library to handle it reliably and consistently.

Key Capabilities

  • Screenshot capture: Off-screen rendering for high-resolution images.
  • Post-processing: Toggleable effects, fully configurable via hooks.
  • Camera realism: Handles aperture, focal length, and DOF automatically.
  • Autofocus: Depth-based auto-focus or manual focus distance control.

Clone this wiki locally