Have 'parent' GLB load and position another GLB based on the parent's position

Questions
, ,
1

Hi all!. Hi all. I working on a project that gives the ability to the user to place GLB at will. The challenge I’m facing is the following:

glb1
glb11078×607 40.2 KB

This model right here is just one GLB. What I want to do, is have the ‘parent’ GLB, which would be the bathroom sink and its ‘child’ GLB, which in this case, would be the faucet. So I would end up with 2 GLB on that scene.

I want the user to be able to assign different sorts of faucets (from a menu) to this bathroom sink dinamically. So the very same moment the user picks the faucet for the sink from the menu, I want the faucet to get loaded to the scene and be positioned at that very same place where it is located now, with the same orientation. There will also be some cases where the sink in question will not have any faucet at all.

So what is the best approach about this? I have tried to traverse the GLB looking for a certain mesh name, to later clone the mesh parameters (its position, rotation) and use them on the newly placed GLB, but how would I go about letting the GLB know which GLB ‘childs’ are available to be positioned? Is that the best approach or I’m overthinking this?

2

To resolve this problem easily, some factors may be of great help.

  1. Parts that can be replaced should be defined as separate groups inside the model. This will allow to easily replace one part with another part.
  2. Parts that can be replaced should have some identification (e.g. name). This will allow to easily find these parts in the structure of the model. If not, than you can use some other approaches, that are rather model-specific (e.g. searching for mashes with specific coordinates, or meshes with specific color, etc).
  3. Part that can be replaced (both replacers and replacees) should be compatible, i.e. compatible origin points, compatible scales, compatible orientations. This will allow easy replacement by transfering these properties from the replacee (the old object) to the replacer (the new object).
3

Hi @PavelBoytchev. Thanks for the tips.
I cannot achieve the first point, since these models are direclty exported from Blender and I import them to my project as they come.
I am currently getting these parts based on this name, so my implementation achieves point 2.
When it comes to point 3, I still have some trouble understanding how to make a model have the same origin point, scale and orientation of another model within a local space. As you saw on another post of mine, I’ve been using getWorldScale to make sure the replacer fits the local scale.

How would I go about transfering these 3 properties from replacee to replacer? I tried myself, but local position seems to be the one giving me more trouble due to different sizes between replacer and replacee.

REPLACEE SIZE -> Vector3 {x: 81.00000384729356, y: 18.000006419347912, z: 46.000003028828964}
REPLACER SIZE -> Vector3 {x: 38.99336275296417, y: 14.000005215380535, z: 38.99336959401054}

This size values were achieved like this:

    const replaceeBox = new THREE.Box3().setFromObject( replacee );
    replacee .size = replaceeBox.getSize( new THREE.Vector3() );

    const replacerBox = new THREE.Box3().setFromObject( replacer );
    replacer.size = replacerBox.getSize( new THREE.Vector3() );
4

You need to have some information about the object. If objects are replaced ‘blindly’ you will end up as the situation in the first image. The second faucet is scaled exactly as the first one, and it is placed exactly at the same place, but the final image is wrong from human perspective. The reason is that you have to map the faucets entry points.

image
image1745×499 87 KB

If you have this information, then it is possible to readjust the position of the replacer, so that its entry point matches the entry point of the replacee. In the following image the entry point is marked with a small red dot.

image
image1745×511 91.6 KB