DEV Community

Cover image for Animated GIFs of 3D Globes and Tilting the bar
Theo Armour
Theo Armour

Posted on

Animated GIFs of 3D Globes and Tilting the bar

Animated GIF Horror

Yes, I know the spinning globe is really, really irritating. I am still way down on the learning curve with trying to reduce my beautiful, interactive 3D world of Three.js to work with you "Flatlanders".

My goal is to be able to push a button on a web page I am working on and have a nice smooth animated GIF come out the other end. The GIF should be small enough to be under the 1 MB maximum size set by GitHub Social Preview and/or Glitch.

The code to generate an animated GIF from a three.js demo is Jaume Sanchez's CCapture. It creates a [WebM]( https://en.wikipedia.org/wiki/WebM file and then uploading to EZGif for optimizing. It's all fairly easy to use, the only issue is that there many parameters from from the number of colors in a bitmap uses as a texture in the 3D model to the FPS used by CCapture compared to the FPS used by EZGIF. So getting anything going takes a lot of trial and error - and lots of groaning and saying to to yourself "Oh dang! Another 10 MB file".

The problem with a spinning earth is that it is no fun unless you go all the way around at a nice smooth gentle pace. At 60 frames per second for ten seconds that's 600 frames. Well, that takes a file of many megabytes. So you end up just looking for a less-sucky compromise.

Tilting the Bar

What is the animated GIF showing? It is a demo of the problem I am posing for tomorrow's pair programming session with Harald Reingruber

harald3dcv image

I am trying to place sticks or bars that are at given latitudes and longitudes on the surface of a 3D globe. I have been doing this successfully in c19-viz3d. You will note, however, that the bars are all circular in section. This means that the bars can be rotated at any angle and look OK. But if non-circular profiles are desired or if 3D text is desired, then the appearance - with everything tilted every which way - is not pleasing.

Below is the demo file used to created the animated GIF and the tilted bars. Click the "addMeshGeometryInstance" button in order to generate the bars = and note that they are all rotated at different angles.

Will we be able to get the "up" of all the bars facing in the same direction? Who knows, but we shall find out tomorrow.

Discussion (1)

Collapse
harald3dcv profile image
Harald Reingruber

Thanks a lot for the collaboration. In the end we were able to figure out the correct main-axis rotation for the cubes. Do you want to update the article with the fixed version?