Thumbnail creation

Hi Everyone,

I am new to three js ,

i just want to create thumbnail after rendering my gltf/glb or mdl files. please help me out for this.
Thanks in advance

you can loader the model into your scene and then use renderer.domElement.toDataURL() or renderer.domElement.toBlob() get base64 data for png

// you scene
let scene = new THREE.Scene()

// loader model
const loader = new THREE.GLTFLoader()
loader.load('your model url', function( gltf ) {
 // other handle

// renderer
let renderer = new THREE.WebGLRenderer({
  preserveDrawingBuffer: true, // it is necessary

// if you have a button or other function 

function click() {


   // get base64 data 
  const screenShot = renderer.domElement.toDataURL()




toBlob() is faster than toDataURL()

1 Like