Front end or server side rendering

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

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.

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

Thanks !

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                                         

    $ npx cad2img [model.stp] [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

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'))

you can try it here

btw even the pdf you can easily auto create by code, since you already use react, there is a renderer for it

I’ve done it before.

Ok I will try it out !

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

Cheers :clinking_glasses: