How to movable mannequin with transparent skeleton?


I need to create this kind mannequin
Запись экрана 2020-08-18 в 15.21.481

I was trying to get information from docs, but was not succeed. Now I have few questions:

  1. how can I create transparent skeleton only with borders?
  2. how can I manage to move parts of this skeleton with mouse?
    And the main question:
  3. Is it possible to make this with babylon?

Thank you in advance for your answers, links or any comments!

Hey @Online_Zakaz, welcome to the Babylon family!

Short answer…yes this is all possible with Babylon.js.

With most things related to 3D, there’s no one single way to go about accomplishing something.

The way I’d personally approach this project would be to use real geometry for the mannequin, but then use a custom shader to make it transparent/with the dotted edges like you see here.

If you’re not familiar with our Node Material Editor for creating custom shaders, then you’ll wanna check out these resources:

Also note that at the bottom of this documentation page links to a number of video tutorials that go over how to use the Node Material Editor to create custom shaders.

As for the interaction…again…no one way to accomplish something, but we have a number of resources and examples on how you can go about interacting with elements in your scene.

This doc is a good one to get started with:

And this playground example might be particularly helpful:

I hope this helps point you in a direction :slight_smile:


Hi @PirateJC, thank you for your reply.

I tried to play a bit with custom mannequin (my playground and found few questions I can’t figure out:

  1. (SOLVED - I created my own mannequin) I tried to get pickResult.pickedMesh, but it always shows me Skin when I click on mannequin. Is it only problem with this exact dummy? Can I do smth with this exact dummy to have opportunity to select bone, not skin?
  2. How can I rotate bone always in current Z axis. For example as a temporary workaround (since I can’t select exact bone, only skin) I added button to rotate shoulder. When I click it right after page loaded it rotates on Z axis (it’s ok), but later, when I rotate screen it still rotates depending on previous Z axis, but I need it to be always depending on current Z axis (graphicaly it should be always the same size). I think it happens because of BABYLON.Axis.Z here skeleton.bones[10].rotate(BABYLON.Axis.Z, pos, BABYLON.Space.WORLD, mesh);, how can I change this depending on rotation of screen?
  3. How can I manage bone intersection (how can I stop bone rotation if some part of it is on another bone?)

Thank you in advance!


I’m also studying this right now and I’m basing it on his 2 PG which is more of what can get you where you want to go I think.

BoneIKController :
BoneLookController :

Please feel free to share your progress with a PG, I would be very interested in seeing how you get there.

1 Like