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