# Front end or server side rendering

**URL:** <https://discourse.threejs.org/t/front-end-or-server-side-rendering/58853>\
**Category:** Questions\
**Tags:** screenshot\
**Created:** [December 4, 2023, 3:23am UTC](https://discourse.threejs.org/t/front-end-or-server-side-rendering/58853 "2023-12-04T03:23:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nemines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nemines/32/16023_2.png) [@Nemines](https://discourse.threejs.org/u/Nemines)\
**Post date:** [December 4, 2023, 3:23am UTC](https://discourse.threejs.org/t/front-end-or-server-side-rendering/58853/1 "2023-12-04T03:23:06Z")

</div>

Hi All,

I have a scene with multiple 3D models that I want to screenshot/render several times from different positions and orientations of camera.

The generated images (jpeg or PNG) will go to make a report in PDF.

What is the best way to go about this ? Should I process everything in front end (react and threeJS) or should I consider server side rendering (using nodeJS). In both cases, what would be the command to get such screenshots

Any inputs are much appreciated

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [December 4, 2023, 10:48am UTC](https://discourse.threejs.org/t/front-end-or-server-side-rendering/58853/2 "2023-12-04T10:48:46Z")

</div>

[This thread](https://discourse.threejs.org/t/run-three-js-on-node-js/58047/2) my help if you want to do it on the backend. Although you’d have definitely a better time if you decide to do it on the frontend.

---

<div class="post-metadata">

**Author:** ![Nemines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nemines/32/16023_2.png) [@Nemines](https://discourse.threejs.org/u/Nemines)\
**Post date:** [December 10, 2023, 6:51pm UTC](https://discourse.threejs.org/t/front-end-or-server-side-rendering/58853/3 "2023-12-10T18:51:51Z")

</div>

Can you point me towards the right direction of how to do it on the front End ?

Thanks !

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 5, 2024, 8:45am UTC](https://discourse.threejs.org/t/front-end-or-server-side-rendering/58853/5 "2024-03-05T08:45:13Z")

</div>

it would be easy to snapshot in a node process, you can turn it into a cli tool or wire it into a server process.

here’s a real world example: [buerli-starter/packages/with-solid-puppeteer at main · awv-informatik/buerli-starter · GitHub](https://github.com/awv-informatik/buerli-starter/tree/main/packages/with-solid-puppeteer)

don’t mind the CAD stuff, it’s just cli.js, the commandline tool, and /src/App.js the canvas. remove everything related to buerli and load your gltfs. style it or let it react to url queries so that the cli tool can communicate its configs.

```shell
▶ node cli.js                                         

  Usage
    $ npx cad2img [model.stp] [options]

  Options
     --shadows, -s Shadows (default: true)
     --diffuse, -d Diffuse (default: 3.14)
     --ambience, -a Ambience (default: 1)
     --bg, -b Background color (default: "#f0f0f0")
     --direction, -d Direction (default: "[1,1,1]")
     --ext, -e File extension for batch processing (default: stp)

▶ node cli.js public/models/blends/BoxFillets4rad.stp 
  processing public/models/blends/BoxFillets4rad.stp
  ...

```

 ![BoxFillets4rad.stp](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/b/abc86c1efff8d2bf7e8702f4e3759c0774b406d8.png)

on the front end it would be simple as well, you need this

```jsx
<Canvas gl={{ preserveDrawingBuffer: true }}>

```

and this:

```jsx
const link = document.createElement('a')
link.setAttribute('download', 'canvas.png')
link.setAttribute('href', document.querySelector('canvas').toDataURL('image/png').replace('image/png', 'image/octet-stream'))
link.click()

```

you can try it here  
[https://codesandbox.io/p/sandbox/t-shirt-configurator-ioxywi](https://codesandbox.io/p/sandbox/t-shirt-configurator-ioxywi)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 5, 2024, 8:50am UTC](https://discourse.threejs.org/t/front-end-or-server-side-rendering/58853/6 "2024-03-05T08:50:33Z")

</div>

btw even the pdf you can easily auto create by code, since you already use react, there is a renderer for it [https://react-pdf.org](https://react-pdf.org)

---

<div class="post-metadata">

**Author:** ![funny](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/funny/32/44792_2.png) [@funny](https://discourse.threejs.org/u/funny)\
**Post date:** [March 5, 2024, 1:09pm UTC](https://discourse.threejs.org/t/front-end-or-server-side-rendering/58853/7 "2024-03-05T13:09:34Z")

</div>

I’ve done it before.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/6/063b0869247f8e7eef9ef0fd84fd480280b4f12e.png)

---

<div class="post-metadata">

**Author:** ![Nemines](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nemines/32/16023_2.png) [@Nemines](https://discourse.threejs.org/u/Nemines)\
**Post date:** [March 8, 2024, 10:15am UTC](https://discourse.threejs.org/t/front-end-or-server-side-rendering/58853/8 "2024-03-08T10:15:21Z")

</div>

Ok I will try it out !

Thank you for your continued help and support to this community.

Cheers 🥂