My current approach involves adding boxes to the scene based on specific dimensions for height, width, and depth, and it works perfectly when the boxes are all square.
https://i.sstatic.net/HdDSX.png
However, the issue arises when I try to use a rectangular form instead:
https://i.sstatic.net/GAUxa.png
Being relatively new to this, I'm wondering how I can rectify this problem?
private addCubes() {
// geometry
const geometry = new THREE.BoxGeometry(1,4,4);
const edgesGeometry = new THREE.EdgesGeometry(geometry);
// material
const material = new THREE.MeshBasicMaterial({
color: 0x0d6efd,
});
const edgesMaterial = new THREE.LineBasicMaterial({
color: 0x000000
});
// positions
for (let x = 0; x < 2; x++) {
for (let y = 0; y < 1; y++) {
for (let z = 0; z < 2; z++) {
// mesh
const mesh = new THREE.Mesh(geometry, material);
mesh.scale.multiplyScalar(0.9);
mesh.position.set(x, y, z);
this.scene.add(mesh);
const lines = new THREE.LineSegments(edgesGeometry, edgesMaterial);
mesh.add(lines);
}
}
}
}