Convert 3D model in three-js scene to png image -- saving the animation frames using `canvas.toBlob`

threeDModelToPng.js

//
/**
* On browser load
* if using https://github.com/vasturiano/globe.gl#globe-layer
* call inside `animate()` function or `onGlobeReady`, or a react wrapper `onLoad` callback
*/

// after globe is loaded and animation started
const canvasElement = document.querySelector(
  `canvas#canvas-id`
);

canvasElement?.toBlob((blob) => {
  const imgEl = document.createElement('img');
  imgEl.src = URL.createObjectURL(blob);
  document.body.appendChild(imgEl);
});

// reference: https://discourse.threejs.org/t/convert-3d-model-in-threejs-scene-to-png-image/20742/2