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
Top comments (0)