The ModelViewer class offers a toBlob(callback) method.
You can save the given blob as an image with standard JavaScript.
E.g. something along the lines of:
JavaScript:
viewer.toBlob((blob) => {
let url = URL.createObjectURL(blob);
});
You can get all sorts of different scripts that allow to download urls easily. For the unit tester, I use this simple function:
JavaScript:
function downloadUrl(url, name) {
let a = document.createElement('a');
a.href = url;
a.download = `${name}.png`;
a.dispatchEvent(new MouseEvent('click'));
}
You get full control over the viewer with the update(), render(), and updateAndRender() methods.
This means you can indeed move frame by frame and take screenshots if you desire.
It is a bit troublesome that toBlob() is asynchronous, so you cannot run this kind of code in a simple loop. I thought about changing it to promises at some point, which will allow you to effectively have this code:
JavaScript:
async function record(viewer, frames) {
for (let i = 0; i < frames; i++) {
viewer.updateAndRender();
// Note the async/await!
let url = URL.createObjectURL(await viewer.toBlob());
downloadUrl(url, `frame_${i}`);
}
}
I have done this in the past to make the auto-generated gif's of models when I made that demo gallery client that no one liked.
There isn't any code currently for this, however I won't mind making a quick implementation if you want. The actual recording really just takes the above tiny function if I change to promises from callbacks. The actual work here is the UI to let you select animations and what or what not to record, a way to move the camera, and so on. If I'll do it, I am not going to spend a lot of time at all on any kind of proper UI.
I am not sure what you mean by the second part.
If you mean just rotating the model or having the camera rotate around the model, you can do both with standard node operations.
.
