Pallet Configurator

This was my first project with Babylon.js and I really wanted to thank developers for building such a nice-to-work-with library and specially for all the work done by the community on the Play-Ground. I was able to achieve everything the project needed just looking at examples there.

Our customer (Peli) builds cases and has a set of products from very different sizes which are easily stackable on a pallet. So the application let’s the user configure which cases will fit correctly between them to set up a nice and stable pile.

The app is here: Pallet Configurator | PELI Catalogue

Just choose a pallet type, set a reasonable height like 2 - 3 meters and access the app.
In there, you can choose some cases you need to use from the upper menu, they will appear on the left and you will be able to pile cases then.

Cases can be turned left, right, added to the pallet (down arrow) or removed from the pallet. You will be signaled when case can be stacked or can’t.
There is also an Export to PDF functionality.

Thanks !!! Enjoy !!!


This is super cool and deserve a link in our homepage!


1 Like

It’s not a browser issue.

10 cm is not a reasonable width for a pallet, they use to be at least 80cm on each dimension. What I should do is add some minimum dimensions to the pallet.

Thanks !!

1 Like

It’s now up!!!

1 Like

Thanks a lot guys !!

@PirateJC : Just a small request, the app behaves better when height is set, so could you just add it to the link URL?

A “120” would just do fine, so the URL could be Configure your ISP2 pallet | PELI Catalogue

Thank you !!

1 Like

This is really cool! I am currently building a configurator that is trying to do very similar tasks. I am wondering if you can point me in the direction of how you are able to translate/rotate an added object so that it “lands” within the boundaries of a given space or on top of another object.

Side note: I love Pelican cases and this is a cool tool for the Peli site. Pelican is based in my home town of Torrance and the department I work for has a whole warehouse full of shipping cases.

1 Like

In my case the great simplification is that case sizes are all multiple of a base tile of 10x10x10. Then I do not need true collision detection but work with an imaginary 3D array. Each cell of this array keeps track if it is occupied and which box occupies it.

Then its all about position calculation and projection on the Z index. For example the calculation of the position of the projection box (that imaginary thingie which appears red or green on the floor) is done with something like this:

// currentMesh is the floating mesh you are moving
// projectionBox is the projected box on the floor

let currentPosition = currentMesh.position.clone();

// Make projectionBox fit into our grid
currentPosition.x = Math.round(currentPosition.x);
currentPosition.y = Math.round(currentPosition.y);
currentPosition.z = Math.round(currentPosition.z);

let canDrop = false;

// Start on same height as currentMesh, find which is the last height where mesh could be dropped
do {
  currentPosition.y -= 0.5;
  canDrop = CasePiler.checkCanDropAtPosition(projectionBox, currentPosition);
  if (!canDrop) {
    currentPosition.y += 0.5;
} while (currentPosition.y > 0);

projectionBox.position = currentPosition;

And when I need the placed box to appear in the selected position just clone the floating box and position it adequately:

let placedBox = currentMesh.clone();
placedBox.position = new BABYLON.Vector3(projectionBox.position.x, projectionBox.position.y, projectionBox.position.z);


A function I use in some key places in the code which was most hard to understand was “getGroundPosition” which as far as I can remember calculates the projection of a point on a plane. I used another example from the playground which I can’t find, but the most similar I can see is this one:

Try to move a chair around …

Peli products are great !!! Each time I have a meeting with them I cross my fingers to see if they give me a laptop case but still no luck !!

I hope it was useful. If you have any more things you would like to clarify go on or just message me.

Hi, Thank you for your detailed response! I really appreciate this. :smiley: