Waving Pixel Art Siamese Cat

Description

I tried to put a pixel-art texture on a 3D model.

The image of the cat is based on our cat at home.

GSAP is really easy to use to animate almost anything on the web.

I used GSAP timeline to animate the cat, looks like it is waving. Though, I still need to practice my animation skills, and I want it to be better.

I also animated the cat to rotate 360 degrees so we could also see the rear-side of the cat. Although, there is nothing to see there.

I used primitive geometries provided by ThreeJS to create the model of this cat. Creating the head and the body was not a problem, but the shoe. I used combination of box, sphere, plane, and circle to create this shoe.

The only things that has a texture on the model is the head, and the body. Others are just a simple colored mesh.

The color palette I used in this model is Arne32.

How the model looks is inspired by the popular Nintendo Switch game: Animal Crossing.

Other description

ThreeJS: Next thing to study

Next to study: SkinnedMesh

Based on the documentation, SkinnedMesh can be used to twist and bend a mesh to simulate the skeleton, and can be used to animate an object.

Resources

GSAP For animation

ThreeJS For 3D rendering and modelling

Aseprite For pixel art texture

Arne32 Color palette