Take a screenshot of a Three.js scene

Updated on October 30, 2026. Tested with three.js r186 and R3F 9.

Save the canvas as a PNG

Render a frame and call toBlob() on the renderer's canvas straight after it, in the same function.

function screenshot(type = 'image/png'): Promise<Blob> {
  renderer.render(scene, camera);
  return new Promise((resolve, reject) => {
    renderer.domElement.toBlob((blob) => {
      if (blob) resolve(blob);
      else reject(new Error('The canvas is empty'));
    }, type);
  });
}

screenshot() gives you the frame as a Blob. To let the shopper download it, hand it to a link and click it.

function download(blob: Blob, name: string) {
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = name;
  link.click();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

document.querySelector('#save')?.addEventListener('click', async () => {
  download(await screenshot(), 'configuration.png');
});

Pass 'image/jpeg' or 'image/webp' for a smaller file. toBlob is better than toDataURL here, because it does not build a base64 string several megabytes long on the main thread.

The image is black or empty

A WebGL canvas is cleared once the browser has put the frame on screen. By default three.js creates its renderer with preserveDrawingBuffer: false because it's more performant. So a toDataURL() or toBlob() called from a click handler reads a canvas that was already cleared. The PNG you get is fully transparent. On a dark page or in some image viewers that looks black, and saved as a JPEG it is solid black.

There are two ways to fix it.

1. Render right before you read, in the same function, as screenshot() does. Use this one.
2. Create the renderer with preserveDrawingBuffer: true. Reading later now works, but on some devices that makes the whole page slower.

If you use post-processing, call composer.render() in screenshot() instead of renderer.render(), or the picture is saved without its effects.

Save it larger than the screen

The canvas is as big as it is on the page, times the screen's pixel ratio. A viewport 1,200 pixels wide gives a 2,400 pixel image on a laptop and often less on a phone. For a print or a PDF, draw one frame at the size you need and set everything back.

async function screenshotAt(width: number, height: number): Promise<Blob> {
  const size = renderer.getSize(new THREE.Vector2());
  const ratio = renderer.getPixelRatio();
  const aspect = camera.aspect;

  renderer.setPixelRatio(1);
  renderer.setSize(width, height, false);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  const gl = renderer.getContext();
  if (gl.drawingBufferWidth < width || gl.drawingBufferHeight < height) {
    console.warn(`The browser gave ${gl.drawingBufferWidth}×${gl.drawingBufferHeight}, not ${width}×${height}`);
  }

  try {
    return await screenshot();
  } finally {
    renderer.setPixelRatio(ratio);
    renderer.setSize(size.x, size.y, false);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
  }
}

To get a specific resolution for your export, do the following.

• Set the pixel ratio to 1, so width and height are the pixels you get.
• Pass false as the third argument to setSize. It resizes what is drawn and leaves the canvas's size on the page alone, so nothing on screen jumps.
• Set camera.aspect to the image's width divided by its height and call camera.updateProjectionMatrix(), or a square image of a wide viewport comes out squashed. An image narrower than the viewport shows less at the sides, so if the product no longer fits, move the camera back or raise camera.fov for the capture.

GPUs have a maximum size for what they render. If you ask for more, the browser makes the canvas smaller without an error. drawingBufferWidth tells you the size you really got, which is why the function checks it.

Keep the background transparent

If you need a transparent background, create the renderer with alpha: true and leave the scene's background empty.

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
scene.background = null;

PNG and WebP keep the transparency. JPEG has none, so the transparent pixels come out black.

Send the screenshot to your server with the shopper's choices

Often the shop needs to see what the shopper built, to price it or to make it. Send the picture to your server together with the choices that made it, at a size that prints.

async function sendConfiguration(configuration: Record<string, string>) {
  const form = new FormData();
  form.append('image', await screenshotAt(2048, 1536), 'configuration.png');
  form.append('configuration', JSON.stringify(configuration));
  await fetch('/api/configurations', { method: 'POST', body: form });
}

On your server it is an ordinary file upload.

Take a screenshot in React Three Fiber

React Three Fiber runs the render loop for you, so take the renderer, the scene and the camera from useThree in a component inside the <Canvas>, and hand a capture function out through a ref. The button stays outside the canvas, with the rest of your interface.

type Capture = () => Promise<Blob>;

function CaptureHandle({ capture }: { capture: RefObject<Capture | null> }) {
  const { gl, scene, camera } = useThree();
  useEffect(() => {
    capture.current = () => {
      gl.render(scene, camera);
      return new Promise((resolve, reject) => {
        gl.domElement.toBlob((blob) => {
          if (blob) resolve(blob);
          else reject(new Error('The canvas is empty'));
        }, 'image/png');
      });
    };
  }, [gl, scene, camera, capture]);
  return null;
}

export function Configurator() {
  const capture = useRef<Capture | null>(null);
  return (
    <>
      <Canvas>
        <CaptureHandle capture={capture} />
        <mesh>
          <boxGeometry />
          <meshStandardMaterial color="tomato" />
        </mesh>
      </Canvas>
      <button
        onClick={async () => {
          const blob = await capture.current?.();
          if (blob) download(blob, 'configuration.png');
        }}
      >
        Save image
      </button>
    </>
  );
}

React Three Fiber already creates its renderer with alpha: true, so the background is transparent unless you give the scene one. You do not need gl={{ preserveDrawingBuffer: true }} either, because the capture renders its own frame first, exactly like the vanilla version.

How to make it look even better

Full size

×

A screenshot is exactly the viewport, with the same shadow maps, the same reflections of the environment map and the same edges. For a thumbnail in a cart that is what you want.

When the picture has to look like a photo, for an order confirmation, a PDF or an image the shopper shares, Bakery3 renders the same scene with a path tracer. It takes a few lines beside your screenshot code.

// An API key while you test. In production, use a token from your server instead:
// https://bakery3.com/docs#let-your-users-render-without-exposing-your-api-key
const bakery3 = createBakery3({ apiKey: 'bk_sk_…' });
bakery3.attach({ scene, camera, renderer });

async function photo(): Promise<string> {
  const job = await bakery3.render({ width: 2048 });
  const result = await job.result();
  return result.url;
}

photo() returns a link to a PNG of the scene exactly as the shopper left it, traced with its own materials, lights and camera, with a transparent background by default. It takes longer than a screenshot and each image is charged, so most configurators keep the screenshot for the cart and render only the pictures that have to look their best. The quickstart sets up the token endpoint, and Render image has every option.

Below is the same chair in a Three.js viewport and traced from that scene.

Common questions