# Convert objects in 3D to 2D image

**URL:** <https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918>\
**Category:** Questions\
**Tags:** node-js\
**Created:** [September 22, 2020, 9:04am UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918 "2020-09-22T09:04:46Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jos\_Bammens](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jos_bammens/32/7378_2.png) [@Jos\_Bammens](https://discourse.threejs.org/u/Jos_Bammens)\
**Post date:** [September 22, 2020, 9:04am UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918/1 "2020-09-22T09:04:46Z")

</div>

Hello guys

I’m creating a product configurator, which uses three.js combined with CSG to visualise the products. Those products can be pretty simple shapes, think rectangles with a corner cut off,…

I’m saving all the data that I need in the front-end to my database, via an api (php - Laravel). So the next time a user visits the applicatie I can draw the same product again on my canvas.

The problem, however, is that I have to create a PDF with the product specifications and 2D drawings of said products (which I visualise in 3D with three.js).

Solutions I have thought of:

- Make a screenshot of the canvas with JavaScript

I don’t like this as the screenshots have to be made when the canvas is live, and I have to create images of the products individually but also when they are grouped on the canvas. So I would have to draw them one per one, take screenshot and then draw them together and draw a screenshot again. Then send all those screenshots to my backend,…

- Draw the 2D images in the backend

I have all the information I need, so I could just draw them in my backend with php drawing functions. But this is a lot of hassle for drawings that I actually have already.

Has anyone ever struggled with this problem, or know another path I could take?

Thanks

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 22, 2020, 11:09am UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918/2 "2020-09-22T11:09:40Z")

</div>

Have you considered to use a node.js setup that allows you to run a headless Chromium e.g.

> **[puppeteer/puppeteer](https://github.com/puppeteer/puppeteer)**
>
> Headless Chrome Node.js API. Contribute to puppeteer/puppeteer development by creating an account on GitHub.

In this way, you can implement WebGL renderings in the backend with `three.js`.

BTW: `three.js` uses this approach for its E2E regression tests (that means a script makes screenshots from the official examples and compares them with pre-defined ones).

---

<div class="post-metadata">

**Author:** ![Jos\_Bammens](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jos_bammens/32/7378_2.png) [@Jos\_Bammens](https://discourse.threejs.org/u/Jos_Bammens)\
**Post date:** [September 22, 2020, 11:52am UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918/3 "2020-09-22T11:52:02Z")

</div>

I didn’t know about puppeteer, that could be an option. But for this to work I would need to copy paste my code for positioning,… from my front-end to my back-end, which could be very tedious when I make some changes to the front-end three.js code. Or am I wrong on that part?

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [September 22, 2020, 12:03pm UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918/4 "2020-09-22T12:03:32Z")

</div>

> [@Jos\_Bammens](#):
>
> I don’t like this as the screenshots have to be made when the canvas is live, and I have to create images of the products individually but also when they are grouped on the canvas. So I would have to draw them one per one, take screenshot and then draw them together and draw a screenshot again. Then send all those screenshots to my backend,…

I’m not sure if you mean creating static thumbnails or images of the configuration. What do you mean with live?

---

<div class="post-metadata">

**Author:** ![Jos\_Bammens](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jos_bammens/32/7378_2.png) [@Jos\_Bammens](https://discourse.threejs.org/u/Jos_Bammens)\
**Post date:** [September 22, 2020, 12:07pm UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918/5 "2020-09-22T12:07:07Z")

</div>

I mean images of the configuration that the user made. That way I can add these images to an offer that the user can print out.

The canvas is shown in the configuration step of the process. But when the user has ordered the configuration and wants to print out a pdf the canvas won’t be shown anywhere on the page, so it won’t be “live”. (“live” is indeed not that clear)

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [September 22, 2020, 12:17pm UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918/6 "2020-09-22T12:17:20Z")

</div>

I see, you can generate the images on the client, then either you upload them or generate the PDF with js.

When you take a image of the canvas the canvas doesn’t need to be shown or being attached to the dom.

---

<div class="post-metadata">

**Author:** ![Jos\_Bammens](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jos_bammens/32/7378_2.png) [@Jos\_Bammens](https://discourse.threejs.org/u/Jos_Bammens)\
**Post date:** [September 22, 2020, 1:08pm UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918/7 "2020-09-22T13:08:05Z")

</div>

Hmm, I don’t understand completely. How would I create an image of the canvas when it is not attached to the dom?

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [September 22, 2020, 1:14pm UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918/8 "2020-09-22T13:14:59Z")

</div>

When creating the WebGLRenderer set `preserveDrawingBuffer` to true, so you can use toDataURL or toBlob on the canvas element, returning the image file either base64 encoded or as binary blob.

---

<div class="post-metadata">

**Author:** ![Jos\_Bammens](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jos_bammens/32/7378_2.png) [@Jos\_Bammens](https://discourse.threejs.org/u/Jos_Bammens)\
**Post date:** [September 23, 2020, 7:41am UTC](https://discourse.threejs.org/t/convert-objects-in-3d-to-2d-image/18918/9 "2020-09-23T07:41:05Z")

</div>

This could be the solution! I made a quick prototype and its seems to be working like I want it to. The only downside is that the code for creating the other contents of the pdf is already written in the backend. So that means that I have to send the images to the backend before I can create the pdf.

But this beats writing php for drawing everything again in 2D every day, so thank you!