Parameter for animate function to check whether all objects are rendered in 3d and then take screenshot

Hi all,

I am trying to figure out how would we make it possible to execute some function after renderer.render is called and all objects are rendered in 3d.

i have one event called toggle-3d and i am checking whether that event has some formData, i will take that and then take screenshot from 3d canvas and attach it to formData and send request to sever to save the 3d image of product.

But the issue is that requestAnimationFrame returns the id so i am unable to pass parameter to animate function because i need to ensure that 3d has generated otherwise wrong screenshot is being captured

function animate(callback) {
    // hre callback refers to the id which was returned by requestAnimationFrame above
    if (callback) {

and here is event where formData should be captured and processed after 3d has been generated completely. 3d view in ui is only made visible when this event is run

window.addEventListener('toggle-3d',function(event) {
      //some code for scene modifications like removal and adding new objects etc...
    animate(() => {
    if(event.detail.formData) {

        const formData = event.detail.formData;

        const canvas = renderer.domElement;

        canvas.toBlob(function(product3dImageBlob) {
            // here code will be to send file from the blob to server

i can not pass callback to animate like above. How we can ensure a whole 3d is rendered and all objects are generated so we can capture screenshot when toggle-3d event is run?

You could try to pass the parameter through a global variable.

put some global variable after the Renderer. to not call the renderer again until you get a shot of the screen, because by default renderer.render self clear buffer at end.

put a shot funcion inside a timetout, 500ms its a good time

after shot sucess, restore global variable to allow render again.