3D preview
Customers turn the product in 3D in the designer and see their design on the front and the back, made from the mockup's own front and back photos. What it needs, how to turn it off, and how it loads.
Updated 9 October 2026, for PrintBlob 1.1.0.
From PrintBlob 1.1, the designer has a 3D button beside Front and Back. It turns the product into a garment hanging on a hanger, with the customer’s design printed on the front and the back, following the folds of the fabric. Customers drag it to turn it; Front and Back turn it round; the colour they pick applies straight away. 3D again goes back to editing.
There are no 3D models to make: the garment is built from the mockup’s front and back photos (see Mockups). Its outline comes from the photos’ transparent background, its thickness from how far each point is from the edge, and its look from the photos themselves.
What it needs
- A mockup with a front and a back photo. The bundled t-shirt mockup has both. Products whose mockup has only one side don’t show the button.
- Photos on a transparent background, as for the designer itself.
- The back photographed from behind, the same way as the front: same distance, same framing, same hanger. The 3D view lines the back up as the front’s mirror image, so a back photo taken from further away or off-centre won’t meet the front at the edges.
The bundled t-shirt’s photos are made for it: the back is the same shirt, hanger and light as the front.
Openings
A real garment is open at the sleeve ends, the hem and the neck, and sewn everywhere else. Mockups can record where they are open, so the 3D view shows the inside of the sleeves and the hem instead of closing them. The bundled t-shirt comes with its openings (existing shops get them with the 1.1 update). For your own mockups the edges are treated as seams.
Turning it off
WooCommerce › Settings › PrintBlob › 3D preview turns the button off for every product. It is on by default.
How it loads
The 3D view’s code (three.js and PrintBlob’s garment code, about 150 KB compressed) is a separate file that downloads only when a customer presses 3D; the designer itself doesn’t get any heavier. It needs WebGL 2, which every current browser has, and draws nothing while it is scrolled out of view. Like the rest of PrintBlob, it sends nothing to any outside service: the customer’s design never leaves their browser until they add it to the cart.