title: How to calculate 3d objects position in threejs and place the objects on scene such that multiple 3d objects do not overlap with each other
body: <p>I am working on cargo planning application and want to load the cargo in the container. I am creating the 3d model for it using threejs. I am completely new to threejs and so far have managed to create 3d objects (cargo) and palce them inside a container(another 3d object). The problem i am facing is when i add multiple 3d objects inside a container those objects overlaps with each other.
  I am not able to calculate the correct objects position that should be set to prevent this overlapping issue.</p>
  
  <p>I have just tried using the basic math to calculate the object position and it on scene.</p>
  
  <p>Here is the js fiddle for it</p>
  
  <p><a href="https://jsfiddle.net/nro48e6u/1/" rel="nofollow noreferrer">https://jsfiddle.net/nro48e6u/1/</a></p>
  
  <p>The logic for calculating the objects position is written in the addCargo function which only uses basic math. Here is the code for it</p>
  
  <pre><code>function addCargo(dimension, color, isPallete) {
  var dimensionExceed = false; // boolean value that checksifthe cargo dimensions exceed the containerdimension               
  if (objects.length == 0) {
      var geometry = new THREE.BoxGeometry(dimension.width, dimension.height, dimension.length);
      var material = new THREE.MeshBasicMaterial({
          color: color
      });
      cargo = new THREE.Mesh(geometry, material);
      wireframe = generateWireframe(geometry);
      default_box_position = {
          x: container_dimension.width / 2 - dimension.width / 2,
          y: dimension.height / 2 - container_dimension.height / 2,
          z: container_dimension.length / 2 - dimension.length / 2
      }
      cargo.position.set(default_box_position.x, default_box_position.y, default_box_position.z);
  
  } else {
      var geometry = new THREE.BoxGeometry(dimension.width, dimension.height, dimension.length);
      var material = new THREE.MeshBasicMaterial({
          color: color,
          wireframe: false
      });
      cargo = new THREE.Mesh(geometry, material);
      wireframe = generateWireframe(geometry);
      cargo.add(wireframe);
      var firstObject = objects[0];
      var xUpdated = false;
  
      position = {
          x: 0,
          y: 0,
          z: 0
      }
      var startIndex = 0;
      if (palleteDeimension.isSet) {
          position.y = palleteDeimension.height;
          startIndex = 1;
      }
      for (var i = startIndex; i &lt; objects.length; i++) {
          if (!xUpdated || i == objects.length - 1) {
              position.z += parseFloat(objects[i].geometry.parameters.depth);
              xUpdated = false;
          } else {
              xUpdated = false;
              position.z += parseFloat(objects[i].geometry.parameters.depth);
          }
          if (position.z &gt;= container_dimension.length) {
              if (position.z - parseFloat(objects[i].geometry.parameters.depth) + parseFloat(dimension.length) &lt;= container_dimension.length) {
                  position.z -= parseFloat(objects[i].geometry.parameters.depth);
              } else {
                  position.x += parseFloat(objects[i].geometry.parameters.width);
                  position.z = 0;
              }
  
          } else if (position.z + parseFloat(dimension.length) &gt; container_dimension.length) {
              xUpdated = true;
              position.x += parseFloat(dimension.width);
              position.z = 0;
          }
  
          if (position.x &gt;= container_dimension.width) {
              position.y += parseFloat(objects[i].geometry.parameters.height);
              position.x = 0;
              position.z = 0;
          } else if (position.x + parseFloat(dimension.width) &gt; container_dimension.width) {
              position.y += parseFloat(dimension.height);
              position.x = 0;
              position.z = 0;
          }
      }
      var z_pos = container_dimension.length / 2 - position.z - (dimension.length / 2);
      var y_pos = position.y - container_dimension.height / 2 + (dimension.height / 2);
      var x_pos = container_dimension.width / 2 - position.x - (dimension.width / 2);
      if (Math.abs(z_pos) &lt;= container_dimension.length / 2 &amp;&amp; position.x == 0 &amp;&amp; position.y == 0) {
          cargo.position.set(default_box_position.x, default_box_position.y, z_pos);
  
          if (firstObject.geometry.parameters.width != dimension.width)
              cargo.position.x = x_pos;
          if (firstObject.geometry.parameters.height != dimension.height)
              cargo.position.y = y_pos;
      } else if (Math.abs(y_pos) &lt;= container_dimension.height / 2 &amp;&amp; position.x == 0) {
          cargo.position.set(default_box_position.x, y_pos, z_pos);
          if (firstObject.geometry.parameters.width != dimension.width)
              cargo.position.x = x_pos;
      } else
          cargo.position.set(x_pos, y_pos, z_pos);
  }
  scene.add(cargo);
  objects.push(cargo);
  initDragCargo();
  }
  </code></pre>
  
  <p>When i add multiple cargo inside the container the cargo's are overlapping with each other. I am note sure how to get rid off this overlapping issue.</p>