Browser console script to render frames from a rotating OBJKT on hicetnunc.xyz and save as PNGs

objkt-capture-frames.js

/*
objkt-capture-frames.js
Description: Browser console script to render frames from a rotating OBJKT on hicetnunc.xyz and save as PNGs
Version: 0.2
Author: Heracles Papatheodorou / @Arty2
Website: https://gist.github.com/Arty2/cc438cc516bfc443cf4f7756343188bc
License: MIT License
*/

// styles for the new elements
document.head.insertAdjacentHTML('beforeend',
'<style>details summary{margin-bottom:5px}details img{width:100px;height:auto;}details a{display:inline-block;margin:2px;outline:1px solid;}details a:focus,a:active{outline-color: red;}details button{color:inherit;background:none;border:1px solid;}</style>');

mdlvwr = document.querySelector('model-viewer');
mdlvwr.setAttribute('interaction-prompt','none'); // hide interaction prompt
mdlvwr.minimumRenderScale = 1; // try to avoid rescaling


// helper function to enable async calls
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// helper function to download all
function dwnld(elem) {
  lnks = elem.parentElement.parentElement.querySelectorAll('a');
  lnks = Array.from(lnks);
  for (lnk in lnks) {
    // console.log(lnks[lnk]); // DEBUG
    lnks[lnk].click();
  }
}

// "render", create an image element for each frame
async function rndrfrms() {
  for (let deg = 0; deg <= 360-step; deg+=step) {
      await sleep(1000); // try too fast and resolution will drop
      mdlvwr.resetTurntableRotation(deg * Math.PI/180);
      await sleep(10); // wait for turnable to reset
      mdlfrm = mdlvwr.toDataURL(); // get frame as Base64 encoded PNG
      frmtlt = 1+parseInt(deg/step); // frame filename
      frmtlt = frmtlt.toString().padStart(3, '0') + '.png'; // pad with zeroes and add extension
      imglnk = document.createElement('a')
      imglnk.href = mdlfrm;
      imglnk.download = frmtlt;
      imglnk.title = frmtlt;
      img = document.createElement('img');
      img.src = mdlfrm;
      imglnk.appendChild(img);
      mdlfrms.appendChild(imglnk);
      // console.log(frmtlt); // DEBUG
  }
  mdlfrms.appendChild(document.createTextNode('OK'));
}

//
function cptr() {
  // prompt for number of frames
  window.frmsno = parseInt(prompt('Number of frames in a full rotation','12')); // prompt for number of frames
  window.step = 360/frmsno; // how many degreess per frame

  // create a detail element to group all frames
  mdlfrms = document.createElement('details');
  mdlfrms.classList.add('styles_container__1Yt5m');
  mdlfrms.open = 'open';
  mdlfrms.innerHTML = '<summary>' + frmsno + ' FRAMES <button onclick="dwnld(this)">DOWNLOAD</button> <button onclick="cptr()">RE-CAPTURE</button></summary>';
  document.querySelector('main').appendChild(mdlfrms);
  
  // render the frames
  rndrfrms();
} cptr();

For non programmers:

1. Open object with mimetype: model/gltf-binary
2. Open console/terminal
3. Just copy paste it and press Enter
4. Set up the frames
5. Wait
6. When it stops just scroll page to bottom and you will see the renders.

I was confused the first time but this is amazing thing.