Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Render a Three.Js scene to an animated GIF file with custom intervals

I am trying to render an animated Three.js scene (basically a dynamic mesh loader that rotates the object 360 degrees automatically) to a GIF file. Basically I would like the GIF to contain frames that would be "screenshoted" from the WebGL canvas every x seconds/ms.

I have been searching for a few hours but I didn't find any good ressources on this subject.

Thanks.

like image 206
jhagege Avatar asked Aug 15 '14 14:08

jhagege


People also ask

How do you make an animated GIF from multiple pictures?

If you use Google Photos on Android (or iOS), you can make an animated GIF from a selection of your pictures. Just tap Library, then Utilities and Create New. Choose Animation, select the photos and tap Create.

How many frames per second should a GIF be?

Standard GIFs run between 15 and 24 frames per second. Overall, the smaller your GIF file size, the lower the quality will be. When creating GIFs for the web, it is all about finding the smallest file size possible without sacrificing too much quality.


1 Answers

Some years ago I did exactly that. You can have a look at the code here:

https://mrdoob.github.io/omggif-example/

like image 154
mrdoob Avatar answered Oct 05 '22 10:10

mrdoob