Rick's Blog

Font size: +
Featured

Life On The Farm - Adding Animation

Life On The Farm - Adding Animation Life On The Farm - Adding Animation

With the basic game dynamics working, I started to add animation to the assets.  Blender's glTF exporter makes exporting animations to webGL relatively simple, but there were still plenty of Opportunities For Learning (OFL) to occur.  :)

 Rigid body animations (i.e., translations and rotations) work well and are mostly straight forward.  I experimented early on with the windmill spinning.  I still struggle with where Blender pulls the name for what becomes the animationClip in THREE.js.  I default to naming my Animation and Action to the same name in Blender to avoid having to guess.  

Blend shapes also seem to transfer easily.  I don't have a lot of experience using them, and haven't yet attempted to control the blend shapes from within THREE's animation system.  I have been successful at keying the blend shapes in a loop inside blender and having the result simply play within THREE.

(Depending on your browser, you may need to manually start and loop the video.)

 The video above is one of the player pieces.  The tires rotate on a looping animation.  I created a particle system for the exhaust, only to figure out exporting particles to THREE wasn't straightforward and sometimes not possible.  (More on that in a minute)  So I used the particles as a reference and made the exhaust from a single mesh and blend shapes.  I then animated the blend shape keys and exported that.

I also planned to use particles for the Winner's Circle scene at the end of the game.  I am in the process of figuring out how to create/control particles natively within the THREE.js animation system.  If I get that figured out, I'll write a post or three about that.  If not, I may end up just using a plane with transparency and an animated image to fake the particles.

Life On The Farm - A Consistent Feel

Related Posts

 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Saturday, 26 November 2022

Captcha Image

Rick's Blog

Font size: +
Featured

Life On The Farm - Adding Animation

Life On The Farm - Adding Animation Life On The Farm - Adding Animation

With the basic game dynamics working, I started to add animation to the assets.  Blender's glTF exporter makes exporting animations to webGL relatively simple, but there were still plenty of Opportunities For Learning (OFL) to occur.  :)

 Rigid body animations (i.e., translations and rotations) work well and are mostly straight forward.  I experimented early on with the windmill spinning.  I still struggle with where Blender pulls the name for what becomes the animationClip in THREE.js.  I default to naming my Animation and Action to the same name in Blender to avoid having to guess.  

Blend shapes also seem to transfer easily.  I don't have a lot of experience using them, and haven't yet attempted to control the blend shapes from within THREE's animation system.  I have been successful at keying the blend shapes in a loop inside blender and having the result simply play within THREE.

(Depending on your browser, you may need to manually start and loop the video.)

 The video above is one of the player pieces.  The tires rotate on a looping animation.  I created a particle system for the exhaust, only to figure out exporting particles to THREE wasn't straightforward and sometimes not possible.  (More on that in a minute)  So I used the particles as a reference and made the exhaust from a single mesh and blend shapes.  I then animated the blend shape keys and exported that.

I also planned to use particles for the Winner's Circle scene at the end of the game.  I am in the process of figuring out how to create/control particles natively within the THREE.js animation system.  If I get that figured out, I'll write a post or three about that.  If not, I may end up just using a plane with transparency and an animated image to fake the particles.

Life On The Farm - A Consistent Feel

Related Posts

 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Saturday, 26 November 2022

Captcha Image