How to sort random, variable-sized boxes with a constant separation distance?

I need to display a random number of boxes of varying size (by height, width and depth) and arrange them in an orderly fashion with a constant separation space.
I’m not sure if the problem is purely inherent to three.js or if it is more generally a mathematical algorithm.
Does anyone know of a solution or a site where I can find out information about it?

Of course, this task is not specific to three.js. You just have to apply a few simple techniques:

  1. Creation of random number in a given interval (javascript Math.random() returns rand from 0 to 1).
  2. Sorting the array (javascript arr.sort()).

You presented incomplete conditions for the problem. By what criteria should the boxes be sorted? The size of the box is determined by three parameters. Accordingly, 3 different sorts are possible. In addition, you can rank objects, for example, by their area or volume.


Thanks Yeryomin for your attention.

I’ve to rank them by their base area.

and the result should look like something like that

In this picture, the boxes are arranged in rows and columns. The relative position of an individual box is a two-dimensional vector.

At the same time, you rank the elements by their area, that is, you create a one-dimensional array that determines the position of each element. How are you going to convert the position of an element in a sorted array to a 2D position? I can’t determine the necessary rule using your picture.

I have no idea a the moment. I’m completely stuck…

You can try to use other libraries, that do the stuff you need, then use the data, they produce, to build stuff with three.js

1 Like

Super Prisoner!
that’s exactly what I was looking for.
thank you very much!
Danke Dir!

You’re welcome :slight_smile:
Und bitte schoen :beers: