DEV Community

Cover image for Blender Animations and THREE.js - MEOW!
Anna Villarreal
Anna Villarreal

Posted on

2

Blender Animations and THREE.js - MEOW!

First experience with Blender! (and 3-D modeling, really) Took a fun dive into blender today and made a cat of sorts. I successfully created a brief animation. Not to difficult.

purple robotic cat

In fact, it was an awesome experience. Should have tried this before. Now, of course, I want to put my already-animated cat on the web using Three.js. Its turning out to be more complicated than expected.

I did, however manage to get the cat loaded using the GLTFLoader. Nice and easy. But, I am stuck trying to figure out how to make the animations appear. I tried a few things, including:

  • making separate keyframe png files
  • adding a clock
  • calling mixer

I've been digging for answers for a few hours and would love feedback on this matter. I did find some fun moving grass which I successfully added to the file.

3D cat sitting in grass

We've really gotta figure our this animation business. I have like half an idea what's going on. What's your finest input on the matter?

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free