Thumbnail creation

Questions
, , , , , ,
1

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

2

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
  scene.add(gltf)
})

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


// if you have a button or other function 

function click() {

  renderer.render()

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

}

toDataURL()

toBlob()

toBlob() is faster than toDataURL()

1 Like