solved when using a MeshBuilder does .position set an edge or the center?

[Yazheirx]

Considering this code:

var shippingContainer = BABYLON.MeshBuilder.CreateBox("Box", {
            depth: 3,
            width: 2,
            height: 2
}, scene);
shippingContainer.position = new BABYLON.Vector3(0, 2, 0);

Have I moved a corner of the box to 0,2,0, and edge, or the center mass?

Are there any good playgrounds that would clarify this?

[Yazheirx]

Ok, I have found that .position moves the "center of the mesh".  

http://doc.babylonjs.com/babylon101/position.

As I am trying to move boxes to touch one another I am going to try to read the pivot document referenced to figure out how to get edges to touch

http://doc.babylonjs.com/how_to/pivots

Does anyone know of a page or playground that animates items to or from a touching, but not collision, state?

[JohnK]

Hi @Yazheirx and welcome to the forum. Don't think the use of pivots will help for your use case. It is more to do with mathematics. Just consider a move in the x axis only with box 1 to the left of box2

box 1 having x position x1 and width 2 * w1 and box 2 having x position x2 and width 2 * w2

Start with the right side of box1 not touching the left side of box2 then x1 + w1 < x2 - w2. Let both boxes move with the same increments d and box1 move n1 times and box2 move n2 times.

For them to touch x1 + w1 + n1 * d = x2 - w2 - n2 * d.

Basically you are moving the boxes on a grid system of size d with box positions and dimensions multiple of d.

[Yazheirx]

@JohnK before calling it a night, I came to the same conclusion about pivots. As my end goal is to combine multiple box sizes to make a single shape. I think I am going to have to create a function to translate the movement off of a standard point on each box (let’s say the front lower left hand corner) to move things in a  predictable method. 

To visualize the problem set image you have three boxes 

1. 1x1x2
2. 1x1x2
3. 1x2x2

with proper manipulation they should be able to be assembled in a 2x2x2 cube. 

Edited October 27, 2018 by Yazheirx
Early morning punctuation is not my friend

[ssaket]

This might help you https://playground.babylonjs.com/ts.html#H6RDU5

 

EDIT: I took my rectangle overlap algo and directly plugged it into PG, works only for x-z, but you can get the idea. Let me know if any further help is required like checking in y direction. Moreover there's a built in intersect function https://doc.babylonjs.com/api/classes/babylon.boundingbox#intersects.. May be you should check that out.... I am too hungry.. logging out 

[JohnK]

45 minutes ago, Yazheirx said:

I think I am going to have to create a function to translate the movement off of a standard point on each box (let’s say the front lower left hand corner) to move things in a  predictable method.

It is entirely up to you but I would say the center of the box is already a standard point for all boxes and if you translate the lower left hand corner of the box by (x, y, z) then all points on the box, including the center, are translated by (x, y, z)

[Yazheirx]

53 minutes ago, JohnK said:

the center of the box is already a standard point for all boxes

Maybe my question should be:  If you are attempting to manipulate multiple, dissimilarly dimensioned, boxes - how do you compensate for the differences in the faces to the center to allow two faces to be aligned

I am just thinking out loud here let's take the same three boxes from an earlier entry:

1. 1x1x2
2. 1x1x2
3. 1x2x2

and let's assume I want to move box1 to be next to box3. By next to I mean: front faces aligned lengths of two (2) side by side, and the bottoms aligned (so I can later put box2 on top of box 1 to finish my cube).  I will put something in a playground soon and post it

[Yazheirx]

I can now align any faces I want.  https://www.babylonjs-playground.com/#GVBL74#3

Here is the key code:

function alignFronts(targetBox, movingBox) {
    // leave the X and Y where they are
    targetX = movingBox.position.x;
    targetY = movingBox.position.y;
    //only move the Z
    targetZ = targetBox.position.z + targetBox.getBoundingInfo().boundingBox.maximumWorld.z - movingBox.getBoundingInfo().boundingBox.maximumWorld.z;
    movingBox.position = new BABYLON.Vector3(targetX, targetY, targetZ);

};

and here is the whiteboard diagram I had to draw to figure it out in the end:  Let me know if anyone can find a more robust solution.

[ssaket]

If I am right then you basically want a snapping algorithm >> right >?? Have a look at this -

 

[Yazheirx]

I will look at the snapping code in the future when the product moves in to "Gamification" mode. But for now my goal is to show a set of random items allow the user to either click each item, or click a UI button to show where each item will go relative to the rest of the items.  Basically step by step visual packing instructions

[Yazheirx]

Cube done.  See https://www.babylonjs-playground.com/#GVBL74#4 for my final alignment code.  Note: I only did Align Fronts, Backs, Tops, Bottoms, and LeftFaceToRightFace.  Obviously there are all the other two more side alignments (lefts and rights) and 5 more face alignments to do, but if anyone needs this solution in the future a modification of the whiteboard math posted above should allow you to  come up with it quickly.