Rotating Loading Animation of 3D Shapes with Three.js

Celý článek

All things we see around are 3D shapes. Some of them are nice looking, some of them you’d like to touch and squeeze. But because it’s still quarantine time, and I don’t have many things around, I decided to create some virtual things to twist around. Here’s what I ended up with:

How to do that?

To render everything I used Three.js, just like Mario Carillo in his amazing demo, go check it out! Three.js is the best and most popular library to do things with WebGL at the moment. And if you are just starting your 3D path, it is definitely the easiest way to get something working.

If you just rotate the shape, its nothing special, its just rotating.

Interesting things start to happen when you rotate different parts of the shape with different speeds. Let’s say I want the bottom part of the object to rotate first, and than the rest, let’s see whats going to happen.

To do something like that, you would need to use a Vertex shader. I used a little bit of math and rotated parts of the object depending on the Y or Z coordinate. The simplified code looks like this:

vec3 newposition = rotate(oldPosition, angle*Y_COORDINATE);

So with a coordinate change, the rotation would change as well. The rotate function itself includes a lot of Sine-Cosine’s and matrices. All the math you need to rotate a point around some axis. To give it a more natural feel, I also change the easing function, so it looks like elastic rubber.

Visuals, MatCap

To create a nice look for objects, we could have used lights and shadows and complicated materials. But because there’s not so much in the scene, we got away with the most simple kind of material: MatCaps. So instead of making complicated calculations, you just use a simple image to reference the lighting and color. Here is how it looks like:

And here is how the torus shape looks like with this texture applied to it:

Amazing, isn’t it? And so simple.

So combining Matcaps and a rotation method, we can create a lot of cool shape animations that look great, and have this rubber feeling.

Go and create your shape with this technique and make sure to share it with us! Hope this simple technique will inspire you to create your own animation! Have a good day!

The post Rotating Loading Animation of 3D Shapes with Three.js appeared first on Codrops.