LogInXavier Jack has brought the wiggle bones technique to Three.js with Wiggle, a library that makes rigged objects move smoothly and feel alive by simply manipulating the root bone.
Inspired by the Wiggle Bones Blender add-on and eponymous parametric animation technique, Developer Xavier Jack, who impressed us with real-time hand-tracking directly in the browser in the past, decided to bring it to his tool of choice – Three.js JavaScript library – and to turn the power of interactivity in real-time graphics into an epic web experience.
After showcasing it on a piece of cloth for his Awwwards 2023 talk, Xavier Jack did several more experiments and ended up supporting the Wiggle's development through a crowdfunding campaign. Thanks to all the backers, now the library is public and free to use.
Here's the video based on Xavier Jack's talk at the Awwwards 2023 conference in Amsterdam:
Wiggle is a Three.js library that makes rigged objects move softly and feel alive. The core idea of wiggle bones is that some bones are static i.e. moved or rotated manually, while the children bones are dynamic. The dynamic wiggle bones will follow the static bones and will aim for their original transform relative to the parent.
Have a look at some experiments shared by the developer:
Using Wiggle Bones requires rigging your models. If you're unfamiliar with 3D rigging, there's a video tutorial available in the campaign, guiding you through the entire process of rigging multiple objects in Blender, importing them into Three.js, and incorporating the Wiggle Bones library or you can find any third-party beginner-friendly tutorials online.
Alternatively, if you are a developer, you can collaborate with a 3D artist.
You can use this library on any platform that supports Three.js. For example, you can utilize it for 3D websites, immersive experiences, games, VR/AR applications, and other experiments.
It also includes a working codesandbox demo:
Feel free to give any feedback to the developer and share with him your creative projects made with Wiggle.
Learn more about Wiggle here and follow Xavier Jack on X/Twitter for updates and more incredible Three.js experiments. Also, don't forget to join our 80 Level Talent platform and our Telegram channel, follow us on Instagram, Twitter, LinkedIn, TikTok, and Reddit, where we share breakdowns, the latest news, awesome artworks, and more.