Best approach for avatar configurator

🌵 Needle Engine
1

Hi, I need help/advice in how to proceed with a project using the capabilities of Needle with Blender.

Project Idea
A Website to input data to visualize your human body. The body is supposed to look abstract and not realistic. (see Image attached). Input should work through normal HTML Input Fields and Sliders (no 3d). Values I want to be able to input are height, weight, chest-width, waist, hips, shoulderWidth, Arm Length and Age. This is for a project about visualization of bodies and how to build a nice configurator around it. Similar to this Project: Editor | Meshcapade Me

Questions:

  • What would be the best way to approach this using Needle x Blender?
  • Is it possible to use Shape Key + Drivers System to deform a mesh? Or rather a Rigged Character with a Driver System?
  • Are there any similar projects that have been done before?
  • Maybe any other possible advice you could give to a beginner :smiling_face_with_sunglasses:

Thank you so much!

image
image1920Ă—1129 59 KB

2

Hi Matti, thanks for reaching out. Here’s a quick rundown with some advice on how to tackle your avatar configurator project with Needle Engine and Blender:

  1. For the best approach, start by creating your abstract human base in Blender. Use Blender’s shape keys (morph targets) to represent adjustable attributes like height, weight, chest, waist, hips, shoulder width, arm length, and even age. Once set up, export your model as a GLB file. Needle Engine works well with glTF/GLB models, and you can then load and interactively update these morph targets via HTML inputs and sliders on your website. This basic workflow of modeling in Blender then driving shape keys/quasi-morph-targets in the web scene is a proven method in Needle projects (see (docs/index.html) for how Blender integrations can be set up).

  2. On using Shape Keys with drivers: Yes, in Blender you can use shape keys combined with drivers to drive deformations. However, remember that while the shape key data (exported as morph targets) transfers over to Three.js via Needle Engine, the internal Blender driver logic isn’t exported. That means you’ll need to replicate your driver logic in your Needle Engine component so that input changes update the corresponding morphTargetInfluences on the mesh in real time. Alternatively, while you could rig your character and use bone scaling/animations driven by a driver system in Blender, using morph targets is more straightforward for parameter-based adjustments.

  3. Regarding similar projects, many web-based avatar configurators use this approach. While there isn’t an official Needle sample solely for an avatar configurator, you can explore sample projects like the Bike Configurator or other interactive demos in the Needle samples repository (check (docs/examples.html)), which demonstrate model interactions and UI-driven parameter changes.

  4. Additional advice for a beginner:

    • Start simple: Create a prototype where one slider controls a single morph target. Once this is working, extend the system to handle more parameters.
    • Use Needle Engine’s component architecture (which is written in TypeScript) to create a dedicated “AvatarConfigurator” component. This component would listen to changes from your HTML UI (e.g., slider events) and update the respective morphTargetInfluences on your model.
    • Check Needle Engine’s documentation for component development and integration with HTML/JS interfaces to see good examples of how to wire-up UI → 3D scene interactions.
    • Finally, refer to available samples and documentation (see (docs/technical-overview.html) for technical overviews) to understand how to integrate three.js objects, GLB models, and user inputs.

I hope this gives you a good starting point. Let me know if you need further help or a code example to kick off your implementation!

1 replies left - Become PRO for more replies.
thread_Hd72o2KEk2qZaZCeXX0zvAZa
Reply to this post directly if you need further help (bottom right button)