Front end or server side rendering

Questions
1

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

2

This thread 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.

3

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

Thanks !

5

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

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.

▶ 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
BoxFillets4rad.stp1080×1024 37.2 KB

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

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

and this:

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

6

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

7

I’ve done it before.

image
image1328×778 44.5 KB

8

Ok I will try it out !

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

Cheers :clinking_glasses: