How to generate thumbnails from glb or gltf file in node js?

You can load your glb or gltf file into a WebGLRenderer (three.js) and than read the canvas with

var imagedata =  renderer.domElement.toDataURL();

This way you get a Base64 Code from the canvas like a screenshot, which you can make an Image out of it. In my project i just added the Base64 Code as a link to download.

document.getElementById('downloadthumbnail').setAttribute('href',imagedata);

downloadthumbnail

<a class="downloadthumbnail" id="downloadthumbnail" download="thumbnail.png">Download Thumbnail</a>

When you click the "Download Thumbnail" you get a "thumbnail.png" that is basically a screenshot from the canvas, where your model is displayed. You should add a function like a timer or check if the model is loaded 100% befor you read the Base64 Code.

setTimeout( function() {
        
  var imagedata =  renderer.domElement.toDataURL();
  document.getElementById('downloadthumbnail').setAttribute('href',imagedata);

}, 1000 );

I am still looking for a solution or a way to save the generated images with javascipt directly on the server, but i think its impossible with javascript.

thanks for your answer, but i was looking to do it from backend – Naeem

That is maybe a problem. If iam not wrong, there is no other way to display 3D Models/Scenes, than in frontend. The client need to download the glb-file to render them in WebGLRenderer (three.js) and therefore JavaScript is needed. Correct me if i'm wrong, but right now there is no php-WebGLRenderer.

Well if i got you right you need images "thumbnails" for all your 3D-Model?! First question for me is, who uploades the glb-files to the server and how often? Is it the client, who can upload the files (dynamic) or the backend (Admin / Worker for a Company/Shop...) with just a fix number of files (static).

You have 4 Options:

1. (Backend) You load your glb files with a 3D Viewer like the Microsoft 3D-Viewer and export the glb-files to an image. You need to repeat it for every glb file you have and than you need to upload the "thumbnails" to the server, so its the worst case solution. Not very practical.

2. (Backend) There are a few apps (like this one) that can do that process automatically and you can select more glb files at once to make real "Thumbnails". Still someone is needed to upload the files to the server.

3. (Frontend + Backend) So right now you are stuck with a mix Frontend / Backend solution. What you can do is, the first time the glb-file is uploaded by someone, and usually this "person" (Admin / Client) is also the first one to see the 3D Model in a 3D WebGLRenderer, you can try to use some javascript+ajax+php (frontend/backend).

So exactly at that moment you make that one "screenshot - thumbnail" of the WebGLRenderer (canvas) via:

var mybase64Image = renderer.domElement.toDataURL();

You get Base64 Code. Its like an image, just in other "code" and when you use ajax to transfer the Base64 Code to a backend php-function, you can edit this code and save it immediately with backend on the server. This way you can generate a thumbnail (jpg, png...).

4. (Wait for the stackoverflow Gurus)

So i just found out, that you can indeed make screenshots "thumbnails" with node.js in backend.

Here is the link to that topic

So apparently threejs.org makes screenshots from they examples via node.js and e2e and the puppeteer.js has the screenshot logic. So yes there is a way to make screenshots with node.js

puppeteer.js