How to render top and bottom view of 3D file in react-three-fiber to a separate image file

[gokulLX]

I'm using the following code to generate images on x-axis auto-rotate. I also need top and bottom view of 3d File. My idea is to rotate the 3d object on y-axis to take top and bottom view image. But i've no idea to rotate 3d objects on y-axis.

Passing props won't work here, because that 3D file is dynamically loaded with gltfjsx converter.

If the question is not clear, please let me know so that i can provide additional details.

Thank you!

for (let i = 1; i <= 360; i++) {
    if (i % 45) continue;

    await sleep(5000);

    let canvas = document?.getElementsByTagName('canvas')[0];

    if (canvas !== undefined) {
      let blob = dataURLtoBlob(canvas.toDataURL('image/jpeg'));

      const thumbnail = new File([blob], `thumbnail_${i}.jpeg`, {
        type: 'image/jpeg',
      });

      formData.append(`thumbnail_${i}.jpeg`, thumbnail);

    }

  }

[drcmda]

im not sure why you cant rotate the scene, or the model, what is the problem with that?

[gokulLX]

I've move the camera programmatically in both x and y axis to take 360 degree screenshots. Let's say, if a 3D modal is mounted, i need to implement a function that rotates 3D modal (not with mouse movements)