solved position of cloned merged mesh incorrect

[Topper]

Hi everyone,

new day new struggle.

Problem is, I create five boxes and merge them into a new one which well.

I don´t know if it´s a bug or not, but when I try to re-position the new mesh, it´s coordinates seem to be different.

Same behavior with clones I make of it. The (0, 0, 0) doesn´t match the (0, 0, 0) of my scene.

Here´s the code:

           // Variables for beam creation
           
           var beamCenterWidth = 2.7;
           var beamCenterHight = 0.12;
           var beamCenterDepth = 0.06;
           
           var beamSidePartWidth = 0.005;
           var beamSidePartHight = 0.24;
           var beamSidePartDepth = 0.08;
           
           var beamFrontPartWidth = 0.08;
           var beamFrontPartHight = 0.24;
           var beamFrontPartDepth = 0.005;                    
           
           // Material for beam elements
           
           var beamCenterMaterial = new BABYLON.StandardMaterial("beamCenterMaterial", scene);
           beamCenterMaterial.diffuseColor = new BABYLON.Color3(0, 0, 1);//Blue
           
           var beamSidePartsMaterial = new BABYLON.StandardMaterial("beamSidePartsMaterial", scene);
           beamSidePartsMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0);//Red    
           
           // Traverse basteln und eingügen
           
           var beamCenter = BABYLON.MeshBuilder.CreateBox("beamCenter", {height: beamCenterHight, width: beamCenterWidth, depth:beamCenterDepth});
           
                            beamCenter.position.x = 8;
                            beamCenter.position.y = 3;
                            beamCenter.position.z = 8;
                            beamCenter.pickable= true;                            
            
                            beamCenter.material=beamCenterMaterial;
                            
                // linkes L-Stück basteln und einfügen (1.1)
                
                var beamSidePartLeft = BABYLON.MeshBuilder.CreateBox("beamSidePartLeft", {height: beamSidePartHight, width: beamSidePartWidth, depth:beamSidePartDepth});
                
                            beamSidePartLeft.position.x = 9.35;
                            beamSidePartLeft.position.y = 3;
                            beamSidePartLeft.position.z = 7.99;
                            beamSidePartLeft.pickable= true;                            
            
                            beamSidePartLeft.material=beamCenterMaterial;       
                            
                // rechtes L-Stück basteln und einfügen (2.1)
                
                var beamSidePartRight = BABYLON.MeshBuilder.CreateBox("beamSidePartRight", {height: beamSidePartHight, width: beamSidePartWidth, depth:beamSidePartDepth});
                
                            beamSidePartRight.position.x = 6.65;
                            beamSidePartRight.position.y = 3;
                            beamSidePartRight.position.z = 7.99;
                            beamSidePartRight.pickable= true;                            
            
                            beamSidePartRight.material=beamCenterMaterial;  
                            
                // linkes L-Stück basteln und einfügen (1.2)
                
                var beamFrontPartLeft = BABYLON.MeshBuilder.CreateBox("beamFrontPartLeft", {height: beamFrontPartHight, width: beamFrontPartWidth, depth:beamFrontPartDepth});
                
                            beamFrontPartLeft.position.x = 9.39;
                            beamFrontPartLeft.position.y = 3;
                            beamFrontPartLeft.position.z = 8.03;
                            beamFrontPartLeft.pickable= true;                            
            
                            beamFrontPartLeft.material=beamCenterMaterial;       
                            
                // rechtes L-Stück basteln und einfügen (2.2)
                
                var beamFrontPartRight = BABYLON.MeshBuilder.CreateBox("beamFrontPartRight", {height: beamFrontPartHight, width: beamFrontPartWidth, depth:beamFrontPartDepth});
                
                            beamFrontPartRight.position.x = 6.61;
                            beamFrontPartRight.position.y = 3;
                            beamFrontPartRight.position.z = 8.03;
                            beamFrontPartRight.pickable= true;                            
            
                            beamFrontPartRight.material=beamCenterMaterial;    
                            
                // Merge all 5 single beam meshes
                           
                var meshArray = [];
                
                meshArray.push(beamCenter);                
                meshArray.push(beamSidePartLeft);    
                meshArray.push(beamSidePartRight);    
                meshArray.push(beamFrontPartLeft);    
                meshArray.push(beamFrontPartRight);
                
                
                var frontBeam = BABYLON.Mesh.MergeMeshes(meshArray, true, false, false);
                
                            frontBeam.computeWorldMatrix(true); //worldMatrix

                            frontBeam.position.x = 0;
                            frontBeam.position.y = 0;
                            frontBeam.position.z = 0;
                            frontBeam.pickable= true;                            
            
                            frontBeam.material=beamCenterMaterial;  
                            
                // Clone merged mesh
                
                var clonedBeam = frontBeam.clone("newBeam00");
                     
                    clonedBeam.position.x = 4;
                    clonedBeam.position.y = 4;
                    clonedBeam.position.z = 4;

Neither the merged mesh ("frontbeam") nor its clone ("clonedBeam") go where I want them to appear:

The (0, 0, 0) of my scene is where rack meets green Y-arrow. Getting the merged mesh´s coordinates looks like this:

What am I missing? Any help appreciated. Using BJS 3.1 by the way.

Markus

[RaananW]

Hi Markus,

basteln und einfügen! toll!

It would be great if you could reproduce this on the playgound, so we can help better. Usually, those kind of problems happen because of parenting, but I don't see any parenting in your code. It seems to be the merge, but I can't be quite sure. 

[Topper]

Hi RaananW,

sorry for my funny comments in source. ;-).

Here we are:  https://playground.babylonjs.com/#2UD2M8

[RaananW]

I like those kind of comments, no worry

Let's simplify things - https://playground.babylonjs.com/#2UD2M8#2 

Now, let's understand what is wrong. Can you pinpoint what you think is not working correctly? or did I delete too much?

[Topper]

Well, can´t tell weather it´s working now or not bc you deleted my axes.

Based on my original code i was expecting my merged mesh to appear in the (0, 0, 0) where the rack is.

In the picture above, there is a really small blue box where the axes meet. BJS shows its coords as (0, 0, 0).

Same with the merged blue mesh (the right one in the pic) which seem to have (0, 0, 0) as well.

Are there different coordinate systems in BJS?

[RaananW]

As always, you have your local and world coordinates, but if you use getAbsolutePosition() you will get the wolrd position of the mesh (which is, in this case, 0,0,0, you can check the console).

Also, if you show the 

boundingBox (fromtBean.showBoundingBox = true)  you could see that the bounding box is also correct. 

Last test - set the camera's target to be babylon's zero vector (just to be sure) - https://playground.babylonjs.com/#2UD2M8#3 , same result.

Maybe the axes themselves were transformed?

[RaananW]

Edit - yes, something is a bit odd. Need to check (both meshes have position 0,0,0 - https://playground.babylonjs.com/#2UD2M8#4 )

It is possible that the meshes are simply not centered, and that due to the merging something went wrong. Checking.

[RaananW]

Ok, understood.

You are creating non-centered meshes, and merging them. Thus forcing a pivot point for the merged object. The center-beam object should be in 0,0,0, otherwise the visible parts of the object itself will be in the wrong place.

One way to fix it is to set the center's position to 0,0,0 and adjusting the rest. the other way is setting a pivot point to your frontBeam (notice line 210 - https://playground.babylonjs.com/#2UD2M8#5 ).

[Topper]

Thanks a lot, man.

That´s exactly the trick I was looking for.

[Topper]

works perfect:

So glad that I decided to use BJS instead of anything else.