Rendering the configured 3D product to an image for the quote

A configurator is not finished when the price is right. The customer configured a specific thing, and the quote needs to show exactly that thing. A spec list is not enough. People want the picture of the product they just built. So you capture the canvas.

The naive capture, and why it comes back blank

The obvious call:

const dataURL = renderer.domElement.toDataURL('image/png')

On most configurators this returns a blank image. The reason: for performance, WebGL clears the drawing buffer after each frame. By the time toDataURL runs, there is nothing there to read.

Two ways that actually work

Option A: keep the buffer. Tell the renderer to preserve it:

const renderer = new THREE.WebGLRenderer({
  preserveDrawingBuffer: true,
  antialias: true,
})

Simple, but it has a small constant performance cost on every frame, so only use it if you capture often.

Option B: render on demand, then read immediately. Better for configurators that only render on change. Render a frame and grab it in the same tick:

function capture() {
  renderer.render(scene, camera)          // fresh frame, this tick
  return renderer.domElement.toDataURL('image/png')
}

No permanent cost, because you only pay when you actually capture.

For a print-quality quote, render bigger

The on-screen canvas is sized for the viewport. A quote PDF wants more resolution. Render to an offscreen target at a higher size, capture, then restore:

const w = renderer.domElement.width, h = renderer.domElement.height
renderer.setSize(2000, 1500, false)       // false: do not touch CSS size
renderer.render(scene, camera)
const hi = renderer.domElement.toDataURL('image/png')
renderer.setSize(w, h, false)             // restore

Send that data URL to your backend, drop it into the quote next to the price and lead time, and the customer gets a document showing the exact product they configured. That is the artifact that turns a session into a sales conversation. The studio wires this into the Laravel quote generator so the picture and the numbers come from the same submit.

I am Dominik Groński / GroDev, a studio in Poznan, Poland building custom 3D configurators and Laravel back-ends for manufacturers.