Beard Grow animation from blender to three.js with material

Questions
,
#1

Hi,
I’m trying to model a growing beard in blender and then export it including materials to gltf for use in three.js, where I want to control the speed of the animation.

I’m really new to blender and would like to ask, which is the correct way to make a beard grow? I tried to use shapekeys, (animated from big to small) but in the end I just got a big clutter and the animation from small to big looked really broken.

What would be the best tool to animate it and to make it importable as gltf in three?

Thanks!

Picture of my current beard:
53

#2

I’ve continued researching and I guess one approach would be to just fade in the poligons with animation nodes:
kSETv

#3

Blender animation nodes can’t be exported to any format I’m aware of… you can re-create the effect by coding in threejs but that’s complex.

If you’ve got the effect looking correct in Blender using Shape Keys, I would definitely recommend trying to export that directly to glTF with https://github.com/KhronosGroup/glTF-Blender-Exporter or https://github.com/KhronosGroup/glTF-Blender-IO. If it looks different after exporting than it did in Blender, please file a bug on either the exporter or threejs after checking the troubleshooting section here: https://threejs.org/docs/#manual/en/introduction/Loading-3D-models.

#4

Hair and fur rendering is a very complex topic. Even modern games approximate hair and beards with textured polygons in many cases. Besides, these polygons are mostly static and not not changeable in size. A good example for this is Skyrim.

Maybe you can try it like shown in the following tutorial. It’s for hair rendering but you can use the same approach for a beard. Notice how individual polygons are used to create the beautiful hair of the girl. You can use the same approach for a beard. Just try to animated the individual polygons.