Three.js Allows Developers to Build Stunning Imagery for Websites

Today on "stuff that could be HTML or CSS but basically isn't", we have a bite of code that's hosted on CodePen and features browser elements that render in true 3D. The image is a night sky with a moon, stars and scrolling "clouds" that consist of many spheres stuck together, each one inflating and deflating to create the illusion of amorphous cloud clusters. It's clever; we'll give the creator that much. However, is it really CSS or HTML?

If you want to be really technical, one supposes that either language might be needed to plug it into your browser, but the true engine of this rendering is Three.js, which is basically JavaScript without the browser plugins. It relies on WebGL to utilize your GPU to render the graphics, which makes things easier on the user and browser, but make no mistake: It's not site-building markup or CSS at work.

Aside from the skill that's needed to create an animated, 3D image like this, there's also the tedium factor of a single user creating something that looks and runs reasonably well by themselves. Normally, there are groups of people who get together to construct this type of aesthetic for a website. Of course, there are plenty of blossoming developers who take to these ambitions on their own, but we're here to tell you that for serious projects, hire someone.

This reminds us of Travis Scott's website imagery months ago, which showed an unusually efficient 3D rendition of a bird that could be interacted with and spun around to reveal specular effects. Apart from looking great, it was also incredibly smooth on both desktops and smartphones alike. The Canadian dollar website also has a similar feature that shows a spinning bill with specular on the shiny parts of it. Again, it worked all too well on PCs and smartphones even on the low end.

In any case, you might be interested in checking out Three.js if you're unfamiliar with it. It features everything from 3D rendering to parallax, scenes, animations, effects, materials, shaders and more. For more information click here https://codecab.blogspot.com/2018/11/made-sky-code-fun-html-css-js_17.html.