Render product mockup with Three


We are developing a plugin that help to render product mockups with custom designs.
I am thinking of using fabricjs + threejs for this project.
The purpose is rendering high quality 2D product mockup with real model (see screenshot).

Is this possible with Three and is it simple to create a new product mockup?

Unless you have a high-quality 3D (not 2D) model of the base product, I don’t think that three.js is going to help you a lot with this project. It’s more likely that you need good image processing software that can run on the web or on a server.

Particularly for clothing, this may not be simple, and there are services that probably wouldn’t exist if it were easier. :slight_smile: You may find some ideas in this thread, too: How to create a Web-Based Product Mockup Tool? - Dev Talk - ProcessWire Support Forums.


If you mean the print only then basically yes. The model images need to be prepared properly such as with the shape to project on, lighting/shadows, print specific properties/texture and occlusion.

Some print services i seen already do that, once a design is uploaded a close-to-realistic preview of all possible products in generated, instead only putting a image over the base of the product they consider lighting and print-specific changes relatively accurate or texture.

However like @donmccurdy said this is more of static image processing which is rather suited as a server side job, especially to not rely on the clients hardware and possible quality, and since it’s already there rendering software is used.