Louis Hoebregts walks us through how they rendered a 3D globe on a 2D canvas.
Because as all the following animation steps were plain 2D, I couldn’t use a 3D renderer such as Three.js. And so I had to figure out how to render a 3D shape using only the Canvas 2D API.
In this article, I’ll show you how I finally did it. I’ll first explain how to render a basic shape from a 3D scene using the JavaScript Canvas 2D API. Then in the second part of this post, I’ll show you how to make everything a bit fancier with some textures and 3D volumes.
Some really nice demos in there, such as this one:
See the Pen 3D Globe in 2D (Depth sorting) by Base Design (@basedesign) on CodePen.