Dynamically adjusting box sizes and distances in Three.js for a 3D cabinet display

Questions
1

I’m currently working on a project using Three.js and I have encountered a challenge that I could use some guidance with. Here’s the problem:

I have a .gltf file representing a 3D cabinet, and I’m using Three.js to load and display it in my application. Within this cabinet, I want to showcase multiple boxes placed on the shelves. The catch is that the shelves have a fixed length, and I need to be able to add a dynamic number of boxes that can fit within the available space.

Ideally, I would like the size of the boxes to adjust automatically based on the number of boxes present. Additionally, the distances between the boxes should also adapt accordingly to ensure they all fit within the shelf space. I’m wondering if Three.js provides an easy solution for this, or if scaling is the way to go.

For example, if the length of the shelf is 0.82, how would you approach dynamically adjusting the box sizes and distances to accommodate, let’s say, a range of 1 to 20 or 30 boxes?

I would greatly appreciate any insights, tips, or code snippets that could help me tackle this challenge. Thank you in advance for your assistance and expertise!

1 Like
2

I’d do something like this:

  • start with the original boxes (original sizes and original positions)
  • put all boxes in a THREE.Group
  • measure the span of the group (both horizontal sizes)
  • calculate a scale factor that will proportionally scale the group so that it fits in the shelf
  • apply that scale

A more complex solution would be to rearrange boxes as you add new boxes up to the moment when this is not possible. And only then reduce the sizes of a few boxes, so that a new box can fit in betwen.