I’m trying to create some code that populates the inside of a box with multiple boxes, these boxes are positioned perfectly when there is no gap (gap = 0) however when I introduce a gap then they are no longer centre positioned. Here is my pseudo function (basically I’ve just stripped out a lot of non-relevant stuff)
function boxSplitter(box:CustomBox)
{
let position = 0
let allGapsCombined:number
let gap:number
const amountOfBoxes:number = 7
const evenAmountOfBoxes:number = 0
const bb = new THREE.Box3().setFromObject(box.threeGroup);
let size = bb.getSize(new THREE.Vector3());
let gapInsideParentBox = 3
const width:number = size.x - gapInsideParentBox
let sizeOfContainerDimension:number = width
allGapsCombined = 3
sizeOfContainerDimension -= allGapsCombined
gap = allGapsCombined / (amountOfBoxes-1)
let sizeOfBlocksInPercentageArray:Array<number> = calcBoxes(evenAmountOfBoxes, amountOfBoxes)
for (let index = 0; index < amountOfBoxes; index++) {
const currentUnitSize = (sizeOfContainerDimension * sizeOfBlocksInPercentageArray[index]/100)
let innerBox = makeBox(insideBox, 3, 0) as CustomBox
let placement:number = position - (sizeOfContainerDimension/2 - currentUnitSize/2)-gap;
innerBox.position.x = placement
position += currentUnitSize + gap
box.threeGroup.add(innerBox!)
}
}
with no gap, boxes are perfectly centered
with allGapsCombined = 4
for some reason when it’s three blocks it centres again perfectly
But with any other number of blocks, it doesn’t work
Any idea what I’m doing wrong?