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.