Refactor MaterialAnimator: optimize material positioning logic, streamline grid generation, and enhance layout calculations for improved visual representation.

This commit is contained in:
Vishnu 2025-05-10 12:26:50 +05:30
parent 226f6d7b29
commit 4e0cc7f39d
1 changed files with 21 additions and 19 deletions

View File

@ -9,6 +9,7 @@ const MaterialAnimator = ({
const meshRef = useRef<any>(null!);
const [hasLoad, setHasLoad] = useState(false);
const { scene } = useThree();
const padding = 0.1;
useEffect(() => {
setHasLoad(storage.currentLoad > 0);
@ -21,42 +22,43 @@ const MaterialAnimator = ({
const materialPositions = useMemo(() => {
if (!storageModel || storage.currentMaterials.length === 0) return [];
// Get the bounding box of the model
const box = new Box3().setFromObject(storageModel);
const size = new Vector3();
box.getSize(size);
const padding = 0.1; // space between items
const matCount = storage.currentMaterials.length;
// Estimate how many columns and rows fit (try square layout)
const aspectRatio = size.x / size.z;
const cols = Math.ceil(Math.sqrt(matCount * aspectRatio));
const rows = Math.ceil(matCount / cols);
// Assumed size each material needs in world units
const materialWidth = 0.45;
const materialDepth = 0.45;
const materialHeight = 0.3;
const cellWidth = size.x / cols;
const cellDepth = size.z / rows;
const cols = Math.floor(size.x / materialWidth);
const rows = Math.floor(size.z / materialDepth);
const itemsPerLayer = cols * rows;
const origin = new Vector3(
box.min.x + cellWidth / 2,
box.max.y + 0, // place slightly above the model
box.min.z + cellDepth / 2
box.min.x + materialWidth / 2,
box.max.y + padding, // slightly above the surface
box.min.z + materialDepth / 2
);
// Generate grid positions
return Array.from({ length: matCount }, (_, i) => {
const row = Math.floor(i / cols);
const col = i % cols;
const layer = Math.floor(i / itemsPerLayer);
const layerIndex = i % itemsPerLayer;
const row = Math.floor(layerIndex / cols);
const col = layerIndex % cols;
return new Vector3(
origin.x + col * cellWidth,
origin.y,
origin.z + row * cellDepth
origin.x + col * materialWidth,
origin.y + layer * (materialHeight + padding),
origin.z + row * materialDepth
);
});
}, [storageModel, storage.currentMaterials]);
return (
<>
<group position={[0, -padding, 0]}>
{hasLoad &&
storage.currentMaterials.map((mat, index) => (
<MaterialModel
@ -66,7 +68,7 @@ const MaterialAnimator = ({
position={materialPositions[index]}
/>
))}
</>
</group>
);
};