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

I am stuck at this, I need to generate thumbnails from glb or gltf file to display it in the web browser, so the only active image will be original gltf files and others will be just thumbnails in the gallery, I tried to search it on every forum but I didn't get any idea or solution

node.jsgltf


Solution 1:[1]

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.

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ExoGeniA
Solution 2 ExoGeniA

Related Questions