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?

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series