Why are the two boxes overlapping?

This is are their properties

{
    "dimensions": {
        "width": 0.23969999999999997,
        "height": 0.23969999999999997,
        "depth": 0.5897
    },
    "color": 16080895,
    "volume": 0.03388185627299999,
    "position": {
        "x": 0,
        "y": 0,
        "z": 0
    }

}{
    "dimensions": {
        "width": 0.7989999999999999,
        "height": 0.7989999999999999,
        "depth": 0.5897
    },
    "color": 4390707,
    "volume": 0.37646506969999993,
    "position": {
        "x": 0.33969999999999997,
        "y": 0,
        "z": 0
    }
}
    const material = new THREE.MeshBasicMaterial({ color: box.color });
    const geometry = new THREE.BoxGeometry(box.dimensions.width, box.dimensions.height, box.dimensions.depth);
    geometry.translate(
      box.position.x - container_width / 2,
      box.position.y - container_height / 2,
      (box.position.z - container_depth / 2) + (bin.dimensions.depth * i * 7)
    );
    const cube = new THREE.Mesh(geometry, material);
    const edges = new THREE.EdgesGeometry(geometry);
    const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xffffff }));
    scene.add(cube)
    scene.add(line)
  }

this is how I render them

as you can see on the photo the red cube is inside the green cube. While according to their cordinates the green cube should be next to the red cube.

According to the coordinates posted above, the boxes do overlap. Here is a snapshot:

And here is what happens along the X axis when I calculate things manually:

how can I make it so that the point of origin is the bottom left edge instead of the center of the box. So that the bottom of both boxes is aligned

I would use the geometry of a unit cube translated in a way, so that (0,0,0) is where I want. Then, the actual size of a box will be managed by the scale property.

In the following example, the origin of each cube is set at the middle of its lower left edge:

thank you very much. You helped alot

1 Like